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

added bulk edit aps component

Browse Source
This commit is contained in:
Ali Muhammad
2020-06-19 10:30:02 -04:00
parent 6750af2877 74c8c64163
commit 38d39ce11c
7 changed files with 162 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
app/constants/index.js
View File

@@ -5,235 +5,3 @@ export const IS_RADIO_TYPE_2DOT4GHZ = 'is2dot4GHz';
export const IS_2DOT4GHZ = 'is2dot4GHz';
export const IS_5GHZL = 'is5GHzL';
export const IS_5GHZU = 'is5GHzU';
export const CLIENT_DEVICES_TABLE_DATA = [
{
key: 0,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 3,
},
{
key: 1,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 7,
},
{
key: 2,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 2,
},
{
key: 3,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 2,
},
{
key: 4,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 2,
},
{
key: 5,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 2,
},
{
key: 6,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 8,
},
{
key: 7,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 8,
},
{
key: 8,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 8,
},
{
key: 9,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 8,
},
{
key: 10,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 8,
},
{
key: 11,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 8,
},
{
key: 12,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 8,
},
{
key: 13,
name: 'Laptop',
mac: 'DO:C6:37:69:3E:FD',
osModelMfr: 'Linux',
ip: '100.115.92.2',
hostName: 'LAPTOP-714LRTP6',
accessPoint: 'AP100',
ssid: 'TestUs',
band: '5Ghz',
signal: '-43 dBm',
status: '39h 41m 25s Connected',
locationId: 8,
},
];
export const ACCESS_POINTS_CHANNEL_TABLE_DATA = [
{
key: 0,
name: 'AP100',
channel: [1, 44, 44],
cellSize: [1, 44, 44],
probResponseThreshold: [1, 44, 44],
clientDisconnectThreshold: [1, 44, 44],
snr: [1, 44, 44],
minLoad: [1, 44, 44],
},
{
key: 1,
name: 'AP100',
channel: [1, 44, 44],
cellSize: [1, 44, 44],
probResponseThreshold: [1, 44, 44],
clientDisconnectThreshold: [1, 44, 44],
snr: [1, 44, 44],
minLoad: [1, 44, 44],
},
{
key: 2,
name: 'AP100',
channel: [1, 44, 44],
cellSize: [1, 44, 44],
probResponseThreshold: [1, 44, 44],
clientDisconnectThreshold: [1, 44, 44],
snr: [1, 44, 44],
minLoad: [1, 44, 44],
},
];

2
app/containers/Network/containers/AccessPoints/index.js
View File

