mirror of
https://github.com/Telecominfraproject/wlan-cloud-ui.git
synced 2025-11-01 19:27:51 +00:00
created high order query component handling errors
This commit is contained in:
chris-cosentino
@@ -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,124 +66,117 @@ const DELETE_USER = gql`
|
||||
}
|
||||
`;
|
||||
|
||||
const Accounts = () => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
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);
|
||||
const [createUser] = useMutation(CREATE_USER);
|
||||
const [updateUser] = useMutation(UPDATE_USER);
|
||||
const [deleteUser] = useMutation(DELETE_USER);
|
||||
|
||||
const handleLoadMore = () => {
|
||||
if (!data.getAllUsers.context.lastPage) {
|
||||
fetchMore({
|
||||
variables: { context: data.getAllUsers.context },
|
||||
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||||
const previousEntry = previousResult.getAllUsers;
|
||||
const newItems = fetchMoreResult.getAllUsers.items;
|
||||
const handleLoadMore = () => {
|
||||
if (!data.getAllUsers.context.lastPage) {
|
||||
fetchMore({
|
||||
variables: { context: data.getAllUsers.context },
|
||||
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||||
const previousEntry = previousResult.getAllUsers;
|
||||
const newItems = fetchMoreResult.getAllUsers.items;
|
||||
|
||||
return {
|
||||
getAllUsers: {
|
||||
context: fetchMoreResult.getAllUsers.context,
|
||||
items: [...previousEntry.items, ...newItems],
|
||||
__typename: previousEntry.__typename,
|
||||
},
|
||||
};
|
||||
return {
|
||||
getAllUsers: {
|
||||
context: fetchMoreResult.getAllUsers.context,
|
||||
items: [...previousEntry.items, ...newItems],
|
||||
__typename: previousEntry.__typename,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateUser = (email, password, role) => {
|
||||
createUser({
|
||||
variables: {
|
||||
username: email,
|
||||
password,
|
||||
role,
|
||||
customerId,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateUser = (email, password, role) => {
|
||||
createUser({
|
||||
variables: {
|
||||
username: email,
|
||||
password,
|
||||
role,
|
||||
customerId,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Account successfully created.',
|
||||
});
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Account could not be created.',
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Account successfully created.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Account could not be created.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
|
||||
updateUser({
|
||||
variables: {
|
||||
id,
|
||||
username: email,
|
||||
password,
|
||||
role,
|
||||
customerId,
|
||||
lastModifiedTimestamp,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Account successfully updated.',
|
||||
});
|
||||
const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
|
||||
updateUser({
|
||||
variables: {
|
||||
id,
|
||||
username: email,
|
||||
password,
|
||||
role,
|
||||
customerId,
|
||||
lastModifiedTimestamp,
|
||||
},
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Account could not be updated.',
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Account successfully updated.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Account could not be updated.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeleteUser = id => {
|
||||
deleteUser({ variables: { id } })
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Account successfully deleted.',
|
||||
});
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Account could not be deleted.',
|
||||
const handleDeleteUser = id => {
|
||||
deleteUser({ variables: { id } })
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Account successfully deleted.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Account could not be deleted.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
return (
|
||||
<AccountsPage
|
||||
data={data.getAllUsers.items}
|
||||
onLoadMore={handleLoadMore}
|
||||
onCreateUser={handleCreateUser}
|
||||
onEditUser={handleEditUser}
|
||||
onDeleteUser={handleDeleteUser}
|
||||
isLastPage={data.getAllUsers.context.lastPage}
|
||||
/>
|
||||
);
|
||||
},
|
||||
GET_ALL_USERS,
|
||||
() => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
return { customerId };
|
||||
}
|
||||
);
|
||||
|
||||
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}
|
||||
onLoadMore={handleLoadMore}
|
||||
onCreateUser={handleCreateUser}
|
||||
onEditUser={handleEditUser}
|
||||
onDeleteUser={handleDeleteUser}
|
||||
isLastPage={data.getAllUsers.context.lastPage}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export default Accounts;
|
||||
|
||||
@@ -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,69 +24,58 @@ 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 handleOnReload = () => {
|
||||
refetch()
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Alarms reloaded.',
|
||||
});
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Alarms could not be reloaded.',
|
||||
const Alarms = withQuery(
|
||||
({ data, refetch, fetchMore }) => {
|
||||
const handleOnReload = () => {
|
||||
refetch()
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Alarms reloaded.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Alarms could not be reloaded.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleLoadMore = () => {
|
||||
if (!data.getAllAlarms.context.lastPage) {
|
||||
fetchMore({
|
||||
variables: { context: data.getAllAlarms.context },
|
||||
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||||
const previousEntry = previousResult.getAllAlarms;
|
||||
const newItems = fetchMoreResult.getAllAlarms.items;
|
||||
const handleLoadMore = () => {
|
||||
if (!data.getAllAlarms.context.lastPage) {
|
||||
fetchMore({
|
||||
variables: { context: data.getAllAlarms.context },
|
||||
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||||
const previousEntry = previousResult.getAllAlarms;
|
||||
const newItems = fetchMoreResult.getAllAlarms.items;
|
||||
|
||||
return {
|
||||
getAllAlarms: {
|
||||
context: fetchMoreResult.getAllAlarms.context,
|
||||
items: [...previousEntry.items, ...newItems],
|
||||
__typename: previousEntry.__typename,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
return {
|
||||
getAllAlarms: {
|
||||
context: fetchMoreResult.getAllAlarms.context,
|
||||
items: [...previousEntry.items, ...newItems],
|
||||
__typename: previousEntry.__typename,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
return (
|
||||
<AlarmsPage
|
||||
data={data.getAllAlarms.items}
|
||||
onReload={handleOnReload}
|
||||
onLoadMore={handleLoadMore}
|
||||
isLastPage={data.getAllAlarms.context.lastPage}
|
||||
/>
|
||||
);
|
||||
},
|
||||
GET_ALL_ALARMS,
|
||||
() => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
return { customerId, errorPolicy: 'all' };
|
||||
}
|
||||
|
||||
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}
|
||||
onReload={handleOnReload}
|
||||
onLoadMore={handleLoadMore}
|
||||
isLastPage={data.getAllAlarms.context.lastPage}
|
||||
/>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default Alarms;
|
||||
|
||||
@@ -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,245 +46,242 @@ const lineChartConfig = [
|
||||
},
|
||||
];
|
||||
|
||||
const Dashboard = () => {
|
||||
const initialGraphTime = useRef({
|
||||
toTime: moment()
|
||||
.valueOf()
|
||||
.toString(),
|
||||
fromTime: moment()
|
||||
.subtract(24, 'hours')
|
||||
.valueOf()
|
||||
.toString(),
|
||||
});
|
||||
const { customerId } = useContext(UserContext);
|
||||
const { loading, error, data } = useQuery(GET_ALL_STATUS, {
|
||||
variables: { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] },
|
||||
});
|
||||
const Dashboard = withQuery(
|
||||
({ data }) => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
const initialGraphTime = useRef({
|
||||
toTime: moment()
|
||||
.valueOf()
|
||||
.toString(),
|
||||
fromTime: moment()
|
||||
.subtract(24, 'hours')
|
||||
.valueOf()
|
||||
.toString(),
|
||||
});
|
||||
|
||||
const [lineChartData, setLineChartData] = useState({
|
||||
inservicesAPs: {
|
||||
key: 'Inservice APs',
|
||||
value: [],
|
||||
},
|
||||
clientDevices: {
|
||||
is2dot4GHz: {
|
||||
key: USER_FRIENDLY_RADIOS.is2dot4GHz,
|
||||
const [lineChartData, setLineChartData] = useState({
|
||||
inservicesAPs: {
|
||||
key: 'Inservice APs',
|
||||
value: [],
|
||||
},
|
||||
is5GHz: {
|
||||
key: USER_FRIENDLY_RADIOS.is5GHz,
|
||||
value: [],
|
||||
clientDevices: {
|
||||
is2dot4GHz: {
|
||||
key: USER_FRIENDLY_RADIOS.is2dot4GHz,
|
||||
value: [],
|
||||
},
|
||||
is5GHz: {
|
||||
key: USER_FRIENDLY_RADIOS.is5GHz,
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
traffic: {
|
||||
trafficBytesDownstream: {
|
||||
key: 'Down Stream',
|
||||
value: [],
|
||||
traffic: {
|
||||
trafficBytesDownstream: {
|
||||
key: 'Down Stream',
|
||||
value: [],
|
||||
},
|
||||
trafficBytesUpstream: {
|
||||
key: 'Up Stream',
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
trafficBytesUpstream: {
|
||||
key: 'Up Stream',
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const { loading: metricsLoading, error: metricsError, data: metricsData, fetchMore } = useQuery(
|
||||
FILTER_SYSTEM_EVENTS,
|
||||
{
|
||||
variables: {
|
||||
customerId,
|
||||
fromTime: initialGraphTime.current.fromTime,
|
||||
toTime: initialGraphTime.current.toTime,
|
||||
equipmentIds: [0],
|
||||
dataTypes: ['StatusChangedEvent'],
|
||||
limit: 3000, // TODO: make get all in GraphQL
|
||||
},
|
||||
}
|
||||
);
|
||||
const { loading: metricsLoading, error: metricsError, data: metricsData, fetchMore } = useQuery(
|
||||
FILTER_SYSTEM_EVENTS,
|
||||
{
|
||||
variables: {
|
||||
customerId,
|
||||
fromTime: initialGraphTime.current.fromTime,
|
||||
toTime: initialGraphTime.current.toTime,
|
||||
equipmentIds: [0],
|
||||
dataTypes: ['StatusChangedEvent'],
|
||||
limit: 3000, // TODO: make get all in GraphQL
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const formatLineChartData = (list = []) => {
|
||||
if (list.length) {
|
||||
setLineChartData(prev => {
|
||||
const inservicesAPs = [];
|
||||
const clientDevices2dot4GHz = [];
|
||||
const clientDevices5GHz = [];
|
||||
const trafficBytesDownstreamData = [];
|
||||
const trafficBytesUpstreamData = [];
|
||||
let totalDown = 0;
|
||||
let totalUp = 0;
|
||||
const formatLineChartData = (list = []) => {
|
||||
if (list.length) {
|
||||
setLineChartData(prev => {
|
||||
const inservicesAPs = [];
|
||||
const clientDevices2dot4GHz = [];
|
||||
const clientDevices5GHz = [];
|
||||
const trafficBytesDownstreamData = [];
|
||||
const trafficBytesUpstreamData = [];
|
||||
let totalDown = 0;
|
||||
let totalUp = 0;
|
||||
|
||||
list.forEach(
|
||||
({
|
||||
eventTimestamp,
|
||||
details: {
|
||||
payload: {
|
||||
details: {
|
||||
equipmentInServiceCount,
|
||||
associatedClientsCountPerRadio: radios,
|
||||
trafficBytesDownstream,
|
||||
trafficBytesUpstream,
|
||||
list.forEach(
|
||||
({
|
||||
eventTimestamp,
|
||||
details: {
|
||||
payload: {
|
||||
details: {
|
||||
equipmentInServiceCount,
|
||||
associatedClientsCountPerRadio: radios,
|
||||
trafficBytesDownstream,
|
||||
trafficBytesUpstream,
|
||||
},
|
||||
},
|
||||
},
|
||||
}) => {
|
||||
inservicesAPs.push([eventTimestamp, equipmentInServiceCount]);
|
||||
|
||||
let total5GHz = 0;
|
||||
total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
|
||||
|
||||
clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
|
||||
clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);
|
||||
|
||||
trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream || 0]);
|
||||
trafficBytesUpstreamData.push([eventTimestamp, trafficBytesUpstream || 0]);
|
||||
|
||||
totalDown += trafficBytesDownstream || 0;
|
||||
totalUp += trafficBytesUpstream || 0;
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
inservicesAPs: {
|
||||
...prev.inservicesAPs,
|
||||
value: [...prev.inservicesAPs.value, ...inservicesAPs],
|
||||
},
|
||||
}) => {
|
||||
inservicesAPs.push([eventTimestamp, equipmentInServiceCount]);
|
||||
|
||||
let total5GHz = 0;
|
||||
total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
|
||||
|
||||
clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
|
||||
clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);
|
||||
|
||||
trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream || 0]);
|
||||
trafficBytesUpstreamData.push([eventTimestamp, trafficBytesUpstream || 0]);
|
||||
|
||||
totalDown += trafficBytesDownstream || 0;
|
||||
totalUp += trafficBytesUpstream || 0;
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
inservicesAPs: {
|
||||
...prev.inservicesAPs,
|
||||
value: [...prev.inservicesAPs.value, ...inservicesAPs],
|
||||
},
|
||||
clientDevices: {
|
||||
is2dot4GHz: {
|
||||
...prev.clientDevices.is2dot4GHz,
|
||||
value: [...prev.clientDevices.is2dot4GHz.value, ...clientDevices2dot4GHz],
|
||||
clientDevices: {
|
||||
is2dot4GHz: {
|
||||
...prev.clientDevices.is2dot4GHz,
|
||||
value: [...prev.clientDevices.is2dot4GHz.value, ...clientDevices2dot4GHz],
|
||||
},
|
||||
is5GHz: {
|
||||
...prev.clientDevices.is5GHz,
|
||||
value: [...prev.clientDevices.is5GHz.value, ...clientDevices5GHz],
|
||||
},
|
||||
},
|
||||
is5GHz: {
|
||||
...prev.clientDevices.is5GHz,
|
||||
value: [...prev.clientDevices.is5GHz.value, ...clientDevices5GHz],
|
||||
traffic: {
|
||||
trafficBytesDownstream: {
|
||||
...prev.traffic.trafficBytesDownstream,
|
||||
value: [
|
||||
...prev.traffic.trafficBytesDownstream.value,
|
||||
...trafficBytesDownstreamData,
|
||||
],
|
||||
},
|
||||
trafficBytesUpstream: {
|
||||
...prev.traffic.trafficBytesUpstream,
|
||||
value: [...prev.traffic.trafficBytesUpstream.value, ...trafficBytesUpstreamData],
|
||||
},
|
||||
},
|
||||
},
|
||||
traffic: {
|
||||
trafficBytesDownstream: {
|
||||
...prev.traffic.trafficBytesDownstream,
|
||||
value: [...prev.traffic.trafficBytesDownstream.value, ...trafficBytesDownstreamData],
|
||||
},
|
||||
trafficBytesUpstream: {
|
||||
...prev.traffic.trafficBytesUpstream,
|
||||
value: [...prev.traffic.trafficBytesUpstream.value, ...trafficBytesUpstreamData],
|
||||
},
|
||||
},
|
||||
totalDownstreamTraffic: totalDown,
|
||||
totalUpstreamTraffic: totalUp,
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const toTime = moment()
|
||||
.valueOf()
|
||||
.toString();
|
||||
const fromTime = moment()
|
||||
.subtract(5, 'minutes')
|
||||
.valueOf()
|
||||
.toString();
|
||||
fetchMore({
|
||||
variables: {
|
||||
fromTime,
|
||||
toTime,
|
||||
},
|
||||
updateQuery: (_, { fetchMoreResult }) => {
|
||||
formatLineChartData(fetchMoreResult?.filterSystemEvents?.items);
|
||||
},
|
||||
});
|
||||
}, 300000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
formatLineChartData(metricsData?.filterSystemEvents?.items);
|
||||
}, [metricsData]);
|
||||
|
||||
const statsData = useMemo(() => {
|
||||
const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
|
||||
|
||||
const {
|
||||
associatedClientsCountPerRadio,
|
||||
totalProvisionedEquipment,
|
||||
equipmentInServiceCount,
|
||||
equipmentWithClientsCount,
|
||||
} = status;
|
||||
|
||||
const clientRadios = {};
|
||||
let totalAssociated = 0;
|
||||
if (associatedClientsCountPerRadio) {
|
||||
Object.keys(associatedClientsCountPerRadio).forEach(i => {
|
||||
if (i.includes('5GHz')) {
|
||||
if (!clientRadios['5GHz']) {
|
||||
clientRadios['5GHz'] = 0;
|
||||
}
|
||||
clientRadios['5GHz'] += associatedClientsCountPerRadio[i];
|
||||
} else {
|
||||
const key = USER_FRIENDLY_RADIOS[i] || i;
|
||||
clientRadios[key] = associatedClientsCountPerRadio[i];
|
||||
}
|
||||
totalAssociated += associatedClientsCountPerRadio[i];
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
totalProvisionedEquipment,
|
||||
equipmentInServiceCount,
|
||||
equipmentWithClientsCount,
|
||||
totalAssociated,
|
||||
clientRadios,
|
||||
totalDownstreamTraffic: totalDown,
|
||||
totalUpstreamTraffic: totalUp,
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
const pieChartsData = useMemo(() => {
|
||||
const { clientCountPerOui, equipmentCountPerOui } = data?.getAllStatus?.items[0]?.details || {};
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const toTime = moment()
|
||||
.valueOf()
|
||||
.toString();
|
||||
const fromTime = moment()
|
||||
.subtract(5, 'minutes')
|
||||
.valueOf()
|
||||
.toString();
|
||||
fetchMore({
|
||||
variables: {
|
||||
fromTime,
|
||||
toTime,
|
||||
},
|
||||
updateQuery: (_, { fetchMoreResult }) => {
|
||||
formatLineChartData(fetchMoreResult?.filterSystemEvents?.items);
|
||||
},
|
||||
});
|
||||
}, 300000);
|
||||
|
||||
return [
|
||||
{ title: 'AP Vendors', ...equipmentCountPerOui },
|
||||
{ title: 'Client Vendors', ...clientCountPerOui },
|
||||
];
|
||||
}, [data]);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
useEffect(() => {
|
||||
formatLineChartData(metricsData?.filterSystemEvents?.items);
|
||||
}, [metricsData]);
|
||||
|
||||
const statsData = useMemo(() => {
|
||||
const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
|
||||
|
||||
const {
|
||||
associatedClientsCountPerRadio,
|
||||
totalProvisionedEquipment,
|
||||
equipmentInServiceCount,
|
||||
equipmentWithClientsCount,
|
||||
} = status;
|
||||
|
||||
const clientRadios = {};
|
||||
let totalAssociated = 0;
|
||||
if (associatedClientsCountPerRadio) {
|
||||
Object.keys(associatedClientsCountPerRadio).forEach(i => {
|
||||
if (i.includes('5GHz')) {
|
||||
if (!clientRadios['5GHz']) {
|
||||
clientRadios['5GHz'] = 0;
|
||||
}
|
||||
clientRadios['5GHz'] += associatedClientsCountPerRadio[i];
|
||||
} else {
|
||||
const key = USER_FRIENDLY_RADIOS[i] || i;
|
||||
clientRadios[key] = associatedClientsCountPerRadio[i];
|
||||
}
|
||||
totalAssociated += associatedClientsCountPerRadio[i];
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
totalProvisionedEquipment,
|
||||
equipmentInServiceCount,
|
||||
equipmentWithClientsCount,
|
||||
totalAssociated,
|
||||
clientRadios,
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
const pieChartsData = useMemo(() => {
|
||||
const { clientCountPerOui, equipmentCountPerOui } =
|
||||
data?.getAllStatus?.items[0]?.details || {};
|
||||
|
||||
return [
|
||||
{ title: 'AP Vendors', ...equipmentCountPerOui },
|
||||
{ title: 'Client Vendors', ...clientCountPerOui },
|
||||
];
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
statsCardDetails={[
|
||||
{
|
||||
title: 'Access Point',
|
||||
'Total Provisioned': statsData?.totalProvisionedEquipment,
|
||||
'In Service': statsData?.equipmentInServiceCount,
|
||||
'With Clients': statsData?.equipmentWithClientsCount,
|
||||
},
|
||||
{
|
||||
title: 'Client Devices',
|
||||
'Total Associated': statsData?.totalAssociated,
|
||||
...statsData?.clientRadios,
|
||||
},
|
||||
{
|
||||
title: 'Usage Information (24 hours)',
|
||||
'Total Traffic (US)': formatBytes(lineChartData?.totalUpstreamTraffic),
|
||||
'Total Traffic (DS)': formatBytes(lineChartData?.totalDownstreamTraffic),
|
||||
},
|
||||
]}
|
||||
pieChartDetails={pieChartsData}
|
||||
lineChartData={lineChartData}
|
||||
lineChartConfig={lineChartConfig}
|
||||
lineChartLoading={metricsLoading}
|
||||
lineChartError={metricsError}
|
||||
/>
|
||||
);
|
||||
},
|
||||
GET_ALL_STATUS,
|
||||
() => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
return { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] };
|
||||
}
|
||||
|
||||
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={[
|
||||
{
|
||||
title: 'Access Point',
|
||||
'Total Provisioned': statsData?.totalProvisionedEquipment,
|
||||
'In Service': statsData?.equipmentInServiceCount,
|
||||
'With Clients': statsData?.equipmentWithClientsCount,
|
||||
},
|
||||
{
|
||||
title: 'Client Devices',
|
||||
'Total Associated': statsData?.totalAssociated,
|
||||
...statsData?.clientRadios,
|
||||
},
|
||||
{
|
||||
title: 'Usage Information (24 hours)',
|
||||
'Total Traffic (US)': formatBytes(lineChartData?.totalUpstreamTraffic),
|
||||
'Total Traffic (DS)': formatBytes(lineChartData?.totalDownstreamTraffic),
|
||||
},
|
||||
]}
|
||||
pieChartDetails={pieChartsData}
|
||||
lineChartData={lineChartData}
|
||||
lineChartConfig={lineChartConfig}
|
||||
lineChartLoading={metricsLoading}
|
||||
lineChartError={metricsError}
|
||||
/>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default Dashboard;
|
||||
|
||||
@@ -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,51 +44,45 @@ const UPDATE_USER = gql`
|
||||
}
|
||||
`;
|
||||
|
||||
const EditAccount = () => {
|
||||
const { id, email } = useContext(UserContext);
|
||||
const { loading, error, data } = useQuery(GET_USER, { variables: { id } });
|
||||
const [updateUser] = useMutation(UPDATE_USER);
|
||||
const EditAccount = withQuery(
|
||||
({ data }) => {
|
||||
const { id, email } = useContext(UserContext);
|
||||
const [updateUser] = useMutation(UPDATE_USER);
|
||||
|
||||
const handleSubmit = newPassword => {
|
||||
const { role, customerId, lastModifiedTimestamp } = data.getUser;
|
||||
const handleSubmit = newPassword => {
|
||||
const { role, customerId, lastModifiedTimestamp } = data.getUser;
|
||||
|
||||
updateUser({
|
||||
variables: {
|
||||
id,
|
||||
username: email,
|
||||
password: newPassword,
|
||||
role,
|
||||
customerId,
|
||||
lastModifiedTimestamp,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Password successfully updated.',
|
||||
});
|
||||
updateUser({
|
||||
variables: {
|
||||
id,
|
||||
username: email,
|
||||
password: newPassword,
|
||||
role,
|
||||
customerId,
|
||||
lastModifiedTimestamp,
|
||||
},
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Password could not be updated.',
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Password successfully updated.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Password could not be updated.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
return <EditAccountPage onSubmit={handleSubmit} email={email} />;
|
||||
},
|
||||
GET_USER,
|
||||
() => {
|
||||
const { id } = useContext(UserContext);
|
||||
return { id };
|
||||
}
|
||||
|
||||
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} />;
|
||||
};
|
||||
);
|
||||
|
||||
export default EditAccount;
|
||||
|
||||
@@ -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,305 +27,300 @@ import {
|
||||
} from 'graphql/mutations';
|
||||
import { updateQueryGetAllProfiles } from 'graphql/functions';
|
||||
|
||||
const Network = () => {
|
||||
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(),
|
||||
{
|
||||
variables: { customerId, type: 'equipment_ap' },
|
||||
}
|
||||
);
|
||||
const Network = withQuery(
|
||||
({ data, refetch }) => {
|
||||
const { path } = useRouteMatch();
|
||||
const { customerId } = useContext(UserContext);
|
||||
|
||||
const [getLocation, { data: selectedLocation }] = useLazyQuery(GET_LOCATION);
|
||||
const [createLocation] = useMutation(CREATE_LOCATION);
|
||||
const [updateLocation] = useMutation(UPDATE_LOCATION);
|
||||
const [deleteLocation] = useMutation(DELETE_LOCATION);
|
||||
const [checkedLocations, setCheckedLocations] = useState([]);
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
const [editModal, setEditModal] = useState(false);
|
||||
const [addModal, setAddModal] = useState(false);
|
||||
const [apModal, setApModal] = useState(false);
|
||||
|
||||
const [createEquipment] = useMutation(CREATE_EQUIPMENT, {
|
||||
refetchQueries: [
|
||||
const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
|
||||
GET_ALL_PROFILES(),
|
||||
{
|
||||
query: FILTER_EQUIPMENT,
|
||||
variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const handleGetSingleLocation = id => {
|
||||
getLocation({
|
||||
variables: { id },
|
||||
});
|
||||
};
|
||||
|
||||
const formatLocationListForTree = (list = []) => {
|
||||
const checkedTreeLocations = ['0'];
|
||||
list.forEach(ele => {
|
||||
checkedTreeLocations.push(ele.id);
|
||||
});
|
||||
setCheckedLocations(checkedTreeLocations);
|
||||
|
||||
function unflatten(array, p, t) {
|
||||
let tree = typeof t !== 'undefined' ? t : [];
|
||||
const parent = typeof p !== 'undefined' ? p : { id: '0' };
|
||||
let children = _.filter(array, child => child.parentId === parent.id);
|
||||
children = children.map(c => ({
|
||||
title: (
|
||||
<PopoverMenu
|
||||
locationId={c.id}
|
||||
locationType={c.locationType}
|
||||
setAddModal={setAddModal}
|
||||
setEditModal={setEditModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
setApModal={setApModal}
|
||||
>
|
||||
{c.name}
|
||||
</PopoverMenu>
|
||||
),
|
||||
value: `${c.id}`,
|
||||
key: c.id,
|
||||
...c,
|
||||
}));
|
||||
if (!_.isEmpty(children)) {
|
||||
if (parent.id === '0') {
|
||||
tree = children;
|
||||
} else {
|
||||
parent.children = children;
|
||||
}
|
||||
_.each(children, child => unflatten(array, child));
|
||||
variables: { customerId, type: 'equipment_ap' },
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
return [
|
||||
{
|
||||
title: (
|
||||
<PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
|
||||
Network
|
||||
</PopoverMenu>
|
||||
),
|
||||
id: '0',
|
||||
key: '0',
|
||||
value: '0',
|
||||
children: unflatten(list),
|
||||
},
|
||||
];
|
||||
};
|
||||
);
|
||||
|
||||
const handleAddLocation = ({ location }) => {
|
||||
setAddModal(false);
|
||||
let id;
|
||||
let locationType;
|
||||
const [getLocation, { data: selectedLocation }] = useLazyQuery(GET_LOCATION);
|
||||
const [createLocation] = useMutation(CREATE_LOCATION);
|
||||
const [updateLocation] = useMutation(UPDATE_LOCATION);
|
||||
const [deleteLocation] = useMutation(DELETE_LOCATION);
|
||||
const [checkedLocations, setCheckedLocations] = useState([]);
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
const [editModal, setEditModal] = useState(false);
|
||||
const [addModal, setAddModal] = useState(false);
|
||||
const [apModal, setApModal] = useState(false);
|
||||
|
||||
// adding location from root makes selecetedLocation null so we check for that
|
||||
if (selectedLocation && selectedLocation.getLocation) {
|
||||
id = selectedLocation.getLocation.id;
|
||||
locationType = 'SITE';
|
||||
} else {
|
||||
id = '0';
|
||||
locationType = 'COUNTRY';
|
||||
}
|
||||
const [createEquipment] = useMutation(CREATE_EQUIPMENT, {
|
||||
refetchQueries: [
|
||||
{
|
||||
query: FILTER_EQUIPMENT,
|
||||
variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
createLocation({
|
||||
variables: {
|
||||
locationType,
|
||||
customerId,
|
||||
parentId: id,
|
||||
name: location,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Location successfully added.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Location could not be added.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleEditLocation = ({ name }) => {
|
||||
setEditModal(false);
|
||||
const { id, parentId, locationType, lastModifiedTimestamp } = selectedLocation.getLocation;
|
||||
|
||||
updateLocation({
|
||||
variables: {
|
||||
customerId,
|
||||
id,
|
||||
parentId,
|
||||
name,
|
||||
locationType,
|
||||
lastModifiedTimestamp,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Location successfully edited.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Location could not be edited.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeleteLocation = () => {
|
||||
setDeleteModal(false);
|
||||
const { id } = selectedLocation.getLocation;
|
||||
|
||||
deleteLocation({ variables: { id } })
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Location successfully deleted.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Location could not be deleted.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleCreateEquipment = ({ inventoryId, name, profileId }) => {
|
||||
setApModal(false);
|
||||
const { id: locationId } = selectedLocation.getLocation;
|
||||
|
||||
createEquipment({ variables: { customerId, inventoryId, locationId, name, profileId } })
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Equipment successfully created.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Equipment could not be created.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const onSelect = (selectedKeys, info) => {
|
||||
const { id } = info.node;
|
||||
handleGetSingleLocation(id);
|
||||
};
|
||||
|
||||
const onCheck = checkedKeys => {
|
||||
setCheckedLocations(checkedKeys.checked);
|
||||
};
|
||||
|
||||
const handleFetchProfiles = e => {
|
||||
if (apProfiles.getAllProfiles.context.lastPage) {
|
||||
return false;
|
||||
}
|
||||
|
||||
e.persist();
|
||||
const { target } = e;
|
||||
|
||||
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
|
||||
fetchMore({
|
||||
variables: { context: { ...apProfiles.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
const handleGetSingleLocation = id => {
|
||||
getLocation({
|
||||
variables: { id },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return true;
|
||||
};
|
||||
const formatLocationListForTree = (list = []) => {
|
||||
const checkedTreeLocations = ['0'];
|
||||
list.forEach(ele => {
|
||||
checkedTreeLocations.push(ele.id);
|
||||
});
|
||||
setCheckedLocations(checkedTreeLocations);
|
||||
|
||||
const locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
|
||||
data,
|
||||
]);
|
||||
function unflatten(array, p, t) {
|
||||
let tree = typeof t !== 'undefined' ? t : [];
|
||||
const parent = typeof p !== 'undefined' ? p : { id: '0' };
|
||||
let children = _.filter(array, child => child.parentId === parent.id);
|
||||
children = children.map(c => ({
|
||||
title: (
|
||||
<PopoverMenu
|
||||
locationId={c.id}
|
||||
locationType={c.locationType}
|
||||
setAddModal={setAddModal}
|
||||
setEditModal={setEditModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
setApModal={setApModal}
|
||||
>
|
||||
{c.name}
|
||||
</PopoverMenu>
|
||||
),
|
||||
value: `${c.id}`,
|
||||
key: c.id,
|
||||
...c,
|
||||
}));
|
||||
if (!_.isEmpty(children)) {
|
||||
if (parent.id === '0') {
|
||||
tree = children;
|
||||
} else {
|
||||
parent.children = children;
|
||||
}
|
||||
_.each(children, child => unflatten(array, child));
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
return [
|
||||
{
|
||||
title: (
|
||||
<PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
|
||||
Network
|
||||
</PopoverMenu>
|
||||
),
|
||||
id: '0',
|
||||
key: '0',
|
||||
value: '0',
|
||||
children: unflatten(list),
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
const handleAddLocation = ({ location }) => {
|
||||
setAddModal(false);
|
||||
let id;
|
||||
let locationType;
|
||||
|
||||
// adding location from root makes selecetedLocation null so we check for that
|
||||
if (selectedLocation && selectedLocation.getLocation) {
|
||||
id = selectedLocation.getLocation.id;
|
||||
locationType = 'SITE';
|
||||
} else {
|
||||
id = '0';
|
||||
locationType = 'COUNTRY';
|
||||
}
|
||||
|
||||
createLocation({
|
||||
variables: {
|
||||
locationType,
|
||||
customerId,
|
||||
parentId: id,
|
||||
name: location,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Location successfully added.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Location could not be added.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleEditLocation = ({ name }) => {
|
||||
setEditModal(false);
|
||||
const { id, parentId, locationType, lastModifiedTimestamp } = selectedLocation.getLocation;
|
||||
|
||||
updateLocation({
|
||||
variables: {
|
||||
customerId,
|
||||
id,
|
||||
parentId,
|
||||
name,
|
||||
locationType,
|
||||
lastModifiedTimestamp,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Location successfully edited.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Location could not be edited.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeleteLocation = () => {
|
||||
setDeleteModal(false);
|
||||
const { id } = selectedLocation.getLocation;
|
||||
|
||||
deleteLocation({ variables: { id } })
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Location successfully deleted.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Location could not be deleted.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleCreateEquipment = ({ inventoryId, name, profileId }) => {
|
||||
setApModal(false);
|
||||
const { id: locationId } = selectedLocation.getLocation;
|
||||
|
||||
createEquipment({ variables: { customerId, inventoryId, locationId, name, profileId } })
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Equipment successfully created.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Equipment could not be created.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const onSelect = (selectedKeys, info) => {
|
||||
const { id } = info.node;
|
||||
handleGetSingleLocation(id);
|
||||
};
|
||||
|
||||
const onCheck = checkedKeys => {
|
||||
setCheckedLocations(checkedKeys.checked);
|
||||
};
|
||||
|
||||
const handleFetchProfiles = e => {
|
||||
if (apProfiles.getAllProfiles.context.lastPage) {
|
||||
return false;
|
||||
}
|
||||
|
||||
e.persist();
|
||||
const { target } = e;
|
||||
|
||||
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
|
||||
fetchMore({
|
||||
variables: { context: { ...apProfiles.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
|
||||
data,
|
||||
]);
|
||||
|
||||
return (
|
||||
<NetworkPage
|
||||
onSelect={onSelect}
|
||||
onCheck={onCheck}
|
||||
checkedLocations={checkedLocations}
|
||||
locations={locationsTree}
|
||||
selectedLocation={selectedLocation && selectedLocation.getLocation}
|
||||
addModal={addModal}
|
||||
editModal={editModal}
|
||||
deleteModal={deleteModal}
|
||||
apModal={apModal}
|
||||
setAddModal={setAddModal}
|
||||
setEditModal={setEditModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
setApModal={setApModal}
|
||||
onAddLocation={handleAddLocation}
|
||||
onEditLocation={handleEditLocation}
|
||||
onDeleteLocation={handleDeleteLocation}
|
||||
onCreateEquipment={handleCreateEquipment}
|
||||
profiles={
|
||||
(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []
|
||||
}
|
||||
loadingProfile={loadingProfile}
|
||||
errorProfile={errorProfile}
|
||||
onFetchMoreProfiles={handleFetchProfiles}
|
||||
isLastProfilesPage={apProfiles?.getAllProfiles?.context?.lastPage}
|
||||
>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/access-points/bulk-edit/:id`}
|
||||
render={props => (
|
||||
<BulkEditAccessPoints
|
||||
locations={locationsTree}
|
||||
checkedLocations={checkedLocations}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/access-points`}
|
||||
render={props => <AccessPoints checkedLocations={checkedLocations} {...props} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/access-points/:id/:tab`}
|
||||
render={props => <AccessPointDetails locations={locationsTree} {...props} />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/client-devices`}
|
||||
render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
|
||||
/>
|
||||
<Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
|
||||
<Redirect from={`${path}/access-points/:id`} to={`${path}/access-points/:id/general`} />
|
||||
<Redirect from={path} to={`${path}/access-points`} />
|
||||
</Switch>
|
||||
</NetworkPage>
|
||||
);
|
||||
},
|
||||
GET_ALL_LOCATIONS,
|
||||
() => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
return { customerId };
|
||||
}
|
||||
|
||||
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}
|
||||
onCheck={onCheck}
|
||||
checkedLocations={checkedLocations}
|
||||
locations={locationsTree}
|
||||
selectedLocation={selectedLocation && selectedLocation.getLocation}
|
||||
addModal={addModal}
|
||||
editModal={editModal}
|
||||
deleteModal={deleteModal}
|
||||
apModal={apModal}
|
||||
setAddModal={setAddModal}
|
||||
setEditModal={setEditModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
setApModal={setApModal}
|
||||
onAddLocation={handleAddLocation}
|
||||
onEditLocation={handleEditLocation}
|
||||
onDeleteLocation={handleDeleteLocation}
|
||||
onCreateEquipment={handleCreateEquipment}
|
||||
profiles={(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []}
|
||||
loadingProfile={loadingProfile}
|
||||
errorProfile={errorProfile}
|
||||
onFetchMoreProfiles={handleFetchProfiles}
|
||||
isLastProfilesPage={apProfiles?.getAllProfiles?.context?.lastPage}
|
||||
>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/access-points/bulk-edit/:id`}
|
||||
render={props => (
|
||||
<BulkEditAccessPoints
|
||||
locations={locationsTree}
|
||||
checkedLocations={checkedLocations}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/access-points`}
|
||||
render={props => <AccessPoints checkedLocations={checkedLocations} {...props} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/access-points/:id/:tab`}
|
||||
render={props => <AccessPointDetails locations={locationsTree} {...props} />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/client-devices`}
|
||||
render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
|
||||
/>
|
||||
<Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
|
||||
<Redirect from={`${path}/access-points/:id`} to={`${path}/access-points/:id/general`} />
|
||||
<Redirect from={path} to={`${path}/access-points`} />
|
||||
</Switch>
|
||||
</NetworkPage>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default Network;
|
||||
|
||||
@@ -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,191 +69,179 @@ const DELETE_PROFILE = gql`
|
||||
}
|
||||
`;
|
||||
|
||||
const ProfileDetails = () => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
const { id } = useParams();
|
||||
const ProfileDetails = withQuery(
|
||||
({ data }) => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
const { id } = useParams();
|
||||
|
||||
const [redirect, setRedirect] = useState(false);
|
||||
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' },
|
||||
});
|
||||
|
||||
const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
|
||||
variables: { customerId, type: 'ssid' },
|
||||
});
|
||||
const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
|
||||
GET_ALL_PROFILES(),
|
||||
{
|
||||
variables: { customerId, type: 'radius' },
|
||||
}
|
||||
);
|
||||
|
||||
const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
|
||||
GET_ALL_PROFILES(),
|
||||
{
|
||||
variables: { customerId, type: 'radius' },
|
||||
}
|
||||
);
|
||||
const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
|
||||
GET_ALL_PROFILES(),
|
||||
{
|
||||
variables: { customerId, type: 'captive_portal' },
|
||||
}
|
||||
);
|
||||
|
||||
const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
|
||||
GET_ALL_PROFILES(),
|
||||
{
|
||||
variables: { customerId, type: 'captive_portal' },
|
||||
}
|
||||
);
|
||||
const [updateProfile] = useMutation(UPDATE_PROFILE);
|
||||
const [deleteProfile] = useMutation(DELETE_PROFILE);
|
||||
|
||||
const [updateProfile] = useMutation(UPDATE_PROFILE);
|
||||
const [deleteProfile] = useMutation(DELETE_PROFILE);
|
||||
const [fileUpload] = useMutation(FILE_UPLOAD);
|
||||
|
||||
const [fileUpload] = useMutation(FILE_UPLOAD);
|
||||
const handleDeleteProfile = () => {
|
||||
deleteProfile({ variables: { id } })
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Profile successfully deleted.',
|
||||
});
|
||||
|
||||
const handleDeleteProfile = () => {
|
||||
deleteProfile({ variables: { id } })
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Profile successfully deleted.',
|
||||
});
|
||||
|
||||
setRedirect(true);
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Profile could not be deleted.',
|
||||
setRedirect(true);
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Profile could not be deleted.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleUpdateProfile = (
|
||||
name,
|
||||
details,
|
||||
childProfileIds = data.getProfile.childProfileIds
|
||||
) => {
|
||||
updateProfile({
|
||||
variables: {
|
||||
...data.getProfile,
|
||||
name,
|
||||
childProfileIds,
|
||||
details,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Profile successfully updated.',
|
||||
});
|
||||
const handleUpdateProfile = (
|
||||
name,
|
||||
details,
|
||||
childProfileIds = data.getProfile.childProfileIds
|
||||
) => {
|
||||
updateProfile({
|
||||
variables: {
|
||||
...data.getProfile,
|
||||
name,
|
||||
childProfileIds,
|
||||
details,
|
||||
},
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Profile could not be updated.',
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Profile successfully updated.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Profile could not be updated.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleFileUpload = (fileName, file) =>
|
||||
fileUpload({ variables: { fileName, file } })
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'File successfully uploaded.',
|
||||
const handleFileUpload = (fileName, file) =>
|
||||
fileUpload({ variables: { fileName, file } })
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'File successfully uploaded.',
|
||||
});
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'File could not be uploaded.',
|
||||
})
|
||||
);
|
||||
|
||||
const handleFetchProfiles = e => {
|
||||
if (ssidProfiles.getAllProfiles.context.lastPage) {
|
||||
return false;
|
||||
}
|
||||
|
||||
e.persist();
|
||||
const { target } = e;
|
||||
|
||||
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
|
||||
fetchMore({
|
||||
variables: { context: { ...ssidProfiles.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'File could not be uploaded.',
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const handleFetchProfiles = e => {
|
||||
if (ssidProfiles.getAllProfiles.context.lastPage) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
e.persist();
|
||||
const { target } = e;
|
||||
const handleFetchRadiusProfiles = e => {
|
||||
if (radiusProfiles.getAllProfiles.context.lastPage) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
|
||||
fetchMore({
|
||||
variables: { context: { ...ssidProfiles.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
}
|
||||
e.persist();
|
||||
const { target } = e;
|
||||
|
||||
return true;
|
||||
};
|
||||
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
|
||||
fetchMoreRadiusProfiles({
|
||||
variables: { context: { ...radiusProfiles.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
}
|
||||
|
||||
const handleFetchRadiusProfiles = e => {
|
||||
if (radiusProfiles.getAllProfiles.context.lastPage) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
e.persist();
|
||||
const { target } = e;
|
||||
const handleFetchCaptiveProfiles = e => {
|
||||
if (captiveProfiles.getAllProfiles.context.lastPage) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
|
||||
fetchMoreRadiusProfiles({
|
||||
variables: { context: { ...radiusProfiles.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
}
|
||||
e.persist();
|
||||
const { target } = e;
|
||||
|
||||
return true;
|
||||
};
|
||||
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
|
||||
fetchMoreCaptiveProfiles({
|
||||
variables: { context: { ...captiveProfiles.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
}
|
||||
|
||||
const handleFetchCaptiveProfiles = e => {
|
||||
if (captiveProfiles.getAllProfiles.context.lastPage) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
e.persist();
|
||||
const { target } = e;
|
||||
|
||||
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
|
||||
fetchMoreCaptiveProfiles({
|
||||
variables: { context: { ...captiveProfiles.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
|
||||
return <Redirect to="/login" />;
|
||||
if (redirect) {
|
||||
return <Redirect to="/profiles" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Alert message="Error" description="Failed to load profile data." type="error" showIcon />
|
||||
<ProfileDetailsPage
|
||||
name={data.getProfile.name}
|
||||
profileType={data.getProfile.profileType}
|
||||
details={data.getProfile.details}
|
||||
childProfileIds={data.getProfile.childProfileIds}
|
||||
onDeleteProfile={handleDeleteProfile}
|
||||
onUpdateProfile={handleUpdateProfile}
|
||||
ssidProfiles={
|
||||
(ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
|
||||
}
|
||||
radiusProfiles={radiusProfiles?.getAllProfiles?.items}
|
||||
captiveProfiles={captiveProfiles?.getAllProfiles?.items}
|
||||
fileUpload={handleFileUpload}
|
||||
onFetchMoreProfiles={handleFetchProfiles}
|
||||
onFetchMoreRadiusProfiles={handleFetchRadiusProfiles}
|
||||
onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
|
||||
/>
|
||||
);
|
||||
},
|
||||
GET_PROFILE,
|
||||
() => {
|
||||
const { id } = useParams();
|
||||
return { id, fetchPolicy: 'network-only' };
|
||||
}
|
||||
|
||||
if (redirect) {
|
||||
return <Redirect to="/profiles" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<ProfileDetailsPage
|
||||
name={data.getProfile.name}
|
||||
profileType={data.getProfile.profileType}
|
||||
details={data.getProfile.details}
|
||||
childProfileIds={data.getProfile.childProfileIds}
|
||||
onDeleteProfile={handleDeleteProfile}
|
||||
onUpdateProfile={handleUpdateProfile}
|
||||
ssidProfiles={
|
||||
(ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
|
||||
}
|
||||
radiusProfiles={radiusProfiles?.getAllProfiles?.items}
|
||||
captiveProfiles={captiveProfiles?.getAllProfiles?.items}
|
||||
fileUpload={handleFileUpload}
|
||||
onFetchMoreProfiles={handleFetchProfiles}
|
||||
onFetchMoreRadiusProfiles={handleFetchRadiusProfiles}
|
||||
onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
|
||||
/>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default ProfileDetails;
|
||||
|
||||
@@ -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,98 +17,85 @@ 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 [deleteProfile] = useMutation(DELETE_PROFILE);
|
||||
const location = useLocation();
|
||||
const Profiles = withQuery(
|
||||
({ data, fetchMore, refetch }) => {
|
||||
const [deleteProfile] = useMutation(DELETE_PROFILE);
|
||||
const { customerId } = useContext(UserContext);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (location.state && location.state.refetch) {
|
||||
useEffect(() => {
|
||||
if (location.state && location.state.refetch) {
|
||||
refetch({
|
||||
variables: { refresh: Date.now() },
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const reloadTable = () => {
|
||||
refetch({
|
||||
variables: { refresh: Date.now() },
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const reloadTable = () => {
|
||||
refetch({
|
||||
variables: { refresh: Date.now() },
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Profiles reloaded.',
|
||||
});
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Profiles could not be reloaded.',
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Profiles reloaded.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Profiles could not be reloaded.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleLoadMore = () => {
|
||||
if (!data.getAllProfiles.context.lastPage) {
|
||||
fetchMore({
|
||||
variables: { context: { ...data.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteProfile = id => {
|
||||
deleteProfile({
|
||||
variables: { id },
|
||||
refetchQueries: [
|
||||
{
|
||||
query: GET_ALL_PROFILES(`equipmentCount`),
|
||||
variables: { customerId },
|
||||
},
|
||||
],
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Profile successfully deleted.',
|
||||
const handleLoadMore = () => {
|
||||
if (!data.getAllProfiles.context.lastPage) {
|
||||
fetchMore({
|
||||
variables: { context: { ...data.getAllProfiles.context } },
|
||||
updateQuery: updateQueryGetAllProfiles,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteProfile = id => {
|
||||
deleteProfile({
|
||||
variables: { id },
|
||||
refetchQueries: [
|
||||
{
|
||||
query: GET_ALL_PROFILES(`equipmentCount`),
|
||||
variables: { customerId },
|
||||
},
|
||||
],
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Profile could not be deleted.',
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Profile successfully deleted.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Profile could not be deleted.',
|
||||
})
|
||||
);
|
||||
};
|
||||
return (
|
||||
<ProfilePage
|
||||
data={data.getAllProfiles.items}
|
||||
onReload={reloadTable}
|
||||
isLastPage={data?.getAllProfiles?.context?.lastPage}
|
||||
onDeleteProfile={handleDeleteProfile}
|
||||
onLoadMore={handleLoadMore}
|
||||
/>
|
||||
);
|
||||
},
|
||||
GET_ALL_PROFILES(`equipmentCount`),
|
||||
() => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
return { customerId, fetchPolicy: 'network-only' };
|
||||
}
|
||||
|
||||
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}
|
||||
onReload={reloadTable}
|
||||
isLastPage={data?.getAllProfiles?.context?.lastPage}
|
||||
onDeleteProfile={handleDeleteProfile}
|
||||
onLoadMore={handleLoadMore}
|
||||
/>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default Profiles;
|
||||
|
||||
25
app/containers/QueryWrapper/index.js
Normal file
25
app/containers/QueryWrapper/index.js
Normal 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} />;
|
||||
};
|
||||
@@ -1,92 +1,82 @@
|
||||
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 { customerId } = useContext(UserContext);
|
||||
const { data, loading, error, refetch } = useQuery(GET_CUSTOMER, {
|
||||
variables: { id: customerId },
|
||||
});
|
||||
const [updateCustomer] = useMutation(UPDATE_CUSTOMER);
|
||||
const AutoProvision = withQuery(
|
||||
({ data, refetch }) => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
const [updateCustomer] = useMutation(UPDATE_CUSTOMER);
|
||||
|
||||
const { data: dataLocation, loading: loadingLoaction, error: errorLocation } = useQuery(
|
||||
GET_ALL_LOCATIONS,
|
||||
{
|
||||
variables: { customerId },
|
||||
}
|
||||
);
|
||||
const { data: dataProfile, loading: loadingProfile, error: errorProfile } = useQuery(
|
||||
GET_ALL_PROFILES(),
|
||||
{
|
||||
variables: { customerId, type: 'equipment_ap', limit: 100 },
|
||||
}
|
||||
);
|
||||
const { data: dataLocation, loading: loadingLoaction, error: errorLocation } = useQuery(
|
||||
GET_ALL_LOCATIONS,
|
||||
{
|
||||
variables: { customerId },
|
||||
}
|
||||
);
|
||||
const { data: dataProfile, loading: loadingProfile, error: errorProfile } = useQuery(
|
||||
GET_ALL_PROFILES(),
|
||||
{
|
||||
variables: { customerId, type: 'equipment_ap', limit: 100 },
|
||||
}
|
||||
);
|
||||
|
||||
const handleUpdateCustomer = (
|
||||
id,
|
||||
email,
|
||||
name,
|
||||
details,
|
||||
createdTimestamp,
|
||||
lastModifiedTimestamp
|
||||
) => {
|
||||
updateCustomer({
|
||||
variables: {
|
||||
id,
|
||||
email,
|
||||
name,
|
||||
details,
|
||||
createdTimestamp,
|
||||
lastModifiedTimestamp,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Settings successfully updated.',
|
||||
});
|
||||
const handleUpdateCustomer = (
|
||||
id,
|
||||
email,
|
||||
name,
|
||||
details,
|
||||
createdTimestamp,
|
||||
lastModifiedTimestamp
|
||||
) => {
|
||||
updateCustomer({
|
||||
variables: {
|
||||
id,
|
||||
email,
|
||||
name,
|
||||
details,
|
||||
createdTimestamp,
|
||||
lastModifiedTimestamp,
|
||||
},
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Settings could not be updated.',
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Settings successfully updated.',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
|
||||
return <Redirect to="/login" />;
|
||||
}
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Settings could not be updated.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Alert message="Error" description="Failed to load Customer Data." type="error" showIcon />
|
||||
<AutoProvisionPage
|
||||
data={data && data.getCustomer}
|
||||
dataLocation={dataLocation && dataLocation.getAllLocations}
|
||||
dataProfile={dataProfile && dataProfile.getAllProfiles.items}
|
||||
loadingLoaction={loadingLoaction}
|
||||
loadingProfile={loadingProfile}
|
||||
errorLocation={errorLocation}
|
||||
errorProfile={errorProfile}
|
||||
onUpdateCustomer={handleUpdateCustomer}
|
||||
/>
|
||||
);
|
||||
},
|
||||
GET_CUSTOMER,
|
||||
() => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
return { id: customerId };
|
||||
}
|
||||
|
||||
return (
|
||||
<AutoProvisionPage
|
||||
data={data && data.getCustomer}
|
||||
dataLocation={dataLocation && dataLocation.getAllLocations}
|
||||
dataProfile={dataProfile && dataProfile.getAllProfiles.items}
|
||||
loadingLoaction={loadingLoaction}
|
||||
loadingProfile={loadingProfile}
|
||||
errorLocation={errorLocation}
|
||||
errorProfile={errorProfile}
|
||||
onUpdateCustomer={handleUpdateCustomer}
|
||||
/>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default AutoProvision;
|
||||
|
||||
@@ -1,84 +1,76 @@
|
||||
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 { 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);
|
||||
const BlockedList = withQuery(
|
||||
({ refetch, data }) => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
const [addClient] = useMutation(ADD_BLOCKED_CLIENT);
|
||||
const [updateClient] = useMutation(UPDATE_CLIENT);
|
||||
|
||||
const handleAddClient = macAddress => {
|
||||
addClient({
|
||||
variables: {
|
||||
customerId,
|
||||
macAddress,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Client successfully added to Blocked List',
|
||||
});
|
||||
const handleAddClient = macAddress => {
|
||||
addClient({
|
||||
variables: {
|
||||
customerId,
|
||||
macAddress,
|
||||
},
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Client could not be added to Blocked List',
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Client successfully added to Blocked List',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Client could not be added to Blocked List',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleUpdateClient = (macAddress, details) => {
|
||||
updateClient({
|
||||
variables: {
|
||||
customerId,
|
||||
macAddress,
|
||||
details,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Client successfully removed from Blocked List',
|
||||
});
|
||||
const handleUpdateClient = (macAddress, details) => {
|
||||
updateClient({
|
||||
variables: {
|
||||
customerId,
|
||||
macAddress,
|
||||
details,
|
||||
},
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Client could not be removed from Blocked List',
|
||||
.then(() => {
|
||||
refetch();
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Client successfully removed from Blocked List',
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) return <Loading />;
|
||||
|
||||
if (error) {
|
||||
if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
|
||||
return <Redirect to="/login" />;
|
||||
}
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Client could not be removed from Blocked List',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Alert message="Error" description="Failed to load Client Data." type="error" showIcon />
|
||||
<BlockedListPage
|
||||
data={data && data.getBlockedClients}
|
||||
onUpdateClient={handleUpdateClient}
|
||||
onAddClient={handleAddClient}
|
||||
/>
|
||||
);
|
||||
},
|
||||
GET_BLOCKED_CLIENTS,
|
||||
() => {
|
||||
const { customerId } = useContext(UserContext);
|
||||
return customerId;
|
||||
}
|
||||
|
||||
return (
|
||||
<BlockedListPage
|
||||
data={data && data.getBlockedClients}
|
||||
onUpdateClient={handleUpdateClient}
|
||||
onAddClient={handleAddClient}
|
||||
/>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default BlockedList;
|
||||
|
||||
Reference in New Issue
Block a user