feat: switch to /api/graph

flanksource · Dec 31, 2021 · 387ed8a · 387ed8a
1 parent da5350b
commit 387ed8a
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 20 deletions.
diff --git a/src/components/Canary/CanaryPopup/CheckDetails.js b/src/components/Canary/CanaryPopup/CheckDetails.js
@@ -15,7 +15,7 @@ import { StatusHistory } from "./StatusHistory";
 import { DetailField } from "./DetailField";
 import { CanaryStatusChart } from "../CanaryStatusChart";
 
-export function CheckDetails({ check, ...rest }) {
+export function CheckDetails({ check, graphData, ...rest }) {
   const prevCheck = usePrevious(check);
   const validCheck = check || prevCheck;
 
@@ -38,9 +38,15 @@ export function CheckDetails({ check, ...rest }) {
     Labels: (
       <>
         {validCheck?.labels &&
-          Object.entries(validCheck?.labels).map((entry) => {
+          Object.entries(validCheck?.labels).map((entry, v) => {
             const key = entry[0];
-            return <Badge className="mr-1 mb-1" key={key} text={key} />;
+            let value = entry[1];
+            if (value == "true") {
+              value = ""
+            }
+            return <>
+              <Badge className="mr-1 mb-1" key={key} text={key} value={value} /> <br />
+            </>;
           })}
       </>
     ),
@@ -91,10 +97,10 @@ export function CheckDetails({ check, ...rest }) {
       <div className="mb-3">
         <div className="flex justify-between items-center mb-2">
           <span className="text-lg font-medium">Health overview</span>
-          <span className="text-sm font-medium">(time dropdown)</span>
+          {/* <span className="text-sm font-medium">(time dropdown)</span> */}
         </div>
         <div className="w-full h-52 overflow-visible">
-          <CanaryStatusChart />
+          <CanaryStatusChart data={graphData} />
         </div>
       </div>
       <PopupTabs

diff --git a/src/components/Canary/CanaryStatusChart/index.js b/src/components/Canary/CanaryStatusChart/index.js
@@ -14,18 +14,30 @@ import {
 // @TODO: duration should be formatted properly, not just by ms
 const formatDuration = (duration) => `${duration}ms`;
 
-// @TODO: color should depend on a pass/fail boolean rather than avgduration
-const getFillByDuration = (duration, avgDuration) =>
-  duration > avgDuration ? "#df1a1a" : "#2cbd27";
+const getFill = (entry) =>
+  entry.status ? "#2cbd27" : "#df1a1a";
 
-export function CanaryStatusChart({ data = sampleCheckData, ...rest }) {
-  // @TODO: color should depend on a pass/fail boolean rather than avgduration
+export function CanaryStatusChart({ data, ...rest }) {
+
+  data = data || []
+  let timeRange = 0;
+  if (data.length > 0) {
+    (new Date(data[0].time) - new Date(data[data.length - 1].time)) / 1000 / 60
+  }
+
+  // @TODO: date should be formatted properly depending on selection, not just by DD/MM
+  var formatDate = (date) => dayjs(date).format("HH:mm");
+  if (timeRange > 60 * 24 * 30) {
+    formatDate = (date) => dayjs(date).format("MMM DD");
+  } else if (timeRange > 60 * 24) {
+    formatDate = (date) => dayjs(date).format("MMM DD HH:mm");
+  }
   const averageDuration =
     data && data.length > 0
       ? Object.values(data).reduce(
-          (acc, current) => acc + current.duration,
-          0
-        ) / data.length
+        (acc, current) => acc + current.duration,
+        0
+      ) / data.length
       : null;
 
   return (
@@ -52,6 +64,10 @@ export function CanaryStatusChart({ data = sampleCheckData, ...rest }) {
           tickMargin={4}
           tickFormatter={formatDate}
           fontSize={12}
+          reversed={true}
+          // type="number"
+          allowDuplicatedCategory={false}
+          // scale="time"
           dataKey="time"
           name="Time"
         />
@@ -69,7 +85,7 @@ export function CanaryStatusChart({ data = sampleCheckData, ...rest }) {
           {data.map((entry) => (
             <Cell
               key={`cell-${entry.time}`}
-              fill={getFillByDuration(entry.duration, averageDuration)}
+              fill={getFill(entry)}
             />
           ))}
         </Scatter>
@@ -123,7 +139,7 @@ const CustomTooltip = ({ active, payload }) => {
         <p className="">
           <span className="text-gray-500">{payload[0].name}: </span>
           <span className="ml-1 text-gray-700">
-            {formatDate(payload[0].value)}
+            {payload[0].value}
           </span>
         </p>
         <p className="">

diff --git a/src/components/Canary/index.js b/src/components/Canary/index.js
@@ -36,7 +36,7 @@ export class Canary extends React.Component {
     this.timer = null;
     this.ticker = null
     this.url = props.url;
-    this.fetch = this.fetch.bind(this);
+    this.fetch = _.throttle(this.fetch.bind(this), 1000);
     this.handleSelect = this.handleSelect.bind(this);
     this.handleModalClose = this.handleModalClose.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
@@ -57,6 +57,7 @@ export class Canary extends React.Component {
       requestDuration: null,
       urlState: getDefaultForm(labels),
       selected: null,
+      graphData: null,
       autoRefresh: JSON.parse(getLocalItem("canaryAutoRefreshState")) ?? true,
       // @TODO: default refresh interval is always 10. might want to memoize this to local state. - john
       refreshInterval: getLocalItem("canaryRefreshIntervalState") || 10,
@@ -146,9 +147,28 @@ export class Canary extends React.Component {
   }
 
   handleSelect(check) {
+    let params = encodeObjectToUrlSearchParams({
+      "check": check.key,
+      "start": "7d",
+      "count": 300,
+    })
     this.setState({
-      selected: check
-    });
+      selected: check,
+      graphData: null,
+    })
+
+    fetch(this.url + "/graph" + "?" + params)
+      .then((result) => result.json())
+      .then((e) => {
+        if (!_.isEmpty(e.error)) {
+          console.error(e.error);
+        } else {
+          console.log(e)
+          this.setState({
+            graphData: e.status,
+          })
+        }
+      });
   }
 
   handleModalClose() {
@@ -216,8 +236,8 @@ export class Canary extends React.Component {
         if (!_.isEmpty(e.error)) {
           console.error(e.error);
         } else {
-        this.setChecks(e);
-        this.setLastUpdated(new Date());
+          this.setChecks(e);
+          this.setLastUpdated(new Date());
         }
       });
   }
@@ -226,6 +246,7 @@ export class Canary extends React.Component {
     const { state } = this;
     const {
       selected,
+      graphData,
       labelFilters,
       urlState,
       checks: stateChecks,
@@ -433,6 +454,7 @@ export class Canary extends React.Component {
             <CheckTitle check={selected} className="pb-4" />
             <CheckDetails
               check={selected}
+              graphData={graphData}
               className={`flex flex-col overflow-y-hidden ${mixins.appleScrollbar}`}
             />
           </div>