From d1327053875b2d51c67c25d0120deabbd03c5bad Mon Sep 17 00:00:00 2001
From: Carsten Patzke <carsten.patzke@desy.de>
Date: Mon, 16 Aug 2021 16:04:20 +0200
Subject: [PATCH] Improved monitoring ui
---
.../monitoring_ui/.vscode/settings.json | 3 +++
.../src/components/FilterSelector.vue | 24 +++++++++++++++----
.../src/store/connectionStore.ts | 6 ++---
.../monitoring_ui/src/store/toplogyStore.ts | 14 +++++++++++
.../monitoring_ui/src/views/Dashboard.vue | 4 +++-
5 files changed, 42 insertions(+), 9 deletions(-)
create mode 100644 monitoring/monitoring_ui/.vscode/settings.json
diff --git a/monitoring/monitoring_ui/.vscode/settings.json b/monitoring/monitoring_ui/.vscode/settings.json
new file mode 100644
index 000000000..3b6641073
--- /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 ed0510b1c..759f741aa 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 93176e962..9c3913f94 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 f2a4308f4..1b0426237 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 6ed78fa3a..c3e070375 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 {
--
GitLab