feat: add export functionality for Jobs and Apps with CSV headers and data types

Author: AbhishekA1509

src/components/Jobs/JobList/JobListFilters.tsx

@@ -15,18 +15,19 @@
  */
 
 import {
+    ExportToCsv,
+    ExportToCsvProps,
     FilterSelectPicker,
     SearchBar,
     SelectPickerOptionType,
     useGetUserRoles,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { FILE_NAMES } from '@Components/common/ExportToCsv/constants'
-import ExportToCsv from '@Components/common/ExportToCsv/ExportToCsv'
-
 import { getAppListDataToExport } from '../Service'
 import { JobListFilterProps, JobListUrlFilters } from '../Types'
 import { getJobStatusLabelFromValue } from '../Utils'
+import { JOB_LIST_EXPORT_HEADERS } from './constants'
+import { ExportJobDataType } from './types'
 
 const JobListFilters = ({
     masterFilters,
@@ -40,7 +41,8 @@ const JobListFilters = ({
 }: JobListFilterProps) => {
     const { isSuperAdmin } = useGetUserRoles()
     const { searchKey, status, environment, project } = filterConfig
-    const getJobsDataToExport = async () => getAppListDataToExport(payload, searchKey, jobListCount)
+    const getJobsDataToExport: ExportToCsvProps<keyof ExportJobDataType>['apiPromise'] = async ({ signal }) =>
+        getAppListDataToExport(payload, searchKey, jobListCount, signal)
 
     const handleUpdateFilters = (filterKey: JobListUrlFilters) => (selectedOptions: SelectPickerOptionType[]) => {
         updateSearchParams({ [filterKey]: selectedOptions.map((option) => String(option.value)) })
@@ -108,10 +110,11 @@ const JobListFilters = ({
                 {isSuperAdmin && (
                     <>
                         <div className="dc__border-right h-16" />
-                        <ExportToCsv
+                        <ExportToCsv<keyof ExportJobDataType>
                             apiPromise={getJobsDataToExport}
-                            fileName={FILE_NAMES.Jobs}
+                            fileName="Devtron Jobs Data"
                             disabled={!jobListCount}
+                            headers={JOB_LIST_EXPORT_HEADERS}
                         />
                     </>
                 )}

src/components/Jobs/JobList/constants.ts

@@ -0,0 +1,14 @@
+import { ExportToCsvProps } from '@devtron-labs/devtron-fe-common-lib'
+
+import { ExportJobDataType } from './types'
+
+export const JOB_LIST_EXPORT_HEADERS: ExportToCsvProps<keyof ExportJobDataType>['headers'] = [
+    { label: 'Job Name', key: 'jobName' },
+    { label: 'Job ID', key: 'jobId' },
+    { label: 'Description', key: 'description' },
+    { label: 'Job Pipeline ID', key: 'ciPipelineId' },
+    { label: 'Job Pipeline Name', key: 'ciPipelineName' },
+    { label: 'Last Run Status', key: 'status' },
+    { label: 'Last Run At', key: 'lastRunAt' },
+    { label: 'Last Success At', key: 'lastSuccessAt' },
+]

src/components/Jobs/JobList/types.ts

@@ -0,0 +1,10 @@
+export interface ExportJobDataType {
+    jobName: string
+    jobId: string
+    description: string
+    ciPipelineId: string
+    ciPipelineName: string
+    status: string
+    lastRunAt: string
+    lastSuccessAt: string
+}

src/components/Jobs/Service.ts

@@ -21,6 +21,7 @@ import { sortOptionsByLabel } from '../common'
 import { getProjectList } from '../project/service'
 import { JobCIPipeline, JobList, JobsMasterFilters } from './Types'
 import { JOB_STATUS_OPTIONS } from './Constants'
+import { ExportJobDataType } from './JobList/types'
 
 export const getJobs = async (request, options?: APIOptions) => {
     const response = (await post(Routes.JOB_LIST, request, options)) as JobList
@@ -71,7 +72,8 @@ export const getAppListDataToExport = (
     payloadParsedFromUrl: Record<string, any>,
     searchString: string,
     jobCount: number,
-) => {
+    signal: AbortSignal,
+): Promise<ExportJobDataType[]> => {
     return getJobs(
         typeof payloadParsedFromUrl === 'object'
             ? {
@@ -91,6 +93,7 @@ export const getAppListDataToExport = (
                   offset: 0,
                   size: jobCount,
               },
+            { signal }
     ).then(({ result }) => {
         if (result.jobContainers) {
             const _jobDataList = []

src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx

@@ -25,11 +25,9 @@ import {
     GVK_FILTER_API_VERSION_QUERY_PARAM_KEY,
     GVK_FILTER_KIND_QUERY_PARAM_KEY,
     GVKOptionValueType,
-    Icon,
     Nodes,
     noop,
     OptionType,
-    ResourceRecommenderHeaderType,
     SearchBar,
     SegmentedControl,
     SegmentedControlProps,
@@ -41,8 +39,6 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as NamespaceIcon } from '@Icons/ic-env.svg'
-import { FILE_NAMES } from '@Components/common/ExportToCsv/constants'
-import ExportToCsv from '@Components/common/ExportToCsv/ExportToCsv'
 
 import { convertToOptionsList, importComponentFromFELibrary } from '../../common'
 import { NAMESPACE_NOT_APPLICABLE_OPTION, NAMESPACE_NOT_APPLICABLE_TEXT } from '../Constants'
@@ -51,11 +47,6 @@ import { ResourceFilterOptionsProps } from '../Types'
 import { K8sResourceListURLParams } from './types'
 
 const FilterButton = importComponentFromFELibrary('FilterButton', null, 'function')
-const getResourceRecommendationsCSVData = importComponentFromFELibrary(
-    'getResourceRecommendationsCSVData',
-    null,
-    'function',
-)
 const ResourceRecommenderActionMenu = importComponentFromFELibrary('ResourceRecommenderActionMenu', null, 'function')
 
 const ResourceFilterOptions = ({
@@ -71,7 +62,6 @@ const ResourceFilterOptions = ({
     updateSearchParams,
     filteredRows,
     gvkFilterConfig,
-    isResourceListLoading,
     resourceRecommenderConfig,
     selectedAPIVersionGVKFilter,
     selectedKindGVKFilter,
@@ -179,9 +169,6 @@ const ResourceFilterOptions = ({
         )
     }
 
-    const getResourcesToExport = (): Promise<Record<ResourceRecommenderHeaderType, string>[]> =>
-        Promise.resolve(getResourceRecommendationsCSVData(filteredRows.map((row) => row.data)))
-
     const onNamespaceFilterKeyDown: SelectPickerProps['onKeyDown'] = (e) => {
         if (e.key === 'Escape' || e.key === 'Esc') {
             e.preventDefault()
@@ -299,21 +286,8 @@ const ResourceFilterOptions = ({
                         />
                     </div>
 
-                    {isResourceRecommender && ResourceRecommenderActionMenu && getResourceRecommendationsCSVData && (
-                        <ResourceRecommenderActionMenu {...resourceLastScannedOnDetails}>
-                            <ExportToCsv
-                                fileName={FILE_NAMES.ResourceRecommendations}
-                                disabled={isResourceListLoading}
-                                apiPromise={getResourcesToExport}
-                                triggerElementClassname="bg__hover dc__transparent flexbox dc__gap-8 px-8 py-6 w-100"
-                                hideExportResultModal
-                            >
-                                <span className="mt-2 flex dc__no-shrink">
-                                    <Icon name="ic-download" size={16} color="N800" />
-                                </span>
-                                <span className="cn-9 fs-13 fw-4 lh-1-5">Export CSV</span>
-                            </ExportToCsv>
-                        </ResourceRecommenderActionMenu>
+                    {isResourceRecommender && ResourceRecommenderActionMenu && (
+                        <ResourceRecommenderActionMenu {...resourceLastScannedOnDetails} filteredRows={filteredRows} />
                     )}
                 </div>
             </div>

src/components/ResourceBrowser/ResourceList/ResourceRecommenderTableViewWrapper.tsx

@@ -26,7 +26,6 @@ export const ResourceRecommenderTableViewWrapper = ({
     searchKey,
     handleSearch,
     filteredRows,
-    isResourceListLoading,
     selectedResource,
     gvkFilterConfig,
     updateSearchParams,
@@ -42,7 +41,6 @@ export const ResourceRecommenderTableViewWrapper = ({
             setSearchText={handleSearch}
             searchPlaceholder="Search"
             filteredRows={filteredRows}
-            isResourceListLoading={isResourceListLoading}
             selectedResource={selectedResource}
             gvkFilterConfig={gvkFilterConfig}
             updateSearchParams={updateSearchParams}

src/components/ResourceBrowser/ResourceList/types.ts

@@ -168,7 +168,7 @@ export type DynamicTabComponentWrapperProps = Pick<
 
 export interface ResourceRecommenderTableViewWrapperProps
     extends TableViewWrapperProps<
-        unknown,
+        K8sResourceDetailDataType,
         FiltersTypeEnum.URL,
         ResourceFilterOptionsProps & {
             resourceListError: ServerErrors

src/components/ResourceBrowser/Types.ts

@@ -92,7 +92,10 @@ export interface ClusterOptionType extends OptionType {
 }
 
 export interface ResourceFilterOptionsProps
-    extends Pick<TableViewWrapperProps<unknown, FiltersTypeEnum.URL>, 'updateSearchParams' | 'filteredRows'>,
+    extends Pick<
+            TableViewWrapperProps<K8sResourceDetailDataType, FiltersTypeEnum.URL>,
+            'updateSearchParams' | 'filteredRows'
+        >,
         Partial<Pick<K8sResourceListFilterType, 'eventType'>> {
     selectedResource: ApiResourceGroupType
     selectedCluster?: ClusterOptionType
@@ -107,7 +110,6 @@ export interface ResourceFilterOptionsProps
      * @default undefined
      */
     searchPlaceholder?: string
-    isResourceListLoading?: boolean
     gvkFilterConfig?: {
         gvkOptions: GroupBase<SelectPickerOptionType<GVKOptionValueType>>[]
         areGVKOptionsLoading: boolean

src/components/app/list-new/AppListFilters.tsx

@@ -20,6 +20,8 @@ import ReactGA from 'react-ga4'
 import {
     AppListConstants,
     ComponentSizeType,
+    ExportToCsv,
+    ExportToCsvProps,
     FilterSelectPicker,
     GroupedFilterSelectPicker,
     GroupedFilterSelectPickerProps,
@@ -30,12 +32,14 @@ import {
     useGetUserRoles,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { FILE_NAMES } from '@Components/common/ExportToCsv/constants'
-import ExportToCsv from '@Components/common/ExportToCsv/ExportToCsv'
-
 import { getDevtronAppListDataToExport } from './AppListService'
 import { AppListFiltersProps, AppListUrlFilters, AppStatuses } from './AppListType'
-import { APP_STATUS_FILTER_OPTIONS, SELECT_CLUSTER_TIPPY, TEMPLATE_TYPE_FILTER_OPTIONS } from './Constants'
+import {
+    APP_STATUS_FILTER_OPTIONS,
+    APPLIST_EXPORT_HEADERS,
+    SELECT_CLUSTER_TIPPY,
+    TEMPLATE_TYPE_FILTER_OPTIONS,
+} from './Constants'
 import { getAppListFilters, getAppTabNameFromAppType, useFilterOptions } from './list.utils'
 
 const AppListFilters = ({
@@ -203,6 +207,34 @@ const AppListFilters = ({
             },
         }
 
+    const getExportToCsvApiPromise: ExportToCsvProps<(typeof APPLIST_EXPORT_HEADERS)[number]['key']>['apiPromise'] = ({
+        signal,
+    }) =>
+        getDevtronAppListDataToExport(
+            filterConfig,
+            appListFiltersResponse?.appListFilters.result.environments,
+            namespaceListResponse?.result,
+            appListFiltersResponse?.appListFilters.result.clusters,
+            appListFiltersResponse?.appListFilters.result.teams,
+            appCount,
+            signal,
+        )
+
+    const renderExportToCSV = () => {
+        if (!showExportCsvButton) {
+            return null
+        }
+
+        return (
+            <ExportToCsv<(typeof APPLIST_EXPORT_HEADERS)[number]['key']>
+                headers={APPLIST_EXPORT_HEADERS}
+                apiPromise={getExportToCsvApiPromise}
+                fileName="Devtron Apps"
+                disabled={!appCount}
+            />
+        )
+    }
+
     return (
         <div className="search-filter-section">
             <div className="flex left dc__gap-8">
@@ -251,22 +283,7 @@ const AppListFilters = ({
                 )}
             </div>
 
-            {window._env_.FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE && showExportCsvButton && (
-                <ExportToCsv
-                    apiPromise={() =>
-                        getDevtronAppListDataToExport(
-                            filterConfig,
-                            appListFiltersResponse?.appListFilters.result.environments,
-                            namespaceListResponse?.result,
-                            appListFiltersResponse?.appListFilters.result.clusters,
-                            appListFiltersResponse?.appListFilters.result.teams,
-                            appCount,
-                        )
-                    }
-                    fileName={FILE_NAMES.Apps}
-                    disabled={!appCount}
-                />
-            )}
+            {window._env_.FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE && renderExportToCSV()}
 
             {!window._env_.FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE && (
                 <div className="flexbox dc__gap-8 dc__align-items-center">
@@ -384,20 +401,7 @@ const AppListFilters = ({
                     {showExportCsvButton && (
                         <>
                             <div className="dc__border-right h-16" />
-                            <ExportToCsv
-                                apiPromise={() =>
-                                    getDevtronAppListDataToExport(
-                                        filterConfig,
-                                        appListFiltersResponse?.appListFilters.result.environments,
-                                        namespaceListResponse?.result,
-                                        appListFiltersResponse?.appListFilters.result.clusters,
-                                        appListFiltersResponse?.appListFilters.result.teams,
-                                        appCount,
-                                    )
-                                }
-                                fileName={FILE_NAMES.Apps}
-                                disabled={!appCount}
-                            />
+                            {renderExportToCSV()}
                         </>
                     )}
                 </div>

src/components/app/list-new/AppListService.ts

@@ -30,6 +30,7 @@ import { Moment12HourFormat, Routes } from '../../../config'
 import {
     AppListFilterConfig,
     AppListPayloadType,
+    ExportAppListDataType,
     FluxCDTemplateType,
     GenericAppListResponse,
     GenericAppType,
@@ -67,17 +68,18 @@ export const getDevtronAppListDataToExport = (
     clusterList: Cluster[],
     projectList: Teams[],
     appCount: number,
-) => {
+    signal: AbortSignal,
+): Promise<ExportAppListDataType[]> => {
     const appListPayload: AppListPayloadType = {
         ...getDevtronAppListPayload(filterConfig, environmentList, namespaceList),
         offset: 0,
         size: appCount,
     } // Over riding size and offset as we need all list (no pagination)
     const clusterMap = new Map<string, number>()
     clusterList.forEach((cluster) => clusterMap.set(cluster.cluster_name, cluster.id))
-    return getAppList(appListPayload).then(({ result }) => {
+    return getAppList(appListPayload, { signal }).then(({ result }) => {
         if (result.appContainers) {
-            const _appDataList = []
+            const _appDataList: ExportAppListDataType[] = []
             for (const _app of result.appContainers) {
                 if (_app.environments) {
                     for (const _env of _app.environments) {
@@ -104,7 +106,7 @@ export const getDevtronAppListDataToExport = (
                         appId: _app.appId,
                         appName: _app.appName,
                         projectId: _app.projectId,
-                        projectName: projectList.find((project) => project.id === +_app.projectId) || '-',
+                        projectName: projectList.find((project) => project.id === +_app.projectId)?.name || '-',
                         environmentId: '-',
                         environmentName: '-',
                         clusterId: '-',