text changed as per suggesstion

GoogleCloudPlatform · Jan 8, 2025 · fc8774d · fc8774d
2 parents 0a71c74 + 6892b44
commit fc8774d
Show file tree

Hide file tree

Showing 24 changed files with 974 additions and 56 deletions.
diff --git a/docs/data-types/mysql.md b/docs/data-types/mysql.md
@@ -146,7 +146,7 @@ It can be manually added to the DDL via an `ALTER TABLE` command.
 
 While Spanner supports check constraints, the Spanner migration tool currently migrates all valid check constraints from MySQL to Spanner.
 
-During the prepare migration phase, if any invalid or unsupported check constraints are identified, the migration process will be halted and will not commence. This is to ensure the integrity and accuracy of the migration. Any identified issues will be clearly displayed in the Issues & Suggestions tab. This allows the user to review all errors in detail. The user will then have the opportunity to manually address these errors by either correcting the invalid check constraints or removing them altogether. This step is crucial to ensure that all constraints are compatible with the target system, thereby preventing potential issues during or after the migration process. Once the necessary corrections have been made, the user can proceed to re-initiate the migration process without any unsupported constraints.  
+While moving from schema to prepare migration phase, if any invalid or unsupported check constraints are identified, the migration process will be halted and will not commence. This is to ensure the integrity and accuracy of the migration. Any identified issues will be clearly displayed in the Issues & Suggestions tab. This allows the user to review all errors in detail. The user will then have the opportunity to manually address these errors by either correcting the invalid check constraints or removing them altogether. This step is crucial to ensure that all constraints are compatible with the target system, thereby preventing potential issues during or after the migration process. Once the necessary corrections have been made, the user can proceed to re-initiate the migration process without any unsupported constraints.  
 
 > Note: As check constraints were introduced with MySQL version 8.0.16, the Spanner migration tool will automatically include these constraints in the Spanner draft for databases using this version or later. For MySQL versions prior to 8.0.16, where check constraints are not supported, users will need to manually incorporate any required check constraints into the Spanner draft. This approach ensures that all necessary constraints are accurately represented in the Spanner environment, tailored to the specific needs of the database.
 

diff --git a/ui/dist/ui/index.html b/ui/dist/ui/index.html
diff --git a/ui/dist/ui/main.7d3a46641d0b6df2.js b/ui/dist/ui/main.7d3a46641d0b6df2.js
diff --git a/ui/dist/ui/main.fec05b021cd4ee86.js b/ui/dist/ui/main.fec05b021cd4ee86.js
diff --git a/ui/dist/ui/polyfills.a7813c59798a2f34.js b/ui/dist/ui/polyfills.a7813c59798a2f34.js
diff --git a/ui/dist/ui/polyfills.c2c201edf5092294.js b/ui/dist/ui/polyfills.c2c201edf5092294.js
diff --git a/ui/dist/ui/runtime.3323ee76cbdea448.js → ui/dist/ui/runtime.30e542cf552662e5.js b/ui/dist/ui/runtime.3323ee76cbdea448.js → ui/dist/ui/runtime.30e542cf552662e5.js
diff --git a/ui/package.json b/ui/package.json
@@ -44,4 +44,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "^5.3.3"
   }
-}
+}
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
 import { FormsModule } from '@angular/forms'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 import { MatChipsModule } from '@angular/material/chips'
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { AppComponent } from './app.component'
 import { HeaderComponent } from './components/header/header.component'
@@ -113,7 +114,8 @@ import { AddNewSequenceComponent } from './components/add-new-sequence/add-new-s
     MatRadioModule,
     ClipboardModule,
     MatProgressSpinnerModule,
