From ddc420a603c7a3a1e09ed176db550765882fff82 Mon Sep 17 00:00:00 2001
From: Noble Mittal <noblemittal@outlook.com>
Date: Mon, 4 Nov 2024 20:10:41 +0530
Subject: [PATCH] refac: Move error_dialog to common components

Signed-off-by: Noble Mittal <noblemittal@outlook.com>
---
 .../createWorkflow => dialog}/ErrorDialog.tsx |  4 +-
 .../components/routes/SchemaMigrations.tsx    | 64 +++++++++++++------
 .../CreateSchemaMigration.module.scss         | 10 ++-
 .../CreateSchemaMigration.tsx                 |  8 +--
 .../createWorkflow/CreateMaterialize.tsx      |  2 +-
 .../createWorkflow/CreateMoveTables.tsx       |  2 +-
 .../routes/createWorkflow/CreateReshard.tsx   |  2 +-
 7 files changed, 60 insertions(+), 32 deletions(-)
 rename web/vtadmin/src/components/{routes/createWorkflow => dialog}/ErrorDialog.tsx (94%)

diff --git a/web/vtadmin/src/components/routes/createWorkflow/ErrorDialog.tsx b/web/vtadmin/src/components/dialog/ErrorDialog.tsx
similarity index 94%
rename from web/vtadmin/src/components/routes/createWorkflow/ErrorDialog.tsx
rename to web/vtadmin/src/components/dialog/ErrorDialog.tsx
index 25ac5dedb0b..087876e4cd2 100644
--- a/web/vtadmin/src/components/routes/createWorkflow/ErrorDialog.tsx
+++ b/web/vtadmin/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
index f60b29ef09e..7ad7482be06 100644
--- 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
index a23f0a5db26..51f5fdca04e 100644
--- 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,7 +14,8 @@
  * 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);
@@ -22,3 +23,8 @@
     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
index 50686faef95..03354694d92 100644
--- 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}
@@ -253,7 +253,7 @@ export const CreateSchemaMigration = () => {
                 {mutation.isError && !mutation.isLoading && (
                     <ErrorDialog
                         errorDescription={mutation.error.message}
-                        errorTitle="Error Creating Workflow"
+                        errorTitle="Error Creating Schema Migration Request"
                         isOpen={errorDialogOpen}
                         onClose={() => {
                             setErrorDialogOpen(false);
diff --git a/web/vtadmin/src/components/routes/createWorkflow/CreateMaterialize.tsx b/web/vtadmin/src/components/routes/createWorkflow/CreateMaterialize.tsx
index c5d688a1fb7..81447cd0e6d 100644
--- 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
index bca84cda4fa..1852d85b848 100644
--- 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
index 4977c59e46b..05a33825174 100644
--- 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;