Merge pull request #907 from devtron-labs/feat/cost-config

feat: cost config

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -141,9 +141,10 @@ const cdMaterialListModal = ({
         }
 
         const isConsumedNonApprovedImage =
-            !isExceptionUser && isApprovalConfigured &&
+            !isExceptionUser &&
+            isApprovalConfigured &&
             (!material.userApprovalMetadata ||
-            material.userApprovalMetadata.approvalRuntimeState !== ApprovalRuntimeStateType.approved)
+                material.userApprovalMetadata.approvalRuntimeState !== ApprovalRuntimeStateType.approved)
 
         const selectImage =
             !isImageMarked && markFirstSelected && filterState === FilterStates.ALLOWED && !isConsumedNonApprovedImage
@@ -349,9 +350,7 @@ export const processCDMaterialServiceResponse = (
         cdMaterialsResult,
     )
 
-    const isApprovalConfigured = getIsApprovalPolicyConfigured(
-        approvalInfo?.deploymentApprovalInfo?.approvalConfigData,
-    )
+    const isApprovalConfigured = getIsApprovalPolicyConfigured(approvalInfo?.deploymentApprovalInfo?.approvalConfigData)
 
     const isExceptionUser = approvalInfo?.deploymentApprovalInfo?.approvalConfigData?.isExceptionUser ?? false
 
@@ -570,7 +569,6 @@ export const getAppsInfoForEnv = async ({ envId, appIds }: GetAppsInfoForEnvProp
     }
 }
 
-
 export const getAppOptionsGroupedByProjects = async (): Promise<AppsGroupedByProjectsType> => {
     const { result } = await get<AppsGroupedByProjectsType>(ROUTES.APP_LIST_MIN)
 
@@ -586,7 +584,6 @@ export const getAppOptionsGroupedByProjects = async (): Promise<AppsGroupedByPro
         .sort((a, b) => stringComparatorBySortOrder(a.projectName, b.projectName))
 }
 
-
 export const getEnvironmentOptionsGroupedByClusters = async (): Promise<EnvironmentsGroupedByClustersType> => {
     const { result } = (await get(ROUTES.ENVIRONMENT_LIST_MIN)) as ResponseType<EnvListMinDTO[]>
 
@@ -634,7 +631,10 @@ export const getEnvironmentOptionsGroupedByClusters = async (): Promise<Environm
     return envGroupedByCluster
 }
 
-export const getDetailedClusterList = async (clusterIds?: number[], signal?: AbortSignal): Promise<ClusterDetailListType[]> => {
+export const getDetailedClusterList = async (
+    clusterIds?: number[],
+    signal?: AbortSignal,
+): Promise<ClusterDetailListType[]> => {
     const url = getUrlWithSearchParams(ROUTES.CLUSTER, { clusterId: clusterIds?.join() })
     const { result } = await get<ClusterDetailDTO[]>(url, { signal })
 
@@ -647,21 +647,47 @@ export const getDetailedClusterList = async (clusterIds?: number[], signal?: Abo
                 prometheus_url: prometheusUrl,
                 category,
                 clusterStatus,
+                costModuleConfig,
                 ...res
-            }) => ({
-                ...res,
-                clusterId: id,
-                serverUrl,
-                clusterName,
-                prometheusUrl,
-                category: category?.name
-                    ? {
-                          label: category.name,
-                          value: category.id,
-                      }
-                    : null,
-                status: clusterStatus,
-            }),
+            }) => {
+                const costModuleInstallationStatus = costModuleConfig?.installationStatus || 'NotInstalled'
+                // Need to remove following keys from config if present: openCostServiceName, openCostServicePort, releaseName, namespace
+                const sanitizedCostConfig = costModuleConfig?.config
+                    ? Object.fromEntries(
+                          Object.entries(costModuleConfig.config).filter(
+                              ([key]) =>
+                                  !['openCostServiceName', 'openCostServicePort', 'releaseName', 'namespace'].includes(
+                                      key,
+                                  ),
+                          ),
+                      )
+                    : undefined
+
+                return {
+                    ...res,
+                    clusterId: id,
+                    serverUrl,
+                    clusterName,
+                    prometheusUrl,
+                    category: category?.name
+                        ? {
+                              label: category.name,
+                              value: category.id,
+                          }
+                        : null,
+                    status: clusterStatus,
+                    costModuleConfig: {
+                        enabled: costModuleConfig?.enabled || false,
+                        config: sanitizedCostConfig,
+                        installationStatus: costModuleInstallationStatus,
+                        ...(costModuleInstallationStatus === 'Failed'
+                            ? {
+                                  installationError: costModuleConfig?.installationError || 'Some error occurred',
+                              }
+                            : {}),
+                    } satisfies ClusterDetailListType['costModuleConfig'],
+                }
+            },
         )
         .sort((a, b) => stringComparatorBySortOrder(a.clusterName, b.clusterName))
 }

src/Common/Common.service.ts

@@ -1118,6 +1118,23 @@ export type EnvironmentsGroupedByClustersType = {
     envList: EnvironmentType[]
 }[]
 
