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

     1  import React, { useState } from 'react';
     2  import Dropdown from '../../dropdown/Dropdown';
     3  import MenuItem from '../../dropdown/MenuItem';
     4  import { Icons } from '../../Icon';
     5  import Toggle from '../../toggle/Toggle';
     6  import { useValidateKeyspace, useValidateSchemaKeyspace, useValidateVersionKeyspace } from '../../../hooks/api';
     7  import KeyspaceAction from './KeyspaceAction';
     8  
     9  interface KeyspaceActionsProps {
    10      keyspace: string;
    11      clusterID: string;
    12  }
    13  
    14  const KeyspaceActions: React.FC<KeyspaceActionsProps> = ({ keyspace, clusterID }) => {
    15      const [currentDialog, setCurrentDialog] = useState<string>('');
    16      const closeDialog = () => setCurrentDialog('');
    17  
    18      const [pingTablets, setPingTablets] = useState(false);
    19      const validateKeyspaceMutation = useValidateKeyspace({ keyspace, clusterID, pingTablets });
    20  
    21      const validateSchemaKeyspaceMutation = useValidateSchemaKeyspace({ keyspace, clusterID });
    22  
    23      const validateVersionKeyspaceMutation = useValidateVersionKeyspace({ keyspace, clusterID });
    24  
    25      return (
    26          <div className="w-min inline-block">
    27              <Dropdown dropdownButton={Icons.info} position="bottom-right">
    28                  <MenuItem onClick={() => setCurrentDialog('Validate Keyspace')}>Validate Keyspace</MenuItem>
    29                  <MenuItem onClick={() => setCurrentDialog('Validate Schema')}>Validate Schema</MenuItem>
    30                  <MenuItem onClick={() => setCurrentDialog('Validate Version')}>Validate Version</MenuItem>
    31              </Dropdown>
    32              <KeyspaceAction
    33                  title="Validate Keyspace"
    34                  description={`Validates that all nodes reachable from keyspace "${keyspace}" are consistent.`}
    35                  confirmText="Validate"
    36                  loadingText="Validating"
    37                  mutation={validateKeyspaceMutation}
    38                  successText="Validated keyspace"
    39                  errorText="Error validating keyspace"
    40                  closeDialog={closeDialog}
    41                  isOpen={currentDialog === 'Validate Keyspace'}
    42                  body={
    43                      <div className="flex justify-between items-center w-full p-4 border border-vtblue rounded-md">
    44                          <div className="mr-2">
    45                              <h5 className="font-medium m-0 mb-2">Ping Tablets</h5>
    46                              <p className="m-0 text-sm">
    47                                  If enabled, all tablets will also be pinged during the validation process.
    48                              </p>
    49                          </div>
    50                          <Toggle enabled={pingTablets} onChange={() => setPingTablets(!pingTablets)} />
    51                      </div>
    52                  }
    53                  successBody={
    54                      <div className="text-sm">
    55                          {validateKeyspaceMutation.data && validateKeyspaceMutation.data.results.length === 0 && (
    56                              <div className="text-sm">No validation errors found.</div>
    57                          )}
    58                          {validateKeyspaceMutation.data && validateKeyspaceMutation.data.results.length > 0 && (
    59                              <ul>
    60                                  {validateKeyspaceMutation.data &&
    61                                      validateKeyspaceMutation.data.results.map((res, i) => (
    62                                          <li className="text-sm" key={`keyspace_validation_result_${i}`}>
    63                                              • {res}
    64                                          </li>
    65                                      ))}
    66                              </ul>
    67                          )}
    68                      </div>
    69                  }
    70              />
    71              <KeyspaceAction
    72                  title="Validate Schema"
    73                  confirmText="Validate"
    74                  loadingText="Validating"
    75                  mutation={validateSchemaKeyspaceMutation}
    76                  successText="Validated schemas in keyspace"
    77                  errorText="Error validating schemas in keyspace"
    78                  closeDialog={closeDialog}
    79                  isOpen={currentDialog === 'Validate Schema'}
    80                  body={
    81                      <div className="text-sm mt-3">
    82                          Validates that the schema on the primary tablet for shard 0 matches the schema on all of the
    83                          other tablets in the keyspace <span className="font-mono bg-gray-300">{keyspace}</span>.
    84                      </div>
    85                  }
    86                  successBody={
    87                      <div className="text-sm">
    88                          {validateSchemaKeyspaceMutation.data &&
    89                              validateSchemaKeyspaceMutation.data.results.length === 0 && (
    90                                  <div className="text-sm">No schema validation errors found.</div>
    91                              )}
    92                          {validateSchemaKeyspaceMutation.data && validateSchemaKeyspaceMutation.data.results.length > 0 && (
    93                              <ul>
    94                                  {validateSchemaKeyspaceMutation.data &&
    95                                      validateSchemaKeyspaceMutation.data.results.map((res, i) => (
    96                                          <li className="text-sm" key={`schema_keyspace_validation_result_${i}`}>
    97                                              • {res}
    98                                          </li>
    99                                      ))}
   100                              </ul>
   101                          )}
   102                      </div>
   103                  }
   104              />
   105              <KeyspaceAction
   106                  title="Validate Version"
   107                  confirmText="Validate"
   108                  loadingText="Validating"
   109                  mutation={validateVersionKeyspaceMutation}
   110                  successText={`Validated versions of all tablets in keyspace ${keyspace}`}
   111                  errorText={`Error validating versions in keyspace ${keyspace}`}
   112                  closeDialog={closeDialog}
   113                  isOpen={currentDialog === 'Validate Version'}
   114                  body={
   115                      <div className="text-sm mt-3">
   116                          Validates that the version on the primary of shard 0 matches all of the other tablets in the
   117                          keyspace <span className="font-mono bg-gray-300">{keyspace}</span>.
   118                      </div>
   119                  }
   120                  successBody={
   121                      <div className="text-sm">
   122                          {validateVersionKeyspaceMutation.data &&
   123                              validateVersionKeyspaceMutation.data.results.length === 0 && (
   124                                  <div className="text-sm">No version validation errors found.</div>
   125                              )}
   126                          {validateVersionKeyspaceMutation.data &&
   127                              validateVersionKeyspaceMutation.data.results.length > 0 && (
   128                                  <ul>
   129                                      {validateVersionKeyspaceMutation.data &&
   130                                          validateVersionKeyspaceMutation.data.results.map((res, i) => (
   131                                              <li className="text-sm" key={`schema_keyspace_validation_result_${i}`}>
   132                                                  • {res}
   133                                              </li>
   134                                          ))}
   135                                  </ul>
   136                              )}
   137                      </div>
   138                  }
   139              />
   140          </div>
   141      );
   142  };
   143  
   144  export default KeyspaceActions;