@devtron-labs/devtron-fe-common-lib 0.0.60-beta-1 → 0.0.60-beta-3

package/src/Common/AddCDButton/types.ts

@@ -0,0 +1,38 @@
+import { AddCDPositions, AddPipelineType, EdgeEndNodeType, EdgeNodeType, Point } from '../Types'
+
+export interface AddCDButtonProps {
+    position: AddCDPositions
+    addCDButtons: AddCDPositions[]
+    endNode: Point & EdgeEndNodeType
+    startNode: Point & EdgeNodeType
+    handleAddCD: (position: AddCDPositions) => void
+    tooltipContent?: string
+}
+
+export interface HandleAddCD {
+    position: AddCDPositions
+    handleCDSelect: (
+        workflowId: number | string,
+        ciPipelineId: number | string,
+        parentPipelineType: string,
+        parentPipelineId: number | string,
+        isWebhookCD?: boolean,
+        childPipelineId?: number | string,
+        addType?: AddPipelineType,
+    ) => void
+    startNode: EdgeNodeType
+    endNode: EdgeEndNodeType
+    workflowId: number | string
+    ciPipelineId: number | string
+    isWebhookCD: boolean
+    isParallelEdge: boolean
+}
+
+export interface GetPipelineType {
+    isWebhookCD: boolean
+    startNode: EdgeNodeType
+}
+
+export interface TooltipContentProps {
+    tooltipContent?: string
+}

package/src/Common/AddCDButton/utils.tsx

@@ -0,0 +1,35 @@
+import { AddCDPositions, AddPipelineType, PipelineType, WorkflowNodeType } from '../Types'
+import { HandleAddCD, GetPipelineType } from './types'
+
+const getPipelineType = ({ isWebhookCD, startNode }: GetPipelineType) => {
+    if (isWebhookCD) {
+        return PipelineType.WEBHOOK
+    }
+
+    if (startNode.type === WorkflowNodeType.CI) {
+        return PipelineType.CI_PIPELINE
+    }
+
+    return PipelineType.CD_PIPELINE
+}
+
+export const handleAddCD = ({
+    position,
+    handleCDSelect,
+    startNode,
+    endNode,
+    workflowId,
+    ciPipelineId,
+    isWebhookCD,
+    isParallelEdge,
+}: HandleAddCD) => {
+    if (!handleCDSelect) {
+        return
+    }
+    const pipelineType = getPipelineType({ isWebhookCD, startNode })
+    const addPipelineType =
+        isParallelEdge && position === AddCDPositions.RIGHT ? AddPipelineType.PARALLEL : AddPipelineType.SEQUENTIAL
+    const endNodeId = !isParallelEdge && position === AddCDPositions.RIGHT ? endNode.id : null
+
+    handleCDSelect(workflowId, ciPipelineId, pipelineType, startNode.id, isWebhookCD, endNodeId, addPipelineType)
+}

package/src/Common/Api.ts