+export type ClusterCostModuleConfigPayload =
+    | {
+          enabled: true
+          config?: Record<string, any>
+      }
+    | {
+          enabled: false
+          config?: never
+      }
+
+interface ClusterCostModuleDetailsDTO extends Pick<ClusterCostModuleConfigPayload, 'enabled' | 'config'> {
+    // Note that these status are independent of `enabled` flag
+    // e.g. cost module can be disabled but still in `Success` state
+    installationStatus: 'Success' | 'Installing' | 'Upgrading' | 'NotInstalled' | 'Failed'
+    installationError?: string
+}
+
 export interface ClusterDetailDTO {
     category: ClusterEnvironmentCategoryType
     cluster_name: string
@@ -1133,6 +1150,7 @@ export interface ClusterDetailDTO {
     proxyUrl: string
     toConnectWithSSHTunnel: boolean
     clusterStatus: ClusterStatusType
+    costModuleConfig: ClusterCostModuleDetailsDTO
 }
 
 export interface ClusterDetailListType

src/Common/Types.ts

@@ -0,0 +1,27 @@
+import { IconName } from '@Shared/Components'
+
+import { ClusterProviderType } from './types'
+
+export const CLUSTER_PROVIDER_TO_ICON_NAME: Record<ClusterProviderType, IconName | null> = {
+    AWS: 'ic-aws',
+    OTC: 'ic-otc-cloud',
+    Azure: 'ic-azure',
+    GCP: 'ic-google-cloud',
+    Alibaba: 'ic-alibaba',
+    Oracle: 'ic-oracle-cloud',
+    Scaleway: null,
+    DigitalOcean: null,
+    Unknown: null,
+}
+
+export const CLUSTER_PROVIDER_TO_LABEL: Record<ClusterProviderType, string> = {
+    AWS: 'AWS',
+    OTC: 'OTC',
+    Azure: 'Azure',
+    GCP: 'GCP',
+    Alibaba: 'Alibaba',
+    Oracle: 'Oracle',
+    Scaleway: 'Scaleway',
+    DigitalOcean: 'DigitalOcean',
+    Unknown: 'N/A',
+}

src/Pages-Devtron-2.0/CostVisibility/Shared/constants.tsx

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

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

@@ -1,3 +1,8 @@
+import { ReactNode } from 'react'
+
+import { RJSFFormSchema } from '@Common/RJSF'
+import { ClusterDetailListType } from '@Common/Types'
+
 export enum CostBreakdownViewType {
     CLUSTERS = 'clusters',
     ENVIRONMENTS = 'environments',
@@ -10,3 +15,33 @@ export enum CostBreakdownItemViewParamsType {
     VIEW = 'view',
     DETAIL = 'detail',
 }
+
+type RenderClusterFormParamsType = {
+    clusterDetails: ClusterDetailListType
+    handleClose: () => void
+    handleSuccess: () => void
+}
+
+export interface CostVisibilityRenderContextType {
+    renderClusterForm: (params: RenderClusterFormParamsType) => JSX.Element
+}
+
+export interface CostVisibilityRenderProviderProps extends CostVisibilityRenderContextType {
+    children: ReactNode
+}
+
+export type ClusterProviderType =
+    | 'AWS'
+    | 'GCP'
+    | 'Azure'
+    | 'Alibaba'
+    | 'Scaleway'
+    | 'Oracle'
+    | 'OTC'
+    | 'DigitalOcean'
+    | 'Unknown'
+
+export interface ClusterProviderDetailsType {
+    clusterProvider: ClusterProviderType
+    costModuleSchema: RJSFFormSchema
+}

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

@@ -1,18 +1,14 @@
-import { noop } from '@Common/Helper'
 import RadioGroup from '@Common/RadioGroup'
 import RadioGroupItem from '@Common/RadioGroupItem'
 import { AuthenticationType } from '@Shared/types'
 
-import { ButtonVariantType } from '../Button'
 import { CustomInput, PasswordField } from '../CustomInput'
-import { Icon } from '../Icon'
 import { InfoBlock } from '../InfoBlock'
 import { Textarea } from '../Textarea'
 import { PromoetheusConfigProps } from './types'
 
 const PromoetheusConfigCard = ({
     prometheusConfig,
-    isCostPrometheus,
     handleOnChange,
     onPrometheusAuthTypeChange,
 }: PromoetheusConfigProps) => {
@@ -26,19 +22,6 @@ const PromoetheusConfigCard = ({
                     Devtron uses prometheus to store and track cluster metrics
                 </span>
             </div>
-            {isCostPrometheus && (
-                <InfoBlock
-                    variant="help"
-                    description="Reuse Prometheus configuration from Application Monitoring"
-                    buttonProps={{
-                        dataTestId: 'autofill-prometheus',
-                        text: 'Autofill',
-                        onClick: noop, // TODO: Update onClick when cost prometheus is supported
-                        variant: ButtonVariantType.text,
-                        startIcon: <Icon name="ic-magic-wand" color={null} />,
-                    }}
-                />
-            )}
             {(userName.error || password.error || endpoint.error) && (
                 <InfoBlock
                     variant="error"

src/Shared/Components/PrometheusConfigurations/PrometheusConfigCard.tsx

@@ -20,5 +20,4 @@ export interface PromoetheusConfigProps {
     prometheusConfig: PromoetheusConfig
     handleOnChange: (event: SyntheticEvent) => void
     onPrometheusAuthTypeChange: (event: SyntheticEvent) => void
-    isCostPrometheus?: boolean
 }