Skip to content

Commit

Permalink
fix(jobs): various bugs (#430)
Browse files Browse the repository at this point in the history 
* overview job displaying git card or container

* design of summary page

* variable row creation funnel
  • Loading branch information
@bdebon
bdebon committed Dec 26, 2022
1 parent 42bd7e8 commit c4fc885
Show file tree
Hide file tree
Showing 8 changed files with 211 additions and 79 deletions.
31 changes: 23 additions & 8 deletions libs/pages/application/src/lib/feature/last-commit-feature/last-commit-feature.tsx
View file
Expand Up @@ -2,7 +2,8 @@ import { Commit } from 'qovery-typescript-axios'
import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import { getApplicationsState, getCountNewCommitsToDeploy } from '@qovery/domains/application'
import { GitApplicationEntity } from '@qovery/shared/interfaces'
import { isJob } from '@qovery/shared/enums'
import { GitApplicationEntity, JobApplicationEntity, LoadingStatus } from '@qovery/shared/interfaces'
import { RootState } from '@qovery/store'
import LastCommit from '../../ui/last-commit/last-commit'

Expand All @@ -13,22 +14,36 @@ export function LastCommitFeature() {
(state) => getApplicationsState(state).entities[applicationId]
)

const getCommitById = (commits: Commit[]) => {
const deployedCommit = commits.find(
(commit) => commit.git_commit_id === application?.git_repository?.deployed_commit_id
)
const getCommitById = (commits?: Commit[]) => {
const deployedCommitId = isJob(application)
? (application as JobApplicationEntity).source?.docker?.git_repository?.deployed_commit_id
: application?.git_repository?.deployed_commit_id

const deployedCommit = commits?.find((commit) => commit.git_commit_id === deployedCommitId)

if (deployedCommit) {
return deployedCommit
} else {
return application?.git_repository
return isJob(application)
? (application as JobApplicationEntity).source?.docker?.git_repository
: application?.git_repository
}
}

const loadingStatus = (): LoadingStatus => {
if (!application) {
return 'loading'
}
if (isJob(application)) {
return 'loaded'
}
return application?.commits?.loadingStatus
}

return (
<LastCommit
commit={application?.commits?.items && getCommitById(application?.commits?.items)}
loadingStatus={application?.commits?.loadingStatus}
commit={getCommitById(application?.commits?.items)}
loadingStatus={loadingStatus()}
commitDeltaCount={commitDeltaCount}
/>
)
Expand Down
16 changes: 16 additions & 0 deletions libs/pages/application/src/lib/ui/about-content-container/about-content-container.spec.tsx
View file
@@ -0,0 +1,16 @@
import { render } from '__tests__/utils/setup-jest'
import { applicationFactoryMock } from '@qovery/domains/application'
import { ContainerApplicationEntity } from '@qovery/shared/interfaces'
import AboutContentContainer, { AboutContentContainerProps } from './about-content-container'

const mockApplication = applicationFactoryMock(1)[0]
const props: AboutContentContainerProps = {
application: mockApplication as ContainerApplicationEntity,
}

describe('AboutContentContainer', () => {
it('should render successfully', () => {
const { baseElement } = render(<AboutContentContainer {...props} />)
expect(baseElement).toBeTruthy()
})
})
31 changes: 31 additions & 0 deletions libs/pages/application/src/lib/ui/about-content-container/about-content-container.tsx
View file
@@ -0,0 +1,31 @@
import { ContainerApplicationEntity, JobApplicationEntity } from '@qovery/shared/interfaces'
import { timeAgo } from '@qovery/shared/utils'

export interface AboutContentContainerProps {
application: ContainerApplicationEntity | JobApplicationEntity
}

export function AboutContentContainer(props: AboutContentContainerProps) {
const { application } = props

return (
<div className="py-6 px-10">
<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}{' '}
{(application as JobApplicationEntity).source?.image?.image_name}
</p>
<p className="text-text-500 mb-2">
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 || ''))}
</p>
</div>
</div>
)
}

