Skip to content

Commit 7ee4b39

Browse files
jasontaylordevjasontaylordev
committed
Enhance ColumnHeader component with unit prop and improve help tooltips
1 parent 8d4e21c commit 7ee4b39

File tree

5 files changed

+36
-40
lines changed

5 files changed

+36
-40
lines changed

‎src/Frontend/src/components/ColumnHeader.vue‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const props = withDefaults(
66
defineProps<{
77
name: string;
88
label: string;
9+
unit?: string;
910
sortable?: boolean;
1011
sortBy?: string;
1112
sortState?: SortInfo;
@@ -22,12 +23,12 @@ const props = withDefaults(
2223
2324
const slots = useSlots();
2425
const sortByColumn = computed(() => props.sortBy || props.name);
25-
const activeSortColumn = defineModel<SortInfo>({ required: true });
26-
const isSortActive = computed(() => activeSortColumn.value?.property === sortByColumn.value);
27-
const sortIcon = computed(() => (activeSortColumn.value.isAscending ? "sort-up" : "sort-down"));
26+
const activeSortColumn = defineModel<SortInfo>();
27+
const isSortActive = computed(() => activeSortColumn?.value?.property === sortByColumn.value);
28+
const sortIcon = computed(() => (activeSortColumn?.value?.isAscending ? "sort-up" : "sort-down"));
2829
2930
function toggleSort() {
30-
activeSortColumn.value = { property: sortByColumn.value, isAscending: isSortActive.value ? !activeSortColumn.value.isAscending : props.defaultAscending };
31+
activeSortColumn.value = { property: sortByColumn.value, isAscending: isSortActive.value ? !activeSortColumn?.value?.isAscending : props.defaultAscending };
3132
}
3233
</script>
3334

@@ -37,22 +38,22 @@ function toggleSort() {
3738
<button v-if="props.sortable" @click="toggleSort" class="column-header-button" :aria-label="props.name">
3839
<span>
3940
{{ props.label }}
40-
<span class="table-header-unit"><slot name="unit"></slot></span>
41+
<span v-if="props.unit" class="table-header-unit">{{ props.unit }}</span>
4142
<span v-if="isSortActive">
4243
<i role="img" :class="sortIcon" :aria-label="sortIcon"></i>
4344
</span>
45+
<tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
46+
<i class="fa fa-sm fa-info-circle text-primary ps-1" />
47+
<template #content>
48+
<slot name="help" />
49+
</template>
50+
</tippy>
4451
</span>
45-
<tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
46-
<i class="fa fa-sm fa-info-circle text-primary ps-1" />
47-
<template #content>
48-
<slot name="help" />
49-
</template>
50-
</tippy>
5152
</button>
5253
<div v-else class="column-header">
5354
<span>
5455
{{ props.label }}
55-
<span class="table-header-unit"><slot name="unit"></slot></span>
56+
<span v-if="props.unit" class="table-header-unit">{{ props.unit }}</span>
5657
</span>
5758
<tippy v-if="slots.help" max-width="400px" :interactive="props.interactiveHelp">
5859
<i class="fa fa-sm fa-info-circle text-primary ps-1" />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,10 @@ async function toggleAlerts(instance: EndpointsView) {
160160
<div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
161161
<ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" columnClass="col-6" v-model="sortByInstances" sortable default-ascending />
162162
<ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" v-model="sortByInstances" sortable />
163-
<ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" columnClass="col-2 centre" v-model="sortByInstances">
163+
<ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" columnClass="col-2 centre">
164164
<template #help>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</template>
165165
</ColumnHeader>
166-
<ColumnHeader name="actions" label="Actions" columnClass="col-1" interactive-help v-model="sortByInstances">
166+
<ColumnHeader name="actions" label="Actions" columnClass="col-1" interactive-help>
167167
<template #help>
168168
<div class="d-flex align-items-center p-1">
169169
<button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,17 +59,17 @@ onMounted(async () => {
5959
<!--headers-->
6060
<div role="row" aria-label="instances-column-headers" class="row box box-no-click table-head-row">
6161
<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>
62+
<ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
63+
<template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
6464
</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>
65+
<ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
66+
<template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
6767
</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>
68+
<ColumnHeader name="processing-time" label="Processing time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
69+
<template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
7070
</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>
71+
<ColumnHeader name="critical-time" label="Critical time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
72+
<template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
7373
</ColumnHeader>
7474
</div>
7575

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,19 @@ const { sortBy: activeColumn } = storeToRefs(monitoringStore);
1313
<!--Table headings-->
1414
<div role="row" aria-label="column-headers" class="table-head-row">
1515
<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>
16+
<ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" unit="(msgs)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
1817
<template #help>Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.</template>
1918
</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>
19+
<ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" unit="(msgs/s)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
2220
<template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
2321
</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>
22+
<ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" unit="(msgs/s)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
2623
<template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
2724
</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>
25+
<ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" unit="(t)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
3026
<template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
3127
</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>
28+
<ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" unit="(t)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
3429
<template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
3530
</ColumnHeader>
3631
</div>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,17 +47,17 @@ const paginatedMessageTypes = computed(() => {
4747
<!--headers-->
4848
<div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
4949
<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>
50+
<ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
51+
<template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
5252
</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>
53+
<ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
54+
<template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
5555
</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>
56+
<ColumnHeader name="processing-time" label="Processing time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
57+
<template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
5858
</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>
59+
<ColumnHeader name="critical-time" label="Critical time" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
60+
<template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
6161
</ColumnHeader>
6262
</div>
6363

0 commit comments

Comments
 (0)