Merge pull request #376 from rucio/esilvaju/issue370

Esilvaju/issue370

src/app/(rucio)/dashboard/page.tsx

@@ -1,12 +1,27 @@
-'use client';
-import { fixtureOngoingrules, fixtureUsedquota } from "test/fixtures/widget-fixtures";
-import { Dashboard as DashboardStory } from "@/component-library/Pages/Dashboard/Dashboard";
-import { Role } from "@/lib/core/entity/account";
+'use client'
+import {
+    fixtureOngoingrules,
+    fixtureUsedquota,
+} from 'test/fixtures/widget-fixtures'
+import { Dashboard as DashboardStory } from '@/component-library/Pages/Dashboard/Dashboard'
+import { Role } from '@/lib/core/entity/account'
+import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header'
+import { useEffect, useState } from 'react'
+import { getSiteHeader } from '../queries'
+import { Loading } from '@/component-library/Pages/Helpers/Loading'
+import { User } from '@/lib/core/entity/auth-models'
 export default function Page() {
+    const [siteHeader, setSiteHeader] = useState<SiteHeaderViewModel>(
+        {status: "pending"} as SiteHeaderViewModel,
+    )
+    useEffect(() => {
+        getSiteHeader().then((vm: SiteHeaderViewModel) => setSiteHeader(vm))
+    }, [])
+    if (siteHeader.status === "pending") return <Loading title='Dashboard' />
     return (
         <DashboardStory
-            accountname="test"
-            accountrole={Role.ADMIN}
+            accountname={(siteHeader.activeAccount as User).rucioAccount}
+            accountrole={(siteHeader.activeAccount as User).role === 'admin' ? Role.ADMIN : Role.USER}
             inputOngoingrules={Array.from({ length: 20 }, (v, k) => fixtureOngoingrules())}
             inputUsedquota={Array.from({ length: 20 }, (v, k) => fixtureUsedquota())}
         />

src/app/(rucio)/queries.ts

@@ -0,0 +1,25 @@
+import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header'
+import { HTTPRequest, prepareRequestArgs } from '@/lib/sdk/http'
+
+export async function getSiteHeader(): Promise<SiteHeaderViewModel> {
+    const req: HTTPRequest = {
+        method: 'GET',
+        url: new URL(
+            `${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-site-header`,
+        ),
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        params: {},
+    }
+
+    const { url, requestArgs } = prepareRequestArgs(req)
+    const res = await fetch(url, {
+        method: 'GET',
+        headers: new Headers({
+            'Content-Type': 'application/json',
+        } as HeadersInit),
+    })
+
+    return await res.json()
+}

src/app/(rucio)/rule/page/[id]/page.tsx

@@ -5,6 +5,8 @@ import { useState, useEffect } from "react";
 import useComDOM from "@/lib/infrastructure/hooks/useComDOM";
 import { HTTPRequest } from "@/lib/sdk/http";
 import { RuleMetaViewModel, RulePageLockEntryViewModel } from "@/lib/infrastructure/data/view-model/rule";
+import { getSiteHeader } from "@/app/(rucio)/queries";
+import { SiteHeaderViewModel } from "@/lib/infrastructure/data/view-model/site-header";
 
 export default function PageRule({ params }: { params: { id: string } }) {
     const comDOM = useComDOM<RulePageLockEntryViewModel>(
@@ -15,9 +17,15 @@ export default function PageRule({ params }: { params: { id: string } }) {
         50,
         true
     )
+    const [isAdmin, setIsAdmin] = useState<boolean>(false)
+    useEffect(() => {
+        getSiteHeader().then((vm: SiteHeaderViewModel) =>
+            setIsAdmin(vm.activeAccount?.role === 'admin'),
+        )
+    }, [])
     const [meta, setMeta] = useState<RuleMetaViewModel>({} as RuleMetaViewModel)
     useEffect(() => {
-        setMeta({...fixtureRuleMetaViewModel(), id: params.id})
+        setMeta({ ...fixtureRuleMetaViewModel(), id: params.id })
     }, [])
     useEffect(() => {
         const runQuery = async () => {
@@ -37,6 +45,10 @@ export default function PageRule({ params }: { params: { id: string } }) {
         <PageRuleStory
             ruleMeta={meta}
             ruleLocks={comDOM}
+            ruleBoostFunc={() => {
+                console.log('boost not implemented')
+            }}
+            ruleBoostShow={isAdmin}
         />
     )
 }

src/component-library/Pages/Rule/PageRule.stories.tsx

@@ -14,4 +14,6 @@ export const PageRule = Template.bind({});
 PageRule.args = {
     ruleMeta: fixtureRuleMetaViewModel(),
     ruleLocks: mockUseComDOM<RulePageLockEntryViewModel>(Array.from({length: 100}, () => fixtureRulePageLockEntryViewModel())),
+    ruleBoostFunc: () => {console.log("boosted rule")},
+    ruleBoostShow: true,
 };

src/component-library/Pages/Rule/PageRule.tsx

@@ -24,11 +24,15 @@ import { UseComDOM } from "@/lib/infrastructure/hooks/useComDOM";
 import { Heading } from "../Helpers/Heading";
 import { Body } from "../Helpers/Body";
 import { RuleMetaViewModel, RulePageLockEntryViewModel } from "@/lib/infrastructure/data/view-model/rule";
+import { Button } from "@/component-library/Button/Button";
+import { HiRocketLaunch } from "react-icons/hi2";
 
 
 export interface PageRulePageProps {
     ruleMeta: RuleMetaViewModel;
     ruleLocks: UseComDOM<RulePageLockEntryViewModel>
+    ruleBoostFunc: () => void;
+    ruleBoostShow: boolean;
 }
 
 
@@ -152,7 +156,22 @@ export const PageRule = (
             <Heading
                 title="View Rule"
                 subtitle={`For rule ${props.ruleMeta.scope}:${props.ruleMeta.name}`}
-            />
+                >
+                <div
+                    className={twMerge(
+                        "w-full p-2 rounded",
+                        "bg-gray-200 dark:bg-gray-900",
+                        props.ruleBoostShow ? "" : "hidden"
+                    )}
+                >
+                    <Button
+                        label="Boost rule"
+                        theme="orange"
+                        icon={<HiRocketLaunch />}
+                        onClick={() => props.ruleBoostFunc()}
+                    />
+                </div>
+            </Heading>
             <Body>
                 <Tabs
                     tabs={

src/component-library/Pages/Subscriptions/ListSubscription.tsx

@@ -13,6 +13,7 @@ import { Body } from "../Helpers/Body";
 import { Heading } from "../Helpers/Heading";
 import { SubscriptionRuleStatesViewModel } from "@/lib/infrastructure/data/view-model/subscriptions";
 import { TableInternalLink } from "@/component-library/StreamedTables/TableInternalLink";
+import useReponsiveHook from "@/component-library/Helpers/ResponsiveHook";
 
 export interface ListSubscriptionProps {
     accountname: string;
@@ -47,8 +48,8 @@ export const ListSubscription = (
                         column={info.column}
                         element={
                             <RuleStateTag
-                                className={isLg() ? "md:w-28" : ""}
-                                tiny={!isLg()}
+                                className={responsive.lg ? "md:w-28" : ""}
+                                tiny={!responsive.lg}
                                 state={RuleState.OK}
                             />
                         }
@@ -70,8 +71,8 @@ export const ListSubscription = (
                         column={info.column}
                         element={
                             <RuleStateTag
-                                className={isLg() ? "md:w-28" : ""}
-                                tiny={!isLg()}
+                                className={responsive.lg ? "md:w-28" : ""}
+                                tiny={!responsive.lg}
                                 state={RuleState.REPLICATING}
                             />
                         }
@@ -93,8 +94,8 @@ export const ListSubscription = (
                         column={info.column}
                         element={
                             <RuleStateTag
-                                className={isLg() ? "md:w-28" : ""}
-                                tiny={!isLg()}
+                                className={responsive.lg ? "md:w-28" : ""}
+                                tiny={!responsive.lg}
                                 state={RuleState.STUCK}
                             />
                         }
@@ -116,8 +117,8 @@ export const ListSubscription = (
                         column={info.column}
                         element={
                             <RuleStateTag
-                                className={isLg() ? "md:w-28" : ""}
-                                tiny={!isLg()}
+                                className={responsive.lg ? "md:w-28" : ""}
+                                tiny={!responsive.lg}
                                 state={RuleState.SUSPENDED}
                             />
                         }
@@ -130,6 +131,52 @@ export const ListSubscription = (
                 style: "w-12 lg:w-32",
             }
         }),
+        columnHelper.accessor("state_waiting_approval", {
+            id: "state_waiting_approval",
+            header: info => {
+                return (
+                    <TableSortUpDown
+                        name="Waiting Approval"
+                        column={info.column}
+                        element={
+                            <RuleStateTag
+                                className={responsive.lg ? "md:w-28" : ""}
+                                tiny={!responsive.lg}
+                                state={RuleState.WAITING_APPROVAL}
+                            />
+                        }
+                        stack
+                    />
+                )
+            },
+            cell: info => <P mono className="text-right pr-2">{info.getValue()}</P>,
+            meta: {
+                style: "w-12 lg:w-32",
+            }
+        }),
+        columnHelper.accessor("state_inject", {
+            id: "state_inject",
+            header: info => {
+                return (
+                    <TableSortUpDown
+                        name="Inject"
+                        column={info.column}
+                        element={
+                            <RuleStateTag
+                                className={responsive.lg ? "md:w-28" : ""}
+                                tiny={!responsive.lg}
+                                state={RuleState.INJECT}
+                            />
+                        }
+                        stack
+                    />
+                )
+            },
+            cell: info => <P mono className="text-right pr-2">{info.getValue()}</P>,
+            meta: {
+                style: "w-12 lg:w-32",
+            }
+        }),
         columnHelper.display({
             id: "condensed_states",
             header: info => <H3 className="text-left">States</H3>,
@@ -155,6 +202,8 @@ export const ListSubscription = (
                         <MiniState state={RuleState.REPLICATING} amount={info.row.original.state_replicating} />
                         <MiniState state={RuleState.STUCK} amount={info.row.original.state_stuck} />
                         <MiniState state={RuleState.SUSPENDED} amount={info.row.original.state_suspended} />
+                        <MiniState state={RuleState.WAITING_APPROVAL} amount={info.row.original.state_waiting_approval} />
+                        <MiniState state={RuleState.INJECT} amount={info.row.original.state_inject} />
                     </div>
                 )
             },
@@ -165,25 +214,7 @@ export const ListSubscription = (
     ]
 
 
-    const [windowSize, setWindowSize] = useState([
-        1920, 1080
-    ]);
-
-    useEffect(() => {
-        setWindowSize([window.innerWidth, window.innerHeight])
-
-        const handleWindowResize = () => {
-            setWindowSize([window.innerWidth, window.innerHeight]);
-        };
-
-        window.addEventListener('resize', handleWindowResize);
-
-        return () => {
-            window.removeEventListener('resize', handleWindowResize);
-        };
-    }, []);
-    const isSm = () => windowSize[0] > 640  // 640px is the breakpoint for sm => is minimum sm sized
-    const isLg = () => windowSize[0] > 1024 // 1024px is the breakpoint for lg => is minimum lg sized
+    const responsive = useReponsiveHook()
 
 
     return (
@@ -202,11 +233,13 @@ export const ListSubscription = (
                     tablecolumns={tablecolumns}
                     tablestyling={{
                         visibility: {
-                            "state_ok": isSm(),
-                            "state_replicating": isSm(),
-                            "state_stuck": isSm(),
-                            "state_suspended": isSm(),
-                            "condensed_states": !isSm(),
+                            "state_ok": responsive.sm,
+                            "state_replicating": responsive.sm,
+                            "state_stuck": responsive.sm,
+                            "state_suspended": responsive.sm,
+                            "state_waiting_approval": responsive.sm,
+                            "state_inject": responsive.sm,
+                            "condensed_states": !responsive.sm,
                         },
                         tableHeadRowStyle: "md:h-16",
                         tableBodyRowStyle: "h-8",

test/component/PageRule.test.tsx

@@ -16,6 +16,8 @@ describe("PageRule Story Test", () => {
             <PageRuleStory
                 ruleMeta={ruleMeta}
                 ruleLocks={mockUseComDOM(Array.from({length: 100}, (v,k) => fixtureRulePageLockEntryViewModel()))}
+                ruleBoostFunc={() => {}}
+                ruleBoostShow={false}
             />
         ))
         const user = userEvent.setup()
@@ -35,12 +37,9 @@ describe("PageRule Story Test", () => {
         ).toHaveTextContent(
             `${ruleMeta.scope}:${ruleMeta.name}`
         )
-        // click on header
-        await user.click(screen.getByRole("heading", { name: /For rule/}))
-        selectedTabExpect().not.toHaveFocus()
-        // tab to focus the `locks` tab
-        await user.tab()
-        selectedTabExpect().toHaveFocus()
+
+
+        await user.click(screen.getByRole("tab", { name: "Locks"}))
         // arrow right to focus the `metadata` tab (test cycling!)
         await user.keyboard("{arrowright}")
         selectedTabExpect().toHaveTextContent("Metadata")

test/fixtures/table-fixtures.ts

@@ -325,8 +325,10 @@ export function fixtureSubscriptionRuleStatesViewModel(): SubscriptionRuleStates
         state_replicating: faker.number.int({ min: 0, max: 10 }),
         state_stuck: faker.number.int({ min: 0, max: 10 }),
         state_suspended: faker.number.int({ min: 0, max: 10 }),
-        state_inject: faker.number.int({ min: 0, max: 10 }),
         state_waiting_approval: faker.number.int({ min: 0, max: 10 }),
+        state_inject: faker.number.int({ min: 0, max: 10 }),
+
+
     }
 }