scottk/wlan-cloud-ui
1
0
Fork 0
mirror of https://github.com/Telecominfraproject/wlan-cloud-ui.git synced 2025-11-03 12:18:08 +00:00
Code Issues Packages Projects Releases 7 Wiki Activity

created high order query component handling errors

Browse Source
This commit is contained in:
chris-cosentino
2020-12-07 17:50:28 -05:00
parent 92b522e14b
commit 2b80c7cb82
10 changed files with 1073 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/containers/Accounts/index.js
View File

@@ -1,11 +1,11 @@
import React, { useContext } from 'react';
import { useQuery, useMutation, gql } from '@apollo/client';
import { Alert, notification } from 'antd';
import { Redirect } from 'react-router-dom';
import { useMutation, gql } from '@apollo/client';
import { notification } from 'antd';
import { Accounts as AccountsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { Accounts as AccountsPage } from '@tip-wlan/wlan-cloud-ui-library';
import UserContext from 'contexts/UserContext';
import { withQuery } from 'containers/QueryWrapper';
const GET_ALL_USERS = gql`
query GetAllUsers($customerId: ID!, $context: JSONObject) {
@@ -66,12 +66,10 @@ const DELETE_USER = gql`
}
`;
const Accounts = () => {
const Accounts = withQuery(
({ data, fetchMore, refetch }) => {
const { customerId } = useContext(UserContext);
const { data, loading, error, refetch, fetchMore } = useQuery(GET_ALL_USERS, {
variables: { customerId },
});
const [createUser] = useMutation(CREATE_USER);
const [updateUser] = useMutation(UPDATE_USER);
const [deleteUser] = useMutation(DELETE_USER);
@@ -163,18 +161,6 @@ const Accounts = () => {
);
};
if (loading) {
return <Loading />;
}
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return <Alert message="Error" description="Failed to load Users." type="error" showIcon />;
}
return (
<AccountsPage
data={data.getAllUsers.items}
@@ -185,5 +171,12 @@ const Accounts = () => {
isLastPage={data.getAllUsers.context.lastPage}
/>
);
};
},
GET_ALL_USERS,
() => {
const { customerId } = useContext(UserContext);
return { customerId };
}
);
export default Accounts;

37
app/containers/Alarms/index.js
View File

@@ -1,8 +1,8 @@
import React, { useContext } from 'react';
import { useQuery, gql } from '@apollo/client';
import { Alert, notification } from 'antd';
import { Alarms as AlarmsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { Redirect } from 'react-router-dom';
import { gql } from '@apollo/client';
import { notification } from 'antd';
import { Alarms as AlarmsPage } from '@tip-wlan/wlan-cloud-ui-library';
import { withQuery } from 'containers/QueryWrapper';
import UserContext from 'contexts/UserContext';
@@ -24,13 +24,8 @@ const GET_ALL_ALARMS = gql`
}
`;
const Alarms = () => {
const { customerId } = useContext(UserContext);
const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_ALARMS, {
variables: { customerId },
errorPolicy: 'all',
});
const Alarms = withQuery(
({ data, refetch, fetchMore }) => {
const handleOnReload = () => {
refetch()
.then(() => {
@@ -67,18 +62,6 @@ const Alarms = () => {
}
};
if (loading) {
return <Loading />;
}
if (error && !data?.getAllAlarms?.items) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return <Alert message="Error" description="Failed to load alarms." type="error" showIcon />;
}
return (
<AlarmsPage
data={data.getAllAlarms.items}
@@ -87,6 +70,12 @@ const Alarms = () => {
isLastPage={data.getAllAlarms.context.lastPage}
/>
);
};
},
GET_ALL_ALARMS,
() => {
const { customerId } = useContext(UserContext);
return { customerId, errorPolicy: 'all' };
}
);
export default Alarms;

40
app/containers/Dashboard/index.js
View File

@@ -1,11 +1,10 @@
import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
import { Alert } from 'antd';
import moment from 'moment';
import { useQuery } from '@apollo/client';
import { Dashboard as DashboardPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { Dashboard as DashboardPage } from '@tip-wlan/wlan-cloud-ui-library';
import UserContext from 'contexts/UserContext';
import { FILTER_SYSTEM_EVENTS, GET_ALL_STATUS } from 'graphql/queries';
import { Redirect } from 'react-router-dom';
import { withQuery } from 'containers/QueryWrapper';
function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
@@ -47,7 +46,9 @@ const lineChartConfig = [
},
];
const Dashboard = () => {
const Dashboard = withQuery(
({ data }) => {
const { customerId } = useContext(UserContext);
const initialGraphTime = useRef({
toTime: moment()
.valueOf()
@@ -57,10 +58,6 @@ const Dashboard = () => {
.valueOf()
.toString(),
});
const { customerId } = useContext(UserContext);
const { loading, error, data } = useQuery(GET_ALL_STATUS, {
variables: { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] },
});
const [lineChartData, setLineChartData] = useState({
inservicesAPs: {
@@ -162,7 +159,10 @@ const Dashboard = () => {
traffic: {
trafficBytesDownstream: {
...prev.traffic.trafficBytesDownstream,
value: [...prev.traffic.trafficBytesDownstream.value, ...trafficBytesDownstreamData],
value: [
...prev.traffic.trafficBytesDownstream.value,
...trafficBytesDownstreamData,
],
},
trafficBytesUpstream: {
...prev.traffic.trafficBytesUpstream,
@@ -240,7 +240,8 @@ const Dashboard = () => {
}, [data]);
const pieChartsData = useMemo(() => {
const { clientCountPerOui, equipmentCountPerOui } = data?.getAllStatus?.items[0]?.details || {};
const { clientCountPerOui, equipmentCountPerOui } =
data?.getAllStatus?.items[0]?.details || {};
return [
{ title: 'AP Vendors', ...equipmentCountPerOui },
@@ -248,17 +249,6 @@ const Dashboard = () => {
];
}, [data]);
if (loading) {
return <Loading />;
}
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return <Alert message="Error" description="Failed to load Dashboard" type="error" showIcon />;
}
return (
<DashboardPage
statsCardDetails={[
@@ -286,6 +276,12 @@ const Dashboard = () => {
lineChartError={metricsError}
/>
);
};
},
GET_ALL_STATUS,
() => {
const { customerId } = useContext(UserContext);
return { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] };
}
);
export default Dashboard;

32
app/containers/EditAccount/index.js
View File

@@ -1,8 +1,8 @@
import React, { useContext } from 'react';
import { useMutation, useQuery, gql } from '@apollo/client';
import { notification, Alert } from 'antd';
import { EditAccount as EditAccountPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { Redirect } from 'react-router-dom';
import { useMutation, gql } from '@apollo/client';
import { notification } from 'antd';
import { EditAccount as EditAccountPage } from '@tip-wlan/wlan-cloud-ui-library';
import { withQuery } from 'containers/QueryWrapper';
import UserContext from 'contexts/UserContext';
@@ -44,9 +44,9 @@ const UPDATE_USER = gql`
}
`;
const EditAccount = () => {
const EditAccount = withQuery(
({ data }) => {
const { id, email } = useContext(UserContext);
const { loading, error, data } = useQuery(GET_USER, { variables: { id } });
const [updateUser] = useMutation(UPDATE_USER);
const handleSubmit = newPassword => {
@@ -76,19 +76,13 @@ const EditAccount = () => {
);
};
if (loading) {
return <Loading />;
}
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return <Alert message="Error" description="Failed to load User." type="error" showIcon />;
}
return <EditAccountPage onSubmit={handleSubmit} email={email} />;
};
},
GET_USER,
() => {
const { id } = useContext(UserContext);
return { id };
}
);
export default EditAccount;

36
app/containers/Network/index.js
View File

@@ -1,15 +1,16 @@
import React, { useMemo, useContext, useState } from 'react';
import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
import { Alert, notification } from 'antd';
import { notification } from 'antd';
import _ from 'lodash';
import { Network as NetworkPage, PopoverMenu, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { Network as NetworkPage, PopoverMenu } from '@tip-wlan/wlan-cloud-ui-library';
import AccessPointDetails from 'containers/Network/containers/AccessPointDetails';
import AccessPoints from 'containers/Network/containers/AccessPoints';
import ClientDevices from 'containers/Network/containers/ClientDevices';
import ClientDeviceDetails from 'containers/Network/containers/ClientDeviceDetails';
import BulkEditAccessPoints from 'containers/Network/containers/BulkEditAccessPoints';
import { withQuery } from 'containers/QueryWrapper';
import UserContext from 'contexts/UserContext';
import {
@@ -26,12 +27,11 @@ import {
} from 'graphql/mutations';
import { updateQueryGetAllProfiles } from 'graphql/functions';
const Network = () => {
const Network = withQuery(
({ data, refetch }) => {
const { path } = useRouteMatch();
const { customerId } = useContext(UserContext);
const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
variables: { customerId },
});
const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
GET_ALL_PROFILES(),
{
@@ -254,18 +254,6 @@ const Network = () => {
data,
]);
if (loading) {
return <Loading />;
}
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return <Alert message="Error" description="Failed to load locations." type="error" showIcon />;
}
return (
<NetworkPage
onSelect={onSelect}
@@ -285,7 +273,9 @@ const Network = () => {
onEditLocation={handleEditLocation}
onDeleteLocation={handleDeleteLocation}
onCreateEquipment={handleCreateEquipment}
profiles={(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []}
profiles={
(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []
}
loadingProfile={loadingProfile}
errorProfile={errorProfile}
onFetchMoreProfiles={handleFetchProfiles}
@@ -325,6 +315,12 @@ const Network = () => {
</Switch>
</NetworkPage>
);
};
},
GET_ALL_LOCATIONS,
() => {
const { customerId } = useContext(UserContext);
return { customerId };
}
);
export default Network;

35
app/containers/ProfileDetails/index.js
View File

@@ -1,13 +1,14 @@
import React, { useState, useContext } from 'react';
import { useParams, Redirect } from 'react-router-dom';
import { useQuery, useMutation, gql } from '@apollo/client';
import { Alert, notification } from 'antd';
import { ProfileDetails as ProfileDetailsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { notification } from 'antd';
import { ProfileDetails as ProfileDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
import UserContext from 'contexts/UserContext';
import { GET_ALL_PROFILES } from 'graphql/queries';
import { FILE_UPLOAD } from 'graphql/mutations';
import { updateQueryGetAllProfiles } from 'graphql/functions';
import { withQuery } from 'containers/QueryWrapper';
const GET_PROFILE = gql`
query GetProfile($id: ID!) {
@@ -68,17 +69,13 @@ const DELETE_PROFILE = gql`
}
`;
const ProfileDetails = () => {
const ProfileDetails = withQuery(
({ data }) => {
const { customerId } = useContext(UserContext);
const { id } = useParams();
const [redirect, setRedirect] = useState(false);
const { loading, error, data } = useQuery(GET_PROFILE, {
variables: { id },
fetchPolicy: 'network-only',
});
const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
variables: { customerId, type: 'ssid' },
});
@@ -216,20 +213,6 @@ const ProfileDetails = () => {
return true;
};
if (loading) {
return <Loading />;
}
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return (
<Alert message="Error" description="Failed to load profile data." type="error" showIcon />
);
}
if (redirect) {
return <Redirect to="/profiles" />;
}
@@ -253,6 +236,12 @@ const ProfileDetails = () => {
onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
/>
);
};
},
GET_PROFILE,
() => {
const { id } = useParams();
return { id, fetchPolicy: 'network-only' };
}
);
export default ProfileDetails;

