Use URLParams for selecting the keyspace and fix alignment

Signed-off-by: Noble Mittal <[email protected]>
vitessio · Nov 13, 2024 · fefdb5d · fefdb5d
1 parent ee0b786
commit fefdb5d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/web/vtadmin/src/components/routes/SchemaMigrations.tsx b/web/vtadmin/src/components/routes/SchemaMigrations.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useKeyspaces, useSchemaMigrations } from '../../hooks/api';
 import { DataCell } from '../dataTable/DataCell';
 import { DataTable } from '../dataTable/DataTable';
@@ -31,15 +31,19 @@ import { formatSchemaMigrationStatus } from '../../util/schemaMigrations';
 import { Link } from 'react-router-dom';
 import { TabletLink } from '../links/TabletLink';
 import { formatAlias } from '../../util/tablets';
+import { useURLQuery } from '../../hooks/useURLQuery';
 
 const COLUMNS = ['UUID', 'Status', 'DDL Action', 'Timestamps', 'Stage', 'Progress'];
 
 export const SchemaMigrations = () => {
     useDocumentTitle('Schema Migrations');
 
-    const keyspacesQuery = useKeyspaces();
+    const { query, replaceQuery } = useURLQuery();
+    const urlKeyspace = query['keyspace'];
+    const urlCluster = query['cluster'];
 
-    const { data: keyspaces = [] } = keyspacesQuery;
+    const keyspacesQuery = useKeyspaces();
+    const { data: keyspaces = [], ...ksQuery } = keyspacesQuery;
 
     const [selectedKeyspace, setSelectedKeypsace] = useState<vtadmin.Keyspace | null | undefined>();
 
@@ -60,6 +64,32 @@ export const SchemaMigrations = () => {
 
     const schemaMigrations = schemaMigrationsQuery.data ? schemaMigrationsQuery.data.schema_migrations : [];
 
+    const handleKeyspaceChange = (ks: vtadmin.Keyspace | null | undefined) => {
+        setSelectedKeypsace(ks);
+
+        if (ks) {
+            replaceQuery({ keyspace: ks.keyspace?.name, cluster: ks.cluster?.id });
+        } else {
+            replaceQuery({ keyspace: undefined, cluster: undefined });
+        }
+    };
+
+    useEffect(() => {
+        if (urlKeyspace && urlCluster) {
+            const keyspace = keyspaces.find(
+                (ks) => ks.cluster?.id === String(urlCluster) && ks.keyspace?.name === String(urlKeyspace)
+            );
+
+            if (keyspace) {
+                setSelectedKeypsace(keyspace);
+            } else if (!ksQuery.isLoading) {
+                replaceQuery({ keyspace: undefined, cluster: undefined });
+            }
+        } else {
+            setSelectedKeypsace(undefined);
+        }
+    }, [urlKeyspace, urlCluster, keyspaces, ksQuery.isLoading, replaceQuery]);
+
     const renderRows = (rows: vtadmin.ISchemaMigration[]) => {
         return rows.map((row) => {
             const migrationInfo = row.schema_migration;
@@ -91,7 +121,7 @@ export const SchemaMigrations = () => {
                         <div>{formatSchemaMigrationStatus(migrationInfo)}</div>
                     </DataCell>
                     <DataCell>{migrationInfo.ddl_action ? migrationInfo.ddl_action : '-'}</DataCell>
-                    <DataCell>
+                    <DataCell className="items-end flex flex-col">
                         {migrationInfo.added_at && (
                             <div className="text-sm font-sans whitespace-nowrap">
                                 <span className="text-secondary">Added </span>
@@ -147,7 +177,7 @@ export const SchemaMigrations = () => {
                         inputClassName="block w-full"
                         items={keyspaces}
                         label="Keyspace"
-                        onChange={(ks) => setSelectedKeypsace(ks)}
+                        onChange={(ks) => handleKeyspaceChange(ks)}
                         placeholder={
                             keyspacesQuery.isLoading
                                 ? 'Loading keyspaces...'

diff --git a/web/vtadmin/src/components/routes/createSchemaMigration/CreateSchemaMigration.tsx b/web/vtadmin/src/components/routes/createSchemaMigration/CreateSchemaMigration.tsx
@@ -45,16 +45,16 @@ interface FormData {
 const DEFAULT_FORM_DATA: FormData = {
     clusterID: '',
     keyspace: '',
-    // Default DDL Strategy set to "direct".
-    ddlStrategy: 'direct',
+    // Default DDL Strategy set to "vitess".
+    ddlStrategy: 'vitess',
     sql: '',
     batchSize: 0,
     callerID: '',
     migrationContext: '',
     uuidList: '',
 };
 
-const DDL_STRATEGY_HELP_TEXT = `Online DDL strategy, compatible with @@ddl_strategy session variable (examples: 'gh-ost', 'pt-osc', 'gh-ost --max-load=Threads_running=100'. (default "direct")`;
+const DDL_STRATEGY_HELP_TEXT = `Online DDL strategy, compatible with @@ddl_strategy session variable (default "vitess")`;
 
 const MIGRATION_CONTEXT_HELP_TEXT =
     'For Online DDL, optionally supply a custom unique string used as context for the migration(s) in this command. By default a unique context is auto-generated by Vitess.';
@@ -93,7 +93,11 @@ export const CreateSchemaMigration = () => {
         {
             onSuccess: () => {
                 success(`Successfully created schema migration request.`, { autoClose: 1600 });
-                history.push(`/migrations`);
+
+                history.push({
+                    pathname: `/migrations`,
+                    search: `?keyspace=${formData.keyspace}&cluster=${formData.clusterID}`,
+                });
             },
             onError: () => {
                 setErrorDialogOpen(true);