diff --git a/packages/ui/package.json b/packages/ui/package.json index 7038c48fd..e02279fca 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -42,6 +42,7 @@ "@babel/runtime": "^7.17.9", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", "@radix-ui/react-alert-dialog": "^1.0.4", + "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.5", "@radix-ui/react-switch": "^1.0.3", diff --git a/packages/ui/src/components/Icons/ArrowUpIcon.tsx b/packages/ui/src/components/Icons/ArrowUpIcon.tsx new file mode 100644 index 000000000..be710af0e --- /dev/null +++ b/packages/ui/src/components/Icons/ArrowUpIcon.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export const ArrowUpIcon = () => ( + +); diff --git a/packages/ui/src/components/JobCard/Details/Details.module.css b/packages/ui/src/components/JobCard/Details/Details.module.css index f9eb0ce99..5d070c679 100644 --- a/packages/ui/src/components/JobCard/Details/Details.module.css +++ b/packages/ui/src/components/JobCard/Details/Details.module.css @@ -7,7 +7,7 @@ .tabActions { list-style: none; padding: 0; - margin: 1rem 0 2rem; + margin: 1rem 0 0.5rem; display: flex; } diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx index 3687f9607..c3305cd54 100644 --- a/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx +++ b/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx @@ -20,7 +20,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp const { t } = useTranslation(); const { collapseJobData, collapseJobOptions, collapseJobError } = useSettingsStore(); const [collapseState, setCollapse] = useState({ data: false, options: false, error: false }); - const { stacktrace, data, returnValue, opts, failedReason } = job; + const { stacktrace, data: jobData, returnValue, opts, failedReason } = job; switch (selectedTab) { case 'Data': @@ -29,7 +29,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp {t('JOB.SHOW_DATA_BTN')} ) : ( - + ); case 'Options': return collapseJobOptions && !collapseState.options ? ( diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css index 20aab0784..a74d16b6b 100644 --- a/packages/ui/src/components/JobCard/JobCard.module.css +++ b/packages/ui/src/components/JobCard/JobCard.module.css @@ -3,14 +3,13 @@ box-shadow: 0 1px 1px 0 rgba(60, 75, 100, 0.14), 0 2px 1px -1px rgba(60, 75, 100, 0.12), 0 1px 3px 0 rgba(60, 75, 100, 0.2); border-radius: 0.25rem; - padding: 1em; + padding: 0.66em; display: flex; - min-height: 320px; max-height: 500px; } .card + .card { - margin-top: 2rem; + margin-top: 0.75rem; } .contentWrapper { @@ -21,7 +20,10 @@ .title { display: flex; + align-items: baseline; justify-content: space-between; + padding-bottom: 0.5rem; + border-bottom: 1px solid #e2e8f0; } .title h4, @@ -38,6 +40,19 @@ font-size: 0.694em; } +.header { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; +} + +.details { + display: flex; + margin-top: 1rem; + width: 100%; +} + .sideInfo { width: 200px; padding-right: 2rem; @@ -57,6 +72,10 @@ padding-right: 1rem; } +.collapseBtn { + padding: 0.15rem; +} + .content { position: relative; flex: 1; @@ -70,5 +89,6 @@ } .jobLink { - text-decoration: none; + color: #4a5568; + font-size: large; } diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index f4baa8aae..6f5e6edd0 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -4,6 +4,11 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { Card } from '../Card/Card'; +import { ArrowDownIcon } from '../Icons/ArrowDownIcon'; +import { useSettingsStore } from '../../hooks/useSettings'; +import { ArrowUpIcon } from '../Icons/ArrowUpIcon'; +import { Button } from '../Button/Button'; +import * as Collapsible from '@radix-ui/react-collapsible'; import { Details } from './Details/Details'; import { JobActions } from './JobActions/JobActions'; import s from './JobCard.module.css'; @@ -35,49 +40,81 @@ export const JobCard = ({ jobUrl, }: JobCardProps) => { const { t } = useTranslation(); + const { collapseJob } = useSettingsStore(); + + const [isOpen, setIsOpen] = React.useState(false); + + React.useEffect(() => { + setIsOpen(!jobUrl ? true : !collapseJob) + }), [jobUrl, collapseJob]; + + const JobTitle =

#{job.id}

