ISPN-12091 Create a task

Author: dpanshug

src/app/CacheManagers/TasksTableDisplay.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Table, TableBody, TableHeader, TableVariant } from '@patternfly/react-table';
 import {
   Badge,
+  Button,
   Bullseye,
   EmptyState,
   EmptyStateBody,
@@ -30,6 +30,10 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useFetchTask } from '@app/services/tasksHook';
 import { ExecuteTasks } from '@app/Tasks/ExecuteTasks';
+import { ConsoleServices } from '@services/ConsoleServices';
+import { ConsoleACL } from '@services/securityService';
+import { useConnectedUser } from '@app/services/userManagementHook';
+import { CreateTask } from '@app/Tasks/CreateTask';
 
 const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible: boolean }) => {
   const { tasks, loading, error, reload } = useFetchTask();
@@ -40,11 +44,13 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
   });
   const [rows, setRows] = useState<(string | any)[]>([]);
   const [taskToExecute, setTaskToExecute] = useState<Task>();
+  const [isCreateTask, setIsCreateTask] = useState(false);
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
+  const { connectedUser } = useConnectedUser();
 
   const columnNames = {
-    name: t('cache-managers.tasks.task-name'),
+    name: t('cache-managers.tasks.name'),
     type: t('cache-managers.tasks.task-type'),
     context: t('cache-managers.tasks.context-name'),
     operation: t('cache-managers.tasks.operation-name'),
@@ -135,14 +141,28 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
     );
   };
 
+  const buildCreateTaskButton = () => {
+    if (!ConsoleServices.security().hasConsoleACL(ConsoleACL.CREATE, connectedUser)) {
+      return <ToolbarItem />;
+    }
+    return (
+      <React.Fragment>
+        <ToolbarItem>
+          <Button onClick={() => setIsCreateTask(!isCreateTask)}>Add task</Button>
+        </ToolbarItem>
+      </React.Fragment>
+    );
+  };
+
   if (!props.isVisible) {
     return <span />;
   }
 
   return (
     <React.Fragment>
-      <Toolbar id="counters-table-toolbar">
+      <Toolbar id="task-table-toolbar">
         <ToolbarContent>
+          {buildCreateTaskButton()}
           <ToolbarItem variant={ToolbarItemVariant.pagination}>
             <Pagination
               itemCount={filteredTasks.length}
@@ -213,6 +233,14 @@ const TasksTableDisplay = (props: { setTasksCount: (number) => void; isVisible:
           reload();
         }}
       />
+      <CreateTask
+        isModalOpen={isCreateTask}
+        submitModal={() => {
+          reload();
+          setIsCreateTask(false);
+        }}
+        closeModal={() => setIsCreateTask(false)}
+      />
     </React.Fragment>
   );
 };