export default AboutContentContainer
27 changes: 9 additions & 18 deletions libs/pages/application/src/lib/ui/page-general/page-general.tsx
View file
@@ -1,4 +1,4 @@
import { getServiceType, isApplication } from '@qovery/shared/enums'
import { getServiceType, isApplication, isJob } from '@qovery/shared/enums'
import {
ContainerApplicationEntity,
GitApplicationEntity,
Expand All @@ -7,8 +7,8 @@ import {
LoadingStatus,
} from '@qovery/shared/interfaces'
import { BaseLink, HelpSection, Icon, Skeleton, Tooltip } from '@qovery/shared/ui'
import { timeAgo } from '@qovery/shared/utils'
import LastCommitFeature from '../../feature/last-commit-feature/last-commit-feature'
import AboutContentContainer from '../about-content-container/about-content-container'
import About from '../about/about'
import InstancesTable from '../instances-table/instances-table'

Expand Down Expand Up @@ -87,23 +87,14 @@ export function PageGeneral(props: PageGeneralProps) {
{application &&
(isApplication(application) ? (
<LastCommitFeature />
) : isJob(application) ? (
(application as JobApplicationEntity).source?.docker ? (
<LastCommitFeature />
) : (
<AboutContentContainer application={application as JobApplicationEntity} />
)
) : (
<div className="py-6 px-10">
<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}{' '}
{(application as JobApplicationEntity).source?.image?.image_name}
</p>
<p className="text-text-500 mb-2">
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 || ''))}
</p>
</div>
</div>
<AboutContentContainer application={application as ContainerApplicationEntity | JobApplicationEntity} />
))}
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion libs/pages/services/src/lib/feature/page-job-create-feature/page-job-create-feature.tsx
View file
Expand Up @@ -45,7 +45,6 @@ export const steps: { title: string }[] = [
{ title: 'Create new job' },
{ title: 'Job Configuration' },
{ title: 'Set resources' },
{ title: 'Set port' },
{ title: 'Set variable environments' },
{ title: 'Ready to install' },
]
Expand Down
173 changes: 125 additions & 48 deletions libs/pages/services/src/lib/ui/page-job-create/step-summary/step-summary.tsx
View file
@@ -1,5 +1,5 @@
import { BuildModeEnum } from 'qovery-typescript-axios'
import { JobType, ServiceTypeEnum } from '@qovery/shared/enums'
import { JobType, ServiceTypeEnum, isCronJob } from '@qovery/shared/enums'
import { FlowVariableData, JobConfigureData, JobGeneralData, JobResourcesData } from '@qovery/shared/interfaces'
import { Button, ButtonIcon, ButtonIconStyle, ButtonSize, ButtonStyle, Icon, IconAwesomeEnum } from '@qovery/shared/ui'

