Skip to content

Commit 0fe928e

Browse files
PhilBastianPhilBastian
authored
Merge pull request #2461 from Particular/pi_770_componentisation_endpointlists
componentise endpoint list headers
2 parents a458b47 + 2ea4dec commit 0fe928e

File tree

5 files changed

+126
-61
lines changed

5 files changed

+126
-61
lines changed

‎src/Frontend/src/assets/main.css‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -526,32 +526,3 @@ div.alert.alert-warning strong {
526526
.tooltip {
527527
font-size: 12px;
528528
}
529-
530-
/* Endpoint graph table*/
531-
532-
.table-head-row {
533-
display: flex;
534-
padding-bottom: 5px;
535-
padding-top: 20px;
536-
border-bottom: 1px solid #ced6d3;
537-
border-top: 1px solid #eee;
538-
font-size: 12px;
539-
text-transform: uppercase;
540-
color: #181919;
541-
}
542-
.table-first-col {
543-
width: 20%;
544-
padding-left: 15px;
545-
padding-right: 15px;
546-
}
547-
.table-col {
548-
width: 16%;
549-
}
550-
@media only screen and (min-width: 1730px) {
551-
.table-first-col {
552-
width: 30%;
553-
}
554-
.table-col {
555-
width: 14%;
556-
}
557-
}

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

Lines changed: 64 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,79 @@
11
<script setup lang="ts">
2-
import SortableColumn from "../../components/SortableColumn.vue";
2+
import EndpointListColumnHeader from "./EndpointListColumnHeader.vue";
33
import EndpointListRow, { columnName } from "./EndpointListRow.vue";
44
import { useMonitoringStore } from "@/stores/MonitoringStore";
55
import { storeToRefs } from "pinia";
66
77
const monitoringStore = useMonitoringStore();
88
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+
];
960
</script>
1061

1162
<template>
1263
<section role="table" aria-label="endpoint-list">
1364
<!--Table headings-->
1465
<div role="row" aria-label="column-headers" class="table-head-row">
15-
<div role="columnheader" :aria-label="columnName.ENDPOINTNAME" class="table-first-col">
16-
<SortableColumn :sort-by="columnName.ENDPOINTNAME" v-model="activeColumn" :default-ascending="true">Endpoint name</SortableColumn>
17-
</div>
18-
<div role="columnheader" :aria-label="columnName.QUEUELENGTH" class="table-col">
19-
<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.'"
20-
>Queue Length<template #unit>(MSGS)</template>
21-
</SortableColumn>
22-
</div>
23-
<div role="columnheader" :aria-label="columnName.THROUGHPUT" class="table-col">
24-
<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.'"
25-
>Throughput<template #unit>(msgs/s)</template>
26-
</SortableColumn>
27-
</div>
28-
<div role="columnheader" :aria-label="columnName.SCHEDULEDRETRIES" class="table-col">
29-
<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).'"
30-
>Scheduled retries <template #unit>(msgs/s)</template>
31-
</SortableColumn>
32-
</div>
33-
<div role="columnheader" :aria-label="columnName.PROCESSINGTIME" class="table-col">
34-
<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.'"
35-
>Processing Time <template #unit>(t)</template>
36-
</SortableColumn>
37-
</div>
38-
<div role="columnheader" :aria-label="columnName.CRITICALTIME" class="table-col">
39-
<SortableColumn
40-
:sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME"
41-
v-model="activeColumn"
42-
v-tippy="'Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.'"
43-
>Critical Time <template #unit>(t)</template>
44-
</SortableColumn>
45-
</div>
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+
/>
4677
</div>
4778
<div>
4879
<div v-if="monitoringStore.endpointListIsGrouped" role="rowgroup" aria-label="grouped-endpoints">
@@ -68,6 +99,7 @@ const { sortBy: activeColumn } = storeToRefs(monitoringStore);
6899

69100
<style scoped>
70101
@import "./endpoint.css";
102+
@import "./endpointTables.css";
71103
72104
.endpoint-group-title {
73105
font-size: 14px;

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import SortableColumn from "../SortableColumn.vue";
3+
import { SortInfo } from "../SortInfo";
4+
5+
const props = withDefaults(
6+
defineProps<{
7+
columnName: string;
8+
columnSort: string;
9+
displayName: string;
10+
displayUnit?: string;
11+
toolTip?: string;
12+
isFirstCol?: boolean;
13+
}>(),
14+
{ isFirstCol: false }
15+
);
16+
17+
const activeColumn = defineModel<SortInfo>({ required: true });
18+
const defaultAscending = props.isFirstCol ? true : undefined;
19+
</script>
20+
21+
<template>
22+
<div role="columnheader" :aria-label="columnName" :class="isFirstCol ? 'table-first-col' : 'table-col'">
23+
<SortableColumn :sort-by="columnSort" v-model="activeColumn" :default-ascending="defaultAscending" v-tippy="toolTip">
24+
{{ displayName }}<template v-if="displayUnit" #unit>&nbsp;{{ displayUnit }}</template>
25+
</SortableColumn>
26+
</div>
27+
</template>
28+
29+
<style scoped>
30+
@import "endpointTables.css";
31+
</style>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@ const criticalTimeGraphDuration = computed(() => formatGraphDuration(endpoint.va
177177
@import "../list.css";
178178
@import "./monitoring.css";
179179
@import "./endpoint.css";
180+
@import "./endpointTables.css";
180181
181182
.hackToPreventSafariFromShowingTooltip::after {
182183
content: "";

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* Endpoint graph table*/
2+
3+
.table-head-row {
4+
display: flex;
5+
padding-bottom: 5px;
6+
padding-top: 20px;
7+
border-bottom: 1px solid #ced6d3;
8+
border-top: 1px solid #eee;
9+
font-size: 12px;
10+
text-transform: uppercase;
11+
color: #181919;
12+
}
13+
.table-first-col {
14+
width: 20%;
15+
padding-left: 15px;
16+
padding-right: 15px;
17+
}
18+
.table-col {
19+
width: 16%;
20+
}
21+
22+
/*TODO: why should wider viewports give more proportional width to the first column?*/
23+
@media only screen and (min-width: 1730px) {
24+
.table-first-col {
25+
width: 30%;
26+
}
27+
.table-col {
28+
width: 14%;
29+
}
30+
}

0 commit comments

Comments
 (0)