github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/reports/containers/range/connectionsTable.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 classNames from "classnames";
    12  import _ from "lodash";
    13  import React from "react";
    14  
    15  import * as protos from "src/js/protos";
    16  import { CachedDataReducerState } from "src/redux/cachedDataReducer";
    17  import Loading from "src/views/shared/components/loading";
    18  
    19  interface ConnectionsTableProps {
    20    range: CachedDataReducerState<protos.cockroach.server.serverpb.RangeResponse>;
    21  }
    22  
    23  export default function ConnectionsTable(props: ConnectionsTableProps) {
    24    const { range } = props;
    25    let ids: number[];
    26    let viaNodeID = "";
    27    if (range && !range.inFlight && !_.isNil(range.data)) {
    28      ids = _.chain(_.keys(range.data.responses_by_node_id))
    29        .map(id => parseInt(id, 10))
    30        .sortBy(id => id)
    31        .value();
    32      viaNodeID = ` (via n${range.data.node_id.toString()})`;
    33    }
    34  
    35    return (
    36      <div>
    37        <h2 className="base-heading">Connections {viaNodeID}</h2>
    38        <Loading
    39          loading={!range || range.inFlight}
    40          error={range && range.lastError}
    41          render={() => (
    42            <table className="connections-table">
    43              <tbody>
    44                <tr className="connections-table__row connections-table__row--header">
    45                  <th className="connections-table__cell connections-table__cell--header">Node</th>
    46                  <th className="connections-table__cell connections-table__cell--header">Valid</th>
    47                  <th className="connections-table__cell connections-table__cell--header">Replicas</th>
    48                  <th className="connections-table__cell connections-table__cell--header">Error</th>
    49                </tr>
    50                {
    51                  _.map(ids, id => {
    52                    const resp = range.data.responses_by_node_id[id];
    53                    const rowClassName = classNames(
    54                      "connections-table__row",
    55                      { "connections-table__row--warning": !resp.response || !_.isEmpty(resp.error_message) },
    56                    );
    57                    return (
    58                      <tr key={id} className={rowClassName}>
    59                        <td className="connections-table__cell">n{id}</td>
    60                        <td className="connections-table__cell">
    61                          {resp.response ? "ok" : "error"}
    62                        </td>
    63                        <td className="connections-table__cell">{resp.infos.length}</td>
    64                        <td className="connections-table__cell">{resp.error_message}</td>
    65                      </tr>
    66                    );
    67                  })
    68                }
    69              </tbody>
    70            </table>
    71          )}
    72        />
    73      </div>
    74    );
    75  }