wip

dashboard/src/main/home/app-dashboard/expanded-app/metrics/MetricsChart2.tsx

@@ -18,103 +18,106 @@ import { MetricNormalizer } from "./utils";
 import { Metric } from "./types";
 
 export const resolutions: { [range: string]: string } = {
-    "1H": "1s",
-    "6H": "15s",
-    "1D": "15s",
-    "1M": "5h",
+  "1H": "1s",
+  "6H": "15s",
+  "1D": "15s",
+  "1M": "5h",
 };
 
 export const secondsBeforeNow: { [range: string]: number } = {
-    "1H": 60 * 60,
-    "6H": 60 * 60 * 6,
-    "1D": 60 * 60 * 24,
-    "1M": 60 * 60 * 24 * 30,
+  "1H": 60 * 60,
+  "6H": 60 * 60 * 6,
+  "1D": 60 * 60 * 24,
+  "1M": 60 * 60 * 24 * 30,
 };
 
 type PropsType = {
-    metric: Metric;
+  metric: Metric;
 };
 
 const MetricsChart2: React.FunctionComponent<PropsType> = ({
-    metric,
+  metric,
 }) => {
+  const renderAggregatedMetric = () => {
+    if (metric)
+      return null;
+  }
 
-    const renderAggregatedMetric = () => {
+  const renderNginxMetric = () => {
+    return null;
+  }
 
-    }
-    return (
-        <StyledMetricsChart>
-            <MetricsHeader>
-                <Flex>
-                    <MetricSelector>
-                        <MetricsLabel>{metric.label}</MetricsLabel>
-                    </MetricSelector>
-                </Flex>
-            </MetricsHeader>
-            {(data.length === 0 && Object.keys(areaData).length === 0) && isLoading === 0 && (
-                <Message>
-                    No data available yet.
-                    <Highlight color={"#8590ff"} onClick={getMetrics}>
-                        <i className="material-icons">autorenew</i>
-                        Refresh
-                    </Highlight>
-                </Message>
+  return (
+    <StyledMetricsChart>
+      <MetricsHeader>
+        <Flex>
+          <MetricSelector>
+            <MetricsLabel>{metric.label}</MetricsLabel>
+          </MetricSelector>
+        </Flex>
+      </MetricsHeader>
+      {metric.type === "nginx:status" && renderNginxMetric()}
+      {metric.type !== "nginx:status" && renderAggregatedMetric()}
+      {(data.length === 0 && Object.keys(areaData).length === 0) && (
+        <Message>
+          No data available yet.
+        </Message>
+      )}
+      {data.length > 0 && (
+        <>
+          {showHpaToggle &&
+            ["cpu", "memory"].includes(selectedMetric) && (
+              <CheckboxRow
+                toggle={() => setHpaEnabled((prev: any) => !prev)}
+                checked={hpaEnabled}
+                label="Show Autoscaling Threshold"
+              />
             )}
-            {data.length > 0 && (
-                <>
-                    {showHpaToggle &&
-                        ["cpu", "memory"].includes(selectedMetric) && (
-                            <CheckboxRow
-                                toggle={() => setHpaEnabled((prev: any) => !prev)}
-                                checked={hpaEnabled}
-                                label="Show Autoscaling Threshold"
-                            />
-                        )}
-                    <ParentSize>
-                        {({ width, height }) => (
-                            <AreaChart
-                                dataKey={selectedMetricLabel}
-                                aggregatedData={aggregatedData}
-                                isAggregated={isAggregated}
-                                data={data}
-                                hpaData={hpaData}
-                                hpaEnabled={
-                                    hpaEnabled && ["cpu", "memory"].includes(selectedMetric)
-                                }
-                                width={width}
-                                height={height - 10}
-                                resolution={selectedRange}
-                                margin={{ top: 40, right: -40, bottom: 0, left: 50 }}
-                            />
-                        )}
-                    </ParentSize>
-                    <RowWrapper>
-                        <AggregatedDataLegend data={data} hideAvg={isAggregated} />
-                    </RowWrapper>
-                </>
+          <ParentSize>
+            {({ width, height }) => (
+              <AreaChart
+                dataKey={selectedMetricLabel}
+                aggregatedData={aggregatedData}
+                isAggregated={isAggregated}
+                data={data}
+                hpaData={hpaData}
+                hpaEnabled={
+                  hpaEnabled && ["cpu", "memory"].includes(selectedMetric)
+                }
+                width={width}
+                height={height - 10}
+                resolution={selectedRange}
+                margin={{ top: 40, right: -40, bottom: 0, left: 50 }}
+              />
             )}
-
-            {Object.keys(areaData).length > 0 && isLoading === 0 && (
-                <>
-                    <ParentSize>
-                        {({ width, height }) => (
-                            <StackedAreaChart
-                                dataKey={selectedMetricLabel}
-                                data={areaData}
-                                width={width}
-                                height={height - 10}
-                                resolution={selectedRange}
-                                margin={{ top: 40, right: -40, bottom: 0, left: 50 }}
-                            />
-                        )}
-                    </ParentSize>
-                    <RowWrapper>
-                        <StatusCodeDataLegend />
-                    </RowWrapper>
-                </>
+          </ParentSize>
+          <RowWrapper>
+            <AggregatedDataLegend data={data} hideAvg={isAggregated} />
+          </RowWrapper>
+        </>
+      )}
+
+      {Object.keys(areaData).length > 0 && isLoading === 0 && (
+        <>
+          <ParentSize>
+            {({ width, height }) => (
+              <StackedAreaChart
+                dataKey={selectedMetricLabel}
+                data={areaData}
+                width={width}
+                height={height - 10}
+                resolution={selectedRange}
+                margin={{ top: 40, right: -40, bottom: 0, left: 50 }}
+              />
             )}
-        </StyledMetricsChart>
-    );
+          </ParentSize>
+          <RowWrapper>
+            <StatusCodeDataLegend />
+          </RowWrapper>
+        </>
+      )}
+    </StyledMetricsChart>
+  );
 };
 
 export default MetricsChart2;

dashboard/src/main/home/app-dashboard/expanded-app/metrics/MetricsSection.tsx

@@ -38,7 +38,6 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
   appName,
   serviceName,
 }) => {
-  const [pods, setPods] = useState([]);
   const [controllerOptions, setControllerOptions] = useState([]);
   const [selectedController, setSelectedController] = useState<any>();
   const [ingressOptions, setIngressOptions] = useState([]);
@@ -271,7 +270,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
         selectedMetricLabel="Number of replicas"
         selectedPod="All"
         selectedRange={selectedRange}
-        pods={pods}
+        pods={[]}
       />
     ) : null
   };
@@ -316,7 +315,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
         selectedMetricLabel="CPU Utilization (vCPUs)"
         selectedPod="All"
         selectedRange={selectedRange}
-        pods={pods}
+        pods={[]}
       />
       <MetricsChart
         currentChart={currentChart}
@@ -326,7 +325,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
         selectedMetricLabel="RAM Utilization (Mi)"
         selectedPod="All"
         selectedRange={selectedRange}
-        pods={pods}
+        pods={[]}
       />
       <MetricsChart
         currentChart={currentChart}
@@ -336,7 +335,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
         selectedMetricLabel="Network Received Bytes (Ki)"
         selectedPod="All"
         selectedRange={selectedRange}
-        pods={pods}
+        pods={[]}
       />
       <MetricsChart
         currentChart={currentChart}
@@ -346,7 +345,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
         selectedMetricLabel="Nginx Status Codes"
         selectedPod="All"
         selectedRange={selectedRange}
-        pods={pods}
+        pods={[]}
       />
       {renderHpaChart()}
       {currentChart?.chart?.metadata?.name == "ingress-nginx" && (
@@ -358,7 +357,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
           selectedMetricLabel="5XX Error Percentage"
           selectedPod="All"
           selectedRange={selectedRange}
-          pods={pods}
+          pods={[]}
         />
       )}
       {metrics.map((metric: Metric, i: number) => {
@@ -372,7 +371,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
             selectedMetricLabel={metric.label}
             selectedPod={"All"}
             selectedRange={selectedRange}
-            pods={pods}
+            pods={[]}
           />
         );
       })}