scottk/wlan-cloud-ucentralgw-ui
1
0
Fork 0
mirror of https://github.com/Telecominfraproject/wlan-cloud-ucentralgw-ui.git synced 2025-11-01 19:27:58 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

First version of Device Dashboard

Browse Source
This commit is contained in:
BourqueCharles
2021-07-29 16:39:07 -04:00
parent b1d999a42e
commit 09887a439e
8 changed files with 357 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/locales/de/translation.json
View File

@@ -32,9 +32,12 @@
"back_to_login": "Zurück zur Anmeldung",
"cancel": "Abbrechen",
"certificate": "Zertifikat",
"certificates": "Zertifikate",
"clear": "Löschen",
"close": "Schließen",
"command": "Befehl",
"commands": "Befehle",
"commands_executed": "Ausgeführte Befehle",
"compatible": "kompatibel",
"completed": "Abgeschlossen",
"config_id": "Konfigurations ID",
@@ -46,13 +49,16 @@
"created_by": "Erstellt von",
"current": "Aktuell",
"custom_date": "Benutzerdefiniertes Datum",
"dashboard": "Instrumententafel",
"date": "Datum",
"day": "tag",
"days": "tage",
"delete": "Löschen",
"details": "Einzelheiten",
"device_health": "Gerätezustand",
"device_list": "Liste der Geräte",
"device_page": "Aussicht",
"device_status": "Gerätestatus",
"devices": "Geräte",
"dismiss": "entlassen",
"do_now": "Sofort",
@@ -82,6 +88,7 @@
"logout": "Ausloggen",
"mac": "MAC-Adresse",
"manufacturer": "Hersteller",
"memory_used": "Verwendeter Speicher",
"minute": "Minute",
"minutes": "protokoll",
"na": "(unbekannt)",
@@ -111,7 +118,9 @@
"timestamp": "Zeit",
"to": "zu",
"unknown": "unbekannte",
"uptimes": "Betriebszeiten",
"uuid": "UUID",
"vendors": "Anbieter",
"view_more": "Mehr anzeigen",
"yes": "Ja"
},
@@ -162,6 +171,7 @@
"choose_custom": "Wählen Sie benutzerdefinierte Firmware",
"details_title": "Bild #{{image}} Details",
"device_type": "Gerätetyp",
"device_types": "Gerätetypen",
"downloads": "Downloads",
"error_fetching_latest": "Fehler beim Abrufen der neuesten Firmware",
"image": "Bild",

10
public/locales/en/translation.json
View File

@@ -32,9 +32,12 @@
"back_to_login": "Back to Login",
"cancel": "Cancel",
"certificate": "Certificate",
"certificates": "Certificates",
"clear": "Clear",
"close": "Close",
"command": "Command",
"commands": "Commands",
"commands_executed": "Commands Executed",
"compatible": "Compatible",
"completed": "Completed",
"config_id": "Config. Id",
@@ -46,13 +49,16 @@
"created_by": "Created By",
"current": "Current ",
"custom_date": "Custom Date",
"dashboard": "Dashboard",
"date": "Date",
"day": "day",
"days": "days",
"delete": "Delete",
"details": "Details",
"device_health": "Device Health",
"device_list": "List of Devices",
"device_page": "View",
"device_status": "Device Status",
"devices": "Devices",
"dismiss": "Dismiss",
"do_now": "Do Now!",
@@ -82,6 +88,7 @@
"logout": "Logout",
"mac": "MAC Address",
"manufacturer": "Manufacturer",
"memory_used": "Memory Used",
"minute": "minute",
"minutes": "minutes",
"na": "N/A",
@@ -111,7 +118,9 @@
"timestamp": "Time",
"to": "To",
"unknown": "Unknown",
"uptimes": "Uptimes",
"uuid": "UUID",
"vendors": "Vendors",
"view_more": "View more",
"yes": "Yes"
},
@@ -162,6 +171,7 @@
"choose_custom": "Choose Custom Firmware",
"details_title": "Image #{{image}} Details",
"device_type": "Device Type",
"device_types": "Device Types",
"downloads": "Downloads",
"error_fetching_latest": "Error while fetching latest firmware",
"image": "Image",

10
public/locales/es/translation.json
View File

