github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/components/sql/tableInfo.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 { Tooltip } from "antd";
    12  import React from "react";
    13  import { connect } from "react-redux";
    14  import { Link } from "react-router-dom";
    15  
    16  import * as protos from "src/js/protos";
    17  import { refreshTableDetails, refreshTableStats } from "src/redux/apiReducers";
    18  import { AdminUIState } from "src/redux/state";
    19  import { databaseNameAttr, tableNameAttr } from "src/util/constants";
    20  import { selectTableInfo } from "src/views/databases/containers/tableDetails";
    21  import { TableInfo } from "src/views/databases/data/tableInfo";
    22  import { Highlight } from "./highlight";
    23  
    24  interface TableInfoComponentProps {
    25    title: any;
    26    params: {
    27      database_name: string;
    28      table_name: string;
    29    };
    30  }
    31  interface TableInfoProps {
    32    tableInfo: TableInfo;
    33    refreshTableDetails: typeof refreshTableDetails;
    34    refreshTableStats: typeof refreshTableStats;
    35  }
    36  
    37  class TableInfoComponent extends React.Component<TableInfoComponentProps & TableInfoProps> {
    38    componentDidMount() {
    39      this.loadTable();
    40    }
    41  
    42    loadTable = () => {
    43      this.props.refreshTableDetails(new protos.cockroach.server.serverpb.TableDetailsRequest({
    44        database: this.props.params[databaseNameAttr],
    45        table: this.props.params[tableNameAttr],
    46      }));
    47      this.props.refreshTableStats(new protos.cockroach.server.serverpb.TableStatsRequest({
    48        database: this.props.params[databaseNameAttr],
    49        table: this.props.params[tableNameAttr],
    50      }));
    51    }
    52  
    53    render() {
    54      const { title, tableInfo, params } = this.props;
    55      return (
    56        <Tooltip overlayClassName="hljs" placement="bottom" title={<pre className="sql-highlight hljs"><Highlight value={tableInfo.createStatement} /></pre>}>
    57          <Link className="table-target" to={`database/${params[databaseNameAttr]}/table/${params[tableNameAttr]}`}>
    58            {title}
    59          </Link>
    60        </Tooltip>
    61      );
    62    }
    63  }
    64  
    65  const mapStateToProps = (state: AdminUIState, props: any) => {
    66    return ({
    67      tableInfo: selectTableInfo(state, props),
    68    });
    69  };
    70  
    71  const mapDispatchToProps = {
    72    refreshTableDetails,
    73    refreshTableStats,
    74  };
    75  
    76  // tslint:disable-next-line:variable-name
    77  const TableInfoConnected = connect(
    78    mapStateToProps,
    79    mapDispatchToProps,
    80  )(TableInfoComponent);
    81  
    82  export default TableInfoConnected;