Add displaying of usage per month

Author: johnsimons

src/Frontend/src/composables/serviceLicense.ts

@@ -13,32 +13,32 @@ interface License extends LicenseInfo {
   formattedInstanceName: ComputedRef<string>;
 }
 
-const emptyLicense: License = {
-  edition: "",
-  expiration_date: "",
-  upgrade_protection_expiration: "",
-  license_type: "",
-  instance_name: "",
-  trial_license: true,
-  registered_to: "",
-  status: "",
-  license_status: LicenseStatus.Unavailable,
-  license_extension_url: "",
-  licenseEdition: computed(() => {
-    return `${license.license_type}${license.edition ? `, ${license.edition}` : ""}`;
-  }),
-  formattedInstanceName: computed(() => {
-    return license.instance_name || "Upgrade ServiceControl to v3.4.0+ to see more information about this license";
-  }),
-  formattedExpirationDate: computed(() => {
-    return license.expiration_date ? new Date(license.expiration_date.replace("Z", "")).toLocaleDateString() : "";
-  }),
-  formattedUpgradeProtectionExpiration: computed(() => {
-    return license.upgrade_protection_expiration ? new Date(license.upgrade_protection_expiration.replace("Z", "")).toLocaleDateString() : "";
-  }),
-};
-
-const license = reactive<License>(emptyLicense);
+class emptyLicense implements License {
+  edition = "";
+  expiration_date = "";
+  upgrade_protection_expiration = "";
+  license_type = "";
+  instance_name = "";
+  trial_license = true;
+  registered_to = "";
+  status = "";
+  license_status = LicenseStatus.Unavailable;
+  license_extension_url = "";
+  licenseEdition = computed(() => {
+    return `${this.license_type}${this.edition ? `, ${this.edition}` : ""}`;
+  });
+  formattedInstanceName = computed(() => {
+    return this.instance_name || "Upgrade ServiceControl to v3.4.0+ to see more information about this license";
+  });
+  formattedExpirationDate = computed(() => {
+    return this.expiration_date ? new Date(this.expiration_date.replace("Z", "")).toLocaleDateString() : "";
+  });
+  formattedUpgradeProtectionExpiration = computed(() => {
+    return this.upgrade_protection_expiration ? new Date(this.upgrade_protection_expiration.replace("Z", "")).toLocaleDateString() : "";
+  });
+}
+
+const license = reactive<License>(new emptyLicense());
 
 const licenseStatus = reactive({
   isSubscriptionLicense: false,
@@ -152,6 +152,6 @@ async function getLicense() {
     return data;
   } catch (err) {
     console.log(err);
-    return emptyLicense;
+    return new emptyLicense();
   }
 }

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;
+}