From 52e7fa824fc4e8c9cdf9756d2ce6e9cd56222a81 Mon Sep 17 00:00:00 2001 From: Frederic Heem Date: Thu, 7 Dec 2023 17:47:09 -0300 Subject: [PATCH] diagram tabs --- bau-ui/keyValueList/keyValueList.js | 1 + .../gccd/src/components/run/diagramTab.ts | 23 +++ .../src/components/run/runDetailContent.ts | 164 ++++++++---------- examples/gccd/src/components/run/runTabs.ts | 7 + 4 files changed, 107 insertions(+), 88 deletions(-) create mode 100644 examples/gccd/src/components/run/diagramTab.ts diff --git a/bau-ui/keyValueList/keyValueList.js b/bau-ui/keyValueList/keyValueList.js index 2111277a..1f87040f 100644 --- a/bau-ui/keyValueList/keyValueList.js +++ b/bau-ui/keyValueList/keyValueList.js @@ -8,6 +8,7 @@ export default function (context, options = {}) { const className = css` list-style: none; & li { + margin: 0.5rem 0; display: flex; flex-direction: column; font-size: smaller; diff --git a/examples/gccd/src/components/run/diagramTab.ts b/examples/gccd/src/components/run/diagramTab.ts new file mode 100644 index 00000000..6c02549e --- /dev/null +++ b/examples/gccd/src/components/run/diagramTab.ts @@ -0,0 +1,23 @@ +import rubicox from "rubico/x"; +const { isIn } = rubicox; +import { type Context } from "@grucloud/bau-ui/context"; + +const isCompleted = isIn(["completed", "error"]); + +export default function (context: Context) { + const { bau } = context; + const { section, img } = bau.tags; + + return function Diagram(props: any) { + const { data }: any = props; + return section( + () => + isCompleted(data.val.status) && + !data.val.error && + img({ + src: data.val.svgUrl, + alt: "Resources", + }) + ); + }; +} diff --git a/examples/gccd/src/components/run/runDetailContent.ts b/examples/gccd/src/components/run/runDetailContent.ts index 4ea7b974..edfc8efb 100644 --- a/examples/gccd/src/components/run/runDetailContent.ts +++ b/examples/gccd/src/components/run/runDetailContent.ts @@ -1,116 +1,104 @@ import rubicox from "rubico/x"; const { isIn } = rubicox; import { type Context } from "@grucloud/bau-ui/context"; -import tableContainer from "@grucloud/bau-ui/tableContainer"; +import keyValueList from "@grucloud/bau-ui/keyValueList"; import tableSkeleton from "../tableSkeleton"; import runStatus from "./runStatus"; export default function (context: Context) { const { bau, css, config } = context; - const { table, tr, td, th, section, a, img, tbody } = bau.tags; + const { div, section, a, li, label, span } = bau.tags; + const KeyValueList = keyValueList(context); const TableSkeleton = tableSkeleton(context); const RunStatus = runStatus(context); - const TableContainer = tableContainer(context, { - class: css` - & th { - text-align: left; - } - `, - }); const isCompleted = isIn(["completed", "error"]); return function RunDetailContent({ data, loading }: any) { - return section( - TableContainer( - table(() => { - const { - org_id, - workspace_id, - project_id, - run_id, - status, - stateUrl, - logsUrl, - svgUrl, - error, - } = data.val; - return loading.val - ? TableSkeleton({ columnsSize: 2, rowSize: 8 }) - : tbody( - tr( - th("Organisation"), - td( - a({ href: `${config.base}/org/${org_id}` }, data.val.org_id) + return section(() => { + const { + org_id, + workspace_id, + project_id, + run_id, + status, + stateUrl, + logsUrl, + svgUrl, + error, + } = data.val; + return loading.val + ? TableSkeleton({ columnsSize: 2, rowSize: 8 }) + : div( + { + class: css` + display: inline-flex; + gap: 3rem; + `, + }, + KeyValueList( + li( + label("Organisation"), + span( + a({ href: `${config.base}/org/${org_id}` }, data.val.org_id) + ) + ), + li( + label("Project"), + span( + a( + { + href: `${config.base}/org/${org_id}/projects/${project_id}`, + }, + project_id ) - ), - tr( - th("Project"), - td( - a( - { - href: `${config.base}/org/${org_id}/projects/${project_id}`, - }, - project_id - ) + ) + ), + li( + label("Workspace"), + span( + a( + { + href: `${config.base}/org/${org_id}/projects/${project_id}/workspaces/${workspace_id}`, + }, + workspace_id ) - ), - tr( - th("Workspace"), - td( + ) + ), + li(label("RunId"), span(run_id)), + li(label("Status"), span(RunStatus({ status, error }))) + ), + isCompleted(status) && + KeyValueList( + li( + label("State file"), + span( a( - { - href: `${config.base}/org/${org_id}/projects/${project_id}/workspaces/${workspace_id}`, - }, - workspace_id + { href: stateUrl, target: "_blank" }, + "Download state file" ) ) ), - tr(th("Run Id"), td(run_id)), - tr(th("Status"), td(RunStatus({ status, error }))), - isCompleted(status) && [ - tr( - th("State file"), - td( + !error && + li( + label("Live Graph"), + span( a( - { href: stateUrl, target: "_blank" }, - "Download state file" + { href: svgUrl, target: "_blank" }, + "Download resources graph" ) ) ), - !error && - tr( - th("Live Graph"), - td( - a( - { href: svgUrl, target: "_blank" }, - "Download resources graph" - ) - ) - ), - tr( - th("Logs"), - td( - a( - { href: logsUrl, target: "_blank" }, - "Download log file" - ) - ) - ), - ] - ); - }), - - () => - isCompleted(data.val.status) && - !data.val.error && - img({ - src: data.val.svgUrl, - alt: "Resources", - }) - ) - ); + li( + label("Logs"), + span( + a({ href: logsUrl, target: "_blank" }, "Download log file") + ) + ) + ) + ); + }); }; } diff --git a/examples/gccd/src/components/run/runTabs.ts b/examples/gccd/src/components/run/runTabs.ts index ac144113..d5568403 100644 --- a/examples/gccd/src/components/run/runTabs.ts +++ b/examples/gccd/src/components/run/runTabs.ts @@ -2,10 +2,12 @@ import { type Context } from "@grucloud/bau-ui/context"; import tabs, { Tabs } from "@grucloud/bau-ui/tabs"; import runDetailContent from "./runDetailContent"; import resourcesTree from "../resourcesTree"; +import diagramTab from "./diagramTab"; export default function (context: Context) { const RunDetailContent = runDetailContent(context); const ResourcesTree = resourcesTree(context); + const DiagramTab = diagramTab(context); return function RunTabs(props: any) { const tabDefs: Tabs = [ @@ -19,6 +21,11 @@ export default function (context: Context) { Header: () => "Resources", Content: () => ResourcesTree(props), }, + { + name: "diagram", + Header: () => "Diagram", + Content: () => DiagramTab(props), + }, ]; const Tabs = tabs(context, { tabDefs, variant: "plain", color: "neutral" });