Improved monitoring ui

monitoring/monitoring_ui/.vscode/settings.json

+{
+    "git.ignoreLimitWarning": true
+}
\ No newline at end of file

monitoring/monitoring_ui/src/components/FilterSelector.vue

@@ -61,7 +61,7 @@
 
                 <div>
                     <label for="stream" class="inline-block w-20">Stream:</label>
-                    <select name="Stream" id="stream" class="w-32">
+                    <select name="Stream" id="stream" class="w-32" v-model="selectedStream">
                         <option v-for="stream in availableStreams" :key="stream">{{stream}}</option>
                     </select>
                     <button>X</button>
@@ -95,6 +95,7 @@ import { Options, Vue } from "vue-class-component";
 import { connection } from "../store/connectionStore";
 import { errorStore } from "../store/errorStore";
 import { selectionFilterStore } from "../store/selectionFilterStore";
+import { toplogyStore } from "../store/toplogyStore";
 
 @Options({
     watch: {
@@ -103,12 +104,25 @@ import { selectionFilterStore } from "../store/selectionFilterStore";
         },
         currentBeamtimeFilterText(): void {
             this.selectedBeamtime = selectionFilterStore.state.beamtime;
-        }
+        },
+        selectedSource(newValue: string | null): void {
+            //selectionFilterStore.setFilterBeamtime(newValue);
+        },
+        currentSourceFilterText(): void {
+            this.selectedSource = selectionFilterStore.state.source;
+        },
+        selectedStream(newValue: string | null): void {
+            //selectionFilterStore.setFilterBeamtime(newValue);
+        },
+        currentStreamFilterText(): void {
+            this.selectedStream = selectionFilterStore.state.stream;
+        },
     }
 })
 export default class FilterSelector extends Vue {
     private selectedBeamtime: string | null = null;
     private selectedSource: string | null = null;
+    private selectedStream: string | null = null;
     private showPopup: boolean = false;
 
     private get hasClearableFilter(): boolean {
@@ -116,15 +130,15 @@ export default class FilterSelector extends Vue {
     }
     
     public get availableBeamtimes(): string[] {
-        return connection.state.avaiableBeamtimes;
+        return connection.state.availableBeamtimes;
     }
 
     public get availableStreams(): string[] {
-        return []; // TODO
+        return toplogyStore.getAvailableStreams();
     }
 
     public get availableSources(): string[] {
-        return []; // TODO
+        return toplogyStore.getAvailableSources();
     }
 
     public mounted(): void {

monitoring/monitoring_ui/src/store/connectionStore.ts

@@ -51,7 +51,7 @@ interface ConnectionStoreState {
 
     // metadata
     clusterName: string;
-    avaiableBeamtimes: string[];
+    availableBeamtimes: string[];
 
     // metrics
     hitMissDataPoints: HitMissDataPoint[];
@@ -85,7 +85,7 @@ class ConnectionStore {
         isFetchingToplogyData: false,
 
         clusterName: '<NOT SET>',
-        avaiableBeamtimes: [],
+        availableBeamtimes: [],
 
         data: null,
 
@@ -125,7 +125,7 @@ class ConnectionStore {
 
     public setMetadata(initialData: MetadataResponse): void {
         this.internalState.clusterName = initialData.getClustername();
-        this.internalState.avaiableBeamtimes = initialData.getBeamtimeList();
+        this.internalState.availableBeamtimes = initialData.getBeamtimeList();
     }
 
     public setData(data: DataPointsResponse): void {

monitoring/monitoring_ui/src/store/toplogyStore.ts

@@ -85,6 +85,20 @@ class ToplogyStore {
         return  Math.abs(this.internalState.lastUpdateRange.fromUnixSec - timeStore.state.lastFixedTimeRange.fromUnixSec) > maxPipelineToplogyOldnessInSec ||
                 Math.abs(this.internalState.lastUpdateRange.toUnixSec - timeStore.state.lastFixedTimeRange.toUnixSec) > maxPipelineToplogyOldnessInSec
     }
+
+    public getAvailableSources(): string[] {
+        const set = new Set<string>();
+
+        for (const edge of this.state.pipeline.edges) {
+            set.add(edge.sourceName);
+        }
+
+        return [...set];
+    }
+
+    public getAvailableStreams(): string[] {
+        return [];
+    }
 }
 
 export const toplogyStore = new ToplogyStore();

monitoring/monitoring_ui/src/views/Dashboard.vue

@@ -132,7 +132,9 @@ export default class Dashboard extends Vue {
             edges = edges.filter(edge => edge.fromId === selectionFilterStore.state.fromPipelineStepId && edge.toId === selectionFilterStore.state.toPipelineStepId);
         }
 
-        return edges.flatMap(edge => edge.receivers);
+        const receiverIds = edges.flatMap(edge => edge.receivers);
+    
+        return [...new Set(receiverIds)]; // Make unique
     }
 
     private onReceiverSelected(receiverId: string): void {