Expand All @@ -25,7 +25,9 @@ export function StepSummary(props: StepSummaryProps) {
<div>
<div className="mb-10">
<div className="flex justify-between mb-2 items-center">
<h3 className="text-text-700 text-lg">Ready to create your Cronjob</h3>
<h3 className="text-text-700 text-lg">
Ready to create your {isCronJob(props.jobType) ? 'Cron' : 'Lifecycle'} job
</h3>
</div>
<p className="text-xs text-text-500 mb-2">
The basic application setup is done, you can now deploy your application or move forward with some advanced
Expand All @@ -42,36 +44,54 @@ export function StepSummary(props: StepSummaryProps) {
<div className="text-text-600 text-ssm mb-2 font-medium">General</div>

<ul className="text-text-400 text-sm list-none">
<li>{props.generalData.name}</li>
<li>{props.generalData.description}</li>
<li>
<span className="font-medium">Name:</span> {props.generalData.name}
</li>
<li>
<span className="font-medium">Description:</span> {props.generalData.description}
</li>
</ul>

<div className="my-4 border-b border-element-light-lighter-500 border-dashed" />

{props.generalData.serviceType === ServiceTypeEnum.APPLICATION && (
<>
<div className="text-text-600 text-ssm mb-2 font-medium">
For application created from a Git provider
</div>
<ul className="text-text-400 text-sm list-none">
<li>{props.generalData.repository}</li>
<li>{props.generalData.branch}</li>
<li>{props.generalData.root_path}</li>
<li>
<span className="font-medium">Repository:</span> {props.generalData.repository}
</li>
<li>
<span className="font-medium">Branch:</span> {props.generalData.branch}
</li>
<li>
<span className="font-medium">Root path:</span> {props.generalData.root_path}
</li>
{props.generalData.build_mode === BuildModeEnum.DOCKER && (
<li>{props.generalData.dockerfile_path}</li>
<li>
<span className="font-medium">Dockerfile path:</span> {props.generalData.dockerfile_path}
</li>
)}
</ul>
</>
)}
{props.generalData.serviceType === ServiceTypeEnum.CONTAINER && (
<>
<div className="text-text-600 text-ssm mb-2 font-medium">For application created from a Registry</div>
<ul className="text-text-400 text-sm list-none">
<li>{props.selectedRegistryName}</li>
<li>Image name: {props.generalData.image_name}</li>
<li>Image tag: {props.generalData.image_tag}</li>
<li>Image entrypoint: {props.generalData.image_entry_point}</li>
<li>CMD arguments: {props.configureData.cmd_arguments}</li>
<li>
<span className="font-medium">Registry:</span> {props.selectedRegistryName}
</li>
<li>
<span className="font-medium">Image name:</span> {props.generalData.image_name}
</li>
<li>
<span className="font-medium">Image tag:</span> {props.generalData.image_tag}
</li>
<li>
<span className="font-medium">Image entrypoint:</span> {props.generalData.image_entry_point}
</li>
<li>
<span className="font-medium">CMD arguments:</span> {props.configureData.cmd_arguments}
</li>
</ul>
</>
)}
Expand All @@ -92,49 +112,102 @@ export function StepSummary(props: StepSummaryProps) {

{props.jobType === ServiceTypeEnum.LIFECYCLE_JOB && (
<>
<div className="text-text-600 text-ssm mb-2 font-medium">Lifecycle job</div>
{props.configureData.on_start?.enabled && (
<>
<ul className="text-text-400 text-sm list-none">
<li>
<div className="font-medium text-ssm text-text-600">
<span className="mr-2 inline-block">Events</span>Environment Start
</div>
</li>
<li>
<span className="font-medium">Entrypoint:</span>{' '}
{props.configureData.on_start?.entrypoint || 'null'}
</li>
<li>
<span className="font-medium">CMD Arguments:</span>{' '}
{props.configureData.on_start?.arguments || 'null'}
</li>
</ul>
<div className="my-4 border-b border-element-light-lighter-500 border-dashed" />
</>
)}
{props.configureData.on_stop?.enabled && (
<>
<ul className="text-text-400 text-sm list-none">
<li>
<div className="font-medium text-ssm text-text-600">
<span className="mr-2 inline-block">Events</span>Environment Stop
</div>
</li>
<li>
<span className="font-medium">Entrypoint:</span>{' '}
{props.configureData.on_stop?.entrypoint || 'null'}
</li>
<li>
<span className="font-medium">CMD Arguments:</span>{' '}
{props.configureData.on_stop?.arguments || 'null'}
</li>
</ul>
<div className="my-4 border-b border-element-light-lighter-500 border-dashed" />
</>
)}
{props.configureData.on_delete?.enabled && (
<>
<ul className="text-text-400 text-sm list-none">
<li>
<div className="font-medium text-ssm text-text-600">
<span className="mr-2 inline-block">Events</span>Environment Delete
</div>
</li>
<li>
<span className="font-medium">Entrypoint:</span>{' '}
{props.configureData.on_delete?.entrypoint || 'null'}
</li>
<li>
<span className="font-medium">CMD Arguments:</span>{' '}
{props.configureData.on_delete?.arguments || 'null'}
</li>
</ul>
<div className="my-4 border-b border-element-light-lighter-500 border-dashed" />
</>
)}
</>
)}

{props.jobType === ServiceTypeEnum.CRON_JOB && (
<>
<ul className="text-text-400 text-sm list-none">
{props.configureData.on_start?.enabled && (
<li>
On start – Entrypoint: {props.configureData.on_start?.entrypoint || 'null'} / CMD:{' '}
{props.configureData.on_start?.arguments || 'null'}
</li>
)}
{props.configureData.on_stop?.enabled && (
<li>
<span className="font-medium">Scheduled at:</span> {props.configureData.schedule}
</li>
{props.configureData.image_entry_point && (
<li>
On Stop – Entrypoint: {props.configureData.on_stop?.entrypoint || 'null'} / CMD:{' '}
{props.configureData.on_stop?.arguments || 'null'}
<span className="font-medium">Entrypoint:</span> {props.configureData.image_entry_point}
</li>
)}
{props.configureData.on_delete?.enabled && (
{props.configureData.cmd_arguments && (
<li>
On Delete – Entrypoint: {props.configureData.on_delete?.entrypoint || 'null'} / CMD:{' '}
{props.configureData.on_delete?.arguments || 'null'}
<span className="font-medium">CMD arguments:</span> {props.configureData.cmd_arguments}
</li>
)}
</ul>
<div className="my-4 border-b border-element-light-lighter-500 border-dashed" />
</>
)}

{props.jobType === ServiceTypeEnum.CRON_JOB && (
<>
<div className="text-text-600 text-ssm mb-2 font-medium">CRON</div>
<ul className="text-text-400 text-sm list-none">
<li>{props.configureData.schedule}</li>
{props.configureData.image_entry_point && <li>{props.configureData.image_entry_point}</li>}
{props.configureData.cmd_arguments && <li>{props.configureData.cmd_arguments}</li>}
</ul>
</>
)}

<div className="my-4 border-b border-element-light-lighter-500 border-dashed" />

<div className="text-text-600 text-ssm mb-2 font-medium">Parameters</div>

<ul className="text-text-400 text-sm list-none">
<li>Max restarts: {props.configureData.nb_restarts}</li>
<li>Max duration: {props.configureData.max_duration}</li>
<li>Port: {props.configureData.port}</li>
<li>
<span className="font-medium">Max restarts:</span> {props.configureData.nb_restarts}
</li>
<li>
<span className="font-medium">Max duration:</span> {props.configureData.max_duration}
</li>
<li>
<span className="font-medium">Port:</span> {props.configureData.port}
</li>
</ul>
</div>

Expand All @@ -153,8 +226,12 @@ export function StepSummary(props: StepSummaryProps) {

<div className="text-text-600 text-ssm mb-2 font-medium">Parameters</div>
<ul className="text-text-400 text-sm list-none">
<li>CPU: {props.resourcesData['cpu'][0]}</li>
<li>Memory: {props.resourcesData.memory} MB</li>
<li>
<span className="font-medium">CPU:</span> {props.resourcesData['cpu'][0]}
</li>
<li>
<span className="font-medium">Memory:</span> {props.resourcesData.memory} MB
</li>
</ul>
</div>

Expand Down

0 comments on commit c4fc885

Please sign in to comment.