github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/ccl/src/views/clusterviz/components/nodeOrLocality/sparklines.tsx (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Licensed as a CockroachDB Enterprise file under the Cockroach Community
     4  // License (the "License"); you may not use this file except in compliance with
     5  // the License. You may obtain a copy of the License at
     6  //
     7  //     https://github.com/cockroachdb/cockroach/blob/master/licenses/CCL.txt
     8  
     9  import React from "react";
    10  
    11  import { CpuSparkline } from "src/views/clusterviz/containers/map/cpuSparkline";
    12  import { QpsSparkline } from "src/views/clusterviz/containers/map/qpsSparkline";
    13  import { DARK_BLUE } from "src/views/shared/colors";
    14  
    15  const SPARKLINE_OFFSET_PX = 36;
    16  
    17  interface SparklinesProps {
    18    nodes: string[];
    19  }
    20  
    21  export class Sparklines extends React.Component<SparklinesProps> {
    22  
    23    renderCPU() {
    24      return (
    25        <g>
    26          <text
    27            fill={DARK_BLUE}
    28            fontFamily="Lato-Bold, Lato"
    29            fontSize="12"
    30            fontWeight="bold"
    31          >
    32            CPU
    33          </text>
    34          {this.renderCPUSparkline()}
    35        </g>
    36      );
    37    }
    38  
    39    renderQPS() {
    40      return (
    41        <g transform="translate(0 19)">
    42          <text
    43            fill={DARK_BLUE}
    44            fontFamily="Lato-Bold, Lato"
    45            fontSize="12"
    46            fontWeight="bold"
    47          >
    48            QPS
    49          </text>
    50          {this.renderQPSSparkline()}
    51        </g>
    52      );
    53    }
    54  
    55    renderQPSSparkline() {
    56      return (
    57        <g transform={`translate(${SPARKLINE_OFFSET_PX} -9)`}>
    58          <QpsSparkline nodes={this.props.nodes} />
    59        </g>
    60      );
    61    }
    62  
    63    renderCPUSparkline() {
    64      return (
    65        <g transform={`translate(${SPARKLINE_OFFSET_PX} -9)`}>
    66          <CpuSparkline nodes={this.props.nodes} />
    67        </g>
    68      );
    69    }
    70  
    71    render() {
    72      return (
    73        <g transform="translate(20 178)" fill="none">
    74          {this.renderCPU()}
    75          {this.renderQPS()}
    76        </g>
    77      );
    78    }
    79  
    80  }