VTAdmin: Support for schema migrations view/create

go/vt/vtadmin/api.go

@@ -59,6 +59,7 @@ import (
 	"vitess.io/vitess/go/vt/vtadmin/rbac"
 	"vitess.io/vitess/go/vt/vtadmin/sort"
 	"vitess.io/vitess/go/vt/vtadmin/vtadminproto"
+	"vitess.io/vitess/go/vt/vtctl/grpcvtctldserver"
 	"vitess.io/vitess/go/vt/vtctl/workflow"
 	"vitess.io/vitess/go/vt/vtenv"
 	"vitess.io/vitess/go/vt/vterrors"
@@ -488,6 +489,31 @@ func (api *API) ApplySchema(ctx context.Context, req *vtadminpb.ApplySchemaReque
 		return nil, err
 	}
 
+	// Parser with default options. New() itself initializes with default MySQL version.
+	parser, err := sqlparser.New(sqlparser.Options{
+		TruncateUILen:  512,
+		TruncateErrLen: 0,
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	// Split the sql statement received from request.
+	sqlParts, err := parser.SplitStatementToPieces(req.Sql)
+	if err != nil {
+		return nil, err
+	}
+
+	req.Request.Sql = sqlParts
+
+	// Set the callerID if not empty.
+	if req.CallerId != "" {
+		req.Request.CallerId = &vtrpcpb.CallerID{Principal: req.CallerId}
+	}
+
+	// Set the default wait replicas timeout.
+	req.Request.WaitReplicasTimeout = protoutil.DurationToProto(grpcvtctldserver.DefaultWaitReplicasTimeout)
+
 	return c.ApplySchema(ctx, req.Request)
 }
 

go/vt/vtadmin/http/schema_migrations.go

@@ -34,19 +34,26 @@ func ApplySchema(ctx context.Context, r Request, api *API) *JSONResponse {
 	decoder := json.NewDecoder(r.Body)
 	defer r.Body.Close()
 
-	var req vtctldatapb.ApplySchemaRequest
-	if err := decoder.Decode(&req); err != nil {
+	var body struct {
+		Sql      string                         `json:"sql"`
+		CallerId string                         `json:"caller_id"`
+		Request  vtctldatapb.ApplySchemaRequest `json:"request"`
+	}
+
+	if err := decoder.Decode(&body); err != nil {
 		return NewJSONResponse(nil, &errors.BadRequest{
 			Err: err,
 		})
 	}
 
 	vars := mux.Vars(r.Request)
-	req.Keyspace = vars["keyspace"]
+	body.Request.Keyspace = vars["keyspace"]
 
 	resp, err := api.server.ApplySchema(ctx, &vtadminpb.ApplySchemaRequest{
 		ClusterId: vars["cluster_id"],
-		Request:   &req,
+		Sql:       body.Sql,
+		CallerId:  body.CallerId,
+		Request:   &body.Request,
 	})
 
 	return NewJSONResponse(resp, err)

proto/vtadmin.proto

@@ -388,7 +388,11 @@ message WorkflowSwitchTrafficRequest {
 
 message ApplySchemaRequest {
     string cluster_id = 1;
-    vtctldata.ApplySchemaRequest request = 2;
+    // Request.Sql will be overriden by this Sql field.
+    string sql = 2;
+    // Request.CallerId will be overriden by this CallerId field.
+    string caller_id = 3;
+    vtctldata.ApplySchemaRequest request = 4;
 }
 
 message CancelSchemaMigrationRequest {

web/vtadmin/src/api/http.ts

@@ -1068,3 +1068,41 @@ export const showVDiff = async ({ clusterID, request }: ShowVDiffParams) => {
 
     return vtadmin.VDiffShowResponse.create(result);
 };
+
+export const fetchSchemaMigrations = async (request: vtadmin.IGetSchemaMigrationsRequest) => {
+    const { result } = await vtfetch(`/api/migrations/`, {
+        body: JSON.stringify(request),
+        method: 'post',
+    });
+
+    const err = vtadmin.GetSchemaMigrationsResponse.verify(result);
+    if (err) throw Error(err);
+
+    return vtadmin.GetSchemaMigrationsResponse.create(result);
+};
+
+export interface ApplySchemaParams {
+    clusterID: string;
+    keyspace: string;
+    callerID: string;
+    sql: string;
+    request: vtctldata.IApplySchemaRequest;
+}
+
+export const applySchema = async ({ clusterID, keyspace, callerID, sql, request }: ApplySchemaParams) => {
+    const body = {
+        sql,
+        caller_id: callerID,
+        request,
+    };
+
+    const { result } = await vtfetch(`/api/migration/${clusterID}/${keyspace}`, {
+        body: JSON.stringify(body),
+        method: 'post',
+    });
+
+    const err = vtctldata.ApplySchemaResponse.verify(result);
+    if (err) throw Error(err);
+
+    return vtctldata.ApplySchemaResponse.create(result);
+};

web/vtadmin/src/components/App.tsx

@@ -45,6 +45,8 @@ import { Transactions } from './routes/Transactions';
 import { Transaction } from './routes/transaction/Transaction';
 import { CreateReshard } from './routes/createWorkflow/CreateReshard';
 import { CreateMaterialize } from './routes/createWorkflow/CreateMaterialize';
+import { SchemaMigrations } from './routes/SchemaMigrations';
+import { CreateSchemaMigration } from './routes/createSchemaMigration/CreateSchemaMigration';
 
 export const App = () => {
     return (
@@ -140,6 +142,16 @@ export const App = () => {
                             <Workflow />
                         </Route>
 
+                        <Route exact path="/migrations">
+                            <SchemaMigrations />
+                        </Route>
+
+                        {!isReadOnlyMode() && (
+                            <Route exact path="/migrations/create">
+                                <CreateSchemaMigration />
+                            </Route>
+                        )}
+
                         <Route path="/transactions">
                             <Transactions />
                         </Route>

web/vtadmin/src/components/NavRail.tsx

@@ -65,6 +65,9 @@ export const NavRail = () => {
                 </ul>
 
                 <ul className={style.navList}>
+                    <li>
+                        <NavRailLink hotkey="M" text="Migrations" to="/migrations" />
+                    </li>
                     <li>
                         <NavRailLink hotkey="T" text="Transactions" to="/transactions" />
                     </li>

web/vtadmin/src/components/routes/createWorkflow/ErrorDialog.tsx → 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;