show # messages, use msgpack to compress json

This commit is contained in:
proddy
2021-06-16 20:31:35 +02:00
parent 19b37d9e0e
commit 7e7bd29c9a
9 changed files with 71 additions and 58 deletions

View File

@@ -24,7 +24,10 @@ class EMSESP extends Component<RouteComponentProps> {
onChange={(e, path) => this.handleTabChange(path)}
variant="fullWidth"
>
<Tab value={`/${PROJECT_PATH}/devices`} label="Devices & Sensors" />
<Tab
value={`/${PROJECT_PATH}/devices`}
label="Devices &amp; Sensors"
/>
<Tab value={`/${PROJECT_PATH}/status`} label="EMS Status" />
<Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" />
</Tabs>

View File

@@ -22,7 +22,7 @@ class EMSESPDevicesController extends Component<EMSESPDevicesControllerProps> {
render() {
return (
<SectionContent title="Devices & Sensors">
<SectionContent title="Devices &amp; Sensors">
<RestFormLoader
{...this.props}
render={(formProps) => <EMSESPDevicesForm {...formProps} />}

View File

@@ -108,12 +108,10 @@ const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
<Box id="log-window" className={classes.console}>
{events.map((e) => (
<div className={classes.entry}>
<span>{e.time}</span>
<span className={styleLevel(e.level)}>
{paddedLevelLabel(e.level)}{' '}
</span>
<span>{paddedNameLabel(e.name)} </span>
<span>{e.message}</span>
<span>{e.t}</span>
<span className={styleLevel(e.l)}>{paddedLevelLabel(e.l)} </span>
<span>{paddedNameLabel(e.n)} </span>
<span>{e.m}</span>
</div>
))}
</Box>

View File

@@ -22,6 +22,9 @@ import LogEventConsole from './LogEventConsole';
import { LogEvent, LogSettings } from './types';
import { Decoder } from '@msgpack/msgpack';
const decoder = new Decoder();
interface LogEventControllerState {
eventSource?: EventSource;
events: LogEvent[];
@@ -71,12 +74,13 @@ class LogEventController extends Component<
fetch(FETCH_LOG_ENDPOINT)
.then((response) => {
if (response.status === 200) {
return response.json();
return response.arrayBuffer();
} else {
throw Error('Unexpected status code: ' + response.status);
}
})
.then((json) => {
.then((arrayBuffer) => {
const json: any = decoder.decode(arrayBuffer);
this.setState({ events: json.events });
})
.catch((error) => {

View File

@@ -5,6 +5,8 @@ import {
SelectValidator
} from 'react-material-ui-form-validator';
import { Typography } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
import {
@@ -79,6 +81,9 @@ class LogEventForm extends Component<LogEventFormProps> {
<MenuItem value={7}>DEBUG</MenuItem>
<MenuItem value={8}>TRACE</MenuItem>
</SelectValidator>
<Typography color="primary" variant="body2">
<i>Only the last {data.max_messages} messages are shown</i>
</Typography>
</ValidatorForm>
);
}

View File

@@ -47,12 +47,13 @@ export enum LogLevel {
}
export interface LogEvent {
time: string;
level: LogLevel;
name: string;
message: string;
t: string;
l: LogLevel;
n: string;
m: string;
}
export interface LogSettings {
level: LogLevel;
max_messages: number;
}

View File

@@ -18,46 +18,47 @@ const ES_ENDPOINT_ROOT = '/es/'
const LOG_SETTINGS_ENDPOINT = REST_ENDPOINT_ROOT + 'logSettings'
const log_settings = {
level: 6,
max_messages: 25,
}
const FETCH_LOG_ENDPOINT = REST_ENDPOINT_ROOT + 'fetchLog'
const fetch_log = {
events: [
{
time: '000+00:00:00.001',
level: 3,
name: 'system',
message: 'this is message 3',
t: '000+00:00:00.001',
l: 3,
n: 'system',
m: 'this is message 3',
},
{
time: '000+00:00:00.002',
level: 4,
name: 'system',
message: 'this is message 4',
t: '000+00:00:00.002',
l: 4,
n: 'system',
m: 'this is message 4',
},
{
time: '000+00:00:00.002',
level: 5,
name: 'system',
message: 'this is message 5',
t: '000+00:00:00.002',
l: 5,
n: 'system',
m: 'this is message 5',
},
{
time: '000+00:00:00.002',
level: 6,
name: 'system',
message: 'this is message 6',
t: '000+00:00:00.002',
l: 6,
n: 'system',
m: 'this is message 6',
},
{
time: '000+00:00:00.002',
level: 7,
name: 'emsesp',
message: 'this is message 7',
t: '000+00:00:00.002',
l: 7,
n: 'emsesp',
m: 'this is message 7',
},
{
time: '000+00:00:00.002',
level: 8,
name: 'mqtt',
message: 'this is message 8',
t: '000+00:00:00.002',
l: 8,
n: 'mqtt',
m: 'this is message 8',
},
],
}
@@ -753,7 +754,9 @@ const emsesp_devicedata_3 = {
// LOG
app.get(FETCH_LOG_ENDPOINT, (req, res) => {
res.json(fetch_log)
const encoded = msgpack.encode(fetch_log)
res.write(encoded, 'binary')
res.end(null, 'binary')
})
app.get(LOG_SETTINGS_ENDPOINT, (req, res) => {
res.json(log_settings)

View File

@@ -33,6 +33,7 @@ WebLogService::WebLogService(AsyncWebServer * server, SecurityManager * security
// for bring back the whole log
server->on(FETCH_LOG_PATH, HTTP_GET, std::bind(&WebLogService::fetchLog, this, _1));
// get when page is loaded
server->on(LOG_SETTINGS_PATH, HTTP_GET, std::bind(&WebLogService::getLevel, this, _1));
// for setting a level
@@ -104,10 +105,10 @@ void WebLogService::loop() {
void WebLogService::transmit(const QueuedLogMessage & message) {
DynamicJsonDocument jsonDocument = DynamicJsonDocument(EMSESP_JSON_SIZE_SMALL);
JsonObject logEvent = jsonDocument.to<JsonObject>();
logEvent["time"] = uuid::log::format_timestamp_ms(message.content_->uptime_ms, 3);
logEvent["level"] = message.content_->level;
logEvent["name"] = message.content_->name;
logEvent["message"] = message.content_->text;
logEvent["t"] = uuid::log::format_timestamp_ms(message.content_->uptime_ms, 3);
logEvent["l"] = message.content_->level;
logEvent["n"] = message.content_->name;
logEvent["m"] = message.content_->text;
size_t len = measureJson(jsonDocument);
char * buffer = new char[len + 1];
@@ -120,7 +121,7 @@ void WebLogService::transmit(const QueuedLogMessage & message) {
// send the current log buffer to the API
void WebLogService::fetchLog(AsyncWebServerRequest * request) {
AsyncJsonResponse * response = new AsyncJsonResponse(false, EMSESP_JSON_SIZE_XLARGE_DYN);
MsgpackAsyncJsonResponse * response = new MsgpackAsyncJsonResponse(false, EMSESP_JSON_SIZE_XXLARGE_DYN); // 8kb buffer
JsonObject root = response->getRoot();
JsonArray log = root.createNestedArray("events");
@@ -128,10 +129,10 @@ void WebLogService::fetchLog(AsyncWebServerRequest * request) {
for (const auto & msg : log_messages_) {
JsonObject logEvent = log.createNestedObject();
auto message = std::move(msg);
logEvent["time"] = uuid::log::format_timestamp_ms(message.content_->uptime_ms, 3);
logEvent["level"] = message.content_->level;
logEvent["name"] = message.content_->name;
logEvent["message"] = message.content_->text;
logEvent["t"] = uuid::log::format_timestamp_ms(message.content_->uptime_ms, 3);
logEvent["l"] = message.content_->level;
logEvent["n"] = message.content_->name;
logEvent["m"] = message.content_->text;
}
log_message_id_tail_ = log_messages_.back().id_;
@@ -140,7 +141,7 @@ void WebLogService::fetchLog(AsyncWebServerRequest * request) {
request->send(response);
}
// sets the level
// sets the level after a POST
void WebLogService::setLevel(AsyncWebServerRequest * request, JsonVariant & json) {
if (not json.is<JsonObject>()) {
return;
@@ -157,14 +158,12 @@ void WebLogService::setLevel(AsyncWebServerRequest * request, JsonVariant & json
request->send(response);
}
// return the current log level
// return the current log level after a GET
void WebLogService::getLevel(AsyncWebServerRequest * request) {
AsyncJsonResponse * response = new AsyncJsonResponse(false, EMSESP_JSON_SIZE_SMALL);
JsonObject root = response->getRoot();
auto level = log_level();
root["level"] = level;
root["level"] = log_level();
root["max_messages"] = maximum_log_messages();
response->setLength();
request->send(response);
}

View File

@@ -34,7 +34,7 @@ namespace emsesp {
class WebLogService : public uuid::log::Handler {
public:
static constexpr size_t MAX_LOG_MESSAGES = 50;
static constexpr size_t MAX_LOG_MESSAGES = 30;
WebLogService(AsyncWebServer * server, SecurityManager * securityManager);
@@ -71,7 +71,7 @@ class WebLogService : public uuid::log::Handler {
uint64_t last_transmit_ = 0; // Last transmit time
size_t maximum_log_messages_ = MAX_LOG_MESSAGES; // Maximum number of log messages to buffer before they are output
unsigned long log_message_id_ = 0; // The next identifier to use for queued log messages
unsigned long log_message_id_tail_ = 0;
unsigned long log_message_id_tail_ = 0; // last event shown on the screen after fetch
std::list<QueuedLogMessage> log_messages_; // Queued log messages, in the order they were received
};