Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VTAdmin: Show throttled status in workflows #16308

Merged
merged 15 commits into from
Jul 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions web/vtadmin/src/components/pips/Pip.module.scss
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
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
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
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';
rohit-nayak-ps marked this conversation as resolved.
Show resolved Hide resolved
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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Recently Throttled would be correct.

}
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
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
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
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 @@

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 @@
</>
)}

<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