github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/reports/containers/settings/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 _ from "lodash";
    12  import React from "react";
    13  import { Helmet } from "react-helmet";
    14  import { connect } from "react-redux";
    15  import { withRouter } from "react-router-dom";
    16  
    17  import * as protos from "src/js/protos";
    18  import { refreshSettings } from "src/redux/apiReducers";
    19  import { AdminUIState } from "src/redux/state";
    20  import Loading from "src/views/shared/components/loading";
    21  import "./index.styl";
    22  import { CachedDataReducerState } from "src/redux/cachedDataReducer";
    23  
    24  interface SettingsOwnProps {
    25    settings: CachedDataReducerState<protos.cockroach.server.serverpb.SettingsResponse>;
    26    refreshSettings: typeof refreshSettings;
    27  }
    28  
    29  type SettingsProps = SettingsOwnProps;
    30  
    31  /**
    32   * Renders the Cluster Settings Report page.
    33   */
    34  export class Settings extends React.Component<SettingsProps, {}> {
    35    refresh(props = this.props) {
    36      props.refreshSettings(new protos.cockroach.server.serverpb.SettingsRequest());
    37    }
    38  
    39    componentDidMount() {
    40      // Refresh settings query when mounting.
    41      this.refresh();
    42    }
    43  
    44    renderTable(wantPublic: boolean) {
    45      if (_.isNil(this.props.settings.data)) {
    46        return null;
    47      }
    48  
    49      const { key_values } = this.props.settings.data;
    50      const data: any = _.keys(key_values);
    51  
    52      return (
    53        <table className="settings-table">
    54          <thead>
    55            <tr className="settings-table__row settings-table__row--header">
    56              <th className="settings-table__cell settings-table__cell--header">Setting</th>
    57              <th className="settings-table__cell settings-table__cell--header">Value</th>
    58              <th className="settings-table__cell settings-table__cell--header">Description</th>
    59            </tr>
    60          </thead>
    61          <tbody>
    62            {
    63              _.chain(data)
    64                .filter(key => key_values[key].public === wantPublic)
    65                .sort()
    66                .map((key: number) => (
    67                  <tr key={key} className="settings-table__row">
    68                    <td className="settings-table__cell">{key}</td>
    69                    <td className="settings-table__cell">{key_values[key].value}</td>
    70                    <td className="settings-table__cell">{key_values[key].description}</td>
    71                  </tr>
    72                ))
    73                .value()
    74            }
    75          </tbody>
    76        </table>
    77      );
    78    }
    79  
    80    render() {
    81      return (
    82        <div className="section">
    83          <Helmet title="Cluster Settings | Debug" />
    84          <h1 className="base-heading">Cluster Settings</h1>
    85          <Loading
    86            loading={!this.props.settings.data}
    87            error={this.props.settings.lastError}
    88            render={() => (
    89              <div>
    90                <p className="settings-note">Note that some settings have been redacted for security purposes.</p>
    91                {this.renderTable(true)}
    92                <h3>Reserved settings</h3>
    93                <p className="settings-note">Note that changes to the following settings can yield unpredictable or negative effects on the entire cluster. Use at your own risk.</p>
    94                {this.renderTable(false)}
    95              </div>
    96            )}
    97          />
    98        </div>
    99      );
   100    }
   101  }
   102  
   103  const mapStateToProps = (state: AdminUIState) => ({ // RootState contains declaration for whole state
   104    settings: state.cachedData.settings,
   105  });
   106  
   107  const mapDispatchToProps = {
   108    // actionCreators returns objects with type and payload
   109    refreshSettings,
   110  };
   111  
   112  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Settings));