Add displaying of usage per month

Author: johnsimons

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

@@ -167,7 +167,7 @@ async function toggleAlerts(instance: EndpointsView) {
         </div>
         <div role="columnheader" :aria-label="ColumnNames.MuteToggle" class="col-2 centre">
           <SortableColumn :sort-by="ColumnNames.MuteToggle" v-model="sortByInstances">Mute Alerts</SortableColumn>
-          <tippy max-width="400px">
+          <tippy max-width="400px" trigger="click">
             <i :style="{ fontSize: '1.1em', marginLeft: '0.25em' }" class="fa fa-info-circle text-primary" />
             <template #content>
               <span>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.</span>

src/Frontend/src/resources/EndpointThroughputSummary.ts

@@ -3,6 +3,7 @@ interface EndpointThroughputSummary {
   is_known_endpoint: boolean;
   user_indicator: string;
   max_daily_throughput: number;
+  max_monthly_throughput?: number;
 }
 
 export default EndpointThroughputSummary;

src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts

@@ -205,15 +205,15 @@ describe("DetectedListView tests", () => {
 
       let throughput = 0;
       for (const row of within(table).getAllByRole("row").slice(1)) {
-        expect(within(row).getByRole("cell", { name: "maximum daily throughput" }).textContent).toBe(`${throughput++}`);
+        expect(within(row).getByRole("cell", { name: "maximum usage throughput" }).textContent).toBe(`${throughput++}`);
       }
 
       await user.click(screen.getByRole("button", { name: /Sort by/i }));
       await user.click(screen.getByRole("link", { name: "throughput (Descending)" }));
 
       throughput = dataLength - 1;
       for (const row of within(table).getAllByRole("row").slice(1)) {
-        expect(within(row).getByRole("cell", { name: "maximum daily throughput" }).textContent).toBe(`${throughput--}`);
+        expect(within(row).getByRole("cell", { name: "maximum usage throughput" }).textContent).toBe(`${throughput--}`);
       }
     });
 

src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue

@@ -11,6 +11,8 @@ import { userIndicatorMapper } from "./userIndicatorMapper";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import { useShowToast } from "@/composables/toast";
 import ResultsCount from "@/components/ResultsCount.vue";
+import { useHiddenFeature } from "./useHiddenFeature";
+import { license } from "@/composables/serviceLicense";
 
 enum NameFilterType {
   beginsWith = "Begins with",
@@ -66,6 +68,9 @@ const filteredData = computed(() => {
     })
     .sort(sortItem?.comparer);
 });
+// We can remove this hidden toggle once we have new edition licenses.
+const hiddenFeatureToggle = useHiddenFeature(["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown"]);
+const showMonthly = computed(() => license.edition === "MonthlyUsage" || hiddenFeatureToggle.value);
 
 onMounted(async () => {
   await loadData();
@@ -221,7 +226,8 @@ async function save() {
     <thead>
       <tr>
         <th scope="col">{{ props.columnTitle }}</th>
-        <th scope="col" class="text-end formatThroughputColumn">Maximum daily throughput</th>
+        <th v-if="showMonthly" scope="col" class="text-end formatThroughputColumn">Highest monthly throughput <i class="fa fa-info-circle text-primary" v-tippy="'In the last 12 months'" /></th>
+        <th v-else scope="col" class="text-end formatThroughputColumn">Maximum daily throughput <i class="fa fa-info-circle text-primary" v-tippy="'In the last 12 months'" /></th>
         <th scope="col">Endpoint Type <i class="fa fa-info-circle text-primary" v-tippy="'Pick the most correct option'" /></th>
       </tr>
     </thead>
@@ -233,7 +239,8 @@ async function save() {
         <td class="col" aria-label="name">
           {{ row.name }}
         </td>
-        <td class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum daily throughput">{{ row.max_daily_throughput.toLocaleString() }}</td>
+        <td v-if="showMonthly" class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum usage throughput">{{ row.max_monthly_throughput ? row.max_monthly_throughput.toLocaleString() : "0" }}</td>
+        <td v-else class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum usage throughput">{{ row.max_daily_throughput.toLocaleString() }}</td>
         <td class="col" style="width: 350px" aria-label="endpoint type">
           <select class="form-select endpointType format-text" @change="(event) => updateIndicator(event, row.name)">
             <option v-if="props.showEndpointTypePlaceholder" value="">Pick the most appropriate option</option>

src/Frontend/src/views/throughputreport/endpoints/useHiddenFeature.ts

@@ -0,0 +1,26 @@
+import { ref, watchEffect } from "vue";
+
+const keys = ref<string[]>([]);
+const hiddenFeatureEnabled = ref(false);
+const keyHandler = (event: KeyboardEvent) => {
+  keys.value.push(event.key);
+};
+
+watchEffect((onCleanup) => {
+  if (keys.value.length > 0) {
+    const timeout = window.setTimeout(() => keys.value.splice(0), 5000);
+    onCleanup(() => clearTimeout(timeout));
+  }
+});
+
+window.document.addEventListener("keydown", keyHandler);
+
+export function useHiddenFeature(keyCombo: string[]) {
+  watchEffect(() => {
+    if (keys.value.toString() === keyCombo.toString()) {
+      hiddenFeatureEnabled.value = true;
+    }
+  });
+
+  return hiddenFeatureEnabled;
+}