From 25a19c486ab8b739aa7fed282215a72d29cd64c2 Mon Sep 17 00:00:00 2001 From: plehocky <117287338+plehocky@users.noreply.github.com> Date: Tue, 22 Aug 2023 13:13:12 +0200 Subject: [PATCH] refactored task sorting to inventory server (#1286) * refactored task sorting to inventory server * added arrows to table head based on the sortKey and direction --------- Co-authored-by: PeterL Co-authored-by: Marco <51787428+MarcoMruz@users.noreply.github.com> --- .../src/__generated__/graphql.ts | 15 +++++++ .../pages/workflow-list/tasks/task-list.tsx | 40 ++++++++++--------- .../pages/workflow-list/tasks/task-table.tsx | 36 +++++++++++++---- 3 files changed, 65 insertions(+), 26 deletions(-) diff --git a/packages/frinx-workflow-ui/src/__generated__/graphql.ts b/packages/frinx-workflow-ui/src/__generated__/graphql.ts index be01f3b6e..148493df1 100644 --- a/packages/frinx-workflow-ui/src/__generated__/graphql.ts +++ b/packages/frinx-workflow-ui/src/__generated__/graphql.ts @@ -1376,6 +1376,7 @@ export type QueryTaskDefinitionsArgs = { filter?: InputMaybe; first?: InputMaybe; last?: InputMaybe; + orderBy?: InputMaybe; }; @@ -1539,6 +1540,14 @@ export type SortPollsDirection = | 'asc' | 'desc'; +export type SortTasksBy = + | 'name' + | 'responseTimeoutSeconds' + | 'retryCount' + | 'retryLogic' + | 'timeoutPolicy' + | 'timeoutSeconds'; + export type SortWorkflowsBy = | 'name'; @@ -1643,6 +1652,11 @@ export type TaskTimeoutPolicy = | 'RETRY' | 'TIME_OUT_WF'; +export type TasksOrderByInput = { + direction: SortDirection; + sortKey: SortTasksBy; +}; + export type TerminateWorkflowInput = { reason?: InputMaybe; }; @@ -2158,6 +2172,7 @@ export type UpdateWorkflowMutation = { __typename?: 'Mutation', updateWorkflow: export type TaskDefinitionsQueryVariables = Exact<{ filter?: InputMaybe; + orderBy?: InputMaybe; before?: InputMaybe; last?: InputMaybe; after?: InputMaybe; diff --git a/packages/frinx-workflow-ui/src/pages/workflow-list/tasks/task-list.tsx b/packages/frinx-workflow-ui/src/pages/workflow-list/tasks/task-list.tsx index 94f88e50c..4da06d937 100644 --- a/packages/frinx-workflow-ui/src/pages/workflow-list/tasks/task-list.tsx +++ b/packages/frinx-workflow-ui/src/pages/workflow-list/tasks/task-list.tsx @@ -1,7 +1,6 @@ import { Button, Container, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react'; import { omitNullValue, usePagination, Pagination, TaskDefinition, useNotifications } from '@frinx/shared'; import FeatherIcon from 'feather-icons-react'; -import { orderBy } from 'lodash'; import { gql, useMutation, useQuery } from 'urql'; import React, { useMemo, useState } from 'react'; import AddTaskModal from './add-task-modal'; @@ -14,6 +13,8 @@ import { DeleteTaskMutationVariables, TaskDefinitionsQuery, TaskDefinitionsQueryVariables, + TasksOrderByInput, + SortTasksBy, } from '../../../__generated__/graphql'; const taskDefinition: TaskDefinition = { @@ -35,8 +36,15 @@ const taskDefinition: TaskDefinition = { }; const TASK_DEFINITIONS_QUERY = gql` - query TaskDefinitions($filter: FilterTaskDefinitionsInput, $before: String, $last: Int, $after: String, $first: Int) { - taskDefinitions(filter: $filter, before: $before, last: $last, after: $after, first: $first) { + query TaskDefinitions( + $filter: FilterTaskDefinitionsInput + $orderBy: TasksOrderByInput + $before: String + $last: Int + $after: String + $first: Int + ) { + taskDefinitions(filter: $filter, orderBy: $orderBy, before: $before, last: $last, after: $after, first: $first) { edges { node { id @@ -85,7 +93,7 @@ const CREATE_TASK_DEFINITION_MUTATION = gql` const TaskList = () => { const context = useMemo(() => ({ additionalTypenames: ['TaskDefinition'] }), []); - const [sorted, setSorted] = useState(false); + const [orderBy, setOrderBy] = useState(null); const [task, setTask] = useState(); const [keyword, setKeyword] = useState(''); const [searchTerm, setSearchTerm] = useState(''); @@ -101,6 +109,7 @@ const TaskList = () => { filter: { keyword, }, + orderBy, }, }); @@ -118,7 +127,9 @@ const TaskList = () => { CREATE_TASK_DEFINITION_MUTATION, ); - const sortedTasks = taskDefinitions.sort((a, b) => a.name.localeCompare(b.name)) || [].filter(omitNullValue); + const handleSort = (value: SortTasksBy) => { + setOrderBy({ sortKey: value, direction: orderBy?.direction === 'ASC' ? 'DESC' : 'ASC' }); + }; const handleTaskModal = (tsk: TaskDefinition) => { setTask(tsk); @@ -152,12 +163,6 @@ const TaskList = () => { }); }; - const sortArray = (key: string) => { - const sortedArray = sorted ? orderBy(sortedTasks, [key], ['desc']) : orderBy(sortedTasks, [key], ['asc']); - setSorted(!sorted); - return sortedArray; - }; - const addTask = (tsk: TaskDefinition) => { if (tsk.name !== '') { const ownerEmail = tsk.ownerEmail || 'example@example.com'; @@ -214,7 +219,7 @@ const TaskList = () => { task={taskDefinition} /> {task && } - + @@ -226,9 +231,8 @@ const TaskList = () => { background="white" /> - + - {taskData && ( void; + orderBy: TasksOrderByInput | null; + onSort: (fieldName: SortTasksBy) => void; onTaskDelete: (task: TaskDefinition) => void; onTaskConfigClick: (task: TaskDefinition) => void; }; -export default function TaskTable({ sortArray, tasks, onTaskConfigClick, onTaskDelete }: TaskTableProps) { +export default function TaskTable({ onSort, tasks, orderBy, onTaskConfigClick, onTaskDelete }: TaskTableProps) { return ( - - - - - -
sortArray('name')} cursor="pointer"> + onSort('name')} cursor="pointer"> Name/Version + {orderBy?.sortKey === 'name' && ( + + )} sortArray('timeoutPolicy')} cursor="pointer"> + onSort('timeoutPolicy')} cursor="pointer"> Timeout Policy + {orderBy?.sortKey === 'timeoutPolicy' && ( + + )} sortArray('timeoutSeconds')} cursor="pointer"> + onSort('timeoutSeconds')} cursor="pointer"> Timeout Seconds + {orderBy?.sortKey === 'timeoutSeconds' && ( + + )} sortArray('responseTimeoutSeconds')} cursor="pointer"> + onSort('responseTimeoutSeconds')} cursor="pointer"> Response Timeout + {orderBy?.sortKey === 'responseTimeoutSeconds' && ( + + )} sortArray('retryCount')} cursor="pointer"> + onSort('retryCount')} cursor="pointer"> Retry Count + {orderBy?.sortKey === 'retryCount' && ( + + )} sortArray('retryLogic')} cursor="pointer"> + onSort('retryLogic')} cursor="pointer"> Retry Logic + {orderBy?.sortKey === 'retryLogic' && ( + + )} Actions