@@ -32,9 +32,12 @@
"back_to_login": "Atrás para iniciar sesión",
"cancel": "Cancelar",
"certificate": "Certificado",
"certificates": "Certificados",
"clear": "Claro",
"close": "Cerrar",
"command": "Mando",
"commands": "comandos",
"commands_executed": "Comandos ejecutados",
"compatible": "Compatible",
"completed": "terminado",
"config_id": "Config. Identificación",
@@ -46,13 +49,16 @@
"created_by": "Creado por",
"current": "Corriente",
"custom_date": "Fecha personalizada",
"dashboard": "Tablero",
"date": "Fecha",
"day": "día",
"days": "días",
"delete": "Borrar",
"details": "Detalles",
"device_health": "Salud del dispositivo",
"device_list": "Listado de dispositivos",
"device_page": "Ver",
"device_status": "Estado del dispositivo",
"devices": "Dispositivos",
"dismiss": "Despedir",
"do_now": "¡Hagan ahora!",
@@ -82,6 +88,7 @@
"logout": "Cerrar sesión",
"mac": "Dirección MAC",
"manufacturer": "Fabricante",
"memory_used": "Memoria usada",
"minute": "minuto",
"minutes": "minutos",
"na": "N / A",
@@ -111,7 +118,9 @@
"timestamp": "hora",
"to": "a",
"unknown": "Desconocido",
"uptimes": "Tiempos de actividad",
"uuid": "UUID",
"vendors": "Vendedores",
"view_more": "Ver más",
"yes": "Sí"
},
@@ -162,6 +171,7 @@
"choose_custom": "Elija firmware personalizado",
"details_title": "Detalles de la imagen n. °{{image}} ",
"device_type": "Tipo de dispositivo",
"device_types": "Tipos de dispositivos",
"downloads": "Descargas",
"error_fetching_latest": "Error al obtener el firmware más reciente",
"image": "Imagen",

10
public/locales/fr/translation.json
View File

@@ -32,9 +32,12 @@
"back_to_login": "Retour connexion",
"cancel": "annuler",
"certificate": "Certificat",
"certificates": "Certificats",
"clear": "Clair",
"close": "Fermer",
"command": "Commander",
"commands": "Les commandes",
"commands_executed": "commandes exécutées",
"compatible": "Compatible",
"completed": "Terminé",
"config_id": "Config. Identifiant",
@@ -46,13 +49,16 @@
"created_by": "Créé par",
"current": "Actuel",
"custom_date": "Date personnalisée",
"dashboard": "Tableau de bord",
"date": "Rendez-vous amoureux",
"day": "journée",
"days": "journées",
"delete": "Effacer",
"details": "Détails",
"device_health": "Santé de l'appareil",
"device_list": "Liste des appareils",
"device_page": "Vue",
"device_status": "Statut du périphérique",
"devices": "Dispositifs",
"dismiss": "Rejeter",
"do_now": "Faire maintenant!",
@@ -82,6 +88,7 @@
"logout": "Connectez - Out",
"mac": "ADRESSE MAC",
"manufacturer": "fabricant",
"memory_used": "Mémoire utilisée",
"minute": "minute",
"minutes": "minutes",
"na": "N / A",
@@ -111,7 +118,9 @@
"timestamp": "Temps",
"to": "à",
"unknown": "Inconnu",
"uptimes": "Disponibilités",
"uuid": "UUID",
"vendors": "Vendeurs",
"view_more": "Afficher plus",
"yes": "Oui"
},
@@ -162,6 +171,7 @@
"choose_custom": "Choisissez un micrologiciel personnalisé",
"details_title": "Image #{{image}} Détails",
"device_type": "Type d'appareil",
"device_types": "Types d'appareils",
"downloads": "Téléchargements",
"error_fetching_latest": "Erreur lors de la récupération du dernier firmware",
"image": "Image",

10
public/locales/pt/translation.json
View File

