mirror of
https://github.com/Telecominfraproject/wlan-cloud-ui.git
synced 2025-11-03 12:18:08 +00:00
undo
This commit is contained in:
Sean Macfarlane
@@ -1,85 +1,219 @@
|
||||
import React, { useEffect, useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useLazyQuery } from '@apollo/react-hooks';
|
||||
import { Alert } from 'antd';
|
||||
import { NetworkTable, Loading } from '@tip-wlan/wlan-cloud-ui-library';
|
||||
import React, { useMemo, useContext, useState } from 'react';
|
||||
import { useLocation, Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
|
||||
import { Alert, notification } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { Network as NetworkPage, PopoverMenu, Loading } 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 UserContext from 'contexts/UserContext';
|
||||
import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';
|
||||
import { GET_ALL_LOCATIONS, GET_LOCATION } from 'graphql/queries';
|
||||
import { CREATE_LOCATION, UPDATE_LOCATION, DELETE_LOCATION } from 'graphql/mutations';
|
||||
|
||||
const clientDevicesTableColumns = [
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'MAC',
|
||||
dataIndex: 'macAddress',
|
||||
},
|
||||
{ title: 'MANUFACTURER', dataIndex: 'manufacturer' },
|
||||
{ title: 'IP', dataIndex: 'ipAddress' },
|
||||
{ title: 'HOST NAME', dataIndex: 'hostname' },
|
||||
{ title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
|
||||
{ title: 'SSID', dataIndex: 'ssid' },
|
||||
{ title: 'BAND', dataIndex: 'radioType' },
|
||||
{ title: 'SIGNAL', dataIndex: 'signal' },
|
||||
{ title: 'STATUS', dataIndex: 'status' },
|
||||
];
|
||||
|
||||
const ClientDevices = ({ checkedLocations }) => {
|
||||
const Network = () => {
|
||||
const { path } = useRouteMatch();
|
||||
const { customerId } = useContext(UserContext);
|
||||
const [filterClientSessions, { loading, error, data, fetchMore }] = useLazyQuery(
|
||||
FILTER_CLIENT_SESSIONS
|
||||
);
|
||||
const location = useLocation();
|
||||
const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
|
||||
variables: { customerId },
|
||||
});
|
||||
|
||||
const handleLoadMore = () => {
|
||||
if (!data.filterClientSessions.context.lastPage) {
|
||||
fetchMore({
|
||||
variables: { cursor: data.filterClientSessions.context.cursor },
|
||||
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||||
const previousEntry = previousResult.filterClientSessions;
|
||||
const newItems = fetchMoreResult.filterClientSessions.items;
|
||||
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);
|
||||
|
||||
return {
|
||||
filterClientSessions: {
|
||||
context: fetchMoreResult.filterClientSessions.context,
|
||||
items: [...previousEntry.items, ...newItems],
|
||||
__typename: previousEntry.__typename,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
const handleGetSingleLocation = id => {
|
||||
getLocation({
|
||||
variables: { id },
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
filterClientSessions({
|
||||
variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
|
||||
const formatLocationListForTree = (list = []) => {
|
||||
const checkedTreeLocations = [];
|
||||
list.forEach(ele => {
|
||||
checkedTreeLocations.push(ele.id);
|
||||
});
|
||||
}, [checkedLocations]);
|
||||
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
|
||||
locationType={c.locationType}
|
||||
setAddModal={setAddModal}
|
||||
setEditModal={setEditModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
>
|
||||
{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 locationType="NETWORK" setAddModal={setAddModal}>
|
||||
Network
|
||||
</PopoverMenu>
|
||||
),
|
||||
id: 0,
|
||||
value: '0',
|
||||
key: 0,
|
||||
children: unflatten(list),
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const handleAddLocation = (name, parentId, locationType) => {
|
||||
setAddModal(false);
|
||||
createLocation({
|
||||
variables: {
|
||||
locationType,
|
||||
customerId,
|
||||
parentId,
|
||||
name,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({
|
||||
message: 'Success',
|
||||
description: 'Location successfully added.',
|
||||
});
|
||||
refetch();
|
||||
})
|
||||
.catch(() =>
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: 'Location could not be added.',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleEditLocation = (id, parentId, name, locationType, lastModifiedTimestamp) => {
|
||||
setEditModal(false);
|
||||
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 = id => {
|
||||
setDeleteModal(false);
|
||||
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 onSelect = (selectedKeys, info) => {
|
||||
const { id } = info.node;
|
||||
handleGetSingleLocation(id);
|
||||
};
|
||||
|
||||
const onCheck = checkedKeys => {
|
||||
setCheckedLocations(checkedKeys);
|
||||
};
|
||||
|
||||
const locationsTree = useMemo(
|
||||
() => formatLocationListForTree(data && data.getAllLocations)[0].children,
|
||||
[data]
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert message="Error" description="Failed to load client devices." type="error" showIcon />
|
||||
);
|
||||
return <Alert message="Error" description="Failed to load locations." type="error" showIcon />;
|
||||
}
|
||||
|
||||
return (
|
||||
<NetworkTable
|
||||
tableColumns={clientDevicesTableColumns}
|
||||
tableData={data && data.filterClientSessions && data.filterClientSessions.items}
|
||||
onLoadMore={handleLoadMore}
|
||||
isLastPage={data && data.filterClientSessions && data.filterClientSessions.context.lastPage}
|
||||
/>
|
||||
<NetworkPage
|
||||
onSelect={onSelect}
|
||||
onCheck={onCheck}
|
||||
checkedLocations={checkedLocations}
|
||||
locations={locationsTree}
|
||||
activeTab={location.pathname}
|
||||
selectedLocation={selectedLocation && selectedLocation.getLocation}
|
||||
addModal={addModal}
|
||||
editModal={editModal}
|
||||
deleteModal={deleteModal}
|
||||
setAddModal={setAddModal}
|
||||
setEditModal={setEditModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
onAddLocation={handleAddLocation}
|
||||
onEditLocation={handleEditLocation}
|
||||
onDeleteLocation={handleDeleteLocation}
|
||||
>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/access-points`}
|
||||
render={props => <AccessPoints checkedLocations={checkedLocations} {...props} />}
|
||||
/>
|
||||
<Route exact path={`${path}/access-points/:id`} component={AccessPointDetails} />
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/client-devices`}
|
||||
render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
|
||||
/>
|
||||
<Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
|
||||
<Redirect from={path} to={`${path}/access-points`} />
|
||||
</Switch>
|
||||
</NetworkPage>
|
||||
);
|
||||
};
|
||||
|
||||
ClientDevices.propTypes = {
|
||||
checkedLocations: PropTypes.instanceOf(Array).isRequired,
|
||||
};
|
||||
|
||||
export default ClientDevices;
|
||||
export default Network;
|
||||
|
||||
Reference in New Issue
Block a user