-    MatChipsModule
+    MatChipsModule,
+    MatTooltipModule,
   ],
   providers: [
     {

diff --git a/ui/src/app/components/direct-connection/direct-connection.component.ts b/ui/src/app/components/direct-connection/direct-connection.component.ts
@@ -98,7 +98,7 @@ export class DirectConnectionComponent implements OnInit {
           localStorage.setItem(PersistedFormValues.IsConnectionSuccessful, "true")
           this.clickEvent.closeDatabaseLoader()
         },
-        error: (e) => { 
+        error: (e) => {
           this.isTestConnectionSuccessful = false
           this.snackbarService.openSnackBar(e.error, 'Close')
           localStorage.setItem(PersistedFormValues.IsConnectionSuccessful, "false")

diff --git a/ui/src/app/components/object-detail/object-detail.component.html b/ui/src/app/components/object-detail/object-detail.component.html
@@ -169,15 +169,15 @@ <h3 class="title">
             <ng-container matColumnDef="srcDefaultValue" *ngIf="mySqlSource">
               <th mat-header-cell class="table_header" *matHeaderCellDef>Default Value</th>
               <td mat-cell *matCellDef="let element">
-                <div 
-                  class="trimmed-text" 
-                  matTooltip="{{ element.get('srcDefaultValue').value }}" 
+                <div
+                  class="trimmed-text"
+                  matTooltip="{{ element.get('srcDefaultValue').value }}"
                   matTooltipPosition="above">
                   {{ element.get('srcDefaultValue').value }}
                 </div>
               </td>
-            </ng-container>            
- 
+            </ng-container>
+
             <tr mat-header-row *matHeaderRowDef="['srcDatabase']"></tr>
             <tr mat-header-row *matHeaderRowDef="srcDisplayedColumns"></tr>
             <tr mat-row [ngClass]="{ 'scr-column-data-edit-mode': isEditMode }"
@@ -281,7 +281,7 @@ <h3 class="title">
                         </ng-container>
                       </mat-select>
                     </mat-form-field>
-                  </ng-container>                  
+                  </ng-container>
                   <ng-container *ngIf="!isEditMode">
                     <p>{{ element.get('spAutoGen').value.Name !== '' ? element.get('spAutoGen').value.Name : 'None' }}</p>
                   </ng-container>
@@ -409,7 +409,7 @@ <h3 class="title">
       <div class="pk-tab-container">
         <table mat-table [dataSource]="pkDataSource">
           <ng-container matColumnDef="srcDatabase">
-            <th mat-header-cell class="db_name" *matHeaderCellDef colspan="5">{{ srcDbName }}</th>
+            <th mat-header-cell class="db_name" *matHeaderCellDef colspan="6">{{ srcDbName }}</th>
           </ng-container>
 
           <ng-container matColumnDef="spDatabase">
@@ -769,6 +769,127 @@ <h3 class="title">
       </div>
     </mat-tab>
 
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <span>CHECK CONSTRAINTS</span>
+      </ng-template>
+      <div class="cc-tab-container">
+        <table mat-table [dataSource]="ccDataSource">
+          <ng-container matColumnDef="srcDatabase">
+            <th mat-header-cell class="db_name" *matHeaderCellDef [attr.colspan]="3">{{ srcDbName }}</th>
+          </ng-container>
+
+          <ng-container matColumnDef="spDatabase">
+            <th mat-header-cell *matHeaderCellDef class="db_name" [attr.colspan]="4" >
+              <div class="spanner_edit-button">
+                <span>Spanner</span>
+                <div *ngIf="
+                    !isCcEditMode &&
+                    currentObject!.isSpannerNode &&
+                    !currentObject.isDeleted
+                  ">
+                  <button mat-stroked-button color="primary" (click)="toggleCcEdit()">
+                    <mat-icon class="edit-icon">edit</mat-icon>
+                    EDIT
+                  </button>
+                </div>
+              </div>
+            </th>
+          </ng-container>
+
+          <ng-container matColumnDef="srcSno">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>S. No.</th>
+            <td mat-cell *matCellDef="let element"  >
+              <span *ngIf="element.get('srcSno').value != 0">
+              {{ element.get('srcSno').value }}
+             </span>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="srcConstraintName">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Constraint Name</th>
+            <td mat-cell *matCellDef="let element">
+              {{ element.get('srcConstraintName').value }}
+            </td>
+
+          </ng-container>
+
+          <ng-container matColumnDef="srcCondition">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Condition</th>
+            <td mat-cell *matCellDef="let element" matTooltip="{{ element.get('srcCondition').value }}"
+            matTooltipPosition="above" class="overflow-cell">
+
+              {{ element.get('srcCondition').value }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spSno">
+            <th mat-header-cell class="table_header" *matHeaderCellDef>S. No.</th>
+            <td mat-cell *matCellDef="let element">
+              {{ element.get('spSno').value }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spConstraintName">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Constraint Name</th>
+            <td mat-cell *matCellDef="let element">
+              <div *ngIf="isCcEditMode">
+                <input
+                  matInput
+                  class="name_input"
+                  type="text"
+                  [formControl]="element.get('spConstraintName')"
+                  matTooltip="No special characters allowed except underscore."
+                   />
+              </div>
+              <p *ngIf="!isCcEditMode">{{ element.get('spConstraintName').value }}</p>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spConstraintCondition">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Condition</th>
+            <td mat-cell *matCellDef="let element" >
+              <div *ngIf="isCcEditMode">
+                   <textarea name="spConstraintCondition"  matInput
+                   class="condition_input" [formControl]="element.get('spConstraintCondition')"
+                   matTooltip="Enter valid clause for CHECK constraints" id="spConstraintCondition"></textarea>
+              </div>
+              <p *ngIf="!isCcEditMode" matTooltip="{{ element.get('spConstraintCondition').value }}"
+              matTooltipPosition="above" class="overflow-cell">{{ element.get('spConstraintCondition').value }}</p>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="dropButton">
+            <th mat-header-cell class="table_header" *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let element" [ngClass]="{ 'drop-button-left-border': isCcEditMode }">
+              <div class="actions" *ngIf="
+                isCcEditMode && currentObject!.isSpannerNode
+                ">
+                <mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
+                <mat-menu #menu="matMenu" xPosition="before">
+                  <button [disabled]="!isCcEditMode" mat-menu-item (click)="dropCc(element)">
+                    <span>Remove constraint</span>
+                  </button>
+                </mat-menu>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="['srcDatabase', 'spDatabase']"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedCCColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedCCColumns"></tr>
+        </table>
+
+        <div *ngIf="isCcEditMode" class="add-cc-column">
+          <button mat-button color="primary" class="add-column-btn" type="button" (click)="addCcColumn()">
+            <mat-icon>add</mat-icon>
+            Add Constraint
+          </button>
+        </div>
+
+      </div>
+    </mat-tab>
+
     <mat-tab *ngIf="currentObject!.isSpannerNode && !currentObject!.isDeleted">
       <ng-template mat-tab-label>
         <span>SQL</span>
@@ -929,7 +1050,7 @@ <h3 class="title">
             </ng-container>
           </div>
         </td>
-      </ng-container>      
+      </ng-container>
       <ng-container matColumnDef="spSkipRangeMin">
         <th mat-header-cell class="table_header" *matHeaderCellDef>Skip Range Min</th>
         <td mat-cell *matCellDef="let element">
@@ -980,7 +1101,7 @@ <h3 class="title">
       <tr mat-header-row *matHeaderRowDef="sequenceDisplayedColumns"></tr>
       <tr mat-row class="sequence-data-row" *matRowDef="let row; columns: sequenceDisplayedColumns"></tr>
     </table>
-    
+
   </div>
 
   <div class="save-edits">
@@ -1004,6 +1125,15 @@ <h3 class="title">
         CANCEL
       </button>
     </div>
+    <div class="save-button" *ngIf="isCcEditMode && (interleaveParentName !== null ? currentTabIndex === 4:currentTabIndex === 3)">
+      <button mat-raised-button color="primary" (click)="saveCc()" [disabled]="!ccArray.valid" >
+        SAVE & CONVERT
+      </button>
+      <button class="cancel-button" mat-raised-button color="primary" (click)="toggleCcEdit()"
+        *ngIf="currentObject!.isSpannerNode">
+        CANCEL
+      </button>
+    </div>
     <div class="save-button" *ngIf="isFkEditMode && currentTabIndex === 2">
       <button mat-raised-button color="primary" (click)="saveFk()">SAVE & CONVERT</button>
       <button class="cancel-button" mat-raised-button color="primary" (click)="toggleFkEdit()"
@@ -1028,4 +1158,4 @@ <h3 class="title">
       </button>
     </div>
   </div>
-</div>
+</div>
diff --git a/ui/src/app/components/object-detail/object-detail.component.scss b/ui/src/app/components/object-detail/object-detail.component.scss
@@ -88,6 +88,7 @@
   }
 }
 .add-pk-column,
+.add-cc-column,
 .add-column {
   margin-left: 50%;
   padding: 10px;
@@ -106,6 +107,7 @@
 .column-tab-container,
 .fk-tab-container,
 .pk-tab-container,
+.cc-tab-container,
 .index-tab-container,
 .sequence-tab-container {
   height: 84%;
@@ -209,7 +211,7 @@
   .mat-column-srcColMaxLength {
     min-width: 100px;
   }
-  
+
   .mat-column-spSequenceKind{
     min-width: 250px;
   }
@@ -329,4 +331,11 @@ tr.mat-mdc-row {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}
+.overflow-cell {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,4 +44,4 @@ @@
         "karma-jasmine-html-reporter": "~2.1.0",
         "typescript": "^5.3.3"
       }
-    }
+    }