From b1b436d98f820caa9e84016e5e12871f5dff7fd5 Mon Sep 17 00:00:00 2001 From: Aleksey Ilin Date: Wed, 6 Dec 2023 12:44:27 +0100 Subject: [PATCH] styling 2 --- gui/app/layout.tsx | 4 +- gui/app/page.module.scss | 22 +++ gui/app/page.tsx | 66 +++++++- .../[id]/[instanceId]/page.module.scss | 8 - gui/app/processes/[id]/[instanceId]/page.tsx | 27 ++-- gui/app/processes/[id]/page.module.scss | 15 +- gui/app/processes/[id]/page.tsx | 58 +++---- gui/app/processes/page.tsx | 59 +++++-- gui/app/tasks/[id]/page.tsx | 19 +-- gui/app/tasks/[id]/taskForm.tsx | 2 +- gui/app/tasks/page.tsx | 36 ++++- gui/next.config.js | 17 +- gui/package.json | 2 +- gui/src/components/Box/Box.module.scss | 5 + gui/src/components/Box/Box.tsx | 12 ++ gui/src/components/Box/index.ts | 3 + gui/src/components/Button/Button.module.scss | 11 +- gui/src/components/List/List.module.scss | 2 + .../components/Modeler/Modeler.module.scss | 3 +- gui/src/components/Modeler/Modeler.tsx | 1 - .../ModelerPage/ModelerPage.module.scss | 59 +++++++ .../components/ModelerPage/ModelerPage.tsx | 149 +++++++++++++----- .../Navigation/Navigation.module.scss | 4 + gui/src/components/Navigation/Navigation.tsx | 26 ++- gui/src/components/Panel/Panel.module.scss | 6 - .../ProcessCard/ProcessCard.module.scss | 1 - .../components/TaskCard/TaskCard.module.scss | 1 - gui/src/components/Tasks/Tasks.tsx | 2 +- gui/src/components/Viewer/Viewer.tsx | 19 ++- gui/src/scss/_base.scss | 117 +++++++++++++- gui/src/utils/processUtils.ts | 141 +++++++---------- gui/yarn.lock | 124 +++++++-------- 32 files changed, 709 insertions(+), 312 deletions(-) create mode 100644 gui/app/page.module.scss create mode 100644 gui/src/components/Box/Box.module.scss create mode 100644 gui/src/components/Box/Box.tsx create mode 100644 gui/src/components/Box/index.ts diff --git a/gui/app/layout.tsx b/gui/app/layout.tsx index 74315670..6612b1ba 100644 --- a/gui/app/layout.tsx +++ b/gui/app/layout.tsx @@ -18,8 +18,8 @@ const fontIbm = IBM_Plex_Sans_Condensed({ }); export const metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "ChainFlow dashboard", + description: "", }; export default function RootLayout({ diff --git a/gui/app/page.module.scss b/gui/app/page.module.scss new file mode 100644 index 00000000..371ae868 --- /dev/null +++ b/gui/app/page.module.scss @@ -0,0 +1,22 @@ +.container { + flex: 1 0 auto; + display: flex; + flex-flow: column; + gap: 8px; +} + +.dashboard { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); +} + +.definition { + display: block; + padding: 8px 0; + font-size: 14px; +} + +.list { + margin: -16px; +} diff --git a/gui/app/page.tsx b/gui/app/page.tsx index c79877fe..7c2497c4 100644 --- a/gui/app/page.tsx +++ b/gui/app/page.tsx @@ -1,7 +1,63 @@ -import { FC } from "react"; +import Panel from "@/src/components/Panel"; +import styles from "./page.module.scss"; +import { + getDefinitionStats, + getDefinitions, + getInstances, + getTasks, +} from "@/src/utils/processUtils"; +import Box from "@/src/components/Box"; -const HomePage: FC = () => { - return

chainflow

; -}; +export default async function TasksPage() { + const { stats, tasks, definitions, instances } = await getData(); -export default HomePage; + return ( +
+
+

Dashboard

+
+
+
+
+ + + + + + + + + + + + {stats.map((stat, idx) => ( + + + + + + + ))} + +
DefinitionInstancesFailed JobsIncidents
+ {stat.definition.name} + {stat.instances}{stat.failedJobs}{stat.incidents.length}
+ + + + {tasks.filter((task) => !task.assignee).length} of {tasks.length}{" "} + unassigned + + +
+
+
+ ); +} + +async function getData() { + return { + stats: await getDefinitionStats(), + tasks: await getTasks(), + }; +} diff --git a/gui/app/processes/[id]/[instanceId]/page.module.scss b/gui/app/processes/[id]/[instanceId]/page.module.scss index 3d30649d..7f3834bb 100644 --- a/gui/app/processes/[id]/[instanceId]/page.module.scss +++ b/gui/app/processes/[id]/[instanceId]/page.module.scss @@ -85,12 +85,4 @@ .variables { flex: 0 0 auto; - - &Table { - border-spacing: 4px; - } - - &TH { - text-align: left; - } } diff --git a/gui/app/processes/[id]/[instanceId]/page.tsx b/gui/app/processes/[id]/[instanceId]/page.tsx index 09e35738..1e110122 100644 --- a/gui/app/processes/[id]/[instanceId]/page.tsx +++ b/gui/app/processes/[id]/[instanceId]/page.tsx @@ -52,23 +52,28 @@ export default async function InstancePage({
-
- - + +
+ + + + + + + + {Object.entries(variables).map(([varKey, varValue]) => { return ( - - - - + + + + ); })}
NameTypeValue
{varKey}{varValue.type} - {JSON.stringify(varValue.value)} -
{varKey}{varValue.type}{`${varValue.value}`}
-
+
@@ -79,6 +84,6 @@ async function getData(id: string) { return { instance: await getInstance(id), variables: await getVariables(id), - tasks: await getTasks(null, null, id), + tasks: await getTasks(null, id), }; } diff --git a/gui/app/processes/[id]/page.module.scss b/gui/app/processes/[id]/page.module.scss index eaf48dd7..873224de 100644 --- a/gui/app/processes/[id]/page.module.scss +++ b/gui/app/processes/[id]/page.module.scss @@ -53,16 +53,15 @@ &TR { display: flex; flex-flow: column; - gap: 2px; - } - - &TH { - display: block; - text-align: left; + padding: 8px 16px; + gap: 4px; } + &TH, &TD { display: block; + text-align: left; + padding: 0 !important; } } @@ -82,10 +81,6 @@ .instances { flex: 0 0 auto; - &Table { - border-spacing: 4px; - } - &TH { text-align: left; } diff --git a/gui/app/processes/[id]/page.tsx b/gui/app/processes/[id]/page.tsx index c219f490..f350166a 100644 --- a/gui/app/processes/[id]/page.tsx +++ b/gui/app/processes/[id]/page.tsx @@ -48,34 +48,36 @@ export default async function InstancesPage({ title="Instances" tools={ + + ))} + +
diff --git a/gui/src/components/Navigation/Navigation.module.scss b/gui/src/components/Navigation/Navigation.module.scss index a2e7003f..890a3923 100644 --- a/gui/src/components/Navigation/Navigation.module.scss +++ b/gui/src/components/Navigation/Navigation.module.scss @@ -67,6 +67,10 @@ color: #22d49f; } } + + &.active { + border-right-color: #22d49f; + } } .sections { diff --git a/gui/src/components/Navigation/Navigation.tsx b/gui/src/components/Navigation/Navigation.tsx index 611c5703..4af9abfd 100644 --- a/gui/src/components/Navigation/Navigation.tsx +++ b/gui/src/components/Navigation/Navigation.tsx @@ -1,3 +1,5 @@ +"use client"; + import { FC } from "react"; import styles from "./Navigation.module.scss"; import Link from "next/link"; @@ -5,8 +7,11 @@ import { FaDatabase, FaHome, FaProjectDiagram, FaList } from "react-icons/fa"; import { FaCodeBranch, FaUser } from "react-icons/fa6"; import clsx from "clsx"; import ConnectButton from "@/src/components/ConnectButton"; +import { usePathname } from "next/navigation"; export const Navigation: FC = () => { + const pathname = usePathname(); + return (
@@ -17,7 +22,12 @@ export const Navigation: FC = () => {