diff --git a/.eslintrc.js b/.eslintrc.js index db35b92d..be38ee45 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -31,7 +31,6 @@ module.exports = { 'no-only-tests/no-only-tests': 'error', // UI - 'prettier/prettier': 'error', 'react/prop-types': 'off', 'react/display-name': 'off', }, @@ -49,4 +48,4 @@ module.exports = { }, }, ], -} +}; diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index c6a1376d..00000000 --- a/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "trailingComma": "es5", - "singleQuote": true -} diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 00000000..a4df7366 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,5 @@ +module.exports = { + trailingComma: 'es5', + singleQuote: true, + printWidth: 120, +}; diff --git a/src/@types/app.ts b/src/@types/app.ts index 7e362b55..60f31150 100644 --- a/src/@types/app.ts +++ b/src/@types/app.ts @@ -1,12 +1,7 @@ import { BaseAdapter } from '../queueAdapters/base'; import { Status } from '../ui/components/constants'; -export type JobCleanStatus = - | 'completed' - | 'wait' - | 'active' - | 'delayed' - | 'failed'; +export type JobCleanStatus = 'completed' | 'wait' | 'active' | 'delayed' | 'failed'; export type JobStatus = Status; diff --git a/src/index.ts b/src/index.ts index 8196a4f3..4969cacd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -33,8 +33,7 @@ export function createBullBoard( } function removeQueue(queueOrName: string | BaseAdapter) { - const name = - typeof queueOrName === 'string' ? queueOrName : queueOrName.getName(); + const name = typeof queueOrName === 'string' ? queueOrName : queueOrName.getName(); bullBoardQueues.delete(name); } @@ -48,9 +47,7 @@ export function createBullBoard( } function replaceQueues(newBullQueues: ReadonlyArray): void { - const queuesToPersist: string[] = newBullQueues.map((queue) => - queue.getName() - ); + const queuesToPersist: string[] = newBullQueues.map((queue) => queue.getName()); bullBoardQueues.forEach((_queue, name) => { if (queuesToPersist.indexOf(name) === -1) { diff --git a/src/queueAdapters/base.ts b/src/queueAdapters/base.ts index 2254bc6d..3ac24d86 100644 --- a/src/queueAdapters/base.ts +++ b/src/queueAdapters/base.ts @@ -1,10 +1,4 @@ -import { - JobCleanStatus, - JobCounts, - JobStatus, - QueueAdapterOptions, - QueueJob, -} from '../@types/app'; +import { JobCleanStatus, JobCounts, JobStatus, QueueAdapterOptions, QueueJob } from '../@types/app'; export abstract class BaseAdapter { public readonly readOnlyMode: boolean; @@ -14,34 +8,22 @@ export abstract class BaseAdapter { this.readOnlyMode = options.readOnlyMode === true; } - public setFormatter( - field: 'data' | 'returnValue', - formatter: (data: any) => any - ): void { + public setFormatter(field: 'data' | 'returnValue', formatter: (data: any) => any): void { this.formatters[field] = formatter; } // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types public format(field: 'data' | 'returnValue', data: any): any { - return typeof this.formatters[field] === 'function' - ? this.formatters[field](data) - : data; + return typeof this.formatters[field] === 'function' ? this.formatters[field](data) : data; } - public abstract clean( - queueStatus: JobCleanStatus, - graceTimeMs: number - ): Promise; + public abstract clean(queueStatus: JobCleanStatus, graceTimeMs: number): Promise; public abstract getJob(id: string): Promise; public abstract getJobCounts(...jobStatuses: JobStatus[]): Promise; - public abstract getJobs( - jobStatuses: JobStatus[], - start?: number, - end?: number - ): Promise; + public abstract getJobs(jobStatuses: JobStatus[], start?: number, end?: number): Promise; public abstract getJobLogs(id: string): Promise; diff --git a/src/queueAdapters/bull.ts b/src/queueAdapters/bull.ts index 25b98de0..5d1e2323 100644 --- a/src/queueAdapters/bull.ts +++ b/src/queueAdapters/bull.ts @@ -1,10 +1,5 @@ import { Job, Queue } from 'bull'; -import { - JobCleanStatus, - JobCounts, - JobStatus, - QueueAdapterOptions, -} from '../@types/app'; +import { JobCleanStatus, JobCounts, JobStatus, QueueAdapterOptions } from '../@types/app'; import { BaseAdapter } from './base'; export class BullAdapter extends BaseAdapter { @@ -28,11 +23,7 @@ export class BullAdapter extends BaseAdapter { return this.queue.getJob(id); } - public getJobs( - jobStatuses: JobStatus[], - start?: number, - end?: number - ): Promise { + public getJobs(jobStatuses: JobStatus[], start?: number, end?: number): Promise { return this.queue.getJobs(jobStatuses as any, start, end); } diff --git a/src/queueAdapters/bullMQ.ts b/src/queueAdapters/bullMQ.ts index 63ceb322..fd28e2f3 100644 --- a/src/queueAdapters/bullMQ.ts +++ b/src/queueAdapters/bullMQ.ts @@ -1,19 +1,11 @@ import { Job, Queue } from 'bullmq'; -import { - JobCleanStatus, - JobCounts, - JobStatus, - QueueAdapterOptions, -} from '../@types/app'; +import { JobCleanStatus, JobCounts, JobStatus, QueueAdapterOptions } from '../@types/app'; import { BaseAdapter } from './base'; export class BullMQAdapter extends BaseAdapter { private readonly LIMIT = 1000; - constructor( - private queue: Queue, - options: Partial = {} - ) { + constructor(private queue: Queue, options: Partial = {}) { super(options); } @@ -34,18 +26,12 @@ export class BullMQAdapter extends BaseAdapter { return this.queue.getJob(id); } - public getJobs( - jobStatuses: JobStatus[], - start?: number, - end?: number - ): Promise { + public getJobs(jobStatuses: JobStatus[], start?: number, end?: number): Promise { return this.queue.getJobs(jobStatuses, start, end); } public getJobCounts(...jobStatuses: JobStatus[]): Promise { - return (this.queue.getJobCounts( - ...jobStatuses - ) as unknown) as Promise; + return (this.queue.getJobCounts(...jobStatuses) as unknown) as Promise; } public getJobLogs(id: string): Promise { diff --git a/src/routes/apiRouter.ts b/src/routes/apiRouter.ts index 9d463ab6..c5d24610 100644 --- a/src/routes/apiRouter.ts +++ b/src/routes/apiRouter.ts @@ -14,26 +14,10 @@ import { wrapAsync } from './middlewares/wrapAsync'; export const apiRouter = Router() .get('/queues', wrapAsync(queuesHandler)) .put('/queues/:queueName/retry', queueProvider(), wrapAsync(retryAll)) - .put( - '/queues/:queueName/:jobId/retry', - [queueProvider(), jobProvider()], - wrapAsync(retryJob) - ) - .put( - '/queues/:queueName/:jobId/clean', - [queueProvider(), jobProvider()], - wrapAsync(cleanJob) - ) - .put( - '/queues/:queueName/:jobId/promote', - [queueProvider(), jobProvider()], - wrapAsync(promoteJob) - ) - .put( - '/queues/:queueName/clean/:queueStatus', - queueProvider(), - wrapAsync(cleanAll) - ) + .put('/queues/:queueName/:jobId/retry', [queueProvider(), jobProvider()], wrapAsync(retryJob)) + .put('/queues/:queueName/:jobId/clean', [queueProvider(), jobProvider()], wrapAsync(cleanJob)) + .put('/queues/:queueName/:jobId/promote', [queueProvider(), jobProvider()], wrapAsync(promoteJob)) + .put('/queues/:queueName/clean/:queueStatus', queueProvider(), wrapAsync(cleanAll)) .get( '/queues/:queueName/:jobId/logs', [queueProvider({ skipReadOnlyModeCheck: true }), jobProvider()], diff --git a/src/routes/handlers/cleanAll.ts b/src/routes/handlers/cleanAll.ts index 19a12864..ffec32f1 100644 --- a/src/routes/handlers/cleanAll.ts +++ b/src/routes/handlers/cleanAll.ts @@ -6,10 +6,7 @@ type RequestParams = { queueStatus: JobCleanStatus; }; -export const cleanAll: RequestHandler = async ( - req: Request, - res: Response -) => { +export const cleanAll: RequestHandler = async (req: Request, res: Response) => { const { queueStatus } = req.params; const { queue } = res.locals; diff --git a/src/routes/handlers/cleanJob.ts b/src/routes/handlers/cleanJob.ts index b8e76e1f..7c79cde8 100644 --- a/src/routes/handlers/cleanJob.ts +++ b/src/routes/handlers/cleanJob.ts @@ -1,10 +1,7 @@ import { Request, RequestHandler, Response } from 'express-serve-static-core'; import { QueueJob } from '../../@types/app'; -export const cleanJob: RequestHandler = async ( - _req: Request, - res: Response -) => { +export const cleanJob: RequestHandler = async (_req: Request, res: Response) => { const { job } = res.locals as { job: QueueJob }; await job.remove(); diff --git a/src/routes/handlers/promoteJob.ts b/src/routes/handlers/promoteJob.ts index 97cfa288..6b410ca6 100644 --- a/src/routes/handlers/promoteJob.ts +++ b/src/routes/handlers/promoteJob.ts @@ -1,10 +1,7 @@ import { Request, RequestHandler, Response } from 'express-serve-static-core'; import { QueueJob } from '../../@types/app'; -export const promoteJob: RequestHandler = async ( - _req: Request, - res: Response -) => { +export const promoteJob: RequestHandler = async (_req: Request, res: Response) => { const { job } = res.locals as { job: QueueJob }; await job.promote(); diff --git a/src/routes/handlers/queues.ts b/src/routes/handlers/queues.ts index ccff0c79..310d3c1c 100644 --- a/src/routes/handlers/queues.ts +++ b/src/routes/handlers/queues.ts @@ -29,8 +29,7 @@ const getStats = async (queue: BaseAdapter): Promise => { return acc; }, {} as Record); - validMetrics.total_system_memory = - redisInfo.total_system_memory || redisInfo.maxmemory; + validMetrics.total_system_memory = redisInfo.total_system_memory || redisInfo.maxmemory; return validMetrics; }; @@ -55,19 +54,9 @@ const formatJob = (job: QueueJob, queue: BaseAdapter): app.AppJob => { }; }; -const statuses: JobStatus[] = [ - 'active', - 'completed', - 'delayed', - 'failed', - 'paused', - 'waiting', -]; +const statuses: JobStatus[] = ['active', 'completed', 'delayed', 'failed', 'paused', 'waiting']; -const getDataForQueues = async ( - bullBoardQueues: app.BullBoardQueues, - req: Request -): Promise => { +const getDataForQueues = async (bullBoardQueues: app.BullBoardQueues, req: Request): Promise => { const query = req.query || {}; const pairs = [...bullBoardQueues.entries()]; @@ -81,8 +70,7 @@ const getDataForQueues = async ( const queues: app.AppQueue[] = await Promise.all( pairs.map(async ([name, queue]) => { const counts = await queue.getJobCounts(...statuses); - const status = - query[name] === 'latest' ? statuses : (query[name] as JobStatus[]); + const status = query[name] === 'latest' ? statuses : (query[name] as JobStatus[]); const jobs = await queue.getJobs(status, 0, 10); return { @@ -102,10 +90,7 @@ const getDataForQueues = async ( }; }; -export const queuesHandler: RequestHandler = async ( - req: Request, - res: Response -) => { +export const queuesHandler: RequestHandler = async (req: Request, res: Response) => { const { bullBoardQueues } = req.app.locals as { bullBoardQueues: BullBoardQueues; }; diff --git a/src/routes/handlers/retryAll.ts b/src/routes/handlers/retryAll.ts index 263b5f2d..5448f056 100644 --- a/src/routes/handlers/retryAll.ts +++ b/src/routes/handlers/retryAll.ts @@ -1,10 +1,7 @@ import { Request, RequestHandler, Response } from 'express-serve-static-core'; import { BaseAdapter } from '../../queueAdapters/base'; -export const retryAll: RequestHandler = async ( - _req: Request, - res: Response -) => { +export const retryAll: RequestHandler = async (_req: Request, res: Response) => { const { queue } = res.locals as { queue: BaseAdapter }; const jobs = await queue.getJobs(['failed']); diff --git a/src/routes/handlers/retryJob.ts b/src/routes/handlers/retryJob.ts index d8148027..f912f760 100644 --- a/src/routes/handlers/retryJob.ts +++ b/src/routes/handlers/retryJob.ts @@ -1,10 +1,7 @@ import { Request, RequestHandler, Response } from 'express-serve-static-core'; import { QueueJob } from '../../@types/app'; -export const retryJob: RequestHandler = async ( - _req: Request, - res: Response -) => { +export const retryJob: RequestHandler = async (_req: Request, res: Response) => { const { job } = res.locals as { job: QueueJob }; await job.retry(); diff --git a/src/routes/middlewares/wrapAsync.ts b/src/routes/middlewares/wrapAsync.ts index c27093dd..7c7e02a3 100644 --- a/src/routes/middlewares/wrapAsync.ts +++ b/src/routes/middlewares/wrapAsync.ts @@ -2,5 +2,4 @@ import { ParamsDictionary, RequestHandler } from 'express-serve-static-core'; export const wrapAsync = ( fn: RequestHandler -): RequestHandler => async (req, res, next) => - Promise.resolve(fn(req, res, next)).catch(next); +): RequestHandler => async (req, res, next) => Promise.resolve(fn(req, res, next)).catch(next); diff --git a/src/ui/components/App.tsx b/src/ui/components/App.tsx index a2cca449..eda56933 100644 --- a/src/ui/components/App.tsx +++ b/src/ui/components/App.tsx @@ -15,9 +15,7 @@ export const App = ({ api }: { api: Api }) => { return ( <> -
- {state.data?.stats && } -
+
{state.data?.stats && }
{state.loading ? ( @@ -28,39 +26,22 @@ export const App = ({ api }: { api: Api }) => { path="/queue/:name" render={({ match: { params } }) => { const currentQueueName = decodeURIComponent(params.name); - const queue = state.data?.queues.find( - (q) => q.name === currentQueueName - ); + const queue = state.data?.queues.find((q) => q.name === currentQueueName); - return ( - - ); + return ; }} /> - {!!state.data && - Array.isArray(state.data?.queues) && - state.data.queues.length > 0 && ( - - )} + {!!state.data && Array.isArray(state.data?.queues) && state.data.queues.length > 0 && ( + + )} )}
- q.name)} - selectedStatuses={selectedStatuses} - /> + q.name)} selectedStatuses={selectedStatuses} /> ); diff --git a/src/ui/components/Header/Header.module.css b/src/ui/components/Header/Header.module.css index 18287de6..3122d1de 100644 --- a/src/ui/components/Header/Header.module.css +++ b/src/ui/components/Header/Header.module.css @@ -1,36 +1,36 @@ .header { - z-index: 99; - position: fixed; - top: 0; - left: 0; - width: 100%; - background: white; - transition: box-shadow 0.5s ease-in-out; - display: flex; - align-items: center; - justify-content: space-between; - height: var(--header-height); - box-sizing: border-box; - border-bottom: 1px solid #e6e7e8; + z-index: 99; + position: fixed; + top: 0; + left: 0; + width: 100%; + background: white; + transition: box-shadow 0.5s ease-in-out; + display: flex; + align-items: center; + justify-content: space-between; + height: var(--header-height); + box-sizing: border-box; + border-bottom: 1px solid #e6e7e8; } .header > .logo { - width: var(--menu-width); - flex-basis: var(--menu-width); - flex-shrink: 0; - white-space: nowrap; - text-align: center; - font-size: 1.728rem; - height: inherit; - line-height: var(--header-height); - background-color: hsl(217, 22%, 24%); - color: #f5f8fa; - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); - z-index: 2; - box-sizing: content-box; + width: var(--menu-width); + flex-basis: var(--menu-width); + flex-shrink: 0; + white-space: nowrap; + text-align: center; + font-size: 1.728rem; + height: inherit; + line-height: var(--header-height); + background-color: hsl(217, 22%, 24%); + color: #f5f8fa; + border-bottom: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); + z-index: 2; + box-sizing: content-box; } .header + main { - padding-top: var(--header-height); + padding-top: var(--header-height); } diff --git a/src/ui/components/Highlight/Highlight.tsx b/src/ui/components/Highlight/Highlight.tsx index 63af2d4a..6dc2b4a6 100644 --- a/src/ui/components/Highlight/Highlight.tsx +++ b/src/ui/components/Highlight/Highlight.tsx @@ -22,10 +22,7 @@ export class Highlight extends React.Component { return ( nextProps.language !== this.props.language || (Array.isArray(this.props.children) - ? this.props.children.some( - (item: any) => - !([] as any).concat(nextProps.children).includes(item) - ) + ? this.props.children.some((item: any) => !([] as any).concat(nextProps.children).includes(item)) : nextProps.children !== this.props.children) ); } diff --git a/src/ui/components/JobCard/Button/Button.module.css b/src/ui/components/JobCard/Button/Button.module.css index 04608df0..be36676d 100644 --- a/src/ui/components/JobCard/Button/Button.module.css +++ b/src/ui/components/JobCard/Button/Button.module.css @@ -1,33 +1,33 @@ .button { - font-size: 1rem; - background: none; - border: none; - border-radius: 0.28571429rem; - cursor: pointer; - outline: none; - white-space: nowrap; - padding: 0.65em 0.92857143em; - color: inherit; + font-size: 1rem; + background: none; + border: none; + border-radius: 0.28571429rem; + cursor: pointer; + outline: none; + white-space: nowrap; + padding: 0.65em 0.92857143em; + color: inherit; } .button > svg { - width: 1.25em; - vertical-align: middle; - display: inline-block; - fill: #718096; + width: 1.25em; + vertical-align: middle; + display: inline-block; + fill: #718096; } .button:hover, .button:focus { - background-color: #e2e8f0; + background-color: #e2e8f0; } .button:active, .button.isActive { - background-color: #cbd5e0; + background-color: #cbd5e0; } .button:hover > svg, .button:focus > svg { - fill: #718096; + fill: #718096; } diff --git a/src/ui/components/JobCard/Button/Button.tsx b/src/ui/components/JobCard/Button/Button.tsx index b83189dd..1988685d 100644 --- a/src/ui/components/JobCard/Button/Button.tsx +++ b/src/ui/components/JobCard/Button/Button.tsx @@ -7,17 +7,10 @@ export const Button = ({ className, isActive = false, ...rest -}: React.DetailedHTMLProps< - React.ButtonHTMLAttributes, - HTMLButtonElement -> & { +}: React.DetailedHTMLProps, HTMLButtonElement> & { isActive?: boolean; }) => ( - ); diff --git a/src/ui/components/JobCard/Details/Details.module.css b/src/ui/components/JobCard/Details/Details.module.css index 1cf16c2e..6945baf2 100644 --- a/src/ui/components/JobCard/Details/Details.module.css +++ b/src/ui/components/JobCard/Details/Details.module.css @@ -1,87 +1,87 @@ .details { - height: 100%; - display: flex; - flex-direction: column; + height: 100%; + display: flex; + flex-direction: column; } .tabActions { - list-style: none; - padding: 0; - margin: 1rem 0 2rem; - display: flex; + list-style: none; + padding: 0; + margin: 1rem 0 2rem; + display: flex; } .tabActions li + li { - margin-left: 0.75rem; + margin-left: 0.75rem; } .tabContent { - flex: 1; - max-width: calc(100% - 80px); - position: relative; - overflow: hidden; + flex: 1; + max-width: calc(100% - 80px); + position: relative; + overflow: hidden; } .tabContent:before { - content: ''; - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 2rem; - background: linear-gradient( - 270deg, - hsl(0, 0%, 100%) 0%, - hsla(0, 0%, 100%, 0.738) 19%, - hsla(0, 0%, 100%, 0.541) 34%, - hsla(0, 0%, 100%, 0.382) 47%, - hsla(0, 0%, 100%, 0.278) 56.5%, - hsla(0, 0%, 100%, 0.194) 65%, - hsla(0, 0%, 100%, 0.126) 73%, - hsla(0, 0%, 100%, 0.075) 80.2%, - hsla(0, 0%, 100%, 0.042) 86.1%, - hsla(0, 0%, 100%, 0.021) 91%, - hsla(0, 0%, 100%, 0.008) 95.2%, - hsla(0, 0%, 100%, 0.002) 98.2%, - hsla(0, 0%, 100%, 0) 100% - ); + content: ''; + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 2rem; + background: linear-gradient( + 270deg, + hsl(0, 0%, 100%) 0%, + hsla(0, 0%, 100%, 0.738) 19%, + hsla(0, 0%, 100%, 0.541) 34%, + hsla(0, 0%, 100%, 0.382) 47%, + hsla(0, 0%, 100%, 0.278) 56.5%, + hsla(0, 0%, 100%, 0.194) 65%, + hsla(0, 0%, 100%, 0.126) 73%, + hsla(0, 0%, 100%, 0.075) 80.2%, + hsla(0, 0%, 100%, 0.042) 86.1%, + hsla(0, 0%, 100%, 0.021) 91%, + hsla(0, 0%, 100%, 0.008) 95.2%, + hsla(0, 0%, 100%, 0.002) 98.2%, + hsla(0, 0%, 100%, 0) 100% + ); } .tabContent:after { - content: ''; - position: absolute; - right: 0; - left: 0; - bottom: 0; - height: 2rem; - background: linear-gradient( - 0deg, - hsl(0, 0%, 100%) 0%, - hsla(0, 0%, 100%, 0.738) 19%, - hsla(0, 0%, 100%, 0.541) 34%, - hsla(0, 0%, 100%, 0.382) 47%, - hsla(0, 0%, 100%, 0.278) 56.5%, - hsla(0, 0%, 100%, 0.194) 65%, - hsla(0, 0%, 100%, 0.126) 73%, - hsla(0, 0%, 100%, 0.075) 80.2%, - hsla(0, 0%, 100%, 0.042) 86.1%, - hsla(0, 0%, 100%, 0.021) 91%, - hsla(0, 0%, 100%, 0.008) 95.2%, - hsla(0, 0%, 100%, 0.002) 98.2%, - hsla(0, 0%, 100%, 0) 100% - ); + content: ''; + position: absolute; + right: 0; + left: 0; + bottom: 0; + height: 2rem; + background: linear-gradient( + 0deg, + hsl(0, 0%, 100%) 0%, + hsla(0, 0%, 100%, 0.738) 19%, + hsla(0, 0%, 100%, 0.541) 34%, + hsla(0, 0%, 100%, 0.382) 47%, + hsla(0, 0%, 100%, 0.278) 56.5%, + hsla(0, 0%, 100%, 0.194) 65%, + hsla(0, 0%, 100%, 0.126) 73%, + hsla(0, 0%, 100%, 0.075) 80.2%, + hsla(0, 0%, 100%, 0.042) 86.1%, + hsla(0, 0%, 100%, 0.021) 91%, + hsla(0, 0%, 100%, 0.008) 95.2%, + hsla(0, 0%, 100%, 0.002) 98.2%, + hsla(0, 0%, 100%, 0) 100% + ); } .tabContent > div { - overflow: auto; - padding-bottom: 2rem; - height: 100%; + overflow: auto; + padding-bottom: 2rem; + height: 100%; } .tabContent :global(.error) { - color: #d73a49; + color: #d73a49; } .tabContent pre { - margin: 0; + margin: 0; } diff --git a/src/ui/components/JobCard/Details/Details.tsx b/src/ui/components/JobCard/Details/Details.tsx index a241cf49..54015c7b 100644 --- a/src/ui/components/JobCard/Details/Details.tsx +++ b/src/ui/components/JobCard/Details/Details.tsx @@ -32,11 +32,7 @@ export const Details = ({ status, job, actions }: DetailsProps) => {
- +
diff --git a/src/ui/components/JobCard/Details/DetailsContent/DetailsContent.tsx b/src/ui/components/JobCard/Details/DetailsContent/DetailsContent.tsx index 35d32ea8..e524efc9 100644 --- a/src/ui/components/JobCard/Details/DetailsContent/DetailsContent.tsx +++ b/src/ui/components/JobCard/Details/DetailsContent/DetailsContent.tsx @@ -19,15 +19,9 @@ export const DetailsContent = ({ }: DetailsContentProps) => { switch (selectedTab) { case 'Data': - return ( - - {JSON.stringify({ data, returnValue }, null, 2)} - - ); + return {JSON.stringify({ data, returnValue }, null, 2)}; case 'Options': - return ( - {JSON.stringify(opts, null, 2)} - ); + return {JSON.stringify(opts, null, 2)}; case 'Error': return ( <> diff --git a/src/ui/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css b/src/ui/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css index 639baf65..b490612f 100644 --- a/src/ui/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css +++ b/src/ui/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css @@ -1,11 +1,11 @@ .jobLogs { - margin: 0; + margin: 0; } .jobLogs > li + li { - margin-top: 0.5em; + margin-top: 0.5em; } .jobLogs > li { - white-space: pre-line; + white-space: pre-line; } diff --git a/src/ui/components/JobCard/JobActions/JobActions.module.css b/src/ui/components/JobCard/JobActions/JobActions.module.css index 0825e0ae..a80ac484 100644 --- a/src/ui/components/JobCard/JobActions/JobActions.module.css +++ b/src/ui/components/JobCard/JobActions/JobActions.module.css @@ -1,14 +1,14 @@ .jobActions { - list-style: none; - margin: 0; - padding: 0; - display: flex; + list-style: none; + margin: 0; + padding: 0; + display: flex; } .jobActions li + li { - margin-left: 0.5rem; + margin-left: 0.5rem; } .jobActions .button { - padding: 0.5rem; + padding: 0.5rem; } diff --git a/src/ui/components/JobCard/JobCard.module.css b/src/ui/components/JobCard/JobCard.module.css index 555b5d03..c181440b 100644 --- a/src/ui/components/JobCard/JobCard.module.css +++ b/src/ui/components/JobCard/JobCard.module.css @@ -1,70 +1,70 @@ .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), - 0 1px 3px 0 rgba(60, 75, 100, 0.2); - border-radius: 0.25rem; - padding: 1em; - display: flex; - min-height: 320px; - max-height: 370px; + 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: 370px; } .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; } diff --git a/src/ui/components/JobCard/JobCard.tsx b/src/ui/components/JobCard/JobCard.tsx index 3676cacc..af1c90f3 100644 --- a/src/ui/components/JobCard/JobCard.tsx +++ b/src/ui/components/JobCard/JobCard.tsx @@ -19,12 +19,7 @@ interface JobCardProps { }; } -export const JobCard = ({ - job, - status, - actions, - readOnlyMode, -}: JobCardProps) => ( +export const JobCard = ({ job, status, actions, readOnlyMode }: JobCardProps) => (
#{job.id} @@ -41,11 +36,7 @@ export const JobCard = ({
{typeof job.progress === 'number' && ( - + )}
diff --git a/src/ui/components/JobCard/Progress/Progress.module.css b/src/ui/components/JobCard/Progress/Progress.module.css index 8252dc3a..532930a5 100644 --- a/src/ui/components/JobCard/Progress/Progress.module.css +++ b/src/ui/components/JobCard/Progress/Progress.module.css @@ -1,16 +1,16 @@ .progress { - width: 80px; - height: 80px; + width: 80px; + height: 80px; } .progress circle { - transform-origin: center; - transition: stroke-dashoffset 500ms ease-in-out; + transform-origin: center; + transition: stroke-dashoffset 500ms ease-in-out; } .progress text { - font-size: 2.5rem; - font-family: inherit; - font-weight: 300; - fill: #a0aec0; + font-size: 2.5rem; + font-family: inherit; + font-weight: 300; + fill: #a0aec0; } diff --git a/src/ui/components/JobCard/Timeline/Timeline.module.css b/src/ui/components/JobCard/Timeline/Timeline.module.css index 6e467554..5ba29b94 100644 --- a/src/ui/components/JobCard/Timeline/Timeline.module.css +++ b/src/ui/components/JobCard/Timeline/Timeline.module.css @@ -1,52 +1,52 @@ .timeline { - padding: 1.5rem 1rem 1.5rem 0; - margin: 0; - list-style: none; - border: 0; - border-right-width: 2px; - border-right-style: solid; - border-image: linear-gradient(to bottom, #fff, #e2e8f0 10%, #e2e8f0 90%, #fff) 1 100%; - color: #a0aec0; - font-weight: 300; - height: 100%; + padding: 1.5rem 1rem 1.5rem 0; + margin: 0; + list-style: none; + border: 0; + border-right-width: 2px; + border-right-style: solid; + border-image: linear-gradient(to bottom, #fff, #e2e8f0 10%, #e2e8f0 90%, #fff) 1 100%; + color: #a0aec0; + font-weight: 300; + height: 100%; } .timeline li { - display: block; + display: block; } .timeline li + li { - margin-top: 1.5rem; + margin-top: 1.5rem; } .timeline li > time { - position: relative; - color: #718096; + position: relative; + color: #718096; } .timeline li > time:before { - content: ''; - width: 0.5rem; - height: 0.5rem; - position: absolute; - right: -1.5rem; - top: 50%; - margin-top: -0.5rem; - background-color: #cbd5e0; - border-radius: 100%; - border: 3px solid #fff; + content: ''; + width: 0.5rem; + height: 0.5rem; + position: absolute; + right: -1.5rem; + top: 50%; + margin-top: -0.5rem; + background-color: #cbd5e0; + border-radius: 100%; + border: 3px solid #fff; } .timeline li > small { - display: block; - line-height: 1; + display: block; + line-height: 1; } .timeline li > small + small { - margin-top: 1.5rem; + margin-top: 1.5rem; } .timelineWrapper { - position: relative; - flex: 1; + position: relative; + flex: 1; } diff --git a/src/ui/components/JobCard/Timeline/Timeline.tsx b/src/ui/components/JobCard/Timeline/Timeline.tsx index 940a33e5..b3830e70 100644 --- a/src/ui/components/JobCard/Timeline/Timeline.tsx +++ b/src/ui/components/JobCard/Timeline/Timeline.tsx @@ -11,18 +11,10 @@ const formatDate = (ts: TimeStamp) => { return format(ts, 'HH:mm:ss'); } - return getYear(ts) === getYear(new Date()) - ? format(ts, 'MM/dd HH:mm:ss') - : format(ts, 'MM/dd/yyyy HH:mm:ss'); + return getYear(ts) === getYear(new Date()) ? format(ts, 'MM/dd HH:mm:ss') : format(ts, 'MM/dd/yyyy HH:mm:ss'); }; -export const Timeline = function Timeline({ - job, - status, -}: { - job: AppJob; - status: Status; -}) { +export const Timeline = function Timeline({ job, status }: { job: AppJob; status: Status }) { return (
    @@ -34,13 +26,9 @@ export const Timeline = function Timeline({
  • Delayed for
    • )} diff --git a/src/ui/components/Menu/Menu.module.css b/src/ui/components/Menu/Menu.module.css index 4a379d24..d4b4f19a 100644 --- a/src/ui/components/Menu/Menu.module.css +++ b/src/ui/components/Menu/Menu.module.css @@ -1,65 +1,65 @@ .aside { - position: fixed; - z-index: 99; - top: var(--header-height); - left: 0; - bottom: 0; - width: var(--menu-width); - background: linear-gradient( - to bottom, - hsl(217, 22%, 20%), - hsl(217, 22%, 16%) 80%, - hsl(217, 22%, 12%) - ); - padding-top: 1rem; - color: #d5d9dc; - display: flex; - flex-direction: column; - box-shadow: 4px 0 8px 3px rgba(38, 46, 60, 0.1); + position: fixed; + z-index: 99; + top: var(--header-height); + left: 0; + bottom: 0; + width: var(--menu-width); + background: linear-gradient( + to bottom, + hsl(217, 22%, 20%), + hsl(217, 22%, 16%) 80%, + hsl(217, 22%, 12%) + ); + padding-top: 1rem; + color: #d5d9dc; + display: flex; + flex-direction: column; + box-shadow: 4px 0 8px 3px rgba(38, 46, 60, 0.1); } .aside > div { - color: #828e97; - font-size: 0.833em; - padding: 0 1rem; + color: #828e97; + font-size: 0.833em; + padding: 0 1rem; } .aside nav { - flex: 1; - overflow-y: auto; + flex: 1; + overflow-y: auto; } .menu { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } .menu li + li { - border-top: 1px solid hsl(206, 9%, 25%); + border-top: 1px solid hsl(206, 9%, 25%); } .menu a { - color: inherit; - text-decoration: none; - display: block; - padding: 1rem 1.25rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - transition: background-color 100ms ease-in; - border-left: 3px solid transparent; + color: inherit; + text-decoration: none; + display: block; + padding: 1rem 1.25rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: background-color 100ms ease-in; + border-left: 3px solid transparent; } .menu a:hover { - background-color: rgba(255, 255, 255, 0.05); - border-left-color: hsl(184, 20%, 30%); + background-color: rgba(255, 255, 255, 0.05); + border-left-color: hsl(184, 20%, 30%); } .menu a.active { - background-color: rgba(255, 255, 255, 0.1); - border-left-color: #4abec7; + background-color: rgba(255, 255, 255, 0.1); + border-left-color: #4abec7; } .appVersion { - text-align: center; + text-align: center; } diff --git a/src/ui/components/Menu/Menu.tsx b/src/ui/components/Menu/Menu.tsx index 77b3038a..731c0e71 100644 --- a/src/ui/components/Menu/Menu.tsx +++ b/src/ui/components/Menu/Menu.tsx @@ -20,8 +20,7 @@ export const Menu = ({
  • li + li { - margin-left: 0.25rem; + margin-left: 0.25rem; } .queueActions .button > svg { - fill: #a0aec0; - margin: -0.25em 0.5em 0 0; + fill: #a0aec0; + margin: -0.25em 0.5em 0 0; } .queueActions .button:hover > svg, .queueActions .button:focus > svg { - fill: #718096; + fill: #718096; } diff --git a/src/ui/components/QueueActions/QueueActions.tsx b/src/ui/components/QueueActions/QueueActions.tsx index 3caa00b5..4fa90e4e 100644 --- a/src/ui/components/QueueActions/QueueActions.tsx +++ b/src/ui/components/QueueActions/QueueActions.tsx @@ -15,8 +15,7 @@ interface QueueActionProps { const ACTIONABLE_STATUSES = ['failed', 'delayed', 'completed']; -const isStatusActionable = (status: Status): boolean => - ACTIONABLE_STATUSES.includes(status); +const isStatusActionable = (status: Status): boolean => ACTIONABLE_STATUSES.includes(status); const CleanAllButton = ({ onClick }: any) => (