refac: Move error_dialog to common components

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

Hide file tree

Showing 7 changed files with 59 additions and 31 deletions.
diff --git a/...nts/routes/createWorkflow/ErrorDialog.tsx → ...min/src/components/dialog/ErrorDialog.tsx b/...nts/routes/createWorkflow/ErrorDialog.tsx → ...min/src/components/dialog/ErrorDialog.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import Dialog from '../../dialog/Dialog';
-import { Icon, Icons } from '../../Icon';
+import Dialog from './Dialog';
+import { Icon, Icons } from '../Icon';
 
 export interface ErrorDialogProps {
     errorTitle?: string;

diff --git a/web/vtadmin/src/components/routes/SchemaMigrations.tsx b/web/vtadmin/src/components/routes/SchemaMigrations.tsx
@@ -29,8 +29,10 @@ import { formatDateTime } from '../../util/time';
 import { ReadOnlyGate } from '../ReadOnlyGate';
 import { formatSchemaMigrationStatus } from '../../util/schemaMigrations';
 import { Link } from 'react-router-dom';
+import { TabletLink } from '../links/TabletLink';
+import { formatAlias } from '../../util/tablets';
 
-const COLUMNS = ['UUID', 'Status', 'Shard', 'Started At', 'Added At'];
+const COLUMNS = ['UUID', 'Status', 'DDL Action', 'Timestamps', 'Stage', 'Progress'];
 
 export const SchemaMigrations = () => {
     useDocumentTitle('Schema Migrations');
@@ -64,39 +66,59 @@ export const SchemaMigrations = () => {
 
             if (!migrationInfo) return <></>;
 
-            const shard = selectedKeyspace ? `${selectedKeyspace.keyspace?.name}/${migrationInfo.shard}` : '-';
-
             return (
                 <tr key={migrationInfo.uuid}>
                     <DataCell>
                         <div>{migrationInfo.uuid}</div>
-                    </DataCell>
-                    <DataCell>
-                        <div>{formatSchemaMigrationStatus(migrationInfo)}</div>
-                    </DataCell>
-                    <DataCell>
-                        {selectedKeyspace ? (
+                        <div className="text-sm text-secondary">
+                            Tablet{' '}
+                            <TabletLink alias={formatAlias(migrationInfo.tablet)} clusterID={row.cluster?.id}>
+                                {formatAlias(migrationInfo.tablet)}
+                            </TabletLink>
+                        </div>
+                        <div className="text-sm text-secondary">
+                            Shard{' '}
                             <ShardLink
-                                clusterID={selectedKeyspace.cluster?.id}
-                                keyspace={selectedKeyspace.keyspace?.name}
+                                clusterID={row.cluster?.id}
+                                keyspace={migrationInfo.keyspace}
                                 shard={migrationInfo.shard}
                             >
-                                {shard}
+                                {`${migrationInfo.keyspace}/${migrationInfo.shard}`}
                             </ShardLink>
-                        ) : (
-                            '-'
-                        )}
+                        </div>
                     </DataCell>
                     <DataCell>
-                        <div className="font-sans whitespace-nowrap">
-                            {formatDateTime(migrationInfo.started_at?.seconds)}
-                        </div>
+                        <div>{formatSchemaMigrationStatus(migrationInfo)}</div>
                     </DataCell>
+                    <DataCell>{migrationInfo.ddl_action ? migrationInfo.ddl_action : '-'}</DataCell>
                     <DataCell>
-                        <div className="font-sans whitespace-nowrap">
-                            {formatDateTime(migrationInfo.added_at?.seconds)}
-                        </div>
+                        {migrationInfo.added_at && (
+                            <div className="text-sm font-sans whitespace-nowrap">
+                                <span className="text-secondary">Added </span>
+                                {formatDateTime(migrationInfo.added_at?.seconds)}
+                            </div>
+                        )}
+                        {migrationInfo.requested_at && (
+                            <div className="text-sm font-sans whitespace-nowrap">
+                                <span className="text-secondary">Requested </span>
+                                {formatDateTime(migrationInfo.requested_at?.seconds)}
+                            </div>
+                        )}
+                        {migrationInfo.started_at && (
+                            <div className="text-sm font-sans whitespace-nowrap">
+                                <span className="text-secondary">Started </span>
+                                {formatDateTime(migrationInfo.started_at?.seconds)}
+                            </div>
+                        )}
+                        {migrationInfo.completed_at && (
+                            <div className="text-sm font-sans whitespace-nowrap">
+                                <span className="text-secondary">Completed </span>
+                                {formatDateTime(migrationInfo.completed_at?.seconds)}
+                            </div>
+                        )}
                     </DataCell>
+                    <DataCell>{migrationInfo.stage ? migrationInfo.stage : '-'}</DataCell>
+                    <DataCell>{migrationInfo.progress ? `${migrationInfo.progress}%` : '-'}</DataCell>
                 </tr>
             );
         });

diff --git a/web/vtadmin/src/components/routes/createSchemaMigration/CreateSchemaMigration.module.scss b/web/vtadmin/src/components/routes/createSchemaMigration/CreateSchemaMigration.module.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright 2021 The Vitess Authors.
+ * Copyright 2024 The Vitess Authors.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,11 +14,17 @@
  * limitations under the License.
  */
 .sqlInput {
-    border: solid 1px var(--colorScaffoldingHighlight);
+    border: solid 2px var(--colorDisabled);
+    border-radius: 6px;
     display: block;
     font-family: var(--fontFamilyMonospace);
     line-height: var(--lineHeightBody);
     padding: 0.8rem;
     resize: vertical;
     width: 100%;
 }
+
+.sqlInput:focus {
+    border-color: var(--colorPrimary);
+    outline: none;
+}
diff --git a/web/vtadmin/src/components/routes/createSchemaMigration/CreateSchemaMigration.tsx b/web/vtadmin/src/components/routes/createSchemaMigration/CreateSchemaMigration.tsx
@@ -29,7 +29,7 @@ import { TextInput } from '../../TextInput';
 import { success } from '../../Snackbar';
 import { FormError } from '../../forms/FormError';
 import { vtadmin } from '../../../proto/vtadmin';
-import ErrorDialog from '../createWorkflow/ErrorDialog';
+import ErrorDialog from '../../dialog/ErrorDialog';
 
 interface FormData {
     clusterID: string;
@@ -142,9 +142,9 @@ export const CreateSchemaMigration = () => {
                 <WorkspaceTitle>Create Schema Migration Request</WorkspaceTitle>
             </WorkspaceHeader>
 
-            <ContentContainer className="max-w-screen-sm">
+            <ContentContainer>
                 <form onSubmit={onSubmit}>
-                    <div className="flex flex-row gap-4 flex-wrap">
+                    <div className="flex flex-row gap-4 flex-wrap mb-2">
                         <Select
                             className="block grow min-w-[300px]"
                             disabled={keyspacesQuery.isLoading || !selectedCluster}

diff --git a/web/vtadmin/src/components/routes/createWorkflow/CreateMaterialize.tsx b/web/vtadmin/src/components/routes/createWorkflow/CreateMaterialize.tsx
@@ -31,7 +31,7 @@ import Toggle from '../../toggle/Toggle';
 import { tabletmanagerdata, vtadmin, vtctldata } from '../../../proto/vtadmin';
 import { MultiSelect } from '../../inputs/MultiSelect';
 import { TABLET_TYPES } from '../../../util/tablets';
-import ErrorDialog from './ErrorDialog';
+import ErrorDialog from '../../dialog/ErrorDialog';
 
 interface FormData {
     clusterID: string;

diff --git a/web/vtadmin/src/components/routes/createWorkflow/CreateMoveTables.tsx b/web/vtadmin/src/components/routes/createWorkflow/CreateMoveTables.tsx
@@ -31,7 +31,7 @@ import Toggle from '../../toggle/Toggle';
 import { vtadmin } from '../../../proto/vtadmin';
 import { MultiSelect } from '../../inputs/MultiSelect';
 import { TABLET_TYPES } from '../../../util/tablets';
-import ErrorDialog from './ErrorDialog';
+import ErrorDialog from '../../dialog/ErrorDialog';
 
 interface FormData {
     clusterID: string;

diff --git a/web/vtadmin/src/components/routes/createWorkflow/CreateReshard.tsx b/web/vtadmin/src/components/routes/createWorkflow/CreateReshard.tsx
@@ -31,7 +31,7 @@ import Toggle from '../../toggle/Toggle';
 import { tabletmanagerdata, vtadmin } from '../../../proto/vtadmin';
 import { MultiSelect } from '../../inputs/MultiSelect';
 import { TABLET_TYPES } from '../../../util/tablets';
-import ErrorDialog from './ErrorDialog';
+import ErrorDialog from '../../dialog/ErrorDialog';
 
 interface FormData {
     clusterID: string;