feat #15: filter by endpoint in dashboard

tom-draper · Jun 28, 2023 · 5598ba8 · 5598ba8
1 parent 921d8ee
commit 5598ba8
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 20 deletions.
diff --git a/dashboard/src/components/dashboard/Endpoints.svelte b/dashboard/src/components/dashboard/Endpoints.svelte
@@ -35,13 +35,21 @@
 
   function statusMatch(status: number): boolean {
     return (
-      activeBtn == "all" ||
-      (activeBtn == "success" && status >= 200 && status <= 299) ||
-      (activeBtn == "bad" && status >= 300 && status <= 399) ||
-      (activeBtn == "error" && status >= 400)
+      activeBtn === "all" ||
+      (activeBtn === "success" && status >= 200 && status <= 299) ||
+      (activeBtn === "bad" && status >= 300 && status <= 399) ||
+      (activeBtn === "error" && status >= 400)
     );
   }
 
+  function setTargetEndpoint(endpoint: string) {
+    if (endpoint === targetEndpoint) {
+      targetEndpoint = null;
+    } else {
+      targetEndpoint = endpoint;
+    }
+  }
+
   function build() {
     let freq = endpointFreq();
 
@@ -96,33 +104,40 @@
 
   $: data && mounted && build();
 
-  export let data: RequestsData;
+  export let data: RequestsData, targetEndpoint: string;
 </script>
 
 <div class="card">
   <div class="card-title">
     Endpoints
     <div class="toggle">
       <button
-        class:active={activeBtn == "all"}
+      class="cancel"
+        class:visible={targetEndpoint != null}
+        on:click={() => {
+          setTargetEndpoint(null);
+        }}>Cancel</button
+      >
+      <button
+        class:active={activeBtn === "all"}
         on:click={() => {
           setBtn("all");
         }}>All</button
       >
       <button
-        class:active={activeBtn == "success"}
+        class:active={activeBtn === "success"}
         on:click={() => {
           setBtn("success");
         }}>Success</button
       >
       <button
-        class:active={activeBtn == "bad"}
+        class:bad-active={activeBtn === "bad"}
         on:click={() => {
           setBtn("bad");
         }}>Bad</button
       >
       <button
-        class:active={activeBtn == "error"}
+        class:error-active={activeBtn === "error"}
         on:click={() => {
           setBtn("error");
         }}>Error</button
@@ -134,7 +149,7 @@
     <div class="endpoints">
       {#each endpoints as endpoint, i}
         <div class="endpoint-container">
-          <div class="endpoint" id="endpoint-{i}">
+          <div class="endpoint" id="endpoint-{i}"  on:click={() => setTargetEndpoint(endpoint.path.split(' ')[2])}>
             <div class="path">
               <b>{endpoint.count.toLocaleString()}</b>
               {endpoint.path}
@@ -167,6 +182,12 @@
   .active {
     background: var(--highlight);
   }
+  .bad-active {
+    background: rgb(235, 235, 129);
+  }
+  .error-active {
+    background: var(--red);
+  }
   button {
     border: none;
     border-radius: 4px;
@@ -186,6 +207,7 @@
     position: relative;
     font-size: 0.85em;
     width: 100%;
+    cursor: pointer;
   }
   .path {
     position: relative;
@@ -207,6 +229,13 @@
   .error {
     background: var(--red);
   }
+  .cancel {
+    display: none;
+    background: gold;
+  }
+  .visible {
+    display: inline;
+  }
   .background {
     border-radius: 3px;
     color: var(--light-background);

diff --git a/dashboard/src/components/dashboard/activity/ActivityRequests.svelte b/dashboard/src/components/dashboard/activity/ActivityRequests.svelte
@@ -41,7 +41,7 @@
     let requestFreq = {};
     let days = periodToDays(period);
     if (days) {
-      if (days == 1) {
+      if (days === 1) {
         // Freq count for every 5 minute
         for (let i = 0; i < 288; i++) {
           let date = new Date();
@@ -71,7 +71,7 @@
     let days = periodToDays(period);
     for (let i = 1; i < data.length; i++) {
       let date = new Date(data[i][7]);
-      if (days == 1) {
+      if (days === 1) {
         // Round down to multiple of 5
         date.setMinutes(Math.floor(date.getMinutes() / 5) * 5, 0, 0);
       } else {

diff --git a/dashboard/src/components/dashboard/device/Device.svelte b/dashboard/src/components/dashboard/device/Device.svelte
@@ -38,13 +38,13 @@
       >
     </div>
   </div>
-  <div class="client" style={activeBtn == "client" ? "display: initial" : ""}>
+  <div class="client" style={activeBtn === "client" ? "display: initial" : ""}>
     <Client {data} />
   </div>
-  <div class="os" style={activeBtn == "os" ? "display: initial" : ""}>
+  <div class="os" style={activeBtn === "os" ? "display: initial" : ""}>
     <OperatingSystem {data} />
   </div>
-  <div class="device" style={activeBtn == "device" ? "display: initial" : ""}>
+  <div class="device" style={activeBtn === "device" ? "display: initial" : ""}>
     <DeviceType {data} />
   </div>
 </div>

diff --git a/dashboard/src/components/dashboard/device/DeviceType.svelte b/dashboard/src/components/dashboard/device/DeviceType.svelte
@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
 
   function getDevice(userAgent: string): string {
-    if (userAgent == null) {
+    if (userAgent === null) {
       return "Unknown";
     } else if (userAgent.match(/iPhone/)) {
       return "iPhone";

diff --git a/dashboard/src/components/dashboard/device/OperatingSystem.svelte b/dashboard/src/components/dashboard/device/OperatingSystem.svelte
@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
 
   function getOS(userAgent: string): string {
-    if (userAgent == null) {
+    if (userAgent === null) {
       return "Unknown";
     } else if (userAgent.match(/Win16/)) {
       return "Windows 3.11";

diff --git a/dashboard/src/routes/Dashboard.svelte b/dashboard/src/routes/Dashboard.svelte
@@ -38,7 +38,7 @@
 
     let dataSubset = [];
     for (let i = 1; i < data.length; i++) {
-      if (disable404 && data[i][5] == 404) {
+      if ((disable404 && data[i][5] === 404) || (targetEndpoint != null && targetEndpoint != data[i][1])) {
         continue;
       }
       let date = new Date(data[i][7]);
@@ -70,7 +70,7 @@
 
     let dataSubset = [];
     for (let i = 1; i < data.length; i++) {
-      if (disable404 && data[i][5] == 404) {
+      if ((disable404 && data[i][5] === 404) || (targetEndpoint != null && targetEndpoint != data[i][1])) {
         continue;
       }
       let date = new Date(data[i][7]);
@@ -83,6 +83,12 @@
 
   function setPeriod(value: string) {
     currentPeriod = value;
+    // if (value in periodDataCache) {
+    //   periodData = periodDataCache[currentPeriod].periodData
+    //   prevPeriodData = periodDataCache[currentPeriod].prevPeriodData
+    // } else {
+    //   periodDataCache[currentPeriod] = {periodData, prevPeriodData}
+    // }
     setPeriodData();
     setPrevPeriodData();
   }
@@ -113,7 +119,15 @@
     }
   }
 
+  type PeriodDataCache = {
+    [period: string]: {
+      periodData: RequestsData,
+      prevPeriodData: RequestsData
+    }
+  }
+
   let data: RequestsData;
+  let periodDataCache: PeriodDataCache = {};
   let periodData: RequestsData;
   let prevPeriodData: RequestsData;
   let timePeriods = [
@@ -128,6 +142,7 @@
   let currentPeriod = timePeriods[2].name;
   let failed = false;
   let disable404 = false;
+  let targetEndpoint = null;
   onMount(() => {
     if (demo) {
       data = genDemoData() as RequestsData;
@@ -137,6 +152,17 @@
     }
   });
 
+  function refreshDataFilter() {
+    if (data === undefined) {
+      return
+    }
+    setPeriodData();
+    setPrevPeriodData();
+  }
+
+  $: if (targetEndpoint === null || targetEndpoint) {
+    refreshDataFilter();
+  }
   export let userID: string, demo: boolean;
 </script>
 
@@ -183,7 +209,7 @@
           />
         </div>
         <ResponseTimes data={periodData} />
-        <Endpoints data={periodData} />
+        <Endpoints data={periodData} bind:targetEndpoint={targetEndpoint}/>
         <Version data={periodData} />
       </div>
       <div class="right">