@@ -0,0 +1,230 @@
+import { ServerErrors } from './ServerError'
+import { FALLBACK_REQUEST_TIMEOUT, Host, URLS } from './Constants'
+import { ResponseType, APIOptions } from './Types'
+
+const responseMessages = {
+    100: 'Continue',
+    101: 'Switching Protocols',
+    102: 'Processing(WebDAV)',
+    200: 'OK',
+    201: 'Created',
+    202: 'Accepted',
+    203: 'Non - Authoritative Information',
+    204: 'No Content',
+    205: 'Reset Content',
+    206: 'Partial Content',
+    207: 'Multi - Status(WebDAV)',
+    208: 'Already Reported(WebDAV)',
+    226: 'IM Used',
+    300: 'Multiple Choices',
+    301: 'Moved Permanently',
+    302: 'Found',
+    303: 'See Other',
+    304: 'Not Modified',
+    305: 'Use Proxy',
+    307: 'Temporary Redirect',
+    308: 'Permanent Redirect(experimental)',
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    402: 'Payment Required',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    406: 'Not Acceptable',
+    407: 'Proxy Authentication Required',
+    408: 'Request Timeout',
+    409: 'Conflict',
+    410: 'Gone',
+    411: 'Length Required',
+    412: 'Precondition Failed',
+    413: 'Request Entity Too Large',
+    414: 'Request - URI Too Long',
+    415: 'Unsupported Media Type',
+    416: 'Requested Range Not Satisfiable',
+    417: 'Expectation Failed',
+    418: "I'm a teapot",
+    420: 'Enhance Your Calm(Twitter)',
+    422: 'Unprocessable Entity(WebDAV)',
+    423: 'Locked(WebDAV)',
+    424: 'Failed Dependency(WebDAV)',
+    425: 'Reserved for WebDAV',
+    426: 'Upgrade Required',
+    428: 'Precondition Required',
+    429: 'Too Many Requests',
+    431: 'Request Header Fields Too Large',
+    444: 'No Response(Nginx)',
+    449: 'Retry With(Microsoft)',
+    450: 'Blocked by Windows Parental Controls(Microsoft)',
+    451: 'Unavailable For Legal Reasons',
+    499: 'Client Closed Request(Nginx)',
+    500: 'Internal Server Error',
+    501: 'Not Implemented',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+    505: 'HTTP Version Not Supported',
+    506: 'Variant Also Negotiates(Experimental)',
+    507: 'Insufficient Storage(WebDAV)',
+    508: 'Loop Detected(WebDAV)',
+    509: 'Bandwidth Limit Exceeded(Apache)',
+    510: 'Not Extended',
+    511: 'Network Authentication Required',
+    598: 'Network read timeout error',
+    599: 'Network connect timeout error',
+}
+
+function handleLogout() {
+    const continueParam = `${window.location.pathname.replace(process.env.PUBLIC_URL, '')}${window.location.search}`
+    window.location.href = `${window.location.origin}${process.env.PUBLIC_URL}${URLS.LOGIN_SSO}?continue=${continueParam}`
+}
+
+async function handleServerError(contentType, response) {
+    //Test for HTTP Status Code
+    let code: number = response.status
+    let status: string = response.statusText || responseMessages[code]
+    let serverError = new ServerErrors({ code, errors: [] })
+    if (contentType !== 'application/json') {
+        //used for better debugging,
+        status = `${responseMessages[code]}. Please try again.`
+    } else {
+        const responseBody = await response.json()
+        if (responseBody.errors) {
+            serverError.errors = responseBody.errors
+        }
+    }
+    serverError.errors =
+        serverError.errors.length > 0 ? serverError.errors : [{ code, internalMessage: status, userMessage: status }]
+    throw serverError
+}
+
+async function fetchAPI(
+    url: string,
+    type: string,
+    data: object,
+    signal: AbortSignal,
+    preventAutoLogout = false,
+    isMultipartRequest?: boolean,
+): Promise<ResponseType> {
+    let options = {
+        method: type,
+        signal,
+        body: data ? JSON.stringify(data) : undefined,
+    }
+    options['credentials'] = 'include' as RequestCredentials
+    return fetch(
+        `${Host}/${url}`,
+        !isMultipartRequest
+            ? options
+            : ({
+                  method: type,
+                  body: data,
+              } as RequestInit),
+    ).then(
+        async (response) => {
+            let contentType = response.headers.get('Content-Type')
+            if (response.status === 401) {
+                if (preventAutoLogout) {
+                    throw new ServerErrors({
+                        code: 401,
+                        errors: [
+                            { code: 401, internalMessage: 'Please login again', userMessage: 'Please login again' },
+                        ],
+                    })
+                } else {
+                    handleLogout()
+                    return { code: 401, status: 'Unauthorized', result: [] }
+                }
+            } else if (response.status >= 300 && response.status <= 599) {
+                return await handleServerError(contentType, response)
+            } else {
+                if (contentType === 'application/json') {
+                    return response.json().then((responseBody) => {
+                        if (responseBody.code >= 300 && responseBody.code <= 599) {
+                            //Test Code in Response Body, despite successful HTTP Response Code
+                            throw new ServerErrors({ code: responseBody.code, errors: responseBody.errors })
+                        } else {
+                            //Successfull Response. Expected Response Type {code, result, status}
+                            return responseBody
+                        }
+                    })
+                } else if (contentType === 'octet-stream' || contentType === 'application/octet-stream') {
+                    //used in getArtifact() API only
+                    return response
+                }
+            }
+        },
+        (error) => {
+            //Network call fails. Handle Failed to Fetch
+            let err = {
+                code: 0,
+                userMessage: error.message,
+                internalMessage: error.message,
+                moreInfo: error.message,
+            }
+            throw new ServerErrors({ code: 0, errors: [err] })
+        },
+    )
+}
+
+function fetchInTime(
+    url: string,
+    type: string,
+    data: object,
+    options?: APIOptions,
+    isMultipartRequest?: boolean,
+): Promise<ResponseType> {
+    const controller = new AbortController()
+    const { signal } = controller
+    const timeoutPromise: Promise<ResponseType> = new Promise((resolve, reject) => {
+        const requestTimeout = (window as any)?._env_?.GLOBAL_API_TIMEOUT || FALLBACK_REQUEST_TIMEOUT
+        const timeout = options?.timeout ? options.timeout : requestTimeout
+
+        setTimeout(() => {
+            controller.abort()
+            reject({
+                code: 408,
+                errors: [{ code: 408, internalMessage: 'Request cancelled', userMessage: 'Request Cancelled' }],
+            })
+        }, timeout)
+    })
+    return Promise.race([
+        fetchAPI(url, type, data, options?.signal || signal, options?.preventAutoLogout || false, isMultipartRequest),
+        timeoutPromise,
+    ]).catch((err) => {
+        if (err instanceof ServerErrors) {
+            throw err
+        } else {
+            throw new ServerErrors({
+                code: 408,
+                errors: [
+                    {
+                        code: 408,
+                        internalMessage: 'That took longer than expected.',
+                        userMessage: 'That took longer than expected.',
+                    },
+                ],
+            })
+        }
+    })
+}
+
+export const post = (
+    url: string,
+    data: object,
+    options?: APIOptions,
+    isMultipartRequest?: boolean,
+): Promise<ResponseType> => {
+    return fetchInTime(url, 'POST', data, options, isMultipartRequest)
+}
+
+export const put = (url: string, data: object, options?: APIOptions): Promise<ResponseType> => {
+    return fetchInTime(url, 'PUT', data, options)
+}
+
+export const get = (url: string, options?: APIOptions): Promise<ResponseType> => {
+    return fetchInTime(url, 'GET', null, options)
+}
+
+export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> => {
+    return fetchInTime(url, 'DELETE', data, options)
+}

