Better handling of endpoints deployed into elastic scale environments (#2019)

always display logical endpoints and show how many instances total. UI overhaul and introduction of track/do not track endpoint concept

---------

Co-authored-by: Phil Bastian <[email protected]>

Author: johnsimons

src/Frontend/src/components/FilterInput.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const model = defineModel<string>({ required: true });
+</script>
+
+<template>
+  <div role="search" aria-label="filter" class="filter-input">
+    <input type="search" placeholder="Filter by name..." aria-label="filter by name" class="form-control-static filter-input" v-model="model" />
+  </div>
+</template>
+
+<style scoped>
+.filter-input input {
+  display: inline-block;
+  width: 100%;
+  padding-right: 10px;
+  padding-left: 30px;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  height: 100%;
+}
+
+div.filter-input {
+  position: relative;
+  width: 280px;
+  height: 36px;
+}
+
+.filter-input:before {
+  font-family: "FontAwesome";
+  width: 1.43em;
+  content: "\f0b0";
+  color: #919e9e;
+  position: absolute;
+  top: calc(50% - 0.7em);
+  left: 0.75em;
+}
+</style>

src/Frontend/src/components/OrderBy.vue

@@ -1,21 +1,8 @@
-<script lang="ts">
-export function getSortFunction<T>(selector: SortOptions<T>["selector"], dir: SortDirection) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  if (!selector) return (firstElement: T, secondElement: T) => 0;
-  return (firstElement: T, secondElement: T) => {
-    if (dir === SortDirection.Ascending) {
-      return selector(firstElement) < selector(secondElement) ? -1 : 1;
-    } else {
-      return selector(firstElement) < selector(secondElement) ? 1 : -1;
-    }
-  };
-}
-</script>
-
 <script setup generic="T" lang="ts">
 import { onMounted, ref } from "vue";
 import { useCookies } from "vue3-cookies";
 import SortOptions, { SortDirection } from "@/resources/SortOptions";
+import getSortFunction from "@/components/getSortFunction";
 
 const emit = defineEmits<{
   sortUpdated: [option: SortOptions<T>];

src/Frontend/src/components/ResultsCount.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  displayed: number;
+  total: number;
+}>();
+</script>
+
+<template>
+  <div class="col format-showing-results">
+    <div>Showing {{ displayed }} of {{ total }} result(s)</div>
+  </div>
+</template>
+
+<style scoped>
+.format-showing-results {
+  display: flex;
+  align-items: flex-end;
+  color: gray;
+}
+</style>

src/Frontend/src/components/failedmessages/FailedMessageGroups.vue

@@ -8,9 +8,10 @@ import LicenseExpired from "../../components/LicenseExpired.vue";
 import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
 import LastTenOperations from "../failedmessages/LastTenOperations.vue";
 import MessageGroupList, { IMessageGroupList } from "../failedmessages/MessageGroupList.vue";
-import OrderBy, { getSortFunction } from "@/components/OrderBy.vue";
+import OrderBy from "@/components/OrderBy.vue";
 import SortOptions, { SortDirection } from "@/resources/SortOptions";
 import GroupOperation from "@/resources/GroupOperation";
+import getSortFunction from "@/components/getSortFunction";
 
 const selectedClassifier = ref<string>("");
 const classifiers = ref<string[]>([]);

src/Frontend/src/components/getSortFunction.ts

@@ -0,0 +1,20 @@
+import type { GroupPropertyType } from "@/resources/SortOptions";
+import { SortDirection } from "@/resources/SortOptions";
+
+export default function getSortFunction<T>(selector: ((group: T) => GroupPropertyType) | undefined, dir: SortDirection) {
+  if (!selector) {
+    return () => 0;
+  }
+  const sortFunc = (firstElement: T, secondElement: T) => {
+    const x = selector(firstElement);
+    const y = selector(secondElement);
+    if (x > y) {
+      return 1;
+    } else if (x < y) {
+      return -1;
+    }
+    return 0;
+  };
+
+  return dir === SortDirection.Ascending ? sortFunc : (firstElement: T, secondElement: T) => -sortFunc(firstElement, secondElement);
+}