Skip to content

Commit 8d4e21c

Browse files
jasontaylordevjasontaylordev
committed
Refactor column headers (WIP)
1 parent 4d06a14 commit 8d4e21c

File tree

2 files changed

+28
-66
lines changed

2 files changed

+28
-66
lines changed

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

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import NoData from "@/components/NoData.vue";
99
import SmallGraph from "./SmallGraph.vue";
1010
import type { ExtendedEndpointInstance } from "@/resources/MonitoringEndpoint";
1111
import routeLinks from "@/router/routeLinks";
12+
import ColumnHeader from "@/components/ColumnHeader.vue";
1213
1314
const isRemovingEndpointEnabled = ref<boolean>(false);
1415
const router = useRouter();
@@ -57,39 +58,19 @@ onMounted(async () => {
5758
<!-- Breakdown by instance-->
5859
<!--headers-->
5960
<div role="row" aria-label="instances-column-headers" class="row box box-no-click table-head-row">
60-
<div class="col-xs-4 col-xl-8">
61-
<div role="columnheader" aria-label="instance-name" class="row box-header">
62-
<div class="col-xs-12">Instance Name</div>
63-
</div>
64-
</div>
65-
<div class="col-xs-2 col-xl-1 no-side-padding">
66-
<div class="row box-header">
67-
<div role="columnheader" aria-label="throughput" class="col-xs-12 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
68-
Throughput <span class="table-header-unit">(msgs/s)</span>
69-
</div>
70-
</div>
71-
</div>
72-
<div class="col-xs-2 col-xl-1 no-side-padding">
73-
<div class="row box-header">
74-
<div role="columnheader" aria-label="scheduled-retires" class="col-xs-12 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
75-
Scheduled retries <span class="table-header-unit">(msgs/s)</span>
76-
</div>
77-
</div>
78-
</div>
79-
<div class="col-xs-2 col-xl-1 no-side-padding">
80-
<div class="row box-header">
81-
<div role="columnheader" aria-label="processing-time" class="col-xs-12 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
82-
Processing Time <span class="table-header-unit">(t)</span>
83-
</div>
84-
</div>
85-
</div>
86-
<div class="col-xs-2 col-xl-1 no-side-padding">
87-
<div class="row box-header">
88-
<div role="columnheader" aria-label="critical-time" class="col-xs-12 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
89-
Critical Time <span class="table-header-unit">(t)</span>
90-
</div>
91-
</div>
92-
</div>
61+
<ColumnHeader name="instance-name" label="Instance Name" column-class="col-xs-4 col-xl-8" />
62+
<ColumnHeader name="throughput" label="Throughput" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
63+
<template #unit>(msgs/s)</template>
64+
</ColumnHeader>
65+
<ColumnHeader name="retires" label="Scheduled retries" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
66+
<template #unit>(msgs/s)</template>
67+
</ColumnHeader>
68+
<ColumnHeader name="processing-time" label="Processing time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
69+
<template #unit>(t)</template>
70+
</ColumnHeader>
71+
<ColumnHeader name="critical-time" label="Critical time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
72+
<template #unit>(t)</template>
73+
</ColumnHeader>
9374
</div>
9475

9576
<NoData v-if="!endpoint?.instances?.length" title="No messages" message="No messages processed in this period of time"></NoData>

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

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import NoData from "@/components/NoData.vue";
88
import SmallGraph from "./SmallGraph.vue";
99
import PaginationStrip from "@/components/PaginationStrip.vue";
1010
import { useMonitoringEndpointDetailsStore } from "@/stores/MonitoringEndpointDetailsStore";
11+
import ColumnHeader from "@/components/ColumnHeader.vue";
1112
1213
const monitoringStore = useMonitoringEndpointDetailsStore();
1314
const { endpointDetails: endpoint, messageTypes, messageTypesAvailable } = storeToRefs(monitoringStore);
@@ -45,39 +46,19 @@ const paginatedMessageTypes = computed(() => {
4546
<!-- Breakdown by message type-->
4647
<!--headers-->
4748
<div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
48-
<div class="col-xs-4 col-xl-8">
49-
<div class="row box-header">
50-
<div role="columnheader" aria-label="message-type-name" class="col-xs-12">Message type name</div>
51-
</div>
52-
</div>
53-
<div class="col-xs-2 col-xl-1 no-side-padding">
54-
<div class="row box-header">
55-
<div role="columnheader" aria-label="throughput" class="col-xs-12 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
56-
Throughput <span class="table-header-unit">(msgs/s)</span>
57-
</div>
58-
</div>
59-
</div>
60-
<div class="col-xs-2 col-xl-1 no-side-padding">
61-
<div class="row box-header">
62-
<div role="columnheader" aria-label="scheduled-retires" class="col-xs-12 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
63-
Scheduled retries <span class="table-header-unit">(msgs/s)</span>
64-
</div>
65-
</div>
66-
</div>
67-
<div class="col-xs-2 col-xl-1 no-side-padding">
68-
<div class="row box-header">
69-
<div role="columnheader" aria-label="processing-time" class="col-xs-12 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
70-
Processing Time <span class="table-header-unit">(t)</span>
71-
</div>
72-
</div>
73-
</div>
74-
<div class="col-xs-2 col-xl-1 no-side-padding">
75-
<div class="row box-header">
76-
<div role="columnheader" aria-label="critical-time" class="col-xs-12 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
77-
Critical Time <span class="table-header-unit">(t)</span>
78-
</div>
79-
</div>
80-
</div>
49+
<ColumnHeader name="message-type-name" label="Message type name" column-class="col-xs-4 col-xl-8" />
50+
<ColumnHeader name="throughput" label="Throughput" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
51+
<template #unit>(msgs/s)</template>
52+
</ColumnHeader>
53+
<ColumnHeader name="retires" label="Scheduled retries" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
54+
<template #unit>(msgs/s)</template>
55+
</ColumnHeader>
56+
<ColumnHeader name="processing-time" label="Processing time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
57+
<template #unit>(t)</template>
58+
</ColumnHeader>
59+
<ColumnHeader name="critical-time" label="Critical time" column-class="col-xs-2 col-xl-1 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
60+
<template #unit>(t)</template>
61+
</ColumnHeader>
8162
</div>
8263

8364
<no-data v-if="!endpoint?.messageTypes?.length" message="No messages processed in this period of time."></no-data>

0 commit comments

Comments
 (0)