package/src/Common/AppStatus/AppStatus.tsx

@@ -0,0 +1,64 @@
+import Tippy from '@tippyjs/react'
+import { ReactComponent as InfoIcon } from '../../Assets/Icon/ic-info-outlined.svg'
+import { StatusConstants, YET_TO_RUN } from './constants'
+import { AppStatusType } from './types'
+import { triggerStatus } from './utils'
+
+export default function AppStatus({
+    appStatus,
+    isDeploymentStatus = false,
+    isJobView = false,
+    isVirtualEnv,
+    hideStatusMessage = false,
+}: AppStatusType) {
+    let status = appStatus
+    if (isDeploymentStatus) {
+        status = triggerStatus(appStatus)
+    }
+    const appStatusLowerCase = status?.toLowerCase()
+    const isNotDeployed = appStatusLowerCase === StatusConstants.NOT_DEPLOYED.noSpaceLower
+    const iconClass = isNotDeployed ? StatusConstants.NOT_DEPLOYED.lowerCase : appStatusLowerCase
+    const statusMessage = status || (isVirtualEnv ? StatusConstants.NOT_AVILABLE.normalCase : '-')
+    const notDeployed = isJobView ? YET_TO_RUN : StatusConstants.NOT_DEPLOYED.normalCase
+    const textContent = isNotDeployed ? notDeployed : statusMessage
+
+    const renderIcon = () => {
+        if (iconClass) {
+            return <span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />
+        } else if (isVirtualEnv) {
+            return (
+                <span
+                    className={`dc__app-summary__icon icon-dim-16 ${StatusConstants.NOT_DEPLOYED.lowerCase} ${StatusConstants.NOT_DEPLOYED.lowerCase}--node`}
+                />
+            )
+        } else {
+            return (
+                <Tippy
+                    className="default-tt w-200"
+                    arrow={false}
+                    placement="top"
+                    content="To fetch app status for GitOps based deployments open the app detail page"
+                >
+                    <InfoIcon className="icon-dim-16 fcn-6" />
+                </Tippy>
+            )
+        }
+    }
+
+    return hideStatusMessage ? (
+        iconClass || isVirtualEnv ? (
+            <Tippy className="default-tt" arrow={false} placement="top" content={textContent}>
+                <div className="flex">{renderIcon()}</div>
+            </Tippy>
+        ) : (
+            renderIcon()
+        )
+    ) : (
+        <div className="flex left">
+            <div className="flex mr-6">{renderIcon()}</div>
+            <p data-testid={`${status}-app-status`} className="dc__truncate-text dc__first-letter-capitalize cn-6 m-0">
+                {textContent}
+            </p>
+        </div>
+    )
+}

