sergeysav/telemetry_visualization
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Transfer Panel Details Without an Extra Layer of JSON Encoding (#14)

Browse Source 
**Rationale:**

This made it harder to snoop on the traffic in the network monitor because it was encoded as a string.

**Changes:**

- Backend now accepts & provides the panel data as a JSON object rather than as a string
- Backend now supports compression
- Minor improvements to error handling
- Some panel structures were getting saved in the JSON when they weren't supposed to be (now this no longer happens)

Reviewed-on: #14
Co-authored-by: Sergey Savelyev <sergeysav.nn@gmail.com>
Co-committed-by: Sergey Savelyev <sergeysav.nn@gmail.com>
This commit was merged in pull request #14.
This commit is contained in:
Sergey Savelyev
2026-01-03 18:24:40 -08:00
committed by sergeysav
parent 167e9d0a01
commit 44862f65d2
15 changed files with 149 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/CommandInput.vue
View File

@@ -49,7 +49,6 @@ onMounted(() => {
model.value = 0.0;
}
} else if (is_boolean.value) {
debugger;
model.value = false;
}
}

15
frontend/src/components/CommandParameterListConfigurator.vue
View File

@@ -76,6 +76,21 @@ watch([command_info], ([cmd_info]) => {
value: default_value,
};
}
// Perform some cleanup to remove data that shouldn't be there
switch (model_param_value.type) {
case 'constant':
model_param_value = {
type: model_param_value.type,
value: model_param_value.value,
};
break;
case 'input':
model_param_value = {
type: model_param_value.type,
id: model_param_value.id,
};
break;
}
model_value[param.name] = model_param_value;
}
model.value = model_value;

7
frontend/src/components/CommandSender.vue
View File

@@ -4,7 +4,7 @@ import { ref } from 'vue';
import CommandParameter from '@/components/CommandParameter.vue';
import FlexDivider from '@/components/FlexDivider.vue';
import type { DynamicDataType } from '@/composables/dynamic.ts';
import { toJsonString } from '@/composables/json.ts';
import { parseJsonString, toJsonString } from '@/composables/json.ts';
const props = defineProps<{
command: CommandDefinition | null;
@@ -30,10 +30,11 @@ async function sendCommand() {
},
body: toJsonString(params),
});
const text_response = await response.text();
if (response.ok) {
result.value = await response.json();
result.value = parseJsonString(text_response);
} else {
result.value = await response.text();
result.value = text_response;
}
busy.value = false;
}

10
frontend/src/components/TelemetryLine.vue
View File

