@devtron-labs/devtron-fe-common-lib 0.0.63-beta-2 → 0.0.63-beta-5

package/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx

@@ -0,0 +1,138 @@
+import { ReactComponent as ICCpu } from '../../../Assets/Icon/ic-cpu.svg'
+import { ReactComponent as ICMemory } from '../../../Assets/Icon/ic-memory.svg'
+import { ReactComponent as ICTimer } from '../../../Assets/Icon/ic-timer.svg'
+import { UseBreadcrumbProps } from '../../../Common/BreadCrumb/Types'
+import {
+    BuildInfraConfigTypes,
+    BuildInfraFormFieldType,
+    BuildInfraLocators,
+    BuildInfraMetaConfigTypes,
+    ProfileInputErrorType,
+    BuildInfraProfileBase,
+    BuildInfraProfileVariants,
+    HandleProfileInputChangeType,
+} from './types'
+
+export const BUILD_INFRA_INPUT_CONSTRAINTS = {
+    // Will not enforce any decimal specification on input field
+    STEP: 'any',
+    MIN: 0,
+    DECIMAL_PLACES: 2,
+} as const
+
+export const BUILD_INFRA_TEXT = {
+    HEADING: 'Build Infra Configuration',
+    EDIT_SUBMIT: 'Save changes',
+    SAVE_SUBMIT: 'Save',
+    EDIT_CANCEL: 'Cancel',
+    EDIT_DEFAULT_TOOLTIP:
+        'Efficiently control infrastructure settings such as CPU, Memory, and Build timeout for your build pipelines. Streamline resource management to optimise build time and cost effortlessly.',
+    DESCRIPTION_LABEL: 'Description',
+    DESCRIPTION_PLACEHOLDER: 'Enter a description here',
+    PROFILE_LABEL: 'Profile name',
+    PROFILE_PLACEHOLDER: 'Enter a name eg. java/node/small/medium/large',
+    INHERITING_HEADING_DESCRIPTION: 'Inheriting from default',
+    SUBMIT_BUTTON_TIPPY: {
+        INVALID_INPUT: 'Valid input is required for all mandatory fields.',
+        REQUEST_IN_PROGRESS: 'Request in progress.',
+    },
+    VALIDATE_REQUEST_LIMIT: {
+        REQUEST_LESS_THAN_LIMIT: 'Request should be less than or equal to limit.',
+        CAN_NOT_COMPUTE: 'Request and limit value diff are too high to validate.',
+        REQUEST_DECIMAL_PLACES: `Request should be upto ${BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES} decimal places.`,
+        LIMIT_DECIMAL_PLACES: `Limit should be upto ${BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES} decimal places.`,
+    },
+    getInvalidActionMessage: (action: HandleProfileInputChangeType['action']) => `Invalid action type: ${action}`,
+    getSubmitSuccessMessage: (profileName: string, isEdited: boolean) =>
+        `${profileName} profile is ${isEdited ? 'updated' : 'created'}`,
+    PROFILE_NOT_FOUND: {
+        title: 'Profile not found',
+        subTitle: 'The profile you are looking for does not exist.',
+    },
+    INVALID_FORM_MESSAGE: 'Valid input is required for all mandatory fields.',
+} as const
+
+export const BUILD_INFRA_BREADCRUMB: UseBreadcrumbProps = {
+    alias: {
+        'global-config': null,
+        'build-infra': {
+            component: <h2 className="m-0 cn-9 fs-16 fw-6 lh-32">{BUILD_INFRA_TEXT.HEADING}</h2>,
+            linked: false,
+        },
+    },
+}
+
+export const BUILD_INFRA_FORM_FIELDS: BuildInfraFormFieldType[] = [
+    {
+        heading: <h3 className="m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink">CPU (Request - Limit)</h3>,
+        marker: ICCpu,
+        actions: [
+            {
+                actionType: BuildInfraConfigTypes.CPU_REQUEST,
+                label: 'Request',
+                placeholder: 'Type CPU request',
+            },
+            {
+                actionType: BuildInfraConfigTypes.CPU_LIMIT,
+                label: 'Limit',
+                placeholder: 'Type CPU limit',
+            },
+        ],
+        locator: BuildInfraLocators.CPU,
+    },
+    {
+        heading: <h3 className="m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink">Memory (Request - Limit)</h3>,
+        marker: ICMemory,
+        actions: [
+            {
+                actionType: BuildInfraConfigTypes.MEMORY_REQUEST,
+                label: 'Request',
+                placeholder: 'Type memory request',
+            },
+            {
+                actionType: BuildInfraConfigTypes.MEMORY_LIMIT,
+                label: 'Limit',
+                placeholder: 'Type memory limit',
+            },
+        ],
+        locator: BuildInfraLocators.MEMORY,
+    },
+    {
+        heading: <h3 className="m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink">Build timeout</h3>,
+        marker: ICTimer,
+        actions: [
+            {
+                actionType: BuildInfraConfigTypes.BUILD_TIMEOUT,
+                label: 'Timeout',
+                placeholder: 'Type build timeout',
+            },
+        ],
+        locator: BuildInfraLocators.BUILD_TIMEOUT,
+    },
+]
+
+export const PROFILE_INPUT_ERROR_FIELDS = Object.fromEntries(
+    Object.values({ ...BuildInfraConfigTypes, ...BuildInfraMetaConfigTypes }).map((value) => [value, null]),
+) as ProfileInputErrorType
+
+// fields required to be filled before submitting the form in create view, since we pre-populate the form with default values so no need in configs
+export const CREATE_MODE_REQUIRED_INPUT_FIELDS = [BuildInfraMetaConfigTypes.NAME]
+
+export const DEFAULT_PROFILE_NAME = 'default' as const
+
+export const CREATE_PROFILE_BASE_VALUE: BuildInfraProfileBase = {
+    name: '',
+    description: '',
+    type: BuildInfraProfileVariants.NORMAL,
+    appCount: 0,
+}
+
+export const CREATE_VIEW_CHECKED_CONFIGS = {
+    [BuildInfraConfigTypes.CPU_REQUEST]: true,
+    [BuildInfraConfigTypes.CPU_LIMIT]: true,
+} as const
+
+export const BUILD_INFRA_TEST_IDS = {
+    SUBMIT_BUTTON: 'build-infra-submit-button',
+    CANCEL_BUTTON: 'build-infra-cancel-button',
+} as const

