diff --git a/pkg/ui/workspaces/db-console/src/util/docs.ts b/pkg/ui/workspaces/db-console/src/util/docs.ts index b614ed34c681..f73246d12e45 100644 --- a/pkg/ui/workspaces/db-console/src/util/docs.ts +++ b/pkg/ui/workspaces/db-console/src/util/docs.ts @@ -54,6 +54,10 @@ export const metaRanges = docsURL( ); export const databaseTable = docsURL("ui-databases-page.html"); export const jobTable = docsURL("ui-jobs-page.html"); +export const jobStatus = docsURL("ui-jobs-page.html#job-status"); +export const jobsPause = docsURL("pause-job"); +export const jobsResume = docsURL("resume-job"); +export const jobsCancel = docsURL("cancel-job"); export const statementsTable = docsURL("ui-statements-page.html"); export const statementDiagnostics = docsURL( "ui-statements-page.html#diagnostics", diff --git a/pkg/ui/workspaces/db-console/src/views/jobs/jobTable.tsx b/pkg/ui/workspaces/db-console/src/views/jobs/jobTable.tsx index 3a3d9a428dbb..488952d98d1e 100644 --- a/pkg/ui/workspaces/db-console/src/views/jobs/jobTable.tsx +++ b/pkg/ui/workspaces/db-console/src/views/jobs/jobTable.tsx @@ -9,7 +9,6 @@ // licenses/APL.txt. import React, { MouseEvent } from "react"; -import _ from "lodash"; import { cockroach } from "src/js/protos"; import { TimestampToMoment } from "src/util/convert"; import { DATE_FORMAT_24_UTC } from "src/util/format"; @@ -25,46 +24,123 @@ import { Pagination, ResultsPerPageLabel, } from "@cockroachlabs/cluster-ui"; -import { jobTable } from "src/util/docs"; +import { + jobsCancel, + jobsPause, + jobsResume, + jobStatus, + jobTable, +} from "src/util/docs"; import { trackDocsLink } from "src/util/analytics"; -import { EmptyTable } from "@cockroachlabs/cluster-ui"; +import { EmptyTable, SortedTable } from "@cockroachlabs/cluster-ui"; import { Anchor } from "src/components"; import emptyTableResultsIcon from "assets/emptyState/empty-table-results.svg"; import magnifyingGlassIcon from "assets/emptyState/magnifying-glass.svg"; -import { SortedTable } from "../shared/components/sortedtable"; +import { Tooltip } from "@cockroachlabs/ui-components"; class JobsSortedTable extends SortedTable {} const jobsTableColumns: ColumnDescriptor[] = [ { name: "description", - title: "Description", + title: ( + + The description of the job, if set, or the SQL statement if there is + no job description. +

+ } + > + {"Description"} +
+ ), className: "cl-table__col-query-text", cell: job => , sort: job => job.statement || job.description || job.type, }, { name: "jobId", - title: "Job ID", + title: ( + + {"Unique job ID. This value is used to "} + + pause + + {", "} + + resume + + {", or "} + + cancel + + {" jobs."} +

+ } + > + {"Job ID"} +
+ ), titleAlign: "right", cell: job => String(job.id), sort: job => job.id?.toNumber(), }, { name: "users", - title: "Users", + title: ( + User that created the job.

} + > + {"User"} +
+ ), cell: job => job.username, sort: job => job.username, }, { name: "creationTime", - title: "Creation Time", + title: ( + Date and time the job was created.

} + > + {"Creation Time"} +
+ ), cell: job => TimestampToMoment(job?.created).format(DATE_FORMAT_24_UTC), sort: job => TimestampToMoment(job?.created).valueOf(), }, { name: "status", - title: "Status", + title: ( + + {"Current "} + + job status + + { + " or completion progress, and the total time the job took to complete." + } +

+ } + > + {"Status"} +
+ ), cell: job => , sort: job => job.fraction_completed, },