Merge branch 'main' into feat/ad-user-group

eshankvaish · web-flow · commit 79c35424c77f · 2024-01-08T13:05:16.000+05:30
diff --git a/.env b/.env
@@ -38,3 +38,5 @@ ANNOUNCEMENT_BANNER_MSG=
 LOGIN_PAGE_IMAGE=
 LOGIN_PAGE_IMAGE_BG=
 HIDE_DEFAULT_CLUSTER=false
+GLOBAL_API_TIMEOUT=60000
+TRIGGER_API_TIMEOUT=60000
diff --git a/config.md b/config.md
@@ -28,5 +28,7 @@
 | LOGIN_PAGE_IMAGE                   | ""         | Login page image url                          |
 | LOGIN_PAGE_IMAGE_BG                | ""         | Login page image background color code        |
 | DEFAULT_CI_TRIGGER_TYPE_MANUAL     | "false"    | Change default trigger behaviour of newly created ci-pipeline to manual |
+| GLOBAL_API_TIMEOUT    |  60000  | Default timeout for all API requests in DASHBOARD  |
+| TRIGGER_API_TIMEOUT   |  60000  | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD  |
 
 # DASHBOARD CONFIG SECRET
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.48",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.50",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",
diff --git a/src/components/CIPipelineN/YAMLScriptComponent.tsx b/src/components/CIPipelineN/YAMLScriptComponent.tsx
@@ -56,7 +56,7 @@ export function YAMLScriptComponent({
                         components={{
                             IndicatorSeparator: null,
                         }}
-                        menuPortalTarget={document.getElementById('visible-modal')}
+                        menuPosition="fixed"
                     />
                 )}
             </div>