@@ -30,7 +30,7 @@ const accessPointsTableColumns = [
},
{
title: 'ALARMS',
dataIndex: 'alarms',
dataIndex: 'alarmsCount',
render: renderTableCell,
},
{

124
app/containers/Network/containers/BulkEditAccessPoints/index.js
View File

@@ -174,6 +174,7 @@ const BulkEditAPs = () => {
const minLoadDetails = Object.values(getRadioDetails(details, 'minLoad'));
return {
key,
id: key,
name,
channel,
cellSize: cellSizeDetails,
@@ -189,66 +190,76 @@ const BulkEditAPs = () => {
const editedRowsArr = [];
const handleSaveChanges = updatedRows => {
if (updatedRows.length > 0) {
updatedRows.map(item => {
const tempObj = {
equipmentId: 0,
perRadioDetails: {
is5GHzU: {
channelNumber: item.channel[0],
rxCellSizeDb: {
auto: true,
value: item.cellSize[0],
updatedRows.map(
({
id: equipmentId,
channel,
cellSize,
probeResponseThreshold,
clientDisconnectThreshold,
snrDrop,
minLoad,
}) => {
const tempObj = {
equipmentId,
perRadioDetails: {
is5GHzU: {
channelNumber: channel[0],
rxCellSizeDb: {
auto: true,
value: cellSize[0],
},
probeResponseThresholdDb: {
auto: true,
value: probeResponseThreshold[0],
},
clientDisconnectThresholdDb: {
auto: true,
value: clientDisconnectThreshold[0],
},
dropInSnrPercentage: snrDrop[0],
minLoadFactor: minLoad[0],
},
probeResponseThresholdDb: {
auto: true,
value: item.probeResponseThreshold[0],
is5GHzL: {
channelNumber: channel[2],
rxCellSizeDb: {
auto: true,
value: cellSize[1],
},
probeResponseThresholdDb: {
auto: true,
value: probeResponseThreshold[1],
},
clientDisconnectThresholdDb: {
auto: true,
value: clientDisconnectThreshold[1],
},
dropInSnrPercentage: snrDrop[1],
minLoadFactor: minLoad[1],
},
clientDisconnectThresholdDb: {
auto: true,
value: item.clientDisconnectThreshold[0],
is2dot4GHz: {
channelNumber: channel[1],
rxCellSizeDb: {
auto: true,
value: cellSize[2],
},
probeResponseThresholdDb: {
auto: true,
value: probeResponseThreshold[2],
},
clientDisconnectThresholdDb: {
auto: true,
value: clientDisconnectThreshold[2],
},
dropInSnrPercentage: snrDrop[2],
minLoadFactor: minLoad[2],
},
dropInSnrPercentage: item.snrDrop[0],
minLoadFactor: item.minLoad[0],
},
is5GHzL: {
channelNumber: item.channel[1],
rxCellSizeDb: {
auto: true,
value: item.cellSize[1],
},
probeResponseThresholdDb: {
auto: true,
value: item.probeResponseThreshold[1],
},
clientDisconnectThresholdDb: {
auto: true,
value: item.clientDisconnectThreshold[1],
},
dropInSnrPercentage: item.snrDrop[1],
minLoadFactor: item.minLoad[1],
},
is2dot4GHz: {
channelNumber: item.channel[2],
rxCellSizeDb: {
auto: true,
value: item.cellSize[2],
},
probeResponseThresholdDb: {
auto: true,
value: item.probeResponseThreshold[2],
},
clientDisconnectThresholdDb: {
auto: true,
value: item.clientDisconnectThreshold[2],
},
dropInSnrPercentage: item.snrDrop[2],
minLoadFactor: item.minLoad[2],
},
},
};
editedRowsArr.push(tempObj);
return tempObj;
});
};
editedRowsArr.push(tempObj);
return tempObj;
}
);
updateEquipmentBulk({
variables: { items: editedRowsArr },
})
@@ -299,6 +310,7 @@ const BulkEditAPs = () => {
<Alert message="Error" description="Failed to load equipments data." type="error" showIcon />
);
}
return (
<BulkEditAccessPoints
tableColumns={accessPointsChannelTableColumns}

98
app/containers/Network/containers/ClientDeviceDetails/index.js
View File

@@ -1,18 +1,56 @@
import React, { useContext } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from '@apollo/react-hooks';
import { Alert } from 'antd';
import { Loading } from '@tip-wlan/wlan-cloud-ui-library';
import moment from 'moment';
import { Alert, notification } from 'antd';
import {
Loading,
ClientDeviceDetails as ClientDevicesDetailsPage,
} from '@tip-wlan/wlan-cloud-ui-library';
import UserContext from 'contexts/UserContext';
import { GET_CLIENT_SESSION } from 'graphql/queries';
import { GET_CLIENT_SESSION, FILTER_SERVICE_METRICS } from 'graphql/queries';
const ClientDeviceDetails = () => {
const toTime = moment();
const fromTime = toTime.subtract(4, 'hours');
const { id } = useParams();
const { customerId } = useContext(UserContext);
const { loading, error, data } = useQuery(GET_CLIENT_SESSION, {
const { loading, error, data, refetch } = useQuery(GET_CLIENT_SESSION, {
variables: { customerId, macAddress: id },
});
const {
loading: metricsLoading,
error: metricsError,
data: metricsData,
refetch: metricsRefetch,
} = useQuery(FILTER_SERVICE_METRICS, {
variables: {
customerId,
fromTime: fromTime.unix(),
toTime: toTime.unix(),
clientMacs: [id],
dataTypes: ['Client'],
},
});
const handleOnRefresh = () => {
metricsRefetch();
refetch()
.then(() => {
notification.success({
message: 'Success',
description: 'Successfully reloaded.',
});
})
.catch(() =>
notification.error({
message: 'Error',
description: 'Could not be reloaded.',
})
);
};
if (loading) {
return <Loading />;
@@ -24,46 +62,18 @@ const ClientDeviceDetails = () => {
);
}
const { macAddress } = data.getClientSession[0];
/*
const {
macAddress,
ipAddress,
hostname,
ssid,
radioType,
signal,
equipment: { name },
details: { assocTimestamp, rxMbps, txMbps, rxRateKbps, txRateKbps,
dhcpDetails: {dhcpServerIp, primaryDns, secondaryDns, gatewayIp, subnetMask, leaseTimeInSeconds, leaseStartTimestamp}
},
} = data.getClientSession[0];
assocTimestamp = Associated On
equipment.name = Access Point
radioType = Radio Band
signal = Signal Strength
rxRateKbps = Rx Rate
txRateKbps = Tx Rate
Data Transfered = rxBytes + txBytes
rxMbps = Rx Throughput
txMbps = Tx Throughputhttps://www.lowes.ca/product/bathtub-shower-door-glass/jade-bath-60-in-sliding-bathroom-door-330585448
totalRxPackets = Total Rx Packets
totalTxPackets = Total Tx Packets
dhcpServerIp = DHCP Server
primaryDns = Primary DNS
secondaryDns = Secondary DNS
gatewayIp = Gateway
subnetMask = Subnet Mask
leaseTimeInSeconds = IP Lease Time
leaseStartTimestamp = IP Lease Start
*/
return <h1>Client Device Details: {macAddress}</h1>;
return (
<ClientDevicesDetailsPage
data={data.getClientSession[0]}
onRefresh={handleOnRefresh}
metricsLoading={metricsLoading}
metricsError={metricsError}
metricsData={
metricsData && metricsData.filterServiceMetrics && metricsData.filterServiceMetrics.items
}
historyDate={toTime}
/>
);
};
export default ClientDeviceDetails;

34
app/graphql/queries.js
View File

@@ -31,6 +31,8 @@ export const FILTER_EQUIPMENT = gql`
profileId
inventoryId
channel
model
alarmsCount
profile {
name
}
@@ -138,3 +140,35 @@ export const GET_CLIENT_SESSION = gql`
}
}
`;
export const FILTER_SERVICE_METRICS = gql`
query FilterServiceMetrics(
$customerId: Int!
$cursor: String
$fromTime: Int!
$toTime: Int!
$clientMacs: [String]
$dataTypes: [String]
) {
filterServiceMetrics(
customerId: $customerId
cursor: $cursor
fromTime: $fromTime
toTime: $toTime
clientMacs: $clientMacs
dataTypes: $dataTypes
) {
items {
dataType
createdTimestamp
rssi
rxBytes
txBytes
}
context {
lastPage
cursor
}
}
}
`;

6
package-lock.json generated
View File

@@ -1874,9 +1874,9 @@
}
},
"@tip-wlan/wlan-cloud-ui-library": {
"version": "0.1.11",
"resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-0.1.11.tgz",
"integrity": "sha1-yYeK/6Ecpu9BFGbGezr5sjO7HF8="
"version": "0.1.13",
"resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-0.1.13.tgz",
"integrity": "sha1-PZKcA4oqA6DTYk1SQOWUgx6wPOk="
},
"@types/anymatch": {
"version": "1.3.1",

4
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "wlan-cloud-ui",
"version": "0.1.0",
"version": "0.1.1",
"author": "ConnectUs",
"description": "React Portal",
"engines": {
@@ -20,7 +20,7 @@
"@ant-design/icons": "^4.2.1",
"@apollo/react-hoc": "^3.1.4",
"@apollo/react-hooks": "^3.1.3",
"@tip-wlan/wlan-cloud-ui-library": "^0.1.11",
"@tip-wlan/wlan-cloud-ui-library": "^0.1.13",
"antd": "^4.3.1",
"apollo-boost": "^0.4.7",
"clean-webpack-plugin": "^3.0.0",