+ return ( -
- {jobUrl ? ( - - #{job.id} - - ) : ( - #{job.id} - )} - -
-
-
-

- {job.name} - {job.attempts > 1 && {t('JOB.ATTEMPTS', { attempts: job.attempts })}} - {!!job.opts?.repeat?.count && ( - - {t(`JOB.REPEAT${!!job.opts?.repeat?.limit ? '_WITH_LIMIT' : ''}`, { - count: job.opts.repeat.count, - limit: job.opts?.repeat?.limit, - })} - - )} -

- {!readOnlyMode && ( - - )} -
-
-
- {typeof job.progress === 'number' && ( - - )} + +
+ {jobUrl ? ( + + {JobTitle} + + ) : JobTitle} + + + +
-
+ + +
+
+ +
+ +
+
+
+ {t('JOB.NAME')}: {job.name} + {job.attempts > 1 && ( + + - {t('JOB.ATTEMPTS', { attempts: job.attempts })} + + )} + + {!!job.opts?.repeat?.count && ( + + {t(`JOB.REPEAT${!!job.opts?.repeat?.limit ? '_WITH_LIMIT' : ''}`, { + count: job.opts.repeat.count, + limit: job.opts?.repeat?.limit, + })} + + )} +
+ + {!readOnlyMode && ( + + )} +
+ +
+
+ + {typeof job.progress === 'number' && ( + + )} +
+
+
+ + ); }; diff --git a/packages/ui/src/components/JobCard/Timeline/Timeline.module.css b/packages/ui/src/components/JobCard/Timeline/Timeline.module.css index 6e4675547..6b63e5ab8 100644 --- a/packages/ui/src/components/JobCard/Timeline/Timeline.module.css +++ b/packages/ui/src/components/JobCard/Timeline/Timeline.module.css @@ -1,5 +1,5 @@ .timeline { - padding: 1.5rem 1rem 1.5rem 0; + padding: 0.25rem 1rem 1rem 0; margin: 0; list-style: none; border: 0; diff --git a/packages/ui/src/components/SettingsModal/SettingsModal.tsx b/packages/ui/src/components/SettingsModal/SettingsModal.tsx index 274d99e1c..c9e1c302e 100644 --- a/packages/ui/src/components/SettingsModal/SettingsModal.tsx +++ b/packages/ui/src/components/SettingsModal/SettingsModal.tsx @@ -21,6 +21,7 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => { jobsPerPage, confirmQueueActions, confirmJobActions, + collapseJob, collapseJobData, collapseJobOptions, collapseJobError, @@ -81,6 +82,12 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => { checked={confirmJobActions} onCheckedChange={(checked) => setSettings({ confirmJobActions: checked })} /> + setSettings({ collapseJob: checked })} + /> ()( jobsPerPage: 10, confirmJobActions: true, confirmQueueActions: true, + collapseJob: false, collapseJobData: false, collapseJobOptions: false, collapseJobError: false, diff --git a/packages/ui/src/static/locales/en-US/messages.json b/packages/ui/src/static/locales/en-US/messages.json index f9d507978..22afbf94c 100644 --- a/packages/ui/src/static/locales/en-US/messages.json +++ b/packages/ui/src/static/locales/en-US/messages.json @@ -10,6 +10,7 @@ "JOBS_COUNT": "{{count}} Jobs" }, "JOB": { + "NAME": "Name", "NOT_FOUND": "Job Not found", "STATUS": "Status: {{status}}", "ADDED_AT": "Added at", @@ -109,6 +110,7 @@ "JOBS_PER_PAGE": "Jobs per page (1-50)", "CONFIRM_QUEUE_ACTIONS": "Confirm queue actions", "CONFIRM_JOB_ACTIONS": "Confirm job actions", + "COLLAPSE_JOB": "Collapse job", "COLLAPSE_JOB_DATA": "Collapse job data", "COLLAPSE_JOB_OPTIONS": "Collapse job options", "COLLAPSE_JOB_ERROR": "Collapse job error" diff --git a/packages/ui/src/static/locales/pt-BR/messages.json b/packages/ui/src/static/locales/pt-BR/messages.json index 81ba261fa..363da38f2 100644 --- a/packages/ui/src/static/locales/pt-BR/messages.json +++ b/packages/ui/src/static/locales/pt-BR/messages.json @@ -12,6 +12,7 @@ "JOBS_COUNT": "{{count}} Tarefas" }, "JOB": { + "NAME": "Nome", "NOT_FOUND": "Tarefa não encontrada", "STATUS": "Status: {{status}}", "ADDED_AT": "Adicionado em", @@ -113,6 +114,7 @@ "JOBS_PER_PAGE": "Tarefas por página (1-50)", "CONFIRM_QUEUE_ACTIONS": "Confirma ações da fila", "CONFIRM_JOB_ACTIONS": "Confirma ações da tarefa", + "COLLAPSE_JOB": "Recolher tarefa", "COLLAPSE_JOB_DATA": "Recolher dados da tarefa", "COLLAPSE_JOB_OPTIONS": "Recolher opções da tarefa", "COLLAPSE_JOB_ERROR": "Recolher erros da tarefa" diff --git a/yarn.lock b/yarn.lock index c8d35683a..4fbc7d878 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3369,6 +3369,21 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "1.0.3" +"@radix-ui/react-collapsible@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz#df0e22e7a025439f13f62d4e4a9e92c4a0df5b81" + integrity sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-id" "1.0.1" + "@radix-ui/react-presence" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-use-controllable-state" "1.0.1" + "@radix-ui/react-use-layout-effect" "1.0.1" + "@radix-ui/react-collection@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"