package/src/Pages/GlobalConfigurations/BuildInfra/index.ts

@@ -0,0 +1,7 @@
+export { default as BuildInfraDescriptor } from './Descriptor'
+export { default as BuildInfraFooter } from './Footer'
+export { default as BuildInfraConfigForm } from './BuildInfraConfigForm'
+export * from './services'
+export * from './utils'
+export * from './types'
+export * from './constants'

package/src/Pages/GlobalConfigurations/BuildInfra/services.tsx

@@ -0,0 +1,167 @@
+import { ROUTES, ResponseType, get, post, put, showError } from '../../../Common'
+import { CREATE_PROFILE_BASE_VALUE, CREATE_VIEW_CHECKED_CONFIGS } from './constants'
+import {
+    BuildInfraConfigTypes,
+    BuildInfraConfigurationMapType,
+    BuildInfraConfigurationType,
+    BuildInfraProfileAPIResponseType,
+    BuildInfraProfileBase,
+    BuildInfraProfileResponseDataType,
+    BuildInfraProfileResponseType,
+    BuildInfraProfileTransformerType,
+    CreateBuildInfraProfileType,
+    CreateBuildInfraServicePayloadType,
+    CreateBuildInfraServiceConfigurationType,
+    GetBuildInfraProfileType,
+    UpdateBuildInfraProfileType,
+    BuildInfraConfigurationMapWithoutDefaultType,
+} from './types'
+
+const getBaseProfileObject = (
+    fromCreateView: boolean,
+    profile: BuildInfraProfileResponseDataType,
+): BuildInfraProfileBase => {
+    if (fromCreateView) {
+        return CREATE_PROFILE_BASE_VALUE
+    }
+
+    return {
+        id: profile.id,
+        name: profile.name,
+        description: profile.description,
+        type: profile.type,
+        appCount: profile.appCount,
+    }
+}
+
+// Would receive a single profile and return transformed response
+export const getTransformedBuildInfraProfileResponse = ({
+    configurationUnits,
+    defaultConfigurations,
+    profile,
+    fromCreateView,
+}: BuildInfraProfileTransformerType): BuildInfraProfileResponseType => {
+    // Assuming would contain all the keys
+    const defaultConfigurationsMap =
+        defaultConfigurations?.reduce((acc, configuration) => {
+            acc[configuration.key] = configuration
+            return acc
+        }, {} as BuildInfraConfigurationMapWithoutDefaultType) ?? ({} as BuildInfraConfigurationMapWithoutDefaultType)
+
+    const profileConfigurations =
+        profile?.configurations?.reduce((acc, configuration) => {
+            acc[configuration.key] = configuration
+            return acc
+        }, {} as BuildInfraConfigurationMapWithoutDefaultType) ?? ({} as BuildInfraConfigurationMapWithoutDefaultType)
+
+    const configurations = Object.keys(defaultConfigurationsMap).reduce((acc, key) => {
+        const defaultConfiguration: BuildInfraConfigurationType = defaultConfigurationsMap[key]
+        const profileConfiguration =
+            profileConfigurations[key]?.profileName === profile?.name ? profileConfigurations[key] : null
+        // Pushing default value in configurations in case we de-activate the configuration
+        const defaultValue = {
+            value: defaultConfiguration.value,
+            unit: defaultConfiguration.unit,
+        }
+
+        if (fromCreateView) {
+            acc[key] = {
+                key,
+                value: defaultConfiguration.value,
+                unit: defaultConfiguration.unit,
+                active: CREATE_VIEW_CHECKED_CONFIGS[key] ?? false,
+                defaultValue,
+            }
+            return acc
+        }
+
+        if (profileConfiguration) {
+            acc[key] = {
+                ...profileConfiguration,
+                defaultValue,
+            }
+            return acc
+        }
+
+        // Removing id from it since we do not have a configuration
+        // While generating payload, we will check on the basis of id and active flag.
+        acc[key] = {
+            key,
+            value: defaultConfiguration.value,
+            // saving profile name as undefined and this would be a check, if we are deriving from default or not
+            unit: defaultConfiguration.unit,
+            active: false,
+            defaultValue,
+        }
+        return acc
+    }, {} as BuildInfraConfigurationMapType)
+
+    return {
+        configurationUnits,
+        profile: {
+            ...(profile && getBaseProfileObject(fromCreateView, profile)),
+            configurations,
+        },
+    }
+}
+
+export const getBuildInfraProfileByName = async ({
+    name,
+    fromCreateView,
+}: GetBuildInfraProfileType): Promise<BuildInfraProfileResponseType> => {
+    try {
+        const response = await get(`${ROUTES.INFRA_CONFIG_PROFILE}/${name}`)
+        const {
+            result: { configurationUnits, defaultConfigurations, profile },
+        } = response as ResponseType<BuildInfraProfileAPIResponseType>
+
+        return getTransformedBuildInfraProfileResponse({
+            configurationUnits,
+            defaultConfigurations,
+            profile,
+            fromCreateView,
+        })
+    } catch (error) {
+        showError(error)
+        throw error
+    }
+}
+
+const getBuildInfraProfilePayload = (
+    profileInput: CreateBuildInfraProfileType['profileInput'],
+): CreateBuildInfraServicePayloadType => {
+    const currentConfigurations = profileInput.configurations
+    const configurationKeys = Object.keys(currentConfigurations) as BuildInfraConfigTypes[]
+    // would only keep the configurations with id or active flag as true
+    const configurations: CreateBuildInfraServiceConfigurationType[] = configurationKeys.reduce((acc, key) => {
+        const configuration = currentConfigurations[key]
+        if (configuration.id || configuration.active) {
+            acc.push({
+                id: configuration.id,
+                key,
+                value: Number(configuration.value),
+                unit: configuration.unit,
+                active: configuration.active,
+            })
+        }
+        return acc
+    }, [] as CreateBuildInfraServiceConfigurationType[])
+
+    const payload: CreateBuildInfraServicePayloadType = {
+        name: profileInput.name,
+        description: profileInput.description,
+        type: profileInput.type,
+        configurations,
+    }
+    return payload
+}
+
+export const updateBuildInfraProfile = ({ name, profileInput }: UpdateBuildInfraProfileType) => {
+    const payload = getBuildInfraProfilePayload(profileInput)
+    return put(`${ROUTES.INFRA_CONFIG_PROFILE}/${name}`, payload)
+}
+
+export const createBuildInfraProfile = async ({ profileInput }: CreateBuildInfraProfileType) => {
+    const payload = getBuildInfraProfilePayload(profileInput)
+    return post(ROUTES.INFRA_CONFIG_PROFILE, payload)
+}