src/app/Tasks/CreateTask.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Button, ButtonVariant, Form, FormGroup, Modal, ModalVariant, TextInput } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { CodeEditor } from '@patternfly/react-code-editor';
+import formUtils, { IField } from '@services/formUtils';
+import { useCreateTask } from '@app/services/tasksHook';
+import { PopoverHelp } from '@app/Common/PopoverHelp';
+
+const CreateTask = (props: { isModalOpen: boolean; submitModal: () => void; closeModal: () => void }) => {
+  const { t } = useTranslation();
+
+  const nameInitialState: IField = {
+    value: '',
+    isValid: false,
+    validated: 'default'
+  };
+
+  const [name, setName] = useState<IField>(nameInitialState);
+  const [script, setScript] = useState<string>('');
+  const { onCreateTask } = useCreateTask(name.value, script);
+
+  const handleSubmit = () => {
+    const isValid = formUtils.validateRequiredField(
+      name.value.trim(),
+      t('cache-managers.counters.modal-counter-name'),
+      setName
+    );
+
+    if (isValid) {
+      props.submitModal();
+      onCreateTask();
+    }
+  };
+
+  return (
+    <Modal
+      id={'create-task-modal'}
+      variant={ModalVariant.medium}
+      isOpen={props.isModalOpen}
+      title={t('cache-managers.tasks.create-task')}
+      onClose={props.closeModal}
+      aria-label={t('cache-managers.tasks.create-task')}
+      disableFocusTrap={true}
+      actions={[
+        <Button key={'Confirm'} aria-label={'Confirm'} variant={ButtonVariant.primary} onClick={handleSubmit}>
+          {t('cache-managers.tasks.confirm')}
+        </Button>,
+        <Button key={'Cancel'} aria-label={'Cancel'} variant={ButtonVariant.link} onClick={props.closeModal}>
+          {t('cache-managers.tasks.cancel')}
+        </Button>
+      ]}
+    >
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormGroup
+          validated={name.validated}
+          isRequired
+          helperTextInvalid={name.invalidText}
+          isInline
+          label={t('cache-managers.tasks.task-name')}
+        >
+          <TextInput
+            type="text"
+            validated={name.validated}
+            value={name.value}
+            onChange={(value) => formUtils.validateRequiredField(value, t('cache-managers.tasks.task-name'), setName)}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t('cache-managers.tasks.script')}
+          labelIcon={
+            <PopoverHelp
+              name="script"
+              label={t('cache-managers.tasks.script')}
+              content={t('cache-managers.tasks.script-tooltip')}
+            />
+          }
+        >
+          <CodeEditor isLineNumbersVisible code={script} onChange={setScript} height="200px" />
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+export { CreateTask };

src/app/Tasks/ExecuteTasks.tsx

@@ -32,7 +32,6 @@ const ExecuteTasks = (props: { task; isModalOpen: boolean; closeModal: () => voi
 
   return (
     <Modal
-      height={'1000px'}
       id={'execute-task-modal'}
       variant={ModalVariant.medium}
       isOpen={props.isModalOpen}

src/app/assets/languages/en.json

@@ -137,7 +137,7 @@
     },
     "tasks": {
       "tasks-table-label": "Tasks",
-      "task-name": "Name",
+      "name": "Name",
       "task-type": "Type",
       "context-name": "Context name",
       "operation-name": "Operation name",
@@ -148,7 +148,12 @@
       "no-tasks-body": "Create tasks with the CLI or a remote client.",
       "execute": "Execute",
       "execution": "Execution",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "create-task": "Create task",
+      "task-name": "Task name",
+      "script": "Script",
+      "script-tooltip": "Script tooltip",
+      "confirm": "Confirm"
     }
   },
   "caches": {

src/app/services/tasksHook.ts

@@ -48,3 +48,17 @@ export function useExecuteTask(name: string, params) {
     onExecute
   };
 }
+export function useCreateTask(taskName: string, script) {
+  const { addAlert } = useApiAlert();
+
+  const onCreateTask = () => {
+    ConsoleServices.tasks()
+      .createTask(taskName, script)
+      .then((actionResponse) => {
+        addAlert(actionResponse);
+      });
+  };
+  return {
+    onCreateTask
+  };
+}

src/services/tasksService.ts

@@ -39,11 +39,19 @@ export class TasksService {
 
   public executeTask(name, params): Promise<ActionResponse> {
     const parameterURL = this.createExecuteTaskURL(params);
-    console.log('parameterURL', parameterURL);
     return this.utils.post({
       url: this.endpoint + '/' + name + '?action=exec' + parameterURL,
       successMessage: `The script has been successfully executed`,
       errorMessage: `Unexpected error executing.`
     });
   }
+
+  public createTask(name: string, script): Promise<ActionResponse> {
+    return this.utils.post({
+      url: this.endpoint + '/' + name,
+      successMessage: `Task ${name} has been created`,
+      errorMessage: `Unexpected error creating task ${name}`,
+      body: script
+    });
+  }
 }