@@ -32,9 +32,12 @@
"back_to_login": "Volte ao login",
"cancel": "Cancelar",
"certificate": "Certificado",
"certificates": "Certificados",
"clear": "Claro",
"close": "Perto",
"command": "Comando",
"commands": "comandos",
"commands_executed": "Comandos Executados",
"compatible": "Compatível",
"completed": "Concluído",
"config_id": "Config. Identidade",
@@ -46,13 +49,16 @@
"created_by": "Criado Por",
"current": "Atual",
"custom_date": "Data personalizada",
"dashboard": "painel de controle",
"date": "Encontro",
"day": "dia",
"days": "dias",
"delete": "Excluir",
"details": "Detalhes",
"device_health": "Saúde do Dispositivo",
"device_list": "Lista de Dispositivos",
"device_page": "Visão",
"device_status": "Status do dispositivo",
"devices": "Devices",
"dismiss": "Dispensar",
"do_now": "Faça agora!",
@@ -82,6 +88,7 @@
"logout": "Sair",
"mac": "Endereço MAC",
"manufacturer": "Fabricante",
"memory_used": "Memória Usada",
"minute": "minuto",
"minutes": "minutos",
"na": "N / D",
@@ -111,7 +118,9 @@
"timestamp": "tempo",
"to": "Para",
"unknown": "Desconhecido",
"uptimes": "Uptimes",
"uuid": "UUID",
"vendors": "Vendedores",
"view_more": "Veja mais",
"yes": "sim"
},
@@ -162,6 +171,7 @@
"choose_custom": "Escolha o firmware personalizado",
"details_title": "Detalhes da imagem #{{image}} ",
"device_type": "Tipo de dispositivo",
"device_types": "Tipos de dispositivos",
"downloads": "Transferências",
"error_fetching_latest": "Erro ao buscar o firmware mais recente",
"image": "Imagem",

15
src/layout/index.js
View File