42
app/containers/Profiles/index.js
View File

@@ -1,12 +1,13 @@
import React, { useContext, useEffect } from 'react';
import { useQuery, useMutation, gql } from '@apollo/client';
import { useLocation, Redirect } from 'react-router-dom';
import { Alert, notification } from 'antd';
import { Profile as ProfilePage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { useMutation, gql } from '@apollo/client';
import { useLocation } from 'react-router-dom';
import { notification } from 'antd';
import { Profile as ProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
import { GET_ALL_PROFILES } from 'graphql/queries';
import { updateQueryGetAllProfiles } from 'graphql/functions';
import UserContext from 'contexts/UserContext';
import { withQuery } from 'containers/QueryWrapper';
const DELETE_PROFILE = gql`
mutation DeleteProfile($id: ID!) {
@@ -16,16 +17,10 @@ const DELETE_PROFILE = gql`
}
`;
const Profiles = () => {
const { customerId } = useContext(UserContext);
const { loading, error, data, refetch, fetchMore } = useQuery(
GET_ALL_PROFILES(`equipmentCount`),
{
variables: { customerId },
fetchPolicy: 'network-only',
}
);
const Profiles = withQuery(
({ data, fetchMore, refetch }) => {
const [deleteProfile] = useMutation(DELETE_PROFILE);
const { customerId } = useContext(UserContext);
const location = useLocation();
useEffect(() => {
@@ -86,19 +81,6 @@ const Profiles = () => {
})
);
};
if (loading) {
return <Loading />;
}
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return <Alert message="Error" description="Failed to load profiles." type="error" showIcon />;
}
return (
<ProfilePage
data={data.getAllProfiles.items}
@@ -108,6 +90,12 @@ const Profiles = () => {
onLoadMore={handleLoadMore}
/>
);
};
},
GET_ALL_PROFILES(`equipmentCount`),
() => {
const { customerId } = useContext(UserContext);
return { customerId, fetchPolicy: 'network-only' };
}
);
export default Profiles;

25
app/containers/QueryWrapper/index.js Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import { Alert } from 'antd';
import { Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { useQuery } from '@apollo/client';
import { Redirect } from 'react-router-dom';
export const withQuery = (Comp, query, getVariables) => props => {
const { loading, error, data, refetch, fetchMore } = useQuery(query, {
variables: getVariables(),
});
if (loading) {
return <Loading />;
}
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return <Alert message="Error" description="Failed to load profiles." type="error" showIcon />;
}
return <Comp {...props} data={data} fetchMore={fetchMore} refetch={refetch} />;
};

34
app/containers/System/containers/AutoProvision/index.js
View File

@@ -1,18 +1,16 @@
import React, { useContext } from 'react';
import { useQuery, useMutation } from '@apollo/client';
import { Alert, notification } from 'antd';
import { AutoProvision as AutoProvisionPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { Redirect } from 'react-router-dom';
import { notification } from 'antd';
import { AutoProvision as AutoProvisionPage } from '@tip-wlan/wlan-cloud-ui-library';
import UserContext from 'contexts/UserContext';
import { GET_CUSTOMER, GET_ALL_LOCATIONS, GET_ALL_PROFILES } from 'graphql/queries';
import { UPDATE_CUSTOMER } from 'graphql/mutations';
import { withQuery } from 'containers/QueryWrapper';
const AutoProvision = () => {
const AutoProvision = withQuery(
({ data, refetch }) => {
const { customerId } = useContext(UserContext);
const { data, loading, error, refetch } = useQuery(GET_CUSTOMER, {
variables: { id: customerId },
});
const [updateCustomer] = useMutation(UPDATE_CUSTOMER);
const { data: dataLocation, loading: loadingLoaction, error: errorLocation } = useQuery(
@@ -61,20 +59,6 @@ const AutoProvision = () => {
);
};
if (loading) {
return <Loading />;
}
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return (
<Alert message="Error" description="Failed to load Customer Data." type="error" showIcon />
);
}
return (
<AutoProvisionPage
data={data && data.getCustomer}
@@ -87,6 +71,12 @@ const AutoProvision = () => {
onUpdateCustomer={handleUpdateCustomer}
/>
);
};
},
GET_CUSTOMER,
() => {
const { customerId } = useContext(UserContext);
return { id: customerId };
}
);
export default AutoProvision;

34
app/containers/System/containers/BlockedList/index.js
View File

@@ -1,17 +1,15 @@
import React, { useContext } from 'react';
import { useQuery, useMutation } from '@apollo/client';
import { Alert, notification } from 'antd';
import { BlockedList as BlockedListPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
import { useMutation } from '@apollo/client';
import { notification } from 'antd';
import { BlockedList as BlockedListPage } from '@tip-wlan/wlan-cloud-ui-library';
import { GET_BLOCKED_CLIENTS } from 'graphql/queries';
import { UPDATE_CLIENT, ADD_BLOCKED_CLIENT } from 'graphql/mutations';
import { Redirect } from 'react-router-dom';
import UserContext from 'contexts/UserContext';
import { withQuery } from 'containers/QueryWrapper';
const BlockedList = () => {
const BlockedList = withQuery(
({ refetch, data }) => {
const { customerId } = useContext(UserContext);
const { data, error, loading, refetch } = useQuery(GET_BLOCKED_CLIENTS, {
variables: { customerId },
});
const [addClient] = useMutation(ADD_BLOCKED_CLIENT);
const [updateClient] = useMutation(UPDATE_CLIENT);
@@ -60,18 +58,6 @@ const BlockedList = () => {
);
};
if (loading) return <Loading />;
if (error) {
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
return <Redirect to="/login" />;
}
return (
<Alert message="Error" description="Failed to load Client Data." type="error" showIcon />
);
}
return (
<BlockedListPage
data={data && data.getBlockedClients}
@@ -79,6 +65,12 @@ const BlockedList = () => {
onAddClient={handleAddClient}
/>
);
};
},
GET_BLOCKED_CLIENTS,
() => {
const { customerId } = useContext(UserContext);
return customerId;
}
);
export default BlockedList;