chore: move content from fe-lib

package.json

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

src/Common/Constants.ts

@@ -223,6 +223,12 @@ export const ROUTES = {
     LICENSE_DATA: 'license/data',
     ENV: 'env',
     APP_METADATA: 'app-metadata',
+    APPS_OVERVIEW: 'overview/apps-overview',
+    WORKFLOW_OVERVIEW: 'overview/workflow-overview',
+    DORA_METRICS: 'overview/dora-metrics',
+    BUILD_DEPLOYMENT_ACTIVITY: 'overview/build-deployment-activity',
+    BUILD_DEPLOYMENT_ACTIVITY_DETAILED: 'overview/build-deployment-activity/detailed',
+    PIPELINE_INSIGHTS: 'overview/pipeline-insights',
 } as const
 
 export enum KEY_VALUE {

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

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

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

@@ -0,0 +1,116 @@
+import { customEnv, Never } from 'src'
+
+import { IconsProps } from '@Shared/Components'
+
+export type NavigationItemID =
+    | 'application-management-overview'
+    | 'application-management-devtron-applications'
+    | 'application-management-application-groups'
+    | 'application-management-bulk-edit'
+    | 'application-management-application-templates'
+    | 'application-management-projects'
+    | 'application-management-configurations'
+    | 'application-management-policies'
+    | 'infrastructure-management-overview'
+    | 'infrastructure-management-applications'
+    | 'infrastructure-management-chart-store'
+    | 'infrastructure-management-resource-browser'
+    | 'infrastructure-management-resource-watcher'
+    | 'infrastructure-management-catalog-framework'
+    | 'software-release-management-overview'
+    | 'software-release-management-release-hub'
+    | 'software-release-management-tenants'
+    | 'cost-visibility-overview'
+    | 'cost-visibility-cost-breakdown'
+    | 'cost-visibility-configurations'
+    | 'security-center-overview'
+    | 'security-center-security-vulnerabilities'
+    | 'security-center-security-enablement'
+    | 'security-center-security-policy'
+    | 'automation-and-enablement-jobs'
+    | 'automation-and-enablement-alerting'
+    | 'automation-and-enablement-incident-response'
+    | 'automation-and-enablement-api-portal'
+    | 'automation-and-enablement-runbook-automation'
+    | 'global-configuration-sso-login-services'
+    | 'global-configuration-host-urls'
+    | 'global-configuration-external-links'
+    | 'global-configuration-chart-repository'
+    | 'global-configuration-cluster-and-environments'
+    | 'global-configuration-container-oci-registry'
+    | 'global-configuration-authorization'
+    | 'data-protection-overview'
+    | 'data-protection-backup-and-schedule'
+    | 'data-protection-restores'
+    | 'data-protection-backup-repositories'
+    | 'data-protection-backup-locations'
+    | 'data-protection-history-and-logs'
+
+export type NavigationSubMenuItemID =
+    | 'application-management-configurations-gitops'
+    | 'application-management-configurations-git-accounts'
+    | 'application-management-configurations-deployment-charts'
+    | 'application-management-configurations-notifications'
+    | 'application-management-configurations-catalog-frameworks'
+    | 'application-management-configurations-scoped-variables'
+    | 'application-management-configurations-build-infra'
+    | 'application-management-policies-deployment-window'
+    | 'application-management-policies-approval-policy'
+    | 'application-management-policies-plugin-policy'
+    | 'application-management-policies-pull-image-digest'
+    | 'application-management-policies-tag-policy'
+    | 'application-management-policies-filter-conditions'
+    | 'application-management-policies-image-promotion'
+    | 'application-management-policies-lock-deployment-configuration'
+    | 'cost-visibility-cost-breakdown-clusters'
+    | 'cost-visibility-cost-breakdown-environments'
+    | 'cost-visibility-cost-breakdown-projects'
+    | 'cost-visibility-cost-breakdown-applications'
+    | 'global-configuration-authorization-user-permissions'
+    | 'global-configuration-authorization-permission-groups'
+    | 'global-configuration-authorization-api-tokens'
+
+export type NavigationRootItemID =
+    | 'application-management'
+    | 'infrastructure-management'
+    | 'software-release-management'
+    | 'cost-visibility'
+    | 'security-center'
+    | 'automation-and-enablement'
+    | 'data-protection-management'
+    | 'global-configuration'
+
+export type CommonNavigationItemType = {
+    title: string
+    dataTestId: string
+    icon: IconsProps['name']
+    href: string
+    disabled?: boolean
+    keywords?: string[]
+    forceHideEnvKey?: keyof customEnv
+    hideNav?: boolean
+    isAvailableInEA?: boolean
+}
+
+export type NavigationItemType = Pick<
+    CommonNavigationItemType,
+    'dataTestId' | 'title' | 'disabled' | 'keywords' | 'hideNav' | 'forceHideEnvKey' | 'isAvailableInEA'
+> & {
+    id: NavigationItemID
+} & (
+        | (Pick<CommonNavigationItemType, 'icon' | 'href'> & {
+              hasSubMenu?: false
+              subItems?: never
+          })
+        | (Never<Pick<CommonNavigationItemType, 'icon' | 'href'>> & {
+              hasSubMenu: true
+              subItems: (Omit<CommonNavigationItemType, 'icon'> & { id: NavigationSubMenuItemID })[]
+          })
+    )
+
+export interface NavigationGroupType
+    extends Pick<CommonNavigationItemType, 'title' | 'icon' | 'hideNav' | 'forceHideEnvKey' | 'isAvailableInEA'> {
+    id: NavigationRootItemID
+    items: NavigationItemType[]
+    disabled?: boolean
+}

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

@@ -0,0 +1,43 @@
+import { CHART_COLORS } from '@Shared/Components/Charts'
+import { useTheme } from '@Shared/Providers/ThemeProvider'
+
+import { ChartTooltipProps } from './types'
+
+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>
+)
+
+export const ChartTooltip = ({ title, label, value, chartColorKey }: ChartTooltipProps) => {
+    const { appTheme } = useTheme()
+    const backgroundColor = CHART_COLORS[appTheme][chartColorKey]
+    return (
+        <div className="dc__mxw-200 flexbox-col dc__gap-8 py-6 px-10 fw-4">
+            {title && <span className="fw-6">{title}</span>}
+            <div className="flexbox dc__gap-4">
+                <div className="py-4">
+                    <div className="icon-dim-12 br-2" style={{ backgroundColor }} />
+                </div>
+                <div className="flexbox-col dc__gap-12">
+                    <span>
+                        {label}:&nbsp;{value}
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export const ChartColorIndicator = ({ title, backgroundColor }: { title: string; backgroundColor: string }) => (
+    <div className="flexbox dc__gap-4">
+        <div className="py-4">
+            <div className="icon-dim-12 br-2" style={{ backgroundColor }} />
+        </div>
+        <span>{title}</span>
+    </div>
+)

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

@@ -0,0 +1,66 @@
+import { SortingOrder } from '@Common/Constants'
+import { SelectPickerOptionType } from '@Shared/Components'
+
+import { RelativeTimeWindow, TIME_WINDOW } from './types'
+
+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,
+    },
+]
+
+export const RELATIVE_TIME_WINDOW_LABEL_MAP: Record<RelativeTimeWindow, string> = {
+    [RelativeTimeWindow.LAST_7_DAYS]: 'Last 7 Days',
+    [RelativeTimeWindow.LAST_30_DAYS]: 'Last 30 Days',
+    [RelativeTimeWindow.LAST_90_DAYS]: 'Last 90 Days',
+}
+
+export const RELATIVE_TIME_WINDOW_SELECT_OPTIONS: SelectPickerOptionType<RelativeTimeWindow>[] = (
+    Object.keys(RELATIVE_TIME_WINDOW_LABEL_MAP) as RelativeTimeWindow[]
+).map((value) => ({
+    label: RELATIVE_TIME_WINDOW_LABEL_MAP[value],
+    value,
+}))
+
+export const SORT_ORDER_OPTIONS: SelectPickerOptionType<SortingOrder>[] = [
+    { label: 'Low to high', value: SortingOrder.ASC },
+    { label: 'High to low', value: SortingOrder.DESC },
+]
+
+export const TIME_WINDOW_LABEL_MAP: Record<TIME_WINDOW, string> = {
+    [TIME_WINDOW.TODAY]: 'Today',
+    [TIME_WINDOW.THIS_WEEK]: 'This week',
+    [TIME_WINDOW.THIS_MONTH]: 'This month',
+    [TIME_WINDOW.THIS_QUARTER]: 'This quarter',
+    [TIME_WINDOW.LAST_WEEK]: 'Last week',
+    [TIME_WINDOW.LAST_MONTH]: 'Last month',
+}
+
+export const TIME_WINDOW_SELECT_OPTIONS: SelectPickerOptionType<TIME_WINDOW>[] = (
+    Object.keys(TIME_WINDOW_LABEL_MAP) as TIME_WINDOW[]
+).map((value) => ({
+    label: TIME_WINDOW_LABEL_MAP[value],
+    value,
+}))

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

