From 9cd7bb3f1fbc24bf3057f4210432967e2fff82ae Mon Sep 17 00:00:00 2001
From: Phil Bastian <155411597+PhilBastian@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:59:46 +0800
Subject: [PATCH] Elastic scale patch (#2056)

* fix results count in healthy endpoints and change look of results count

* enable non-tracked endpoint to be deleted

* Display only a single toaster

* No need to await

---------

Co-authored-by: John Simons <john.simons@particular.net>
---
 src/Frontend/src/components/NoData.vue        |  4 +-
 src/Frontend/src/components/ResultsCount.vue  |  2 +-
 .../heartbeats/EndpointInstances.vue          | 49 ++++++++++++++-----
 .../heartbeats/HealthyEndpoints.vue           |  1 +
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/Frontend/src/components/NoData.vue b/src/Frontend/src/components/NoData.vue
index 9f77cfc99..b8929b154 100644
--- a/src/Frontend/src/components/NoData.vue
+++ b/src/Frontend/src/components/NoData.vue
@@ -12,7 +12,9 @@ const props = defineProps<{
           <div class="row box-header">
             <div class="col-sm-12">
               <p class="lead hard-wrap">{{ props.message }}</p>
-              <p>&nbsp;</p>
+              <slot>
+                <p>&nbsp;</p>
+              </slot>
             </div>
           </div>
         </div>
diff --git a/src/Frontend/src/components/ResultsCount.vue b/src/Frontend/src/components/ResultsCount.vue
index 0e87b1efd..2340aa8c7 100644
--- a/src/Frontend/src/components/ResultsCount.vue
+++ b/src/Frontend/src/components/ResultsCount.vue
@@ -15,6 +15,6 @@ defineProps<{
 .format-showing-results {
   display: flex;
   align-items: flex-end;
-  color: gray;
+  font-style: italic;
 }
 </style>
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 2a6577bfc..323997db7 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -26,12 +26,13 @@ enum Operation {
 }
 
 const route = useRoute();
+const router = useRouter();
 const endpointName = route.params.endpointName.toString();
 const store = useHeartbeatInstancesStore();
 const { filteredInstances, sortedInstances, instanceFilterString, sortByInstances } = storeToRefs(store);
 const endpointSettings = ref<EndpointSettings[]>([endpointSettingsClient.defaultEndpointSettingsValue()]);
 const backLink = ref<string>(routeLinks.heartbeats.root);
-const filterInstances = (data: EndpointsView[]) =>
+const filterToValidInstances = (data: EndpointsView[]) =>
   data
     .filter((instance) => instance.name === endpointName)
     .filter((instance) => {
@@ -42,8 +43,8 @@ const filterInstances = (data: EndpointsView[]) =>
 
       return true;
     });
-const instances = computed(() => filterInstances(filteredInstances.value));
-const totalInstances = computed(() => filterInstances(sortedInstances.value));
+const filteredValidInstances = computed(() => filterToValidInstances(filteredInstances.value));
+const totalValidInstances = computed(() => filterToValidInstances(sortedInstances.value));
 const showBulkWarningDialog = ref(false);
 const dialogWarningOperation = ref(Operation.Mute);
 
@@ -68,7 +69,9 @@ async function proceedWarningDialog() {
   showBulkWarningDialog.value = false;
 
   try {
-    await store.toggleEndpointMonitor(instances.value.filter((instance) => (dialogWarningOperation.value === Operation.Unmute && !instance.monitor_heartbeat) || (dialogWarningOperation.value === Operation.Mute && instance.monitor_heartbeat)));
+    await store.toggleEndpointMonitor(
+      filteredValidInstances.value.filter((instance) => (dialogWarningOperation.value === Operation.Unmute && !instance.monitor_heartbeat) || (dialogWarningOperation.value === Operation.Mute && instance.monitor_heartbeat))
+    );
     useShowToast(TYPE.SUCCESS, `All endpoint instances ${dialogWarningOperation.value}`, "", false, { timeout: 1000 });
   } catch {
     useShowToast(TYPE.ERROR, "Save failed", "", false, { timeout: 3000 });
@@ -84,6 +87,16 @@ async function deleteInstance(instance: EndpointsView) {
   }
 }
 
+async function deleteAllInstances() {
+  try {
+    await Promise.all(sortedInstances.value.filter((instance) => instance.name === endpointName).map((instance) => store.deleteEndpointInstance(instance)));
+    useShowToast(TYPE.SUCCESS, "Endpoint deleted", "", false, { timeout: 1000 });
+    await router.replace(backLink.value);
+  } catch {
+    useShowToast(TYPE.ERROR, "Delete failed", "", false, { timeout: 3000 });
+  }
+}
+
 async function toggleAlerts(instance: EndpointsView) {
   try {
     await store.toggleEndpointMonitor([instance]);
@@ -99,7 +112,7 @@ async function toggleAlerts(instance: EndpointsView) {
     <ConfirmDialog
       v-if="showBulkWarningDialog"
       heading="Proceed with bulk operation"
-      :body="`Are you sure you want to ${dialogWarningOperation} ${instances.length} endpoint instance(s)?`"
+      :body="`Are you sure you want to ${dialogWarningOperation} ${filteredValidInstances.length} endpoint instance(s)?`"
       @cancel="cancelWarningDialog"
       @confirm="proceedWarningDialog"
     />
@@ -119,19 +132,19 @@ async function toggleAlerts(instance: EndpointsView) {
     <div class="row filters">
       <div class="col-sm-12">
         <span class="buttonsContainer">
-          <button type="button" class="btn btn-warning btn-sm" :disabled="instances.length === 0" @click="showBulkOperationWarningDialog(Operation.Mute)">
+          <button type="button" class="btn btn-warning btn-sm" :disabled="filteredValidInstances.length === 0" @click="showBulkOperationWarningDialog(Operation.Mute)">
             <i
               :class="{
-                'text-black': instances.length > 0,
+                'text-black': filteredValidInstances.length > 0,
               }"
               class="fa fa-bell-slash"
             />
             Mute Alerts on All
           </button>
-          <button type="button" class="btn btn-default btn-sm" :disabled="instances.length === 0" @click="showBulkOperationWarningDialog(Operation.Unmute)">
+          <button type="button" class="btn btn-default btn-sm" :disabled="filteredValidInstances.length === 0" @click="showBulkOperationWarningDialog(Operation.Unmute)">
             <i
               :class="{
-                'text-black': instances.length > 0,
+                'text-black': filteredValidInstances.length > 0,
               }"
               class="fa fa-bell"
             />
@@ -141,7 +154,7 @@ async function toggleAlerts(instance: EndpointsView) {
       </div>
     </div>
     <div class="row">
-      <ResultsCount :displayed="instances.length" :total="totalInstances.length" />
+      <ResultsCount :displayed="filteredValidInstances.length" :total="totalValidInstances.length" />
     </div>
     <section role="table" aria-label="endpoint-instances">
       <!--Table headings-->
@@ -180,9 +193,15 @@ async function toggleAlerts(instance: EndpointsView) {
           </div>
         </div>
       </div>
-      <no-data v-if="instances.length === 0" message="No endpoint instances found. For untracked endpoints, disconnected instances are automatically pruned."></no-data>
+      <no-data v-if="filteredValidInstances.length === 0" message="No endpoint instances found. For untracked endpoints, disconnected instances are automatically pruned.">
+        <div v-if="totalValidInstances.length === 0" class="delete-all">
+          <span>You may</span>
+          <button type="button" @click="deleteAllInstances()" class="btn btn-danger btn-sm"><i class="fa fa-trash text-white" /> Delete</button>
+          <span>this endpoint</span>
+        </div>
+      </no-data>
       <!--Table rows-->
-      <DataView :data="instances" :show-items-per-page="true" :items-per-page="20">
+      <DataView :data="filteredValidInstances" :show-items-per-page="true" :items-per-page="20">
         <template #data="{ pageData }">
           <div role="rowgroup" aria-label="endpoints">
             <div role="row" :aria-label="instance.name" class="row grid-row" v-for="instance in pageData" :key="instance.id">
@@ -247,4 +266,10 @@ async function toggleAlerts(instance: EndpointsView) {
   border-radius: 3px;
   padding: 0.4em;
 }
+
+.delete-all {
+  display: flex;
+  align-items: center;
+  gap: 0.4em;
+}
 </style>
diff --git a/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue b/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
index 956a6bb84..943cc1819 100644
--- a/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
+++ b/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
@@ -3,6 +3,7 @@ import NoData from "../NoData.vue";
 import { ColumnNames, useHeartbeatsStore } from "@/stores/HeartbeatsStore";
 import { storeToRefs } from "pinia";
 import HeartbeatsList from "./HeartbeatsList.vue";
+import ResultsCount from "../ResultsCount.vue";
 
 const store = useHeartbeatsStore();
 const { healthyEndpoints, filteredHealthyEndpoints } = storeToRefs(store);