Remove numOfTask from live service, inject TaskService on demo view instead of grid component

Author: ReneOv-MSFT

packages/playground/src/demo/display/task-list/task-list-demo.tsx

@@ -6,16 +6,45 @@ import { Slider } from "@fluentui/react/lib/Slider";
 import { Stack } from "@fluentui/react/lib/Stack";
 import React from "react";
 import { DemoPane } from "../../../layout/demo-pane";
+import { PagedAsyncIterableIterator } from "@azure/core-paging";
+import { BatchTaskOutput } from "@batch/ui-service/src/batch-models";
 
 export const TaskListDemo: React.FC = () => {
     const [taskNumberSlider, setTaskNumberSlider] = React.useState(0);
+    const [items, setItems] = React.useState<
+        PagedAsyncIterableIterator<BatchTaskOutput>
+    >([]);
     const taskNumberSliderOnChange = (value: number) => {
         setTaskNumberSlider(value);
     };
-
-    const taskService: FakeTaskService = inject(
-        BatchDependencyName.TaskService
+    const [accountEndpoint, setAccountEndpoint] = React.useState<string>(
+        "mercury.eastus.batch.azure.com"
     );
+    const [jobId, setJobId] = React.useState<string>("faketestjob1");
+
+    React.useEffect(() => {
+        let isMounted = true;
+
+        const taskService: FakeTaskService = inject(
+            BatchDependencyName.TaskService
+        );
+
+        const fetchTaskList = async () => {
+            if (!isMounted) return;
+
+            const tasks = await taskService.listTasks(accountEndpoint, jobId);
+
+            setItems(tasks);
+        };
+
+        fetchTaskList().catch((e) => {
+            console.log("Error: ", e);
+        });
+
+        return () => {
+            isMounted = false;
+        };
+    }, [accountEndpoint, jobId]);
 
     return (
         <DemoPane title="Task List Demo">
@@ -36,10 +65,7 @@ export const TaskListDemo: React.FC = () => {
                     />
                 </Stack.Item>
             </Stack>
-            <TaskList
-                accountEndpoint={"mercury.eastus.batch.azure.com"}
-                jobId={"faketestjob1"}
-            />
+            <TaskList pagedTasks={items} />
         </DemoPane>
     );
 };

packages/react/src/task/task-list.tsx

@@ -5,15 +5,12 @@ import {
     DataGridColumn,
 } from "@azure/bonito-ui/lib/components/data-grid";
 import { BatchTaskOutput } from "@batch/ui-service/lib/batch-models";
-import { inject } from "@azure/bonito-core/lib/environment";
-import { BatchDependencyName } from "@batch/ui-service/lib/environment";
-import { TaskService } from "@batch/ui-service/lib/task/task-service";
 import { CiCircleChevDown } from "react-icons/ci";
 import { IconButton } from "@fluentui/react/lib/Button";
+import { PagedAsyncIterableIterator } from "@azure/core-paging";
 
 interface TaskListProps {
-    accountEndpoint: string;
-    jobId: string;
+    pagedTasks: PagedAsyncIterableIterator<BatchTaskOutput>;
 }
 
 interface taskRow extends BatchTaskOutput {
@@ -23,44 +20,25 @@ interface taskRow extends BatchTaskOutput {
 }
 
 export const TaskList = (props: TaskListProps) => {
-    const { accountEndpoint, jobId } = props;
-    const [isCompact] = React.useState<boolean>(false);
+    const { pagedTasks } = props;
     const [items, setItems] = React.useState<taskRow[]>([]);
+    const [isCompact] = React.useState<boolean>(false);
 
     React.useEffect(() => {
-        let isMounted = true;
-
-        const taskService: TaskService = inject(
-            BatchDependencyName.TaskService
-        );
-
-        const fetchTaskList = async () => {
-            if (!isMounted) return;
-
-            const tasks = await taskService.listTasks(accountEndpoint, jobId);
-
-            const items = [];
-            for await (const task of tasks) {
-                items.push({
-                    url: task.url,
-                    id: task.id,
-                    state: task.state,
-                    creationTime: task.creationTime,
-                    executionInfo: task.executionInfo,
-                });
-            }
-
-            setItems(items);
-        };
+        const taskArray = [];
 
-        fetchTaskList().catch((e) => {
-            console.log("Error: ", e);
-        });
+        for await (const task of pagedTasks) {
+            taskArray.push({
+                url: task.url,
+                id: task.id,
+                state: task.state,
+                creationTime: task.creationTime,
+                executionInfo: task.executionInfo,
+            });
+        }
 
-        return () => {
-            isMounted = false;
-        };
-    }, [accountEndpoint, jobId]);
+        setItems(taskArray);
+    }, [pagedTasks]);
 
     return (
         <DataGrid

packages/service/src/task/fake-task-service.ts

@@ -21,8 +21,11 @@ export class FakeTaskService implements TaskService {
 
     async listTasks(
         accountEndpoint: string,
-        jobId: string
+        jobId: string,
+        numOfTasks?: number
     ): Promise<PagedAsyncIterableIterator<BatchTaskOutput>> {
-        return createPagedArray(this.fakeSet.listTasks(accountEndpoint, jobId));
+        return createPagedArray(
+            this.fakeSet.listTasks(accountEndpoint, jobId, numOfTasks)
+        );
     }
 }

packages/service/src/test-util/fakes.ts

@@ -112,15 +112,11 @@ export interface BatchFakeSet extends FakeSet {
      * @param accountEndpoint
      * @param jobId
      */
-    listTasks(accountEndpoint: string, jobId: string): BatchTaskOutput[];
-
-    /**
-     * Generate tasks
-     *
-     * @param accountEndpoint
-     * @param jobId
-     */
-    generateTasks(accountEndpoint: string, jobId: string): BatchTaskOutput[];
+    listTasks(
+        accountEndpoint: string,
+        jobId: string,
+        numOfTasks?: number
+    ): BatchTaskOutput[];
 
     /**
      * List hardcoded tasks in fakes
@@ -257,7 +253,11 @@ export abstract class AbstractBatchFakeSet
         ];
     }
 
-    generateTasks(accountEndPoint: string, jobId: string): BatchTaskOutput[] {
+    generateTasks(
+        accountEndPoint: string,
+        jobId: string,
+        numOfTasks: number
+    ): BatchTaskOutput[] {
         /*
         function getRandomDateTime(): string {
             const year = Math.floor(Math.random() * 50) + 2020;
@@ -306,7 +306,7 @@ export abstract class AbstractBatchFakeSet
 
         const baseTaskUrl = `https://${accountEndPoint}/jobs/${jobId}/tasks/`;
 
-        for (let i = 0; i < 3; i++) {
+        for (let i = 0; i < numOfTasks; i++) {
             /*
             const seed = Math.random();
             const seedStr = seed.toString().substring(2);
@@ -340,17 +340,20 @@ export abstract class AbstractBatchFakeSet
         return taskOutput;
     }
 
-    listTasks(accountEndpoint: string, jobId: string): BatchTaskOutput[] {
+    listTasks(
+        accountEndpoint: string,
+        jobId: string,
+        numOfTasks?: number
+    ): BatchTaskOutput[] {
         if (!jobId) {
             return [];
         }
 
-        const tasks: BatchTaskOutput[] = this.generateTasks(
-            accountEndpoint,
-            jobId
-        );
-
-        return tasks;
+        if (numOfTasks) {
+            return this.generateTasks(accountEndpoint, jobId, numOfTasks);
+        } else {
+            return this.listHardcodedTask(accountEndpoint, jobId);
+        }
     }
 
     listHardcodedTask(