@@ -0,0 +1,4 @@
+export * from './components'
+export * from './constants'
+export * from './types'
+export * from './utils'

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

@@ -0,0 +1,29 @@
+import { ChartColorKey } from '@Shared/Components/Charts/types'
+
+export enum ProdNonProdSelectValueTypes {
+    ALL = 'All',
+    PRODUCTION = 'Prod',
+    NON_PRODUCTION = 'Non-Prod',
+}
+
+export enum RelativeTimeWindow {
+    LAST_7_DAYS = 'last7Days',
+    LAST_30_DAYS = 'last30Days',
+    LAST_90_DAYS = 'last90Days',
+}
+
+export interface ChartTooltipProps {
+    title?: string
+    label: string
+    value: string | number
+    chartColorKey: ChartColorKey
+}
+
+export enum TIME_WINDOW {
+    TODAY = 'today',
+    THIS_WEEK = 'week',
+    THIS_MONTH = 'month',
+    THIS_QUARTER = 'quarter',
+    LAST_WEEK = 'lastWeek',
+    LAST_MONTH = 'lastMonth',
+}

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

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+
+import { DATE_TIME_FORMATS } from '@Common/Constants'
+
+export const parseTimestampToDate = (timestamp: string): string => {
+    const dateObj = dayjs(timestamp)
+    return dateObj.format(DATE_TIME_FORMATS.DD_MMM)
+}

src/Pages-Devtron-2.0/index.ts

@@ -2,4 +2,6 @@ export * from './ApplicationManagement'
 export * from './CostVisibility'
 export * from './DataProtectionManagement'
 export * from './InfrastructureManagement'
+export * from './Navigation'
 export * from './SecurityCenter'
+export * from './Shared'

src/Shared/Components/InfoBlock/InfoBlock.component.tsx

@@ -98,7 +98,7 @@ const InfoBlock = ({
     if (layout === 'row') {
         return (
             <div className={`${baseContainerClass} flexbox dc__gap-16`}>
-                <div className="flex left dc__gap-8 flex-grow-1">
+                <div className="flexbox dc__gap-8 flex-grow-1">
                     {renderIcon()}
                     {renderContent()}
                 </div>

src/Shared/Components/SelectPicker/SelectPickerTextArea.component.tsx

@@ -183,10 +183,8 @@ export const SelectPickerTextArea = ({
                 selectRef.current.inputRef.selectionEnd = selectionStart + 1
             })
 
-            return
+            updateValueIfOnlyDirty()
         }
-
-        updateValueIfOnlyDirty()
     }
 
     return (