@@ -12,10 +12,21 @@ const TheLayout = () => {
const navigation = [
{
_tag: 'CSidebarNavItem',
_tag: 'CSidebarNavDropdown',
name: t('common.devices'),
to: '/devices',
icon: 'cilRouter',
_children: [
{
_tag: 'CSidebarNavItem',
name: t('common.dashboard'),
to: '/devicedashboard',
},
{
_tag: 'CSidebarNavItem',
name: t('common.devices'),
to: '/devices',
},
],
},
{
_tag: 'CSidebarNavItem',

292
src/pages/DeviceDashboard/index.js Normal file
View File

@@ -0,0 +1,292 @@
import React, { useState, useEffect } from 'react';
import { useAuth } from 'contexts/AuthProvider';
import { useTranslation } from 'react-i18next';
import { DeviceDashboard as Dashboard } from 'ucentral-libs';
import axiosInstance from 'utils/axiosInstance';
const DeviceDashboard = () => {
const { t } = useTranslation();
const { currentToken, endpoints } = useAuth();
const [loading, setLoading] = useState(false);
const [data, setData] = useState({
status: {
datasets: [],
labels: [],
},
healths: {
datasets: [],
labels: [],
},
upTimes: {
datasets: [],
labels: [],
},
deviceType: {
datasets: [],
labels: [],
},
vendors: {
datasets: [],
labels: [],
},
certificates: {
datasets: [],
labels: [],
},
commands: {
datasets: [],
labels: [],
},
memoryUsed: {
datasets: [],
labels: [],
},
});
const parseData = (newData) => {
const parsedData = newData;
// Status pie chart
const statusDs = [];
const statusColors = [];
const statusLabels = [];
for (const point of parsedData.status) {
statusDs.push(point.value);
statusLabels.push(point.tag);
let color = '';
switch (point.tag) {
case 'connected':
color = '#41B883';
break;
case 'not connected':
color = '#39f';
break;
default:
break;
}
statusColors.push(color);
}
parsedData.status = {
datasets: [
{
data: statusDs,
backgroundColor: statusColors,
},
],
labels: statusLabels,
};
// Health pie chart
const healthDs = [];
const healthColors = [];
const healthLabels = [];
for (const point of parsedData.healths) {
healthDs.push(point.value);
healthLabels.push(point.tag);
let color = '';
switch (point.tag) {
case '100%':
color = '#41B883';
break;
case '>60%':
color = '#f9b115';
break;
case '<60%%>':
color = '#e55353';
break;
default:
color = '#39f';
break;
}
healthColors.push(color);
}
parsedData.healths = {
datasets: [
{
data: healthDs,
backgroundColor: healthColors,
},
],
labels: healthLabels,
};
// Uptime bar chart
const uptimeDs = [];
const uptimeColors = [];
const uptimeLabels = [];
for (const point of parsedData.upTimes) {
uptimeDs.push(point.value);
uptimeLabels.push(point.tag);
uptimeColors.push('#39f');
}
parsedData.upTimes = {
datasets: [
{
label: 'Devices',
data: uptimeDs,
backgroundColor: uptimeColors,
},
],
labels: uptimeLabels,
};
// Vendors bar chart
const vendorsTypeDs = [];
const vendorsColors = [];
const vendorsLabels = [];
const sortedVendors = parsedData.vendors.sort((a, b) => (a.value < b.value ? 1 : -1));
for (const point of sortedVendors) {
vendorsTypeDs.push(point.value);
vendorsLabels.push(point.tag === '' ? 'Unknown' : point.tag);
vendorsColors.push('#eb7474');
}
parsedData.vendors = {
datasets: [
{
label: 'Devices',
data: vendorsTypeDs.slice(0, 5),
backgroundColor: vendorsColors,
},
],
labels: vendorsLabels.slice(0, 5),
};
// Device Type pie chart
const deviceTypeDs = [];
const deviceTypeColors = [];
const deviceTypeLabels = [];
for (const point of parsedData.deviceType) {
deviceTypeDs.push(point.value);
deviceTypeLabels.push(point.tag);
let color = '';
switch (point.tag) {
case '100%':
color = '#41B883';
break;
case '>60%':
color = '#f9b115';
break;
case '<60%%>':
color = '#e55353';
break;
default:
color = '#39f';
break;
}
deviceTypeColors.push(color);
}
parsedData.deviceType = {
datasets: [
{
data: deviceTypeDs,
backgroundColor: deviceTypeColors,
},
],
labels: deviceTypeLabels,
};
// Certificates pie chart
const certificatesDs = [];
const certificatesColors = [];
const certificatesLabels = [];
for (const point of parsedData.certificates) {
certificatesDs.push(point.value);
certificatesLabels.push(point.tag);
let color = '';
switch (point.tag) {
case 'verified':
color = '#41B883';
break;
case 'serial mismatch':
color = '#f9b115';
break;
case 'no certificate':
color = '#e55353';
break;
default:
color = '#39f';
break;
}
certificatesColors.push(color);
}
parsedData.certificates = {
datasets: [
{
data: certificatesDs,
backgroundColor: certificatesColors,
},
],
labels: certificatesLabels,
};
// Commands bar chart
const commandsDs = [];
const commandsColors = [];
const commandsLabels = [];
for (const point of parsedData.commands) {
commandsDs.push(point.value);
commandsLabels.push(point.tag);
commandsColors.push('#39f');
}
parsedData.commands = {
datasets: [
{
label: t('common.commands_executed'),
data: commandsDs,
backgroundColor: commandsColors,
},
],
labels: commandsLabels,
};
// Memory Used bar chart
const memoryDs = [];
const memoryColors = [];
const memoryLabels = [];
for (const point of parsedData.memoryUsed) {
memoryDs.push(point.value);
memoryLabels.push(point.tag);
memoryColors.push('#636f83');
}
parsedData.memoryUsed = {
datasets: [
{
label: 'Devices',
data: memoryDs,
backgroundColor: memoryColors,
},
],
labels: memoryLabels,
};
setData(parsedData);
};
const getDashboard = () => {
setLoading(true);
const headers = {
Accept: 'application/json',
Authorization: `Bearer ${currentToken}`,
};
axiosInstance
.get(`${endpoints.ucentralgw}/api/v1/deviceDashboard`, {
headers,
})
.then((response) => {
parseData(response.data);
setLoading(false);
})
.catch(() => {
setLoading(false);
});
};
useEffect(() => {
getDashboard();
}, []);
return <Dashboard loading={loading} t={t} data={data} />;
};
export default DeviceDashboard;

2
src/routes.js
View File

@@ -1,6 +1,7 @@
import React from 'react';
const DevicePage = React.lazy(() => import('pages/DevicePage'));
const DeviceDashboard = React.lazy(() => import('pages/DeviceDashboard'));
const DeviceListPage = React.lazy(() => import('pages/DeviceListPage'));
const UserListPage = React.lazy(() => import('pages/UserListPage'));
const ProfilePage = React.lazy(() => import('pages/ProfilePage'));
@@ -9,6 +10,7 @@ const SettingsPage = React.lazy(() => import('pages/SettingsPage'));
const FirmwareListPage = React.lazy(() => import('pages/FirmwareListPage'));
export default [
{ path: '/devicedashboard', exact: true, name: 'common.devices', component: DeviceDashboard },
{ path: '/devices', exact: true, name: 'common.devices', component: DeviceListPage },
{
path: '/devices/:deviceId/wifianalysis',