feat: add components for overview section

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.21.0-pre-5",
+    "version": "1.21.0-beta-10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

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

@@ -0,0 +1,128 @@
+import { ReactNode, useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import { motion } from 'framer-motion'
+
+import { ConditionalWrap } from '@Common/Helper'
+import { Tooltip } from '@Common/Tooltip'
+import { Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components'
+
+import { MetricsInfoCardProps, SectionEmptyStateProps } from './types'
+
+export const SectionEmptyState = ({
+    iconName = 'ic-priority-medium-fill',
+    iconColor,
+    title,
+    subtitle,
+    buttonConfig,
+}: SectionEmptyStateProps) => (
+    <div className="flex column p-16 dc__gap-12">
+        <Icon name={iconName} size={24} color={iconColor} />
+        <div className="flexbox-col dc__gap-2 fs-13 lh-20">
+            <span className="text-center fw-6 cn-9">{title}</span>
+            {subtitle && <span className="text-center fw-4 cn-8">{subtitle}</span>}
+        </div>
+        {buttonConfig && <Button {...buttonConfig} />}
+    </div>
+)
+
+const navLinkWrap = (redirectionLink: string) => (children: ReactNode) => (
+    <NavLink to={redirectionLink}>{children}</NavLink>
+)
+
+export const MetricsInfoLoadingCard = ({ withSubtitle }: { withSubtitle?: boolean }) => (
+    <div className="flexbox-col br-8 bg__primary border__secondary">
+        <div className="flexbox dc__gap-12 p-16 dc__content-space">
+            <div className="flexbox-col">
+                <span className="h-12 mt-4 mb-4 w-40 shimmer" />
+                <span className="h-24 mt-6 mb-6 w-40 shimmer" />
+            </div>
+            <div className="h-24 w-24 m-6 shimmer" />
+        </div>
+        {withSubtitle && (
+            <div className="border__secondary--top px-16 py-8">
+                <span className="w-100px h-18 shimmer" />
+            </div>
+        )}
+    </div>
+)
+
+export const MetricsInfoCard = ({
+    dataTestId,
+    metricTitle,
+    metricValue,
+    metricUnit,
+    valueOutOf,
+    iconName,
+    subtitle,
+    redirectionLink,
+    tooltipContent,
+    subtitleRedirection,
+}: MetricsInfoCardProps) => {
+    const [isHovering, setIsHovering] = useState(false)
+
+    const handleHoverStart = () => setIsHovering(true)
+    const handleHoverEnd = () => setIsHovering(false)
+
+    return (
+        <ConditionalWrap condition={!!redirectionLink} wrap={navLinkWrap(redirectionLink)}>
+            <motion.div
+                data-testid={dataTestId}
+                onHoverStart={handleHoverStart}
+                onHoverEnd={handleHoverEnd}
+                className={`flexbox-col br-8 bg__primary border__secondary cn-9 ${isHovering ? 'shadow__card--10' : ''}`}
+            >
+                <div className="flexbox dc__gap-12 p-16 dc__content-space">
+                    <div className="flexbox-col">
+                        <Tooltip alwaysShowTippyOnHover content={tooltipContent}>
+                            <span className={`fs-13 fw-4 lh-20 ${isHovering ? 'dc__underline-dotted' : ''}`}>
+                                {metricTitle}
+                            </span>
+                        </Tooltip>
+                        <div className="flexbox dc__gap-4 dc__align-baseline font-ibm-plex-sans">
+                            <span className="fs-24 fw-6 lh-1-5">{metricValue}</span>
+                            {valueOutOf && (
+                                <span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">/ {valueOutOf}</span>
+                            )}
+                            {metricUnit && (
+                                <span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">{metricUnit}</span>
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        {redirectionLink && isHovering ? (
+                            <Button
+                                dataTestId={`redirect-to-${metricTitle}`}
+                                icon={<Icon name="ic-arrow-square-out" color="B500" />}
+                                ariaLabel="redirect"
+                                showAriaLabelInTippy={false}
+                                style={ButtonStyleType.default}
+                                variant={ButtonVariantType.borderLess}
+                            />
+                        ) : (
+                            <Icon size={36} color={null} name={iconName} />
+                        )}
+                    </div>
+                </div>
+                {subtitle && (
+                    <div className="border__secondary--top px-16 py-8">
+                        <ConditionalWrap condition={!!subtitleRedirection} wrap={navLinkWrap(subtitleRedirection)}>
+                            <span className={`fs-13 fw-4 lh-1-5 ${subtitleRedirection ? 'cb-5' : 'cn-7'}`}>
+                                {subtitle}
+                            </span>
+                        </ConditionalWrap>
+                    </div>
+                )}
+            </motion.div>
+        </ConditionalWrap>
+    )
+}
+
+export const LoadingDonutChart = () => (
+    <div className="flex p-20 dc__gap-20 h-200">
+        <div className="dc__border-radius-50-per h-150 w-150 shimmer" />
+        <div className="flexbox-col dc__gap-8">
+            <span className="shimmer w-80px" />
+            <span className="shimmer w-80px" />
+        </div>
+    </div>
+)

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

@@ -0,0 +1,27 @@
+const OVERVIEW_DEFAULT_PAGE_SIZE = {
+    SMALL: 5,
+    MEDIUM: 10,
+    LARGE: 20,
+}
+
+export const OVERVIEW_PAGE_SIZE_OPTIONS = [
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.MEDIUM,
+        selected: true,
+    },
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.LARGE,
+        selected: false,
+    },
+]
+
+export const OVERVIEW_PAGE_SIZE_OPTIONS_SMALL = [
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.SMALL,
+        selected: true,
+    },
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.MEDIUM,
+        selected: false,
+    },
+]

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

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './constants'
+export { type MetricsInfoCardProps, ProdNonProdSelectValueTypes } from './types'

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