package/src/Common/AppStatus/constants.ts

@@ -0,0 +1,53 @@
+export const StatusConstants = {
+    NOT_DEPLOYED: {
+        noSpaceLower: 'notdeployed',
+        normalCase: 'Not deployed',
+        lowerCase: 'not-deployed',
+    },
+    APP_STATUS: {
+        noSpaceLower: 'appStatus',
+        normalText: 'App status',
+    },
+    PROJECT: {
+        pluralLower: 'projects',
+        lowerCase: 'project',
+    },
+    CLUSTER: {
+        pluralLower: 'clusters',
+        lowerCase: 'cluster',
+    },
+    NAMESPACE: {
+        pluralLower: 'namespaces',
+        lowerCase: 'namespace',
+    },
+    ENVIRONMENT: {
+        pluralLower: 'environments',
+        lowerCase: 'environment',
+    },
+    NOT_AVILABLE: {
+        normalCase: 'Not available',
+    },
+}
+
+export enum TIMELINE_STATUS {
+    DEPLOYMENT_INITIATED = 'DEPLOYMENT_INITIATED',
+    GIT_COMMIT = 'GIT_COMMIT',
+    GIT_COMMIT_FAILED = 'GIT_COMMIT_FAILED',
+    KUBECTL_APPLY = 'KUBECTL_APPLY',
+    KUBECTL_APPLY_STARTED = 'KUBECTL_APPLY_STARTED',
+    KUBECTL_APPLY_SYNCED = 'KUBECTL_APPLY_SYNCED',
+    HEALTHY = 'HEALTHY',
+    APP_HEALTH = 'APP_HEALTH',
+    DEPLOYMENT_FAILED = 'FAILED',
+    FETCH_TIMED_OUT = 'TIMED_OUT',
+    UNABLE_TO_FETCH_STATUS = 'UNABLE_TO_FETCH_STATUS',
+    DEGRADED = 'DEGRADED',
+    DEPLOYMENT_SUPERSEDED = 'DEPLOYMENT_SUPERSEDED',
+    ABORTED = 'ABORTED',
+    INPROGRESS = 'INPROGRESS',
+    HELM_PACKAGE_GENERATED = 'HELM_PACKAGE_GENERATED',
+    HELM_MANIFEST_PUSHED_TO_HELM_REPO = 'HELM_MANIFEST_PUSHED_TO_HELM_REPO',
+    HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED = 'HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED',
+}
+
+export const YET_TO_RUN = 'Yet to run'

package/src/Common/AppStatus/index.ts

@@ -0,0 +1 @@
+export { default as AppStatus } from './AppStatus'

package/src/Common/AppStatus/types.ts

@@ -0,0 +1,12 @@
+export interface AppStatusType {
+    appStatus: string
+    isDeploymentStatus?: boolean
+    isJobView?: boolean
+    isVirtualEnv?: boolean
+    /**
+     * Hide the status message if true and show status message in tooltip
+     *
+     * @default false
+     */
+    hideStatusMessage?: boolean
+}

package/src/Common/AppStatus/utils.ts

