From f9912de3c7320124232b8346d4addc78ab67f7c0 Mon Sep 17 00:00:00 2001
From: Anton Schwarz <anton.schwarz@cern.ch>
Date: Thu, 6 Jul 2023 16:46:47 +0200
Subject: [PATCH] Created `Page RSE`

Added beginnings of `PageRSE`

Added button to go back to list on PageRSE

Work on RSEProtocols Table

Restyled `PageRSEProtocols` column widths

when working with column groups, it is worth noting that it is easier to
set the width and style of the column group before setting the column
width itself.

removed column groups from `PageRSEProtocols`

Added `PageRSEAttributes` table

Finalised `PageRSEProtocols`
---
 .../components/Pages/RSE/PageRSE.stories.tsx  |  20 +++
 .../components/Pages/RSE/PageRSE.tsx          | 133 ++++++++++++++++++
 .../Pages/RSE/PageRSEAttributes.stories.tsx   |  15 ++
 .../Pages/RSE/PageRSEAttributes.tsx           |  46 ++++++
 .../Pages/RSE/PageRSEProtocols.stories.tsx    |  15 ++
 .../components/Pages/RSE/PageRSEProtocols.tsx | 107 ++++++++++++++
 .../components/Tags/BoolTag.tsx               |   2 +-
 src/component-library/outputtailwind.css      |   9 ++
 .../infrastructure/data/view-model/rse.d.ts   |  30 ++++
 test/fixtures/table-fixtures.ts               |  40 ++++++
 10 files changed, 416 insertions(+), 1 deletion(-)
 create mode 100644 src/component-library/components/Pages/RSE/PageRSE.stories.tsx
 create mode 100644 src/component-library/components/Pages/RSE/PageRSE.tsx
 create mode 100644 src/component-library/components/Pages/RSE/PageRSEAttributes.stories.tsx
 create mode 100644 src/component-library/components/Pages/RSE/PageRSEAttributes.tsx
 create mode 100644 src/component-library/components/Pages/RSE/PageRSEProtocols.stories.tsx
 create mode 100644 src/component-library/components/Pages/RSE/PageRSEProtocols.tsx
 create mode 100644 src/lib/infrastructure/data/view-model/rse.d.ts

