feat(pages-job): about + deployments + variables + actions and status (…

…#401)

libs/domains/application/src/lib/slices/application.actions.ts

@@ -4,8 +4,10 @@ import {
   ApplicationMainCallsApi,
   ContainerActionsApi,
   ContainerMainCallsApi,
+  JobActionsApi,
+  JobMainCallsApi,
 } from 'qovery-typescript-axios'
-import { ServiceTypeEnum, isContainer } from '@qovery/shared/enums'
+import { ServiceTypeEnum, isContainer, isJob } from '@qovery/shared/enums'
 import { ToastEnum, toast } from '@qovery/shared/toast'
 import { fetchApplicationDeployments, fetchApplicationsStatus } from './applications.slice'
 
@@ -15,6 +17,9 @@ const applicationMainCallsApi = new ApplicationMainCallsApi()
 const containerActionApi = new ContainerActionsApi()
 const containerMainCallsApi = new ContainerMainCallsApi()
 
+const jobActionApi = new JobActionsApi()
+const jobMainCallsApi = new JobMainCallsApi()
+
 export const postApplicationActionsRestart = createAsyncThunk<
   any,
   { environmentId: string; applicationId: string; serviceType?: ServiceTypeEnum; withDeployments?: boolean }
@@ -23,6 +28,8 @@ export const postApplicationActionsRestart = createAsyncThunk<
     let response
     if (isContainer(data.serviceType)) {
       response = await containerActionApi.restartContainer(data.applicationId)
+    } else if (isJob(data.serviceType)) {
+      response = await jobActionApi.restartJob(data.applicationId)
     } else {
       response = await applicationActionApi.restartApplication(data.applicationId)
     }
@@ -58,6 +65,8 @@ export const postApplicationActionsDeploy = createAsyncThunk<
     let response
     if (isContainer(data.serviceType)) {
       response = await containerActionApi.restartContainer(data.applicationId)
+    } else if (isJob(data.serviceType)) {
+      response = await jobActionApi.restartJob(data.applicationId)
     } else {
       response = await applicationActionApi.restartApplication(data.applicationId)
     }
@@ -115,6 +124,8 @@ export const postApplicationActionsStop = createAsyncThunk<
     let response
     if (isContainer(data.serviceType)) {
       response = await containerActionApi.stopContainer(data.applicationId)
+    } else if (isJob(data.serviceType)) {
+      response = await jobActionApi.stopJob(data.applicationId)
     } else {
       response = await applicationActionApi.stopApplication(data.applicationId)
     }
@@ -150,6 +161,8 @@ export const deleteApplicationAction = createAsyncThunk<
     let response
     if (isContainer(data.serviceType)) {
       response = await containerMainCallsApi.deleteContainer(data.applicationId)
+    } else if (isJob(data.serviceType)) {
+      response = await jobMainCallsApi.deleteJob(data.applicationId)
     } else {
       response = await applicationMainCallsApi.deleteApplication(data.applicationId)
     }

libs/domains/application/src/lib/slices/applications.slice.ts

@@ -28,6 +28,7 @@ import {
   DeploymentHistoryApplication,
   Instance,
   JobDeploymentHistoryApi,
+  JobMainCallsApi,
   JobsApi,
   Link,
   Status,
@@ -69,7 +70,8 @@ const containerDeploymentsApi = new ContainerDeploymentHistoryApi()
 const containerConfigurationApi = new ContainerConfigurationApi()
 
 const jobsApi = new JobsApi()
-const jobsDeploymentsApi = new JobDeploymentHistoryApi()
+const jobMainCallsApi = new JobMainCallsApi()
+const jobDeploymentsApi = new JobDeploymentHistoryApi()
 
 export const fetchApplications = createAsyncThunk<
   Application[] | ContainerResponse[],
@@ -202,7 +204,7 @@ export const fetchApplicationDeployments = createAsyncThunk<
   if (isContainer(data.serviceType)) {
     response = (await containerDeploymentsApi.listContainerDeploymentHistory(data.applicationId)) as any
   } else if (isJob(data.serviceType)) {
-    response = await jobsDeploymentsApi.listJobDeploymentHistory()
+    response = await jobDeploymentsApi.listJobDeploymentHistory(data.applicationId)
   } else {
     response = await applicationDeploymentsApi.listApplicationDeploymentHistory(data.applicationId)
   }
@@ -216,6 +218,8 @@ export const fetchApplicationStatus = createAsyncThunk<
   let response
   if (isContainer(data.serviceType)) {
     response = await containerMainCallsApi.getContainerStatus(data.applicationId)
+  } else if (isJob(data.serviceType)) {
+    response = await jobMainCallsApi.getJobStatus(data.applicationId)
   } else {
     response = await applicationMainCallsApi.getApplicationStatus(data.applicationId)
   }

libs/domains/environment-variable/src/lib/slices/environment-variables.slice.ts

@@ -5,13 +5,14 @@ import {
   ContainerEnvironmentVariableApi,
   EnvironmentVariableApi,
   EnvironmentVariableRequest,
+  JobEnvironmentVariableApi,
   ProjectEnvironmentVariableApi,
   Value,
   VariableImport,
   VariableImportRequestVars,
 } from 'qovery-typescript-axios'
 import { Key } from 'qovery-typescript-axios/api'
-import { ServiceTypeEnum, isContainer } from '@qovery/shared/enums'
+import { ServiceTypeEnum, isContainer, isJob } from '@qovery/shared/enums'
 import { EnvironmentVariableEntity, EnvironmentVariablesState } from '@qovery/shared/interfaces'
 import { ToastEnum, toast, toastError } from '@qovery/shared/toast'
 import { addOneToManyRelation, getEntitiesByIds, removeOneToManyRelation } from '@qovery/shared/utils'
@@ -22,6 +23,7 @@ export const environmentVariablesAdapter = createEntityAdapter<EnvironmentVariab
 
 const applicationEnvironmentVariableApi = new ApplicationEnvironmentVariableApi()
 const containerEnvironmentVariableApi = new ContainerEnvironmentVariableApi()
+const jobEnvironmentVariableApi = new JobEnvironmentVariableApi()
 const environmentEnvironmentVariableApi = new EnvironmentVariableApi()
 const projectEnvironmentVariableApi = new ProjectEnvironmentVariableApi()
 
@@ -31,6 +33,8 @@ export const fetchEnvironmentVariables = createAsyncThunk(
     let response
     if (isContainer(payload.serviceType)) {
       response = await containerEnvironmentVariableApi.listContainerEnvironmentVariable(payload.applicationId)
+    } else if (isJob(payload.serviceType)) {
+      response = await jobEnvironmentVariableApi.listJobEnvironmentVariable(payload.applicationId)
     } else {
       response = await applicationEnvironmentVariableApi.listApplicationEnvironmentVariable(payload.applicationId)
     }
@@ -53,6 +57,11 @@ export const importEnvironmentVariables = createAsyncThunk(
         overwrite: payload.overwriteEnabled,
         vars: payload.vars,
       })
+    } else if (isJob(payload.serviceType)) {
+      response = await jobEnvironmentVariableApi.importJobEnvironmentVariable(payload.applicationId, {
+        overwrite: payload.overwriteEnabled,
+        vars: payload.vars,
+      })
     } else {
       response = await applicationEnvironmentVariableApi.importEnvironmentVariable(payload.applicationId, {
         overwrite: payload.overwriteEnabled,
@@ -94,6 +103,11 @@ export const createEnvironmentVariablePayloadCreator = async (payload: {
           payload.entityId,
           payload.environmentVariableRequest
         )
+      } else if (isJob(payload.serviceType)) {
+        response = await jobEnvironmentVariableApi.createJobEnvironmentVariable(
+          payload.entityId,
+          payload.environmentVariableRequest
+        )
       } else {
         response = await applicationEnvironmentVariableApi.createApplicationEnvironmentVariable(
           payload.entityId,

libs/pages/application/src/lib/ui/container/container.tsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { postApplicationActionsDeploy, postApplicationActionsRestart } from '@qovery/domains/application'
 import { ApplicationButtonsActions } from '@qovery/shared/console-shared'
-import { IconEnum, getServiceType } from '@qovery/shared/enums'
+import { IconEnum, getServiceType, isCronJob, isLifeCycleJob } from '@qovery/shared/enums'
 import { ApplicationEntity } from '@qovery/shared/interfaces'
 import {
   Button,
@@ -137,7 +137,18 @@ export function Container(props: ContainerProps) {
     <ApplicationContext.Provider
       value={{ showHideAllEnvironmentVariablesValues, setShowHideAllEnvironmentVariablesValues }}
     >
-      <Header title={application?.name} icon={IconEnum.APPLICATION} buttons={headerButtons} actions={headerActions} />
+      <Header
+        title={application?.name}
+        icon={
+          isCronJob(application)
+            ? IconEnum.CRON_JOB
+            : isLifeCycleJob(application)
+            ? IconEnum.LIFECYCLE_JOB
+            : IconEnum.APPLICATION
+        }
+        buttons={headerButtons}
+        actions={headerActions}
+      />
       <TabsFeature />
       {application &&
         application.status &&

libs/pages/application/src/lib/ui/page-general/page-general.tsx

@@ -3,6 +3,7 @@ import {
   ContainerApplicationEntity,
   GitApplicationEntity,
   GitContainerApplicationEntity,
+  JobApplicationEntity,
   LoadingStatus,
 } from '@qovery/shared/interfaces'
 import { BaseLink, HelpSection, Icon, Skeleton, Tooltip } from '@qovery/shared/ui'
@@ -91,10 +92,12 @@ export function PageGeneral(props: PageGeneralProps) {
               <div className="text-subtitle mb-3 text-text-600">Image information</div>
               <div className="mb-3">
                 <p className="text-text-500 mb-2">
-                  Image name: {(application as ContainerApplicationEntity).image_name}
+                  Image name: {(application as ContainerApplicationEntity).image_name}{' '}
+                  {(application as JobApplicationEntity).source?.image?.image_name}
                 </p>
                 <p className="text-text-500 mb-2">
-                  Latest deployed tag: {(application as ContainerApplicationEntity).tag}
+                  Latest deployed tag: {(application as ContainerApplicationEntity).tag}{' '}
+                  {(application as JobApplicationEntity).source?.image?.tag}
                 </p>
                 <p className="text-text-400 text-sm">
                   {timeAgo(new Date((application as ContainerApplicationEntity)?.updated_at || ''))}

libs/pages/services/src/lib/ui/table-row-services/table-row-services.tsx

@@ -1,6 +1,14 @@
 import { BuildModeEnum, DatabaseModeEnum } from 'qovery-typescript-axios'
 import { ApplicationButtonsActions, DatabaseButtonsActions } from '@qovery/shared/console-shared'
-import { IconEnum, RunningStatus, ServiceTypeEnum, isApplication, isContainer, isDatabase } from '@qovery/shared/enums'
+import {
+  IconEnum,
+  RunningStatus,
+  ServiceTypeEnum,
+  isApplication,
+  isContainer,
+  isDatabase,
+  isJob,
+} from '@qovery/shared/enums'
 import {
   ApplicationEntity,
   ContainerApplicationEntity,
@@ -91,7 +99,7 @@ export function TableRowServices(props: TableRowServicesProps) {
               </p>
               {data.name && (
                 <>
-                  {(isApplication(type) || isContainer(type)) && (
+                  {(isApplication(type) || isContainer(type) || isJob(type)) && (
                     <ApplicationButtonsActions
                       application={data as ApplicationEntity}
                       environmentMode={environmentMode}

libs/shared/console-shared/src/lib/application-buttons-actions/application-buttons-actions.tsx

@@ -9,7 +9,7 @@ import {
   postApplicationActionsStop,
 } from '@qovery/domains/application'
 import { postEnvironmentActionsCancelDeployment } from '@qovery/domains/environment'
-import { getServiceType } from '@qovery/shared/enums'
+import { getServiceType, isApplication } from '@qovery/shared/enums'
 import { ApplicationEntity, GitApplicationEntity } from '@qovery/shared/interfaces'
 import {
   APPLICATION_LOGS_URL,
@@ -176,23 +176,35 @@ export function ApplicationButtonsActions(props: ApplicationButtonsActionsProps)
         topItems.push(stopButton)
       }
 
-      const deployAnotherButton = {
-        name: 'Deploy other version',
-        contentLeft: <Icon name={IconAwesomeEnum.CLOCK_ROTATE_LEFT} className="text-sm text-brand-400" />,
-        onClick: () => {
-          openModal({
-            content: (
-              <DeployOtherCommitModalFeature applicationId={application.id} environmentId={environmentId || ''} />
-            ),
-            options: { width: 596 },
-          })
-        },
+      if (isApplication(application)) {
+        const deployAnotherButton = {
+          name: 'Deploy other version',
+          contentLeft: <Icon name={IconAwesomeEnum.CLOCK_ROTATE_LEFT} className="text-sm text-brand-400" />,
+          onClick: () => {
+            openModal({
+              content: (
+                <DeployOtherCommitModalFeature applicationId={application.id} environmentId={environmentId || ''} />
+              ),
+              options: { width: 596 },
+            })
+          },
+        }
+        bottomItems.push(deployAnotherButton)
       }
-      bottomItems.push(deployAnotherButton)
     }
 
     setButtonStatusActions([{ items: topItems }, { items: bottomItems }])
-  }, [application, environmentMode, environmentId, dispatch, openModal, openModalConfirmation])
+  }, [
+    application,
+    environmentMode,
+    environmentId,
+    dispatch,
+    openModal,
+    openModalConfirmation,
+    location.pathname,
+    organizationId,
+    projectId,
+  ])
 
   const canDelete = application.status && isDeleteAvailable(application.status.state)
   const copyContent = `Organization ID: ${organizationId}\nProject ID: ${projectId}\nEnvironment ID: ${environmentId}\nService ID: ${application.id}`
@@ -213,6 +225,11 @@ export function ApplicationButtonsActions(props: ApplicationButtonsActionsProps)
       menus: [
         {
           items: [
+            {
+              name: 'Logs',
+              contentLeft: <Icon name={IconAwesomeEnum.SCROLL} className="text-sm text-brand-400" />,
+              onClick: () => navigate(APPLICATION_LOGS_URL(organizationId, projectId, environmentId, application.id)),
+            },
             {
               name: 'Edit code',
               contentLeft: <Icon name={IconAwesomeEnum.CODE} className="text-sm text-brand-400" />,

libs/shared/console-shared/src/lib/environment-buttons-actions/environment-buttons-actions.tsx

@@ -230,6 +230,11 @@ export function EnvironmentButtonsActions(props: EnvironmentButtonsActionsProps)
       menus: [
         {
           items: [
+            {
+              name: 'Logs',
+              contentLeft: <Icon name={IconAwesomeEnum.SCROLL} className="text-sm text-brand-400" />,
+              onClick: () => navigate(DEPLOYMENT_LOGS_URL(organizationId, projectId, environment.id)),
+            },
             {
               name: 'Copy identifiers',
               contentLeft: <Icon name={IconAwesomeEnum.COPY} className="text-sm text-brand-400" />,

libs/shared/enums/src/lib/utils/get-service-type.ts

@@ -35,7 +35,7 @@ export const isJob = (data?: ApplicationEntity | ServiceTypeEnum) => {
       getServiceType(data as ApplicationEntity) === ServiceTypeEnum.LIFECYCLE_JOB
     )
   } else {
-    return data === ServiceTypeEnum.JOB
+    return data === ServiceTypeEnum.CRON_JOB || data === ServiceTypeEnum.LIFECYCLE_JOB || data === ServiceTypeEnum.JOB
   }
 }
 

package.json

@@ -53,7 +53,7 @@
     "msw": "^0.42.1",
     "postcss": "8.4.16",
     "posthog-js": "^1.24.0",
-    "qovery-typescript-axios": "^1.1.43",
+    "qovery-typescript-axios": "^1.1.47",
     "react": "18.2.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "18.2.0",

yarn.lock

@@ -16535,10 +16535,10 @@ q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
-qovery-typescript-axios@^1.1.43:
-  version "1.1.44"
-  resolved "https://registry.yarnpkg.com/qovery-typescript-axios/-/qovery-typescript-axios-1.1.44.tgz#8603cdbf4f2be5b6aa34b4f27dac26d621c25c70"
-  integrity sha512-taetn8UNkBgmHOOZa+JboutdFETuXb2YUgTvd+niHiFUIvxofOusaqjwjufXYGVi3oTKSRl/2y01X+BDluHFbQ==
+qovery-typescript-axios@^1.1.47:
+  version "1.1.47"
+  resolved "https://registry.yarnpkg.com/qovery-typescript-axios/-/qovery-typescript-axios-1.1.47.tgz#bf490180bc946ea52b1b9a3a55b3b11cf4393462"
+  integrity sha512-CXL3vlJe5rcJvhtLWSQqqkShlLKQquI5BFfqhPPsKS8ircajTbGWOZlovWO8k9Ej5o06mDGsw9YKK4ACTaiArg==
   dependencies:
     axios "^0.21.4"