inject RuleSummary ViewModel for server side verification

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

@@ -3,21 +3,50 @@ import { CreateRule as CreateRuleStory } from "@/component-library/Pages/Rule/Cr
 import { RSEAccountUsageLimitViewModel } from "@/lib/infrastructure/data/view-model/rse";
 import { DIDLongViewModel } from "@/lib/infrastructure/data/view-model/did";
 import {
-    CreateRuleQuery,
+    TCreateRuleRequest,
+    TFetchCreateRuleSummaryRequest,
     TypedDIDValidationQuery, TypedDIDValidationResponse,
 } from '@/lib/infrastructure/data/view-model/create-rule'
 import { HTTPRequest } from "@/lib/sdk/http";
 import useComDOM from "@/lib/infrastructure/hooks/useComDOM";
+import { RuleSummaryViewModel } from "@/lib/infrastructure/data/view-model/rule";
 
 export default function CreateRule() {
 
-    const onSubmit = (query: CreateRuleQuery) => {
+    const onSubmit = (query: TCreateRuleRequest) => {
         return Promise.resolve({
             success: true,
         })
     }
 
-
+    const fetchSummary = (
+        query: TFetchCreateRuleSummaryRequest,
+        setSummaryViewModel: (viewModel: RuleSummaryViewModel) => void,
+        setActivePage: (int: number) => void,
+        setError: (error: string) => void,
+        ) => {
+        const url: URL = new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/create-rule-summary`)
+        fetch(url.toString(), {
+            method: "POST",
+            headers: new Headers({
+                'Content-Type': 'application/json'
+            } as HeadersInit),
+            body: JSON.stringify(query)
+        }).then((response) => {
+            if(response.ok) {
+                return response.json()
+            } else {
+                setError(`Error fetching summary. HTTP Status Code: ${response.status}`)
+            }
+        }).then((data: RuleSummaryViewModel) => {
+            setSummaryViewModel(data)
+            setActivePage(3)
+        }).catch((error) => {
+            setError(`Error fetching summary. Error: ${error}`)
+        })
+        return query
+    }
+
     const didValidation = (query: TypedDIDValidationQuery) => {
         // if the DID contains the string "error", it will be added to the error list
         var localErrorDIDs: TypedDIDValidationResponse = { ErrorList: [] }
@@ -57,6 +86,7 @@ export default function CreateRule() {
     return (
         <CreateRuleStory
             onSubmit={onSubmit}
+            fetchSummary={fetchSummary}
             didValidation={didValidation}
             didListComDOM={DIDSearchComDOM}
             rseListComDOM={RSEComDOM}

src/component-library/Demos/03_1_Create_Rules.stories.tsx

@@ -1,4 +1,4 @@
-import { CreateRuleQuery, TypedDIDValidationQuery, TypedDIDValidationResponse } from "@/lib/infrastructure/data/view-model/create-rule";
+import { TCreateRuleRequest, TypedDIDValidationQuery, TypedDIDValidationResponse } from "@/lib/infrastructure/data/view-model/create-rule";
 import { Meta, StoryObj } from "@storybook/react";
 import { fixtureDIDLongViewModel, fixtureRSEAccountUsageLimitViewModel, mockUseComDOM } from "test/fixtures/table-fixtures";
 import { CreateRule  as CR} from "../Pages/Rule/CreateRule.stories";
@@ -12,7 +12,7 @@ type Story  = StoryObj<typeof CR>
 
 export const CreateRule: Story = {
     args: {
-        onSubmit: (query: CreateRuleQuery) => {
+        onSubmit: (query: TCreateRuleRequest) => {
             return Promise.resolve({
                 success: true,
             })

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

@@ -3,9 +3,11 @@ import { fixtureDIDLongViewModel, fixtureRSEAccountUsageLimitViewModel, mockUseC
 
 import { CreateRule as CR } from './CreateRule'
 import {
-    CreateRuleQuery,
+    TCreateRuleRequest,
+    TFetchCreateRuleSummaryRequest,
     TypedDIDValidationQuery, TypedDIDValidationResponse,
 } from '@/lib/infrastructure/data/view-model/create-rule'
+import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule'
 
 export default {
     title: 'Components/Pages/Rule',
@@ -16,11 +18,25 @@ const Template: StoryFn<typeof CR> = args => <CR {...args} />
 
 export const CreateRule = Template.bind({})
 CreateRule.args = {
-    onSubmit: (query: CreateRuleQuery) => {
+    onSubmit: (query: TCreateRuleRequest) => {
         return Promise.resolve({
             success: true,
         })
     },
+    fetchSummary: (
+        query: TFetchCreateRuleSummaryRequest, 
+        setSummaryViewModel: (viewModel: RuleSummaryViewModel) => void, 
+        setActivePage: (int: number) => void,
+        setError: (error: string) => void,
+    ) => {
+        setSummaryViewModel({
+            ...query,
+            status: 'success',
+            DIDList: query.DIDViewModels.map((did) => `${did.scope}:${did.name}`),
+            RSEList: query.RSEViewModels.map((rse) => rse.rse),
+        })
+        setActivePage(3)
+    },
     didListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureDIDLongViewModel())),
     didValidation: (query: TypedDIDValidationQuery) => {
         // if the DID contains the string "error", it will be added to the error list

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

@@ -24,18 +24,20 @@ import { Body } from '../Helpers/Body';
 *  Importing Types and Interfaces
 *  ================================================= */
 import {
-    CreateRuleQuery, CreateRuleResponse, DIDName, TypedDIDValidationQuery,
+    TCreateRuleRequest, CreateRuleResponse, DIDName, TypedDIDValidationQuery,
     TypedDIDValidationResponse,
+    TFetchCreateRuleSummaryRequest,
 
 } from '@/lib/infrastructure/data/view-model/create-rule.d';
-import { DIDType } from '@/lib/core/entity/rucio';
+import { DIDLong, DIDType } from '@/lib/core/entity/rucio';
 import { twMerge } from 'tailwind-merge';
 import { SamplingTag } from '../../Tags/SamplingTag';
 import { CreateRuleDIDTable } from './CreateRuleDIDTable';
 import { didToScopename } from '../../StreamedTables/helpers';
 import { CreateRuleRSETable } from './CreateRuleRSETable';
 import { RSEAccountUsageLimitViewModel } from '@/lib/infrastructure/data/view-model/rse';
 import { DIDLongViewModel } from '@/lib/infrastructure/data/view-model/did';
+import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule';
 
 export interface CreateRulePageProps {
     // Page 0.0 - DID Search`
@@ -44,8 +46,16 @@ export interface CreateRulePageProps {
     didValidation: (didValidationQuery: TypedDIDValidationQuery) => Promise<TypedDIDValidationResponse>,
     // Page 1 - RSE Selection
     rseListComDOM: UseComDOM<RSEAccountUsageLimitViewModel>,
+    // Page 2 - Summary
+    fetchSummary: (
+        query: TFetchCreateRuleSummaryRequest, 
+        setSummaryViewModel: (viewModel: RuleSummaryViewModel) => void, 
+        setActivePage: (int: number) => void,
+        setError: (error: string) => void,
+    ) => void,
     // Page 3 - Sendoff
-    onSubmit: (createRuleQuery: CreateRuleQuery) => Promise<CreateRuleResponse>
+    onSubmit: (createRuleQuery: TCreateRuleRequest) => Promise<CreateRuleResponse>
+
 }
 
 // can assume that DIDs are unique, hence SET can be used later
@@ -239,13 +249,14 @@ export const CreateRule = (
     })
 
     /* =================================================
-    *  Page 3
+    *  Page 3 : Summary page
     *  ================================================= */
-    const page3submitFunction = (event: any) => {
-        // build query
-        const CreateRuleQuery: CreateRuleQuery = {
-            DIDList: Page0State.typedDIDs.concat(didToScopename(Page0State.searchDIDSelection)),
-            RSEList: Page1State.RSESelection.map(element => element.rse),
+    const [summaryViewModel, setSummaryViewModel] = useState<RuleSummaryViewModel>()
+
+    const loadRuleSummaryPage = () => {
+        const fetchSummaryRequest: TFetchCreateRuleSummaryRequest = {
+            RSEViewModels: Page1State.RSESelection,
+            DIDViewModels: Page0State.searchDIDSelection,
             expirydate: Page2State.expiryDate,
             notifications: Page2State.enableNotifications,
             asynchronousMode: Page2State.asynchronousMode,
@@ -255,9 +266,29 @@ export const CreateRule = (
             comment: Page2State.freeComment,
             approval: Page2State.approval
         }
+        props.fetchSummary(fetchSummaryRequest, setSummaryViewModel, setActivePage, (error: string) => { console.log(error) })        
+    }
 
+
+
+    const page3submitFunction = (event: any) => {
         // execute query
-        const response = props.onSubmit(CreateRuleQuery)
+        // TODO : Use summary view model to create the query
+        const createRulesRequest: TCreateRuleRequest = {
+            DIDList: Page0State.typedDIDs.concat(didToScopename(Page0State.searchDIDSelection)),
+            RSEList: Page1State.RSESelection.map((element) => element.rse),
+            RSEViewModels: Page1State.RSESelection,
+            DIDViewModels: Page0State.searchDIDSelection,
+            expirydate: Page2State.expiryDate,
+            notifications: Page2State.enableNotifications,
+            asynchronousMode: Page2State.asynchronousMode,
+            numcopies: Page2State.numcopies,
+            numsamples: Page2State.numsamples,
+            groupby: Page2State.groupBy,
+            comment: Page2State.freeComment,
+            approval: Page2State.approval
+        }
+        const response = props.onSubmit(createRulesRequest)
         response.then((response) => {
             console.log("response: ", response)
         })
@@ -311,8 +342,10 @@ export const CreateRule = (
                         </div>
                     </Collapsible>
                     <Collapsible showIf={Page0State.selectDIDMethod === 1}>
+                        {/* TODO: delayed */}
                         <div className="flex flex-col space-y-2 m-2">
-                            <Label label="dids">Data Identifiers to select:</Label>
+                            <Label label="dids">This feature will be released soon!</Label>
+                            {/* <Label label="dids">Data Identifiers to select:</Label>
                             <ListInput
                                 id="dids"
                                 onAdd={(value: string) => {
@@ -337,7 +370,7 @@ export const CreateRule = (
                                         <P mono key={index}>DID {element.DID} has Errorcodes {element.ErrorCodes}</P>
                                     )
                                 })}
-                            </div>
+                            </div> */}
                         </div>
                     </Collapsible>
                 </RulePage>
@@ -371,7 +404,7 @@ export const CreateRule = (
                         </div>
                     </div>
                 </RulePage>
-                <RulePage pagenum={2} activePage={activePage} progressBlocked={Page2State.page2progressBlocked} onNext={() => { setActivePage(activePage + 1) }} onPrev={pagePrevFunction}>
+                <RulePage pagenum={2} activePage={activePage} progressBlocked={Page2State.page2progressBlocked} onNext={() => { loadRuleSummaryPage() }} onPrev={pagePrevFunction}>
                     <div className="flex md:flex-row md:space-x-2 flex-col space-y-2 m-2">
                         <div className="flex flex-col space-y-2 md:w-60 w-full">
                             <div className="w-full">
@@ -484,17 +517,21 @@ export const CreateRule = (
                     </div>
                 </RulePage>
                 <RulePage pagenum={3} activePage={activePage} onNext={page3submitFunction} onPrev={pagePrevFunction} submit>
-                    <SummaryPage data={{
-                        DIDList: Page0State.typedDIDs.concat(didToScopename(Page0State.searchDIDSelection)),
-                        RSEList: Page1State.RSESelection.map(element => element.rse),
-                        expirydate: Page2State.expiryDate,
-                        notifications: Page2State.enableNotifications,
-                        asynchronousMode: Page2State.asynchronousMode,
-                        numcopies: Page2State.numcopies,
-                        numsamples: Page2State.numsamples,
-                        groupby: Page2State.groupBy,
-                        comment: Page2State.freeComment,
-                        approval: Page2State.approval
+                    <SummaryPage data={summaryViewModel? summaryViewModel : {
+                        status: 'error',
+                        message: 'Please check your inputs on previous pages! Cannot retrieve summary from the server',
+                        DIDList: [],
+                        RSEList: [],
+                        RSEViewModels: [],
+                        DIDViewModels: [],
+                        expirydate: new Date(2025, 1, 1),
+                        notifications: false,
+                        asynchronousMode: false,
+                        numcopies: 0,
+                        numsamples: 0,
+                        groupby: DIDType.UNKNOWN,
+                        comment: '',
+                        approval: false,
                     }} />
                 </RulePage>
             </Body>

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

@@ -33,7 +33,7 @@ export const CreateRuleRSETable = (
                             type="checkbox"
                             disabled={!info.row.getCanSelect()}
                             checked={info.row.getIsSelected()}
-                            onChange={e => {
+                            onClick={e => {
                                 info.row.toggleSelected()
                             }}
                         />

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

@@ -1,4 +1,5 @@
-import { CreateRuleQuery } from '@/lib/infrastructure/data/view-model/create-rule'
+import { TCreateRuleRequest } from '@/lib/infrastructure/data/view-model/create-rule'
+import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule'
 import { StoryFn, Meta } from '@storybook/react'
 import { SummaryPage as SP } from './SummaryPage'
 
@@ -12,6 +13,7 @@ const Template: StoryFn<typeof SP> = args => <SP {...args} />
 export const SummaryPage = Template.bind({})
 SummaryPage.args = {
     data: {
+        status: 'success',
         DIDList: [
             'user.AndrewJenkins:dataset-dBDUMqZWnMImKbhZCJUA',
             'user.SandraOrtiz:file-SxbkaPRbmlZezztEiAZl',
@@ -42,5 +44,5 @@ SummaryPage.args = {
         numsamples: -1,
         groupby: "File",
         comment: "",
-    } as CreateRuleQuery,
+    } as RuleSummaryViewModel,
 }

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

@@ -1,10 +1,11 @@
-import { CreateRuleQuery } from "@/lib/infrastructure/data/view-model/create-rule"
+import { TCreateRuleRequest } from "@/lib/infrastructure/data/view-model/create-rule"
 import { BoolTag } from "../../Tags/BoolTag"
 import { twMerge } from "tailwind-merge"
-import FC from "react"
+import FC, { useEffect } from "react"
 import { DIDTypeTag } from "../../Tags/DIDTypeTag"
 import { HiQuestionMarkCircle } from "react-icons/hi"
 import { SamplingTag } from "../../Tags/SamplingTag"
+import { RuleSummaryViewModel } from "@/lib/infrastructure/data/view-model/rule"
 
 var format = require("date-format")
 
@@ -82,7 +83,7 @@ const OptionTD = (props: {children: any}): JSX.Element =>
 
 export const SummaryPage = (
     props: {
-        data: CreateRuleQuery
+        data: RuleSummaryViewModel
     }
 ) => {
     return (
@@ -110,7 +111,7 @@ export const SummaryPage = (
                 )}
             >
                 <TabularSummary data={props.data.DIDList} title="DIDs" />
-                <TabularSummary data={props.data.RSEList} title="RSEs" />
+                <TabularSummary data={props.data.RSEViewModels.map(rse => rse.rse_id)} title="RSEs" />
             </div>
             <div
                 className={twMerge(

src/lib/infrastructure/data/view-model/create-rule.d.ts

@@ -1,5 +1,6 @@
 import { DIDLong, DIDType, RSEAccountUsage } from "@/lib/core/entity/rucio";
 import { FetchStatus } from "@tanstack/react-query";
+import { RSEAccountUsageLimitViewModel } from "./rse";
 
 export interface CreateRuleViewModel {
     placeholder: string;
@@ -32,11 +33,24 @@ export interface RSEInformation {
 /*
 *  Queries
 */
-export interface CreateRuleQuery {
-    // To be run at the end of the function (`submit` pressed)
-    // Contains all the information entered by the user
+export interface TFetchCreateRuleSummaryRequest {
+    RSEViewModels: Array<RSEAccountUsageLimitViewModel>
+    DIDViewModels: Array<DIDLong>
+    expirydate: Date
+    notifications: boolean
+    asynchronousMode: boolean
+    numcopies: number
+    numsamples: number
+    groupby: DIDType
+    comment: string
+    approval: boolean
+}
+
+export interface TCreateRuleRequest {
     DIDList: Array<DIDName>
     RSEList: Array<RSEName>
+    RSEViewModels: Array<RSEAccountUsageLimitViewModel>
+    DIDViewModels: Array<DIDLong>
     expirydate: Date
     notifications: boolean
     asynchronousMode: boolean

src/lib/infrastructure/data/view-model/list-did.d.ts

@@ -1,8 +1,5 @@
 import { BaseViewModel } from "@/lib/sdk/view-models";
 import { ListDIDsResponse } from "@/lib/core/usecase-models/list-dids-usecase-models";
-import { DID } from "@/lib/core/entity/rucio";
+import { DID, DIDLong } from "@/lib/core/entity/rucio";
 
-export interface ListDIDsViewModel extends DID, BaseViewModel {
-    bytes: number;
-    length: number;
-}
+export interface ListDIDsViewModel extends DIDLong, BaseViewModel {}