diff --git a/src/component-library/components/Pages/RSE/PageRSE.stories.tsx b/src/component-library/components/Pages/RSE/PageRSE.stories.tsx
new file mode 100644
index 00000000..6b1bc757
--- /dev/null
+++ b/src/component-library/components/Pages/RSE/PageRSE.stories.tsx
@@ -0,0 +1,20 @@
+import { RSEBlockState } from "@/lib/core/entity/rucio";
+import { StoryFn, Meta } from "@storybook/react";
+import { createRSE, createRSEProtocol, createRSEAttribute, mockUseComDOM } from "test/fixtures/table-fixtures";
+import { PageRSE as P } from "./PageRSE";
+
+export default {
+    title: 'Components/Pages/RSE',
+    component: P,
+} as Meta<typeof P>;
+
+const Template: StoryFn<typeof P> = (args) => <P {...args} />;
+
+export const PageRSE = Template.bind({});
+PageRSE.args = {
+    rse: createRSE(),
+    rseblockstate: 7 as RSEBlockState, // 7 = all blocked
+    protocolscomdom: mockUseComDOM(Array.from({length: 20}, (_, i) => createRSEProtocol())),
+    attributescomdom: mockUseComDOM(Array.from({ length: 20 }, (_, i) => createRSEAttribute())),
+    fromrselist: true,
+};
diff --git a/src/component-library/components/Pages/RSE/PageRSE.tsx b/src/component-library/components/Pages/RSE/PageRSE.tsx
new file mode 100644
index 00000000..d6c54bd6
--- /dev/null
+++ b/src/component-library/components/Pages/RSE/PageRSE.tsx
@@ -0,0 +1,133 @@
+import { DateISO, RSE, RSEBlockState } from "@/lib/core/entity/rucio";
+import { H1 } from "../../Text/Headings/H1";
+import { twMerge } from "tailwind-merge";
+import { Generaltable } from "../../Helpers/Metatable";
+import { Titleth, Contenttd } from "../../Helpers/Metatable";
+import { BoolTag } from "../../Tags/BoolTag";
+import { RSETypeTag } from "../../Tags/RSETypeTag";
+import { RSETag } from "../../Tags/RSETag";
+import { HiArrowCircleLeft } from "react-icons/hi";
+import { RSEAttribute, RSEProtocol } from "@/lib/infrastructure/data/view-model/rse";
+import { UseComDOM } from "@/lib/infrastructure/hooks/useComDOM";
+import { PageRSEProtocols } from "./PageRSEProtocols";
+import { PageRSEAttributes } from "./PageRSEAttributes";
+import { H2 } from "../../Text/Headings/H2";
+
+type PageRSEProps = {
+    rse: RSE
+    rseblockstate: RSEBlockState
+    protocolscomdom: UseComDOM<RSEProtocol>
+    attributescomdom: UseComDOM<RSEAttribute>
+    fromrselist?: boolean
+}
+
+export const PageRSE = (
+    props: PageRSEProps
+) => {
+    return (
+        <div
+            className={twMerge("flex flex-col space-y-2 w-full")}
+        >
+            <div
+                className={twMerge(
+                    "rounded-md w-full",
+                    "border dark:border-2 dark:border-gray-200 p-2",
+                    "flex flex-col items-start space-y-2",
+                    "bg-white dark:bg-gray-800"
+                )}
+            >
+                <div
+                    className={twMerge(
+                        "flex w-full",
+                        "flex-col space-y-2 md:space-y-0 justify-start",
+                        "md:flex-row md:justify-between space-x-2"
+                    )}
+                >
+                    <H1>RSE Page for {props.rse.name}</H1>
+                    <a
+                        className={twMerge(
+                            props.fromrselist ? "flex" : "hidden",
+                            "bg-blue-500 hover:bg-blue-600 text-white",
+                            "py-1 px-3 h-8 rounded",
+                            "font-bold",
+                            "cursor-pointer",
+                            "flex-row justify-center lg:justify-end items-center space-x-2 shrink-0"
+                        )}
+                        href={props.fromrselist ? "/listdids?=" + props.fromrselist: "/"} // TODO connect properly
+                        id="back-to-rselist-button"
+                    >
+                        <HiArrowCircleLeft className="text-xl" />
+                        <label className="cursor-pointer" htmlFor="back-to-rselist-button">
+                            Back to RSE List
+                        </label>
+                    </a>
+                </div>
+
+                <div
+                    className={twMerge(
+                        "bg-stone-100 dark:bg-gray-900",
+                        "rounded-md p-2",
+                        "grid grid-cols-1 md:grid-cols-2 gap-2",
+                        "min-h-0 w-full"
+                    )}
+                >
+                    <Generaltable>
+                        <tr>
+                            <Titleth>Name</Titleth>
+                            <Contenttd>{props.rse.name}</Contenttd>
+                        </tr>
+                        <tr>
+                            <Titleth>RSE Type</Titleth>
+                            <Contenttd><RSETypeTag rsetype={props.rse.rse_type} /></Contenttd>
+                        </tr>
+                        <tr>
+                            <Titleth>Availability</Titleth>
+                            <Contenttd><RSETag blocked={props.rseblockstate} /></Contenttd>
+                        </tr>
+                    </Generaltable>
+                    <Generaltable>
+                        <tr>
+                            <Titleth>Volatile</Titleth>
+                            <Contenttd><BoolTag val={props.rse.volatile} /></Contenttd>
+                        </tr>
+                        <tr>
+                            <Titleth>Deterministic</Titleth>
+                            <Contenttd><BoolTag val={props.rse.deterministic} /></Contenttd>
+                        </tr>
+                        <tr>
+                            <Titleth>Staging Area</Titleth>
+                            <Contenttd><BoolTag val={props.rse.staging_area} /></Contenttd>
+                        </tr>
+                    </Generaltable>
+                </div>
+            </div>
+            <div
+                className={twMerge(
+                    "flex flex-col space-y-2 w-full",
+                    "p-0 md:p-2",
+                    "rounded-md border",
+                    "bg-white dark:bg-gray-800",
+                )}
+            >
+                <div
+                    className={twMerge(
+                        "flex flex-col space-y-2 w-full",
+                        "border p-2 rounded",
+                    )}
+                >
+                    <H2>RSE Protocols</H2>
+                    <PageRSEProtocols comdom={props.protocolscomdom} />
+                </div>
+                <div
+                    className={twMerge(
+                        "flex flex-col space-y-2 w-full",
+                        "border p-2 rounded",
+                    )}
+                >
+                    <H2>RSE Attributes</H2>
+                    <PageRSEAttributes comdom={props.attributescomdom} />
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/component-library/components/Pages/RSE/PageRSEAttributes.stories.tsx b/src/component-library/components/Pages/RSE/PageRSEAttributes.stories.tsx
new file mode 100644
index 00000000..18fe8337
--- /dev/null
+++ b/src/component-library/components/Pages/RSE/PageRSEAttributes.stories.tsx
@@ -0,0 +1,15 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { createRSEAttribute, mockUseComDOM } from "test/fixtures/table-fixtures";
+import { PageRSEAttributes as P } from "./PageRSEAttributes";
+
+export default {
+    title: 'Components/Pages/RSE',
+    component: P,
+} as Meta<typeof P>;
+
+const Template: StoryFn<typeof P> = (args) => <P {...args} />;
+
+export const PageRSEAttributes = Template.bind({});
+PageRSEAttributes.args = {
+    comdom: mockUseComDOM(Array.from({ length: 20 }, (_, i) => createRSEAttribute()))
+};
diff --git a/src/component-library/components/Pages/RSE/PageRSEAttributes.tsx b/src/component-library/components/Pages/RSE/PageRSEAttributes.tsx
new file mode 100644
index 00000000..9b8722eb
--- /dev/null
+++ b/src/component-library/components/Pages/RSE/PageRSEAttributes.tsx
@@ -0,0 +1,46 @@
+import { twMerge } from "tailwind-merge";
+import { UseComDOM } from "@/lib/infrastructure/hooks/useComDOM";
+import { RSEAttribute } from "@/lib/infrastructure/data/view-model/rse";
+import { createColumnHelper } from "@tanstack/react-table";
+import { TableFilterString } from "../../StreamedTables/TableFilterString";
+import { P } from "../../Text/Content/P";
+import { H3 } from "../../Text/Headings/H3";
+import { StreamedTable } from "../../StreamedTables/StreamedTable";
+import { BoolTag } from "../../Tags/BoolTag";
+import { NullTag } from "../../Tags/NullTag";
+
+export const PageRSEAttributes = (
+    props: {
+        comdom: UseComDOM<RSEAttribute>
+    }
+) => {
+    const columnHelper = createColumnHelper<RSEAttribute>()
+    const tablecolumns: any[] = [
+        columnHelper.accessor("key", {
+            id: "key",
+            header: info => <TableFilterString column={info.column} name="RSE Attribute" />,
+            cell: info => <P>{info.getValue()}</P>
+        }),
+        columnHelper.accessor("value", {
+            id: "value",
+            header: info => <H3>Value</H3>,
+            cell: info => {
+                const val = info.getValue()
+                if (typeof (val) === "boolean") {
+                    return <BoolTag val={val} />
+                } else if (val === null) {
+                    return <NullTag />
+                } else {
+                    return <P>{val}</P>
+                }
+            }
+        }),
+    ]
+    return (
+        <StreamedTable<RSEAttribute>
+            tablecomdom={props.comdom}
+            tablecolumns={tablecolumns}
+            tablestyling={{}}
+        />
+    );
+};
diff --git a/src/component-library/components/Pages/RSE/PageRSEProtocols.stories.tsx b/src/component-library/components/Pages/RSE/PageRSEProtocols.stories.tsx
new file mode 100644
index 00000000..e3e0bf64
--- /dev/null
+++ b/src/component-library/components/Pages/RSE/PageRSEProtocols.stories.tsx
@@ -0,0 +1,15 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { createRSEProtocol, mockUseComDOM } from "test/fixtures/table-fixtures";
+import { PageRSEProtocols as P } from "./PageRSEProtocols";
+
+export default {
+    title: 'Components/Pages/RSE',
+    component: P,
+} as Meta<typeof P>;
+
+const Template: StoryFn<typeof P> = (args) => <P {...args} />;
+
+export const PageRSEProtocols = Template.bind({});
+PageRSEProtocols.args = {
+    comdom: mockUseComDOM(Array.from({length: 20}, (_, i) => createRSEProtocol()))
+};
diff --git a/src/component-library/components/Pages/RSE/PageRSEProtocols.tsx b/src/component-library/components/Pages/RSE/PageRSEProtocols.tsx
new file mode 100644
index 00000000..cc713614
--- /dev/null
+++ b/src/component-library/components/Pages/RSE/PageRSEProtocols.tsx
@@ -0,0 +1,107 @@
+import { RSEProtocol } from "@/lib/infrastructure/data/view-model/rse";
+import { createColumnHelper } from "@tanstack/react-table";
+import { P } from "../../Text/Content/P";
+import { twMerge } from "tailwind-merge";
+import { UseComDOM } from "@/lib/infrastructure/hooks/useComDOM";
+import { StreamedTable } from "../../StreamedTables/StreamedTable.stories";
+import { TableSortUpDown } from "../../StreamedTables/TableSortUpDown";
+import { TableFilterString } from "../../StreamedTables/TableFilterString";
+import { H3 } from "../../Text/Headings/H3";
+
+export const PageRSEProtocols = (
+    props: {
+        comdom: UseComDOM<RSEProtocol>
+    }
+) => {
+    const shortstyle = { style: "w-20" }
+    const shortstyleblue = { style: "w-20 bg-blue-100"}
+    const shortstylepink = { style: "w-20 bg-pink-100"}
+    const columnHelper = createColumnHelper<RSEProtocol>()
+    const tablecolumns: any[] = [
+        columnHelper.accessor("scheme", {
+            id: "scheme",
+            header: info => <H3>Scheme</H3>,
+            cell: info => <P className="break-all pr-1">{info.getValue()}</P>,
+            meta: { style: "w-24" }
+        }),
+        columnHelper.accessor("hostname", {
+            id: "hostname",
+            header: info => <H3>Hostname</H3>,
+            cell: info => <P className="break-all pr-1">{info.getValue()}</P>
+        }),
+        columnHelper.accessor("port", {
+            id: "port",
+            header: info => <H3>Port</H3>,
+            cell: info => <P className="break-all pr-1">{info.getValue()}</P>,
+            meta: { style: "w-24" }
+        }),
+        columnHelper.accessor("prefix", {
+            id: "prefix",
+            header: info => <H3>Prefix</H3>,
+            cell: info => <P className="break-all pr-1">{info.getValue()}</P>,
+        }),
+        columnHelper.accessor("priorities_lan.read", {
+            id: "priorities_lan.read",
+            header: info => <TableSortUpDown name="LAN/R" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstyleblue
+        }),
+        columnHelper.accessor("priorities_lan.write", {
+            id: "priorities_lan.write",
+            header: info => <TableSortUpDown name="LAN/W" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstyleblue
+        }),
+        columnHelper.accessor("priorities_lan.delete", {
+            id: "priorities_lan.delete",
+            header: info => <TableSortUpDown name="LAN/D" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstyleblue
+        }),
+        columnHelper.accessor("priorities_wan.read", {
+            id: "priorities_lan.read",
+            header: info => <TableSortUpDown name="WAN/R" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstylepink
+        }),
+        columnHelper.accessor("priorities_wan.write", {
+            id: "priorities_lan.write",
+            header: info => <TableSortUpDown name="WAN/W" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstylepink
+        }),
+        columnHelper.accessor("priorities_wan.delete", {
+            id: "priorities_lan.delete",
+            header: info => <TableSortUpDown name="WAN/D" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstylepink,
+        }),
+        columnHelper.accessor("priorities_wan.tpc", {
+            id: "priorities_lan.tpc",
+            header: info => <TableSortUpDown name="TPC" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstylepink,
+        }),
+        columnHelper.accessor("priorities_wan.tpcwrite", {
+            id: "priorities_lan.tpcwrite",
+            header: info => <TableSortUpDown name="TPC/W" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstylepink,
+        }),
+        columnHelper.accessor("priorities_wan.tpcread", {
+            id: "priorities_lan.tpcread",
+            header: info => <TableSortUpDown name="TPC/R" column={info.column} stack />,
+            cell: info => <P className="break-all pr-1 text-right">{info.getValue()}</P>,
+            meta: shortstylepink,
+        }),
+    ]
+    return (
+        <StreamedTable
+            tablecomdom={props.comdom}
+            tablecolumns={tablecolumns}
+            tablestyling={{
+                pageSize: 5
+            }}
+        />
+    );
+};
\ No newline at end of file
diff --git a/src/component-library/components/Tags/BoolTag.tsx b/src/component-library/components/Tags/BoolTag.tsx
index 4e148a65..94425f99 100644
--- a/src/component-library/components/Tags/BoolTag.tsx
+++ b/src/component-library/components/Tags/BoolTag.tsx
@@ -13,7 +13,7 @@ export const BoolTag: FC<BoolTagProps>= (
     return (
         <span
             className={twMerge(
-                "mr-2 px-2.5 py-0.5 rounded h-6 flex w-16 justify-center text-center items-center",
+                "mr-2 px-2.5 py-0.5 rounded h-6 flex w-20 justify-center text-center items-center",
                 val ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" :
                     "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
                 props.className
diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
index 8146bd24..66f1a82c 100644
--- a/src/component-library/outputtailwind.css
+++ b/src/component-library/outputtailwind.css
@@ -831,6 +831,10 @@ video {
   width: 4rem;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1424,6 +1428,11 @@ video {
   background-color: rgb(255 237 213 / var(--tw-bg-opacity));
 }
 
+.bg-pink-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+}
+
 .bg-pink-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 207 232 / var(--tw-bg-opacity));
diff --git a/src/lib/infrastructure/data/view-model/rse.d.ts b/src/lib/infrastructure/data/view-model/rse.d.ts
new file mode 100644
index 00000000..d32c46f8
--- /dev/null
+++ b/src/lib/infrastructure/data/view-model/rse.d.ts
@@ -0,0 +1,30 @@
+import { DateISO } from "@/lib/core/entity/rucio"
+
+export type RSEProtocol = {
+    rseid: string,
+    scheme: string,
+    hostname: string,
+    port: number,
+    prefix: string,
+    impl: string,
+    priorities_lan: {
+        read: number,
+        write: number,
+        delete: number
+    },
+    priorities_wan: {
+        read: number,
+        write: number,
+        delete: number,
+        tpc: number,
+        tpcwrite: number,
+        tpcread: number,
+    },
+    updated_at: DateISO,
+    created_at: DateISO,
+}
+
+export type RSEAttribute = {
+    key: string,
+    value: string| DateISO | number | boolean | null,
+}
\ No newline at end of file
diff --git a/test/fixtures/table-fixtures.ts b/test/fixtures/table-fixtures.ts
index 63177007..4aca1b3a 100644
--- a/test/fixtures/table-fixtures.ts
+++ b/test/fixtures/table-fixtures.ts
@@ -10,6 +10,7 @@ import {
 import {
     DIDDatasetReplicas, DIDRules, FilereplicaState, FilereplicaStateD
 } from '@/lib/infrastructure/data/view-model/page-did';
+import { RSEAttribute, RSEProtocol } from '@/lib/infrastructure/data/view-model/rse';
 import { UseComDOM } from '@/lib/infrastructure/hooks/useComDOM';
 
 export function mockUseComDOM<T>(data: T[]): UseComDOM<T> {
@@ -131,6 +132,45 @@ export function createRSE(): RSE {
     }
 }
 
+export function createRSEProtocol(): RSEProtocol {
+    return {
+        rseid: faker.string.uuid(),
+        scheme: faker.helpers.arrayElement(["srm", "gsiftp", "root", "davs", "s3", "file"]),
+        hostname: faker.internet.ip(),
+        port: faker.number.int({ min: 0, max: 1e4 }),
+        prefix: faker.lorem.words(3).replace(/\s/g, "."),
+        impl: "rucio.rse.protocols.gfal.Default",
+        priorities_lan: {
+            read: faker.number.int({ min: 0, max: 10 }),
+            write: faker.number.int({ min: 0, max: 10 }),
+            delete: faker.number.int({ min: 0, max: 10 }),
+        },
+        priorities_wan: {
+            read: faker.number.int({ min: 0, max: 10 }),
+            write: faker.number.int({ min: 0, max: 10 }),
+            delete: faker.number.int({ min: 0, max: 10 }),
+            tpc: faker.number.int({ min: 0, max: 10 }),
+            tpcwrite: faker.number.int({ min: 0, max: 10 }),
+            tpcread: faker.number.int({ min: 0, max: 10 }),
+        },
+        updated_at: faker.date.recent().toISOString(),
+        created_at: faker.date.past().toISOString(),
+    }
+}
+
+export function createRSEAttribute(): RSEAttribute {
+    return {
+        key: faker.lorem.words(2).replace(/\s/g, "-"),
+        value: faker.helpers.arrayElement([
+            faker.lorem.words(3),
+            faker.date.past().toISOString(),
+            faker.number.int({ min: 0, max: 1e6 }),
+            faker.datatype.boolean(),
+            null,
+        ]),
+    }
+}
+
 export function createRule(): Rule {
     return {
         id: faker.string.uuid(),