github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/app/containers/layout/index.tsx (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import { Helmet } from "react-helmet";
    13  import { RouteComponentProps, withRouter } from "react-router-dom";
    14  import { connect } from "react-redux";
    15  
    16  import NavigationBar from "src/views/app/components/layoutSidebar";
    17  import TimeWindowManager from "src/views/app/containers/timewindow";
    18  import AlertBanner from "src/views/app/containers/alertBanner";
    19  import RequireLogin from "src/views/login/requireLogin";
    20  import { clusterIdSelector, clusterNameSelector, singleVersionSelector } from "src/redux/nodes";
    21  import { AdminUIState } from "src/redux/state";
    22  import LoginIndicator from "src/views/app/components/loginIndicator";
    23  import {
    24    GlobalNavigation,
    25    CockroachLabsLockupIcon,
    26    Left,
    27    Right,
    28    PageHeader,
    29    Text,
    30    TextTypes,
    31    Badge,
    32  } from "src/components";
    33  
    34  import "./layout.styl";
    35  import "./layoutPanel.styl";
    36  
    37  export interface LayoutProps {
    38    clusterName: string;
    39    clusterVersion: string;
    40    clusterId: string;
    41  }
    42  
    43  /**
    44   * Defines the main layout of all admin ui pages. This includes static
    45   * navigation bars and footers which should be present on every page.
    46   *
    47   * Individual pages provide their content via react-router.
    48   */
    49  class Layout extends React.Component<LayoutProps & RouteComponentProps> {
    50    render() {
    51      const { clusterName, clusterVersion, clusterId } = this.props;
    52      return (
    53        <RequireLogin>
    54          <Helmet
    55            titleTemplate="%s | Cockroach Console"
    56            defaultTitle="Cockroach Console"
    57          />
    58          <TimeWindowManager/>
    59          <AlertBanner/>
    60          <div className="layout-panel">
    61            <div className="layout-panel__header">
    62              <GlobalNavigation>
    63                <Left>
    64                  <CockroachLabsLockupIcon height={26} />
    65                </Left>
    66                <Right>
    67                  <LoginIndicator />
    68                </Right>
    69              </GlobalNavigation>
    70            </div>
    71            <div className="layout-panel__navigation-bar">
    72              <PageHeader>
    73                <Text textType={TextTypes.Heading2} noWrap>
    74                  {clusterName || `Cluster id: ${clusterId || ""}`}
    75                </Text>
    76                <Badge text={clusterVersion} />
    77              </PageHeader>
    78            </div>
    79            <div className="layout-panel__body">
    80              <div className="layout-panel__sidebar">
    81                <NavigationBar/>
    82              </div>
    83              <div className="layout-panel__content">
    84                { this.props.children }
    85              </div>
    86            </div>
    87          </div>
    88        </RequireLogin>
    89      );
    90    }
    91  }
    92  
    93  const mapStateToProps = (state: AdminUIState) => {
    94    return {
    95      clusterName: clusterNameSelector(state),
    96      clusterVersion: singleVersionSelector(state),
    97      clusterId: clusterIdSelector(state),
    98    };
    99  };
   100  
   101  export default withRouter(connect(mapStateToProps)(Layout));