new-ui: Add devDependency - prettier (#1629)

* new-ui: Add devDependency - prettier

* new-ui: update prettier version on Github Action

* new-ui: Update test-node.yaml

* new-ui: Edit test-node.yaml / Makefile

* new-ui: Edit npm install prettier command on test-node workflow

* new-ui: Apply npm run format:write

.github/workflows/test-node.yaml

@@ -20,5 +20,5 @@ jobs:
 
       - name: Run Node test
         run: |
-          npm install --global prettier@2.2.0
+          npm install prettier --prefix ./pkg/new-ui/v1beta1/frontend
           make prettier-check

Makefile

@@ -80,7 +80,7 @@ endif
 
 # Prettier UI format check for Katib v1beta1.
 prettier-check:
-	npm run format:check --prefix pkg/ui/v1beta1/frontend
+	npm run format:check --prefix pkg/new-ui/v1beta1/frontend
 
 # Update boilerplate for the source code.
 update-boilerplate:

pkg/new-ui/v1beta1/frontend/package.json

@@ -61,6 +61,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
+    "prettier": "2.3.2",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/algorithm/setting/setting.component.spec.ts

@@ -8,9 +8,8 @@ describe('SettingComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SettingComponent ]
-    })
-    .compileComponents();
+      declarations: [SettingComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/early-stopping/early-stopping.component.spec.ts

@@ -8,9 +8,8 @@ describe('EarlyStoppingComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ EarlyStoppingComponent ]
-    })
-    .compileComponents();
+      declarations: [EarlyStoppingComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metadata/metadata.component.html

@@ -1,11 +1,11 @@
 <form [formGroup]="metadataForm" class="lib-step-wrapper">
   <div class="flex-column">
-    <mat-form-field appearance="outline" class="step-content ">
+    <mat-form-field appearance="outline" class="step-content">
       <mat-label>Name</mat-label>
       <input formControlName="name" matInput />
     </mat-form-field>
 
-    <mat-form-field appearance="outline" class="step-content ">
+    <mat-form-field appearance="outline" class="step-content">
       <mat-label>Namespace</mat-label>
       <input formControlName="namespace" matInput />
     </mat-form-field>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/metrics-collector/metrics-collector.component.html

@@ -18,14 +18,14 @@
 
     <ng-container [ngSwitch]="formGroup.get('kind').value">
       <ng-container *ngSwitchCase="kind.FILE">
-        <mat-form-field appearance="outline" class="step-content ">
+        <mat-form-field appearance="outline" class="step-content">
           <mat-label>Metrics file</mat-label>
           <input formControlName="metricsFile" matInput />
         </mat-form-field>
       </ng-container>
 
       <ng-container *ngSwitchCase="kind.TFEVENT">
-        <mat-form-field appearance="outline" class="step-content ">
+        <mat-form-field appearance="outline" class="step-content">
           <mat-label>TensorFlow Events Directory</mat-label>
           <input formControlName="tfDir" matInput />
         </mat-form-field>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/trial-template/trial-parameter/trial-parameter.component.spec.ts

@@ -8,9 +8,8 @@ describe('TrialParameterComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TrialParameterComponent ]
-    })
-    .compileComponents();
+      declarations: [TrialParameterComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.html

@@ -6,7 +6,5 @@ <h1 mat-dialog-title>Edit YAML</h1>
 
 <div mat-dialog-actions>
   <button mat-raised-button color="primary" (click)="save()">CREATE</button>
-  <button mat-button cdkFocusInitial (click)="close()">
-    CANCEL
-  </button>
+  <button mat-button cdkFocusInitial (click)="close()">CANCEL</button>
 </div>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/details/experiment-details-tab.component.ts

@@ -52,7 +52,8 @@ export class ExperimentDetailsTabComponent implements OnChanges {
 
     return parameters.map(parameter => {
       const feasibleSpaceList = parameter.feasibleSpace as FeasibleSpaceList;
-      const feasibleSpaceMinMax = parameter.feasibleSpace as FeasibleSpaceMinMax;
+      const feasibleSpaceMinMax =
+        parameter.feasibleSpace as FeasibleSpaceMinMax;
 
       const chips: ChipDescriptor[] = [
         {

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/overview/experiment-overview.component.ts

@@ -77,9 +77,10 @@ export class ExperimentOverviewComponent implements OnChanges {
       : 0;
   }
 
-  private generateExperimentStatus(
-    experiment: ExperimentK8s,
-  ): { status: string; statusIcon: string } {
+  private generateExperimentStatus(experiment: ExperimentK8s): {
+    status: string;
+    statusIcon: string;
+  } {
     const succeededCondition = getCondition(experiment, StatusEnum.SUCCEEDED);
 
     if (succeededCondition && succeededCondition.status === 'True') {
@@ -123,14 +124,15 @@ export class ExperimentOverviewComponent implements OnChanges {
       return;
     }
 
-    const parameters = experiment.status.currentOptimalTrial.parameterAssignments.map(
-      param =>
-        `${param.name}: ${
-          !isNaN(+param.value)
-            ? numberToExponential(+param.value, 6)
-            : param.value
-        }`,
-    );
+    const parameters =
+      experiment.status.currentOptimalTrial.parameterAssignments.map(
+        param =>
+          `${param.name}: ${
+            !isNaN(+param.value)
+              ? numberToExponential(+param.value, 6)
+              : param.value
+          }`,
+      );
 
     for (const c of parameters) {
       const chip: ChipDescriptor = { value: c, color: 'primary' };
@@ -146,14 +148,15 @@ export class ExperimentOverviewComponent implements OnChanges {
       return [];
     }
 
-    const metrics = experiment.status.currentOptimalTrial.observation.metrics.map(
-      metric =>
-        `${metric.name}:  ${
-          !isNaN(+metric.latest)
-            ? numberToExponential(+metric.latest, 6)
-            : metric.latest
-        }`,
-    );
+    const metrics =
+      experiment.status.currentOptimalTrial.observation.metrics.map(
+        metric =>
+          `${metric.name}:  ${
+            !isNaN(+metric.latest)
+              ? numberToExponential(+metric.latest, 6)
+              : metric.latest
+          }`,
+      );
 
     return metrics.map(m => {
       return { value: m, color: 'primary', tooltip: 'Latest value' };