eslint

dashboard/src/components/ProvisionerStatus.tsx

@@ -6,27 +6,27 @@ import loading from "assets/loading.gif";
 import styled from "styled-components";
 
 type Props = {
-  modules : TFModule[]
+  modules: TFModule[];
 };
 
 export interface TFModule {
-  id: number
-  kind: string
-  resources: TFResource[]
+  id: number;
+  kind: string;
+  resources: TFResource[];
 }
 
 export interface TFResource {
-  addr: string,
-  provisioned: boolean,
-  error: string,
+  addr: string;
+  provisioned: boolean;
+  error: string;
 }
 
-const nameMap : { [key: string]: string } = {
-  "eks": "Elastic Kubernetes Service (EKS)",
-  "ecr": "Elastic Container Registry (ECR)",
-  "doks": "DigitalOcean Kubernetes Service (DOKS)",
-  "docr": "DigitalOcean Container Registry (DOCR)",
-}
+const nameMap: { [key: string]: string } = {
+  eks: "Elastic Kubernetes Service (EKS)",
+  ecr: "Elastic Container Registry (ECR)",
+  doks: "DigitalOcean Kubernetes Service (DOKS)",
+  docr: "DigitalOcean Container Registry (DOCR)",
+};
 
 const ProvisionerStatus: React.FC<Props> = (props) => {
   const { modules } = props;
@@ -55,62 +55,63 @@ const ProvisionerStatus: React.FC<Props> = (props) => {
 
   const renderModules = () => {
     return modules.map((val) => {
-      const totalResources = val.resources?.length
+      const totalResources = val.resources?.length;
       const provisionedResources = val.resources?.filter((resource) => {
-        return resource.provisioned
-      }).length
+        return resource.provisioned;
+      }).length;
 
-      var errors : string[] = []
+      var errors: string[] = [];
 
-      const hasError = val.resources?.filter((resource) => {
-        if (resource.error !== "") {
-          errors.push(resource.error)
-        }
+      const hasError =
+        val.resources?.filter((resource) => {
+          if (resource.error !== "") {
+            errors.push(resource.error);
+          }
 
-        return resource.error !== ""
-      }).length > 0
+          return resource.error !== "";
+        }).length > 0;
 
-      const width = 100 * (provisionedResources / (totalResources * 1.0))
+      const width = 100 * (provisionedResources / (totalResources * 1.0));
 
-      var error = null
+      var error = null;
 
       if (hasError) {
         error = errors.map((error) => {
-          return <ExpandedError>{error}</ExpandedError>
-        })
+          return <ExpandedError>{error}</ExpandedError>;
+        });
       }
 
-      var loadingFill 
-      var status 
+      var loadingFill;
+      var status;
 
       if (hasError) {
-        loadingFill = <LoadingFill status="error" width={width + "%"} />
-        status = renderStatus("error")
+        loadingFill = <LoadingFill status="error" width={width + "%"} />;
+        status = renderStatus("error");
       } else if (width == 100) {
-        loadingFill = <LoadingFill status="successful" width={width + "%"} />
-        status = renderStatus("successful")
+        loadingFill = <LoadingFill status="successful" width={width + "%"} />;
+        status = renderStatus("successful");
       } else {
-        loadingFill = <LoadingFill status="loading" width={width + "%"} />
-        status = renderStatus("loading")
+        loadingFill = <LoadingFill status="loading" width={width + "%"} />;
+        status = renderStatus("loading");
       }
 
-      return <InfraObject key={val.id}>
-        <InfraHeader>
-          {status}
-          {nameMap[val.kind]}
-        </InfraHeader>
-        <LoadingBar>
-          {loadingFill}
-        </LoadingBar>
-        {error}
-      </InfraObject>
-    })
-  }
+      return (
+        <InfraObject key={val.id}>
+          <InfraHeader>
+            {status}
+            {nameMap[val.kind]}
+          </InfraHeader>
+          <LoadingBar>{loadingFill}</LoadingBar>
+          {error}
+        </InfraObject>
+      );
+    });
+  };
 
   return (
     <StyledProvisionerStatus>
-        {renderModules()}
-        {/* <InfraObject>
+      {renderModules()}
+      {/* <InfraObject>
           <InfraHeader>
             {renderStatus("loading")}
             Elastic Kubernetes Service (EKS)
@@ -147,11 +148,14 @@ const ExpandedError = styled.div`
   margin-top: 17px;
 `;
 
-const LoadingFill = styled.div<{ width: string, status: string }>`
-  width: ${props => props.width};
-  background: ${props => props.status === "successful" ? "rgb(56, 168, 138)" : (
-    props.status === "error" ? "#fcba03" : "linear-gradient(to right, #8ce1ff, #616FEE)"
-  )};
+const LoadingFill = styled.div<{ width: string; status: string }>`
+  width: ${(props) => props.width};
+  background: ${(props) =>
+    props.status === "successful"
+      ? "rgb(56, 168, 138)"
+      : props.status === "error"
+      ? "#fcba03"
+      : "linear-gradient(to right, #8ce1ff, #616FEE)"};
   height: 100%;
   background-size: 250% 100%;
   animation: moving-gradient 2s infinite;
@@ -183,7 +187,7 @@ const StatusIcon = styled.div<{ successful?: boolean }>`
     font-size: 18px;
     margin-right: 10px;
     float: left;
-    color: ${props => props.successful ? "rgb(56, 168, 138)" : "#fcba03"};
+    color: ${(props) => (props.successful ? "rgb(56, 168, 138)" : "#fcba03")};
   }
 `;
 
@@ -221,4 +225,4 @@ const InfraHeader = styled.div`
   font-weight: 500;
   display: flex;
   align-items: center;
-`;
+`;