andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 07:49:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

more tables

Browse Source
This commit is contained in:
Proddy
2022-04-15 16:22:05 +02:00
parent 4b3b9524ef
commit 04a374c380
8 changed files with 275 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
interface/src/framework/security/ManageUsersForm.tsx
View File

@@ -1,6 +1,6 @@
import { FC, useContext, useState } from 'react';
import { Button, IconButton, Table, TableBody, TableCell, TableFooter, TableHead, TableRow } from '@mui/material';
import { Button, IconButton, Box } from '@mui/material';
import SaveIcon from '@mui/icons-material/Save';
import DeleteIcon from '@mui/icons-material/Delete';
import PersonAddIcon from '@mui/icons-material/PersonAdd';
@@ -9,6 +9,10 @@ import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import VpnKeyIcon from '@mui/icons-material/VpnKey';
import { Table } from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import { Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
import * as SecurityApi from '../../api/security';
import { SecuritySettings, User } from '../../types';
import { ButtonRow, FormLoader, MessageBox, SectionContent } from '../../components';
@@ -19,16 +23,6 @@ import { AuthenticatedContext } from '../../contexts/authentication';
import GenerateToken from './GenerateToken';
import UserForm from './UserForm';
function compareUsers(a: User, b: User) {
if (a.username < b.username) {
return -1;
}
if (a.username > b.username) {
return 1;
}
return 0;
}
const ManageUsersForm: FC = () => {
const { loadData, saving, data, setData, saveData, errorMessage } = useRest<SecuritySettings>({
read: SecurityApi.readSecuritySettings,
@@ -40,6 +34,45 @@ const ManageUsersForm: FC = () => {
const [generatingToken, setGeneratingToken] = useState<string>();
const authenticatedContext = useContext(AuthenticatedContext);
const table_theme = useTheme({
BaseRow: `
font-size: 14px;
color: white;
`,
HeaderRow: `
text-transform: uppercase;
background-color: black;
color: #90CAF9;
border-bottom: 1px solid #e0e0e0;
`,
Row: `
&:nth-of-type(odd) {
background-color: #303030;
}
&:nth-of-type(even) {
background-color: #1e1e1e;
}
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
position: relative;
z-index: 1;
&:not(:last-of-type) {
margin-bottom: -1px;
}
&:not(:first-of-type) {
margin-top: -1px;
}
&:hover {
color: white;
}
`,
BaseCell: `
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
`
});
const content = () => {
if (!data) {
return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -48,13 +81,14 @@ const ManageUsersForm: FC = () => {
const noAdminConfigured = () => !data.users.find((u) => u.admin);
const removeUser = (toRemove: User) => {
const users = data.users.filter((u) => u.username !== toRemove.username);
const users = data.users.filter((u) => u.id !== toRemove.id);
setData({ ...data, users });
};
const createUser = () => {
setCreating(true);
setUser({
id: '',
username: '',
password: '',
admin: true
@@ -72,7 +106,7 @@ const ManageUsersForm: FC = () => {
const doneEditingUser = () => {
if (user) {
const users = [...data.users.filter((u) => u.username !== user.username), user];
const users = [...data.users.filter((u) => u.id !== user.id), user];
setData({ ...data, users });
setUser(undefined);
}
@@ -82,8 +116,8 @@ const ManageUsersForm: FC = () => {
setGeneratingToken(undefined);
};
const generateToken = (username: string) => {
setGeneratingToken(username);
const generateToken = (id: string) => {
setGeneratingToken(id);
};
const onSubmit = async () => {
@@ -93,66 +127,71 @@ const ManageUsersForm: FC = () => {
return (
<>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Username</TableCell>
<TableCell align="center">is Admin?</TableCell>
<TableCell />
</TableRow>
</TableHead>
<TableBody>
{data.users.sort(compareUsers).map((u) => (
<TableRow key={u.username}>
<TableCell component="th" scope="row">
{u.username}
</TableCell>
<TableCell align="center">{u.admin ? <CheckIcon /> : <CloseIcon />}</TableCell>
<TableCell align="center">
<IconButton
size="small"
disabled={!authenticatedContext.me.admin}
aria-label="Generate Token"
onClick={() => generateToken(u.username)}
>
<VpnKeyIcon />
</IconButton>
<IconButton size="small" aria-label="Delete" onClick={() => removeUser(u)}>
<DeleteIcon />
</IconButton>
<IconButton size="small" aria-label="Edit" onClick={() => editUser(u)}>
<EditIcon />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={2} />
<TableCell align="center">
<Button startIcon={<PersonAddIcon />} variant="outlined" color="secondary" onClick={createUser}>
Add
</Button>
</TableCell>
</TableRow>
</TableFooter>
<Table data={{ nodes: data.users }} theme={table_theme}>
{(tableList: any) => (
<>
<Header>
<HeaderRow>
<HeaderCell>USERNAME</HeaderCell>
<HeaderCell>IS ADMIN</HeaderCell>
<HeaderCell />
</HeaderRow>
</Header>
<Body>
{tableList.map((u: User, index: number) => (
<Row key={u.id} item={u}>
<Cell>{u.id}</Cell>
<Cell>{u.admin ? <CheckIcon /> : <CloseIcon />}</Cell>
<Cell>
<IconButton
size="small"
disabled={!authenticatedContext.me.admin}
aria-label="Generate Token"
onClick={() => generateToken(u.id)}
>
<VpnKeyIcon />
</IconButton>
<IconButton size="small" aria-label="Delete" onClick={() => removeUser(u)}>
<DeleteIcon />
</IconButton>
<IconButton size="small" aria-label="Edit" onClick={() => editUser(u)}>
<EditIcon />
</IconButton>
</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
{noAdminConfigured() && (
<MessageBox level="warning" message="You must have at least one admin user configured" my={2} />
)}
<ButtonRow>
<Button
startIcon={<SaveIcon />}
disabled={saving || noAdminConfigured()}
variant="outlined"
color="primary"
type="submit"
onClick={onSubmit}
>
Save
</Button>
</ButtonRow>
<Box display="flex" flexWrap="wrap">
<Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
<Button
startIcon={<SaveIcon />}
disabled={saving || noAdminConfigured()}
variant="outlined"
color="primary"
type="submit"
onClick={onSubmit}
>
Save
</Button>
</Box>
<Box flexWrap="nowrap" whiteSpace="nowrap">
<ButtonRow>
<Button startIcon={<PersonAddIcon />} variant="outlined" color="secondary" onClick={createUser}>
Add
</Button>
</ButtonRow>
</Box>
</Box>
<GenerateToken username={generatingToken} onClose={closeGenerateToken} />
<UserForm
user={user}

151
interface/src/project/DashboardStatus.tsx
View File

@@ -3,25 +3,23 @@ import { useSnackbar } from 'notistack';
import {
Avatar,
Button,
Table,
TableContainer,
TableBody,
TableCell,
TableHead,
TableRow,
List,
ListItem,
ListItemAvatar,
ListItemText,
Theme,
useTheme,
Box,
Dialog,
DialogActions,
DialogContent,
DialogTitle
DialogTitle,
Theme,
useTheme
} from '@mui/material';
import { Table } from '@table-library/react-table-library/table';
import { useTheme as tableTheme } from '@table-library/react-table-library/theme';
import { Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
import DeviceHubIcon from '@mui/icons-material/DeviceHub';
import RefreshIcon from '@mui/icons-material/Refresh';
import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
@@ -32,14 +30,12 @@ import { AuthenticatedContext } from '../contexts/authentication';
import { ButtonRow, FormLoader, SectionContent } from '../components';
import { Status, busConnectionStatus } from './types';
import { Status, busConnectionStatus, Stat } from './types';
import { formatDurationSec, pluralize } from '../utils';
import { formatDurationSec, pluralize, extractErrorMessage, useRest } from '../utils';
import * as EMSESP from './api';
import { extractErrorMessage, useRest } from '../utils';
export const isConnected = ({ status }: Status) => status !== busConnectionStatus.BUS_STATUS_OFFLINE;
const busStatusHighlight = ({ status }: Status, theme: Theme) => {
@@ -60,7 +56,7 @@ const busStatus = ({ status }: Status) => {
case busConnectionStatus.BUS_STATUS_CONNECTED:
return 'Connected';
case busConnectionStatus.BUS_STATUS_TX_ERRORS:
return 'Tx issues - try a different Tx-Mode';
return 'Tx issues - try a different Tx Mode';
case busConnectionStatus.BUS_STATUS_OFFLINE:
return 'Disconnected';
default:
@@ -68,41 +64,17 @@ const busStatus = ({ status }: Status) => {
}
};
const formatRow = (name: string, success: number, fail: number, quality: number) => {
if (success === 0 && fail === 0) {
return (
<TableRow>
<TableCell sx={{ color: 'gray' }}>{name}</TableCell>
<TableCell />
<TableCell />
<TableCell />
</TableRow>
);
const showQuality = (stat: Stat) => {
if (stat.q === 0 || stat.s + stat.f === 0) {
return;
}
return (
<TableRow>
<TableCell>{name}</TableCell>
<TableCell>{Intl.NumberFormat().format(success)}</TableCell>
<TableCell>{Intl.NumberFormat().format(fail)}</TableCell>
{showQuality(quality)}
</TableRow>
);
};
const showQuality = (quality: number) => {
if (quality === 0) {
return <TableCell />;
if (stat.q === 100) {
return <div style={{ color: '#00FF7F' }}>{stat.q}%</div>;
}
if (quality === 100) {
return <TableCell sx={{ color: '#00FF7F' }}>{quality}%</TableCell>;
}
if (quality >= 95) {
return <TableCell sx={{ color: 'orange' }}>{quality}%</TableCell>;
if (stat.q >= 95) {
return <div style={{ color: 'orange' }}>{stat.q}%</div>;
} else {
return <TableCell sx={{ color: 'red' }}>{quality}%</TableCell>;
return <div style={{ color: 'red' }}>{stat.q}%</div>;
}
};
@@ -115,6 +87,48 @@ const DashboardStatus: FC = () => {
const { me } = useContext(AuthenticatedContext);
const stats_theme = tableTheme({
BaseRow: `
font-size: 14px;
color: white;
`,
HeaderRow: `
text-transform: uppercase;
background-color: black;
color: #90CAF9;
border-bottom: 1px solid #e0e0e0;
`,
Row: `
&:nth-of-type(odd) {
background-color: #303030;
}
&:nth-of-type(even) {
background-color: #1e1e1e;
}
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
position: relative;
z-index: 1;
&:not(:last-of-type) {
margin-bottom: -1px;
}
&:not(:first-of-type) {
margin-top: -1px;
}
&:hover {
color: white;
}
`,
BaseCell: `
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
&:nth-of-type(1) {
flex: 1;
}
`
});
useEffect(() => {
const timer = setInterval(() => loadData(), 30000);
return () => {
@@ -183,27 +197,30 @@ const DashboardStatus: FC = () => {
/>
</ListItem>
<Box m={3}></Box>
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell></TableCell>
<TableCell>SUCCESS</TableCell>
<TableCell>FAIL</TableCell>
<TableCell>QUALITY</TableCell>
</TableRow>
</TableHead>
<TableBody>
{formatRow('EMS Telegrams Received (Rx)', data.rx_received, data.rx_fails, data.rx_quality)}
{formatRow('EMS Reads (Tx)', data.tx_reads, data.tx_read_fails, data.tx_read_quality)}
{formatRow('EMS Writes (Tx)', data.tx_writes, data.tx_write_fails, data.tx_write_quality)}
{formatRow('Temperature Sensor Reads', data.sensor_reads, data.sensor_fails, data.sensor_quality)}
{formatRow('Analog Sensor Reads', data.analog_reads, data.analog_fails, data.analog_quality)}
{formatRow('MQTT Publishes', data.mqtt_count, data.mqtt_fails, data.mqtt_quality)}
{formatRow('API Calls', data.api_calls, data.api_fails, data.api_quality)}
</TableBody>
</Table>
</TableContainer>
<Table data={{ nodes: data.stats }} theme={stats_theme} layout={{ custom: true }}>
{(tableList: any) => (
<>
<Header>
<HeaderRow>
<HeaderCell></HeaderCell>
<HeaderCell>SUCCESS</HeaderCell>
<HeaderCell>FAIL</HeaderCell>
<HeaderCell>QUALITY</HeaderCell>
</HeaderRow>
</Header>
<Body>
{tableList.map((stat: Stat, index: number) => (
<Row key={stat.id} item={stat}>
<Cell>{stat.id}</Cell>
<Cell>{Intl.NumberFormat().format(stat.s)}</Cell>
<Cell>{Intl.NumberFormat().format(stat.f)}</Cell>
<Cell>{showQuality(stat)}</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
</List>
{renderScanDialog()}
<Box display="flex" flexWrap="wrap">

31
interface/src/project/types.ts
View File

@@ -38,36 +38,21 @@ export enum busConnectionStatus {
BUS_STATUS_OFFLINE = 2
}
export interface Stat {
id: string; // name
s: number; // success
f: number; // fail
q: number; // quality
}
export interface Status {
status: busConnectionStatus;
tx_mode: number;
rx_received: number;
tx_reads: number;
tx_writes: number;
rx_quality: number;
tx_read_quality: number;
tx_write_quality: number;
tx_read_fails: number;
tx_write_fails: number;
rx_fails: number;
sensor_fails: number;
sensor_reads: number;
sensor_quality: number;
analog_fails: number;
analog_reads: number;
analog_quality: number;
mqtt_count: number;
mqtt_fails: number;
mqtt_quality: number;
api_calls: number;
api_fails: number;
api_quality: number;
uptime: number;
num_devices: number;
num_sensors: number;
num_analogs: number;
uptime: number;
stats: Stat[];
}
export interface Device {
id: string; // id index
t: string; // type

1
interface/src/types/security.ts
View File

@@ -1,4 +1,5 @@
export interface User {
id: string; // needed for Table
username: string;
password: string;
admin: boolean;

1
lib/framework/SecuritySettingsService.h
View File

@@ -43,6 +43,7 @@ class SecuritySettings {
JsonArray users = root.createNestedArray("users");
for (User user : settings.users) {
JsonObject userRoot = users.createNestedObject();
userRoot["id"] = user.username; // for React Table
userRoot["username"] = user.username;
userRoot["password"] = user.password;
userRoot["admin"] = user.admin;

40
mock-api/server.js
View File

@@ -270,8 +270,8 @@ const system_status = {
security_settings = {
jwt_secret: 'naughty!',
users: [
{ username: 'admin', password: 'admin', admin: true },
{ username: 'guest', password: 'guest', admin: false },
{ id: 'admin', username: 'admin', password: 'admin', admin: true },
{ id: 'guest', username: 'guest', password: 'guest', admin: false },
],
}
const features = {
@@ -417,33 +417,21 @@ const emsesp_sensordata = {
}
const status = {
analog_fails: 0,
analog_quality: 100,
analog_reads: 203,
api_calls: 4,
api_fails: 0,
api_quality: 100,
mqtt_count: 40243,
mqtt_fails: 0,
mqtt_quality: 100,
num_analogs: 1,
num_devices: 2,
num_sensors: 1,
rx_fails: 11,
rx_quality: 100,
rx_received: 56506,
sensor_fails: 0,
sensor_quality: 100,
sensor_reads: 15438,
status: 0,
tx_mode: 1,
tx_read_fails: 0,
tx_read_quality: 100,
tx_reads: 9026,
tx_write_fails: 2,
tx_write_quality: 95,
tx_writes: 33,
uptime: 77186,
num_devices: 2,
num_sensors: 1,
num_analogs: 1,
stats: [
{ id: 'EMS Telegrams Received (Rx)', s: 56506, f: 11, q: 100 },
{ id: 'EMS Reads (Tx)', s: 9026, f: 0, q: 100 },
{ id: 'EMS Writes (Tx)', s: 33, f: 2, q: 95 },
{ id: 'Temperature Sensor Reads', s: 56506, f: 11, q: 100 },
{ id: 'Analog Sensor Reads', s: 0, f: 0, q: 100 },
{ id: 'MQTT Publishes', s: 12, f: 10, q: 20 },
{ id: 'API Calls', s: 0, f: 0, q: 0 },
],
}
// Dashboard data

11
src/web/WebDataService.cpp
View File

@@ -176,11 +176,12 @@ void WebDataService::device_data(AsyncWebServerRequest * request, JsonVariant &
emsdevice->generate_values_web(output);
#endif
#ifdef EMSESP_USE_SERIAL
#ifdef EMSESP_DEBUG
serializeJson(output, Serial);
#endif
#endif
// #ifdef EMSESP_USE_SERIAL
// #ifdef EMSESP_DEBUG
// serializeJson(output, Serial);
// #endif
// #endif
response->setLength();
request->send(response);
return;

79
src/web/WebStatusService.cpp
View File

@@ -129,34 +129,57 @@ void WebStatusService::webStatusService(AsyncWebServerRequest * request) {
auto * response = new AsyncJsonResponse(false, EMSESP_JSON_SIZE_MEDIUM_DYN);
JsonObject root = response->getRoot();
root["status"] = EMSESP::bus_status(); // 0, 1 or 2
root["num_devices"] = EMSESP::count_devices(); // excluding Controller
root["num_sensors"] = EMSESP::dallassensor_.no_sensors();
root["num_analogs"] = EMSESP::analogsensor_.no_sensors();
root["tx_mode"] = EMSESP::txservice_.tx_mode();
root["rx_received"] = EMSESP::rxservice_.telegram_count();
root["tx_reads"] = EMSESP::txservice_.telegram_read_count();
root["tx_writes"] = EMSESP::txservice_.telegram_write_count();
root["rx_quality"] = EMSESP::rxservice_.quality();
root["tx_read_quality"] = EMSESP::txservice_.read_quality();
root["tx_write_quality"] = EMSESP::txservice_.write_quality();
root["rx_fails"] = EMSESP::rxservice_.telegram_error_count();
root["tx_read_fails"] = EMSESP::txservice_.telegram_read_fail_count();
root["tx_write_fails"] = EMSESP::txservice_.telegram_write_fail_count();
root["sensor_fails"] = EMSESP::dallassensor_.fails();
root["sensor_reads"] = EMSESP::dallassensor_.reads();
root["sensor_quality"] = EMSESP::dallassensor_.reads() == 0 ? 100 : 100 - (uint8_t)((100 * EMSESP::dallassensor_.fails()) / EMSESP::dallassensor_.reads());
root["analog_fails"] = EMSESP::analogsensor_.fails();
root["analog_reads"] = EMSESP::analogsensor_.reads();
root["analog_quality"] = EMSESP::analogsensor_.reads() == 0 ? 100 : 100 - (uint8_t)((100 * EMSESP::analogsensor_.fails()) / EMSESP::analogsensor_.reads());
root["mqtt_fails"] = Mqtt::publish_fails();
root["mqtt_count"] = Mqtt::publish_count();
root["mqtt_quality"] = Mqtt::publish_count() == 0 ? 100 : 100 - (Mqtt::publish_fails() * 100) / (Mqtt::publish_count() + Mqtt::publish_fails());
root["api_calls"] = WebAPIService::api_count(); // + WebAPIService::api_fails();
root["api_fails"] = WebAPIService::api_fails();
root["api_quality"] =
WebAPIService::api_count() == 0 ? 100 : 100 - (WebAPIService::api_fails() * 100) / (WebAPIService::api_count() + WebAPIService::api_fails());
root["uptime"] = EMSbus::bus_uptime();
root["status"] = EMSESP::bus_status(); // 0, 1 or 2
root["tx_mode"] = EMSESP::txservice_.tx_mode();
root["uptime"] = EMSbus::bus_uptime();
root["num_devices"] = EMSESP::count_devices(); // excluding Controller
root["num_sensors"] = EMSESP::dallassensor_.no_sensors();
root["num_analogs"] = EMSESP::analogsensor_.no_sensors();
JsonArray statsJson = root.createNestedArray("stats");
JsonObject statJson;
statJson = statsJson.createNestedObject();
statJson["id"] = "EMS Telegrams Received (Rx)";
statJson["s"] = EMSESP::rxservice_.telegram_count();
statJson["f"] = EMSESP::rxservice_.telegram_error_count();
statJson["q"] = EMSESP::rxservice_.quality();
statJson = statsJson.createNestedObject();
statJson["id"] = "EMS Reads (Tx)";
statJson["s"] = EMSESP::txservice_.telegram_read_count();
statJson["f"] = EMSESP::txservice_.telegram_read_fail_count();
statJson["q"] = EMSESP::txservice_.read_quality();
statJson = statsJson.createNestedObject();
statJson["id"] = "EMS Writes (Tx)";
statJson["s"] = EMSESP::txservice_.telegram_write_count();
statJson["f"] = EMSESP::txservice_.telegram_write_fail_count();
statJson["q"] = EMSESP::txservice_.write_quality();
statJson = statsJson.createNestedObject();
statJson["id"] = "Temperature Sensor Reads";
statJson["s"] = EMSESP::dallassensor_.reads();
statJson["f"] = EMSESP::dallassensor_.fails();
statJson["q"] = EMSESP::dallassensor_.reads() == 0 ? 100 : 100 - (uint8_t)((100 * EMSESP::dallassensor_.fails()) / EMSESP::dallassensor_.reads());
statJson = statsJson.createNestedObject();
statJson["id"] = "Analog Sensor Reads";
statJson["s"] = EMSESP::analogsensor_.reads();
statJson["f"] = EMSESP::analogsensor_.fails();
statJson["q"] = EMSESP::analogsensor_.reads() == 0 ? 100 : 100 - (uint8_t)((100 * EMSESP::analogsensor_.fails()) / EMSESP::analogsensor_.reads());
statJson = statsJson.createNestedObject();
statJson["id"] = "MQTT Publishes";
statJson["s"] = Mqtt::publish_count();
statJson["f"] = Mqtt::publish_fails();
statJson["q"] = Mqtt::publish_count() == 0 ? 100 : 100 - (Mqtt::publish_fails() * 100) / (Mqtt::publish_count() + Mqtt::publish_fails());
statJson = statsJson.createNestedObject();
statJson["id"] = "API Calls";
statJson["s"] = WebAPIService::api_count(); // + WebAPIService::api_fails();
statJson["f"] = WebAPIService::api_fails();
statJson["q"] = WebAPIService::api_count() == 0 ? 100 : 100 - (WebAPIService::api_fails() * 100) / (WebAPIService::api_count() + WebAPIService::api_fails());
response->setLength();
request->send(response);