Refactors, deployment screen filters

gimlet-io · Apr 2, 2024 · dc7a265 · dc7a265
1 parent 3d44e00
commit dc7a265
Show file tree

Hide file tree

Showing 22 changed files with 216 additions and 175 deletions.
diff --git a/web/dashboard/package-lock.json b/web/dashboard/package-lock.json
diff --git a/web/dashboard/package.json b/web/dashboard/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@craco/craco": "7.1.0",
     "@headlessui/react": "^1.7.18",
-    "@heroicons/react": "^1.0.6",
+    "@heroicons/react": "^2.1.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",

diff --git a/web/dashboard/src/components/commits/commitEvents.js b/web/dashboard/src/components/commits/commitEvents.js
@@ -1,4 +1,4 @@
-import { DocumentIcon, CogIcon, CloudIcon } from '@heroicons/react/solid'
+import { DocumentIcon, CogIcon, CloudIcon } from '@heroicons/react/24/solid'
 import { format, formatDistance } from "date-fns";
 
 export function CommitEvents(props) {

diff --git a/web/dashboard/src/components/commits/commits.js b/web/dashboard/src/components/commits/commits.js
@@ -50,7 +50,7 @@ export function Commits(props) {
 
   const envNames = envs.map(env => env["name"]);
   for (let env of envs) {
-    env.isOnline = connectedAgents[env.name].isOnline
+    env.isOnline = isOnline(connectedAgents, env.name)
   }
 
   const commitWidgets = commits.map((commit, idx, ar) =>
@@ -107,6 +107,14 @@ export function Commits(props) {
   )
 }
 
+function isOnline(onlineEnvs, singleEnv) {
+  return Object.keys(onlineEnvs)
+    .map(env => onlineEnvs[env])
+    .some(onlineEnv => {
+      return onlineEnv.name === singleEnv.name
+    })
+};
+
 const CommitWidget = (props) => {
   const { owner, repo, repoName, commit, last, idx, commitsRef, envNames, scmUrl, tenant, connectedAgents, deployHandler, gimletClient, envs } = props
 

diff --git a/web/dashboard/src/components/deployWidget/deployWidget.jsx b/web/dashboard/src/components/deployWidget/deployWidget.jsx
@@ -1,10 +1,10 @@
 import {Menu, Transition} from '@headlessui/react'
-import {ChevronDownIcon} from '@heroicons/react/solid'
+import {ChevronDownIcon} from '@heroicons/react/24/solid'
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import logo from "!file-loader!./logo.svg";
 import { usePostHog } from 'posthog-js/react'
 import { useState, Fragment } from 'react';
-import { FilterIcon } from '@heroicons/react/solid'
+import { FunnelIcon } from '@heroicons/react/24/solid'
 
 export default function DeployWidget(props) {
   const {deployTargets, deployHandler, sha, repo } = props;
@@ -60,7 +60,7 @@ export default function DeployWidget(props) {
                     type="search"
                   />
                   <div className="absolute left-0 inset-y-0 flex items-center">
-                    <FilterIcon className="ml-2 h-5 w-5 text-gray-400" aria-hidden="true" />
+                    <FunnelIcon className="ml-2 h-5 w-5 text-gray-400" aria-hidden="true" />
                   </div>
                 </div>
               }

diff --git a/web/dashboard/src/components/dropdown/dropdown.js b/web/dashboard/src/components/dropdown/dropdown.js
@@ -1,7 +1,7 @@
 import {Fragment, useEffect, useState} from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import {Listbox, Transition} from '@headlessui/react'
-import {CheckIcon, SelectorIcon} from '@heroicons/react/solid'
+import {CheckIcon, ChevronUpDownIcon} from '@heroicons/react/24/solid'
 
 export default function Dropdown(props) {
   const {items, value, changeHandler} = props;
@@ -33,7 +33,7 @@ export default function Dropdown(props) {
               className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
               <span className="block truncate">{value}</span>
               <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                <SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true"/>
+                <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true"/>
               </span>
             </Listbox.Button>
 

diff --git a/web/dashboard/src/components/env/env.js b/web/dashboard/src/components/env/env.js
@@ -1,102 +1,54 @@
-import React, { Component } from "react";
+import { useEffect } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import ServiceDetail from "../serviceDetail/serviceDetail";
-import { InformationCircleIcon } from '@heroicons/react/solid'
+import { InformationCircleIcon } from '@heroicons/react/20/solid';
 
-export class Env extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isClosed: localStorage.getItem([this.props.env.name]) === "true"
-    }
-  }
-
-  componentDidMount() {
-    if (this.props.env.name === this.props.envFromParams) {
-      this.setState({ isClosed: false });
-    }
-  }
-
-  render() {
-    const { env, repoRolloutHistory, envConfigs, navigateToConfigEdit, linkToDeployment, newConfig, rollback, owner, repoName, fileInfos, pullRequests, releaseHistorySinceDays, gimletClient, store, deploymentFromParams, scmUrl, history, alerts } = this.props;
+export function Env(props) {
+  const { env, repoRolloutHistory, envConfigs, navigateToConfigEdit, linkToDeployment, newConfig, rollback, owner, repoName, fileInfos, pullRequests, releaseHistorySinceDays, gimletClient, store, deploymentFromParams, scmUrl, history, alerts } = props;
 
-    const renderedServices = renderServices(env.stacks, envConfigs, env.name, repoRolloutHistory, navigateToConfigEdit, linkToDeployment, rollback, owner, repoName, fileInfos, releaseHistorySinceDays, gimletClient, store, deploymentFromParams, scmUrl, env.builtIn, alerts);
-
-    return (
-      <div>
-        <h4 className="relative flex items-stretch select-none text-xl font-medium capitalize leading-tight text-gray-900 my-4">
-          {env.name}
-          <span title={env.isOnline ? "Connected" : "Disconnected"}>
-            <svg className={(env.isOnline ? "text-green-400" : "text-red-400") + " inline fill-current ml-1"} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20">
-              <path
-                d="M0 14v1.498c0 .277.225.502.502.502h.997A.502.502 0 0 0 2 15.498V14c0-.959.801-2.273 2-2.779V9.116C1.684 9.652 0 11.97 0 14zm12.065-9.299l-2.53 1.898c-.347.26-.769.401-1.203.401H6.005C5.45 7 5 7.45 5 8.005v3.991C5 12.55 5.45 13 6.005 13h2.327c.434 0 .856.141 1.203.401l2.531 1.898a3.502 3.502 0 0 0 2.102.701H16V4h-1.832c-.758 0-1.496.246-2.103.701zM17 6v2h3V6h-3zm0 8h3v-2h-3v2z"
-              />
-            </svg>
-          </span>
-          <svg
-            onClick={() => {
-              localStorage.setItem(this.props.env.name, !this.state.isClosed);
-              this.setState((prevState) => {
-                return {
-                  isClosed: !prevState.isClosed
-                }
-              })
-            }}
+  const renderedServices = renderServices(env.stacks, envConfigs, env.name, repoRolloutHistory, navigateToConfigEdit, linkToDeployment, rollback, owner, repoName, fileInfos, releaseHistorySinceDays, gimletClient, store, deploymentFromParams, scmUrl, env.builtIn, alerts);
 
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-6 w-6 cursor-pointer absolute right-0"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
+  return (
+    <div>
+      <h4 className="relative flex items-stretch select-none text-xl font-medium capitalize leading-tight text-gray-900 my-4">
+        {env.name}
+        <span title={env.isOnline ? "Connected" : "Disconnected"}>
+          <svg className={(env.isOnline ? "text-green-400" : "text-red-400") + " inline fill-current ml-1"} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20">
             <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d={
-                this.state.isClosed
-                  ? "M9 5l7 7-7 7"
-                  : "M19 9l-7 7-7-7"
-              }
+              d="M0 14v1.498c0 .277.225.502.502.502h.997A.502.502 0 0 0 2 15.498V14c0-.959.801-2.273 2-2.779V9.116C1.684 9.652 0 11.97 0 14zm12.065-9.299l-2.53 1.898c-.347.26-.769.401-1.203.401H6.005C5.45 7 5 7.45 5 8.005v3.991C5 12.55 5.45 13 6.005 13h2.327c.434 0 .856.141 1.203.401l2.531 1.898a3.502 3.502 0 0 0 2.102.701H16V4h-1.832c-.758 0-1.496.246-2.103.701zM17 6v2h3V6h-3zm0 8h3v-2h-3v2z"
             />
           </svg>
-        </h4>
-        {this.state.isClosed ? null : (
+        </span>
+      </h4>
+      {renderPullRequests(pullRequests)}
+      {!env.isOnline && connectEnvCard(history, env.name)}
+      { env.isOnline &&
+        <div className="space-y-4">
+        {renderedServices.length === 10 &&
+          <span className="text-xs text-blue-700">Displaying at most 10 application configurations per environment.</span>
+        }
+        { env.isOnline && renderedServices.length !== 0 &&
           <>
-            {renderPullRequests(pullRequests)}
-            {!env.isOnline && connectEnvCard(history, env.name)}
-            { env.isOnline &&
-            <div className="bg-stone-900 rounded-lg p-4">
-              <div className="space-y-4">
-              {renderedServices.length === 10 &&
-                <span className="text-xs text-blue-700">Displaying at most 10 application configurations per environment.</span>
-              }
-              { env.isOnline && renderedServices.length !== 0 &&
-                <>
-                  {renderedServices}
-                  <button
-                  title="New deployment configuration"
-                    onClick={() => {
-                      const newAppName = `${repoName}-${uuidv4().slice(0, 4)}`
-                      newConfig(env.name, newAppName)
-                    }}
-                    type="button"
-                    className="inline-block rounded-full p-2 uppercase leading-normal text-white bg-gray-500 hover:bg-gray-400 transition duration-150 ease-in-out">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="w-4 h-4">
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                    </svg>
-                  </button>
-                </>
-              }
-              { env.isOnline && renderedServices.length === 0 && emptyStateDeployThisRepo(newConfig, env.name, repoName) }
-              </div>
-            </div>
-            }
+            {renderedServices}
+            {/* <button
+            title="New deployment configuration"
+              onClick={() => {
+                const newAppName = `${repoName}-${uuidv4().slice(0, 4)}`
+                newConfig(env.name, newAppName)
+              }}
+              type="button"
+              className="inline-block rounded-full p-2 uppercase leading-normal text-white bg-gray-500 hover:bg-gray-400 transition duration-150 ease-in-out">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="w-4 h-4">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+              </svg>
+            </button> */}
           </>
-        )}
-      </div>
-    )
-  }
+        }
+        { env.isOnline && renderedServices.length === 0 && emptyStateDeployThisRepo(newConfig, env.name, repoName) }
+        </div>
+      }
+    </div>
+  )
 }
 
 function renderServices(

diff --git a/web/dashboard/src/components/nav/nav.jsx b/web/dashboard/src/components/nav/nav.jsx
@@ -2,7 +2,7 @@ import React, {Fragment} from 'react';
 import { useState } from 'react';
 import './nav.css';
 import {Disclosure, Menu, Transition} from '@headlessui/react'
-import {MenuIcon, XIcon} from '@heroicons/react/outline'
+import {Bars3Icon, XMarkIcon} from '@heroicons/react/20/solid'
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import logo from "!file-loader!./logo.svg";
 import DefaultProfilePicture from '../../../src/views/profile/defaultProfilePicture.png';
@@ -160,9 +160,9 @@ export default function Nav (props) {
                   className="bg-white inline-flex items-center justify-center p-2 rounded-md text-neutral-400 hover:text-neutral-500 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
-                    <XIcon className="block h-6 w-6" aria-hidden="true"/>
+                    <XMarkIcon className="block h-6 w-6" aria-hidden="true"/>
                   ) : (
-                    <MenuIcon className="block h-6 w-6" aria-hidden="true"/>
+                    <Bars3Icon className="block h-6 w-6" aria-hidden="true"/>
                   )}
                 </Disclosure.Button>
               </div>

diff --git a/web/dashboard/src/components/repoCard/repoCard.jsx b/web/dashboard/src/components/repoCard/repoCard.jsx
@@ -1,6 +1,5 @@
-import React from "react";
-import {StarIcon} from "@heroicons/react/outline";
-import {StarIcon as SolidStarIcon} from "@heroicons/react/solid";
+import { StarIcon } from "@heroicons/react/20/solid";
+import { StarIcon as StarIconOutline } from "@heroicons/react/24/outline";
 
 function RepoCard(props) {
   const {name, services, navigateToRepo, favorite, favoriteHandler} = props;
@@ -49,13 +48,13 @@ function RepoCard(props) {
     <div className="relative">
       <div className="absolute top-0 right-0 m-6">
         {favorite &&
-        <SolidStarIcon
+        <StarIcon
           className="h-4 w-4 text-green-400 hover:text-neutral-400 cursor-pointer"
           onClick={() => favoriteHandler(name)}
         />
         }
         {!favorite &&
-        <StarIcon
+        <StarIconOutline
           className="h-4 w-4 text-neutral-400 hover:text-green-400 cursor-pointer"
           onClick={() => favoriteHandler(name)}
         />

diff --git a/web/dashboard/src/components/rolloutHistory/rolloutHistory.js b/web/dashboard/src/components/rolloutHistory/rolloutHistory.js
@@ -71,14 +71,14 @@ export class RolloutHistory extends Component {
 
     if (releaseHistorySinceDays && releasesCount === 0) {
       return (
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-neutral-500">
           No releases in the past {releaseHistorySinceDays} days.
         </div>)
     }
 
     return (
       <div className="space-y-4">
-        <div className="grid grid-cols-10 pb-6">
+        <div className="grid grid-cols-10 pb-6 -ml-1">
           {markers}
         </div>
         {open &&
@@ -102,8 +102,8 @@ function Commit(props) {
   return (
     <div className="md:flex text-xs">
       <div className="md:flex-initial space-y-0.5 mt-2">
-      {isReleaseStatus && <div className="font-semibold text-gray-700"> <Emoji text={gitopsRepo} /></div>}
-        <div className="text-gray-700">{version.message && <Emoji text={version.message} />}</div>
+      {isReleaseStatus && <div className="font-semibold text-neutral-700"> <Emoji text={gitopsRepo} /></div>}
+        <div className="text-neutral-700">{version.message && <Emoji text={version.message} />}</div>
         <div className="flex">
           {version.author &&
             <img
@@ -114,7 +114,7 @@ function Commit(props) {
               height="20"
             />
           }
-          <div className="text-gray-600">
+          <div className="text-neutral-600">
             <span className="font-semibold">{version.authorName}</span>
             <a
               className="ml-1"
@@ -142,9 +142,9 @@ at ${exactDate}`;
 
   return (
     <div key={nanoid()} className={`h-8 ${border} cursor-pointer`} title={title} onClick={() => toggle()}>
-      <div className={`h-2 ml-1 md:mx-1 ${color} rounded`}></div>
+      <div className={`h-2 md:mx-1 ${color} rounded`}></div>
       {showDate &&
-        <div className="hidden lg:block mx-2 mt-2 text-xs text-gray-400">
+        <div className="hidden lg:block mx-2 mt-2 text-xs text-neutral-400">
           <span>{dateLabel} ago</span>
         </div>
       }
@@ -191,21 +191,21 @@ export function rolloutWidget(idx, arr, exactDate, dateLabel, rollback, env, app
     >
       <div className="relative">
         {idx !== 0 &&
-          <span className="absolute top-8 left-4 -ml-px h-full w-0.5 bg-gray-300" aria-hidden="true"></span>
+          <span className="absolute top-8 left-4 -ml-px h-full w-0.5 bg-neutral-300" aria-hidden="true"></span>
         }
         <div className="relative flex items-start space-x-3">
           <div className="relative">
             <img
-              className={`h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center ring-4 ${ringColor}`}
+              className={`h-8 w-8 rounded-full bg-neutral-400 flex items-center justify-center ring-4 ${ringColor}`}
               src={`${scmUrl}/${rollout.triggeredBy}.png?size=128`}
               onError={(e) => { e.target.src = defaultProfilePicture }}
               alt={rollout.triggeredBy} />
           </div>
           <div className="min-w-0 flex-1">
             <div className="text-sm space-y-0.5">
-              <p className="font-semibold text-gray-700">{rollout.triggeredBy}</p>
-              {!rollback && <p className="font-medium text-gray-700">{rollout.app}</p>}
-              <p className="text-gray-700">
+              <p className="font-semibold text-neutral-700">{rollout.triggeredBy}</p>
+              {!rollback && <p className="font-medium text-neutral-700">{rollout.app}</p>}
+              <p className="text-neutral-700">
                 <span>Deployed</span>
                 { !builtInEnv &&
                 <a
@@ -221,7 +221,7 @@ export function rolloutWidget(idx, arr, exactDate, dateLabel, rollback, env, app
                   <span className="ml-1" title={exactDate}>{dateLabel} ago</span>
                 }
               </p>
-              <div className="text-gray-600">
+              <div className="text-neutral-600">
                 <span title={exactGitopsCommitCreatedDate} >
                   {status} {gitopsCommitCreatedDateLabel} ago, {!rollout.gitopsCommitStatusDesc ? "commit is not applied yet." : rollout.gitopsCommitStatusDesc}
                 </span>