Feature 433. Functional create rule + Feature 436. Dashboard

package.json

@@ -26,6 +26,7 @@
     "@next/font": "13.1.6",
     "@preact/signals": "^1.2.2",
     "@primer/css": "^20.8.2",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-toast": "^1.2.1",
     "@sinclair/typebox": "^0.28.14",
@@ -60,12 +61,14 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
     "react-modal": "^3.16.1",
+    "recharts": "^2.13.0-alpha.5",
     "reflect-metadata": "^0.1.13",
     "swr": "^2.0.3",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.2.7",
     "typescript": "4.9.5",
-    "util": "^0.12.5"
+    "util": "^0.12.5",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

public/streamWorker.js

@@ -101,6 +101,8 @@ async function getResponseError(response) {
             if (response.status === 404) {
                 error.type = 'not_found';
             }
+        } else if (jsonResponse.error) {
+            error.message = jsonResponse.error;
         }
     } catch (e) {
     }

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

@@ -1,24 +1,5 @@
 'use client';
-import { fixtureOngoingrules, fixtureUsedquota } from 'test/fixtures/widget-fixtures';
-import { Dashboard as DashboardStory } from '@/component-library/pages/legacy/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/legacy/Helpers/Loading';
-import { User } from '@/lib/core/entity/auth-models';
+import { Dashboard } from '@/component-library/pages/Dashboard/Dashboard';
 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={(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())}
-        />
-    );
+    return <Dashboard />;
 }

src/app/(rucio)/queries.ts

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

src/app/(rucio)/rse/list/page.tsx

@@ -8,5 +8,5 @@ export default function Page() {
 
     // TODO: fetch initial data
 
-    return <ListRSE firstExpression={firstExpression ?? undefined} />;
+    return <ListRSE initialExpression={firstExpression ?? undefined} />;
 }

src/app/(rucio)/rule/create/page.tsx

@@ -1,119 +1,58 @@
 'use client';
