vitess.io/vitess@v0.16.2/web/vtadmin/src/components/routes/stream/Stream.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, useParams } from 'react-router-dom';
    17  
    18  import { useWorkflow } from '../../../hooks/api';
    19  import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
    20  import { formatStreamKey, getStream } from '../../../util/workflows';
    21  import { Code } from '../../Code';
    22  import { ContentContainer } from '../../layout/ContentContainer';
    23  import { NavCrumbs } from '../../layout/NavCrumbs';
    24  import { WorkspaceHeader } from '../../layout/WorkspaceHeader';
    25  import { WorkspaceTitle } from '../../layout/WorkspaceTitle';
    26  import style from './Stream.module.scss';
    27  
    28  interface RouteParams {
    29      clusterID: string;
    30      keyspace: string;
    31      streamID: string;
    32      tabletCell: string;
    33      tabletUID: string;
    34      workflowName: string;
    35  }
    36  
    37  export const Stream = () => {
    38      const params = useParams<RouteParams>();
    39      const { data: workflow } = useWorkflow({
    40          clusterID: params.clusterID,
    41          keyspace: params.keyspace,
    42          name: params.workflowName,
    43      });
    44  
    45      const streamID = parseInt(params.streamID, 10);
    46      const tabletUID = parseInt(params.tabletUID, 10);
    47      const tabletAlias = { cell: params.tabletCell, uid: tabletUID };
    48      const streamKey = formatStreamKey({ id: streamID, tablet: tabletAlias });
    49  
    50      useDocumentTitle(`${streamKey} (${params.workflowName})`);
    51  
    52      const stream = getStream(workflow, streamKey);
    53  
    54      return (
    55          <div>
    56              <WorkspaceHeader>
    57                  <NavCrumbs>
    58                      <Link to="/workflows">Workflows</Link>
    59                      <Link to={`/workflow/${params.clusterID}/${params.keyspace}/${params.workflowName}`}>
    60                          {params.workflowName}
    61                      </Link>
    62                  </NavCrumbs>
    63  
    64                  <WorkspaceTitle className="font-mono">{streamKey}</WorkspaceTitle>
    65                  <div className={style.headingMeta}>
    66                      <span>
    67                          Cluster: <code>{params.clusterID}</code>
    68                      </span>
    69                      <span>
    70                          Target keyspace: <code>{params.keyspace}</code>
    71                      </span>
    72                  </div>
    73              </WorkspaceHeader>
    74              <ContentContainer>
    75                  <Code code={JSON.stringify(stream, null, 2)} />
    76              </ContentContainer>
    77          </div>
    78      );
    79  };