Add execution of task

src/index.ts

@@ -38,6 +38,14 @@ export const fhirProfileLink = getSyncLifecycle(
   options
 );
 
+export const scheduleManagerLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: "schedule-manager",
+    title: "Schedule Manager",
+  }),
+  options
+);
+
 export const VLSuppressionPrediction = getAsyncLifecycle(
   () =>
     import(

src/root.component.tsx

@@ -5,6 +5,7 @@ import LeftPanel from "./components/left-panel/left-panel.component";
 import styles from "./root.scss";
 import Fhir from "./fhir/fhir.component";
 import FacilityMetrics from "./facility-metrics/facility-metrics.component";
+import ScheduleManager from "./scheduler/scheduler.component";
 
 const Root: React.FC = () => {
   const spaBasePath = window.spaBase;
@@ -24,6 +25,7 @@ const Root: React.FC = () => {
         <Routes>
           <Route path="/" element={<FacilityMetrics />} />
           <Route path="/fhir-exchange" element={<Fhir />} />
+          <Route path="/schedule-manager" element={<ScheduleManager />} />
         </Routes>
       </main>
     </BrowserRouter>

src/routes.json

@@ -66,6 +66,11 @@
                 "name": "Health Exchange"
             }
 
+        },
+        {
+          "component": "scheduleManagerLink",
+          "name": "scheduler-manager-link",
+          "slot": "health-exchange-left-panel-slot"
         }
     ]
 }

src/scheduler/scheduler.component.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useState } from "react";
+import Header from "../components/header/header.component";
+import Illustration from "../facility-metrics/facility-metrics-illustration.component";
+import fhirStyles from "../fhir/fhir.scss";
+import DataList from "../components/data-table/data-table.component";
+import {
+  runTask,
+  schedulerTableHeaders,
+  schedulerTasks,
+  Task,
+} from "./scheduler.resource";
+import { Button, InlineLoading } from "@carbon/react";
+import { ChooseItem } from "@carbon/react/icons";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+
+const ScheduleManager: React.FC = () => {
+  const [executingTaskId, setExecutingTaskId] = useState(null);
+  const isExecutingTask = (taskId: string) => executingTaskId === taskId;
+  const getTasks = () => {
+    const taskArray = [];
+    schedulerTasks.map((task) => {
+      taskArray.push({
+        ...task,
+        actions: isExecutingTask(task.no) ? (
+          <InlineLoading />
+        ) : (
+          <Button
+            type="button"
+            size="sm"
+            className="submitButton clear-padding-margin"
+            iconDescription={"Execute Task"}
+            kind="ghost"
+            renderIcon={ChooseItem}
+            hasIconOnly
+            onClick={() => executeTask(task)}
+          />
+        ),
+      });
+    });
+
+    return taskArray;
+  };
+
+  const executeTask = useCallback((task: Task) => {
+    setExecutingTaskId(task.no);
+
+    runTask(task).then(
+      (response) => {
+        if (response.status === 201) {
+          showToast({
+            critical: true,
+            title: "Execution Successful",
+            kind: "success",
+            description: `Task ${task.name} executed Successfully`,
+          });
+        }
+        setExecutingTaskId(null);
+      },
+      (error) => {
+        showNotification({
+          title: "Error executing task",
+          kind: "error",
+          critical: true,
+          description: error?.message,
+        });
+        setExecutingTaskId(null);
+      }
+    );
+  }, []);
+
+  return (
+    <>
+      <Header illustrationComponent={<Illustration />} title={`Scheduler`} />
+
+      <div className={fhirStyles.fhirContainer}>
+        <DataList data={getTasks()} columns={schedulerTableHeaders} />
+      </div>
+    </>
+  );
+};
+
+export default ScheduleManager;

src/scheduler/scheduler.resource.ts

@@ -0,0 +1,78 @@
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+
+export type Task = {
+  no: string;
+  name: string;
+  description?: string;
+};
+export const schedulerTableHeaders = [
+  {
+    id: "1",
+    key: "no",
+    header: "No",
+    accessor: "no",
+  },
+  {
+    id: "2",
+    key: "name",
+    header: "TASK NAME",
+    accessor: "name",
+  },
+  {
+    id: "3",
+    key: "description",
+    header: "DESCRIPTION",
+    accessor: "description",
+  },
+  {
+    id: "4",
+    key: "actions",
+    header: "EXECUTE",
+    accessor: "actions",
+  },
+];
+
+export const schedulerTasks = [
+  {
+    no: "1",
+    name: "Send Viral Load Request to Central Server Task",
+    description: "Sending Viral Load requests to CPHL",
+  },
+  {
+    no: "2",
+    name: "Sending VL Program Data",
+    description: "Sending VL program data",
+  },
+  {
+    no: "3",
+    name: "Request Viral Results",
+    description: "Requesting for VL results",
+  },
+  {
+    no: "4",
+    name: "Send Analytics data to a central server",
+    description: "Sends daily EMR metrics to central server",
+  },
+  {
+    no: "5",
+    name: "Reporting Tables Flattening task",
+    description: "Creates tables for reporting using mamba",
+  },
+];
+
+export async function runTask(task: Task) {
+  const abortController = new AbortController();
+  const apiUrl = `${restBaseUrl}/taskaction`;
+
+  return openmrsFetch(apiUrl, {
+    method: "POST",
+    signal: abortController.signal,
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: {
+      action: "runtask",
+      tasks: [`${task.name}`],
+    },
+  });
+}

src/scheduler/scheduler.scss

@@ -0,0 +1,7 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+
+.fhirContainer {
+  padding: 0 1rem 0 1rem;
+}