componentise endpoint list headers

src/Frontend/src/assets/main.css

@@ -526,32 +526,3 @@ div.alert.alert-warning strong {
 .tooltip {
   font-size: 12px;
 }
-
-/* Endpoint graph table*/
-
-.table-head-row {
-  display: flex;
-  padding-bottom: 5px;
-  padding-top: 20px;
-  border-bottom: 1px solid #ced6d3;
-  border-top: 1px solid #eee;
-  font-size: 12px;
-  text-transform: uppercase;
-  color: #181919;
-}
-.table-first-col {
-  width: 20%;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-.table-col {
-  width: 16%;
-}
-@media only screen and (min-width: 1730px) {
-  .table-first-col {
-    width: 30%;
-  }
-  .table-col {
-    width: 14%;
-  }
-}

src/Frontend/src/components/monitoring/EndpointList.vue

@@ -1,48 +1,79 @@
 <script setup lang="ts">
-import SortableColumn from "../../components/SortableColumn.vue";
+import EndpointListColumnHeader from "./EndpointListColumnHeader.vue";
 import EndpointListRow, { columnName } from "./EndpointListRow.vue";
 import { useMonitoringStore } from "@/stores/MonitoringStore";
 import { storeToRefs } from "pinia";
 
 const monitoringStore = useMonitoringStore();
 const { sortBy: activeColumn } = storeToRefs(monitoringStore);
+
+type EndpointListColumn = {
+  name: columnName;
+  displayName: string;
+  displayUnit?: string;
+  sort: string;
+  toolTip?: string;
+};
+
+const columns: EndpointListColumn[] = [
+  {
+    name: columnName.ENDPOINTNAME,
+    displayName: "Endpoint name",
+    sort: columnName.ENDPOINTNAME,
+  },
+  {
+    name: columnName.QUEUELENGTH,
+    displayName: "Queue Length",
+    displayUnit: "(MSGS)",
+    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.QUEUELENGTH,
+    toolTip: "Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.",
+  },
+  {
+    name: columnName.THROUGHPUT,
+    displayName: "Throughput",
+    displayUnit: "(msgs/s)",
+    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.THROUGHPUT,
+    toolTip: "Throughput: The number of messages per second successfully processed by a receiving endpoint.",
+  },
+  {
+    name: columnName.SCHEDULEDRETRIES,
+    displayName: "Scheduled retries",
+    displayUnit: "(msgs/s)",
+    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.SCHEDULEDRETRIES,
+    toolTip: "Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).",
+  },
+  {
+    name: columnName.PROCESSINGTIME,
+    displayName: "Processing Time",
+    displayUnit: "(t)",
+    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.PROCESSINGTIME,
+    toolTip: "Processing time: The time taken for a receiving endpoint to successfully process a message.",
+  },
+  {
+    name: columnName.CRITICALTIME,
+    displayName: "Critical Time",
+    displayUnit: "(t)",
+    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.CRITICALTIME,
+    toolTip: "Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.",
+  },
+];
 </script>
 
 <template>
   <section role="table" aria-label="endpoint-list">
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="table-head-row">
-      <div role="columnheader" :aria-label="columnName.ENDPOINTNAME" class="table-first-col">
-        <SortableColumn :sort-by="columnName.ENDPOINTNAME" v-model="activeColumn" :default-ascending="true">Endpoint name</SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="columnName.QUEUELENGTH" class="table-col">
-        <SortableColumn :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH" v-model="activeColumn" v-tippy="'Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.'"
-          >Queue Length<template #unit>(MSGS)</template>
-        </SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="columnName.THROUGHPUT" class="table-col">
-        <SortableColumn :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT" v-model="activeColumn" v-tippy="'Throughput: The number of messages per second successfully processed by a receiving endpoint.'"
-          >Throughput<template #unit>(msgs/s)</template>
-        </SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="columnName.SCHEDULEDRETRIES" class="table-col">
-        <SortableColumn :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES" v-model="activeColumn" v-tippy="'Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).'"
-          >Scheduled retries <template #unit>(msgs/s)</template>
-        </SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="columnName.PROCESSINGTIME" class="table-col">
-        <SortableColumn :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME" v-model="activeColumn" v-tippy="'Processing time: The time taken for a receiving endpoint to successfully process a message.'"
-          >Processing Time <template #unit>(t)</template>
-        </SortableColumn>
-      </div>
-      <div role="columnheader" :aria-label="columnName.CRITICALTIME" class="table-col">
-        <SortableColumn
-          :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME"
-          v-model="activeColumn"
-          v-tippy="'Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.'"
-          >Critical Time <template #unit>(t)</template>
-        </SortableColumn>
-      </div>
+      <EndpointListColumnHeader
+        v-for="(column, i) in columns"
+        :key="column.name"
+        :columnName="column.name"
+        :columnSort="column.sort"
+        :displayName="column.displayName"
+        :displayUnit="column.displayUnit"
+        :toolTip="column.toolTip"
+        :isFirstCol="i === 0"
+        v-model="activeColumn"
+      />
     </div>
     <div>
       <div v-if="monitoringStore.endpointListIsGrouped" role="rowgroup" aria-label="grouped-endpoints">
@@ -68,6 +99,7 @@ const { sortBy: activeColumn } = storeToRefs(monitoringStore);
 
 <style scoped>
 @import "./endpoint.css";
+@import "./endpointTables.css";
 
 .endpoint-group-title {
   font-size: 14px;

src/Frontend/src/components/monitoring/EndpointListColumnHeader.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import SortableColumn from "../SortableColumn.vue";
+import { SortInfo } from "../SortInfo";
+
+const props = withDefaults(
+  defineProps<{
+    columnName: string;
+    columnSort: string;
+    displayName: string;
+    displayUnit?: string;
+    toolTip?: string;
+    isFirstCol?: boolean;
+  }>(),
+  { isFirstCol: false }
+);
+
+const activeColumn = defineModel<SortInfo>({ required: true });
+const defaultAscending = props.isFirstCol ? true : undefined;
+</script>
+
+<template>
+  <div role="columnheader" :aria-label="columnName" :class="isFirstCol ? 'table-first-col' : 'table-col'">
+    <SortableColumn :sort-by="columnSort" v-model="activeColumn" :default-ascending="defaultAscending" v-tippy="toolTip">
+      {{ displayName }}<template v-if="displayUnit" #unit>&nbsp;{{ displayUnit }}</template>
+    </SortableColumn>
+  </div>
+</template>
+
+<style scoped>
+@import "endpointTables.css";
+</style>

src/Frontend/src/components/monitoring/EndpointListRow.vue

@@ -177,6 +177,7 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
 @import "../list.css";
 @import "./monitoring.css";
 @import "./endpoint.css";
+@import "./endpointTables.css";
 
 .hackToPreventSafariFromShowingTooltip::after {
   content: "";

src/Frontend/src/components/monitoring/endpointTables.css

@@ -0,0 +1,30 @@
+/* Endpoint graph table*/
+
+.table-head-row {
+  display: flex;
+  padding-bottom: 5px;
+  padding-top: 20px;
+  border-bottom: 1px solid #ced6d3;
+  border-top: 1px solid #eee;
+  font-size: 12px;
+  text-transform: uppercase;
+  color: #181919;
+}
+.table-first-col {
+  width: 20%;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.table-col {
+  width: 16%;
+}
+
+/*TODO: why should wider viewports give more proportional width to the first column?*/
+@media only screen and (min-width: 1730px) {
+  .table-first-col {
+    width: 30%;
+  }
+  .table-col {
+    width: 14%;
+  }
+}