github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/statements/diagnostics/activateDiagnosticsModal.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, { forwardRef, useState, useCallback, useImperativeHandle } from "react";
    12  import { connect } from "react-redux";
    13  import { Action, Dispatch } from "redux";
    14  
    15  import { Anchor, Modal, Text } from "src/components";
    16  import { createStatementDiagnosticsReportAction } from "src/redux/statements";
    17  import { AdminUIState } from "src/redux/state";
    18  import { invalidateStatementDiagnosticsRequests, refreshStatementDiagnosticsRequests } from "src/redux/apiReducers";
    19  import { statementDiagnostics } from "src/util/docs";
    20  import { trackActivateDiagnostics, trackDiagnosticsModalOpen } from "src/util/analytics";
    21  export type ActivateDiagnosticsModalProps = MapDispatchToProps;
    22  
    23  export interface ActivateDiagnosticsModalRef {
    24    showModalFor: (statement: string) => void;
    25  }
    26  
    27  // tslint:disable-next-line:variable-name
    28  const ActivateDiagnosticsModal = (props: ActivateDiagnosticsModalProps, ref: React.RefObject<ActivateDiagnosticsModalRef>) => {
    29    const {activate} = props;
    30    const [visible, setVisible] = useState(false);
    31    const [statement, setStatement] = useState<string>();
    32  
    33    const onOkHandler = useCallback(
    34      () => {
    35        activate(statement);
    36        trackActivateDiagnostics(statement);
    37        setVisible(false);
    38      },
    39      [statement],
    40    );
    41  
    42    const onCancelHandler = useCallback(() => setVisible(false), []);
    43  
    44    useImperativeHandle(ref, () => {
    45      return {
    46        showModalFor: (forwardStatement: string) => {
    47          setStatement(forwardStatement);
    48          trackDiagnosticsModalOpen(forwardStatement);
    49          setVisible(true);
    50        },
    51      };
    52    });
    53  
    54    return (
    55      <Modal
    56        visible={visible}
    57        onOk={onOkHandler}
    58        onCancel={onCancelHandler}
    59        okText="Activate"
    60        cancelText="Cancel"
    61        title="Activate statement diagnostics"
    62      >
    63        <Text>
    64          When you activate statement diagnostics, CockroachDB will wait for the next query that matches this statement
    65          fingerprint.
    66        </Text>
    67        <p/>
    68        <Text>
    69          A download button will appear on the statement list and detail pages when the query is ready.
    70          The download will include EXPLAIN plans, table statistics, and traces. <Anchor href={statementDiagnostics}>Learn more</Anchor>
    71        </Text>
    72      </Modal>
    73    );
    74  };
    75  
    76  interface MapDispatchToProps {
    77    activate: (statement: string) => void;
    78    refreshDiagnosticsReports: () => void;
    79  }
    80  
    81  const mapDispatchToProps = (dispatch: Dispatch<Action, AdminUIState>): MapDispatchToProps => ({
    82    activate: (statement: string) => dispatch(createStatementDiagnosticsReportAction(statement)),
    83    refreshDiagnosticsReports: () => {
    84      dispatch(invalidateStatementDiagnosticsRequests());
    85      dispatch(refreshStatementDiagnosticsRequests());
    86    },
    87  });
    88  
    89  export default connect<null, MapDispatchToProps>(
    90    null,
    91    mapDispatchToProps,
    92    null,
    93    {forwardRef: true},
    94  )(forwardRef(ActivateDiagnosticsModal));