From 49a935378eec29f106ce0b5036cf08331239d896 Mon Sep 17 00:00:00 2001 From: "finz@dhigroup.com" Date: Wed, 4 Oct 2023 11:40:06 +0700 Subject: [PATCH 1/4] add position to insert props --- .../src/Jobs/JobList/JobList.tsx | 98 +++++++++++-------- .../src/Jobs/JobList/types.ts | 2 + .../src/Jobs/Jobs.stories.tsx | 5 +- 3 files changed, 64 insertions(+), 41 deletions(-) diff --git a/packages/react-components/src/Jobs/JobList/JobList.tsx b/packages/react-components/src/Jobs/JobList/JobList.tsx index 8bfce831..207d31ff 100644 --- a/packages/react-components/src/Jobs/JobList/JobList.tsx +++ b/packages/react-components/src/Jobs/JobList/JobList.tsx @@ -47,7 +47,17 @@ const DEFAULT_COLUMNS = [ const NOTIFICATION_HUB = '/notificationhub'; const JobList = (props: JobListProps) => { - const { dataSources, disabledColumns, parameters, startTimeUtc, dateTimeFormat, timeZone, defaultFilter } = props; + const { + dataSources, + disabledColumns, + parameters, + startTimeUtc, + dateTimeFormat, + timeZone, + defaultFilter, + positionToInsert + } = props; + const initialDateState = { from: new Date(startTimeUtc).toISOString(), to: new Date().toISOString(), @@ -99,7 +109,7 @@ const JobList = (props: JobListProps) => { ]); const durationToSeconds = (duration: string | null): number => { - if (duration === '' || duration === null ) { + if (duration === '' || duration === null) { return 0; } @@ -109,7 +119,7 @@ const JobList = (props: JobListProps) => { if (parts[index].includes('h')) { seconds += Number(parts[index].slice(0, -1)) * 3600;; } - + if (parts[index].includes('m')) { seconds += Number(parts[index].slice(0, -1)) * 60; } @@ -135,7 +145,7 @@ const JobList = (props: JobListProps) => { { columnName: 'duration', compare: compareDurations }, { columnName: 'delay', compare: compareDurations }, ]); - + const fetchJobList = () => { setLoading(true); @@ -193,18 +203,26 @@ const JobList = (props: JobListProps) => { const parameterHeader = parameters ? parameters.reduce( - (acc, cur) => [ - ...acc, - { - title: cur.label, - name: cur.parameter, - }, - ], - [], - ) + (acc, cur) => [ + ...acc, + { + title: cur.label, + name: cur.parameter, + }, + ], + [], + ) : []; - const [columns] = useState(DEFAULT_COLUMNS.concat(parameterHeader)); + const combinedColumns = typeof positionToInsert === "undefined" + ? [...DEFAULT_COLUMNS, ...parameterHeader] + : [ + ...DEFAULT_COLUMNS.slice(0, positionToInsert), + ...parameterHeader, + ...DEFAULT_COLUMNS.slice(positionToInsert) + ]; + + const [columns] = useState(combinedColumns); const expandWithData = (row) => { const { @@ -317,7 +335,7 @@ const JobList = (props: JobListProps) => { > - ),[]); + ), []); const jobUpdated = (job) => { const dataUpdated = JSON.parse(job.data); @@ -327,29 +345,29 @@ const JobList = (props: JobListProps) => { const updatedJob = jobs.map((job) => job.id === dataUpdated.Id ? { - ...job, - started: - job.started || dataUpdated.Started ? zonedTimeFromUTC(dataUpdated.Started, timeZone, dateTimeFormat) : '', - finished: - job.finished || dataUpdated.Finished - ? zonedTimeFromUTC(dataUpdated.Finished, timeZone, dateTimeFormat) - : '', - hostId: dataUpdated.HostId, - status: dataUpdated.Status, - duration: - job.duration || - (dataUpdated.Started && - dataUpdated.Finished && - calcTimeDifference(dataUpdated.Started.split('.')[0], dataUpdated.Finished.split('.')[0])), - delay: - job.delay || - (dataUpdated.Started && - calcTimeDifference(dataUpdated.Requested.split('.')[0], dataUpdated.Started.split('.')[0])), - progress: dataUpdated.Progress || 0, - tokenJobLog: dataSources[0].tokenJobLog || '', // So wrong ... it doesn't necessarily sit on the first one. Should be fixed later - hostJobLog: dataSources[0].hostJobLog || '', - connectionJobLog: dataSources[0].connectionJobLog || '', - } + ...job, + started: + job.started || dataUpdated.Started ? zonedTimeFromUTC(dataUpdated.Started, timeZone, dateTimeFormat) : '', + finished: + job.finished || dataUpdated.Finished + ? zonedTimeFromUTC(dataUpdated.Finished, timeZone, dateTimeFormat) + : '', + hostId: dataUpdated.HostId, + status: dataUpdated.Status, + duration: + job.duration || + (dataUpdated.Started && + dataUpdated.Finished && + calcTimeDifference(dataUpdated.Started.split('.')[0], dataUpdated.Finished.split('.')[0])), + delay: + job.delay || + (dataUpdated.Started && + calcTimeDifference(dataUpdated.Requested.split('.')[0], dataUpdated.Started.split('.')[0])), + progress: dataUpdated.Progress || 0, + tokenJobLog: dataSources[0].tokenJobLog || '', // So wrong ... it doesn't necessarily sit on the first one. Should be fixed later + hostJobLog: dataSources[0].hostJobLog || '', + connectionJobLog: dataSources[0].connectionJobLog || '', + } : job, ); @@ -360,7 +378,7 @@ const JobList = (props: JobListProps) => { const dataAdded = JSON.parse(job.data); const jobs = [...latestJobs.current]; console.log({ dataAdded }); - + const addedJob = { taskId: dataAdded.TaskId, id: dataAdded.Id, @@ -409,7 +427,7 @@ const JobList = (props: JobListProps) => { ); }) .catch((e) => console.log('Connection failed: ', e)); - + return connection; }; diff --git a/packages/react-components/src/Jobs/JobList/types.ts b/packages/react-components/src/Jobs/JobList/types.ts index 9c85524f..565b2169 100644 --- a/packages/react-components/src/Jobs/JobList/types.ts +++ b/packages/react-components/src/Jobs/JobList/types.ts @@ -12,6 +12,8 @@ interface JobListProps { defaultFilter?: Filter[]; /** Data source to get the logs specific parameters */ parameters?: Parameters[]; + /** Spesific paremeters position */ + positionToInsert?: number; /** The date time format that the dates shown in */ dateTimeFormat: string; /** Selected date for log entries from */ diff --git a/packages/react-components/src/Jobs/Jobs.stories.tsx b/packages/react-components/src/Jobs/Jobs.stories.tsx index a3580800..38316651 100644 --- a/packages/react-components/src/Jobs/Jobs.stories.tsx +++ b/packages/react-components/src/Jobs/Jobs.stories.tsx @@ -23,7 +23,7 @@ export const JobListStory = () => { } as DataSource, ]; - const disabledColumns = ['accountId', 'Area']; + const disabledColumns = ['accountId']; const defaultFilter = [{columnName: 'taskId', operation: 'contains', value: 'workflow'}] @@ -34,6 +34,8 @@ export const JobListStory = () => { }, ]; + const positionToInsert = 1 + return ( {({ token: { accessToken } }) => ( @@ -49,6 +51,7 @@ export const JobListStory = () => { noEntriesData: 'Tidak ada entri job', noEntriesFilter: 'Tidak ada entri job untuk status job yang dipilih', }} + positionToInsert={positionToInsert} onReceived={(data) => { console.log(data); }} From 9b290b0a26943284e3a7583c95d9638be03aa9b0 Mon Sep 17 00:00:00 2001 From: "finz@dhigroup.com" Date: Mon, 16 Oct 2023 11:39:31 +0700 Subject: [PATCH 2/4] auto sorting when drag column --- .../react-components/src/Jobs/JobList/JobList.tsx | 14 +++++++++++--- .../react-components/src/Jobs/JobList/types.ts | 5 ++++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/react-components/src/Jobs/JobList/JobList.tsx b/packages/react-components/src/Jobs/JobList/JobList.tsx index 207d31ff..e2d04829 100644 --- a/packages/react-components/src/Jobs/JobList/JobList.tsx +++ b/packages/react-components/src/Jobs/JobList/JobList.tsx @@ -29,7 +29,7 @@ import { DateFilter } from '../../common/DateFilter/DateFilter'; import { Cell, dateGroupCriteria, GroupCellContent } from './helpers/helpers'; import JobDetail from './helpers/JobDetail'; import { JobPanelStyles } from './styles'; -import JobListProps, { JobData } from './types'; +import JobListProps, { JobData, Sorting } from './types'; import { DateProps } from '../../common/types'; const DEFAULT_COLUMNS = [ @@ -89,6 +89,7 @@ const JobList = (props: JobListProps) => { const [windowHeight, setWindowHeight] = useState(window.innerHeight); const [date, setDate] = useState(initialDateState); const [selectedRow, setSelectedRow] = useState(''); + const [sorting, setSorting] = useState([{ columnName: 'requested', direction: 'desc' }]); const [tableColumnExtensions] = useState([{ columnName: 'status', width: 120 }]); const latestJobs = useRef(null); @@ -431,6 +432,13 @@ const JobList = (props: JobListProps) => { return connection; }; + const handleGroupingChange = (grouping) => { + if (grouping.length > 0) { + const lastGroupedColumn = grouping[grouping.length - 1].columnName; + setSorting([{ columnName: lastGroupedColumn, direction: 'asc' }]); + } + }; + useEffect(() => { const handleResize = () => { setWindowHeight(window.innerHeight); @@ -456,11 +464,11 @@ const JobList = (props: JobListProps) => { - + - + void; } +type SortingDirection = 'asc' | 'desc'; +type Sorting = { columnName: string; direction: SortingDirection; }; + export default JobListProps; -export { JobData, FilterProps, JobDetailProps, DateFilterProps, Parameters }; +export { JobData, FilterProps, JobDetailProps, DateFilterProps, Parameters, Sorting }; From bd5abf58b67b9fadcadf33c953082890bff72a95 Mon Sep 17 00:00:00 2001 From: "finz@dhigroup.com" Date: Mon, 16 Oct 2023 14:13:16 +0700 Subject: [PATCH 3/4] hide prefix workflow --- .../src/Jobs/JobList/JobList.tsx | 53 ++++++++++++++----- .../src/Jobs/JobList/helpers/helpers.tsx | 26 +++++++-- .../src/Jobs/JobList/types.ts | 3 ++ .../src/Jobs/Jobs.stories.tsx | 1 + 4 files changed, 65 insertions(+), 18 deletions(-) diff --git a/packages/react-components/src/Jobs/JobList/JobList.tsx b/packages/react-components/src/Jobs/JobList/JobList.tsx index e2d04829..c64b2555 100644 --- a/packages/react-components/src/Jobs/JobList/JobList.tsx +++ b/packages/react-components/src/Jobs/JobList/JobList.tsx @@ -18,7 +18,7 @@ import { Toolbar, VirtualTable, } from '@devexpress/dx-react-grid-material-ui'; -import { Paper } from '@material-ui/core'; +import { Paper, Switch, Typography } from '@material-ui/core'; import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr'; import React, { useEffect, useRef, useState, useCallback } from 'react'; import { executeJobQuery, fetchLogs } from '../../api'; @@ -55,7 +55,8 @@ const JobList = (props: JobListProps) => { dateTimeFormat, timeZone, defaultFilter, - positionToInsert + positionToInsert, + showHidePrefixButton, } = props; const initialDateState = { @@ -90,6 +91,7 @@ const JobList = (props: JobListProps) => { const [date, setDate] = useState(initialDateState); const [selectedRow, setSelectedRow] = useState(''); const [sorting, setSorting] = useState([{ columnName: 'requested', direction: 'desc' }]); + const [hideWorkflowPrefix, setHideWorkflowPrefix] = useState(true); const [tableColumnExtensions] = useState([{ columnName: 'status', width: 120 }]); const latestJobs = useRef(null); @@ -326,17 +328,39 @@ const JobList = (props: JobListProps) => { const ToolbarRootComponent = useCallback((props: any) => (
{props.children}
- setDate(date)} - onClearDateFilter={clearDateFilter} - > - + {showHidePrefixButton && ( +
+
+ Hide Workflow Prefix + setHideWorkflowPrefix(event.target.checked)} + /> +
+ setDate(date)} + onClearDateFilter={clearDateFilter} + > + +
+ )} + {!showHidePrefixButton && ( + setDate(date)} + onClearDateFilter={clearDateFilter} + > + + )}
- ), []); + ), [hideWorkflowPrefix]); const jobUpdated = (job) => { const dataUpdated = JSON.parse(job.data); @@ -433,11 +457,12 @@ const JobList = (props: JobListProps) => { }; const handleGroupingChange = (grouping) => { + console.log('grouping', grouping) if (grouping.length > 0) { const lastGroupedColumn = grouping[grouping.length - 1].columnName; setSorting([{ columnName: lastGroupedColumn, direction: 'asc' }]); } - }; + }; useEffect(() => { const handleResize = () => { @@ -474,7 +499,7 @@ const JobList = (props: JobListProps) => { } columnExtensions={tableColumnExtensions} /> diff --git a/packages/react-components/src/Jobs/JobList/helpers/helpers.tsx b/packages/react-components/src/Jobs/JobList/helpers/helpers.tsx index 30df3887..c529270f 100644 --- a/packages/react-components/src/Jobs/JobList/helpers/helpers.tsx +++ b/packages/react-components/src/Jobs/JobList/helpers/helpers.tsx @@ -11,7 +11,9 @@ export const GroupCellContent = (props: any) => ( ); export const Cell = (props: any) => { - if (props.column.name === 'status') { + const { column, row, hideWorkflowPrefix } = props; + + if (column.name === 'status') { return ( @@ -19,14 +21,14 @@ export const Cell = (props: any) => { ); } - if (props.column.name === 'delay') { - const { requested, started } = props.row; + if (column.name === 'delay') { + const { requested, started } = row; if (!requested && !started) { return ; } - const differenceMinutes = differenceInMinutes(new Date(props.row.started), new Date(props.row.requested)); + const differenceMinutes = differenceInMinutes(new Date(row.started), new Date(row.requested)); let delayColor = ''; @@ -49,6 +51,22 @@ export const Cell = (props: any) => { ); } + if (column.name === 'taskId' && hideWorkflowPrefix && props.value.startsWith('workflow')) { + const adjustedValue = props.value.replace('workflow', ' '); + + return ( + +
+ {adjustedValue} +
+ + ); + } + return ; }; diff --git a/packages/react-components/src/Jobs/JobList/types.ts b/packages/react-components/src/Jobs/JobList/types.ts index a625e8d5..eebedc69 100644 --- a/packages/react-components/src/Jobs/JobList/types.ts +++ b/packages/react-components/src/Jobs/JobList/types.ts @@ -28,6 +28,9 @@ interface JobListProps { }; /** Emit event to client when jobs received from the server */ onReceived?: (data: any) => void; + /** Hide Prefix Workflow Task Id */ + showHidePrefixButton?: boolean + } interface Parameters { diff --git a/packages/react-components/src/Jobs/Jobs.stories.tsx b/packages/react-components/src/Jobs/Jobs.stories.tsx index 38316651..0c40add2 100644 --- a/packages/react-components/src/Jobs/Jobs.stories.tsx +++ b/packages/react-components/src/Jobs/Jobs.stories.tsx @@ -55,6 +55,7 @@ export const JobListStory = () => { onReceived={(data) => { console.log(data); }} + showHidePrefixButton={true} /> )} From 1e1cde5f189f0461c74348c3b682a7efffe5df08 Mon Sep 17 00:00:00 2001 From: "finz@dhigroup.com" Date: Tue, 17 Oct 2023 12:59:07 +0700 Subject: [PATCH 4/4] fix style --- packages/react-components/src/Jobs/JobList/JobList.tsx | 2 +- .../react-components/src/Jobs/JobList/helpers/helpers.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-components/src/Jobs/JobList/JobList.tsx b/packages/react-components/src/Jobs/JobList/JobList.tsx index c64b2555..cda32276 100644 --- a/packages/react-components/src/Jobs/JobList/JobList.tsx +++ b/packages/react-components/src/Jobs/JobList/JobList.tsx @@ -91,7 +91,7 @@ const JobList = (props: JobListProps) => { const [date, setDate] = useState(initialDateState); const [selectedRow, setSelectedRow] = useState(''); const [sorting, setSorting] = useState([{ columnName: 'requested', direction: 'desc' }]); - const [hideWorkflowPrefix, setHideWorkflowPrefix] = useState(true); + const [hideWorkflowPrefix, setHideWorkflowPrefix] = useState(false); const [tableColumnExtensions] = useState([{ columnName: 'status', width: 120 }]); const latestJobs = useRef(null); diff --git a/packages/react-components/src/Jobs/JobList/helpers/helpers.tsx b/packages/react-components/src/Jobs/JobList/helpers/helpers.tsx index c529270f..6c753a37 100644 --- a/packages/react-components/src/Jobs/JobList/helpers/helpers.tsx +++ b/packages/react-components/src/Jobs/JobList/helpers/helpers.tsx @@ -61,7 +61,11 @@ export const Cell = (props: any) => { textOverflow: 'ellipsis', overflow: 'hidden' }}> - {adjustedValue} + + {adjustedValue} + );