github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/components/sql/highlight.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 * as hljs from "highlight.js";
    12  import React from "react";
    13  import * as protos from "src/js/protos";
    14  
    15  interface SqlBoxProps {
    16    value: string;
    17    zone?: protos.cockroach.server.serverpb.DatabaseDetailsResponse;
    18  }
    19  
    20  export class Highlight extends React.Component<SqlBoxProps> {
    21  
    22    preNode: React.RefObject<HTMLPreElement> = React.createRef();
    23  
    24    shouldComponentUpdate(newProps: SqlBoxProps) {
    25      return newProps.value !== this.props.value;
    26    }
    27  
    28    componentDidMount() {
    29      hljs.configure({
    30        tabReplace: "  ",
    31      });
    32      hljs.highlightBlock(this.preNode.current);
    33    }
    34  
    35    componentDidUpdate() {
    36      hljs.highlightBlock(this.preNode.current);
    37    }
    38  
    39    renderZone = () => {
    40      const { zone } = this.props;
    41      const zoneConfig = zone.zone_config;
    42      return (
    43        <span className="sql-highlight hljs">
    44          <span className="hljs-keyword">CONFIGURE ZONE USING</span>
    45          <br />
    46          <span className="hljs-label">range_min_bytes = </span>
    47          <span className="hljs-built_in">{`${String(zoneConfig.range_min_bytes)},`}</span>
    48          <br />
    49          <span className="hljs-label">range_max_bytes = </span>
    50          <span className="hljs-built_in">{`${String(zoneConfig.range_max_bytes)},`}</span>
    51          <br />
    52          <span className="hljs-label">gc.ttlseconds = </span>
    53          <span className="hljs-built_in">{`${zoneConfig.gc.ttl_seconds},`}</span>
    54          <br />
    55          <span className="hljs-label">num_replicas = </span>
    56          <span className="hljs-built_in">{`${zoneConfig.num_replicas},`}</span>
    57          <br />
    58          <span className="hljs-label">constraints = ['</span>
    59          <span className="hljs-built_in">{String(zoneConfig.constraints)}</span>
    60          '],
    61          <br />
    62          <span className="hljs-label">lease_preferences = [['</span>
    63          <span className="hljs-built_in">{String(zoneConfig.lease_preferences)}</span>
    64          ']]
    65        </span>
    66      );
    67    }
    68  
    69    render() {
    70      const { value, zone } = this.props;
    71      return (
    72        <>
    73          <span className="sql-highlight" ref={this.preNode}>
    74            {value}
    75          </span>
    76          {zone && (
    77            <>
    78              <div className="higlight-divider" />
    79              {this.renderZone()}
    80            </>
    81          )}
    82        </>
    83      );
    84    }
    85  }