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.

Sign up for GitHub

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

VTAdmin: Show throttled status in workflows #16308

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9c2dbd5
Add throttled status to workflow/streams
rohit-nayak-ps Jul 1, 2024
578c39f
Minor refactor
rohit-nayak-ps Jul 1, 2024
d75ec73
Prettify changed files
rohit-nayak-ps Jul 2, 2024
e4c63be
Try prettify again: command is npm run lint:prettier -- --write src/c…
rohit-nayak-ps Jul 2, 2024
765c9b5
Update styles to use correct attributes
rohit-nayak-ps Jul 2, 2024
28ade16
Only show recently throttled streams, since the throttled component/t…
rohit-nayak-ps Jul 3, 2024
ec0b95c
Prettier
rohit-nayak-ps Jul 3, 2024
7ce6690
Change Streams link text
rohit-nayak-ps Jul 3, 2024
60be644
Don't display time info in tooltip
rohit-nayak-ps Jul 3, 2024
60f6c61
Don't display time info in stream status
rohit-nayak-ps Jul 3, 2024
cb764bc
Also handle Copying state
rohit-nayak-ps Jul 3, 2024
5cd70c8
Fix stream description
rohit-nayak-ps Jul 3, 2024
187ba0d
Prettier
rohit-nayak-ps Jul 3, 2024
1023233
Remove unused imports
rohit-nayak-ps Jul 3, 2024
860f117
Prettifier again with a locally installed prettifier using the .prett…
rohit-nayak-ps Jul 3, 2024
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
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { Tooltip } from '../tooltip/Tooltip';
import { KeyspaceLink } from '../links/KeyspaceLink';
import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
import { UseQueryResult } from 'react-query';
import { vttime } from '../../proto/vtadmin';

export const Workflows = () => {
useDocumentTitle('Workflows');
Expand Down Expand Up @@ -67,7 +68,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 +112,53 @@ 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 = '';
var throttledFrom: vttime.ITime | null | 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':
const running = row.streams['Running'];
if (running !== undefined && running !== null) {
for (const stream of running) {
if (
stream?.throttler_status?.component_throttled !== null &&
stream?.throttler_status?.component_throttled !== undefined
) {
numThrottled++;
throttledApp = stream?.throttler_status?.component_throttled;
throttledFrom = stream?.throttler_status?.time_throttled;
}
}
}
if (numThrottled > 0) {
streamDescription = '';
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.

} else {
streamDescription = streamState;
}
break;
default:
streamDescription = streamState.toLocaleLowerCase();
}
const tooltip = [
streamCount,
streamState === 'Error' ? 'failed' : streamState.toLocaleLowerCase(),
streamDescription,
streamCount === 1 ? 'stream' : 'streams',
numThrottled > 0
? '(' +
numThrottled +
' throttled by ' +
rohit-nayak-ps marked this conversation as resolved.
Show resolved Hide resolved
throttledApp +
' ' +
formatRelativeTime(throttledFrom?.seconds) +
')'
: '',
].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
Open in desktop
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
Open in desktop
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`}>Streams</a>
</div>
</div>
</WorkspaceHeader>

Expand Down
21 changes: 15 additions & 6 deletions web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
* 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';
import { formatStreamKey, getStreams, getStreamSource, getStreamTarget } from '../../../util/workflows';
import { DataCell } from '../../dataTable/DataCell';
import { DataTable } from '../../dataTable/DataTable';
import { TabletLink } from '../../links/TabletLink';
Expand Down Expand Up @@ -61,17 +61,24 @@ export const WorkflowStreams = ({ clusterID, keyspace, name }: Props) => {

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

const rowState = row?.throttler_status?.component_throttled ? '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>
{row?.throttler_status?.component_throttled ? (
<div className="text-sm text-secondary">
<span className="font-bold text-danger">Throttled:</span>
{row.throttler_status?.component_throttled}(
{formatRelativeTime(row.throttler_status?.time_throttled?.seconds)})
</div>
) : null}
</DataCell>
<DataCell>
{source ? (
Expand Down Expand Up @@ -114,7 +121,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