Skip to content

Commit

Permalink
Remove unwanted variables and show scroll to streams only if details tab
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 346bdad commit 42bb303
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 93 deletions.
16 changes: 11 additions & 5 deletions web/vtadmin/src/components/routes/workflow/Workflow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Link, Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router-dom';
import { Link, Redirect, Route, Switch, useLocation, useParams, useRouteMatch } from 'react-router-dom';

import style from './Workflow.module.scss';

Expand Down Expand Up @@ -41,12 +41,16 @@ interface RouteParams {
export const Workflow = () => {
const { clusterID, keyspace, name } = useParams<RouteParams>();
const { path, url } = useRouteMatch();
const location = useLocation();

useDocumentTitle(`${name} (${keyspace})`);

const { data } = useWorkflow({ clusterID, keyspace, name });
const streams = getStreams(data);

const detailsURL = `${url}/details`;
const detailsTab = location.pathname === detailsURL;

let isReshard = false;
if (data && data.workflow) {
isReshard = data.workflow.workflow_type === 'Reshard';
Expand Down Expand Up @@ -98,16 +102,18 @@ export const Workflow = () => {
</KeyspaceLink>
</span>
</div>
<div style={{ float: 'right' }}>
<a href={`#workflowStreams`}>Scroll To Streams</a>
</div>
{detailsTab && (
<div style={{ float: 'right' }}>
<a href={`#workflowStreams`}>Scroll To Streams</a>
</div>
)}
</div>
</WorkspaceHeader>

<ContentContainer>
<TabContainer>
<Tab text="Streams" to={`${url}/streams`} count={streams.length} />
<Tab text="Details" to={`${url}/details`} />
<Tab text="Details" to={detailsURL} />
<Tab text="JSON" to={`${url}/json`} />
</TabContainer>

Expand Down
89 changes: 1 addition & 88 deletions web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,106 +14,19 @@
* limitations under the License.
*/

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

import { useWorkflow } from '../../../hooks/api';

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

View workflow job for this annotation

GitHub Actions / build 

'useWorkflow' is defined but never used

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

View workflow job for this annotation

GitHub Actions / lint 

'useWorkflow' is defined but never used
import { formatAlias } from '../../../util/tablets';
import { formatDateTime } 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';
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;
keyspace: string;
name: string;
}

const COLUMNS = ['Stream', 'Source', 'Target', 'Tablet'];

export const WorkflowStreams = ({ clusterID, keyspace, name }: Props) => {
const { data } = useWorkflow({ clusterID, keyspace, name });

const streams = useMemo(() => {
const rows = getStreams(data).map((stream) => ({
key: formatStreamKey(stream),
...stream,
}));

return orderBy(rows, 'streamKey');
}, [data]);

const streamsByState = groupBy(streams, 'state');

const renderRows = (rows: typeof streams) => {
return rows.map((row) => {
const href =
row.tablet && row.id
? `/workflow/${clusterID}/${keyspace}/${name}/stream/${row.tablet.cell}/${row.tablet.uid}/${row.id}`
: null;

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={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 ? (
<ShardLink
clusterID={clusterID}
keyspace={row.binlog_source?.keyspace}
shard={row.binlog_source?.shard}
>
{source}
</ShardLink>
) : (
<span className="text-secondary">N/A</span>
)}
</DataCell>
<DataCell>
{target ? (
<ShardLink clusterID={clusterID} keyspace={keyspace} shard={row.shard}>
{target}
</ShardLink>
) : (
<span className="text-secondary">N/A</span>
)}
</DataCell>
<DataCell>
<TabletLink alias={formatAlias(row.tablet)} clusterID={clusterID}>
{formatAlias(row.tablet)}
</TabletLink>
</DataCell>
</tr>
);
});
};

return (
<div className="mt-12 mb-16">
{env().VITE_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS && (
Expand Down

0 comments on commit 42bb303

Please sign in to comment.