Skip to content

Commit

Permalink
fix(service-list): add skeleton for deployment status (#1622)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RemiBonnet
RemiBonnet authored Sep 2, 2024
1 parent 6295935 commit bf241c0
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 139 deletions.
268 changes: 144 additions & 124 deletions libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,45 +341,50 @@ exports[`ServiceList should match snapshot 1`] = `
class="h-14 px-4 py-0 first:relative"
style="width: 15%;"
>
<a
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none bg-white dark:bg-neutral-600 outline-brand-500 h-9 px-3 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none gap-2 whitespace-nowrap text-sm"
data-state="closed"
href="/organization/1/project/cf021d82-2c5e-41de-96eb-eb69c022eddc/environment/55867c71-56f9-4b4f-ab22-5904c9dbafda/logs/037c9e87-e098-4970-8b1f-9a5ffe9e4b89/deployment-logs"
<div
aria-busy="false"
class="flex rounded"
>
<div
class=""
<a
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none bg-white dark:bg-neutral-600 outline-brand-500 h-9 px-3 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none gap-2 whitespace-nowrap text-sm"
data-state="closed"
href="/organization/1/project/cf021d82-2c5e-41de-96eb-eb69c022eddc/environment/55867c71-56f9-4b4f-ab22-5904c9dbafda/logs/037c9e87-e098-4970-8b1f-9a5ffe9e4b89/deployment-logs"
>
<svg
class="text-neutral-300"
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
<div
class=""
data-state="closed"
>
<g
clip-path="url(#clip0_5424_5935)"
<svg
class="text-neutral-300"
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0zM0 12a12 12 0 1124 0 12 12 0 01-24 0zm16.5-4.5v9h-9v-9h9z"
fill="currentColor"
/>
</g>
<defs>
<clippath
id="clip0_5424_5935"
<g
clip-path="url(#clip0_5424_5935)"
>
<path
d="M0 0H24V24H0z"
fill="#fff"
d="M21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0zM0 12a12 12 0 1124 0 12 12 0 01-24 0zm16.5-4.5v9h-9v-9h9z"
fill="currentColor"
/>
</clippath>
</defs>
</svg>
</div>
Stopped
</a>
</g>
<defs>
<clippath
id="clip0_5424_5935"
>
<path
d="M0 0H24V24H0z"
fill="#fff"
/>
</clippath>
</defs>
</svg>
</div>
Stopped
</a>
</div>
</td>
<td
class="h-14 px-4 py-0 first:relative"
Expand Down Expand Up @@ -691,45 +696,50 @@ exports[`ServiceList should match snapshot 1`] = `
class="h-14 px-4 py-0 first:relative"
style="width: 15%;"
>
<a
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none bg-white dark:bg-neutral-600 outline-brand-500 h-9 px-3 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none gap-2 whitespace-nowrap text-sm"
data-state="closed"
href="/organization/1/project/cf021d82-2c5e-41de-96eb-eb69c022eddc/environment/55867c71-56f9-4b4f-ab22-5904c9dbafda/logs/04308de2-af27-405f-9e95-570fa94ed577/deployment-logs"
<div
aria-busy="false"
class="flex rounded"
>
<div
class=""
<a
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none bg-white dark:bg-neutral-600 outline-brand-500 h-9 px-3 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none gap-2 whitespace-nowrap text-sm"
data-state="closed"
href="/organization/1/project/cf021d82-2c5e-41de-96eb-eb69c022eddc/environment/55867c71-56f9-4b4f-ab22-5904c9dbafda/logs/04308de2-af27-405f-9e95-570fa94ed577/deployment-logs"
>
<svg
class="text-neutral-300"
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
<div
class=""
data-state="closed"
>
<g
clip-path="url(#clip0_5424_5935)"
<svg
class="text-neutral-300"
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0zM0 12a12 12 0 1124 0 12 12 0 01-24 0zm16.5-4.5v9h-9v-9h9z"
fill="currentColor"
/>
</g>
<defs>
<clippath
id="clip0_5424_5935"
<g
clip-path="url(#clip0_5424_5935)"
>
<path
d="M0 0H24V24H0z"
fill="#fff"
d="M21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0zM0 12a12 12 0 1124 0 12 12 0 01-24 0zm16.5-4.5v9h-9v-9h9z"
fill="currentColor"
/>
</clippath>
</defs>
</svg>
</div>
Stopped
</a>
</g>
<defs>
<clippath
id="clip0_5424_5935"
>
<path
d="M0 0H24V24H0z"
fill="#fff"
/>
</clippath>
</defs>
</svg>
</div>
Stopped
</a>
</div>
</td>
<td
class="h-14 px-4 py-0 first:relative"
Expand Down Expand Up @@ -1325,45 +1335,50 @@ exports[`ServiceList should match snapshot 1`] = `
class="h-14 px-4 py-0 first:relative"
style="width: 15%;"
>
<a
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none bg-white dark:bg-neutral-600 outline-brand-500 h-9 px-3 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none gap-2 whitespace-nowrap text-sm"
data-state="closed"
href="/organization/1/project/cf021d82-2c5e-41de-96eb-eb69c022eddc/environment/55867c71-56f9-4b4f-ab22-5904c9dbafda/logs/ebd8be35-d7a2-4d4f-ad82-de4378a83ef4/deployment-logs"
<div
aria-busy="false"
class="flex rounded"
>
<div
class=""
<a
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none bg-white dark:bg-neutral-600 outline-brand-500 h-9 px-3 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none gap-2 whitespace-nowrap text-sm"
data-state="closed"
href="/organization/1/project/cf021d82-2c5e-41de-96eb-eb69c022eddc/environment/55867c71-56f9-4b4f-ab22-5904c9dbafda/logs/ebd8be35-d7a2-4d4f-ad82-de4378a83ef4/deployment-logs"
>
<svg
class="text-neutral-300"
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
<div
class=""
data-state="closed"
>
<g
clip-path="url(#clip0_5424_5935)"
<svg
class="text-neutral-300"
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0zM0 12a12 12 0 1124 0 12 12 0 01-24 0zm16.5-4.5v9h-9v-9h9z"
fill="currentColor"
/>
</g>
<defs>
<clippath
id="clip0_5424_5935"
<g
clip-path="url(#clip0_5424_5935)"
>
<path
d="M0 0H24V24H0z"
fill="#fff"
d="M21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0zM0 12a12 12 0 1124 0 12 12 0 01-24 0zm16.5-4.5v9h-9v-9h9z"
fill="currentColor"
/>
</clippath>
</defs>
</svg>
</div>
Stopped
</a>
</g>
<defs>
<clippath
id="clip0_5424_5935"
>
<path
d="M0 0H24V24H0z"
fill="#fff"
/>
</clippath>
</defs>
</svg>
</div>
Stopped
</a>
</div>
</td>
<td
class="h-14 px-4 py-0 first:relative"
Expand Down Expand Up @@ -1762,45 +1777,50 @@ exports[`ServiceList should match snapshot 1`] = `
class="h-14 px-4 py-0 first:relative"
style="width: 15%;"
>
<a
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none bg-white dark:bg-neutral-600 outline-brand-500 h-9 px-3 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none gap-2 whitespace-nowrap text-sm"
data-state="closed"
href="/organization/1/project/cf021d82-2c5e-41de-96eb-eb69c022eddc/environment/55867c71-56f9-4b4f-ab22-5904c9dbafda/logs/33962e52-7883-42fd-8613-85e04229a9b6/deployment-logs"
<div
aria-busy="false"
class="flex rounded"
>
<div
class=""
<a
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none bg-white dark:bg-neutral-600 outline-brand-500 h-9 px-3 rounded-full border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none gap-2 whitespace-nowrap text-sm"
data-state="closed"
href="/organization/1/project/cf021d82-2c5e-41de-96eb-eb69c022eddc/environment/55867c71-56f9-4b4f-ab22-5904c9dbafda/logs/33962e52-7883-42fd-8613-85e04229a9b6/deployment-logs"
>
<svg
class="text-neutral-300"
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
<div
class=""
data-state="closed"
>
<g
clip-path="url(#clip0_5424_5935)"
<svg
class="text-neutral-300"
fill="none"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0zM0 12a12 12 0 1124 0 12 12 0 01-24 0zm16.5-4.5v9h-9v-9h9z"
fill="currentColor"
/>
</g>
<defs>
<clippath
id="clip0_5424_5935"
<g
clip-path="url(#clip0_5424_5935)"
>
<path
d="M0 0H24V24H0z"
fill="#fff"
d="M21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0zM0 12a12 12 0 1124 0 12 12 0 01-24 0zm16.5-4.5v9h-9v-9h9z"
fill="currentColor"
/>
</clippath>
</defs>
</svg>
</div>
Never deployed
</a>
</g>
<defs>
<clippath
id="clip0_5424_5935"
>
<path
d="M0 0H24V24H0z"
fill="#fff"
/>
</clippath>
</defs>
</svg>
</div>
Never deployed
</a>
</div>
</td>
<td
class="h-14 px-4 py-0 first:relative"
Expand Down
33 changes: 18 additions & 15 deletions libs/domains/services/feature/src/lib/service-list/service-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import {
Menu,
MenuAlign,
type MenuData,
Skeleton,
StatusChip,
TableFilter,
TablePrimitives,
Expand Down Expand Up @@ -363,21 +364,23 @@ export function ServiceList({ environment, className, ...props }: ServiceListPro
const value = info.getValue()
const service = info.row.original
return (
<Tooltip content="See logs">
<Link
as="button"
to={ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + DEPLOYMENT_LOGS_URL(service.id)}
onClick={(e) => e.stopPropagation()}
className="gap-2 whitespace-nowrap text-sm"
size="md"
color="neutral"
variant="outline"
radius="full"
>
<StatusChip status={service.deploymentStatus?.state} />
{value}
</Link>
</Tooltip>
<Skeleton width={102} height={34} show={!value}>
<Tooltip content="See logs">
<Link
as="button"
to={ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + DEPLOYMENT_LOGS_URL(service.id)}
onClick={(e) => e.stopPropagation()}
className="gap-2 whitespace-nowrap text-sm"
size="md"
color="neutral"
variant="outline"
radius="full"
>
<StatusChip status={service.deploymentStatus?.state} />
{value}
</Link>
</Tooltip>
</Skeleton>
)
},
}),
Expand Down

0 comments on commit bf241c0

Please sign in to comment.