@devtron-labs/devtron-fe-common-lib 0.0.37-beta-3 → 0.0.37-beta-4

package/dist/Common/AppStatus/AppStatus.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AppStatusType } from './types';
+export default function AppStatus({ appStatus, isDeploymentStatus, isJobView, isVirtualEnv, hideStatusMessage, }: AppStatusType): JSX.Element;

package/dist/Common/AppStatus/constants.d.ts

@@ -0,0 +1,51 @@
+export declare const StatusConstants: {
+    NOT_DEPLOYED: {
+        noSpaceLower: string;
+        normalCase: string;
+        lowerCase: string;
+    };
+    APP_STATUS: {
+        noSpaceLower: string;
+        normalText: string;
+    };
+    PROJECT: {
+        pluralLower: string;
+        lowerCase: string;
+    };
+    CLUSTER: {
+        pluralLower: string;
+        lowerCase: string;
+    };
+    NAMESPACE: {
+        pluralLower: string;
+        lowerCase: string;
+    };
+    ENVIRONMENT: {
+        pluralLower: string;
+        lowerCase: string;
+    };
+    NOT_AVILABLE: {
+        normalCase: string;
+    };
+};
+export declare 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 declare const YET_TO_RUN = "Yet to run";

package/dist/Common/AppStatus/index.d.ts

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

package/dist/Common/AppStatus/types.d.ts

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

package/dist/Common/AppStatus/utils.d.ts

@@ -0,0 +1 @@
+export declare const triggerStatus: (triggerDetailStatus: string) => string;

package/dist/Common/Common.service.d.ts

