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

initial frontend pages

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-25 10:34:45 -08:00
parent 62384a3430
commit 44523f3cdb
8 changed files with 130 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/App.vue
View File

@@ -1,5 +1,10 @@
<script setup lang="ts">
import { RouterView } from 'vue-router';
import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
import { provide } from 'vue';
const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket);
</script>
<template>

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

@@ -7,6 +7,26 @@ export interface TelemetryDefinition {
data_type: string;
}
export function useAllTelemetry() {
const data = ref<TelemetryDefinition[] | null>(null);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const error = ref<any | null>(null);
watchEffect(async () => {
try {
const res = await fetch(`/api/tlm/info`);
data.value = await res.json();
error.value = null;
} catch (e) {
data.value = null;
error.value = e;
}
});
return { data, error };
}
export function useTelemetry(name: MaybeRefOrGetter<string>) {
const data = ref<TelemetryDefinition | null>(null);
// eslint-disable-next-line @typescript-eslint/no-explicit-any

10
frontend/src/router/index.ts
View File

@@ -8,6 +8,16 @@ const router = createRouter({
name: 'home',
component: () => import('../views/HomeView.vue'),
},
{
path: '/graph',
name: 'graph',
component: () => import('../views/GraphView.vue'),
},
{
path: '/list',
name: 'list',
component: () => import('../views/TelemetryListView.vue'),
},
],
});

40
frontend/src/views/GraphView.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup lang="ts">
import Axis from '@/components/GraphAxis.vue';
import Line from '@/components/TelemetryLine.vue';
import { GraphSide } from '@/graph/graph';
import SvgGraph from '@/components/SvgGraph.vue';
</script>
<template>
<div style="width: 100vw; height: 50vh">
<SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor>
<Axis>
<Line data="simple_producer/time_offset"></Line>
<Line data="simple_producer/publish_offset"></Line>
<Line data="simple_producer/await_offset"></Line>
</Axis>
</SvgGraph>
</div>
<div style="width: 100vw; height: 50vh">
<SvgGraph
:initial_duration="60 * 1000 * 10"
:legend="GraphSide.Right"
right_axis
>
<Axis>
<Line data="simple_producer/sin"></Line>
<Line data="simple_producer/cos4"></Line>
<Line data="simple_producer/sin2"></Line>
<Line data="simple_producer/cos"></Line>
<Line data="simple_producer/sin3"></Line>
<Line data="simple_producer/cos2"></Line>
<Line data="simple_producer/sin4"></Line>
<Line data="simple_producer/cos3"></Line>
</Axis>
</SvgGraph>
</div>
</template>
<style lang="scss">
@use '@/assets/variables';
</style>

43
frontend/src/views/HomeView.vue
View File

@@ -1,43 +1,14 @@
<script setup lang="ts">
import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
import { provide } from 'vue';
import Axis from '@/components/GraphAxis.vue';
import Line from '@/components/TelemetryLine.vue';
import { GraphSide } from '@/graph/graph';
import SvgGraph from '@/components/SvgGraph.vue';
const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket);
</script>
<template>
<div style="width: 100vw; height: 50vh">
<SvgGraph :legend="GraphSide.Left" right_axis include_controls cursor>
<Axis>
<Line data="simple_producer/time_offset"></Line>
<Line data="simple_producer/publish_offset"></Line>
<Line data="simple_producer/await_offset"></Line>
</Axis>
</SvgGraph>
</div>
<div style="width: 100vw; height: 50vh">
<SvgGraph
:initial_duration="60 * 1000 * 10"
:legend="GraphSide.Right"
right_axis
>
<Axis>
<Line data="simple_producer/sin"></Line>
<Line data="simple_producer/cos4"></Line>
<Line data="simple_producer/sin2"></Line>
<Line data="simple_producer/cos"></Line>
<Line data="simple_producer/sin3"></Line>
<Line data="simple_producer/cos2"></Line>
<Line data="simple_producer/sin4"></Line>
<Line data="simple_producer/cos3"></Line>
</Axis>
</SvgGraph>
</div>
<RouterLink :to="{ name: 'graph' }">
Graph
</RouterLink>
<RouterLink :to="{ name: 'list' }">
Tlm List
</RouterLink>
</template>
<style lang="scss">

28
frontend/src/views/TelemetryListView.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
import { useAllTelemetry } from '@/composables/telemetry';
const { data: telemetry_data } = useAllTelemetry();
</script>
<template>
<div v-if="telemetry_data">
<div>
<div v-for="entry in telemetry_data" :key="entry.uuid">
<span>
{{ entry.name }}
</span>
<span>
{{ entry.data_type }}
</span>
</div>
</div>
</div>
<div v-else>
No Telemetry Data
</div>
</template>
<style lang="scss">
@use '@/assets/variables';
</style>

13
server/src/http/api/mod.rs
View File

@@ -21,6 +21,14 @@ async fn get_tlm_definition(
Ok(web::Json(data.definition.clone()))
}
#[get("/tlm/info")]
async fn get_all_tlm_definitions(
data: web::Data<Arc<TelemetryManagementService>>,
) -> Result<impl Responder, HttpServerResultError> {
trace!("get_all_tlm_definitions");
Ok(web::Json(data.get_all_definitions()))
}
#[derive(Deserialize)]
struct HistoryQuery {
from: String,
@@ -71,5 +79,8 @@ async fn get_tlm_history(
}
pub fn setup_api(cfg: &mut web::ServiceConfig) {
cfg.service(get_tlm_definition).service(get_tlm_history);
cfg
.service(get_all_tlm_definitions)
.service(get_tlm_definition)
.service(get_tlm_history);
}

8
server/src/telemetry/management_service.rs
View File

@@ -146,6 +146,14 @@ impl TelemetryManagementService {
.cloned()
}
pub fn get_all_definitions(&self) -> Vec<TelemetryDefinition> {
let tlm_data = self.tlm_data.pin();
tlm_data
.values()
.map(|x| x.data.definition.clone())
.collect()
}
pub fn pin(&self) -> TelemetryManagementServicePin {
TelemetryManagementServicePin {
tlm_data: self.tlm_data.pin(),