diff --git a/monitoring/monitoring_ui/.vscode/settings.json b/monitoring/monitoring_ui/.vscode/settings.json new file mode 100644 index 0000000000000000000000000000000000000000..3b664107303df336bab8010caad42ddaed24550e --- /dev/null +++ b/monitoring/monitoring_ui/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "git.ignoreLimitWarning": true +} \ No newline at end of file diff --git a/monitoring/monitoring_ui/src/components/FilterSelector.vue b/monitoring/monitoring_ui/src/components/FilterSelector.vue index ed0510b1c42b7fbadf1d42398dec13c4eba623b8..759f741aaf49621e340001395dc3f5e6405c75cc 100644 --- a/monitoring/monitoring_ui/src/components/FilterSelector.vue +++ b/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 { diff --git a/monitoring/monitoring_ui/src/store/connectionStore.ts b/monitoring/monitoring_ui/src/store/connectionStore.ts index 93176e962d66cdaa39385952578271c0554f6a73..9c3913f94b75b725be2d138232f2dd0fcd6243a0 100644 --- a/monitoring/monitoring_ui/src/store/connectionStore.ts +++ b/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 { diff --git a/monitoring/monitoring_ui/src/store/toplogyStore.ts b/monitoring/monitoring_ui/src/store/toplogyStore.ts index f2a4308f4ad05ca8732a4d5aa505c75591749cd8..1b0426237f8c1ef01a32f4f36970a98b6b644a72 100644 --- a/monitoring/monitoring_ui/src/store/toplogyStore.ts +++ b/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(); diff --git a/monitoring/monitoring_ui/src/views/Dashboard.vue b/monitoring/monitoring_ui/src/views/Dashboard.vue index 6ed78fa3a121a4f72965821f99854f736c8b2b51..c3e0703751181d70371de821705d532f50fe6528 100644 --- a/monitoring/monitoring_ui/src/views/Dashboard.vue +++ b/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 {