SEBSERV-838 - show only active clients in group boxes

Author: anhefti

client/src/models/seb-server/monitoring.ts

@@ -11,6 +11,7 @@ export type OverviewClientGroup = {
     id: number;
     name: string;
     clientAmount: number;
+    activeClients: number;
     spsGroupUUID?: string;
     type: string;
     typeValue: string;

client/src/pages/(app)/monitoring/[examId]/components/MonitoringOverviewGroups.vue

@@ -40,7 +40,7 @@
                                 size="small"
                                 class="border font-weight-semibold flex-shrink-0"
                             >
-                                {{ clientGroupItem.clientAmount
+                                {{ clientGroupItem.activeClients
                                 }}{{ $t("monitoringOverview.groups.clients") }}
                             </v-chip>
                         </div>
@@ -81,8 +81,7 @@
                                 size="small"
                                 prepend-icon="mdi-format-list-bulleted"
                                 @click="
-                                    goToMonitoring(
-                                        MonitoringHeaderEnum.SHOW_CLIENT_GROUPS,
+                                    goToMonitoringOfGroup(
                                         generalUtils.createStringCommaList([
                                             clientGroupItem.id,
                                         ]),
@@ -195,7 +194,10 @@ import { computed } from "vue";
 import type { ComputedRef } from "vue";
 import { OverviewClientGroup } from "@/models/seb-server/monitoring.ts";
 import { ConnectionStatusEnum } from "@/models/seb-server/connectionStatusEnum.ts";
-import { goToMonitoring } from "../composables/useMonitoringNavigation.ts";
+import {
+    goToMonitoring,
+    goToMonitoringOfGroup,
+} from "../composables/useMonitoringNavigation.ts";
 import { useRouter } from "vue-router";
 
 const props = defineProps<{

client/src/pages/(app)/monitoring/[examId]/composables/useMonitoringNavigation.ts

@@ -6,6 +6,7 @@ import type {
     LocationQueryRaw,
     LocationQueryValueRaw,
 } from "vue-router";
+import { ConnectionStatusEnum } from "@/models/seb-server/connectionStatusEnum";
 
 function addQueryParam(query: LocationQueryRaw) {
     void router.push({
@@ -29,6 +30,21 @@ export function goToMonitoring(
     });
 }
 
+export function goToMonitoringOfGroup(value: string | boolean, examId: string) {
+    const query: LocationQueryRaw = {
+        [MonitoringHeaderEnum.SHOW_CLIENT_GROUPS]:
+            value as LocationQueryValueRaw,
+        [MonitoringHeaderEnum.SHOW_STATES]:
+            `${ConnectionStatusEnum.ACTIVE},${ConnectionStatusEnum.READY}` as LocationQueryValueRaw,
+    };
+
+    void router.push({
+        name: "/(app)/monitoring/[examId]/client/",
+        params: { examId },
+        query,
+    });
+}
+
 export function goToMonitoringDetails(
     examId: string,
     connectionToken: string,