From c4ecba72af648c6cf90e55e98178088ae4d38a76 Mon Sep 17 00:00:00 2001 From: Phil Bastian Date: Wed, 10 Jun 2026 09:47:24 +0800 Subject: [PATCH 1/5] display usage monthly throughput graphs when data is available --- .../resources/EndpointThroughputSummary.ts | 6 + .../endpoints/DetectedListView.vue | 11 +- .../endpoints/InlineThroughputGraph.vue | 56 ++++++++++ .../endpoints/ThroughputGraph.vue | 104 ++++++++++++++++++ 4 files changed, 176 insertions(+), 1 deletion(-) create mode 100644 src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue create mode 100644 src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue diff --git a/src/Frontend/src/resources/EndpointThroughputSummary.ts b/src/Frontend/src/resources/EndpointThroughputSummary.ts index f6cae8d3d..764e6455c 100644 --- a/src/Frontend/src/resources/EndpointThroughputSummary.ts +++ b/src/Frontend/src/resources/EndpointThroughputSummary.ts @@ -3,7 +3,13 @@ interface EndpointThroughputSummary { is_known_endpoint: boolean; user_indicator: string; max_daily_throughput: number; + monthly_throughput?: MonthlyThroughput[]; max_monthly_throughput?: number; } +export interface MonthlyThroughput { + month: string; + throughput: number; +} + export type { EndpointThroughputSummary as default }; diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue b/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue index e967c22b5..210f76dc0 100644 --- a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue +++ b/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue @@ -15,6 +15,7 @@ import { useHiddenFeature } from "./useHiddenFeature"; import FAIcon from "@/components/FAIcon.vue"; import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; import { useLicenseStore } from "@/stores/LicenseStore"; +import InlineThroughputGraph from "./InlineThroughputGraph.vue"; enum NameFilterType { beginsWith = "Begins with", @@ -246,7 +247,10 @@ async function save() { - {{ row.name }} +
+ + {{ row.name }} +
{{ row.max_monthly_throughput ? row.max_monthly_throughput.toLocaleString() : "0" }} {{ row.max_daily_throughput.toLocaleString() }} @@ -287,4 +291,9 @@ async function save() { border-radius: 3px; padding: 5px; } +.endpoint-name { + display: flex; + align-items: flex-start; + gap: 0.25rem; +} diff --git a/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue b/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue new file mode 100644 index 000000000..abdbf893f --- /dev/null +++ b/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue b/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue new file mode 100644 index 000000000..fece4390b --- /dev/null +++ b/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue @@ -0,0 +1,104 @@ + + + + + From f14c2b3ab8085ce5f2b3169e3da9a098d07a67bd Mon Sep 17 00:00:00 2001 From: Phil Bastian Date: Fri, 12 Jun 2026 08:19:48 +0800 Subject: [PATCH 2/5] format number --- .../src/views/throughputreport/endpoints/ThroughputGraph.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue b/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue index fece4390b..592dba716 100644 --- a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue +++ b/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue @@ -47,8 +47,7 @@ const dots = computed(() => - - {{ value }} + {{ value.toLocaleString() }} From 11773502aa0ef83787c093cd22301ed963bca484 Mon Sep 17 00:00:00 2001 From: Phil Bastian Date: Fri, 12 Jun 2026 08:26:05 +0800 Subject: [PATCH 3/5] address build lint errors --- .../endpoints/InlineThroughputGraph.vue | 2 +- .../throughputreport/endpoints/ThroughputGraph.vue | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue b/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue index abdbf893f..3281f4cc5 100644 --- a/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue +++ b/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue @@ -5,7 +5,7 @@ import type { MonthlyThroughput } from "@/resources/EndpointThroughputSummary.ts import FAIcon from "@/components/FAIcon.vue"; import { faLineChart } from "@fortawesome/free-solid-svg-icons"; -const props = defineProps<{ data: MonthlyThroughput[] }>(); +defineProps<{ data: MonthlyThroughput[] }>(); const showContent = ref(false); diff --git a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue b/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue index 592dba716..4d933f6e2 100644 --- a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue +++ b/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue @@ -6,7 +6,7 @@ const props = defineProps<{ data: MonthlyThroughput[] }>(); const date = new Date(); date.setMonth(date.getMonth() - 13); -const reportPeriod = Array.from({ length: 13 }).map((_) => { +const reportPeriod = Array.from({ length: 13 }).map(() => { date.setMonth(date.getMonth() + 1); return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}`; }); @@ -44,15 +44,15 @@ const dots = computed(() =>
- - - + + + {{ value.toLocaleString() }}
- {{ pip }} + {{ pip }}
From 9bac9462d3496beaa743d5c6c93df55fb7aeb910 Mon Sep 17 00:00:00 2001 From: Phil Bastian Date: Fri, 12 Jun 2026 08:39:02 +0800 Subject: [PATCH 4/5] fix test --- .../views/throughputreport/endpoints/DetectedListView.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts b/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts index 4fab23496..1709c4d03 100644 --- a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts +++ b/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts @@ -255,7 +255,7 @@ describe("DetectedListView tests", () => { //let orderedNames = unsortedNames.sort((a, b) => a.localeCompare(b)); let idx = 0; for (const row of within(table).getAllByRole("row").slice(1)) { - expect(within(row).getByRole("cell", { name: "name" }).textContent).toBe(lexicallySortedNames[idx++]); + expect(within(row).getByRole("cell", { name: "name" }).textContent.trim()).toBe(lexicallySortedNames[idx++]); } await user.click(screen.getByRole("button", { name: /Sort by/i })); @@ -264,7 +264,7 @@ describe("DetectedListView tests", () => { const reverseLexicallySortedNames = lexicallySortedNames.reverse(); idx = 0; for (const row of within(table).getAllByRole("row").slice(1)) { - expect(within(row).getByRole("cell", { name: "name" }).textContent).toBe(reverseLexicallySortedNames[idx++]); + expect(within(row).getByRole("cell", { name: "name" }).textContent.trim()).toBe(reverseLexicallySortedNames[idx++]); } }); }); From 894bcffd0226326c863407e6bd2db5ad25a9cf23 Mon Sep 17 00:00:00 2001 From: Phil Bastian <155411597+PhilBastian@users.noreply.github.com> Date: Mon, 15 Jun 2026 12:03:48 +0800 Subject: [PATCH 5/5] Update src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue --- .../src/views/throughputreport/endpoints/ThroughputGraph.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue b/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue index 4d933f6e2..afd23f792 100644 --- a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue +++ b/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue @@ -13,7 +13,7 @@ const reportPeriod = Array.from({ length: 13 }).map(() => { const maxValue = computed(() => Math.max(...[...props.data.map(({ throughput }) => throughput), 1])); const maxValueText = computed(() => { - if (maxValue.value >= 1_000_000) return `${(Math.round((maxValue.value * 10) / 1_000_000) / 10 + 0.1).toFixed(1)}m`; + if (maxValue.value >= 1_000_000) return `${(Math.round((maxValue.value * 10) / 1_000_000) / 10 + 0.1).toFixed(1)}M`; if (maxValue.value >= 10_000) return `${(Math.round((maxValue.value * 100) / 1_000) / 100 + 0.01).toFixed(2)}k`; return maxValue.value; });