vitess.io/vitess@v0.16.2/web/vtadmin/src/components/routes/workflow/Workflow.tsx (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  import { Link, Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router-dom';
    17  
    18  import style from './Workflow.module.scss';
    19  
    20  import { useWorkflow } from '../../../hooks/api';
    21  import { NavCrumbs } from '../../layout/NavCrumbs';
    22  import { WorkspaceHeader } from '../../layout/WorkspaceHeader';
    23  import { WorkspaceTitle } from '../../layout/WorkspaceTitle';
    24  import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
    25  import { KeyspaceLink } from '../../links/KeyspaceLink';
    26  import { WorkflowStreams } from './WorkflowStreams';
    27  import { ContentContainer } from '../../layout/ContentContainer';
    28  import { TabContainer } from '../../tabs/TabContainer';
    29  import { Tab } from '../../tabs/Tab';
    30  import { getStreams } from '../../../util/workflows';
    31  import { Code } from '../../Code';
    32  
    33  interface RouteParams {
    34      clusterID: string;
    35      keyspace: string;
    36      name: string;
    37  }
    38  
    39  export const Workflow = () => {
    40      const { clusterID, keyspace, name } = useParams<RouteParams>();
    41      const { path, url } = useRouteMatch();
    42  
    43      useDocumentTitle(`${name} (${keyspace})`);
    44  
    45      const { data } = useWorkflow({ clusterID, keyspace, name });
    46      const streams = getStreams(data);
    47  
    48      return (
    49          <div>
    50              <WorkspaceHeader>
    51                  <NavCrumbs>
    52                      <Link to="/workflows">Workflows</Link>
    53                  </NavCrumbs>
    54  
    55                  <WorkspaceTitle className="font-mono">{name}</WorkspaceTitle>
    56                  <div className={style.headingMeta}>
    57                      <span>
    58                          Cluster: <code>{clusterID}</code>
    59                      </span>
    60                      <span>
    61                          Target keyspace:{' '}
    62                          <KeyspaceLink clusterID={clusterID} name={keyspace}>
    63                              <code>{keyspace}</code>
    64                          </KeyspaceLink>
    65                      </span>
    66                  </div>
    67              </WorkspaceHeader>
    68  
    69              <ContentContainer>
    70                  <TabContainer>
    71                      <Tab text="Streams" to={`${url}/streams`} count={streams.length} />
    72                      <Tab text="JSON" to={`${url}/json`} />
    73                  </TabContainer>
    74  
    75                  <Switch>
    76                      <Route path={`${path}/streams`}>
    77                          <WorkflowStreams clusterID={clusterID} keyspace={keyspace} name={name} />
    78                      </Route>
    79  
    80                      <Route path={`${path}/json`}>
    81                          <Code code={JSON.stringify(data, null, 2)} />
    82                      </Route>
    83  
    84                      <Redirect exact from={path} to={`${path}/streams`} />
    85                  </Switch>
    86              </ContentContainer>
    87          </div>
    88      );
    89  };