@@ -0,0 +1,29 @@
+import { ButtonComponentType, ButtonProps, IconName } from '@Shared/Components'
+import { IconBaseColorType } from '@Shared/types'
+
+export interface SectionEmptyStateProps {
+    iconColor?: IconBaseColorType
+    iconName?: IconName
+    title: string
+    subtitle?: string
+    buttonConfig?: ButtonProps<ButtonComponentType>
+}
+
+export interface MetricsInfoCardProps {
+    dataTestId: string
+    metricTitle: string
+    metricValue: string
+    metricUnit?: string
+    valueOutOf?: string
+    iconName: IconName
+    subtitle?: string
+    tooltipContent: string
+    redirectionLink?: string
+    subtitleRedirection?: string
+}
+
+export enum ProdNonProdSelectValueTypes {
+    ALL = 'All',
+    PRODUCTION = 'Prod',
+    NON_PRODUCTION = 'Non-Prod',
+}

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

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/index.ts

@@ -4,3 +4,4 @@ export * from './DataProtectionManagement'
 export * from './InfrastructureManagement'
 export * from './Navigation'
 export * from './SecurityCenter'
+export * from './Shared'

src/Shared/Components/Icon/Icon.tsx

@@ -64,6 +64,7 @@ import { ReactComponent as ICCaretLeft } from '@IconsV2/ic-caret-left.svg'
 import { ReactComponent as ICCaretRight } from '@IconsV2/ic-caret-right.svg'
 import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg'
 import { ReactComponent as ICChartLineUp } from '@IconsV2/ic-chart-line-up.svg'
+import { ReactComponent as ICChartRepo } from '@IconsV2/ic-chart-repo.svg'
 import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots.svg'
 import { ReactComponent as ICChatCircleOnline } from '@IconsV2/ic-chat-circle-online.svg'
 import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg'
@@ -129,6 +130,7 @@ import { ReactComponent as ICError } from '@IconsV2/ic-error.svg'
 import { ReactComponent as ICExitFullscreen } from '@IconsV2/ic-exit-fullscreen.svg'
 import { ReactComponent as ICExpandRightSm } from '@IconsV2/ic-expand-right-sm.svg'
 import { ReactComponent as ICExpandSm } from '@IconsV2/ic-expand-sm.svg'
+import { ReactComponent as ICExternalLink } from '@IconsV2/ic-external-link.svg'
 import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg'
 import { ReactComponent as ICFastForward } from '@IconsV2/ic-fast-forward.svg'
 import { ReactComponent as ICFile } from '@IconsV2/ic-file.svg'
@@ -378,6 +380,7 @@ export const iconMap = {
     'ic-caret-right': ICCaretRight,
     'ic-cd': ICCd,
     'ic-chart-line-up': ICChartLineUp,
+    'ic-chart-repo': ICChartRepo,
     'ic-chat-circle-dots': ICChatCircleDots,
     'ic-chat-circle-online': ICChatCircleOnline,
     'ic-check-all': ICCheckAll,
@@ -443,6 +446,7 @@ export const iconMap = {
     'ic-exit-fullscreen': ICExitFullscreen,
     'ic-expand-right-sm': ICExpandRightSm,
     'ic-expand-sm': ICExpandSm,
+    'ic-external-link': ICExternalLink,
     'ic-failure': ICFailure,
     'ic-fast-forward': ICFastForward,
     'ic-file-code': ICFileCode,