From dc7a2654d04ce9257833736ef48d739ddb1761e7 Mon Sep 17 00:00:00 2001 From: Laszlo Fogas Date: Tue, 2 Apr 2024 12:09:58 +0200 Subject: [PATCH] Refactors, deployment screen filters --- web/dashboard/package-lock.json | 8 +- web/dashboard/package.json | 2 +- .../src/components/commits/commitEvents.js | 2 +- .../src/components/commits/commits.js | 10 +- .../components/deployWidget/deployWidget.jsx | 6 +- .../src/components/dropdown/dropdown.js | 4 +- web/dashboard/src/components/env/env.js | 130 ++++++------------ web/dashboard/src/components/nav/nav.jsx | 6 +- .../src/components/repoCard/repoCard.jsx | 9 +- .../rolloutHistory/rolloutHistory.js | 26 ++-- .../serviceDetail/serviceDetail.jsx | 40 +++--- web/dashboard/src/popUpWindow.js | 2 +- .../src/views/envConfig/envConfig.jsx | 4 +- .../src/views/environment/category.js | 2 +- .../src/views/environment/environment.jsx | 2 +- web/dashboard/src/views/footer/footer.jsx | 2 +- web/dashboard/src/views/pulse/pulse.jsx | 4 +- web/dashboard/src/views/repo/commitView.jsx | 2 +- web/dashboard/src/views/repo/repo.jsx | 112 +++++++++++++-- .../src/views/repo/tenantSelector.jsx | 2 +- .../src/views/repositories/repositories.jsx | 14 +- web/dashboard/src/views/settings/settings.jsx | 2 +- 22 files changed, 216 insertions(+), 175 deletions(-) diff --git a/web/dashboard/package-lock.json b/web/dashboard/package-lock.json index eb6e8e542..6963ebe06 100644 --- a/web/dashboard/package-lock.json +++ b/web/dashboard/package-lock.json @@ -10,7 +10,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", @@ -2660,9 +2660,9 @@ } }, "node_modules/@heroicons/react": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz", - "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz", + "integrity": "sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==", "peerDependencies": { "react": ">= 16" } diff --git a/web/dashboard/package.json b/web/dashboard/package.json index 6d89031b3..ce9313078 100644 --- 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 index 543c50fc9..0f6bf4cd7 100644 --- 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 index f3ca5fa72..cbeb11988 100644 --- 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 index a7f7215c5..f91eec301 100644 --- 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" />
-
} diff --git a/web/dashboard/src/components/dropdown/dropdown.js b/web/dashboard/src/components/dropdown/dropdown.js index 14a309c04..d6d1885e7 100644 --- 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"> {value} - diff --git a/web/dashboard/src/components/env/env.js b/web/dashboard/src/components/env/env.js index 09dfeaa4b..6ed6a84a2 100644 --- 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 ( -
-

- {env.name} - - - - - - { - 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 ( +
+

+ {env.name} + + -

- {this.state.isClosed ? null : ( + +

+ {renderPullRequests(pullRequests)} + {!env.isOnline && connectEnvCard(history, env.name)} + { env.isOnline && +
+ {renderedServices.length === 10 && + Displaying at most 10 application configurations per environment. + } + { env.isOnline && renderedServices.length !== 0 && <> - {renderPullRequests(pullRequests)} - {!env.isOnline && connectEnvCard(history, env.name)} - { env.isOnline && -
-
- {renderedServices.length === 10 && - Displaying at most 10 application configurations per environment. - } - { env.isOnline && renderedServices.length !== 0 && - <> - {renderedServices} - - - } - { env.isOnline && renderedServices.length === 0 && emptyStateDeployThisRepo(newConfig, env.name, repoName) } -
-
- } + {renderedServices} + {/* */} - )} -
- ) - } + } + { env.isOnline && renderedServices.length === 0 && emptyStateDeployThisRepo(newConfig, env.name, repoName) } +
+ } + + ) } function renderServices( diff --git a/web/dashboard/src/components/nav/nav.jsx b/web/dashboard/src/components/nav/nav.jsx index fd0a29cbe..132fec269 100644 --- 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"> Open main menu {open ? ( -