package/src/Pages/GlobalConfigurations/BuildInfra/types.tsx

@@ -0,0 +1,339 @@
+import { FormEvent, FunctionComponent, ReactNode } from 'react'
+import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
+import { ValidationResponseType } from '../../../Shared'
+import { ServerErrors } from '../../../Common'
+
+/**
+ * Unique actions that will be dispatched and,
+ * Keeping some values (cpu_limit, etc) in sync with backend
+ */
+export enum BuildInfraConfigTypes {
+    CPU_LIMIT = 'cpu_limit',
+    CPU_REQUEST = 'cpu_request',
+    MEMORY_LIMIT = 'memory_limit',
+    MEMORY_REQUEST = 'memory_request',
+    BUILD_TIMEOUT = 'timeout',
+}
+
+/**
+ * Combination of BuildInfraConfigTypes and BuildInfraMetaConfigTypes is going to derive error state and actions(actions will also be derived with BuildInfraInheritActions)
+ */
+export enum BuildInfraMetaConfigTypes {
+    NAME = 'name',
+    DESCRIPTION = 'description',
+}
+
+/**
+ * Would be used as key for few components and would be appending activate and de_activate actions to it
+ */
+export enum BuildInfraLocators {
+    CPU = 'cpu',
+    MEMORY = 'memory',
+    // This name can be also different from BuildInfraConfigTypes[BUILD_TIMEOUT] in case we want to show different label
+    BUILD_TIMEOUT = 'timeout',
+}
+
+// FIXME: Derive this from BuildInfraLocators
+// Appending the locators from above
+export enum BuildInfraInheritActions {
+    ACTIVATE_CPU = 'activate_cpu',
+    DE_ACTIVATE_CPU = 'de_activate_cpu',
+    ACTIVATE_MEMORY = 'activate_memory',
+    DE_ACTIVATE_MEMORY = 'de_activate_memory',
+    ACTIVATE_BUILD_TIMEOUT = 'activate_timeout',
+    DE_ACTIVATE_BUILD_TIMEOUT = 'de_activate_timeout',
+}
+
+export const BuildInfraConfigActionMap = {
+    [BuildInfraConfigTypes.BUILD_TIMEOUT]: BuildInfraLocators.BUILD_TIMEOUT,
+    [BuildInfraConfigTypes.CPU_LIMIT]: BuildInfraLocators.CPU,
+    [BuildInfraConfigTypes.CPU_REQUEST]: BuildInfraLocators.CPU,
+    [BuildInfraConfigTypes.MEMORY_LIMIT]: BuildInfraLocators.MEMORY,
+    [BuildInfraConfigTypes.MEMORY_REQUEST]: BuildInfraLocators.MEMORY,
+}
+
+export enum BuildInfraProfileVariants {
+    DEFAULT = 'DEFAULT',
+    NORMAL = 'NORMAL',
+    CUSTOM = 'CUSTOM',
+}
+
+export interface DescriptorProps {
+    /**
+     * In case we want to restrict the max-width
+     */
+    additionalContainerClasses?: string
+    breadCrumbs: Breadcrumb[]
+    /**
+     * Would stick at right of div
+     */
+    children?: ReactNode
+    tippyInfoText?: string
+    tippyAdditionalContent?: ReactNode
+}
+
+export interface BuildInfraActionType {
+    /**
+     * Type of action to be dispatched, would be suffixed with type of change
+     */
+    actionType: BuildInfraConfigTypes
+    /**
+     * Label to be shown above input
+     */
+    label: string
+    /**
+     * Placeholder for input, can be optional
+     */
+    placeholder?: string
+    // Can add a prop for variant, if there is a need to show different types of inputs
+}
+
+export interface BuildInfraConfigurationMarkerProps {
+    className?: string
+}
+
+export interface BuildInfraFormFieldType {
+    /**
+     * Heading of the form item
+     */
+    heading: ReactNode
+    /**
+     * Icon/Checkbox to be shown in front of heading
+     */
+    marker: FunctionComponent<BuildInfraConfigurationMarkerProps>
+    /**
+     * Actions to be shown in the form item
+     */
+    actions: BuildInfraActionType[]
+    /**
+     * Unique identifier for the form item used for key
+     */
+    locator: BuildInfraLocators
+}
+
+export interface ConfigurationUnitType {
+    name: string
+    conversionFactor: number
+}
+
+// key would be the name of ConfigurationUnitType
+export type ConfigurationUnitMapType = {
+    [key: ConfigurationUnitType['name']]: ConfigurationUnitType
+}
+
+export type BuildInfraUnitsMapType = {
+    [key in BuildInfraConfigTypes]: ConfigurationUnitMapType
+}
+
+export interface BuildInfraConfigValuesType {
+    value: string
+    unit?: ConfigurationUnitType['name']
+}
+
+interface BuildInfraProfileConfigBase {
+    id?: number
+    key: BuildInfraConfigTypes
+    profileName: string
+    active: boolean
+}
+
+export interface BuildInfraProfileConfigResponseDataType
+    extends BuildInfraConfigValuesType,
+        BuildInfraProfileConfigBase {}
+
+export interface BuildInfraConfigurationType extends BuildInfraConfigValuesType, BuildInfraProfileConfigBase {
+    defaultValue: BuildInfraConfigValuesType
+}
+
+export type BuildInfraConfigurationMapWithoutDefaultType = {
+    [key in BuildInfraConfigTypes]: BuildInfraConfigValuesType & BuildInfraProfileConfigBase
+}
+
+export type BuildInfraConfigurationMapType = {
+    [key in BuildInfraConfigTypes]: BuildInfraConfigurationType
+}
+
+export interface BuildInfraProfileBase {
+    id?: number
+    name: string
+    description: string
+    type: BuildInfraProfileVariants
+    appCount: number
+}
+
+export interface BuildInfraProfileResponseDataType extends BuildInfraProfileBase {
+    configurations: BuildInfraProfileConfigResponseDataType[]
+}
+
+export interface BuildInfraProfileData extends BuildInfraProfileBase {
+    configurations: BuildInfraConfigurationMapType
+}
+
+export interface GetBuildInfraProfileType {
+    name: string
+    fromCreateView?: boolean
+}
+
+export interface BuildInfraProfileResponseType {
+    configurationUnits: BuildInfraUnitsMapType | null
+    profile: BuildInfraProfileData | null
+}
+
+export interface UseBuildInfraFormProps {
+    /**
+     * Name of the profile, if not provided assumption would be for create view
+     */
+    name?: string
+    /**
+     * If true, would send put request else would create profile via post
+     */
+    editProfile?: boolean
+    /**
+     * If true, call this on form submission success
+     */
+    handleSuccessRedirection?: () => void
+}
+
+export type ProfileInputErrorType = {
+    [key in BuildInfraConfigTypes | BuildInfraMetaConfigTypes]: string
+}
+
+export interface ProfileInputDispatchDataType {
+    value: string
+    unit?: string
+}
+
+export interface HandleProfileInputChangeType {
+    action: BuildInfraConfigTypes | BuildInfraInheritActions | BuildInfraMetaConfigTypes
+    data?: ProfileInputDispatchDataType
+}
+
+export interface UseBuildInfraFormResponseType {
+    isLoading: boolean
+    profileResponse: BuildInfraProfileResponseType | null
+    responseError: ServerErrors | null
+    reloadRequest: () => void
+    profileInput: BuildInfraProfileData
+    profileInputErrors: ProfileInputErrorType
+    handleProfileInputChange: ({ action, data }: HandleProfileInputChangeType) => void
+    loadingActionRequest: boolean
+    handleSubmit: (e: FormEvent<HTMLFormElement>) => Promise<void>
+}
+
+export interface BuildInfraFormItemProps extends Pick<BuildInfraFormFieldType, 'marker' | 'heading'> {
+    children?: ReactNode
+    /**
+     * If true, means profile is inheriting values from other profile (e.g, default)
+     */
+    isInheriting?: boolean
+    /**
+     * Would be false for last item
+     */
+    showDivider?: boolean
+
+    /**
+     * Would be used to dispatch inherit actions (activate_cpu, de_activate_cpu, etc)
+     */
+    handleProfileInputChange: UseBuildInfraFormResponseType['handleProfileInputChange']
+    locator: BuildInfraFormFieldType['locator']
+    isDefaultProfile: boolean
+}
+
+export interface ValidateRequestLimitType {
+    request: BuildInfraConfigValuesType
+    limit: BuildInfraConfigValuesType
+    unitsMap: ConfigurationUnitMapType
+}
+
+export interface ValidateRequestLimitResponseType {
+    request: ValidationResponseType
+    limit: ValidationResponseType
+}
+
+export interface BuildInfraConfigFormProps
+    extends Pick<UseBuildInfraFormResponseType, 'profileInput' | 'profileInputErrors' | 'handleProfileInputChange'> {
+    isDefaultProfile?: boolean
+    unitsMap?: BuildInfraProfileResponseType['configurationUnits']
+    configurationContainerLabel?: ReactNode
+}
+
+export interface BuildInfraFormActionProps extends BuildInfraActionType {
+    handleProfileInputChange: UseBuildInfraFormResponseType['handleProfileInputChange']
+    currentValue: BuildInfraConfigValuesType['value']
+    error?: string
+    isRequired?: boolean
+    profileUnitsMap?: ConfigurationUnitMapType
+    currentUnitName?: BuildInfraConfigValuesType['unit']
+}
+
+export interface FooterProps {
+    /**
+     * If true, means form contains errors
+     */
+    disabled?: boolean
+    handleCancel?: () => void
+    /**
+     * If true would show save changes else would show save for submit button
+     */
+    editProfile?: boolean
+    loading?: boolean
+}
+
+export interface UpdateBuildInfraProfileType extends Pick<UseBuildInfraFormResponseType, 'profileInput'> {
+    name: string
+}
+
+export interface CreateBuildInfraProfileType extends Pick<UseBuildInfraFormResponseType, 'profileInput'> {}
+
+export interface CreateBuildInfraServiceConfigurationType {
+    key: BuildInfraConfigTypes
+    value: string | number
+    active: boolean
+    unit?: string
+    /**
+     * Would send for those that are available in profileInput
+     */
+    id?: number
+}
+
+export interface CreateBuildInfraServicePayloadType {
+    name: string
+    description: string
+    type: BuildInfraProfileVariants
+    configurations: CreateBuildInfraServiceConfigurationType[]
+}
+
+export interface BuildInfraInputFieldComponentProps {
+    handleProfileInputChange: UseBuildInfraFormResponseType['handleProfileInputChange']
+    currentValue: BuildInfraConfigValuesType['value']
+    error?: string
+}
+
+export interface InheritingHeaderProps {
+    defaultHeading: BuildInfraFormFieldType['heading']
+    inheritingData: BuildInfraConfigValuesType[]
+    isInheriting: boolean
+    isDefaultProfile: boolean
+}
+
+export interface BuildInfraConfigResponseDataType {
+    name: BuildInfraConfigTypes
+    units: ConfigurationUnitType[]
+}
+
+interface BaseBuildInfraProfileResponseType {
+    defaultConfigurations: BuildInfraProfileConfigResponseDataType[]
+    configurationUnits: BuildInfraUnitsMapType
+}
+
+export interface BuildInfraListResponseType extends BaseBuildInfraProfileResponseType {
+    profiles: BuildInfraProfileResponseDataType[]
+}
+
+export interface BuildInfraProfileAPIResponseType extends BaseBuildInfraProfileResponseType {
+    profile: BuildInfraProfileResponseDataType
+}
+
+export interface BuildInfraProfileTransformerType
+    extends BuildInfraProfileAPIResponseType,
+        Pick<GetBuildInfraProfileType, 'fromCreateView'> {}