From bd7d1dff66c1e7bfc2a9326b1da72c55cb5c5952 Mon Sep 17 00:00:00 2001 From: Johanna Date: Wed, 30 Aug 2023 12:00:45 +0200 Subject: [PATCH 1/8] Style color sort. Add date format. --- .../src/components/DateFormatText.tsx | 25 +++++++++++++++++++ .../src/components/SortButton.tsx | 5 ++-- .../src/components/TaskAccordionButton.tsx | 4 +-- 3 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 db-scheduler-ui-frontend/src/components/DateFormatText.tsx diff --git a/db-scheduler-ui-frontend/src/components/DateFormatText.tsx b/db-scheduler-ui-frontend/src/components/DateFormatText.tsx new file mode 100644 index 00000000..fe36d4bd --- /dev/null +++ b/db-scheduler-ui-frontend/src/components/DateFormatText.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Box } from '@chakra-ui/react'; + +interface DateFormatProps { + executionDate: Date; +} +export const DateFormatText: React.FC = ({ + executionDate, +}) => { + return ( + + {new Intl.DateTimeFormat('en-GB', { + day: '2-digit', + }).format(executionDate)} + .{' '} + {new Intl.DateTimeFormat('en-GB', { + month: 'short', + }).format(executionDate)}{' '} + {new Intl.DateTimeFormat('en-GB', { + year: '2-digit', + }).format(executionDate)} + , {executionDate?.toLocaleTimeString()} + + ); +}; diff --git a/db-scheduler-ui-frontend/src/components/SortButton.tsx b/db-scheduler-ui-frontend/src/components/SortButton.tsx index d4a57088..93fb8af6 100644 --- a/db-scheduler-ui-frontend/src/components/SortButton.tsx +++ b/db-scheduler-ui-frontend/src/components/SortButton.tsx @@ -16,11 +16,11 @@ export const SortButton: React.FC<{ flex="2" textAlign="left" fontSize={'sm'} - _active={{ color: '#000000', fontWeight: 'semibold' }} + //_active={{ color: '#000000', fontWeight: 'semibold' }} onClick={() => currentSort === name ? setSortAsc(!sortAsc) : setCurrentSort(name) } - fontWeight={currentSort === name ? 'bold' : 'normal'} + //fontWeight={currentSort === name ? 'bold' : 'normal'} > {title} diff --git a/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx b/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx index c12b528a..ec7cef01 100644 --- a/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx +++ b/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx @@ -3,6 +3,7 @@ import { StatusBox } from 'src/components/StatusBox'; import { TaskRunButton } from 'src/components/TaskRunButton'; import React from 'react'; import { DotButton } from 'src/components/DotButton'; +import { DateFormatText } from 'src/components/DateFormatText'; interface TaskAccordionButtonProps { taskName: string; @@ -51,8 +52,7 @@ export const TaskAccordionButton: React.FC = ({ justifyContent={'flex-end'} flexDirection={'row'} > - - {new Date(executionTime)?.toLocaleString()} + Date: Wed, 30 Aug 2023 12:06:03 +0200 Subject: [PATCH 2/8] Button run/rerun size --- db-scheduler-ui-frontend/src/components/TaskRunButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/db-scheduler-ui-frontend/src/components/TaskRunButton.tsx b/db-scheduler-ui-frontend/src/components/TaskRunButton.tsx index 0af28fe1..e367936f 100644 --- a/db-scheduler-ui-frontend/src/components/TaskRunButton.tsx +++ b/db-scheduler-ui-frontend/src/components/TaskRunButton.tsx @@ -28,6 +28,7 @@ export const TaskRunButton: React.FC = ({ runTask(taskInstance, taskName).then(() => refetch()); }} iconSpacing={2} + width={100} bgColor={consecutiveFailures > 0 ? '#5068F6' : '#E9ECFE'} textColor={consecutiveFailures > 0 ? '#FFFFFF' : '#002FA7'} _hover={{ From b1242dcff24570d7c3474c5635aea1e478aad9c0 Mon Sep 17 00:00:00 2001 From: Johanna Date: Wed, 30 Aug 2023 12:07:34 +0200 Subject: [PATCH 3/8] Button status size --- db-scheduler-ui-frontend/src/components/StatusBox.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/db-scheduler-ui-frontend/src/components/StatusBox.tsx b/db-scheduler-ui-frontend/src/components/StatusBox.tsx index a655168e..466b355f 100644 --- a/db-scheduler-ui-frontend/src/components/StatusBox.tsx +++ b/db-scheduler-ui-frontend/src/components/StatusBox.tsx @@ -39,6 +39,7 @@ export const StatusBox: React.FC = ({ Date: Wed, 30 Aug 2023 12:20:00 +0200 Subject: [PATCH 4/8] Marking all of MenuItem on hover. --- db-scheduler-ui-frontend/src/components/DotButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/db-scheduler-ui-frontend/src/components/DotButton.tsx b/db-scheduler-ui-frontend/src/components/DotButton.tsx index 15f3a0f9..facb6b27 100644 --- a/db-scheduler-ui-frontend/src/components/DotButton.tsx +++ b/db-scheduler-ui-frontend/src/components/DotButton.tsx @@ -44,9 +44,10 @@ export const DotButton: React.FC = ({ onClick={(event) => event.stopPropagation()} /> - + { event.stopPropagation(); setIsOpen(true); From d38afd7601c13b30f64f411f7add990b41eb8649 Mon Sep 17 00:00:00 2001 From: Johanna Date: Wed, 30 Aug 2023 13:30:31 +0200 Subject: [PATCH 5/8] Fixing comments from Svein --- .../src/components/DateFormatText.tsx | 25 ------------------- .../src/components/SortButton.tsx | 2 -- .../src/components/TaskAccordionButton.tsx | 5 ++-- .../src/components/dateFormatText.ts | 6 +++++ 4 files changed, 9 insertions(+), 29 deletions(-) delete mode 100644 db-scheduler-ui-frontend/src/components/DateFormatText.tsx create mode 100644 db-scheduler-ui-frontend/src/components/dateFormatText.ts diff --git a/db-scheduler-ui-frontend/src/components/DateFormatText.tsx b/db-scheduler-ui-frontend/src/components/DateFormatText.tsx deleted file mode 100644 index fe36d4bd..00000000 --- a/db-scheduler-ui-frontend/src/components/DateFormatText.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Box } from '@chakra-ui/react'; - -interface DateFormatProps { - executionDate: Date; -} -export const DateFormatText: React.FC = ({ - executionDate, -}) => { - return ( - - {new Intl.DateTimeFormat('en-GB', { - day: '2-digit', - }).format(executionDate)} - .{' '} - {new Intl.DateTimeFormat('en-GB', { - month: 'short', - }).format(executionDate)}{' '} - {new Intl.DateTimeFormat('en-GB', { - year: '2-digit', - }).format(executionDate)} - , {executionDate?.toLocaleTimeString()} - - ); -}; diff --git a/db-scheduler-ui-frontend/src/components/SortButton.tsx b/db-scheduler-ui-frontend/src/components/SortButton.tsx index 93fb8af6..f81c07a5 100644 --- a/db-scheduler-ui-frontend/src/components/SortButton.tsx +++ b/db-scheduler-ui-frontend/src/components/SortButton.tsx @@ -16,11 +16,9 @@ export const SortButton: React.FC<{ flex="2" textAlign="left" fontSize={'sm'} - //_active={{ color: '#000000', fontWeight: 'semibold' }} onClick={() => currentSort === name ? setSortAsc(!sortAsc) : setCurrentSort(name) } - //fontWeight={currentSort === name ? 'bold' : 'normal'} > {title} = ({ justifyContent={'flex-end'} flexDirection={'row'} > - + {dateFormatText(new Date(executionTime))} + {/**/} Date: Wed, 30 Aug 2023 14:00:27 +0200 Subject: [PATCH 6/8] New date format, install npm --- db-scheduler-ui-frontend/src/components/dateFormatText.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/db-scheduler-ui-frontend/src/components/dateFormatText.ts b/db-scheduler-ui-frontend/src/components/dateFormatText.ts index fb4c1c9d..d6f3c7eb 100644 --- a/db-scheduler-ui-frontend/src/components/dateFormatText.ts +++ b/db-scheduler-ui-frontend/src/components/dateFormatText.ts @@ -1,6 +1,4 @@ +import { format } from 'date-fns'; export function dateFormatText(date: Date) { - return new Intl.DateTimeFormat('no-NO', { - dateStyle: 'medium', - timeStyle: 'medium', - }).format(date); + return format(date, 'dd. MMM yy, H:mm:ss'); } From 15a2c5a421ea08ff2d3fed4e96f28f6cf51f0698 Mon Sep 17 00:00:00 2001 From: Johanna Date: Wed, 30 Aug 2023 14:03:09 +0200 Subject: [PATCH 7/8] install npm --- db-scheduler-ui-frontend/package-lock.json | 16 ++++++++++++++++ db-scheduler-ui-frontend/package.json | 1 + 2 files changed, 17 insertions(+) diff --git a/db-scheduler-ui-frontend/package-lock.json b/db-scheduler-ui-frontend/package-lock.json index 4a9740c0..60cd0890 100644 --- a/db-scheduler-ui-frontend/package-lock.json +++ b/db-scheduler-ui-frontend/package-lock.json @@ -13,6 +13,7 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@tanstack/react-query": "^4.33.0", + "date-fns": "^2.30.0", "framer-motion": "^10.15.2", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -3101,6 +3102,21 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/db-scheduler-ui-frontend/package.json b/db-scheduler-ui-frontend/package.json index 5ad4770d..2ffb74e4 100644 --- a/db-scheduler-ui-frontend/package.json +++ b/db-scheduler-ui-frontend/package.json @@ -15,6 +15,7 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@tanstack/react-query": "^4.33.0", + "date-fns": "^2.30.0", "framer-motion": "^10.15.2", "react": "^18.2.0", "react-dom": "^18.2.0" From 4e182a2fb9be3d4450a23c4e18010e4ca8d475f4 Mon Sep 17 00:00:00 2001 From: Johanna Date: Thu, 31 Aug 2023 09:11:04 +0200 Subject: [PATCH 8/8] Deleted unused comment. --- db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx b/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx index d6f2c41f..5a91cd87 100644 --- a/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx +++ b/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx @@ -53,7 +53,6 @@ export const TaskAccordionButton: React.FC = ({ flexDirection={'row'} > {dateFormatText(new Date(executionTime))} - {/**/}