-import { CreateRule as CreateRuleStory } from '@/component-library/pages/legacy/Rule/CreateRule';
-import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
-import {
-    CreateRulesViewModel,
-    generateEmptyCreateRulesViewModel,
-    TypedDIDValidationQuery,
-    TypedDIDValidationResponse,
-} from '@/lib/infrastructure/data/view-model/create-rule';
-import useComDOM from '@/lib/infrastructure/hooks/useComDOM';
-import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule';
-import { BatchResponse } from '@/lib/infrastructure/web-worker/comdom-wrapper';
-import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did';
-import { useEffect, useState } from 'react';
-import { AccountInfo } from '@/lib/core/entity/rucio';
-import { generateEmptyAccountInfoViewModel } from '@/lib/infrastructure/data/view-model/account';
-import { TCreateRuleFeatureRequestParams } from '@/pages/api/feature/create-rule';
-
-export default function CreateRule() {
-    const onSubmit = async (query: TCreateRuleFeatureRequestParams) => {
-        let viewModel: CreateRulesViewModel = generateEmptyCreateRulesViewModel();
-        viewModel.status = 'pending';
-
-        try {
-            const response = await fetch(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/create-rule`, {
-                method: 'POST',
-                headers: new Headers({
-                    'Content-Type': 'application/json',
-                } as HeadersInit),
-                body: JSON.stringify(query),
-            });
-
-            if (response.ok) {
-                const data: CreateRulesViewModel = await response.json();
-                viewModel = data;
-            } else {
-                throw new Error(`Error creating rule. HTTP Status Code: ${response.status}`);
+import { CreateRule } from '@/component-library/pages/Rule/create/CreateRule';
+import { parameters } from '../../../../../.storybook/preview';
+import { CreateRuleParameters } from '@/lib/infrastructure/data/view-model/rule';
+
+const PARAMS_KEY = 'create_rule_parameters';
+const ACTIVE_KEY = 'create_rule_active';
+
+export default function Page() {
+    const getSavedParameters = () => {
+        const initialParametersString = localStorage.getItem(PARAMS_KEY);
+        // TODO: check with zod
+        if (initialParametersString) {
+            try {
+                return JSON.parse(initialParametersString);
+            } catch (e) {
+                return undefined;
             }
-        } catch (error: any) {
-            viewModel.status = 'error';
-            viewModel.message = error.message;
         }
-
-        return viewModel;
+        return undefined;
     };
 
-    const didValidation = (query: TypedDIDValidationQuery) => {
-        // if the DID contains the string "error", it will be added to the error list
-        var localErrorDIDs: TypedDIDValidationResponse = { ErrorList: [] };
-        query.DIDList.map((DID: string, index: number) => {
-            if (DID.includes('error')) {
-                localErrorDIDs.ErrorList.push({ DID: DID, ErrorCodes: [421], Message: 'This DID is invalid' });
-            }
-        });
-        // if the error list is empty, the promise will resolve, otherwise it will reject
-        if (localErrorDIDs.ErrorList.length === 0) {
-            return Promise.resolve(localErrorDIDs);
-        } else {
-            return Promise.reject(localErrorDIDs);
+    const getSavedIndex = () => {
+        const initialActiveString = localStorage.getItem(ACTIVE_KEY);
+
+        if (initialActiveString) {
+            const numberValue = parseInt(initialActiveString);
+            return isNaN(numberValue) ? undefined : numberValue;
         }
     };
 
-    const DIDSearchComDOM = useComDOM<ListDIDsViewModel>('create-rule-page-did-query', [], false, Infinity, 50, true);
+    const setSavedParameters = (parameters: CreateRuleParameters) => {
+        localStorage.setItem(PARAMS_KEY, JSON.stringify(parameters));
+    };
 
-    const processRSEAccountUsageLimitViewModelBatchResponse = (batch: BatchResponse<RSEAccountUsageLimitViewModel>) => {
-        // The feature replaces Infinity with -1 for the bytes_limit and bytes_remaining fields
-        // This is done because Infinity is not a valid JSON value
-        // This code replaces -1 with Infinity for the bytes_limit and bytes_remaining fields
-        batch.data.forEach((rseAccountUsageLimitViewModel: RSEAccountUsageLimitViewModel) => {
-            if (rseAccountUsageLimitViewModel.status === 'success') {
-                if (rseAccountUsageLimitViewModel.bytes_limit === -1) {
-                    rseAccountUsageLimitViewModel.bytes_limit = Infinity;
-                }
-                if (rseAccountUsageLimitViewModel.bytes_remaining === -1) {
-                    rseAccountUsageLimitViewModel.bytes_remaining = Infinity;
-                }
-            }
-        });
-        return batch;
+    const setSavedIndex = (activeIndex: number) => {
+        localStorage.setItem(ACTIVE_KEY, activeIndex.toString());
     };
 
-    const RSEComDOM = useComDOM<RSEAccountUsageLimitViewModel>(
-        'create-rule-page-rse-query',
-        [],
-        false,
-        Infinity,
-        50,
-        true,
-        processRSEAccountUsageLimitViewModelBatchResponse,
-    );
+    const removeSavedParameters = () => {
+        localStorage.removeItem(PARAMS_KEY);
+    };
 
-    const [accountInfo, setAccountInfo] = useState<AccountInfo>(generateEmptyAccountInfoViewModel());
-    useEffect(() => {
-        fetch(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/account-info`)
-            .then(response => {
-                if (response.ok) {
-                    return response.json();
-                } else {
-                    throw new Error(`Error fetching account info. Are you logged in? HTTP Status Code: ${response.status}`);
-                }
-            })
-            .then((data: AccountInfo) => {
-                setAccountInfo(data);
-            })
-            .catch(error => {
-                console.error(error);
-            });
-    }, []);
+    const removeSavedIndex = () => {
+        localStorage.removeItem(ACTIVE_KEY);
+    };
 
     return (
-        <CreateRuleStory
-            accountInfo={accountInfo}
-            onSubmit={onSubmit}
-            didValidation={didValidation}
-            didListComDOM={DIDSearchComDOM}
-            rseListComDOM={RSEComDOM}
+        <CreateRule
+            getSavedIndex={getSavedIndex}
+            getSavedParameters={getSavedParameters}
+            setSavedIndex={setSavedIndex}
+            setSavedParameters={setSavedParameters}
+            removeSavedParameters={removeSavedParameters}
+            removeSavedIndex={removeSavedIndex}
         />
     );
 }

src/component-library/atoms/form/button.tsx

