habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: reworked sync status card (#13625)

Browse Source 
* reworked sync status

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update imports

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add story and fix import

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* format

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L.
2025-03-21 22:48:28 +00:00
committed by GitHub
parent b2c2fc001b
commit 8417d8508f
7 changed files with 242 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
web/src/elements/sync/SyncStatusCard.stories.ts Normal file
View File

@ -0,0 +1,157 @@
import type { Meta, StoryObj } from "@storybook/web-components";
import { html } from "lit";
import { LogLevelEnum, SyncStatus, SystemTaskStatusEnum } from "@goauthentik/api";
import "./SyncStatusCard";
const metadata: Meta<SyncStatus> = {
title: "Elements/<ak-sync-status-card>",
component: "ak-sync-status-card",
};
export default metadata;
export const Running: StoryObj = {
args: {
status: {
isRunning: true,
tasks: [],
} as SyncStatus,
},
// @ts-ignore
render: ({ status }: SyncStatus) => {
return html` <div style="background-color: #f0f0f0; padding: 1rem;">
<ak-sync-status-card
.fetch=${async () => {
return status;
}}
></ak-sync-status-card>
</div>`;
},
};
export const SingleTask: StoryObj = {
args: {
status: {
isRunning: false,
tasks: [
{
uuid: "9ff42169-8249-4b67-ae3d-e455d822de2b",
name: "Single task",
fullName: "foo:bar:baz",
status: SystemTaskStatusEnum.Successful,
messages: [
{
logger: "foo",
event: "bar",
attributes: {
foo: "bar",
},
timestamp: new Date(),
logLevel: LogLevelEnum.Info,
},
],
description: "foo",
startTimestamp: new Date(),
finishTimestamp: new Date(),
duration: 0,
},
],
} as SyncStatus,
},
// @ts-ignore
render: ({ status }: SyncStatus) => {
return html` <div style="background-color: #f0f0f0; padding: 1rem;">
<ak-sync-status-card
.fetch=${async () => {
return status;
}}
></ak-sync-status-card>
</div>`;
},
};
export const MultipleTasks: StoryObj = {
args: {
status: {
isRunning: false,
tasks: [
{
uuid: "9ff42169-8249-4b67-ae3d-e455d822de2b",
name: "Single task",
fullName: "foo:bar:baz",
status: SystemTaskStatusEnum.Successful,
messages: [
{
logger: "foo",
event: "bar",
attributes: {
foo: "bar",
},
timestamp: new Date(),
logLevel: LogLevelEnum.Info,
},
],
description: "foo",
startTimestamp: new Date(),
finishTimestamp: new Date(),
duration: 0,
},
{
uuid: "9ff42169-8249-4b67-ae3d-e455d822de2b",
name: "Single task",
fullName: "foo:bar:baz",
status: SystemTaskStatusEnum.Successful,
messages: [
{
logger: "foo",
event: "bar",
attributes: {
foo: "bar",
},
timestamp: new Date(),
logLevel: LogLevelEnum.Info,
},
],
description: "foo",
startTimestamp: new Date(),
finishTimestamp: new Date(),
duration: 0,
},
{
uuid: "9ff42169-8249-4b67-ae3d-e455d822de2b",
name: "Single task",
fullName: "foo:bar:baz",
status: SystemTaskStatusEnum.Successful,
messages: [
{
logger: "foo",
event: "bar",
attributes: {
foo: "bar",
},
timestamp: new Date(),
logLevel: LogLevelEnum.Info,
},
],
description: "foo",
startTimestamp: new Date(),
finishTimestamp: new Date(),
duration: 0,
},
],
} as SyncStatus,
},
// @ts-ignore
render: ({ status }: SyncStatus) => {
return html` <div style="background-color: #f0f0f0; padding: 1rem;">
<ak-sync-status-card
.fetch=${async () => {
return status;
}}
></ak-sync-status-card>
</div>`;
},
};