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

     1  /**
     2   * Copyright 2022 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import { useState } from 'react';
    18  import { UseMutationResult } from 'react-query';
    19  
    20  import {
    21      useCreateShard,
    22      useKeyspace,
    23      useRebuildKeyspaceGraph,
    24      useReloadSchema,
    25      useRemoveKeyspaceCell,
    26  } from '../../../hooks/api';
    27  import ActionPanel from '../../ActionPanel';
    28  import { Label } from '../../inputs/Label';
    29  import { QueryLoadingPlaceholder } from '../../placeholders/QueryLoadingPlaceholder';
    30  import { success, warn } from '../../Snackbar';
    31  import { TextInput } from '../../TextInput';
    32  import Toggle from '../../toggle/Toggle';
    33  
    34  interface Props {
    35      clusterID: string;
    36      name: string;
    37  }
    38  
    39  export const Advanced: React.FC<Props> = ({ clusterID, name }) => {
    40      const kq = useKeyspace({ clusterID, name });
    41      const { data: keyspace } = kq;
    42  
    43      // RebuildKeyspaceGraph params
    44      const [cells, setCells] = useState('');
    45      const [allowPartial, setAllowPartial] = useState(false);
    46  
    47      // RemoveKeyspaceCell params
    48      const [force, setForce] = useState(false);
    49      const [recursive, setRecursive] = useState(false);
    50      const [removeKeyspaceCellCell, setRemoveKeyspaceCellCell] = useState('');
    51  
    52      // CreateShard params
    53      const [includeParent, setIncludeParent] = useState(false);
    54      const [forceCreateShard, setForceCreateShard] = useState(false);
    55      const [shardName, setShardName] = useState('');
    56  
    57      const reloadSchemaMutation = useReloadSchema(
    58          {
    59              clusterIDs: [clusterID],
    60              keyspaces: [name],
    61          },
    62          {
    63              onError: (error) => warn(`There was an error reloading the schemas in the ${name} keyspace: ${error}`),
    64              onSuccess: () => {
    65                  success(`Successfully reloaded schemas in the ${name} keyspace.`, { autoClose: 1600 });
    66              },
    67          }
    68      );
    69  
    70      const rebuildKeyspaceGraphMutation = useRebuildKeyspaceGraph(
    71          {
    72              keyspace: name,
    73              clusterID,
    74              allowPartial,
    75              cells,
    76          },
    77          {
    78              onError: (error) =>
    79                  warn(`There was an error rebuilding the keyspace graph in the ${name} keyspace: ${error}`),
    80              onSuccess: () => {
    81                  success(`Successfully rebuilt the keyspace graph in the ${name} keyspace.`, { autoClose: 1600 });
    82              },
    83          }
    84      );
    85  
    86      const removeKeyspaceCellMutation = useRemoveKeyspaceCell(
    87          {
    88              keyspace: name,
    89              clusterID,
    90              force,
    91              recursive,
    92              cell: removeKeyspaceCellCell,
    93          },
    94          {
    95              onError: (error) =>
    96                  warn(`There was an error removing cell ${removeKeyspaceCellCell} from keyspace ${name}: ${error}`),
    97              onSuccess: () => {
    98                  success(`Successfully removed cell ${removeKeyspaceCellCell} from the ${name} keyspace.`, {
    99                      autoClose: 1600,
   100                  });
   101              },
   102          }
   103      );
   104  
   105      const createShardMutation = useCreateShard(
   106          {
   107              keyspace: name,
   108              clusterID,
   109              force,
   110              include_parent: includeParent,
   111              shard_name: shardName,
   112          },
   113          {
   114              onError: (error) => warn(`There was an error creating shard ${shardName} in keyspace ${name}: ${error}`),
   115              onSuccess: () => {
   116                  success(`Successfully created shard ${shardName} in the ${name} keyspace.`, {
   117                      autoClose: 1600,
   118                  });
   119              },
   120          }
   121      );
   122  
   123      return (
   124          <div className="pt-4">
   125              <div className="my-8">
   126                  <h3 className="mb-4">Rebuild and Reload</h3>
   127                  <QueryLoadingPlaceholder query={kq} />
   128                  {keyspace && (
   129                      <div>
   130                          <ActionPanel
   131                              description={
   132                                  <>
   133                                      Reloads the schema on all the tablets, except the primary tablet, in the{' '}
   134                                      <span className="font-bold">{name}</span> keyspace.
   135                                  </>
   136                              }
   137                              documentationLink="https://vitess.io/docs/13.0/reference/programs/vtctl/schema-version-permissions/#reloadschemakeyspace"
   138                              loadedText="Reload Schema"
   139                              loadingText="Reloading Schema..."
   140                              mutation={reloadSchemaMutation as UseMutationResult}
   141                              title="Reload Schema"
   142                          />
   143                          <ActionPanel
   144                              description={
   145                                  <>
   146                                      Rebuilds the serving data for the <span className="font-bold">{name}</span>{' '}
   147                                      keyspace. This command may trigger an update to all connected clients.
   148                                  </>
   149                              }
   150                              documentationLink="https://vitess.io/docs/14.0/reference/programs/vtctl/keyspaces/#rebuildkeyspacegraph"
   151                              loadedText="Rebuild Keyspace Graph"
   152                              loadingText="Rebuilding keyspace graph..."
   153                              mutation={rebuildKeyspaceGraphMutation as UseMutationResult}
   154                              title="Rebuild Keyspace Graph"
   155                              body={
   156                                  <>
   157                                      <p className="text-base">
   158                                          <strong>Cells</strong> <br />
   159                                          Specify a comma-separated list of cells to update:
   160                                      </p>
   161                                      <div className="w-1/3">
   162                                          <TextInput value={cells} onChange={(e) => setCells(e.target.value)} />
   163                                      </div>
   164                                      <div className="mt-2">
   165                                          <div className="flex items-center">
   166                                              <Toggle
   167                                                  className="mr-2"
   168                                                  enabled={allowPartial}
   169                                                  onChange={() => setAllowPartial(!allowPartial)}
   170                                              />
   171                                              <Label label="Allow Partial" />
   172                                          </div>
   173                                          When set, allows a SNAPSHOT keyspace to serve with an incomplete set of shards.
   174                                          It is ignored for all other keyspace types.
   175                                      </div>
   176                                  </>
   177                              }
   178                          />
   179                      </div>
   180                  )}
   181              </div>
   182              <div className="my-8">
   183                  <h3 className="mb-4">Change</h3>
   184                  {keyspace && (
   185                      <div>
   186                          <ActionPanel
   187                              description={
   188                                  <>
   189                                      Remove a cell from the Cells list for all shards in the{' '}
   190                                      <span className="font-bold">{name}</span> keyspace, and the SrvKeyspace for the
   191                                      keyspace in that cell.
   192                                  </>
   193                              }
   194                              documentationLink="https://vitess.io/docs/14.0/reference/programs/vtctl/keyspaces/#removekeyspacecell"
   195                              loadedText="Remove Keyspace Cell"
   196                              loadingText="Removing keyspace cell..."
   197                              mutation={removeKeyspaceCellMutation as UseMutationResult}
   198                              title="Remove Keyspace Cell"
   199                              disabled={removeKeyspaceCellCell === ''}
   200                              body={
   201                                  <>
   202                                      <Label label="Cell" aria-required required />
   203                                      <div className="w-1/3">
   204                                          <TextInput
   205                                              required={true}
   206                                              value={removeKeyspaceCellCell}
   207                                              onChange={(e) => setRemoveKeyspaceCellCell(e.target.value)}
   208                                          />
   209                                      </div>
   210                                      <div className="mt-2">
   211                                          <div className="flex items-center">
   212                                              <Toggle
   213                                                  className="mr-2"
   214                                                  enabled={force}
   215                                                  onChange={() => setForce(!force)}
   216                                              />
   217                                              <Label label="Force" />
   218                                          </div>
   219                                          When set, proceeds even if the cell's topology service cannot be reached. The
   220                                          assumption is that you turned down the entire cell, and just need to update the
   221                                          global topo data.
   222                                      </div>
   223                                      <div className="mt-2">
   224                                          <div className="flex items-center">
   225                                              <Toggle
   226                                                  className="mr-2"
   227                                                  enabled={recursive}
   228                                                  onChange={() => setRecursive(!recursive)}
   229                                              />
   230                                              <Label label="Recursive" />
   231                                          </div>
   232                                          When set, also deletes all tablets in that cell belonging to the specified
   233                                          keyspace.
   234                                      </div>
   235                                  </>
   236                              }
   237                          />
   238                          <ActionPanel
   239                              description={
   240                                  <>
   241                                      Creates a new shard in the <span className="font-bold">{name}</span> keyspace.
   242                                  </>
   243                              }
   244                              documentationLink="https://vitess.io/docs/14.0/reference/programs/vtctl/shards/#createshard"
   245                              loadedText="Create Shard"
   246                              loadingText="Creating shard..."
   247                              mutation={createShardMutation as UseMutationResult}
   248                              title="Create Shard"
   249                              disabled={shardName === ''}
   250                              body={
   251                                  <>
   252                                      <Label label="Shard Name" aria-required required />
   253                                      <br />
   254                                      <div className="mb-2">The name of the shard to create. E.g. "-" or "-80".</div>
   255                                      <div className="w-1/3">
   256                                          <TextInput
   257                                              required={true}
   258                                              value={shardName}
   259                                              onChange={(e) => setShardName(e.target.value)}
   260                                          />
   261                                      </div>
   262                                      <div className="mt-2">
   263                                          <div className="flex items-center">
   264                                              <Toggle
   265                                                  className="mr-2"
   266                                                  enabled={forceCreateShard}
   267                                                  onChange={() => setForceCreateShard(!forceCreateShard)}
   268                                              />
   269                                              <Label label="Force" />
   270                                          </div>
   271                                          When set, proceeds with the command even if the keyspace already exists.
   272                                      </div>
   273                                      <div className="mt-2">
   274                                          <div className="flex items-center">
   275                                              <Toggle
   276                                                  className="mr-2"
   277                                                  enabled={includeParent}
   278                                                  onChange={() => setIncludeParent(!recursive)}
   279                                              />
   280                                              <Label label="Include Parent" />
   281                                          </div>
   282                                          When set, creates the parent keyspace if it doesn't already exist.
   283                                      </div>
   284                                  </>
   285                              }
   286                          />
   287                      </div>
   288                  )}
   289              </div>
   290          </div>
   291      );
   292  };