chore: move content from fe-lib

Author: Amrit Kashyap Borah

src/Common/Constants.ts

@@ -232,6 +232,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/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

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

src/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)
+}