Skip to content

Commit

Permalink
VTAdmin: Show throttled status in workflows (#16308)
Browse files Browse the repository at this point in the history 
Signed-off-by: Rohit Nayak <[email protected]>
  • Loading branch information
@rohit-nayak-ps
rohit-nayak-ps authored Jul 11, 2024
1 parent c08381a commit b8497b0
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 20 deletions.
4 changes: 4 additions & 0 deletions web/vtadmin/src/components/pips/Pip.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,8 @@
&.danger {
background: var(--colorError50);
}

&.throttled {
background: var(--grey900);
}
}
2 changes: 1 addition & 1 deletion web/vtadmin/src/components/pips/Pip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ interface Props {
state?: PipState;
}

export type PipState = 'primary' | 'success' | 'warning' | 'danger' | null | undefined;
export type PipState = 'primary' | 'success' | 'warning' | 'danger' | 'throttled' | null | undefined;

export const Pip = ({ className, state }: Props) => {
return <div className={cx(className, style.pip, state && style[state])} />;
Expand Down
1 change: 1 addition & 0 deletions web/vtadmin/src/components/pips/StreamStatePip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const STREAM_STATES: { [key: string]: PipState } = {
Error: 'danger',
Running: 'success',
Stopped: null,
Throttled: 'throttled',
};

export const StreamStatePip = ({ state }: Props) => {
Expand Down
46 changes: 43 additions & 3 deletions web/vtadmin/src/components/routes/Workflows.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ import { KeyspaceLink } from '../links/KeyspaceLink';
import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
import { UseQueryResult } from 'react-query';

export const ThrottleThresholdSeconds = 60;

export const Workflows = () => {
useDocumentTitle('Workflows');
const workflowsQuery = useWorkflows();
Expand Down Expand Up @@ -67,7 +69,6 @@ export const Workflows = () => {
row.clusterID && row.keyspace && row.name
? `/workflow/${row.clusterID}/${row.keyspace}/${row.name}`
: null;

return (
<tr key={idx}>
<DataCell>
Expand Down Expand Up @@ -112,13 +113,52 @@ export const Workflows = () => {
{/* TODO(doeg): add a protobuf enum for this (https://github.com/vitessio/vitess/projects/12#card-60190340) */}
{['Error', 'Copying', 'Running', 'Stopped'].map((streamState) => {
if (streamState in row.streams) {
var numThrottled = 0;
var throttledApp: string | undefined = '';
const streamCount = row.streams[streamState].length;
var streamDescription: string;
switch (streamState) {
case 'Error':
streamDescription = 'failed';
break;
case 'Running':
case 'Copying':
const streams = row.streams[streamState];
if (streams !== undefined && streams !== null) {
for (const stream of streams) {
if (
stream?.throttler_status?.time_throttled !== null &&
stream?.throttler_status?.time_throttled !== undefined &&
// If the stream has been throttled recently, treat it as throttled.
Number(stream?.throttler_status?.time_throttled?.seconds) >
Date.now() / 1000 - ThrottleThresholdSeconds
) {
numThrottled++;
// In case of multiple streams, show the first throttled app and time.
// The detail page will show each stream separately.
if (numThrottled === 1) {
throttledApp =
stream?.throttler_status?.component_throttled?.toString();
}
}
}
}
streamDescription = streamState.toLocaleLowerCase();
if (numThrottled > 0) {
streamState = 'Throttled';
}
break;
default:
streamDescription = streamState.toLocaleLowerCase();
}
const tooltip = [
streamCount,
streamState === 'Error' ? 'failed' : streamState.toLocaleLowerCase(),
streamDescription,
streamCount === 1 ? 'stream' : 'streams',
numThrottled > 0
? '(' + numThrottled + ' throttled in ' + throttledApp + ')'
: '',
].join(' ');

return (
<Tooltip key={streamState} text={tooltip}>
<span className={style.stream}>
Expand Down
8 changes: 8 additions & 0 deletions web/vtadmin/src/components/routes/workflow/Workflow.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,11 @@
content: none;
}
}

.headingMetaContainer div {
width: '100%';
display: 'flex';
justify-content: 'space-between';
padding-top: '0px';
padding-bottom: '0px';
}
25 changes: 15 additions & 10 deletions web/vtadmin/src/components/routes/workflow/Workflow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,21 @@ export const Workflow = () => {
</NavCrumbs>

<WorkspaceTitle className="font-mono">{name}</WorkspaceTitle>
<div className={style.headingMeta}>
<span>
Cluster: <code>{clusterID}</code>
</span>
<span>
Target keyspace:{' '}
<KeyspaceLink clusterID={clusterID} name={keyspace}>
<code>{keyspace}</code>
</KeyspaceLink>
</span>
<div className={style.headingMetaContainer}>
<div className={style.headingMeta} style={{ float: 'left' }}>
<span>
Cluster: <code>{clusterID}</code>
</span>
<span>
Target keyspace:{' '}
<KeyspaceLink clusterID={clusterID} name={keyspace}>
<code>{keyspace}</code>
</KeyspaceLink>
</span>
</div>
<div style={{ float: 'right' }}>
<a href={`#workflowStreams`}>Scroll To Streams</a>
</div>
</div>
</WorkspaceHeader>

Expand Down
23 changes: 17 additions & 6 deletions web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,22 @@
* limitations under the License.
*/

import { orderBy, groupBy } from 'lodash-es';
import { groupBy, orderBy } from 'lodash-es';
import React, { useMemo } from 'react';
import { Link } from 'react-router-dom';

import { useWorkflow } from '../../../hooks/api';
import { formatAlias } from '../../../util/tablets';
import { formatDateTime } from '../../../util/time';
import { getStreams, formatStreamKey, getStreamSource, getStreamTarget } from '../../../util/workflows';
import { formatDateTime, formatRelativeTime } from '../../../util/time';

Check warning on line 23 in web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx

View workflow job for this annotation

GitHub Actions / build 

'formatRelativeTime' is defined but never used

Check warning on line 23 in web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx

View workflow job for this annotation

GitHub Actions / lint 

'formatRelativeTime' is defined but never used
import { formatStreamKey, getStreams, getStreamSource, getStreamTarget } from '../../../util/workflows';
import { DataCell } from '../../dataTable/DataCell';
import { DataTable } from '../../dataTable/DataTable';
import { TabletLink } from '../../links/TabletLink';
import { StreamStatePip } from '../../pips/StreamStatePip';
import { WorkflowStreamsLagChart } from '../../charts/WorkflowStreamsLagChart';
import { ShardLink } from '../../links/ShardLink';
import { env } from '../../../util/env';
import { ThrottleThresholdSeconds } from '../Workflows';

interface Props {
clusterID: string;
Expand Down Expand Up @@ -61,17 +62,25 @@ export const WorkflowStreams = ({ clusterID, keyspace, name }: Props) => {

const source = getStreamSource(row);
const target = getStreamTarget(row, keyspace);

var isThrottled =
Number(row?.throttler_status?.time_throttled?.seconds) > Date.now() / 1000 - ThrottleThresholdSeconds;
const rowState = isThrottled ? 'Throttled' : row.state;
return (
<tr key={row.key}>
<DataCell>
<StreamStatePip state={row.state} />{' '}
<StreamStatePip state={rowState} />{' '}
<Link className="font-bold" to={href}>
{row.key}
</Link>
<div className="text-sm text-secondary">
Updated {formatDateTime(row.time_updated?.seconds)}
</div>
{isThrottled ? (
<div className="text-sm text-secondary">
<span className="font-bold text-danger">Throttled: </span>
in {row.throttler_status?.component_throttled}
</div>
) : null}
</DataCell>
<DataCell>
{source ? (
Expand Down Expand Up @@ -114,7 +123,9 @@ export const WorkflowStreams = ({ clusterID, keyspace, name }: Props) => {
</>
)}

<h3 className="mt-24 mb-8">Streams</h3>
<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])) {
Expand Down

0 comments on commit b8497b0

Please sign in to comment.