Skip to content

Commit 2d58eb2

Browse files
AbhishekA1509AbhishekA1509
committed
Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-common-lib into fix/ai-fixes
2 parents fb38dd4 + 9214845 commit 2d58eb2

38 files changed

Lines changed: 1072 additions & 245 deletions

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.21.0-pre-2",
3+
"version": "1.22.0-pre-0",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/IconV2/ic-chart-repo.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/Assets/IconV2/ic-external-link.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/Common/Constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,7 @@ export const ROUTES = {
225225
LICENSE_DATA: 'license/data',
226226
ENV: 'env',
227227
APP_METADATA: 'app-metadata',
228+
RESOURCE_CONFLICTS_LIST: 'app/:appId/cd-pipeline/:pipelineId/history/:wfrId/helm-ownership-conflicts',
228229
} as const
229230

230231
export enum KEY_VALUE {

‎src/Pages-Devtron-2.0/Navigation/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './types'

‎src/Pages-Devtron-2.0/Navigation/types.ts‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { customEnv, Never } from 'src'
2+
3+
import { IconsProps } from '@Shared/Components'
4+
5+
export type NavigationItemID =
6+
| 'application-management-overview'
7+
| 'application-management-devtron-applications'
8+
| 'application-management-application-groups'
9+
| 'application-management-bulk-edit'
10+
| 'application-management-application-templates'
11+
| 'application-management-projects'
12+
| 'application-management-configurations'
13+
| 'application-management-policies'
14+
| 'infrastructure-management-overview'
15+
| 'infrastructure-management-applications'
16+
| 'infrastructure-management-chart-store'
17+
| 'infrastructure-management-resource-browser'
18+
| 'infrastructure-management-resource-watcher'
19+
| 'infrastructure-management-catalog-framework'
20+
| 'software-release-management-overview'
21+
| 'software-release-management-release-hub'
22+
| 'software-release-management-tenants'
23+
| 'cost-visibility-overview'
24+
| 'cost-visibility-cost-breakdown'
25+
| 'cost-visibility-configurations'
26+
| 'security-center-overview'
27+
| 'security-center-security-vulnerabilities'
28+
| 'security-center-security-enablement'
29+
| 'security-center-security-policy'
30+
| 'automation-and-enablement-jobs'
31+
| 'automation-and-enablement-alerting'
32+
| 'automation-and-enablement-incident-response'
33+
| 'automation-and-enablement-api-portal'
34+
| 'automation-and-enablement-runbook-automation'
35+
| 'global-configuration-sso-login-services'
36+
| 'global-configuration-host-urls'
37+
| 'global-configuration-external-links'
38+
| 'global-configuration-chart-repository'
39+
| 'global-configuration-cluster-and-environments'
40+
| 'global-configuration-container-oci-registry'
41+
| 'global-configuration-authorization'
42+
| 'data-protection-overview'
43+
| 'data-protection-backup-and-schedule'
44+
| 'data-protection-restores'
45+
| 'data-protection-backup-repositories'
46+
| 'data-protection-backup-locations'
47+
| 'data-protection-history-and-logs'
48+
49+
export type NavigationSubMenuItemID =
50+
| 'application-management-configurations-gitops'
51+
| 'application-management-configurations-git-accounts'
52+
| 'application-management-configurations-deployment-charts'
53+
| 'application-management-configurations-notifications'
54+
| 'application-management-configurations-catalog-frameworks'
55+
| 'application-management-configurations-scoped-variables'
56+
| 'application-management-configurations-build-infra'
57+
| 'application-management-policies-deployment-window'
58+
| 'application-management-policies-approval-policy'
59+
| 'application-management-policies-plugin-policy'
60+
| 'application-management-policies-pull-image-digest'
61+
| 'application-management-policies-tag-policy'
62+
| 'application-management-policies-filter-conditions'
63+
| 'application-management-policies-image-promotion'
64+
| 'application-management-policies-lock-deployment-configuration'
65+
| 'cost-visibility-cost-breakdown-clusters'
66+
| 'cost-visibility-cost-breakdown-environments'
67+
| 'cost-visibility-cost-breakdown-projects'
68+
| 'cost-visibility-cost-breakdown-applications'
69+
| 'global-configuration-authorization-user-permissions'
70+
| 'global-configuration-authorization-permission-groups'
71+
| 'global-configuration-authorization-api-tokens'
72+
73+
export type NavigationRootItemID =
74+
| 'application-management'
75+
| 'infrastructure-management'
76+
| 'software-release-management'
77+
| 'cost-visibility'
78+
| 'security-center'
79+
| 'automation-and-enablement'
80+
| 'data-protection-management'
81+
| 'global-configuration'
82+
83+
export type CommonNavigationItemType = {
84+
title: string
85+
dataTestId: string
86+
icon: IconsProps['name']
87+
href: string
88+
disabled?: boolean
89+
keywords?: string[]
90+
forceHideEnvKey?: keyof customEnv
91+
hideNav?: boolean
92+
isAvailableInEA?: boolean
93+
}
94+
95+
export type NavigationItemType = Pick<
96+
CommonNavigationItemType,
97+
'dataTestId' | 'title' | 'disabled' | 'keywords' | 'hideNav' | 'forceHideEnvKey' | 'isAvailableInEA'
98+
> & {
99+
id: NavigationItemID
100+
} & (
101+
| (Pick<CommonNavigationItemType, 'icon' | 'href'> & {
102+
hasSubMenu?: false
103+
subItems?: never
104+
})
105+
| (Never<Pick<CommonNavigationItemType, 'icon' | 'href'>> & {
106+
hasSubMenu: true
107+
subItems: (Omit<CommonNavigationItemType, 'icon'> & { id: NavigationSubMenuItemID })[]
108+
})
109+
)
110+
111+
export interface NavigationGroupType
112+
extends Pick<CommonNavigationItemType, 'title' | 'icon' | 'hideNav' | 'forceHideEnvKey' | 'isAvailableInEA'> {
113+
id: NavigationRootItemID
114+
items: NavigationItemType[]
115+
disabled?: boolean
116+
}

‎src/Pages-Devtron-2.0/Shared/Overview/components.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { ReactNode, useState } from 'react'
2+
import { NavLink } from 'react-router-dom'
3+
import { motion } from 'framer-motion'
4+
5+
import { ConditionalWrap } from '@Common/Helper'
6+
import { Tooltip } from '@Common/Tooltip'
7+
import { Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components'
8+
9+
import { MetricsInfoCardProps, SectionEmptyStateProps } from './types'
10+
11+
export const SectionEmptyState = ({
12+
iconName = 'ic-priority-medium-fill',
13+
iconColor,
14+
title,
15+
subtitle,
16+
buttonConfig,
17+
}: SectionEmptyStateProps) => (
18+
<div className="flex column p-16 dc__gap-12">
19+
<Icon name={iconName} size={24} color={iconColor} />
20+
<div className="flexbox-col dc__gap-2 fs-13 lh-20">
21+
<span className="text-center fw-6 cn-9">{title}</span>
22+
{subtitle && <span className="text-center fw-4 cn-8">{subtitle}</span>}
23+
</div>
24+
{buttonConfig && <Button {...buttonConfig} />}
25+
</div>
26+
)
27+
28+
const navLinkWrap = (redirectionLink: string) => (children: ReactNode) => (
29+
<NavLink to={redirectionLink}>{children}</NavLink>
30+
)
31+
32+
export const MetricsInfoLoadingCard = ({ withSubtitle }: { withSubtitle?: boolean }) => (
33+
<div className="flexbox-col br-8 bg__primary border__secondary">
34+
<div className="flexbox dc__gap-12 p-16 dc__content-space">
35+
<div className="flexbox-col">
36+
<span className="h-12 mt-4 mb-4 w-40 shimmer" />
37+
<span className="h-24 mt-6 mb-6 w-40 shimmer" />
38+
</div>
39+
<div className="h-24 w-24 m-6 shimmer" />
40+
</div>
41+
{withSubtitle && (
42+
<div className="border__secondary--top px-16 py-8">
43+
<span className="w-100px h-18 shimmer" />
44+
</div>
45+
)}
46+
</div>
47+
)
48+
49+
export const MetricsInfoCard = ({
50+
dataTestId,
51+
metricTitle,
52+
metricValue,
53+
metricUnit,
54+
valueOutOf,
55+
iconName,
56+
subtitle,
57+
redirectionLink,
58+
tooltipContent,
59+
subtitleRedirection,
60+
}: MetricsInfoCardProps) => {
61+
const [isHovering, setIsHovering] = useState(false)
62+
63+
const handleHoverStart = () => setIsHovering(true)
64+
const handleHoverEnd = () => setIsHovering(false)
65+
66+
return (
67+
<ConditionalWrap condition={!!redirectionLink} wrap={navLinkWrap(redirectionLink)}>
68+
<motion.div
69+
data-testid={dataTestId}
70+
onHoverStart={handleHoverStart}
71+
onHoverEnd={handleHoverEnd}
72+
className={`flexbox-col br-8 bg__primary border__secondary cn-9 ${isHovering ? 'shadow__card--10' : ''}`}
73+
>
74+
<div className="flexbox dc__gap-12 p-16 dc__content-space">
75+
<div className="flexbox-col">
76+
<Tooltip alwaysShowTippyOnHover content={tooltipContent}>
77+
<span className={`fs-13 fw-4 lh-20 ${isHovering ? 'dc__underline-dotted' : ''}`}>
78+
{metricTitle}
79+
</span>
80+
</Tooltip>
81+
<div className="flexbox dc__gap-4 dc__align-baseline font-ibm-plex-sans">
82+
<span className="fs-24 fw-6 lh-1-5">{metricValue}</span>
83+
{valueOutOf && (
84+
<span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">/ {valueOutOf}</span>
85+
)}
86+
{metricUnit && (
87+
<span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">{metricUnit}</span>
88+
)}
89+
</div>
90+
</div>
91+
<div>
92+
{redirectionLink && isHovering ? (
93+
<Button
94+
dataTestId={`redirect-to-${metricTitle}`}
95+
icon={<Icon name="ic-arrow-square-out" color="B500" />}
96+
ariaLabel="redirect"
97+
showAriaLabelInTippy={false}
98+
style={ButtonStyleType.default}
99+
variant={ButtonVariantType.borderLess}
100+
/>
101+
) : (
102+
<Icon size={36} color={null} name={iconName} />
103+
)}
104+
</div>
105+
</div>
106+
{subtitle && (
107+
<div className="border__secondary--top px-16 py-8">
108+
<ConditionalWrap condition={!!subtitleRedirection} wrap={navLinkWrap(subtitleRedirection)}>
109+
<span className={`fs-13 fw-4 lh-1-5 ${subtitleRedirection ? 'cb-5' : 'cn-7'}`}>
110+
{subtitle}
111+
</span>
112+
</ConditionalWrap>
113+
</div>
114+
)}
115+
</motion.div>
116+
</ConditionalWrap>
117+
)
118+
}
119+
120+
export const LoadingDonutChart = () => (
121+
<div className="flex p-20 dc__gap-20 h-200">
122+
<div className="dc__border-radius-50-per h-150 w-150 shimmer" />
123+
<div className="flexbox-col dc__gap-8">
124+
<span className="shimmer w-80px" />
125+
<span className="shimmer w-80px" />
126+
</div>
127+
</div>
128+
)

‎src/Pages-Devtron-2.0/Shared/Overview/constants.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const OVERVIEW_DEFAULT_PAGE_SIZE = {
2+
SMALL: 5,
3+
MEDIUM: 10,
4+
LARGE: 20,
5+
}
6+
7+
export const OVERVIEW_PAGE_SIZE_OPTIONS = [
8+
{
9+
value: OVERVIEW_DEFAULT_PAGE_SIZE.MEDIUM,
10+
selected: true,
11+
},
12+
{
13+
value: OVERVIEW_DEFAULT_PAGE_SIZE.LARGE,
14+
selected: false,
15+
},
16+
]
17+
18+
export const OVERVIEW_PAGE_SIZE_OPTIONS_SMALL = [
19+
{
20+
value: OVERVIEW_DEFAULT_PAGE_SIZE.SMALL,
21+
selected: true,
22+
},
23+
{
24+
value: OVERVIEW_DEFAULT_PAGE_SIZE.MEDIUM,
25+
selected: false,
26+
},
27+
]

‎src/Pages-Devtron-2.0/Shared/Overview/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './components'
2+
export * from './constants'
3+
export { type MetricsInfoCardProps, ProdNonProdSelectValueTypes } from './types'

0 commit comments

Comments
 (0)