Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(service-list): feedback #1802

Merged
merged 4 commits into from
Jan 6, 2025
Merged

feat(service-list): feedback #1802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
867a5e6
feat(service-list): feedback
RemiBonnet Jan 3, 2025
b259c06
Allow tooltip for small size
RemiBonnet Jan 6, 2025
a2b7a6f
Hide force run when deploying service
RemiBonnet Jan 6, 2025
9705fc1
Remove animation for deployment queue
RemiBonnet Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 40 additions & 5 deletions ...ns/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { type Environment, OrganizationEventTargetType, StateEnum } from 'qovery-typescript-axios'
import { useLocation } from 'react-router-dom'
import { match } from 'ts-pattern'
import { AUDIT_LOGS_PARAMS_URL, ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
import {
ActionToolbar,
Expand Down Expand Up @@ -112,7 +113,23 @@ function MenuManageDeployment({
>
<Tooltip content="Manage Deployment">
<div className="flex h-full w-full items-center justify-center">
<Icon iconName="play" className="mr-4" />
{match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => <Icon iconName="loader" className="mr-3 animate-spin" />
)
.otherwise(() => (
<Icon iconName="play" className="mr-4" />
))}
<Icon iconName="chevron-down" />
</div>
</Tooltip>
Expand All @@ -139,10 +156,28 @@ function MenuManageDeployment({
Stop
</DropdownMenu.Item>
)}
<DropdownMenu.Separator />
<DropdownMenu.Item icon={<Icon iconName="rotate" />} onSelect={openUpdateAllModal}>
Deploy latest version for..
</DropdownMenu.Item>
{match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => null
)
.otherwise(() => (
<>
<DropdownMenu.Separator />
<DropdownMenu.Item icon={<Icon iconName="rotate" />} onSelect={openUpdateAllModal}>
Deploy latest version for..
</DropdownMenu.Item>
</>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
)
Expand Down
133 changes: 90 additions & 43 deletions libs/domains/services/feature/src/lib/service-action-toolbar/service-action-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,24 +386,39 @@ function MenuManageDeployment({
Restart Service
</DropdownMenu.Item>
)}
{service.serviceType === 'JOB' && (
<DropdownMenu.Item
icon={<Icon iconName="play" />}
onSelect={() =>
openModal({
content: (
<ForceRunModalFeature
organizationId={environment.organization.id}
projectId={environment.project.id}
service={service}
/>
),
})
}
>
Force Run
</DropdownMenu.Item>
)}
{service.serviceType === 'JOB' &&
match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => null
)
.otherwise(() => (
<DropdownMenu.Item
icon={<Icon iconName="play" />}
onSelect={() =>
openModal({
content: (
<ForceRunModalFeature
organizationId={environment.organization.id}
projectId={environment.project.id}
service={service}
/>
),
})
}
>
Force Run
</DropdownMenu.Item>
))}
{isStopAvailable(state) && (
<DropdownMenu.Item icon={<Icon iconName="circle-stop" />} onSelect={mutationStop}>
Stop
Expand All @@ -418,19 +433,35 @@ function MenuManageDeployment({
.with({ serviceType: 'APPLICATION' }, ({ git_repository }) => git_repository)
.with({ serviceType: 'JOB' }, ({ source }) => source.docker?.git_repository)
.exhaustive()
return (
<>
<DropdownMenu.Separator />
{gitRepository && (
<DropdownMenu.Item
icon={<Icon iconName="clock-rotate-left" />}
onSelect={() => deployCommitVersion(service, gitRepository, 'Deploy another version')}
>
Deploy another version
</DropdownMenu.Item>
)}
</>
)

return match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => null
)
.otherwise(
() =>
gitRepository && (
<>
<DropdownMenu.Separator />
<DropdownMenu.Item
icon={<Icon iconName="clock-rotate-left" />}
onSelect={() => deployCommitVersion(service, gitRepository, 'Deploy another version')}
>
Deploy another version
</DropdownMenu.Item>
</>
)
)
}
)
.with(
Expand All @@ -442,19 +473,35 @@ function MenuManageDeployment({
.with({ serviceType: 'CONTAINER' }, (source) => source)
.with({ serviceType: 'JOB' }, ({ source: { image } }) => image)
.exhaustive()
return (
containerSource.tag && (
<>
<DropdownMenu.Separator />
<DropdownMenu.Item
icon={<Icon iconName="clock-rotate-left" />}
onSelect={() => deployTagVersion(service, containerSource)}
>
Deploy another version
</DropdownMenu.Item>
</>

return match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => null
)
.otherwise(
() =>
containerSource.tag && (
<>
<DropdownMenu.Separator />
<DropdownMenu.Item
icon={<Icon iconName="clock-rotate-left" />}
onSelect={() => deployTagVersion(service, containerSource)}
>
Deploy another version
</DropdownMenu.Item>
</>
)
)
)
}
)
.with(
Expand Down
32 changes: 16 additions & 16 deletions libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`ServiceList should match snapshot 1`] = `
class="flex grow flex-col justify-between"
>
<table
class="divide-y divide-neutral-200 text-neutral-400 w-full min-w-[980px] text-ssm"
class="divide-y divide-neutral-200 text-neutral-400 w-full min-w-[1080px] overflow-x-scroll text-ssm"
>
<thead>
<tr>
Expand All @@ -29,7 +29,7 @@ exports[`ServiceList should match snapshot 1`] = `
</th>
<th
class="h-11 text-left px-6 border-r pl-0 font-medium"
style="width: 50%;"
style="width: 57%;"
>
<div
class="relative inline-block"
Expand Down Expand Up @@ -75,13 +75,13 @@ exports[`ServiceList should match snapshot 1`] = `
</th>
<th
class="h-11 text-left px-6 font-medium"
style="width: 35%;"
style="width: 30%;"
>
Target version
</th>
<th
class="h-11 text-left px-6 font-medium"
style="width: 5%;"
style="width: 3%;"
>
<button
class="flex items-center gap-1 truncate cursor-pointer select-none"
Expand Down Expand Up @@ -117,7 +117,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 border-r pl-0 first:relative"
style="width: 50%;"
style="width: 57%;"
>
<div
class="flex items-center justify-between"
Expand Down Expand Up @@ -320,7 +320,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 35%;"
style="width: 30%;"
>
<div
class="flex items-center gap-1"
Expand Down Expand Up @@ -414,7 +414,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 5%;"
style="width: 3%;"
>
<a
class="cursor-pointer transition duration-100 font-medium items-center text-sm group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-350 hover:translate-x-0 hover:text-brand-500"
Expand Down Expand Up @@ -455,7 +455,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 border-r pl-0 first:relative"
style="width: 50%;"
style="width: 57%;"
>
<div
class="flex items-center justify-between"
Expand Down Expand Up @@ -667,7 +667,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 35%;"
style="width: 30%;"
>
<div
class="flex items-center gap-1"
Expand Down Expand Up @@ -757,7 +757,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 5%;"
style="width: 3%;"
>
<a
class="cursor-pointer transition duration-100 font-medium items-center text-sm group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-350 hover:translate-x-0 hover:text-brand-500"
Expand Down Expand Up @@ -798,7 +798,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 border-r pl-0 first:relative"
style="width: 50%;"
style="width: 57%;"
>
<div
class="flex items-center justify-between"
Expand Down Expand Up @@ -1312,7 +1312,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 35%;"
style="width: 30%;"
>
<div
class="flex items-center gap-1"
Expand Down Expand Up @@ -1406,7 +1406,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 5%;"
style="width: 3%;"
>
<a
class="cursor-pointer transition duration-100 font-medium items-center text-sm group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-350 hover:translate-x-0 hover:text-brand-500"
Expand Down Expand Up @@ -1447,7 +1447,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 border-r pl-0 first:relative"
style="width: 50%;"
style="width: 57%;"
>
<div
class="flex items-center justify-between"
Expand Down Expand Up @@ -1754,7 +1754,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 35%;"
style="width: 30%;"
>
<div
class="flex items-center gap-1"
Expand Down Expand Up @@ -1848,7 +1848,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 5%;"
style="width: 3%;"
>
<a
class="cursor-pointer transition duration-100 font-medium items-center text-sm group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-350 hover:translate-x-0 hover:text-brand-500"
Expand Down
Loading
Loading