component: add List Rule page #381

rucio · Oct 9, 2023 · 0b24c0a · 0b24c0a
1 parent 3a7a46d
commit 0b24c0a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/app/(rucio)/rule/list/page.tsx b/src/app/(rucio)/rule/list/page.tsx
@@ -1,10 +1,26 @@
 
 'use client';
+
+import { ListRule } from "@/component-library/Pages/Rule/ListRule";
+import { RuleViewModel } from "@/lib/infrastructure/data/view-model/rule";
+import useComDOM from "@/lib/infrastructure/hooks/useComDOM";
+import { HTTPRequest } from "@/lib/sdk/http";
+import { useEffect, useState } from "react";
+
 export default function Page() {
+    const comDOM = useComDOM<RuleViewModel>(
+        'list-rule-query',
+        [],
+        false,
+        Infinity,
+        200,
+        true
+    )
     return (
-        <div>
-            <h1>Page</h1>
-        </div>
+        <ListRule
+            comdom={comDOM}
+            webui_host={process.env.NEXT_PUBLIC_WEBUI_HOST ?? "http://localhost:3000"}
+        />
     )
 }
 
diff --git a/src/component-library/Pages/Rule/ListRule.tsx b/src/component-library/Pages/Rule/ListRule.tsx
@@ -25,6 +25,7 @@ import { useState } from "react";
 import { Heading } from "../Helpers/Heading";
 import { Body } from "../Helpers/Body";
 import { RuleViewModel } from "@/lib/infrastructure/data/view-model/rule";
+import { HTTPRequest } from "@/lib/sdk/http";
 
 type ListRuleUserDefineQuery = Partial<{
     account: string
@@ -38,6 +39,7 @@ type ListRuleUserDefineQuery = Partial<{
 export const ListRule = (
     props: {
         comdom: UseComDOM<RuleViewModel>
+        webui_host: string
     }
 ) => {
     const columnHelper = createColumnHelper<Rule>()
@@ -205,6 +207,21 @@ export const ListRule = (
         from_date: undefined,
         to_date: undefined,
     })
+
+    const listRuleRequest = async () => {
+        const request: HTTPRequest = {
+            method: "GET",
+            url: props.webui_host + "/api/feature/mock-list-rules",
+            params: {
+                rse_expression: userdefinequery.rse_expression ?? "",
+                activity: userdefinequery.activity ?? "",
+                state: userdefinequery.state ?? RuleState.UNKNOWN,
+                from_date: userdefinequery.from_date?.toUTCString() ?? "",
+                to_date: userdefinequery.to_date?.toUTCString() ?? "",
+            }
+        }
+        await props.comdom.start(request)
+    }
     return (
         <div
             className={twMerge(
@@ -299,7 +316,7 @@ export const ListRule = (
                     <Button
                         label="Search"
                         type="submit"
-                        onClick={(e: any) => { e.preventDefault(); console.log(userdefinequery) }}
+                        onClick={(e: any) => {listRuleRequest}}
                     />
                 </form>
             </Heading>