@@ -1,4 +1,4 @@
-import { TeamList, ResponseType, DeploymentNodeType, CDMaterialServiceEnum, CDMaterialServiceQueryParams, CDMaterialResponseType } from './Types';
+import { TeamList, ResponseType, DeploymentNodeType } from './Types';
 export declare const getTeamListMin: () => Promise<TeamList>;
 interface UserRole extends ResponseType {
     result?: {
@@ -13,7 +13,7 @@ export declare const SourceTypeMap: {
 };
 export declare function getUserRole(appName?: string): Promise<UserRole>;
 export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType>;
-export declare const genericCDMaterialsService: (serviceType: CDMaterialServiceEnum, cdMaterialID: number, stage: DeploymentNodeType, signal: AbortSignal, queryParams?: CDMaterialServiceQueryParams) => Promise<CDMaterialResponseType>;
+export declare const getCDMaterials: (cdMaterialId: any, stageType: DeploymentNodeType, abortSignal: AbortSignal, isApprovalNode?: boolean, imageTag?: string) => Promise<any>;
 export declare function extractImage(image: string): string;
 export declare function createGitCommitUrl(url: string, revision: string): string;
 export {};

package/dist/Common/Constants.d.ts

@@ -19,7 +19,6 @@ export declare const ROUTES: {
     PROJECT_LIST_MIN: string;
     USER_CHECK_ROLE: string;
     IMAGE_TAGGING: string;
-    CD_MATERIAL_GET: string;
 };
 export declare enum KEY_VALUE {
     KEY = "key",

package/dist/Common/Helper.d.ts

@@ -51,4 +51,5 @@ export declare const closeOnEscKeyPressed: (e: any, actionClose: () => void) =>
  */
 export declare function copyToClipboard(str: any, callback?: typeof noop): void;
 export declare function useAsync<T>(func: (...rest: any[]) => Promise<T>, dependencyArray?: any[], shouldRun?: boolean, options?: AsyncOptions): [boolean, T, any | null, () => void, React.Dispatch<any>, any[]];
+export declare const processDeployedTime: (lastDeployed: any, isArgoInstalled: any) => string;
 export {};

package/dist/Common/Types.d.ts

@@ -202,9 +202,6 @@ export declare enum FilterStates {
     BLOCKED = 1,
     ERROR = 2
 }
-export declare enum MaterialDataSource {
-    EXTERNAL = "ext"
-}
 export interface CDMaterialType {
     index: number;
     id: string;
@@ -231,31 +228,6 @@ export interface CDMaterialType {
     imageReleaseTags?: ReleaseTag[];
     artifactStatus?: string;
     filterState: FilterStates;
-    scanToolId?: number;
-    appliedFiltersTimestamp?: string;
-    appliedFilters?: FilterConditionsListType[];
-    appliedFiltersState?: FilterStates;
-    createdTime?: string;
-    deployed?: boolean;
-    dataSource?: MaterialDataSource;
-}
-export declare enum CDMaterialServiceEnum {
-    ROLLBACK = "rollback",
-    CD_MATERIALS = "cd-materials"
-}
-export declare enum CDMaterialResourceQuery {
-    PENDING_APPROVAL = "PENDING_APPROVAL"
-}
-export declare enum CDMaterialFilterQuery {
-    RESOURCE = "ELIGIBLE_RESOURCES",
-    ALL = "ALL_RESOURCES"
-}
-export interface CDMaterialServiceQueryParams {
-    search?: string;
-    offset?: number;
-    size?: number;
-    resource?: CDMaterialResourceQuery;
-    filter?: CDMaterialFilterQuery;
 }
 export interface CommonNodeAttr {
     connectingCiPipelineId?: number;
@@ -362,21 +334,15 @@ export interface FilterConditionsListType {
     description: string;
     conditions: FilterConditionsInfo[];
 }
-export interface CDMaterialsApprovalInfo {
+export interface CDMaterialResponseType {
     approvalUsers: string[];
+    materials: any[];
     userApprovalConfig: UserApprovalConfigType;
     requestedUserId: number;
-}
-export interface CDMaterialsMetaInfo {
     tagsEditable: boolean;
     appReleaseTagNames: string[];
     hideImageTaggingHardDelete: boolean;
     resourceFilters?: FilterConditionsListType[];
-    totalCount: number;
-    canApproverDeploy: boolean;
-}
-export interface CDMaterialResponseType extends CDMaterialsMetaInfo, CDMaterialsApprovalInfo {
-    materials: CDMaterialType[];
 }
 export interface InputDetailType {
     label: string;

package/dist/Common/index.d.ts

@@ -39,3 +39,4 @@ export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch';
 export { default as Grid } from './Grid/Grid';
 export { default as ClipboardButton } from './ClipboardButton/ClipboardButton';
 export * from './Hooks';
+export { AppStatus } from './AppStatus';

package/dist/index.js

@@ -44,7 +44,6 @@ var ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING: 'app/image-tagging',
-    CD_MATERIAL_GET: 'app/cd-pipeline'
 };
 exports.KEY_VALUE = void 0;
 (function (KEY_VALUE) {
@@ -431,24 +430,6 @@ exports.FilterStates = void 0;
     FilterStates[FilterStates["BLOCKED"] = 1] = "BLOCKED";
     FilterStates[FilterStates["ERROR"] = 2] = "ERROR";
 })(exports.FilterStates || (exports.FilterStates = {}));
-exports.MaterialDataSource = void 0;
-(function (MaterialDataSource) {
-    MaterialDataSource["EXTERNAL"] = "ext";
-})(exports.MaterialDataSource || (exports.MaterialDataSource = {}));
-exports.CDMaterialServiceEnum = void 0;
-(function (CDMaterialServiceEnum) {
-    CDMaterialServiceEnum["ROLLBACK"] = "rollback";
-    CDMaterialServiceEnum["CD_MATERIALS"] = "cd-materials";
-})(exports.CDMaterialServiceEnum || (exports.CDMaterialServiceEnum = {}));
-exports.CDMaterialResourceQuery = void 0;
-(function (CDMaterialResourceQuery) {
-    CDMaterialResourceQuery["PENDING_APPROVAL"] = "PENDING_APPROVAL";
-})(exports.CDMaterialResourceQuery || (exports.CDMaterialResourceQuery = {}));
-exports.CDMaterialFilterQuery = void 0;
-(function (CDMaterialFilterQuery) {
-    CDMaterialFilterQuery["RESOURCE"] = "ELIGIBLE_RESOURCES";
-    CDMaterialFilterQuery["ALL"] = "ALL_RESOURCES";
-})(exports.CDMaterialFilterQuery || (exports.CDMaterialFilterQuery = {}));
 exports.DeploymentAppTypes = void 0;
 (function (DeploymentAppTypes) {
     DeploymentAppTypes["HELM"] = "helm";
@@ -10239,7 +10220,15 @@ function useAsync(func, dependencyArray, shouldRun, options) {
         }
     };
     return [state.loading, state.result, state.error, reload, setResult, state.dependencies];
-}
+}
+var processDeployedTime = function (lastDeployed, isArgoInstalled) {
+    if (lastDeployed) {
+        return handleUTCTime(lastDeployed, true);
+    }
+    else {
+        return isArgoInstalled ? '' : 'Not deployed';
+    }
+};
 
 function Progressing(_a) {
     var pageLoader = _a.pageLoader, size = _a.size, theme = _a.theme, styles = _a.styles, fillColor = _a.fillColor;
@@ -22708,170 +22697,77 @@ function getUserRole(appName) {
 function setImageTags(request, pipelineId, artifactId) {
     return post("".concat(ROUTES.IMAGE_TAGGING, "/").concat(pipelineId, "/").concat(artifactId), request);
 }
-var processURL = function (url, params) {
-    var validParams = Object.keys(params).filter(function (key) {
-        return params[key] != null;
-    });
-    if (!validParams.length) {
-        return url;
-    }
-    var queryString = validParams
-        .map(function (key) {
-        if (Array.isArray(params[key])) {
-            return "".concat(key, "=").concat(params[key].join(','));
-        }
-        return "".concat(key, "=").concat(params[key]);
-    })
-        .join('&');
-    return "".concat(url, "?").concat(queryString);
-};
-var cdMaterialListModal = function (artifacts, offset, artifactId, artifactStatus) {
-    if (!artifacts || !artifacts.length)
-        return [];
-    var markFirstSelected = offset === 0;
-    var startIndex = offset;
-    var isImageMarked = false;
-    var materials = artifacts.map(function (material, index) {
-        var _a, _b, _c, _d, _e, _f;
-        var artifactStatusValue = '';
-        var filterState = (_a = material.filterState) !== null && _a !== void 0 ? _a : exports.FilterStates.ALLOWED;
-        if (artifactId && artifactStatus && material.id === artifactId) {
-            artifactStatusValue = artifactStatus;
+// FIXME: This is only returning materials to cater the case of search in approval but it should be a common function service coming from dashboard.
+var getCDMaterials = function (cdMaterialId, stageType, abortSignal, isApprovalNode, imageTag) {
+    var URL = (!imageTag) ? "app/cd-pipeline/".concat(cdMaterialId, "/material?stage=").concat(stageMap[stageType]) : "app/cd-pipeline/".concat(cdMaterialId, "/material?stage=").concat(stageMap[stageType], "&search=").concat(imageTag);
+    return get(URL, {
+        signal: abortSignal,
+    }).then(function (response) {
+        var _a;
+        var artifacts = (_a = response.result.ci_artifacts) !== null && _a !== void 0 ? _a : [];
+        if (!response.result) {
+            return {
+                materials: [],
+            };
         }
-        var selectImage = !isImageMarked && markFirstSelected && filterState === exports.FilterStates.ALLOWED ? !material.vulnerable : false;
-        if (selectImage) {
-            isImageMarked = true;
+        else {
+            var materials = artifacts.map(function (material, index) {
+                var _a;
+                var artifactStatusValue = '';
+                var filterState = (_a = material.filterState) !== null && _a !== void 0 ? _a : exports.FilterStates.ALLOWED;
+                return {
+                    index: index,
+                    id: material.id,
+                    deployedTime: material.deployed_time
+                        ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
+                        : 'Not Deployed',
+                    deployedBy: material.deployedBy,
+                    wfrId: material.wfrId,
+                    image: extractImage(material.image),
+                    showChanges: false,
+                    vulnerabilities: [],
+                    buildTime: material.build_time || '',
+                    tab: CDModalTab.Changes,
+                    showSourceInfo: false,
+                    deployed: material.deployed || false,
+                    latest: material.latest || false,
+                    vulnerabilitiesLoading: true,
+                    scanned: material.scanned,
+                    scanEnabled: material.scanEnabled,
+                    isSelected: !material.vulnerable && filterState === exports.FilterStates.ALLOWED && index === 0,
+                    vulnerable: material.vulnerable,
+                    runningOnParentCd: material.runningOnParentCd,
+                    artifactStatus: artifactStatusValue,
+                    userApprovalMetadata: material.userApprovalMetadata,
+                    triggeredBy: material.triggeredBy,
+                    isVirtualEnvironment: material.isVirtualEnvironment,
+                    imageComment: material.imageComment,
+                    imageReleaseTags: material.imageReleaseTags,
+                    materialInfo: material.material_info
+                        ? material.material_info.map(function (mat) {
+                            return {
+                                modifiedTime: mat.modifiedTime ? moment(mat.modifiedTime).format("ddd, DD MMM YYYY, hh:mm A") : '',
+                                commitLink: createGitCommitUrl(mat.url, mat.revision),
+                                author: mat.author || '',
+                                message: mat.message || '',
+                                revision: mat.revision || '',
+                                tag: mat.tag || '',
+                                webhookData: mat.webhookData || '',
+                                url: mat.url || '',
+                                branch: (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
+                                    ? material.ciConfigureSourceValue
+                                    : mat.branch) || '',
+                                type: material.ciConfigureSourceType || '',
+                            };
+                        })
+                        : [],
+                    filterState: filterState,
+                };
+            });
+            return {
+                materials: materials
+            };
         }
-        return {
-            index: startIndex + index,
-            id: material.id,
-            deployedTime: material.deployed_time
-                ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                : 'Not Deployed',
-            deployedBy: material.deployedBy,
-            wfrId: material.wfrId,
-            tab: CDModalTab.Changes,
-            image: extractImage(material.image),
-            showChanges: false,
-            vulnerabilities: [],
-            buildTime: material.build_time || '',
-            isSelected: selectImage,
-            showSourceInfo: false,
-            deployed: material.deployed || false,
-            latest: material.latest || false,
-            vulnerabilitiesLoading: true,
-            scanned: material.scanned,
-            scanEnabled: material.scanEnabled,
-            vulnerable: material.vulnerable,
-            runningOnParentCd: material.runningOnParentCd,
-            artifactStatus: artifactStatusValue,
-            userApprovalMetadata: material.userApprovalMetadata,
-            triggeredBy: material.triggeredBy,
-            isVirtualEnvironment: material.isVirtualEnvironment,
-            imageComment: material.imageComment,
-            imageReleaseTags: material.imageReleaseTags,
-            // It is going to be null but required in type so can't remove
-            lastExecution: material.lastExecution,
-            materialInfo: material.material_info
-                ? material.material_info.map(function (mat) {
-                    return {
-                        modifiedTime: mat.modifiedTime
-                            ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
-                            : '',
-                        commitLink: createGitCommitUrl(mat.url, mat.revision),
-                        author: mat.author || '',
-                        message: mat.message || '',
-                        revision: mat.revision || '',
-                        tag: mat.tag || '',
-                        webhookData: mat.webhookData || '',
-                        url: mat.url || '',
-                        branch: (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
-                            ? material.ciConfigureSourceValue
-                            : mat.branch) || '',
-                        type: material.ciConfigureSourceType || '',
-                    };
-                })
-                : [],
-            filterState: filterState,
-            appliedFiltersTimestamp: (_b = material.appliedFiltersTimestamp) !== null && _b !== void 0 ? _b : '',
-            appliedFilters: (_c = material.appliedFilters) !== null && _c !== void 0 ? _c : [],
-            appliedFiltersState: (_d = material.appliedFiltersState) !== null && _d !== void 0 ? _d : exports.FilterStates.ALLOWED,
-            createdTime: (_e = material.createdTime) !== null && _e !== void 0 ? _e : '',
-            dataSource: (_f = material.data_source) !== null && _f !== void 0 ? _f : '',
-        };
-    });
-    return materials;
-};
-var processCDMaterialsApprovalInfo = function (enableApproval, cdMaterialsResult) {
-    if (!enableApproval) {
-        return {
-            approvalUsers: [],
-            userApprovalConfig: null,
-            requestedUserId: 0,
-        };
-    }
-    return {
-        approvalUsers: cdMaterialsResult.approvalUsers,
-        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
-        requestedUserId: cdMaterialsResult.requestedUserId,
-    };
-};
-var processCDMaterialsMetaInfo = function (cdMaterialsResult) {
-    var _a, _b, _c, _d;
-    if (!cdMaterialsResult) {
-        return {
-            tagsEditable: false,
-            appReleaseTagNames: [],
-            hideImageTaggingHardDelete: false,
-            resourceFilters: [],
-            totalCount: 0,
-            canApproverDeploy: (_a = cdMaterialsResult.canApproverDeploy) !== null && _a !== void 0 ? _a : false,
-        };
-    }
-    return {
-        appReleaseTagNames: cdMaterialsResult.appReleaseTagNames,
-        tagsEditable: cdMaterialsResult.tagsEditable,
-        hideImageTaggingHardDelete: cdMaterialsResult.hideImageTaggingHardDelete,
-        resourceFilters: (_b = cdMaterialsResult.resourceFilters) !== null && _b !== void 0 ? _b : [],
-        totalCount: (_c = cdMaterialsResult.totalCount) !== null && _c !== void 0 ? _c : 0,
-        canApproverDeploy: (_d = cdMaterialsResult.canApproverDeploy) !== null && _d !== void 0 ? _d : false,
-    };
-};
-var processCDMaterialServiceResponse = function (cdMaterialsResult, stage, offset, filter) {
-    if (!cdMaterialsResult) {
-        return __assign(__assign({ materials: [] }, processCDMaterialsMetaInfo(cdMaterialsResult)), processCDMaterialsApprovalInfo(false, cdMaterialsResult));
-    }
-    var materials = cdMaterialListModal(cdMaterialsResult.ci_artifacts, offset !== null && offset !== void 0 ? offset : 0, cdMaterialsResult.latest_wf_artifact_id, cdMaterialsResult.latest_wf_artifact_status);
-    var approvalInfo = processCDMaterialsApprovalInfo(stage === exports.DeploymentNodeType.CD || stage === exports.DeploymentNodeType.APPROVAL, cdMaterialsResult);
-    var metaInfo = processCDMaterialsMetaInfo(cdMaterialsResult);
-    // TODO: On update of service would remove from here
-    var filteredMaterials = filter && filter === exports.CDMaterialFilterQuery.RESOURCE
-        ? materials.filter(function (material) {
-            return material.filterState === exports.FilterStates.ALLOWED;
-        })
-        : materials;
-    return __assign(__assign({ materials: filteredMaterials }, approvalInfo), metaInfo);
-};
-var getSanitizedQueryParams = function (queryParams) {
-    queryParams.filter; var rest = __rest(queryParams, ["filter"]);
-    return rest;
-};
-var genericCDMaterialsService = function (serviceType, cdMaterialID, stage, signal, queryParams) {
-    if (queryParams === void 0) { queryParams = {}; }
-    // TODO: On update of service would remove from here
-    var manipulatedParams = getSanitizedQueryParams(queryParams);
-    var URL;
-    switch (serviceType) {
-        case exports.CDMaterialServiceEnum.ROLLBACK:
-            URL = processURL("".concat(ROUTES.CD_MATERIAL_GET, "/").concat(cdMaterialID, "/material/rollback"), manipulatedParams);
-            break;
-        // Meant for handling getCDMaterialList
-        default:
-            URL = processURL("".concat(ROUTES.CD_MATERIAL_GET, "/").concat(cdMaterialID, "/material"), __assign(__assign({}, manipulatedParams), { stage: stageMap[stage] }));
-            break;
-    }
-    return get(URL, { signal: signal }).then(function (response) {
-        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter);
     });
 };
 function extractImage(image) {
@@ -23238,9 +23134,7 @@ var SvgIcEnter = function SvgIcEnter(props) {
 };
 
 var ImageTagsContainer = function (_a) {
-    var 
-    // Setting it to zero in case of external pipeline
-    ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, updateCurrentAppMaterial = _a.updateCurrentAppMaterial, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode, hideHardDelete = _a.hideHardDelete, forceReInit = _a.forceReInit, isSuperAdmin = _a.isSuperAdmin;
+    var ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, updateCurrentAppMaterial = _a.updateCurrentAppMaterial, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode, hideHardDelete = _a.hideHardDelete, forceReInit = _a.forceReInit, isSuperAdmin = _a.isSuperAdmin;
     var _b = __read(React.useState(imageReleaseTags ? imageReleaseTags : []), 2), initialTags = _b[0], setInitialTags = _b[1];
     var _c = __read(React.useState(imageComment ? imageComment.comment : ''), 2), initialDescription = _c[0], setInitialDescription = _c[1];
     var _d = __read(React.useState(appReleaseTagNames ? appReleaseTagNames : []), 2), existingTags = _d[0], setExistingTags = _d[1];
@@ -23254,7 +23148,6 @@ var ImageTagsContainer = function (_a) {
     var _m = __read(React.useState([]), 2), hardDeleteTags = _m[0], setHardDeleteTags = _m[1];
     var _o = __read(React.useState(''), 2), descriptionValidationMessage = _o[0], setDescriptionValidationMessage = _o[1];
     var _p = __read(React.useState(''), 2), textInput = _p[0], setTextInput = _p[1];
-    var _q = __read(React.useState(false), 2), loading = _q[0], setLoading = _q[1];
     React.useEffect(function () {
         reInitState();
     }, [imageReleaseTags, imageComment, tagsEditable]);
@@ -23402,8 +23295,7 @@ var ImageTagsContainer = function (_a) {
                 hardDeleteTags: hardDeleteTags,
             };
             // set loading state true
-            setLoading(true);
-            setImageTags(payload, ciPipelineId !== null && ciPipelineId !== void 0 ? ciPipelineId : 0, artifactId)
+            setImageTags(payload, ciPipelineId, artifactId)
                 .then(function (res) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                 var tags = (_b = (_a = res.result) === null || _a === void 0 ? void 0 : _a.imageReleaseTags) === null || _b === void 0 ? void 0 : _b.map(function (tag) { return ({
@@ -23442,9 +23334,6 @@ var ImageTagsContainer = function (_a) {
                 else {
                     showError(err);
                 }
-            })
-                .finally(function () {
-                setLoading(false);
             });
             return [2 /*return*/];
         });
@@ -23495,10 +23384,10 @@ var ImageTagsContainer = function (_a) {
                         }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea fs-13", style: { height: '90px !important' } }) })), descriptionValidationMessage !== '' && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 handleCancel();
-                            }, disabled: loading }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
+                            } }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 onClickSave();
-                            }, disabled: loading }, { children: loading ? jsxRuntime.jsx(Progressing, {}) : 'Save' }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 lh-20 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
+                            } }, { children: "Save" }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 lh-20 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
                                         stopPropagation(e);
                                         handleTagSoftDelete(index);
                                     }, onHardDeleteClick: function (e) {
@@ -23727,6 +23616,101 @@ var useSuperAdmin = function () {
     return { isSuperAdmin: isSuperAdmin };
 };
 
+var 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',
+    },
+};
+var TIMELINE_STATUS;
+(function (TIMELINE_STATUS) {
+    TIMELINE_STATUS["DEPLOYMENT_INITIATED"] = "DEPLOYMENT_INITIATED";
+    TIMELINE_STATUS["GIT_COMMIT"] = "GIT_COMMIT";
+    TIMELINE_STATUS["GIT_COMMIT_FAILED"] = "GIT_COMMIT_FAILED";
+    TIMELINE_STATUS["KUBECTL_APPLY"] = "KUBECTL_APPLY";
+    TIMELINE_STATUS["KUBECTL_APPLY_STARTED"] = "KUBECTL_APPLY_STARTED";
+    TIMELINE_STATUS["KUBECTL_APPLY_SYNCED"] = "KUBECTL_APPLY_SYNCED";
+    TIMELINE_STATUS["HEALTHY"] = "HEALTHY";
+    TIMELINE_STATUS["APP_HEALTH"] = "APP_HEALTH";
+    TIMELINE_STATUS["DEPLOYMENT_FAILED"] = "FAILED";
+    TIMELINE_STATUS["FETCH_TIMED_OUT"] = "TIMED_OUT";
+    TIMELINE_STATUS["UNABLE_TO_FETCH_STATUS"] = "UNABLE_TO_FETCH_STATUS";
+    TIMELINE_STATUS["DEGRADED"] = "DEGRADED";
+    TIMELINE_STATUS["DEPLOYMENT_SUPERSEDED"] = "DEPLOYMENT_SUPERSEDED";
+    TIMELINE_STATUS["ABORTED"] = "ABORTED";
+    TIMELINE_STATUS["INPROGRESS"] = "INPROGRESS";
+    TIMELINE_STATUS["HELM_PACKAGE_GENERATED"] = "HELM_PACKAGE_GENERATED";
+    TIMELINE_STATUS["HELM_MANIFEST_PUSHED_TO_HELM_REPO"] = "HELM_MANIFEST_PUSHED_TO_HELM_REPO";
+    TIMELINE_STATUS["HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED"] = "HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED";
+})(TIMELINE_STATUS || (TIMELINE_STATUS = {}));
+var YET_TO_RUN = 'Yet to run';
+
+var triggerStatus = function (triggerDetailStatus) {
+    var triggerStatus = triggerDetailStatus === null || triggerDetailStatus === void 0 ? void 0 : 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;
+    }
+};
+
+function AppStatus(_a) {
+    var appStatus = _a.appStatus, _b = _a.isDeploymentStatus, isDeploymentStatus = _b === void 0 ? false : _b, _c = _a.isJobView, isJobView = _c === void 0 ? false : _c, isVirtualEnv = _a.isVirtualEnv, _d = _a.hideStatusMessage, hideStatusMessage = _d === void 0 ? false : _d;
+    var status = appStatus;
+    if (isDeploymentStatus) {
+        status = triggerStatus(appStatus);
+    }
+    var appStatusLowerCase = status === null || status === void 0 ? void 0 : status.toLowerCase();
+    var isNotDeployed = appStatusLowerCase === StatusConstants.NOT_DEPLOYED.noSpaceLower;
+    var iconClass = isNotDeployed ? StatusConstants.NOT_DEPLOYED.lowerCase : appStatusLowerCase;
+    var statusMessage = status || (isVirtualEnv ? StatusConstants.NOT_AVILABLE.normalCase : '-');
+    var notDeployed = isJobView ? YET_TO_RUN : StatusConstants.NOT_DEPLOYED.normalCase;
+    var renderIcon = function () {
+        if (iconClass) {
+            return jsxRuntime.jsx("span", { className: "dc__app-summary__icon icon-dim-16 ".concat(iconClass, " ").concat(iconClass, "--node") });
+        }
+        else if (isVirtualEnv) {
+            return (jsxRuntime.jsx("span", { className: "dc__app-summary__icon icon-dim-16 ".concat(StatusConstants.NOT_DEPLOYED.lowerCase, " ").concat(StatusConstants.NOT_DEPLOYED.lowerCase, "--node") }));
+        }
+        else {
+            return (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt w-200", arrow: false, placement: "top", content: "To fetch app status for GitOps based deployments open the app detail page" }, { children: jsxRuntime.jsx(SvgIcInfoOutlined, { className: "icon-dim-16 fcn-6" }) })));
+        }
+    };
+    return hideStatusMessage ? (renderIcon()) : (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex mr-6" }, { children: renderIcon() })), jsxRuntime.jsx("p", __assign({ "data-testid": "".concat(status, "-app-status"), className: "dc__truncate-text dc__first-letter-capitalize cn-6 m-0" }, { children: isNotDeployed ? notDeployed : statusMessage }))] })));
+}
+
+exports.AppStatus = AppStatus;
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
@@ -23802,9 +23786,9 @@ exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.copyToClipboard = copyToClipboard;
 exports.createGitCommitUrl = createGitCommitUrl;
 exports.extractImage = extractImage;
-exports.genericCDMaterialsService = genericCDMaterialsService;
 exports.get = get;
 exports.getAlphabetIcon = getAlphabetIcon;
+exports.getCDMaterials = getCDMaterials;
 exports.getCookie = getCookie;
 exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
 exports.getLoginInfo = getLoginInfo;
@@ -23816,6 +23800,7 @@ exports.multiSelectStyles = multiSelectStyles;
 exports.noop = noop$1;
 exports.not = not;
 exports.post = post;
+exports.processDeployedTime = processDeployedTime;
 exports.put = put;
 exports.setImageTags = setImageTags;
 exports.showError = showError;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.37-beta-3",
+    "version": "0.0.37-beta-4",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Assets/Icon/ic-info-outlined copy.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#06C">
+            <g>
+                <g>
+                    <g>
+                        <path d="M10 1.667c4.6 0 8.333 3.733 8.333 8.333S14.6 18.333 10 18.333 1.667 14.6 1.667 10 5.4 1.667 10 1.667zm0 1.666C6.32 3.333 3.333 6.32 3.333 10c0 3.68 2.987 6.667 6.667 6.667 3.68 0 6.667-2.987 6.667-6.667 0-3.68-2.987-6.667-6.667-6.667zm0 5.834c.46 0 .833.373.833.833v3.333c0 .46-.373.834-.833.834-.46 0-.833-.373-.833-.834V10c0-.46.373-.833.833-.833zm0-3.334c.46 0 .833.373.833.834 0 .46-.373.833-.833.833-.46 0-.833-.373-.833-.833 0-.46.373-.834.833-.834z" transform="translate(-315.000000, -313.000000) translate(303.000000, 256.000000) translate(4.000000, 49.000000) translate(8.000000, 8.000000)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/Common/AppStatus/AppStatus.tsx

@@ -0,0 +1,57 @@
+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 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 ? (
+        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">
+                {isNotDeployed ? notDeployed : statusMessage}
+            </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
+     *
+     * @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/Common.service.ts

@@ -2,19 +2,7 @@ import moment from 'moment';
 import {get, post} from './Api';
 import { ROUTES } from './Constants'
 import { sortCallback } from './Helper';
-import {
-    TeamList,
-    ResponseType,
-    DeploymentNodeType,
-    CDModalTab,
-    FilterStates,
-    CDMaterialServiceEnum,
-    CDMaterialServiceQueryParams,
-    CDMaterialResponseType,
-    CDMaterialsMetaInfo,
-    CDMaterialsApprovalInfo,
-    CDMaterialFilterQuery,
-} from './Types'
+import { TeamList ,ResponseType, DeploymentNodeType, CDModalTab, FilterStates } from './Types';
 
 export const getTeamListMin = (): Promise<TeamList> => {
   // ignore active field
@@ -42,7 +30,7 @@ interface UserRole extends ResponseType {
     }
 }
 
-const stageMap = {
+let stageMap = {
     PRECD: 'PRE',
     CD: 'DEPLOY',
     POSTCD: 'POST',
@@ -63,218 +51,83 @@ export function setImageTags(request, pipelineId: number, artifactId: number){
     return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`,request )
 }
 
-const processURL = (url: string, params: object) => {
-    const validParams = Object.keys(params).filter((key) => {
-        return params[key] != null
-    })
-
-    if (!validParams.length) {
-        return url
-    }
-
-    const queryString = validParams
-        .map((key) => {
-            if (Array.isArray(params[key])) {
-                return `${key}=${params[key].join(',')}`  
+// FIXME: This is only returning materials to cater the case of search in approval but it should be a common function service coming from dashboard.
+export const getCDMaterials = (
+    cdMaterialId,
+    stageType: DeploymentNodeType,
+    abortSignal: AbortSignal,
+    isApprovalNode?: boolean,
+    imageTag?: string): Promise<any> => {
+    const URL = (!imageTag) ? `app/cd-pipeline/${cdMaterialId}/material?stage=${stageMap[stageType]}` : `app/cd-pipeline/${cdMaterialId}/material?stage=${stageMap[stageType]}&search=${imageTag}`
+
+    return get(URL, {
+        signal: abortSignal,
+    }).then((response) => {
+        let artifacts = response.result.ci_artifacts ?? []
+        if (!response.result) {
+            return {
+                materials: [],
             }
-            return `${key}=${params[key]}`
-        })
-        .join('&')    
-
-    return `${url}?${queryString}`
-}
-
-const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: number, artifactStatus?: string) => {
-    if (!artifacts || !artifacts.length) return []
-
-    const markFirstSelected = offset === 0
-    const startIndex = offset
-    let isImageMarked = false
-
-    const materials = artifacts.map((material, index) => {
-        let artifactStatusValue = ''
-        const filterState = material.filterState ?? FilterStates.ALLOWED
-
-        if (artifactId && artifactStatus && material.id === artifactId) {
-            artifactStatusValue = artifactStatus
-        }
-
-        const selectImage =
-            !isImageMarked && markFirstSelected && filterState === FilterStates.ALLOWED ? !material.vulnerable : false
-        if (selectImage) {
-            isImageMarked = true
-        }
-
-        return {
-            index: startIndex + index,
-            id: material.id,
-            deployedTime: material.deployed_time
-                ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                : 'Not Deployed',
-            deployedBy: material.deployedBy,
-            wfrId: material.wfrId,
-            tab: CDModalTab.Changes,
-            image: extractImage(material.image),
-            showChanges: false,
-            vulnerabilities: [],
-            buildTime: material.build_time || '',
-            isSelected: selectImage,
-            showSourceInfo: false,
-            deployed: material.deployed || false,
-            latest: material.latest || false,
-            vulnerabilitiesLoading: true,
-            scanned: material.scanned,
-            scanEnabled: material.scanEnabled,
-            vulnerable: material.vulnerable,
-            runningOnParentCd: material.runningOnParentCd,
-            artifactStatus: artifactStatusValue,
-            userApprovalMetadata: material.userApprovalMetadata,
-            triggeredBy: material.triggeredBy,
-            isVirtualEnvironment: material.isVirtualEnvironment,
-            imageComment: material.imageComment,
-            imageReleaseTags: material.imageReleaseTags,
-            // It is going to be null but required in type so can't remove
-            lastExecution: material.lastExecution,
-            materialInfo: material.material_info
-                ? material.material_info.map((mat) => {
-                      return {
-                          modifiedTime: mat.modifiedTime
-                              ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
-                              : '',
-                          commitLink: createGitCommitUrl(mat.url, mat.revision),
-                          author: mat.author || '',
-                          message: mat.message || '',
-                          revision: mat.revision || '',
-                          tag: mat.tag || '',
-                          webhookData: mat.webhookData || '',
-                          url: mat.url || '',
-                          branch:
-                              (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
-                                  ? material.ciConfigureSourceValue
-                                  : mat.branch) || '',
-                          type: material.ciConfigureSourceType || '',
-                      }
-                  })
-                : [],
-            filterState,
-            appliedFiltersTimestamp: material.appliedFiltersTimestamp ?? '',
-            appliedFilters: material.appliedFilters ?? [],
-            appliedFiltersState: material.appliedFiltersState ?? FilterStates.ALLOWED,
-            createdTime: material.createdTime ?? '',
-            dataSource: material.data_source ?? '',
-        }
-    })
-    return materials
-}
-
-const processCDMaterialsApprovalInfo = (enableApproval: boolean, cdMaterialsResult): CDMaterialsApprovalInfo => {
-    if (!enableApproval) {
-        return {
-            approvalUsers: [],
-            userApprovalConfig: null,
-            requestedUserId: 0,
-        }
-    }
-
-    return {
-        approvalUsers: cdMaterialsResult.approvalUsers,
-        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
-        requestedUserId: cdMaterialsResult.requestedUserId,
-    }
-}
-
-const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
-    if (!cdMaterialsResult) {
-        return {
-            tagsEditable: false,
-            appReleaseTagNames: [],
-            hideImageTaggingHardDelete: false,
-            resourceFilters: [],
-            totalCount: 0,
-            canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
         }
-    }
-
-    return {
-        appReleaseTagNames: cdMaterialsResult.appReleaseTagNames,
-        tagsEditable: cdMaterialsResult.tagsEditable,
-        hideImageTaggingHardDelete: cdMaterialsResult.hideImageTaggingHardDelete,
-        resourceFilters: cdMaterialsResult.resourceFilters ?? [],
-        totalCount: cdMaterialsResult.totalCount ?? 0,
-        canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
-    }
-}
-
-const processCDMaterialServiceResponse = (
-    cdMaterialsResult,
-    stage: DeploymentNodeType,
-    offset: number,
-    filter: CDMaterialFilterQuery,
-): CDMaterialResponseType => {
-    if (!cdMaterialsResult) {
-        return {
-            materials: [],
-            ...processCDMaterialsMetaInfo(cdMaterialsResult),
-            ...processCDMaterialsApprovalInfo(false, cdMaterialsResult),
+        else {
+            const materials = artifacts.map((material, index) => {
+                let artifactStatusValue = ''
+                const filterState = material.filterState ?? FilterStates.ALLOWED
+
+                return {
+                    index,
+                    id: material.id,
+                    deployedTime: material.deployed_time
+                        ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
+                        : 'Not Deployed',
+                    deployedBy: material.deployedBy,
+                    wfrId: material.wfrId,
+                    image: extractImage(material.image),
+                    showChanges: false,
+                    vulnerabilities: [],
+                    buildTime: material.build_time || '',
+                    tab: CDModalTab.Changes,
+                    showSourceInfo: false,
+                    deployed: material.deployed || false,
+                    latest: material.latest || false,
+                    vulnerabilitiesLoading: true,
+                    scanned: material.scanned,
+                    scanEnabled: material.scanEnabled,
+                    isSelected: !material.vulnerable && filterState === FilterStates.ALLOWED && index === 0,
+                    vulnerable: material.vulnerable,
+                    runningOnParentCd: material.runningOnParentCd,
+                    artifactStatus: artifactStatusValue,
+                    userApprovalMetadata: material.userApprovalMetadata,
+                    triggeredBy: material.triggeredBy,
+                    isVirtualEnvironment: material.isVirtualEnvironment,
+                    imageComment: material.imageComment,
+                    imageReleaseTags: material.imageReleaseTags,
+                    materialInfo: material.material_info
+                        ? material.material_info.map((mat) => {
+                            return {
+                                modifiedTime: mat.modifiedTime ? moment(mat.modifiedTime).format("ddd, DD MMM YYYY, hh:mm A") : '',
+                                commitLink: createGitCommitUrl(mat.url, mat.revision),
+                                author: mat.author || '',
+                                message: mat.message || '',
+                                revision: mat.revision || '',
+                                tag: mat.tag || '',
+                                webhookData: mat.webhookData || '',
+                                url: mat.url || '',
+                                branch:
+                                    (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
+                                        ? material.ciConfigureSourceValue
+                                        : mat.branch) || '',
+                                type: material.ciConfigureSourceType || '',
+                            }
+                        })
+                        : [],
+                    filterState,
+                }
+            })
+            return {
+                materials: materials
+            }
         }
-    }
-
-    const materials = cdMaterialListModal(
-        cdMaterialsResult.ci_artifacts,
-        offset ?? 0,
-        cdMaterialsResult.latest_wf_artifact_id,
-        cdMaterialsResult.latest_wf_artifact_status,
-    )
-    const approvalInfo = processCDMaterialsApprovalInfo(
-        stage === DeploymentNodeType.CD || stage === DeploymentNodeType.APPROVAL,
-        cdMaterialsResult,
-    )
-    const metaInfo = processCDMaterialsMetaInfo(cdMaterialsResult)
-
-    // TODO: On update of service would remove from here
-    const filteredMaterials =
-        filter && filter === CDMaterialFilterQuery.RESOURCE
-            ? materials.filter((material) => {
-                  return material.filterState === FilterStates.ALLOWED
-              })
-            : materials
-
-    return {
-        materials: filteredMaterials,
-        ...approvalInfo,
-        ...metaInfo,
-    }
-}
-
-const getSanitizedQueryParams = (queryParams: CDMaterialServiceQueryParams): CDMaterialServiceQueryParams => {
-    const { filter, ...rest } = queryParams
-    return rest
-}
-
-export const genericCDMaterialsService = (
-    serviceType: CDMaterialServiceEnum,
-    cdMaterialID: number,
-    stage: DeploymentNodeType,
-    signal: AbortSignal,
-    queryParams: CDMaterialServiceQueryParams = {},
-): Promise<CDMaterialResponseType> => {
-    // TODO: On update of service would remove from here
-    const manipulatedParams = getSanitizedQueryParams(queryParams)
-    
-    let URL
-    switch (serviceType) {
-        case CDMaterialServiceEnum.ROLLBACK:
-            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material/rollback`, manipulatedParams)
-            break
-
-        // Meant for handling getCDMaterialList
-        default:
-            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material`, { ...manipulatedParams, stage: stageMap[stage] })
-            break
-    }
-
-    return get(URL, { signal }).then((response) => {
-        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter)
     })
 }
 

package/src/Common/Constants.ts

@@ -24,7 +24,6 @@ export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING:'app/image-tagging',
-    CD_MATERIAL_GET: 'app/cd-pipeline'
 }
 
 export enum KEY_VALUE {

package/src/Common/Helper.tsx

@@ -487,3 +487,11 @@ export function useAsync<T>(
 
     return [state.loading, state.result, state.error, reload, setResult, state.dependencies]
 }
+
+export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
+    if (lastDeployed) {
+        return handleUTCTime(lastDeployed, true)
+    } else {
+        return isArgoInstalled ? '' : 'Not deployed'
+    }
+}

package/src/Common/ImageTags.tsx

@@ -18,10 +18,8 @@ import { showError, stopPropagation } from './Helper'
 import { TippyCustomized } from './TippyCustomized'
 import { setImageTags } from './Common.service'
 import Tippy from '@tippyjs/react'
-import { Progressing } from './Progressing'
 
 export const ImageTagsContainer = ({
-    // Setting it to zero in case of external pipeline
     ciPipelineId,
     artifactId,
     imageComment,
@@ -49,7 +47,6 @@ export const ImageTagsContainer = ({
     const [hardDeleteTags, setHardDeleteTags] = useState<ReleaseTag[]>([])
     const [descriptionValidationMessage, setDescriptionValidationMessage] = useState<string>('')
     const [textInput, setTextInput] = useState<string>('')
-    const [loading, setLoading] = useState<boolean>(false)
 
 
     useEffect(() => {
@@ -216,8 +213,7 @@ export const ImageTagsContainer = ({
         }
 
         // set loading state true
-        setLoading(true)
-        setImageTags(payload, ciPipelineId ?? 0, artifactId)
+        setImageTags(payload, ciPipelineId, artifactId)
             .then((res) => {
                 const tags = res.result?.imageReleaseTags?.map((tag) => ({
                     id: tag.id,
@@ -253,9 +249,6 @@ export const ImageTagsContainer = ({
                     showError(err)
                 }
             })
-            .finally(()=>{
-                setLoading(false)
-            })
     }
 
     const renderInfoCard = (): JSX.Element => {
@@ -432,7 +425,6 @@ export const ImageTagsContainer = ({
                                 stopPropagation(e)
                                 handleCancel()
                             }}
-                            disabled={loading}
                         >
                             Cancel
                         </button>
@@ -444,9 +436,8 @@ export const ImageTagsContainer = ({
                                 stopPropagation(e)
                                 onClickSave()
                             }}
-                            disabled={loading}
                         >
-                            {loading ? <Progressing /> : 'Save'}
+                            Save
                         </button>
                     </div>
                 </div>

package/src/Common/Types.ts

@@ -226,10 +226,6 @@ export enum FilterStates {
     ERROR = 2,
 }
 
-export enum MaterialDataSource {
-    EXTERNAL = "ext"
-}
-
 export interface CDMaterialType {
     index: number
     id: string
@@ -256,36 +252,6 @@ export interface CDMaterialType {
     imageReleaseTags?: ReleaseTag[]
     artifactStatus?: string
     filterState: FilterStates
-    // Not even coming from API but required in CDMaterials for Security which makes its own api call but stores data in CDMaterials
-    scanToolId?: number
-    appliedFiltersTimestamp?: string
-    appliedFilters?: FilterConditionsListType[]
-    appliedFiltersState?: FilterStates
-    createdTime?: string
-    deployed?: boolean
-    dataSource?: MaterialDataSource
-}
-
-export enum CDMaterialServiceEnum {
-    ROLLBACK = 'rollback',
-    CD_MATERIALS = 'cd-materials',
-}
-
-export enum CDMaterialResourceQuery {
-    PENDING_APPROVAL = 'PENDING_APPROVAL'
-}
-
-export enum CDMaterialFilterQuery {
-    RESOURCE = 'ELIGIBLE_RESOURCES',
-    ALL = 'ALL_RESOURCES'
-}
-
-export interface CDMaterialServiceQueryParams {
-    search?: string
-    offset?: number
-    size?: number
-    resource?: CDMaterialResourceQuery
-    filter?: CDMaterialFilterQuery
 }
 
 export interface CommonNodeAttr {
@@ -401,23 +367,15 @@ export interface FilterConditionsListType {
     conditions: FilterConditionsInfo[]
 }
 
-export interface CDMaterialsApprovalInfo {
+export interface CDMaterialResponseType {
     approvalUsers: string[]
+    materials: any[]
     userApprovalConfig: UserApprovalConfigType
     requestedUserId: number
-}
-
-export interface CDMaterialsMetaInfo {
     tagsEditable: boolean
     appReleaseTagNames: string[]
     hideImageTaggingHardDelete: boolean
     resourceFilters?: FilterConditionsListType[]
-    totalCount: number
-    canApproverDeploy: boolean
-}
-
-export interface CDMaterialResponseType extends CDMaterialsMetaInfo, CDMaterialsApprovalInfo {
-    materials: CDMaterialType[]
 }
 
 export interface InputDetailType {

package/src/Common/index.ts

@@ -39,3 +39,4 @@ export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
 export { default as Grid } from './Grid/Grid'
 export { default as ClipboardButton } from './ClipboardButton/ClipboardButton'
 export * from './Hooks'
+export { AppStatus } from './AppStatus'