Skip to content

Commit 556fd5c

Browse files
arunjaindevarunjaindev
authored
Merge pull request #981 from devtron-labs/feat/overview-oss
feat: add components for overview section
2 parents c6b52bb + 0053c7c commit 556fd5c

11 files changed

Lines changed: 205 additions & 3 deletions

File tree

‎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-5",
3+
"version": "1.21.0-beta-10",
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/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'

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ButtonComponentType, ButtonProps, IconName } from '@Shared/Components'
2+
import { IconBaseColorType } from '@Shared/types'
3+
4+
export interface SectionEmptyStateProps {
5+
iconColor?: IconBaseColorType
6+
iconName?: IconName
7+
title: string
8+
subtitle?: string
9+
buttonConfig?: ButtonProps<ButtonComponentType>
10+
}
11+
12+
export interface MetricsInfoCardProps {
13+
dataTestId: string
14+
metricTitle: string
15+
metricValue: string
16+
metricUnit?: string
17+
valueOutOf?: string
18+
iconName: IconName
19+
subtitle?: string
20+
tooltipContent: string
21+
redirectionLink?: string
22+
subtitleRedirection?: string
23+
}
24+
25+
export enum ProdNonProdSelectValueTypes {
26+
ALL = 'All',
27+
PRODUCTION = 'Prod',
28+
NON_PRODUCTION = 'Non-Prod',
29+
}

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

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export * from './DataProtectionManagement'
44
export * from './InfrastructureManagement'
55
export * from './Navigation'
66
export * from './SecurityCenter'
7+
export * from './Shared'

0 commit comments

Comments
 (0)