cluster revision selector

dashboard/src/main/home/cluster-dashboard/dashboard/ClusterRevisionSelector.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState, useContext } from "react";
+import styled from "styled-components";
+
+import api from "shared/api";
+import loading from "assets/loading.gif";
+
+import { Context } from "shared/Context";
+import ExpandableSection from "components/ExpandableSection";
+import { 
+  Contract, 
+  Cluster, 
+  EKS, 
+  NodeGroupType, 
+  EnumKubernetesKind, 
+  EnumCloudProvider 
+} from "@porter-dev/api-contracts";
+
+type Props = {};
+
+const ClusterRevisionSelector: React.FC<Props> = ({}) => {
+  const { currentProject } = useContext(Context);
+  const [versions, setVersions] = useState<Contract[]>(null);
+
+  useEffect(() => {
+    api.getContracts(
+      "<token>",
+      {},
+      { project_id: currentProject.id },
+    )
+      .then(({ data }) => {
+        console.log(data);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+   /*
+    setVersions([
+      new Contract({
+        cluster: new Cluster({
+          projectId: currentProject.id,
+          kind: EnumKubernetesKind.EKS,
+          cloudProvider: EnumCloudProvider.AWS,
+          cloudProviderCredentialsId: "0",
+          kindValues: {
+            case: "eksKind",
+            value: new EKS({
+              clusterName: "my-great-eks-cluster",
+              clusterVersion: "v1.24.0",
+              cidrRange: cidrRange || "172.0.0.0/16",
+              region: awsRegion,
+              nodeGroups: [
+                new EKSNodeGroup({
+                  instanceType: "t3.medium",
+                  minInstances: 1,
+                  maxInstances: 5,
+                  nodeGroupType: NodeGroupType.SYSTEM,
+                  isStateful: false,
+                }),
+                new EKSNodeGroup({
+                  instanceType: "t3.large",
+                  minInstances: 1,
+                  maxInstances: 5,
+                  nodeGroupType: NodeGroupType.MONITORING,
+                  isStateful: false,
+                }),
+                new EKSNodeGroup({
+                  instanceType: machineType,
+                  minInstances: minInstances || 1,
+                  maxInstances: maxInstances || 10,
+                  nodeGroupType: NodeGroupType.APPLICATION,
+                  isStateful: false,
+                })
+              ]
+            })
+          },
+        })
+      }),
+    ])
+    */
+  }, []);
+
+  return (
+    <StyledClusterRevisionSelector>
+      <ExpandableSection
+        isInitiallyExpanded={false}
+        Header={(
+          <>
+            <Label>Current version -</Label>
+            No. 1
+          </>
+        )}
+        ExpandedSection={(
+          <RevisionList>
+
+          </RevisionList>
+        )}
+      />
+    </StyledClusterRevisionSelector>
+  );
+};
+
+export default ClusterRevisionSelector;
+
+const Label = styled.div`
+  color: #ffffff66;
+  margin-right: 5px;
+`;
+
+const RevisionList = styled.div`
+  height: 150px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+`;
+
+const StyledClusterRevisionSelector = styled.div`
+  margin-bottom: 22px;
+`;

dashboard/src/main/home/cluster-dashboard/dashboard/Dashboard.tsx

@@ -1,28 +1,27 @@
 import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
+import { useLocation } from "react-router";
 import settings from "assets/settings-centered.svg";
 
-import DashboardHeader from "../DashboardHeader";
+import api from "shared/api";
+import { DetailedIngressError } from "shared/types";
+import { getQueryParam } from "shared/routing";
+import useAuth from "shared/auth/useAuth";
 import { Context } from "shared/Context";
+
+import ClusterRevisionSelector from "./ClusterRevisionSelector";
+import DashboardHeader from "../DashboardHeader";
 import TabSelector from "components/TabSelector";
 import ProvisionerSettings from "components/ProvisionerSettings";
 import ProvisionerStatus from "./ProvisionerStatus";
-import api from "shared/api";
-
 import NodeList from "./NodeList";
-
 import { NamespaceList } from "./NamespaceList";
 import ClusterSettings from "./ClusterSettings";
-import useAuth from "shared/auth/useAuth";
 import Metrics from "./Metrics";
-import { useLocation } from "react-router";
-import { getQueryParam } from "shared/routing";
 
 import CopyToClipboard from "components/CopyToClipboard";
 import Loading from "components/Loading";
 
-import { DetailedIngressError } from "shared/types";
-
 type TabEnum = "nodes" | "settings" | "namespaces" | "metrics" | "incidents" | "configuration";
 
 var tabOptions: {
@@ -186,6 +185,7 @@ export const Dashboard: React.FunctionComponent = () => {
           ) && (
             <ProvisionerStatus />
           )}
+          <ClusterRevisionSelector />
           <TabSelector
             options={currentTabOptions}
             currentTab={currentTab}

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

@@ -325,7 +325,7 @@ class RevisionSection extends Component<PropsType, StateType> {
           <RevisionPreview>
             <i className="material-icons">arrow_drop_down</i>
             {isCurrent
-              ? `Current revision`
+              ? `Current version`
               : `Previewing revision (not deployed)`}{" "}
             - <Revision>No. {this.props.chart.version}</Revision>
           </RevisionPreview>

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/_RevisionList.tsx

@@ -148,7 +148,7 @@ const _RevisionList = ({
         >
           <RevisionPreview>
             {currentRevision.id === latestRevision.id
-              ? `Current revision`
+              ? `Current version`
               : `Previewing revision (not deployed)`}{" "}
             - <Revision>No. {currentRevision.id}</Revision>
             <i className="material-icons">arrow_drop_down</i>

dashboard/src/shared/api.tsx

@@ -897,7 +897,7 @@ const createContract = baseApi<
 });
 
 const getContracts = baseApi<
-  {},
+  { cluster_id?: number },
   { project_id: number }
 >("GET", ({ project_id }) => {
   return `/api/projects/${project_id}/contracts`;
@@ -921,9 +921,7 @@ const provisionInfra = baseApi<
 });
 
 const updateInfra = baseApi<
-  {
-    values?: any;
-  },
+  { values?: any },
   {
     project_id: number;
     infra_id: number;
@@ -950,9 +948,7 @@ const retryCreateInfra = baseApi<
 });
 
 const retryDeleteInfra = baseApi<
-  {
-    values?: any;
-  },
+  { values?: any },
   {
     project_id: number;
     infra_id: number;