vitess.io/vitess@v0.16.2/web/vtadmin/src/components/routes/tablets/InfoDropdown.tsx (about)

     1  import React, { useState } from 'react';
     2  import { useHealthCheck, usePingTablet, useRefreshState } from '../../../hooks/api';
     3  import Dropdown from '../../dropdown/Dropdown';
     4  import MenuItem from '../../dropdown/MenuItem';
     5  import { Icons } from '../../Icon';
     6  import InfoDialog, { BaseInfoDialogProps } from './InfoDialog';
     7  interface InfoDropdownProps {
     8      alias: string;
     9      clusterID?: string;
    10  }
    11  
    12  const InfoDropdown: React.FC<InfoDropdownProps> = ({ alias, clusterID }) => {
    13      const [currentDialog, setCurrentDialog] = useState('');
    14      const [isOpen, setIsOpen] = useState(false);
    15      const closeDialog = () => setIsOpen(false);
    16  
    17      const openDialog = (key: string) => {
    18          setCurrentDialog(key);
    19          setIsOpen(true);
    20      };
    21  
    22      const dialogConfigs: Record<string, BaseInfoDialogProps> = {
    23          ping: {
    24              useHook: () => usePingTablet({ alias, clusterID }, { enabled: false }),
    25              successDescription: `Successfully reached tablet ${alias} via RPC.`,
    26              errorDescription: `There was an issue pinging tablet ${alias}`,
    27              loadingTitle: `Pinging tablet ${alias}`,
    28              loadingDescription: 'Checking to see if tablet is reachable via RPC...',
    29          },
    30          refresh: {
    31              useHook: () => useRefreshState({ alias, clusterID }, { enabled: false }),
    32              successDescription: `Successfully refreshed tablet ${alias}.`,
    33              errorDescription: `There was an issue refreshing tablet`,
    34              loadingTitle: `Refreshing tablet ${alias}`,
    35              loadingDescription: 'Refreshing tablet record on tablet...',
    36          },
    37          healthcheck: {
    38              useHook: () => useHealthCheck({ alias, clusterID }, { enabled: false }),
    39              successDescription: `Tablet ${alias} looks healthy.`,
    40              errorDescription: `There was an issue running a health check on the tablet`,
    41              loadingTitle: `Running health check`,
    42              loadingDescription: `Running health check on tablet ${alias}`,
    43          },
    44      };
    45  
    46      // Default config is needed to avoid "hook order" inconsistency
    47      // Queries are not executed until dialog is open; no unneccessary queries are executed as a result.
    48  
    49      const defaultConfig = dialogConfigs['ping'];
    50  
    51      return (
    52          <div className="w-min inline-block">
    53              <Dropdown dropdownButton={Icons.info} position="bottom-right">
    54                  <MenuItem onClick={() => openDialog('ping')}>Ping</MenuItem>
    55                  <MenuItem onClick={() => openDialog('refresh')}>Refresh state</MenuItem>
    56                  <MenuItem onClick={() => openDialog('healthcheck')}>Run health check</MenuItem>
    57              </Dropdown>
    58              <InfoDialog isOpen={isOpen} onClose={closeDialog} {...(dialogConfigs[currentDialog] || defaultConfig)} />
    59          </div>
    60      );
    61  };
    62  
    63  export default InfoDropdown;