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`

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,
+};

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>
+    );
+};

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()))
+};

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={{}}
+        />
+    );
+};

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()))
+};

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
+            }}
+        />
+    );
+};

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

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));