Skip to content

Commit 5916181

Browse files
jasontaylordevjasontaylordev
committed
Switch to build-in class binding
1 parent bafefdf commit 5916181

File tree

6 files changed

+28
-29
lines changed

6 files changed

+28
-29
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const props = withDefaults(
1111
sortBy?: string;
1212
sortState?: SortInfo;
1313
defaultAscending?: boolean;
14-
columnClass: string;
1514
interactiveHelp?: boolean;
1615
}>(),
1716
{
@@ -32,7 +31,7 @@ function toggleSort() {
3231
</script>
3332

3433
<template>
35-
<div role="columnheader" :aria-label="props.name" :class="props.columnClass">
34+
<div role="columnheader" :aria-label="props.name">
3635
<div class="box-header">
3736
<button v-if="props.sortable" @click="toggleSort" class="column-header-button" :aria-label="props.name">
3837
<span>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,12 +158,12 @@ async function toggleAlerts(instance: EndpointsView) {
158158
<section role="table" aria-label="endpoint-instances">
159159
<!--Table headings-->
160160
<div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
161-
<ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" columnClass="col-6" v-model="sortByInstances" sortable default-ascending />
162-
<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">
161+
<ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" class="col-6" v-model="sortByInstances" sortable default-ascending />
162+
<ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" class="col-2" v-model="sortByInstances" sortable />
163+
<ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" class="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>
166+
<ColumnHeader name="actions" label="Actions" class="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/heartbeats/HeartbeatsList.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,13 @@ function endpointHealth(endpoint: LogicalEndpoint) {
4242
<section role="table" aria-label="endpoint-instances">
4343
<!--Table headings-->
4444
<div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
45-
<ColumnHeader v-if="columns.includes(ColumnNames.Name)" :name="ColumnNames.Name" label="Name" columnClass="col-6" sortable v-model="sortByInstances" default-ascending />
46-
<ColumnHeader v-if="columns.includes(ColumnNames.InstancesDown)" :name="ColumnNames.InstancesDown" label="Instances Down" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
47-
<ColumnHeader v-if="columns.includes(ColumnNames.InstancesTotal)" :name="ColumnNames.InstancesTotal" label="Instances" columnClass="col-2" sortable v-model="sortByInstances" default-ascending />
48-
<ColumnHeader v-if="columns.includes(ColumnNames.LastHeartbeat)" :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" columnClass="col-2" sortable v-model="sortByInstances" />
49-
<ColumnHeader v-if="columns.includes(ColumnNames.Tracked)" :name="ColumnNames.Tracked" label="Track Instances" columnClass="col-1 centre" sortable v-model="sortByInstances" />
50-
<ColumnHeader v-if="columns.includes(ColumnNames.TrackToggle)" :name="ColumnNames.TrackToggle" label="Track Instances" columnClass="col-2 centre" sortable v-model="sortByInstances" />
51-
<ColumnHeader v-if="columns.includes(ColumnNames.Muted)" :name="ColumnNames.Muted" label="Instances Muted" columnClass="col-1 centre" sortable v-model="sortByInstances" />
45+
<ColumnHeader v-if="columns.includes(ColumnNames.Name)" :name="ColumnNames.Name" label="Name" class="col-6" sortable v-model="sortByInstances" default-ascending />
46+
<ColumnHeader v-if="columns.includes(ColumnNames.InstancesDown)" :name="ColumnNames.InstancesDown" label="Instances Down" class="col-2" sortable v-model="sortByInstances" default-ascending />
47+
<ColumnHeader v-if="columns.includes(ColumnNames.InstancesTotal)" :name="ColumnNames.InstancesTotal" label="Instances" class="col-2" sortable v-model="sortByInstances" default-ascending />
48+
<ColumnHeader v-if="columns.includes(ColumnNames.LastHeartbeat)" :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" class="col-2" sortable v-model="sortByInstances" />
49+
<ColumnHeader v-if="columns.includes(ColumnNames.Tracked)" :name="ColumnNames.Tracked" label="Track Instances" class="col-1 centre" sortable v-model="sortByInstances" />
50+
<ColumnHeader v-if="columns.includes(ColumnNames.TrackToggle)" :name="ColumnNames.TrackToggle" label="Track Instances" class="col-2 centre" sortable v-model="sortByInstances" />
51+
<ColumnHeader v-if="columns.includes(ColumnNames.Muted)" :name="ColumnNames.Muted" label="Instances Muted" class="col-1 centre" sortable v-model="sortByInstances" />
5252
</div>
5353
<!--Table rows-->
5454
<DataView :data="data" :show-items-per-page="true" :items-per-page="itemsPerPage" @items-per-page-changed="store.setItemsPerPage">

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,17 +58,17 @@ onMounted(async () => {
5858
<!-- Breakdown by instance-->
5959
<!--headers-->
6060
<div role="row" aria-label="instances-column-headers" class="row box box-no-click table-head-row">
61-
<ColumnHeader name="instance-name" label="Instance Name" column-class="col-xs-4 col-xl-8" />
62-
<ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
61+
<ColumnHeader name="instance-name" label="Instance Name" class="col-xs-4 col-xl-8" />
62+
<ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
6363
<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" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
65+
<ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
6666
<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" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
68+
<ColumnHeader name="processing-time" label="Processing time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
6969
<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" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
71+
<ColumnHeader name="critical-time" label="Critical time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
7272
<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>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,20 @@ const { sortBy: activeColumn } = storeToRefs(monitoringStore);
1212
<section role="table" aria-label="endpoint-list">
1313
<!--Table headings-->
1414
<div role="row" aria-label="column-headers" class="table-head-row">
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" unit="(msgs)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
15+
<ColumnHeader :name="columnName.ENDPOINTNAME" label="Endpoint name" class="table-first-col" v-model="activeColumn" sortable default-ascending />
16+
<ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" unit="(msgs)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
1717
<template #help>Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.</template>
1818
</ColumnHeader>
19-
<ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" unit="(msgs/s)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
19+
<ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" unit="(msgs/s)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
2020
<template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
2121
</ColumnHeader>
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">
22+
<ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" unit="(msgs/s)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
2323
<template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
2424
</ColumnHeader>
25-
<ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" unit="(t)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
25+
<ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" unit="(t)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
2626
<template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
2727
</ColumnHeader>
28-
<ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" unit="(t)" column-class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
28+
<ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" unit="(t)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
2929
<template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
3030
</ColumnHeader>
3131
</div>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,17 @@ const paginatedMessageTypes = computed(() => {
4646
<!-- Breakdown by message type-->
4747
<!--headers-->
4848
<div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
49-
<ColumnHeader name="message-type-name" label="Message type name" column-class="col-xs-4 col-xl-8" />
50-
<ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
49+
<ColumnHeader name="message-type-name" label="Message type name" class="col-xs-4 col-xl-8" />
50+
<ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
5151
<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" unit="(msgs/s)" column-class="col-xs-2 col-xl-1 no-side-padding">
53+
<ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
5454
<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" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
56+
<ColumnHeader name="processing-time" label="Processing time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
5757
<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" unit="(t)" column-class="col-xs-2 col-xl-1 no-side-padding">
59+
<ColumnHeader name="critical-time" label="Critical time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
6060
<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>

0 commit comments

Comments
 (0)