Merge pull request #1465 from devtron-labs/feat/catalog-dependencies

feat: Add Resource Catalog for App Overview and replace AppStatus & processDeployedTime

Author: eshankvaish

package.json

@@ -4,7 +4,10 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.43",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.44",
+        "@rjsf/core": "^5.13.3",
+        "@rjsf/utils": "^5.13.3",
+        "@rjsf/validator-ajv8": "^5.13.3",
         "@sentry/browser": "^7.3.1",
         "@sentry/integrations": "^7.3.1",
         "@sentry/tracing": "^7.3.1",

src/assets/img/cluster-redirect.png

@@ -24,6 +24,9 @@ import { ReactComponent as ClusterOverviewIcon } from '../../assets/icons/cluste
 import { MAX_LENGTH_350, SOME_ERROR_MSG } from '../../config/constantMessaging'
 import ConnectingToClusterState from '../ResourceBrowser/ResourceList/ConnectingToClusterState'
 import { EditableTextArea } from '../common/EditableTextArea/EditableTextArea'
+import { importComponentFromFELibrary } from '../common'
+
+const Catalog = importComponentFromFELibrary('Catalog')
 
 function ClusterOverview({
     isSuperAdmin,
@@ -567,12 +570,13 @@ function ClusterOverview({
             return (
                 <div
                     className="pl-20 pt-20 pr-20 dc__column-gap-32 h-100 dc__overflow-auto flexbox flex-justify-center"
-                    style={{ backgroundImage: 'linear-gradient(249deg, #D4E6F7 0%,  var(--N50)50.58%)' }}
+                    style={{ backgroundImage: 'linear-gradient(249deg, #D4E6F7 0%, var(--N0)50.58%)' }}
                 >
                     {renderSideInfoData()}
-                    <div className="dc__mxw-1068 flex-grow-1">
+                    <div className="dc__mxw-1068 flex-grow-1 mw-none">
                         {renderCardDetails()}
                         {renderClusterError()}
+                        {Catalog && <Catalog resourceId={clusterId} resourceType="cluster" />}
                         <GenericDescription
                             isClusterTerminal={true}
                             clusterId={clusterId}

src/components/ClusterNodes/ClusterNodeContainer.tsx

@@ -42,7 +42,6 @@ export const JOB_LIST_HEADERS = {
     RUN_IN_ENVIRONMENT: 'RUN IN ENVIRONMENT'
 }
 
-export const YET_TO_RUN = 'Yet to run'
 export const JOBLIST_EMPTY_STATE_MESSAGING = {
     createJob: 'Create your first job',
     createJobInfoText:

src/components/ClusterNodes/ClusterOverview.tsx

@@ -3,11 +3,11 @@ import { Link } from 'react-router-dom'
 import { ReactComponent as Expand } from '../../../assets/icons/ic-dropdown-filled.svg'
 import { ReactComponent as Settings } from '../../../assets/icons/ic-settings.svg'
 import { ExpandedRowProps, Job, JobCIPipeline } from '../Types'
-import AppStatus from '../../app/AppStatus'
 import './ExpandedRow.scss'
 import { URLS } from '../../../config'
 import { environmentName } from '../Utils'
 import { DEFAULT_ENV } from '../../app/details/triggerView/Constants'
+import { AppStatus } from '@devtron-labs/devtron-fe-common-lib'
 
 export default function ExpandedRow(props: ExpandedRowProps) {
     const handleEditJob = () => {

src/components/Jobs/Constants.ts

@@ -1,12 +1,11 @@
 import React from 'react'
-import { ErrorScreenManager, Progressing } from '@devtron-labs/devtron-fe-common-lib'
+import { AppStatus, ErrorScreenManager, Progressing } from '@devtron-labs/devtron-fe-common-lib'
 import { Pagination } from '../../common'
 import { Link, useHistory, useLocation } from 'react-router-dom'
 import { ReactComponent as Edit } from '../../../assets/icons/ic-settings.svg'
 import { ReactComponent as JobIcon } from '../../../assets/icons/ic-job-node.svg'
 import { ReactComponent as Arrow } from '../../../assets/icons/ic-dropdown-filled.svg'
 import { OrderBy, SortBy } from '../../app/list/types'
-import AppStatus from '../../app/AppStatus'
 import { Job, JobListViewProps } from '../Types'
 import { JobListViewType, JOB_LIST_HEADERS } from '../Constants'
 import ExpandedRow from '../ExpandedRow/ExpandedRow'

src/components/Jobs/ExpandedRow/ExpandedRow.tsx

@@ -2,17 +2,21 @@ import React, { useMemo, useState } from 'react'
 
 import Tippy from '@tippyjs/react'
 import { Link, useHistory } from 'react-router-dom'
-import { useAsync, getRandomColor, GenericEmptyState } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    useAsync,
+    getRandomColor,
+    processDeployedTime,
+    AppStatus,
+    GenericEmptyState,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { ModuleNameMap, URLS } from '../../../config'
-import { processDeployedTime } from '../../common'
 import { ReactComponent as VirtualEnvIcon } from '../../../assets/icons/ic-environment-temp.svg'
 import { ReactComponent as Database } from '../../../assets/icons/ic-env.svg'
 import { ReactComponent as ActivityIcon } from '../../../assets/icons/ic-activity.svg'
 import { ReactComponent as ArrowLineDown } from '../../../assets/icons/ic-arrow-line-down.svg'
 import { ReactComponent as IconForward } from '../../../assets/icons/ic-arrow-forward.svg'
 import { ReactComponent as DockerIcon } from '../../../assets/icons/git/docker.svg'
-import AppStatus from '../AppStatus'
 import { StatusConstants } from '../list-new/Constants'
 import { EMPTY_STATE_STATUS } from '../../../config/constantMessaging'
 import { AppMetaInfo, AppOverviewProps } from '../types'
@@ -138,12 +142,12 @@ export const EnvironmentList = ({
                                                 )}
                                                 <Link
                                                     to={`${URLS.APP}/${appId}/details/${_env.environmentId}/`}
-                                                    className="fs-13 dc__ellipsis-right"
+                                                    className="anchor fs-13 dc__ellipsis-right"
                                                 >
                                                     {_env.environmentName}
                                                 </Link>
                                                 {_env.lastDeployedImage ? (
-                                                    <div className="cn-7 fs-13 flexbox">
+                                                    <div className="cn-7 fs-14 flexbox">
                                                         <Tippy
                                                             content={_env.lastDeployedImage}
                                                             className="default-tt"
@@ -189,7 +193,7 @@ export const EnvironmentList = ({
                                                             </span>
                                                             <span>{_env.lastDeployedBy}</span>
                                                         </span>
-                                                        <Link to={getDeploymentHistoryLink(_env)} className="cursor">
+                                                        <Link to={getDeploymentHistoryLink(_env)} className="anchor cursor">
                                                             {processDeployedTime(_env.lastDeployed, isArgoInstalled)}
                                                         </Link>
                                                     </span>

src/components/Jobs/JobList/JobListView.tsx

@@ -1,13 +1,13 @@
 .app-overview-container {
     display: grid;
-    grid-template-columns: 0 minmax(auto, 1400px);
+    grid-template-columns: 0 minmax(0, 1400px);
     justify-content: center;
     background: linear-gradient(249deg, #D4E6F7 0%, var(--N50) 50.58%);
     overflow: auto;
     transition: grid-template-columns 0.2s ease-out;
 
     &.sidebar-open {
-        grid-template-columns: 300px minmax(auto, 1068px);
+        grid-template-columns: 300px minmax(0, 1068px);
         gap: 32px;
     }