|
1 | 1 | <script setup lang="ts"> |
2 | | -import EndpointListColumnHeader from "./EndpointListColumnHeader.vue"; |
| 2 | +import ColumnHeader from "../ColumnHeader.vue"; |
3 | 3 | import EndpointListRow, { columnName } from "./EndpointListRow.vue"; |
4 | 4 | import { useMonitoringStore } from "@/stores/MonitoringStore"; |
5 | 5 | import { storeToRefs } from "pinia"; |
6 | 6 |
|
7 | 7 | const monitoringStore = useMonitoringStore(); |
8 | 8 | const { sortBy: activeColumn } = storeToRefs(monitoringStore); |
9 | | -
|
10 | | -type EndpointListColumn = { |
11 | | - name: columnName; |
12 | | - displayName: string; |
13 | | - displayUnit?: string; |
14 | | - sort: string; |
15 | | - toolTip?: string; |
16 | | -}; |
17 | | -
|
18 | | -const columns: EndpointListColumn[] = [ |
19 | | - { |
20 | | - name: columnName.ENDPOINTNAME, |
21 | | - displayName: "Endpoint name", |
22 | | - sort: columnName.ENDPOINTNAME, |
23 | | - }, |
24 | | - { |
25 | | - name: columnName.QUEUELENGTH, |
26 | | - displayName: "Queue Length", |
27 | | - displayUnit: "(MSGS)", |
28 | | - sort: monitoringStore.endpointListIsGrouped ? "" : columnName.QUEUELENGTH, |
29 | | - toolTip: "Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.", |
30 | | - }, |
31 | | - { |
32 | | - name: columnName.THROUGHPUT, |
33 | | - displayName: "Throughput", |
34 | | - displayUnit: "(msgs/s)", |
35 | | - sort: monitoringStore.endpointListIsGrouped ? "" : columnName.THROUGHPUT, |
36 | | - toolTip: "Throughput: The number of messages per second successfully processed by a receiving endpoint.", |
37 | | - }, |
38 | | - { |
39 | | - name: columnName.SCHEDULEDRETRIES, |
40 | | - displayName: "Scheduled retries", |
41 | | - displayUnit: "(msgs/s)", |
42 | | - sort: monitoringStore.endpointListIsGrouped ? "" : columnName.SCHEDULEDRETRIES, |
43 | | - toolTip: "Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).", |
44 | | - }, |
45 | | - { |
46 | | - name: columnName.PROCESSINGTIME, |
47 | | - displayName: "Processing Time", |
48 | | - displayUnit: "(t)", |
49 | | - sort: monitoringStore.endpointListIsGrouped ? "" : columnName.PROCESSINGTIME, |
50 | | - toolTip: "Processing time: The time taken for a receiving endpoint to successfully process a message.", |
51 | | - }, |
52 | | - { |
53 | | - name: columnName.CRITICALTIME, |
54 | | - displayName: "Critical Time", |
55 | | - displayUnit: "(t)", |
56 | | - sort: monitoringStore.endpointListIsGrouped ? "" : columnName.CRITICALTIME, |
57 | | - toolTip: "Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.", |
58 | | - }, |
59 | | -]; |
60 | 9 | </script> |
61 | 10 |
|
62 | 11 | <template> |
63 | 12 | <section role="table" aria-label="endpoint-list"> |
64 | 13 | <!--Table headings--> |
65 | 14 | <div role="row" aria-label="column-headers" class="table-head-row"> |
66 | | - <EndpointListColumnHeader |
67 | | - v-for="(column, i) in columns" |
68 | | - :key="column.name" |
69 | | - :columnName="column.name" |
70 | | - :columnSort="column.sort" |
71 | | - :displayName="column.displayName" |
72 | | - :displayUnit="column.displayUnit" |
73 | | - :toolTip="column.toolTip" |
74 | | - :isFirstCol="i === 0" |
75 | | - v-model="activeColumn" |
76 | | - /> |
| 15 | + <ColumnHeader :name="columnName.ENDPOINTNAME" label="Endpoint name" column-class="table-first-col" v-model="activeColumn" sortable default-ascending /> |
| 16 | + <ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH"> |
| 17 | + <template #unit>(msgs)</template> |
| 18 | + <template #help>Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.</template> |
| 19 | + </ColumnHeader> |
| 20 | + <ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT"> |
| 21 | + <template #unit>(msgs/s)</template> |
| 22 | + <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template> |
| 23 | + </ColumnHeader> |
| 24 | + <ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES"> |
| 25 | + <template #unit>(msgs/s)</template> |
| 26 | + <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template> |
| 27 | + </ColumnHeader> |
| 28 | + <ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME"> |
| 29 | + <template #unit>(t)</template> |
| 30 | + <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template> |
| 31 | + </ColumnHeader> |
| 32 | + <ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME"> |
| 33 | + <template #unit>(t)</template> |
| 34 | + <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template> |
| 35 | + </ColumnHeader> |
77 | 36 | </div> |
78 | 37 | <div> |
79 | 38 | <div v-if="monitoringStore.endpointListIsGrouped" role="rowgroup" aria-label="grouped-endpoints"> |
|
0 commit comments