@@ -0,0 +1,14 @@
+import { TIMELINE_STATUS } from './constants'
+
+export const triggerStatus = (triggerDetailStatus: string): string => {
+    let triggerStatus = triggerDetailStatus?.toUpperCase()
+    if (triggerStatus === TIMELINE_STATUS.ABORTED || triggerStatus === TIMELINE_STATUS.DEGRADED) {
+        return 'Failed'
+    } else if (triggerStatus === TIMELINE_STATUS.HEALTHY) {
+        return 'Succeeded'
+    } else if (triggerStatus === TIMELINE_STATUS.INPROGRESS) {
+        return 'Inprogress'
+    } else {
+        return triggerDetailStatus
+    }
+}

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -0,0 +1,105 @@
+import React, { useMemo, useEffect } from 'react'
+import { Link, useRouteMatch, useParams } from 'react-router-dom'
+import { useBreadcrumbContext } from './BreadcrumbStore'
+import { ConditionalWrap } from '../Helper'
+import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types'
+export const BreadcrumbContext = React.createContext(null)
+
+export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]): UseBreadcrumbState {
+    let sep = props?.sep || '/'
+    deps = deps || []
+    const { url, path } = useRouteMatch()
+    const params = useParams()
+    const { state, setState } = useBreadcrumbContext()
+
+    useEffect(() => {
+        if (!props || !props.alias) return
+        setState((state) => ({ ...state, alias: { ...state.alias, ...props.alias } }))
+        return () => resetCrumb(Object.keys(props.alias))
+    }, deps)
+
+    function setCrumb(props) {
+        setState((state) => ({ ...state, alias: { ...state.alias, ...props } }))
+    }
+
+    function resetCrumb(props: string[]) {
+        const tempAlias = props.reduce((agg, curr, idx) => {
+            delete agg[curr]
+            return agg
+        }, state.alias)
+        setState((state) => ({ ...state, alias: tempAlias }))
+    }
+
+    let levels: Breadcrumb[] = useMemo(() => {
+        const paths = path.split('/').filter(Boolean)
+        const urls = url.split('/').filter(Boolean)
+        return paths.map((path, idx) => {
+            const crumb: Breadcrumb = { to: urls[idx], name: path }
+            if (path.startsWith(':') && params[path.replace(':', '')]) {
+                crumb.className = 'param'
+            }
+            return crumb
+        })
+    }, [path, url])
+    const { res: breadcrumbs } = useMemo(() => {
+        return levels.reduce(
+            (agg, curr, idx) => {
+                const { res, prefix } = agg
+                const { to, name } = curr
+                res.push({
+                    to:
+                        !state.alias[name]?.component || (state.alias[name]?.component && state.alias[name]?.linked)
+                            ? `${prefix}${to}`
+                            : null,
+                    name:
+                        typeof state.alias[name] === 'object'
+                            ? !!state.alias[name]?.component
+                                ? state.alias[name].component
+                                : null
+                            : state.alias[name] || name,
+                    className: curr.className || '',
+                })
+                return { res, prefix: `${prefix}${curr.to}${sep}` }
+            },
+            { res: [], prefix: '/' },
+        )
+    }, [levels, state])
+
+    return { breadcrumbs, setCrumb, resetCrumb }
+}
+
+export const BreadCrumb: React.FC<Breadcrumbs> = ({
+    breadcrumbs,
+    sep = '/',
+    className = 'dc__devtron-breadcrumb__item',
+}) => {
+    const { url } = useRouteMatch()
+    const filteredCrumbs = breadcrumbs.filter((crumb) => !!crumb.name)
+    return (
+        <React.Fragment>
+            {filteredCrumbs.map((breadcrumb, idx) => (
+                <React.Fragment key={idx}>
+                    <ConditionalWrap
+                        condition={!!breadcrumb.to}
+                        wrap={(children) => (
+                            <Link
+                                className={`${url === breadcrumb.to ? 'active' : ''} ${className} ${
+                                    breadcrumb.className || ''
+                                }`}
+                                to={breadcrumb.to}
+                            >
+                                {children}
+                            </Link>
+                        )}
+                    >
+                        {breadcrumb.name}
+                    </ConditionalWrap>
+
+                    {idx + 1 !== filteredCrumbs.length && breadcrumb.name && (
+                        <span className={`${className}__separator cn-5`}>{sep}</span>
+                    )}
+                </React.Fragment>
+            ))}
+        </React.Fragment>
+    )
+}

package/src/Common/BreadCrumb/BreadcrumbStore.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, useState } from 'react'
+
+const initialState = {
+    alias: {},
+}
+
+const Store = ({ children }) => {
+    const [state, setState] = useState(initialState)
+    return <BreadcrumbContext.Provider value={{ state, setState }}>{children}</BreadcrumbContext.Provider>
+}
+
+export const BreadcrumbContext = createContext({
+    state: { alias: {} },
+    setState: null,
+})
+
+export function useBreadcrumbContext() {
+    const context = React.useContext(BreadcrumbContext)
+    if (!context) {
+        throw new Error(`breadcrumb components cannot be used outside Breadcrumb context`)
+    }
+    return context
+}
+
+export default Store

package/src/Common/BreadCrumb/Types.ts

@@ -0,0 +1,30 @@
+
+export interface Breadcrumb {
+  to: string
+  name: string
+  className?: string
+}
+
+export interface UseBreadcrumbState {
+  breadcrumbs: Breadcrumb[]
+  setCrumb: (props: { [key: string]: any }) => void
+  resetCrumb: (props: string[]) => void
+}
+
+export interface AdvancedAlias {
+  component: any
+  linked: boolean
+}
+
+export interface UseBreadcrumbProps {
+  sep?: string
+  alias?: { [key: string]: AdvancedAlias | any }
+}
+
+export interface Breadcrumbs {
+    breadcrumbs: Breadcrumb[]
+    sep?: string
+    className?: string
+}
+
+export type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null