Merge pull request #1176 from porter-dev/0.9.0-update-live-deployment-settings

[0.9.0] [Frontend] Clean an update live deployment settings

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -34,7 +34,6 @@ import useAuth from "shared/auth/useAuth";
 import TitleSection from "components/TitleSection";
 import { integrationList } from "shared/common";
 import DeploymentType from "./DeploymentType";
-import DeployStatus from "./status/DeployStatus";
 import EventsTab from "./events/EventsTab";
 
 type Props = {
@@ -70,9 +69,8 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const [rightTabOptions, setRightTabOptions] = useState<any[]>([]);
   const [leftTabOptions, setLeftTabOptions] = useState<any[]>([]);
   const [saveValuesStatus, setSaveValueStatus] = useState<string>(null);
-  const [forceRefreshRevisions, setForceRefreshRevisions] = useState<boolean>(
-    false
-  );
+  const [forceRefreshRevisions, setForceRefreshRevisions] =
+    useState<boolean>(false);
   const [controllers, setControllers] = useState<
     Record<string, Record<string, any>>
   >({});
@@ -84,19 +82,11 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [isAuthorized] = useAuth();
 
-  const {
-    newWebsocket,
-    openWebsocket,
-    closeAllWebsockets,
-    closeWebsocket,
-  } = useWebsockets();
+  const { newWebsocket, openWebsocket, closeAllWebsockets, closeWebsocket } =
+    useWebsockets();
 
-  const {
-    currentCluster,
-    currentProject,
-    setCurrentError,
-    setCurrentOverlay,
-  } = useContext(Context);
+  const { currentCluster, currentProject, setCurrentError, setCurrentOverlay } =
+    useContext(Context);
 
   // Retrieve full chart data (includes form and values)
   const getChartData = async (chart: ChartType) => {
@@ -368,7 +358,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
           return (
             <Placeholder>
               <Loading />
-              <DeployStatus chart={chart} />
             </Placeholder>
           );
         }

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventsTab.tsx

@@ -28,7 +28,7 @@ type Props = {
   currentChart: ChartType;
 };
 
-const REFRESH_TIME = 1000; // SHOULD BE MADE HIGHER!
+const REFRESH_TIME = 15000;
 
 const EventsTab: React.FunctionComponent<Props> = (props) => {
   const { currentCluster, currentProject } = useContext(Context);

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

@@ -1,136 +0,0 @@
-import React, { useEffect, useState, useContext } from "react";
-import api from "shared/api";
-import { Context } from "shared/Context";
-import { ChartType } from "../../../../../shared/types";
-import { filter } from "d3-array";
-import { render } from "react-dom";
-
-const REFRESH_TIME = 1000; // SHOULD BE MADE HIGHER!
-
-interface Event {
-  event_id: string;
-  index: number;
-  info: string;
-  name: string;
-  status: number;
-  time: number;
-}
-
-interface Props {
-  chart: ChartType;
-}
-
-const DeployStatus: React.FC<Props> = (props) => {
-  const [shouldRequest, setShouldRequest] = useState(true);
-  const [eventData, setEventData] = useState<Event[][]>([]); // most recent event is first
-  const { currentCluster, currentProject } = useContext(Context);
-
-  // sort by time, ensure sequences are monotonically increasing by time, collapse by id
-  const filterData = (data: Event[]) => {
-    data = data.sort((a, b) => a.time - b.time);
-
-    if (data.length == 0) return;
-
-    let seq: Event[][] = [];
-    let cur: Event[] = [data[0]];
-
-    for (let i = 1; i < data.length; ++i) {
-      if (data[i].index < data[i - 1].index) {
-        seq.push(cur);
-        cur = [];
-      }
-      cur.push(data[i]);
-    }
-    if (cur) seq.push(cur);
-
-    let ret: Event[][] = [];
-    seq.forEach((j) => {
-      j.push({
-        event_id: "",
-        index: 0,
-        info: "",
-        name: "",
-        status: 0,
-        time: 0,
-      });
-
-      let fin: Event[] = [];
-      for (let i = 0; i < j.length - 1; ++i) {
-        if (j[i].event_id != j[i + 1].event_id) {
-          fin.push(j[i]);
-        }
-      }
-      ret.push(fin);
-    });
-
-    setEventData(ret.reverse());
-  };
-
-  useEffect(() => {
-    const id = window.setInterval(() => {
-      if (!shouldRequest) return;
-      setShouldRequest(false);
-      api
-        .getReleaseSteps(
-          "<token>",
-          {
-            cluster_id: currentCluster.id,
-            namespace: props.chart.namespace,
-          },
-          {
-            id: currentProject.id,
-            name: props.chart.name,
-          }
-        )
-        .then((data) => {
-          filterData(data.data);
-        })
-        .catch((err) => {})
-        .finally(() => {
-          setShouldRequest(true);
-        });
-    }, REFRESH_TIME);
-    return () => {
-      window.clearInterval(id);
-    };
-  }, []);
-
-  const renderEvent = (ev: Event) => {
-    return (
-      <tr>
-        <td>{ev.name}</td>
-        <td>{ev.time}</td>
-        <td>
-          {ev.status == 1
-            ? "Success"
-            : ev.status == 2
-            ? "In Progress"
-            : "Failed"}
-        </td>
-      </tr>
-    );
-  };
-
-  return eventData.length ? (
-    <React.Fragment>
-      {eventData.map((group, j) => (
-        <table key={j}>
-          <thead>
-            <td>Name</td>
-            <td>Time</td>
-            <td>Status</td>
-          </thead>
-          <tbody>
-            {group.map((ev) => (
-              <React.Fragment key={ev.index}>{renderEvent(ev)}</React.Fragment>
-            ))}
-          </tbody>
-        </table>
-      ))}
-    </React.Fragment>
-  ) : (
-    <React.Fragment />
-  );
-};
-
-export default DeployStatus;