github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/statements/diagnostics/diagnosticStatusBadge.tsx (about)

     1  // Copyright 2020 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  
    13  import { Badge, Anchor, Tooltip } from "src/components";
    14  import { statementDiagnostics } from "src/util/docs";
    15  import { DiagnosticStatuses } from "./diagnosticStatuses";
    16  import "./diagnosticStatusBadge.styl";
    17  
    18  interface OwnProps {
    19    status: DiagnosticStatuses;
    20    enableTooltip?: boolean;
    21  }
    22  
    23  function mapDiagnosticsStatusToBadge(diagnosticsStatus: DiagnosticStatuses) {
    24    switch (diagnosticsStatus) {
    25      case "READY":
    26        return "success";
    27      case "WAITING FOR QUERY":
    28        return "info";
    29      case "ERROR":
    30        return "danger";
    31      default:
    32        return "info";
    33    }
    34  }
    35  
    36  function mapStatusToDescription(diagnosticsStatus: DiagnosticStatuses) {
    37    switch (diagnosticsStatus) {
    38      case "READY":
    39        return (
    40          <div className="tooltip__table--title">
    41            <p>
    42              {"The most recent "}
    43              <Anchor
    44                href={statementDiagnostics}
    45                target="_blank"
    46              >
    47                diagnostics
    48              </Anchor>
    49              {" for this SQL statement fingerprint are ready to download. Access the full history of diagnostics for the fingerprint in the Statement Details page."}
    50            </p>
    51          </div>
    52        );
    53      case "WAITING FOR QUERY":
    54        return (
    55          <div className="tooltip__table--title">
    56            <p>
    57              CockroachDB is waiting for the next SQL statement that matches this fingerprint.
    58            </p>
    59            <p>
    60              {"When the most recent "}
    61              <Anchor
    62                href={statementDiagnostics}
    63                target="_blank"
    64              >
    65                diagnostics
    66              </Anchor>
    67              {" are ready to download, a link will appear in this row."}
    68            </p>
    69          </div>
    70        );
    71      case "ERROR":
    72        return (
    73          <div>
    74            {"There was an error when attempting to collect diagnostics for this statement. Please try activating again. "}
    75            <Anchor
    76              href={statementDiagnostics}
    77              target="_blank"
    78            >
    79              Learn more
    80            </Anchor>
    81          </div>
    82        );
    83      default:
    84        return "";
    85    }
    86  }
    87  
    88  export function DiagnosticStatusBadge(props: OwnProps) {
    89    const { status, enableTooltip } = props;
    90    const tooltipContent = mapStatusToDescription(status);
    91  
    92    if (!enableTooltip) {
    93      return (
    94        <Badge
    95          text={status}
    96          status={mapDiagnosticsStatusToBadge(status)}
    97        />
    98      );
    99    }
   100  
   101    return (
   102      <Tooltip
   103        title={tooltipContent}
   104        theme="blue"
   105        placement="bottomLeft"
   106      >
   107        <div
   108          className="diagnostic-status-badge__content"
   109        >
   110          <Badge
   111            text={status}
   112            status={mapDiagnosticsStatusToBadge(status)}
   113          />
   114        </div>
   115      </Tooltip>
   116    );
   117  }
   118  
   119  DiagnosticStatusBadge.defaultProps = {
   120    enableTooltip: true,
   121  };