@@ -13,15 +13,17 @@ const buttonVariants = cva(
     {
         variants: {
             variant: {
-                default: 'bg-brand-600 text-neutral-100 hover:bg-brand-700 dark:hover:bg-brand-500',
+                default: 'bg-opacity-80 bg-brand-600 text-neutral-100 hover:bg-brand-700 dark:hover:bg-brand-500',
                 success: 'bg-base-success-600 text-neutral-100 hover:bg-base-success-700 dark:hover:bg-base-success-500',
                 error: 'bg-base-error-600 text-neutral-100 hover:bg-base-error-700 dark:hover:bg-base-error-500',
+                neutral:
+                    'bg-neutral-300 text-neutral-900 dark:bg-opacity-90 dark:bg-neutral-700 dark:text-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800',
             },
             size: {
                 default: 'h-10 px-4 py-2',
                 sm: 'h-9 rounded-md px-3',
                 lg: 'h-11 rounded-md px-8',
-                icon: 'h-10 w-10',
+                icon: 'h-6 w-6 rounded',
             },
         },
         defaultVariants: {

src/component-library/atoms/form/input.tsx

@@ -2,6 +2,19 @@ import * as React from 'react';
 
 import { cn } from '@/component-library/utils';
 
+const commonClasses = cn(
+    'flex w-full rounded-md',
+    'border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
+    'rounded-md',
+    'bg-neutral-100 dark:bg-neutral-800',
+    'px-3 py-2',
+    'text-neutral-900 dark:text-neutral-100',
+    'placeholder:text-neutral-500',
+    'focus:ring-0 focus:shadow-brand',
+    'focus:outline-none focus:border-1 focus:border-brand-500',
+    'dark:focus:border-1 dark:focus:border-brand-500',
+);
+
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     onEnterKey?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
@@ -17,29 +30,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
         }
     };
 
-    return (
-        <input
-            type={type}
-            className={cn(
-                'flex w-full rounded-md',
-                'h-10',
-                'border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
-                'rounded-md',
-                'bg-neutral-100 dark:bg-neutral-800',
-                'px-3 py-2',
-                'text-neutral-900 dark:text-neutral-100',
-                'placeholder:text-neutral-500',
-                'focus:ring-0 focus:shadow-brand',
-                'focus:outline-none focus:border-1 focus:border-brand-500',
-                'dark:focus:border-1 dark:focus:border-brand-500',
-                className,
-            )}
-            ref={ref}
-            onKeyDown={handleKeyDown}
-            {...props}
-        />
-    );
+    return <input type={type} className={cn(commonClasses, 'h-10', className)} ref={ref} onKeyDown={handleKeyDown} {...props} />;
 });
 Input.displayName = 'Input';
 
-export { Input };
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, onKeyDown, ...props }, ref) => {
+    return <textarea className={cn('h-40', commonClasses, className)} ref={ref} {...props} />;
+});
+Textarea.displayName = 'Textarea';
+
+export { Input, Textarea };

src/component-library/atoms/misc/CircleWithText.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { cn } from '@/component-library/utils';
+
+const CircleWithText = ({ text, className, onClick }: { text: string; onClick?: () => void; className?: string }) => {
+    const classes = cn(
+        'flex items-center justify-center',
+        'w-12 h-12 rounded-full',
+        'text-neutral-100',
+        'border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
+        className,
+        onClick ? 'cursor-pointer' : '',
+    );
+
+    return (
+        <div className={classes} onClick={onClick}>
+            <span className="text-lg">{text}</span>
+        </div>
+    );
+};
+
+export default CircleWithText;

src/component-library/atoms/misc/Divider.tsx

@@ -6,15 +6,22 @@ export const Divider = ({
     thickness = 'border',
     color = 'border-neutral-100 dark:border-neutral-700',
     margin = 'my-2',
+    className = '',
 }) => {
     const isHorizontal = orientation === 'horizontal';
 
-    const classNames = cn(color, thickness, margin, {
-        'w-full': isHorizontal,
-        'h-full': !isHorizontal,
-        'border-t': isHorizontal,
-        'border-l': !isHorizontal,
-    });
+    const classNames = cn(
+        color,
+        thickness,
+        margin,
+        {
+            'w-full': isHorizontal,
+            'h-full': !isHorizontal,
+            'border-t': isHorizontal,
+            'border-l': !isHorizontal,
+        },
+        className,
+    );
 
     return <div className={classNames}></div>;
 };