github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/cluster/components/visualization/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 classNames from "classnames";
    13  
    14  import { ToolTipWrapper } from "src/views/shared/components/toolTip";
    15  
    16  import "./visualizations.styl";
    17  import spinner from "assets/spinner.gif";
    18  
    19  interface VisualizationProps {
    20    title: string;
    21    subtitle?: string;
    22    tooltip?: React.ReactNode;
    23    // If warning or warningTitle exist, they are appended to the tooltip
    24    // and the icon is changed to the warning icon.
    25    warningTitle?: string;
    26    warning?: React.ReactNode;
    27    // If stale is true, the visualization is faded
    28    // and the icon is changed to a warning icon.
    29    stale?: boolean;
    30    // If loading is true a spinner is shown instead of the graph.
    31    loading?: boolean;
    32  }
    33  
    34  /**
    35   * Visualization is a container for a variety of visual elements (such as
    36   * charts). It surrounds a visual element with some standard information, such
    37   * as a title and a tooltip icon.
    38   */
    39  export default class extends React.Component<VisualizationProps, {}> {
    40    render() {
    41      const { title, tooltip, stale } = this.props;
    42      const vizClasses = classNames(
    43        "visualization",
    44        { "visualization--faded": stale || false },
    45      );
    46      const contentClasses = classNames(
    47        "visualization__content",
    48        { "visualization--loading": this.props.loading },
    49      );
    50  
    51      let tooltipNode: React.ReactNode = "";
    52      if (tooltip) {
    53        tooltipNode = (
    54          <div className="visualization__tooltip">
    55            <ToolTipWrapper text={tooltip}>
    56              <div className="visualization__tooltip-hover-area">
    57                <div className="visualization__info-icon">i</div>
    58              </div>
    59            </ToolTipWrapper>
    60          </div>
    61        );
    62      }
    63  
    64      return (
    65        <div className={vizClasses}>
    66          <div className="visualization__header">
    67            <span className="visualization__title">
    68              {title}
    69            </span>
    70            {
    71              this.props.subtitle ?
    72                <span className="visualization__subtitle">{this.props.subtitle}</span>
    73                : null
    74            }
    75            {
    76              tooltipNode
    77            }
    78          </div>
    79          <div className={contentClasses}>
    80            {this.props.loading ? <img className="visualization__spinner" src={spinner} /> :  this.props.children }
    81          </div>
    82        </div>
    83      );
    84    }
    85  }