Refactored StatusSection

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/StatusSection.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 
 import api from "shared/api";
@@ -23,7 +23,7 @@ type StateType = {
   podError: string;
 };
 
-export default class StatusSection extends Component<PropsType, StateType> {
+class StatusSection extends Component<PropsType, StateType> {
   state = {
     logs: [] as string[],
     pods: [] as any[],
@@ -142,6 +142,125 @@ export default class StatusSection extends Component<PropsType, StateType> {
 
 StatusSection.contextType = Context;
 
+const StatusSectionFC: React.FunctionComponent<PropsType> = ({
+  currentChart,
+  selectors,
+}) => {
+  const [selectedPod, setSelectedPod] = useState<any>({});
+  const [controllers, setControllers] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [podError, setPodError] = useState<string>("");
+
+  const { currentProject, currentCluster, setCurrentError } = useContext(
+    Context
+  );
+
+  useEffect(() => {
+    let isSubscribed = true;
+    api
+      .getChartControllers(
+        "<token>",
+        {
+          namespace: currentChart.namespace,
+          cluster_id: currentCluster.id,
+          storage: StorageType.Secret,
+        },
+        {
+          id: currentProject.id,
+          name: currentChart.name,
+          revision: currentChart.version,
+        }
+      )
+      .then((res: any) => {
+        if (!isSubscribed) {
+          return;
+        }
+        let controllers =
+          currentChart.chart.metadata.name == "job"
+            ? res.data[0]?.status.active
+            : res.data;
+        setControllers(controllers);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (!isSubscribed) {
+          return;
+        }
+        setCurrentError(JSON.stringify(err));
+        setControllers([]);
+        setIsLoading(false);
+      });
+    return () => (isSubscribed = false);
+  }, [currentProject, currentCluster, setCurrentError, currentChart]);
+
+  const renderLogs = () => {
+    return (
+      <Logs
+        podError={podError}
+        key={selectedPod?.metadata?.name}
+        selectedPod={selectedPod}
+      />
+    );
+  };
+
+  const renderTabs = () => {
+    return controllers.map((c, i) => {
+      return (
+        <ControllerTab
+          // handle CronJob case
+          key={c.metadata?.uid || c.uid}
+          selectedPod={selectedPod}
+          selectPod={setSelectedPod}
+          selectors={selectors ? [selectors[i]] : null}
+          controller={c}
+          isLast={i === controllers?.length - 1}
+          isFirst={i === 0}
+          setPodError={(x: string) => setPodError(x)}
+        />
+      );
+    });
+  };
+
+  const renderStatusSection = () => {
+    if (isLoading) {
+      return (
+        <NoControllers>
+          <Loading />
+        </NoControllers>
+      );
+    }
+    if (controllers?.length > 0) {
+      return (
+        <Wrapper>
+          <TabWrapper>{renderTabs()}</TabWrapper>
+          {renderLogs()}
+        </Wrapper>
+      );
+    }
+
+    if (currentChart?.chart?.metadata?.name === "job") {
+      return (
+        <NoControllers>
+          <i className="material-icons">category</i>
+          There are no jobs currently running.
+        </NoControllers>
+      );
+    }
+
+    return (
+      <NoControllers>
+        <i className="material-icons">category</i>
+        No objects to display. This might happen while your app is still
+        deploying.
+      </NoControllers>
+    );
+  };
+
+  return <StyledStatusSection>{renderStatusSection()}</StyledStatusSection>;
+};
+
+export default StatusSectionFC;
+
 const TabWrapper = styled.div`
   width: 35%;
   min-width: 250px;