diff --git a/src/components/ResourceBrowser/ResourceList/ResourceList.tsx b/src/components/ResourceBrowser/ResourceList/ResourceList.tsx
@@ -310,7 +310,7 @@ export default function ResourceList() {
             !isTerminal &&
             !isNodes
         ) {
-            getResourceListData()
+            selectedResource.gvk.Kind !== SIDEBAR_KEYS.nodeGVK.Kind && getResourceListData()
             setSearchText('')
             setSearchApplied(false)
         } else if (isNodes) {
@@ -634,7 +634,6 @@ export default function ResourceList() {
             setResourceListLoader(true)
             setResourceList(null)
             setFilteredResourceList([])
-
             const resourceListPayload: ResourceListPayloadType = {
                 clusterId: Number(clusterId),
                 k8sRequest: {
diff --git a/src/components/app/create/CreateApp.tsx b/src/components/app/create/CreateApp.tsx
@@ -40,7 +40,7 @@ export class AddNewApp extends Component<AddNewAppProps, AddNewAppState> {
     constructor(props) {
         super(props)
         this.state = {
-            view: ViewType.FORM,
+            view: ViewType.LOADING,
             code: 0,
             projects: [],
             disableForm: false,
@@ -72,6 +72,7 @@ export class AddNewApp extends Component<AddNewAppProps, AddNewAppState> {
     }
 
     async componentDidMount() {
+        this.setState({ view: ViewType.LOADING })
         try {
             const { result } = await getTeamListMin()
             sortObjectArrayAlphabetically(result, 'name')
diff --git a/src/components/app/details/appConfig/AppComposeRouter.tsx b/src/components/app/details/appConfig/AppComposeRouter.tsx
@@ -59,7 +59,7 @@ export default function AppComposeRouter({
     isBaseConfigProtected,
     reloadEnvironments,
     configProtectionData,
-    filteredEnvIds
+    filteredEnvIds,
 }: AppComposeRouterProps) {
     const { path } = useRouteMatch()
     const renderJobViewRoutes = (): JSX.Element => {
@@ -205,7 +205,7 @@ export default function AppComposeRouter({
                     </Route>,
                     <Route
                         key={`${path}/${URLS.APP_ENV_OVERRIDE_CONFIG}`}
-                        path={`${path}/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId(\\d+)?/:name?`}
+                        path={`${path}/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId(\\d+)?`}
                         render={(props) => (
                             <EnvironmentOverride environments={environments} reloadEnvironments={reloadEnvironments} />
                         )}
diff --git a/src/components/app/details/appDetails/AppDetails.tsx b/src/components/app/details/appDetails/AppDetails.tsx
@@ -1442,7 +1442,7 @@ export function TimeRangeSelector({
                 options={options.map((time) => ({ label: time, value: time }))}
                 value={{ label: selectedRange, value: selectedRange }}
                 onChange={(selected) => selectRange(selected.value)}
-                menuPortalTarget={document.body}
+                menuPosition="fixed"
                 components={{ IndicatorSeparator: null, ValueContainer, Option }}
                 styles={{
                     ...multiSelectStyles,
diff --git a/src/components/app/details/cicdHistory/Sidebar.tsx b/src/components/app/details/cicdHistory/Sidebar.tsx
@@ -133,7 +133,7 @@ const Sidebar = React.memo(
                             DropdownIndicator,
                         }}
                         styles={FILTER_STYLE}
-                        menuPortalTarget={document.body}
+                        menuPosition="fixed"
                     />
                 </div>
 
diff --git a/src/components/app/details/cicdHistory/TriggerDetails.tsx b/src/components/app/details/cicdHistory/TriggerDetails.tsx
@@ -176,33 +176,58 @@ const WorkerStatus = React.memo(
 const ProgressingStatus = React.memo(
     ({ status, message, podStatus, stage, type, finishedOn, workerPodName }: ProgressingStatusType): JSX.Element => {
         const [aborting, setAborting] = useState(false)
-        const [abortConfirmation, setAbortConfiguration] = useState(false)
+        const [abortConfirmation, setAbortConfirmation] = useState(false)
+        const [abortError, setAbortError] = useState<{
+            status: boolean
+            message: string
+        }>({
+            status: false,
+            message: '',
+        })
         const { buildId, triggerId, pipelineId } = useParams<{
             buildId: string
             triggerId: string
             pipelineId: string
         }>()
         let abort = null
         if (type === HistoryComponentType.CI) {
-            abort = () => cancelCiTrigger({ pipelineId, workflowId: buildId })
+            abort = (isForceAbort: boolean) => cancelCiTrigger({ pipelineId, workflowId: buildId }, isForceAbort)
         } else if (stage !== 'DEPLOY') {
             abort = () => cancelPrePostCdTrigger(pipelineId, triggerId)
         }
 
         async function abortRunning() {
             setAborting(true)
-            const [error] = await asyncWrap(abort())
-            setAborting(false)
-            if (error) {
-                showError(error)
-            } else {
+            try {
+                await abort(abortError.status)
                 toast.success('Build Aborted')
-                setAbortConfiguration(false)
+                setAbortConfirmation(false)
+                setAbortError({
+                    status: false,
+                    message: '',
+                })
+            } catch (error) {
+                setAborting(false)
+                setAbortConfirmation(false)
+                if (error['code'] === 400) {
+                    // code 400 is for aborting a running build
+                    const errors = error['errors']
+                    setAbortError({
+                        status: true,
+                        message: errors[0].userMessage,
+                    })
+                }
             }
         }
 
         const toggleAbortConfiguration = (): void => {
-            setAbortConfiguration(not)
+            setAbortConfirmation(not)
+        }
+        const closeForceAbortModal = (): void => {
+            setAbortError({
+                status: false,
+                message: '',
+            })
         }
         return (
             <>
@@ -252,6 +277,29 @@ const ProgressingStatus = React.memo(
                         </ConfirmationDialog.ButtonGroup>
                     </ConfirmationDialog>
                 )}
+                {abortError.status && (
+                    <ConfirmationDialog>
+                        <ConfirmationDialog.Icon src={warn} />
+                        <ConfirmationDialog.Body title="Could not abort build!" />
+                        <div className="w-100 bc-n50 h-36 flexbox dc__align-items-center">
+                            <span className="pl-12">Error: {abortError.message}</span>
+                        </div>
+                        <div className="fs-13 fw-6 pt-12 cn-7 lh-1-54">
+                            <span>Please try to force abort</span>
+                        </div>
+                        <div className="pt-4 fw-4 cn-7 lh-1-54">
+                            <span>Some resource might get orphaned which will be cleaned up with Job-lifecycle</span>
+                        </div>
+                        <ConfirmationDialog.ButtonGroup>
+                            <button type="button" className="cta cancel" onClick={closeForceAbortModal}>
+                                Cancel
+                            </button>
+                            <button type="button" className="cta delete" onClick={abortRunning}>
+                                {aborting ? <Progressing /> : 'Force Abort'}
+                            </button>
+                        </ConfirmationDialog.ButtonGroup>
+                    </ConfirmationDialog>
+                )}
             </>
         )
     },
diff --git a/src/components/app/service.ts b/src/components/app/service.ts
@@ -9,7 +9,7 @@ import {
     DeploymentNodeType,
     put,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { createGitCommitUrl, handleUTCTime, ISTTimeModal } from '../common'
+import { createGitCommitUrl, getAPIOptionsWithTriggerTimeout, handleUTCTime, ISTTimeModal } from '../common'
 import moment from 'moment-timezone'
 import { History } from './details/cicdHistory/types'
 import { AppDetails, ArtifactsCiJob, EditAppRequest } from './types'
@@ -282,8 +282,8 @@ export function extractImage(image: string): string {
     return image ? image.split(':').pop() : ''
 }
 
-export const cancelCiTrigger = (params) => {
-    let URL = `${Routes.CI_CONFIG_GET}/${params.pipelineId}/workflow/${params.workflowId}`
+export const cancelCiTrigger = (params, isForceAbort) => {
+    let URL = `${Routes.CI_CONFIG_GET}/${params.pipelineId}/workflow/${params.workflowId}?forceAbort=${isForceAbort}`
     return trash(URL)
 }
 
@@ -334,7 +334,9 @@ export const triggerCDNode = (
             request['wfrIdForDeploymentWithSpecificTrigger'] = wfrId
         }
     }
-    return post(Routes.CD_TRIGGER_POST, request)
+    const options = getAPIOptionsWithTriggerTimeout()
+
+    return post(Routes.CD_TRIGGER_POST, request, options)
 }
 
 export const triggerBranchChange = (appIds: number[], envId: number, value: string) => {
diff --git a/src/components/cdPipeline/BuildCD.tsx b/src/components/cdPipeline/BuildCD.tsx
@@ -329,9 +329,9 @@ export default function BuildCD({
             <>
                 <div className="form__row form__row--flex mt-12">
                     <div className="w-50 mr-8">
-                        <div className="form__label">Environment*</div>
+                        <div className="form__label dc__required-field">Environment</div>
                         <ReactSelect
-                            menuPortalTarget={isAdvanced ? null : document.getElementById('visible-modal')}
+                            menuPosition={isAdvanced ? null : "fixed"}
                             closeMenuOnScroll={true}
                             isDisabled={!!cdPipelineId}
                             classNamePrefix="cd-pipeline-environment-dropdown"
@@ -549,7 +549,7 @@ export default function BuildCD({
                 <p className="fs-14 fw-6 cn-9 mb-8 mt-16">Deployment Strategy</p>
                 <p className="fs-13 fw-5 cn-7 mb-8">Configure deployment preferences for this pipeline</p>
                 <ReactSelect
-                    menuPortalTarget={document.getElementById('visible-modal')}
+                    menuPosition="fixed"
                     closeMenuOnScroll={true}
                     classNamePrefix="deployment-strategy-dropdown"
                     isSearchable={false}
diff --git a/src/components/cdPipeline/CDPipeline.tsx b/src/components/cdPipeline/CDPipeline.tsx
@@ -1208,7 +1208,7 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
                 <div className="form__row">
                     <label className="form__label form__label--sentence dc__bold">Select Configmap and Secrets</label>
                     <ReactSelect
-                        menuPortalTarget={this.state.isAdvanced ? null : document.getElementById('visible-modal')}
+                        menuPosition={this.state.isAdvanced ? null : "fixed"}
                         closeMenuOnScroll={true}
                         classNamePrefix="select-config-secret-dropdown"
                         isMulti={true}
@@ -1483,7 +1483,7 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
                     <div className="w-50 mr-8">
                         <div className="form__label dc__required-field">Environment</div>
                         <ReactSelect
-                            menuPortalTarget={this.state.isAdvanced ? null : document.getElementById('visible-modal')}
+                            menuPosition={this.state.isAdvanced ? null : "fixed"}
                             closeMenuOnScroll={true}
                             isDisabled={!!this.props.match.params.cdPipelineId}
                             classNamePrefix="cd-pipeline-environment-dropdown"
@@ -1761,7 +1761,7 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
                         <p className="fs-14 fw-6 cn-9 mb-8 mt-20">Deployment Strategy</p>
                         <p className="fs-13 fw-5 cn-7 mb-8">Configure deployment preferences for this pipeline</p>
                         <ReactSelect
-                            menuPortalTarget={document.getElementById('visible-modal')}
+                            menuPosition="fixed"
                             closeMenuOnScroll={true}
                             classNamePrefix="deployment-strategy-dropdown"
                             isSearchable={false}
diff --git a/src/components/cdPipeline/NewCDPipeline.tsx b/src/components/cdPipeline/NewCDPipeline.tsx
@@ -816,6 +816,13 @@ export default function NewCDPipeline({
                         getWorkflows()
                     }
                 }
+                else if(response.errors){
+                    setDeleteDialog(DeleteDialogType.showForceDeleteDialog)
+                    setForceDeleteData({
+                        forceDeleteDialogTitle: 'Something went wrong',
+                        forceDeleteDialogMessage: response.errors[0].userMessage,
+                    })
+                }
             })
             .catch((error: ServerErrors) => {
                 // 412 is for linked pipeline and 403 is for RBAC
diff --git a/src/components/charts/charts.service.ts b/src/components/charts/charts.service.ts
@@ -1,6 +1,6 @@
 import { get, post, put, trash, sortCallback, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
 import { DELETE_ACTION, Routes } from '../../config'
-import { handleUTCTime } from '../common'
+import { getAPIOptionsWithTriggerTimeout, handleUTCTime } from '../common'
 import { ChartValuesType, ChartGroup, HelmTemplateChartRequest, HelmProjectUpdatePayload } from './charts.types'
 import { SavedValueListResponse } from './SavedValues/types'
 
@@ -26,11 +26,13 @@ export function getInstalledAppDetail(installedAppId, envId) {
 }
 
 export function installChart(request) {
-    return post(`app-store/deployment/application/install`, request)
+    const options = getAPIOptionsWithTriggerTimeout()
+    return post(`app-store/deployment/application/install`, request, options)
 }
 
 export function updateChart(request) {
-    return put(Routes.UPDATE_APP_API, request)
+    const options = getAPIOptionsWithTriggerTimeout()
+    return put(Routes.UPDATE_APP_API, request, options)
 }
 
 export function deleteInstalledChart(installedAppId: string | number, isGitops?: boolean, deleteAction?: DELETE_ACTION) {
@@ -124,13 +126,15 @@ interface ChartValuesCreate {
 }
 
 export function createChartValues(request: ChartValuesCreate) {
+    const options = getAPIOptionsWithTriggerTimeout()
     const URL = `${Routes.CHART_STORE}/${Routes.CHART_STORE_VALUES}/${Routes.CHART_VALUES}`
-    return post(URL, request)
+    return post(URL, request, options)
 }
 
 export function updateChartValues(request) {
+    const options = getAPIOptionsWithTriggerTimeout()
     const URL = `${Routes.CHART_STORE}/${Routes.CHART_STORE_VALUES}/${Routes.CHART_VALUES}`
-    return put(URL, request)
+    return put(URL, request, options)
 }
 
 export function deleteChartValues(chartId: number): Promise<any> {
@@ -218,8 +222,9 @@ export interface DeployableCharts {
 }
 
 export function deployChartGroup(projectId: number, charts: DeployableCharts[], chartGroupId?: number) {
+    const options = getAPIOptionsWithTriggerTimeout()
     // chartGroupId empty when normal deployment
-    return post(`app-store/group/install`, { projectId, chartGroupId, charts })
+    return post(`app-store/group/install`, { projectId, chartGroupId, charts }, options)
 }
 
 interface appName {
diff --git a/src/components/charts/list/DiscoverCharts.tsx b/src/components/charts/list/DiscoverCharts.tsx
@@ -213,6 +213,7 @@ function DiscoverChartList({isSuperAdmin} : {isSuperAdmin: boolean}) {
         }
         try {
             setInstalling(true)
+            // NOTE: This validation call also goes inside component as well discuss about it
             const validated = await validateData()
             if (!validated) {
                 toast.warn('Click on highlighted charts and resolve errors.', { autoClose: 5000 })
diff --git a/src/components/ciPipeline/SourceMaterials.tsx b/src/components/ciPipeline/SourceMaterials.tsx
@@ -161,7 +161,7 @@ export const SourceMaterials: React.FC<SourceMaterialsProps> = function (props)
                                             placeholder="Source Type"
                                             classNamePrefix={`select-build-pipeline-sourcetype-${index}`}
                                             isSearchable={false}
-                                            menuPortalTarget={document.getElementById('visible-modal')}
+                                            menuPosition="fixed"
                                             options={
                                                 !isMultiGit
                                                     ? props.ciPipelineSourceTypeOptions
diff --git a/src/components/cluster/UseNameListDropdown.tsx b/src/components/cluster/UseNameListDropdown.tsx
@@ -25,7 +25,7 @@ export default function UserNameDropDownList({ clusterDetail, selectedUserNameOp
                 options={userNameOptions}
                 value={selectedUserNameOptions[clusterDetail.cluster_name]}
                 isSearchable={false}
-                menuPortalTarget={document.getElementById('visible-modal')}
+                menuPosition="fixed"
                 onChange={handleUserChange}
                 menuPlacement="auto"
                 components={{
diff --git a/src/components/common/GitCommitInfoGeneric.tsx b/src/components/common/GitCommitInfoGeneric.tsx
@@ -257,15 +257,15 @@ export default function GitCommitInfoGeneric({
                                 <a
                                     href={`${_webhookData.data['git url']}`}
                                     target="_blank"
-                                    rel="noopener noreferer"
+                                    rel="noopener noreferrer"
                                     className="dc__no-decor cb-5"
                                 >
                                     View git url
                                 </a>
                             ) : null}
                         </div>
                         {selectedCommitInfo ? (
-                            <div className="material-history__select-text material-history__header">
+                            <div className="material-history__select-text flexbox dc__align-items-center dc__content-end fs-12">
                                 {_lowerCaseCommitInfo.isselected ? <Check className="dc__align-right" /> : 'Select'}
                             </div>
                         ) : null}
diff --git a/src/components/common/helpers/Helpers.tsx b/src/components/common/helpers/Helpers.tsx
diff --git a/src/components/deploymentConfig/DeploymentTemplateView/DeploymentConfigFormCTA.tsx b/src/components/deploymentConfig/DeploymentTemplateView/DeploymentConfigFormCTA.tsx
diff --git a/src/components/external-apps/ExternalAppService.ts b/src/components/external-apps/ExternalAppService.ts
diff --git a/src/components/security/SecurityPolicyEdit.tsx b/src/components/security/SecurityPolicyEdit.tsx
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx
diff --git a/src/components/workflowEditor/workflowEditor.tsx b/src/components/workflowEditor/workflowEditor.tsx
diff --git a/src/index.tsx b/src/index.tsx
