You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@submarine.apache.org by pi...@apache.org on 2021/03/17 16:32:33 UTC

[submarine] branch master updated: SUBMARINE-763. Support uploading a conda config in environment page

This is an automated email from the ASF dual-hosted git repository.

pingsutw pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/submarine.git


The following commit(s) were added to refs/heads/master by this push:
     new 4368184  SUBMARINE-763. Support uploading a conda config in environment page
4368184 is described below

commit 436818487af75374780679c1c95e80f2872ddb1e
Author: KUAN-HSUN-LI <b0...@ntu.edu.tw>
AuthorDate: Sat Mar 13 17:04:02 2021 +0800

    SUBMARINE-763. Support uploading a conda config in environment page
    
    ### What is this PR for?
    Support uploading conda config file interface in environment page
    
    ### What type of PR is it?
    [Feature]
    
    ### Todos
    * [ ] - Support the URL to upload the file.
    * [ ] - Improve preview appearance.
    
    ### What is the Jira issue?
    https://issues.apache.org/jira/browse/SUBMARINE-763
    
    ### How should this be tested?
    
    ### Screenshots (if appropriate)
    ![ezgif com-gif-maker](https://user-images.githubusercontent.com/38066413/111025506-8bd86780-841f-11eb-9ff9-238b58556e58.gif)
    
    ### Questions:
    * Does the licenses files need update? No
    * Is there breaking changes for older versions? No
    * Does this needs documentation? No
    
    Author: KUAN-HSUN-LI <b0...@ntu.edu.tw>
    
    Signed-off-by: Kevin <pi...@apache.org>
    
    Closes #534 from KUAN-HSUN-LI/SUBMARINE-763 and squashes the following commits:
    
    d5b02ecd [KUAN-HSUN-LI] SUBMARINE-763. Support uploading conda config file interface
---
 .../environment-form.component.html                | 21 +++++++++-
 .../environment-form/environment-form.component.ts | 45 ++++++++++++++++++++++
 2 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment-home/environment-form/environment-form.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment-home/environment-form/environment-form.component.html
index fe42505..b17f5bb 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment-home/environment-form/environment-form.component.html
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment-home/environment-form/environment-form.component.html
@@ -17,7 +17,7 @@
   ~ under the License.
   -->
 
-<nz-modal [(nzVisible)]="isVisible" nzTitle="Create Environment" [nzWidth]="700" (nzOnCancel)="isVisible = false">
+<nz-modal [(nzVisible)]="isVisible" nzTitle="Create Environment" [nzWidth]="700" (nzOnCancel)="closeModal()">
   <form nz-form [formGroup]="environmentForm" nzLayout="horizontal">
     <div *nzModalFooter>
       <button id="btn-cancel" nz-button nzType="default" (click)="closeModal()">Cancel</button>
@@ -58,6 +58,25 @@
         </nz-form-control>
       </div>
     </nz-form-item>
+    <nz-form-item style="margin-bottom: 0">
+      <!-- nzAction is not supported yet -->
+      <nz-upload
+        nzType="drag"
+        [nzMultiple]="false"
+        [nzFileList]="configFileList"
+        [nzPreview]="isPreview"
+        [nzRemove]="closePreview"
+        nzAccept=".yml"
+        nzAction="api/v1/environment/config"
+        (nzChange)="fileUpload($event)"
+      >
+        <p class="ant-upload-drag-icon">
+          <i nz-icon nzType="inbox"></i>
+        </p>
+        <p class="ant-upload-text">Click or drag a conda config YAML file here</p>
+      </nz-upload>
+    </nz-form-item>
+    <div #preview *ngIf="isPreviewVisible" [innerText]="previewConfigFile"></div>
     <h2>Kernel Spec</h2>
     <nz-form-item>
       <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">Name</nz-form-label>
diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment-home/environment-form/environment-form.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment-home/environment-form/environment-form.component.ts
index bec1fd8..ac0ed04 100644
--- a/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment-home/environment-form/environment-form.component.ts
+++ b/submarine-workbench/workbench-web/src/app/pages/workbench/environment/environment-home/environment-form/environment-form.component.ts
@@ -22,6 +22,8 @@ import { FormArray, FormBuilder, Validators } from '@angular/forms';
 import { EnvironmentService } from '@submarine/services/environment-services/environment.service';
 import { ExperimentValidatorService } from '@submarine/services/experiment.validator.service';
 import { NzMessageService } from 'ng-zorro-antd';
+import { UploadChangeParam, UploadFile, UploadListType } from 'ng-zorro-antd/upload';
+import { BaseApiService } from '@submarine/services/base-api.service';
 
 @Component({
   selector: 'submarine-environment-form',
@@ -33,6 +35,9 @@ export class EnvironmentFormComponent implements OnInit {
 
   isVisible: boolean;
   environmentForm;
+  configFileList = [];
+  isPreviewVisible: boolean;
+  previewConfigFile = '';
 
   constructor(
     private fb: FormBuilder,
@@ -45,6 +50,7 @@ export class EnvironmentFormComponent implements OnInit {
     this.environmentForm = this.fb.group({
       environmentName: [null, Validators.required],
       dockerImage: [null, Validators.required],
+      configFile: null,
       name: [null, Validators.required],
       channels: this.fb.array([]),
       dependencies: this.fb.array([]),
@@ -53,6 +59,7 @@ export class EnvironmentFormComponent implements OnInit {
 
   initModal() {
     this.isVisible = true;
+    this.isPreviewVisible = true;
     this.initFormStatus();
   }
 
@@ -68,6 +75,14 @@ export class EnvironmentFormComponent implements OnInit {
     return this.environmentForm.get('dockerImage');
   }
 
+  get configFile() {
+    return this.environmentForm.get('configFile');
+  }
+
+  set configFile(file: UploadFile) {
+    this.environmentForm.controls['configFile'].setValue(file);
+  }
+
   get name() {
     return this.environmentForm.get('name');
   }
@@ -84,6 +99,7 @@ export class EnvironmentFormComponent implements OnInit {
     this.isVisible = true;
     this.environmentName.reset();
     this.dockerImage.reset();
+    this.configFile.reset();
     this.name.reset();
     this.channels.clear();
     this.dependencies.clear();
@@ -101,6 +117,8 @@ export class EnvironmentFormComponent implements OnInit {
 
   closeModal() {
     this.isVisible = false;
+    this.configFileList = [];
+    this.previewConfigFile = '';
   }
 
   addChannel() {
@@ -115,6 +133,33 @@ export class EnvironmentFormComponent implements OnInit {
     arr.removeAt(index);
   }
 
+  fileUpload(info: UploadChangeParam) {
+    info.fileList = info.fileList.slice(-1);
+    this.configFileList = info.fileList;
+    let file = info.file;
+    if (info.type === 'success') {
+      this.configFile = file;
+      this.isPreviewVisible = true;
+      var reader = new FileReader();
+      reader.readAsText(info.file.originFileObj);
+      reader.onload = () => {
+        this.previewConfigFile = reader.result.toString();
+      };
+      this.nzMessageService.success(`${file.name} file uploaded successfully.`);
+    } else if (status === 'error') {
+      this.nzMessageService.error(`${file.name} file upload failed.`);
+    }
+  }
+
+  isPreview = () => {
+    this.isPreviewVisible = !this.isPreviewVisible;
+  };
+
+  closePreview = () => {
+    this.configFileList = [];
+    this.isPreviewVisible = false;
+  };
+
   createEnvironment() {
     this.isVisible = false;
     const newEnvironmentSpec = this.createEnvironmentSpec();


---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@submarine.apache.org
For additional commands, e-mail: dev-help@submarine.apache.org