Skip to content

Commit

Permalink
VTAdmin(web): Some mods to overall workflows screen
Browse files Browse the repository at this point in the history 
Signed-off-by: Noble Mittal <noblemittal@outlook.com>
  • Loading branch information
@beingnoble03
beingnoble03 committed Sep 5, 2024
1 parent 7060d07 commit 346bdad
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 39 deletions.
32 changes: 32 additions & 0 deletions web/vtadmin/src/components/routes/workflow/Workflow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { TabContainer } from '../../tabs/TabContainer';
import { Tab } from '../../tabs/Tab';
import { getStreams } from '../../../util/workflows';
import { Code } from '../../Code';
import { ShardLink } from '../../links/ShardLink';

interface RouteParams {
clusterID: string;
Expand All @@ -46,6 +47,11 @@ export const Workflow = () => {
const { data } = useWorkflow({ clusterID, keyspace, name });
const streams = getStreams(data);

let isReshard = false;
if (data && data.workflow) {
isReshard = data.workflow.workflow_type === 'Reshard';
}

return (
<div>
<WorkspaceHeader>
Expand All @@ -54,6 +60,32 @@ export const Workflow = () => {
</NavCrumbs>

<WorkspaceTitle className="font-mono">{name}</WorkspaceTitle>
{isReshard && (
<div className={style.headingMetaContainer}>
<div className={style.headingMeta}>
<span>
{data?.workflow?.source?.shards?.length! > 1 ? 'Source Shards: ' : 'Source Shard: '}
{data?.workflow?.source?.shards?.map((shard) => (
<code key={`${keyspace}/${shard}`}>
<ShardLink clusterID={clusterID} keyspace={keyspace} shard={shard}>
{`${keyspace}/${shard} `}
</ShardLink>
</code>
))}
</span>
<span>
{data?.workflow?.target?.shards?.length! > 1 ? 'Target Shards: ' : 'Target Shard: '}
{data?.workflow?.target?.shards?.map((shard) => (
<code key={`${keyspace}/${shard}`}>
<ShardLink clusterID={clusterID} keyspace={keyspace} shard={shard}>
{`${keyspace}/${shard} `}
</ShardLink>
</code>
))}
</span>
</div>
</div>
)}
<div className={style.headingMetaContainer}>
<div className={style.headingMeta} style={{ float: 'left' }}>
<span>
Expand Down
57 changes: 41 additions & 16 deletions web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
formatStreamKey,
getReverseWorkflow,
getStreamSource,
getStreamTarget,
getStreams,
getTableCopyStates,
} from '../../../util/workflows';
Expand All @@ -34,6 +35,9 @@ import { DataCell } from '../../dataTable/DataCell';
import { StreamStatePip } from '../../pips/StreamStatePip';
import { ThrottleThresholdSeconds } from '../Workflows';
import { ShardLink } from '../../links/ShardLink';
import { Tooltip } from '../../tooltip/Tooltip';
import { TabletLink } from '../../links/TabletLink';
import { formatAlias } from '../../../util/tablets';

interface Props {
clusterID: string;
Expand All @@ -47,7 +51,7 @@ const LOG_COLUMNS = ['Type', 'State', 'Updated At', 'Message', 'Count'];

const TABLE_COPY_STATE_COLUMNS = ['Table Name', 'Total Bytes', 'Bytes Copied', 'Total Rows', 'Rows Copied'];

const STREAM_COLUMNS = ['Stream', 'State', 'Message', 'Transaction Timestamp', 'Database Name'];
const STREAM_COLUMNS = ['Stream', 'Source Shard', 'Target Shard', 'Message', 'Transaction Timestamp', 'Database Name'];

export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
const { data: workflowData } = useWorkflow({ clusterID, keyspace, name });
Expand Down Expand Up @@ -148,6 +152,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
const renderStreamRows = (rows: typeof streams) => {
return rows.map((row) => {
const source = getStreamSource(row);
const target = getStreamTarget(row, keyspace);
const href =
row.tablet && row.id
? `/workflow/${clusterID}/${keyspace}/${name}/stream/${row.tablet.cell}/${row.tablet.uid}/${row.id}`
Expand All @@ -159,22 +164,20 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
return (
<tr key={row.key}>
<DataCell>
<StreamStatePip state={rowState} />{' '}
<Tooltip text={rowState!}>
<span>
<StreamStatePip state={rowState} />{' '}
</span>
</Tooltip>
<Link className="font-bold" to={href}>
{row.key}
</Link>
{source && (
<div className="text-sm text-secondary">
Source Shard{' '}
<ShardLink
clusterID={clusterID}
keyspace={row.binlog_source?.keyspace}
shard={row.binlog_source?.shard}
>
{source}
</ShardLink>
</div>
)}
<div className="text-sm text-secondary">
Tablet{' '}
<TabletLink alias={formatAlias(row.tablet)} clusterID={clusterID}>
{formatAlias(row.tablet)}
</TabletLink>
</div>
<div className="text-sm text-secondary">
Updated {formatDateTimeShort(row.time_updated?.seconds)}
</div>
Expand All @@ -185,7 +188,28 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
</div>
) : null}
</DataCell>
<DataCell>{rowState}</DataCell>
<DataCell>
{source ? (
<ShardLink
clusterID={clusterID}
keyspace={row.binlog_source?.keyspace}
shard={row.binlog_source?.shard}
>
{source}
</ShardLink>
) : (
'-'
)}
</DataCell>
<DataCell>
{target ? (
<ShardLink clusterID={clusterID} keyspace={keyspace} shard={row.shard}>
{target}
</ShardLink>
) : (
'-'
)}
</DataCell>
<DataCell>{row.message ? row.message : '-'}</DataCell>
<DataCell>
{row.transaction_timestamp && row.transaction_timestamp.seconds
Expand Down Expand Up @@ -239,14 +263,15 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
};

return (
<div className="mt-12 mb-16">
<div className="mt-8 mb-16">
<DataTable
columns={SUMMARY_COLUMNS}
data={[workflowSummary]}
renderRows={renderSummaryRows}
pageSize={1}
title="Summary"
/>
<span id="workflowStreams"></span>
<DataTable
columns={STREAM_COLUMNS}
data={streams}
Expand Down
23 changes: 0 additions & 23 deletions web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,29 +122,6 @@ export const WorkflowStreams = ({ clusterID, keyspace, name }: Props) => {
<WorkflowStreamsLagChart clusterID={clusterID} keyspace={keyspace} workflowName={name} />
</>
)}

<h3 className="mt-24 mb-8" id="workflowStreams">
Streams
</h3>
{/* TODO(doeg): add a protobuf enum for this (https://github.com/vitessio/vitess/projects/12#card-60190340) */}
{['Error', 'Copying', 'Running', 'Stopped'].map((streamState) => {
if (!Array.isArray(streamsByState[streamState])) {
return null;
}

return (
<div className="my-12" key={streamState}>
<DataTable
columns={COLUMNS}
data={streamsByState[streamState]}
// TODO(doeg): make pagination optional in DataTable https://github.com/vitessio/vitess/projects/12#card-60810231
pageSize={1000}
renderRows={renderRows}
title={streamState}
/>
</div>
);
})}
</div>
);
};

0 comments on commit 346bdad

Please sign in to comment.