From 44523f3cdb5bcc83eb3af009500f582468f2dddc Mon Sep 17 00:00:00 2001
From: Sergey Savelyev <sergeysav.nn@gmail.com>
Date: Sat, 25 Jan 2025 10:34:45 -0800
Subject: [PATCH] initial frontend pages

---
 frontend/src/App.vue                       |  5 +++
 frontend/src/composables/telemetry.ts      | 20 ++++++++++
 frontend/src/router/index.ts               | 10 +++++
 frontend/src/views/GraphView.vue           | 40 ++++++++++++++++++++
 frontend/src/views/HomeView.vue            | 43 ++++------------------
 frontend/src/views/TelemetryListView.vue   | 28 ++++++++++++++
 server/src/http/api/mod.rs                 | 13 ++++++-
 server/src/telemetry/management_service.rs |  8 ++++
 8 files changed, 130 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/views/GraphView.vue
 create mode 100644 frontend/src/views/TelemetryListView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f721f2c..bc4080c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -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>
diff --git a/frontend/src/composables/telemetry.ts b/frontend/src/composables/telemetry.ts
index c0626e5..6f5e723 100644
--- a/frontend/src/composables/telemetry.ts
+++ b/frontend/src/composables/telemetry.ts
@@ -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
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index e739c88..370cd88 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -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'),
+        },
     ],
 });
 
diff --git a/frontend/src/views/GraphView.vue b/frontend/src/views/GraphView.vue
new file mode 100644
index 0000000..d6d97cd
--- /dev/null
+++ b/frontend/src/views/GraphView.vue
@@ -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>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 87837ac..5b519e6 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -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">
diff --git a/frontend/src/views/TelemetryListView.vue b/frontend/src/views/TelemetryListView.vue
new file mode 100644
index 0000000..5c9b493
--- /dev/null
+++ b/frontend/src/views/TelemetryListView.vue
@@ -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>
diff --git a/server/src/http/api/mod.rs b/server/src/http/api/mod.rs
index 1fbad60..6aca119 100644
--- a/server/src/http/api/mod.rs
+++ b/server/src/http/api/mod.rs
@@ -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);
 }
diff --git a/server/src/telemetry/management_service.rs b/server/src/telemetry/management_service.rs
index 35bf063..652bdc2 100644
--- a/server/src/telemetry/management_service.rs
+++ b/server/src/telemetry/management_service.rs
@@ -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(),