@@ -28,6 +28,7 @@ import {
isBooleanType,
isNumericType,
} from '@/composables/dynamic.ts';
import { parseJsonString } from '@/composables/json.ts';
const props = defineProps<{
data: string;
@@ -138,7 +139,14 @@ watch(
const res = await fetch(
`/api/tlm/history/${uuid}?from=${min_x.toISOString()}&to=${max_x.toISOString()}&resolution=${data_min_sep.value}`,
);
const response = (await res.json()) as TelemetryDataItem[];
const text_response = await res.text();
if (!res.ok) {
console.error(text_response);
return;
}
const response = parseJsonString(
text_response,
) as TelemetryDataItem[];
for (const data_item of response) {
const val_t = Date.parse(data_item.timestamp);
const raw_item_val = data_item.value[

16
frontend/src/composables/command.ts
View File

@@ -1,6 +1,7 @@
import { ref, toValue, watchEffect } from 'vue';
import { type MaybeRefOrGetter } from 'vue';
import type { AnyTypeId } from '@/composables/dynamic.ts';
import { parseJsonString } from '@/composables/json.ts';
export interface CommandParameterDefinition {
name: string;
@@ -20,8 +21,14 @@ export function useAllCommands() {
watchEffect(async () => {
try {
const res = await fetch(`/api/cmd`);
data.value = await res.json();
error.value = null;
const text_response = await res.text();
if (res.ok) {
data.value = parseJsonString(text_response);
error.value = null;
} else {
data.value = null;
error.value = text_response;
}
} catch (e) {
data.value = null;
error.value = e;
@@ -41,12 +48,13 @@ export function useCommand(name: MaybeRefOrGetter<string>) {
try {
const res = await fetch(`/api/cmd/${name_value}`);
const text_response = await res.text();
if (res.ok) {
data.value = await res.json();
data.value = parseJsonString(text_response);
error.value = null;
} else {
data.value = null;
error.value = await res.text();
error.value = text_response;
}
} catch (e) {
data.value = null;

20
frontend/src/composables/json.ts
View File

@@ -1,12 +1,16 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function toJsonString(data: any): string {
return JSON.stringify(data, (_key, value) => {
if (typeof value == 'bigint') {
// @ts-expect-error TS2339
return JSON.rawJSON(value.toString());
}
return value;
});
export function toJsonString(data: any, pretty: boolean = false): string {
return JSON.stringify(
data,
(_key, value) => {
if (typeof value == 'bigint') {
// @ts-expect-error TS2339
return JSON.rawJSON(value.toString());
}
return value;
},
pretty ? 4 : undefined,
);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any

21
frontend/src/composables/telemetry.ts
View File

@@ -1,6 +1,7 @@
import { ref, toValue, watchEffect } from 'vue';
import { type MaybeRefOrGetter } from 'vue';
import type { AnyTypeId } from '@/composables/dynamic.ts';
import { parseJsonString } from '@/composables/json.ts';
export interface TelemetryDefinition {
uuid: string;
@@ -16,8 +17,14 @@ export function useAllTelemetry() {
watchEffect(async () => {
try {
const res = await fetch(`/api/tlm/info`);
data.value = await res.json();
error.value = null;
const text_response = await res.text();
if (res.ok) {
data.value = parseJsonString(text_response);
error.value = null;
} else {
data.value = null;
error.value = text_response;
}
} catch (e) {
data.value = null;
error.value = e;
@@ -37,8 +44,14 @@ export function useTelemetry(name: MaybeRefOrGetter<string>) {
try {
const res = await fetch(`/api/tlm/info/${name_value}`);
data.value = await res.json();
error.value = null;
const text_response = await res.text();
if (res.ok) {
data.value = parseJsonString(text_response);
error.value = null;
} else {
data.value = null;
error.value = text_response;
}
} catch (e) {
data.value = null;
error.value = e;

7
frontend/src/panels/panel.ts
View File

@@ -1,5 +1,6 @@
import type { RouteLocationRaw } from 'vue-router';
import { ref, type Ref, watchEffect } from 'vue';
import { parseJsonString } from '@/composables/json.ts';
export enum PanelHeirarchyType {
LEAF = 'leaf',
@@ -61,7 +62,11 @@ export function usePanelHeirarchy(): Ref<PanelHeirarchyChildren> {
watchEffect(async () => {
try {
const res = await fetch(`/api/panel`);
const data = await res.json();
if (!res.ok) {
console.error('Failed to fetch panels');
return;
}
const data = parseJsonString(await res.text());
const server_panels: PanelHeirarchyFolder = {
name: 'Server Panels',

72
frontend/src/views/PanelEditorView.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import DynamicComponent from '@/components/DynamicComponent.vue';
import type { OptionalDynamicComponentData } from '@/composables/dynamic.ts';
import { ref, watchEffect } from 'vue';
import { ref, useTemplateRef, watchEffect } from 'vue';
import { parseJsonString, toJsonString } from '@/composables/json.ts';
const data = ref<OptionalDynamicComponentData>({ type: 'none' });
@@ -20,7 +20,11 @@ const unselect = () => {
async function reload_panel_list() {
const res = await fetch(`/api/panel`);
panel_list.value = await res.json();
if (!res.ok) {
console.error('Failed to reload panel list');
return;
}
panel_list.value = parseJsonString(await res.text());
}
watchEffect(reload_panel_list);
@@ -29,10 +33,9 @@ async function load(id: string) {
load_screen.value = false;
loading.value = true;
const panel_data = await fetch(`/api/panel/${id}`);
const panel_json_value = await panel_data.json();
data.value = parseJsonString(
panel_json_value['data'],
) as OptionalDynamicComponentData;
const panel_text_value = await panel_data.text();
const panel_json_value = parseJsonString(panel_text_value);
data.value = panel_json_value['data'] as OptionalDynamicComponentData;
panel_name.value = panel_json_value['name'];
panel_id.value = id;
loading.value = false;
@@ -53,26 +56,31 @@ async function save() {
method: 'PUT',
body: toJsonString({
name: panel_name.value,
data: toJsonString(data.value),
data: data.value,
}),
headers: {
'Content-Type': 'application/json',
},
});
await res.json();
await res.text();
// TODO: Handle failures
} else {
const res = await fetch('/api/panel', {
method: 'POST',
body: toJsonString({
name: panel_name.value,
data: toJsonString(data.value),
data: data.value,
}),
headers: {
'Content-Type': 'application/json',
},
});
const uuid = await res.json();
panel_id.value = uuid as string;
const text_response = await res.text();
if (res.ok) {
const uuid = parseJsonString(text_response);
panel_id.value = uuid as string;
}
// TODO: Handle failures
}
loading.value = false;
}
@@ -81,6 +89,35 @@ async function showLoadScreen() {
load_screen.value = true;
await reload_panel_list();
}
function download() {
const file = new Blob([toJsonString(data.value, true)], {
type: 'application/json',
});
const a = document.createElement('a');
const url = URL.createObjectURL(file);
a.href = url;
a.download = panel_name.value.toLowerCase().replace(' ', '_') + '.json';
document.body.appendChild(a);
a.click();
setTimeout(function () {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
const upload_input = useTemplateRef<HTMLInputElement>('upload-input');
function upload() {
upload_input.value!.click();
}
async function onUpload() {
const input = upload_input.value!;
const file = input.files![0];
const file_data = await file.text();
data.value = parseJsonString(file_data);
}
</script>
<template>
@@ -113,6 +150,15 @@ async function showLoadScreen() {
{{ panel_id ? 'Save' : 'New' }}
</button>
<button @click.prevent.stop="showLoadScreen">Load</button>
<button @click.prevent.stop="download">Download</button>
<input
ref="upload-input"
class="file"
type="file"
accept="application/json"
@change="onUpload"
/>
<button @click.prevent.stop="upload">Upload</button>
</div>
<div id="inspector" class="column"></div>
</div>
@@ -127,4 +173,8 @@ async function showLoadScreen() {
height: 100vh;
background: variables.$dark-background-color;
}
input.file {
display: none;
}
</style>

8
frontend/src/views/PanelView.vue
View File

@@ -22,10 +22,10 @@ provide('inputs', inputs);
watchEffect(async () => {
const panel_data = await fetch(`/api/panel/${id.value}`);
const panel_json_value = await panel_data.json();
panel.value = parseJsonString(
panel_json_value['data'],
) as OptionalDynamicComponentData;
const panel_text_value = await panel_data.text();
panel.value = parseJsonString(panel_text_value)[
'data'
] as OptionalDynamicComponentData;
});
</script>