custom duration (#42)

* add duration in config Signed-off-by: ashutosh16 <[email protected]> * add metrics ui only to rollout Signed-off-by: ashutosh16 <[email protected]> * add metrics ui only to rollout Signed-off-by: ashutosh16 <[email protected]> * add custom intervals Signed-off-by: ashutosh16 <[email protected]> --------- Signed-off-by: ashutosh16 <[email protected]>
argoproj-labs · Jun 14, 2023 · 60cb1dd · 60cb1dd
1 parent 2d48268
commit 60cb1dd
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 63 deletions.
diff --git a/app/config.json b/app/config.json
@@ -101,6 +101,13 @@
                   }
                 ]
               }
+            ],
+            "intervals": [
+              "1h",
+              "2h",
+              "6h",
+              "12h",
+              "24h"
             ]
           }
         ]
@@ -112,6 +119,13 @@
           {
             "groupKind": "pod",
             "tabs": ["GoldenSignal"],
+            "intervals": [
+              "1h",
+              "2h",
+              "6h",
+              "12h",
+              "24h"
+            ],
             "rows": [
               {
                 "name": "container",
@@ -195,7 +209,13 @@
           },
           {
             "groupKind": "deployment",
-
+            "intervals": [
+              "1h",
+              "2h",
+              "6h",
+              "12h",
+              "24h"
+            ],
             "rows": [
               {
                 "name": "httpaggrigatedanomaly",
@@ -301,10 +321,12 @@
                 ]
               }
             ]
+
           }
         ]
       }
     ],
+
     "provider":
     {
       "Name": "default",

diff --git a/extensions/resource-metrics/resource-metrics-extention/ui/src/Metrics/Metrics.tsx b/extensions/resource-metrics/resource-metrics-extention/ui/src/Metrics/Metrics.tsx
@@ -14,6 +14,7 @@ export const Metrics = ({
   setHasMetrics,
   isLoading,
   setIsLoading,
+  setIntervals
 }: any) => {
   const resourceName =
     resource.kind === "Application" ? "" : resource?.metadata?.name;
@@ -33,9 +34,9 @@ export const Metrics = ({
       applicationName,
       applicationNamespace,
       resourceType: resource.kind,
-      project,
+      project
     })
-      .then((response) => {
+      .then(response => {
         if (response.status > 399) {
           throw new Error("No metrics");
         }
@@ -45,11 +46,12 @@ export const Metrics = ({
         setIsLoading(false);
         setHasMetrics(true);
         setDashboard(data);
+        setIntervals(data?.intervals || []);
         if (data?.tabs?.length) {
           setSelectedTab(data.tabs[0]);
         }
       })
-      .catch((err) => {
+      .catch(err => {
         setHasMetrics(false);
         setIsLoading(false);
         console.error("res.data", err);

diff --git a/extensions/resource-metrics/resource-metrics-extention/ui/src/index.tsx b/extensions/resource-metrics/resource-metrics-extention/ui/src/index.tsx
@@ -12,6 +12,7 @@ export const Extension = (props: any) => {
   const [duration, setDuration] = useState("1h");
   const [hasMetrics, setHasMetrics] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [intervals, setIntervals] = useState([]);
 
   const loc = window.location;
   const { resource, application } = props;
@@ -27,11 +28,11 @@ export const Extension = (props: any) => {
       url = `/api/v1/applications/${application_name}/events`;
     }
     fetch(url)
-      .then((response) => response.json())
-      .then((data) => {
+      .then(response => response.json())
+      .then(data => {
         setEvents(data?.items || []);
       })
-      .catch((err) => {
+      .catch(err => {
         console.error("res.data", err);
       });
   }, [application_name, resource, duration]);
@@ -41,61 +42,21 @@ export const Extension = (props: any) => {
       {!isLoading && !hasMetrics && <p>No metrics to display</p>}
       {!isLoading && hasMetrics && (
         <div className="application-metrics__MetricsDurationSelector">
-          <a
-            href={`${loc}`}
-            className={`application-metrics__MetricsDuration ${
-              duration === "24h" ? "active" : ""
-            }`}
-            onClick={(e) => {
-              updateDuration(e, "24h");
-            }}
-          >
-            1 day
-          </a>
-          <a
-            href={`${loc}`}
-            className={`application-metrics__MetricsDuration ${
-              duration === "12h" ? "active" : ""
-            }`}
-            onClick={(e) => {
-              updateDuration(e, "12h");
-            }}
-          >
-            12 hrs
-          </a>
-          <a
-            href={`${loc}`}
-            className={`application-metrics__MetricsDuration ${
-              duration === "6h" ? "active" : ""
-            }`}
-            onClick={(e) => {
-              updateDuration(e, "6h");
-            }}
-          >
-            6 hrs
-          </a>
-          <a
-            href={`${loc}`}
-            className={`application-metrics__MetricsDuration ${
-              duration === "2h" ? "active" : ""
-            }`}
-            onClick={(e) => {
-              updateDuration(e, "2h");
-            }}
-          >
-            2 hrs
-          </a>
-          <a
-            href={`${loc}`}
-            className={`application-metrics__MetricsDuration ${
-              duration === "1h" ? "active" : ""
-            }`}
-            onClick={(e) => {
-              updateDuration(e, "1h");
-            }}
-          >
-            1 hr
-          </a>
+          {intervals?.length > 0 &&
+            intervals?.map((hasDuration: string) => (
+              <a
+                href={`${loc}`}
+                className={`application-metrics__MetricsDuration ${
+                  duration === hasDuration ? "active" : ""
+                }`}
+                key={hasDuration}
+                onClick={e => {
+                  updateDuration(e, hasDuration);
+                }}
+              >
+                {hasDuration}
+              </a>
+            ))}
         </div>
       )}
       <Metrics
@@ -105,6 +66,7 @@ export const Extension = (props: any) => {
         setHasMetrics={setHasMetrics}
         isLoading={isLoading}
         setIsLoading={setIsLoading}
+        setIntervals={setIntervals}
       />
     </React.Fragment>
   );
@@ -117,7 +79,7 @@ export const component = Extension;
   window?.extensionsAPI?.registerResourceExtension(
     component,
     "*",
-    "*",
+    "Rollout",
     "Metrics",
     { icon: "fa fa-chart-area" }
   );

diff --git a/extensions/resource-metrics/resource-metrics-extention/ui/tslint.json b/extensions/resource-metrics/resource-metrics-extention/ui/tslint.json
@@ -0,0 +1,21 @@
+{
+    "extends": [
+        "tslint:recommended", "tslint-react", "tslint-plugin-prettier", "tslint-config-prettier"
+    ],
+    "jsRules": {},
+    "rules": {
+        "prettier": true,
+        "quotemark": [true, "single"],
+        "no-var-requires": false,
+        "interface-name": false,
+        "jsx-no-multiline-js": false,
+        "object-literal-sort-keys": false,
+        "jsx-alignment": false,
+        "max-line-length": [true, 200],
+        "jsx-no-lambda": false,
+        "array-type": false,
+        "max-classes-per-file": false,
+        "newline-per-chained-call": false
+    },
+    "rulesDirectory": []
+}
diff --git a/server/config.go b/server/config.go
@@ -48,6 +48,7 @@ type Dashboard struct {
 	Tabs         []string `json:"tabs"`
 	Rows         []*Row   `json:"rows"`
 	ProviderType string   `json:"providerType"`
+	Intervals    []string `json:"intervals"`
 }
 
 func (d *Dashboard) getRow(name string) *Row {