@devtron-labs/devtron-fe-common-lib 0.0.58-beta-12 → 0.0.58-beta-14

package/src/Common/Api.ts

@@ -1,251 +0,0 @@
-import { ServerErrors } from './ServerError'
-import { FALLBACK_REQUEST_TIMEOUT, Host, URLS } from './Constants'
-import { ResponseType, APIOptions } from './Types'
-import { MutableRefObject } from 'react'
-
-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)
-}
-
-/**
- * Aborts the previous request before triggering next request
- */
-export const abortPreviousRequests = <T,>(
-    callback: () => Promise<T>,
-    abortControllerRef: MutableRefObject<AbortController>,
-): Promise<T> => {
-    abortControllerRef.current.abort()
-    // eslint-disable-next-line no-param-reassign
-    abortControllerRef.current = new AbortController()
-    return callback()
-}
-
-/**
- * Returns true if the error is due to a aborted request
- */
-export const getIsRequestAborted = (error) =>
-    // The 0 code is common for aborted and blocked requests
-    error && error.code === 0 && error.message === 'The user aborted a request.'

package/src/Common/AppStatus/AppStatus.tsx

@@ -1,64 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

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

package/src/Common/AppStatus/types.ts

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,30 +0,0 @@
-
-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