From e86663583d695101921a4626d6793f43bc08b63f Mon Sep 17 00:00:00 2001 From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com> Date: Wed, 9 Aug 2023 17:21:53 +0300 Subject: [PATCH] feat: align pages links to use a single point of truth --- .../src/components/JobCard/JobCard.module.css | 82 ++++++++++--------- .../ui/src/components/JobCard/JobCard.tsx | 16 ++-- packages/ui/src/components/Menu/Menu.tsx | 8 +- .../ui/src/components/QueueCard/QueueCard.tsx | 3 +- packages/ui/src/pages/JobPage/JobPage.tsx | 27 +++--- packages/ui/src/pages/QueuePage/QueuePage.tsx | 11 ++- packages/ui/src/utils/links.ts | 6 +- 7 files changed, 82 insertions(+), 71 deletions(-) diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css index ff677a65..20aab078 100644 --- a/packages/ui/src/components/JobCard/JobCard.module.css +++ b/packages/ui/src/components/JobCard/JobCard.module.css @@ -1,70 +1,74 @@ .card { - background-color: #fff; - box-shadow: 0 1px 1px 0 rgba(60, 75, 100, 0.14), 0 2px 1px -1px rgba(60, 75, 100, 0.12), + background-color: #fff; + 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; - display: flex; - min-height: 320px; - max-height: 500px; + border-radius: 0.25rem; + padding: 1em; + display: flex; + min-height: 320px; + max-height: 500px; } .card + .card { - margin-top: 2rem; + margin-top: 2rem; } .contentWrapper { - flex: 1; - display: flex; - flex-direction: column; + flex: 1; + display: flex; + flex-direction: column; } .title { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .title h4, .sideInfo span { - font-size: 1.44rem; - font-weight: 300; - color: #4a5568; - line-height: 1; + font-size: 1.44rem; + font-weight: 300; + color: #4a5568; + line-height: 1; } .title h4 span { - margin-left: 1.5rem; - color: #a0aec0; - font-size: 0.694em; + margin-left: 1.5rem; + color: #a0aec0; + font-size: 0.694em; } .sideInfo { - width: 200px; - padding-right: 2rem; - display: flex; - flex-direction: column; - text-align: right; - color: #cbd5e0; - flex-shrink: 0; + width: 200px; + padding-right: 2rem; + display: flex; + flex-direction: column; + text-align: right; + color: #cbd5e0; + flex-shrink: 0; } .sideInfo span { - display: block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - color: #cbd5e0; - padding-right: 1rem; + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + color: #cbd5e0; + padding-right: 1rem; } .content { - position: relative; - flex: 1; - overflow: hidden; + position: relative; + flex: 1; + overflow: hidden; } .content .progress { - position: absolute; - bottom: 0; - right: 0; + position: absolute; + bottom: 0; + right: 0; +} + +.jobLink { + text-decoration: none; } diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index 366a7488..440f80b3 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -1,17 +1,17 @@ +import { STATUSES } from '@bull-board/api/dist/src/constants/statuses'; +import { AppJob, Status } from '@bull-board/api/typings/app'; import React from 'react'; -import { NavLink } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { Card } from '../Card/Card'; import { Details } from './Details/Details'; import { JobActions } from './JobActions/JobActions'; import s from './JobCard.module.css'; import { Progress } from './Progress/Progress'; import { Timeline } from './Timeline/Timeline'; -import { AppJob, Status } from '@bull-board/api/typings/app'; -import { STATUSES } from '@bull-board/api/dist/src/constants/statuses'; interface JobCardProps { job: AppJob; - jobUrlPath?: string; + jobUrl?: string; status: Status; readOnlyMode: boolean; allowRetries: boolean; @@ -31,14 +31,14 @@ export const JobCard = ({ actions, readOnlyMode, allowRetries, - jobUrlPath, + jobUrl, }: JobCardProps) => (
- {jobUrlPath ? ( - + {jobUrl ? ( + #{job.id} - + ) : ( #{job.id} )} diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index b30b2de6..3e0e4748 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/packages/ui/src/components/Menu/Menu.tsx @@ -2,8 +2,8 @@ import { AppQueue } from '@bull-board/api/typings/app'; import cn from 'clsx'; import React, { useState } from 'react'; import { NavLink } from 'react-router-dom'; -import { STATUS_LIST } from '../../constants/status-list'; import { useSelectedStatuses } from '../../hooks/useSelectedStatuses'; +import { links } from '../../utils/links'; import { SearchIcon } from '../Icons/Search'; import s from './Menu.module.css'; @@ -38,11 +38,7 @@ export const Menu = ({ queues }: { queues: AppQueue[] | null }) => { .map(({ name: queueName, isPaused }) => (
  • diff --git a/packages/ui/src/components/QueueCard/QueueCard.tsx b/packages/ui/src/components/QueueCard/QueueCard.tsx index 6507443a..74a18aaa 100644 --- a/packages/ui/src/components/QueueCard/QueueCard.tsx +++ b/packages/ui/src/components/QueueCard/QueueCard.tsx @@ -1,6 +1,7 @@ import { AppQueue } from '@bull-board/api/dist/typings/app'; import React from 'react'; import { NavLink } from 'react-router-dom'; +import { links } from '../../utils/links'; import { Card } from '../Card/Card'; import { QueueStats } from './QueueStats/QueueStats'; import s from './QueueCard.module.css'; @@ -12,7 +13,7 @@ interface IQueueCardProps { export const QueueCard = ({ queue }: IQueueCardProps) => (
    - + {queue.name}
    diff --git a/packages/ui/src/pages/JobPage/JobPage.tsx b/packages/ui/src/pages/JobPage/JobPage.tsx index 511fa3e0..e20f8068 100644 --- a/packages/ui/src/pages/JobPage/JobPage.tsx +++ b/packages/ui/src/pages/JobPage/JobPage.tsx @@ -1,15 +1,19 @@ import { AppQueue, JobRetryStatus } from '@bull-board/api/typings/app'; +import cn from 'clsx'; import React from 'react'; -import { Link, useHistory, useLocation } from 'react-router-dom'; +import { Link, useHistory } from 'react-router-dom'; import { ArrowLeftIcon } from '../../components/Icons/ArrowLeft'; import { JobCard } from '../../components/JobCard/JobCard'; import { useJob } from '../../hooks/useJob'; +import { useSelectedStatuses } from '../../hooks/useSelectedStatuses'; +import { links } from '../../utils/links'; import s from '../QueuePage/QueuePage.module.css'; +import buttonS from '../../components/Button/Button.module.css'; export const JobPage = ({ queue }: { queue: AppQueue | null }) => { - const { search } = useLocation(); const history = useHistory(); const { job, status, actions } = useJob(); + const selectedStatuses = useSelectedStatuses(); actions.pollJob(); @@ -22,15 +26,18 @@ export const JobPage = ({ queue }: { queue: AppQueue | null }) => { } const cleanJob = async () => { - await actions.cleanJob(queue?.name)(job)(); - history.replace(`/queue/${queue.name}`); + await actions.cleanJob(queue.name)(job)(); + history.replace(links.queuePage(queue.name, selectedStatuses)); }; return (
    - +
    Status: {status.toLocaleUpperCase()}
    @@ -42,12 +49,12 @@ export const JobPage = ({ queue }: { queue: AppQueue | null }) => { status={status} actions={{ cleanJob, - promoteJob: actions.promoteJob(queue?.name)(job), - retryJob: actions.retryJob(queue?.name, status as JobRetryStatus)(job), - getJobLogs: actions.getJobLogs(queue?.name)(job), + promoteJob: actions.promoteJob(queue.name)(job), + retryJob: actions.retryJob(queue.name, status as JobRetryStatus)(job), + getJobLogs: actions.getJobLogs(queue.name)(job), }} - readOnlyMode={queue?.readOnlyMode} - allowRetries={(job.isFailed || queue.allowCompletedRetries) && queue?.allowRetries} + readOnlyMode={queue.readOnlyMode} + allowRetries={(job.isFailed || queue.allowCompletedRetries) && queue.allowRetries} />
    ); diff --git a/packages/ui/src/pages/QueuePage/QueuePage.tsx b/packages/ui/src/pages/QueuePage/QueuePage.tsx index caa064c3..5686a630 100644 --- a/packages/ui/src/pages/QueuePage/QueuePage.tsx +++ b/packages/ui/src/pages/QueuePage/QueuePage.tsx @@ -1,6 +1,6 @@ +import { STATUSES } from '@bull-board/api/dist/src/constants/statuses'; import { JobRetryStatus } from '@bull-board/api/typings/app'; import React from 'react'; -import { useLocation } from 'react-router-dom'; import { JobCard } from '../../components/JobCard/JobCard'; import { Pagination } from '../../components/Pagination/Pagination'; import { QueueActions } from '../../components/QueueActions/QueueActions'; @@ -9,6 +9,7 @@ import { useActiveQueue } from '../../hooks/useActiveQueue'; import { useJob } from '../../hooks/useJob'; import { useQueues } from '../../hooks/useQueues'; import { useSelectedStatuses } from '../../hooks/useSelectedStatuses'; +import { links } from '../../utils/links'; import s from './QueuePage.module.css'; export const QueuePage = () => { @@ -16,7 +17,6 @@ export const QueuePage = () => { const { actions, queues } = useQueues(); const { actions: jobActions } = useJob(); const queue = useActiveQueue({ queues }); - const { search } = useLocation(); actions.pollQueues(); if (!queue) { @@ -24,6 +24,7 @@ export const QueuePage = () => { } const status = selectedStatus[queue.name]; + const isLatest = status === STATUSES.latest; return (
    @@ -50,10 +51,8 @@ export const QueuePage = () => {