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 4199e50  SUBMARINE-1050. Create static model version page
4199e50 is described below

commit 4199e5063fa76b9abf00507495f8a50f6e1e39b6
Author: atosystem <atosys...@hotmail.com>
AuthorDate: Fri Oct 8 09:35:11 2021 +0800

    SUBMARINE-1050. Create static model version page
    
    ### What is this PR for?
    
    1. Create static model version page at URL:`/workbench/model/${registered 
model name}/${version}`
    2. Enable the "Model" button on the sidebar.
    3. Alter routing settings.
    
    ### What type of PR is it?
    [Feature]
    
    ### Todos
    
    ### What is the Jira issue?
    https://issues.apache.org/jira/projects/SUBMARINE/issues/SUBMARINE-1050
    ### How should this be tested?
    Go to URL `/workbench/model/${registered model name}/${version}` and test.
    ### Screenshots
    
![image](https://user-images.githubusercontent.com/32225867/136485610-88a9e3d7-eaee-413a-9e88-511cc32341c5.png)
    
    ### Questions:
    * Do the license files need updating? No
    * Are there breaking changes for older versions? No
    * Does this need new documentation? Yes
    
    Author: atosystem <atosys...@hotmail.com>
    
    Signed-off-by: Kevin <pings...@apache.org>
    
    Closes #769 from atosystem/SUBMARINE-1050 and squashes the following 
commits:
    
    36f6a4a1 [atosystem] SUBMARINE-1050. remove model-home & model-info
    90bc08d5 [atosystem] SUBMARINE-1050. remove comments
    74dbb772 [atosystem] SUBMARINE-1050. add static model version page & create 
simple blank model information, overview page
---
 ...{model.component.ts => model-routing.module.ts} | 33 +++++++++++------
 .../model-version.component.html}                  | 17 ++++++++-
 .../model-version.component.scss}                  | 14 +-------
 .../model-version.component.ts}                    | 26 +++++++++-----
 .../app/pages/workbench/model/model.component.html | 23 +++++++++++-
 .../app/pages/workbench/model/model.component.ts   | 10 ++++--
 .../{workbench.module.ts => model/model.module.ts} | 41 ++++++++--------------
 .../pages/workbench/workbench-routing.module.ts    |  5 ++-
 .../src/app/pages/workbench/workbench.component.ts |  2 +-
 .../src/app/pages/workbench/workbench.module.ts    |  6 ++--
 10 files changed, 109 insertions(+), 68 deletions(-)

diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-routing.module.ts
similarity index 59%
copy from 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
copy to 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model-routing.module.ts
index 1835f44..a98f32c 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-routing.module.ts
@@ -1,4 +1,4 @@
-/*!
+/*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -17,15 +17,26 @@
  * under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ModelComponent } from './model.component';
+import { ModelVersionComponent } from 
'./model-version/model-version.component';
 
-@Component({
-  selector: 'submarine-model',
-  templateUrl: './model.component.html',
-  styleUrls: ['./model.component.scss']
-})
-export class ModelComponent implements OnInit {
-  constructor() {}
+const routes: Routes = [
+  {
+    path: '',
+    component: ModelComponent,
+    children: [
+      {
+        path: ':name/:version',
+        component: ModelVersionComponent,
+      },
+    ],
+  },
+];
 
-  ngOnInit() {}
-}
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ModelRoutingModule {}
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.html
 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.html
similarity index 66%
copy from 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.html
copy to 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.html
index d07e9c1..e5bed30 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.html
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.html
@@ -17,4 +17,19 @@
   ~ under the License.
   -->
 
-<p>model works!</p>
+<div style="margin: 15px; padding: 15px; background-color: white">
+  <p>Version: {{ modelVersion }}</p>
+  <p>Description: Resnet152</p>
+  <p>Tags:</p>
+  <p>Stage:</p>
+  <h3>Model version info</h3>
+  <p>User id: abcdef</p>
+  <p>
+    Experiment id:
+    <a href="#">123456789</a>
+  </p>
+  <p>Dataset: mnist</p>
+  <p>Created: 2021-09-01 07:57</p>
+  <p>Updated: 2021-09-21 03:00</p>
+  <p>Source: s3:/example/model</p>
+</div>
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.scss
similarity index 75%
copy from 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
copy to 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.scss
index 1835f44..61d2115 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.scss
@@ -16,16 +16,4 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'submarine-model',
-  templateUrl: './model.component.html',
-  styleUrls: ['./model.component.scss']
-})
-export class ModelComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+ 
\ No newline at end of file
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.ts
similarity index 52%
copy from 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
copy to 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.ts
index 1835f44..04c8dfe 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model-version/model-version.component.ts
@@ -1,4 +1,4 @@
-/*!
+/*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -17,15 +17,25 @@
  * under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ExperimentService } from '@submarine/services/experiment.service';
 
 @Component({
-  selector: 'submarine-model',
-  templateUrl: './model.component.html',
-  styleUrls: ['./model.component.scss']
+  selector: 'submarine-model-version',
+  templateUrl: './model-version.component.html',
+  styleUrls: ['./model-version.component.scss'],
 })
-export class ModelComponent implements OnInit {
-  constructor() {}
+export class ModelVersionComponent implements OnInit {
+  isLoading = true;
+  modelName;
+  modelVersion;
 
-  ngOnInit() {}
+  constructor(private router: Router, private route: ActivatedRoute, private 
experimentService: ExperimentService) {}
+
+  ngOnInit() {
+    this.modelName = this.route.snapshot.params.name;
+    this.modelVersion = this.route.snapshot.params.version;
+    this.experimentService.emitInfo(this.modelName);
+  }
 }
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.html
 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.html
index d07e9c1..8343648 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.html
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.html
@@ -17,4 +17,25 @@
   ~ under the License.
   -->
 
-<p>model works!</p>
+  <nz-layout style="margin: -24px -24px 16px">
+    <div style="background-color: white; padding-left: 30px; padding-top: 
20px">
+      <nz-breadcrumb>
+        <nz-breadcrumb-item>
+          <a>Home</a>
+        </nz-breadcrumb-item>
+        <nz-breadcrumb-item>
+          <a [routerLink]="['/', 'workbench', 'model']" (click)="modelName = 
null">model</a>
+        </nz-breadcrumb-item>
+        <nz-breadcrumb-item *ngIf="modelName != null">
+          {{ modelName }}
+        </nz-breadcrumb-item>
+      </nz-breadcrumb>
+      <div *ngIf="modelName == null">
+        <br />
+        <h2>Model</h2>
+      </div>
+      <br />
+    </div>
+    <router-outlet></router-outlet>
+  </nz-layout>
+  
\ No newline at end of file
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
index 1835f44..a6cbfa5 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.component.ts
@@ -18,6 +18,8 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { ExperimentService } from '@submarine/services/experiment.service';
+import { delay } from 'rxjs/operators';
 
 @Component({
   selector: 'submarine-model',
@@ -25,7 +27,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./model.component.scss']
 })
 export class ModelComponent implements OnInit {
-  constructor() {}
+  modelName: string = null;
 
-  ngOnInit() {}
+  constructor(private experimentService: ExperimentService) {}
+
+  ngOnInit() {
+    this.experimentService.infoEmitted$.pipe(delay(0)).subscribe((name) => 
(this.modelName = name));
+  }
 }
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.module.ts 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.module.ts
similarity index 54%
copy from 
submarine-workbench/workbench-web/src/app/pages/workbench/workbench.module.ts
copy to 
submarine-workbench/workbench-web/src/app/pages/workbench/model/model.module.ts
index 7ed7e21..dbfe533 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.module.ts
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/model/model.module.ts
@@ -17,42 +17,31 @@
  * under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { ModelRoutingModule } from './model-routing.module';
 import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from 
'@submarine/pages/workbench/workbench-routing.module';
+import { ModelComponent } from './model.component';
+import { ModelVersionComponent } from 
'./model-version/model-version.component';
 import { PipeSharedModule } from '@submarine/pipe/pipe-shared.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkspaceModule } from './workspace/workspace.module';
-import { ExperimentModule } from './experiment/experiment.module';
-import { InterpreterModule } from './interpreter/interpreter.module';
-import { NotebookModule } from './notebook/notebook.module';
-
-import { HomeComponent } from './home/home.component';
-import { ModelComponent } from './model/model.component';
-import { WorkbenchComponent } from './workbench.component';
-import { WorkspaceComponent } from './workspace/workspace.component';
-import { DataComponent } from './data/data.component';
-import { EnvironmentModule } from './environment/environment.module';
-import { TemplateModule } from './template/template.module';
 
 @NgModule({
-  declarations: [WorkbenchComponent, HomeComponent, WorkspaceComponent, 
DataComponent, ModelComponent],
+  declarations: [
+    ModelComponent,
+    ModelVersionComponent,
+  ],
   imports: [
     CommonModule,
-    WorkbenchRoutingModule,
-    NgZorroAntdModule,
-    RouterModule,
     FormsModule,
     ReactiveFormsModule,
-    WorkspaceModule,
-    ExperimentModule,
-    InterpreterModule,
+    NgZorroAntdModule,
+    RouterModule,
+    ModelRoutingModule,
     PipeSharedModule,
-    NotebookModule,
-    EnvironmentModule,
-    TemplateModule,
   ],
+  providers: [],
+  exports: [ModelComponent],
 })
-export class WorkbenchModule {}
+export class ModelModule {}
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts
 
b/submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts
index 393f75a..17ac75c 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/workbench-routing.module.ts
@@ -23,7 +23,6 @@ import { WorkbenchComponent } from 
'@submarine/pages/workbench/workbench.compone
 import { DataComponent } from './data/data.component';
 import { HomeComponent } from './home/home.component';
 import { InterpreterComponent } from './interpreter/interpreter.component';
-import { ModelComponent } from './model/model.component';
 import { WorkspaceComponent } from './workspace/workspace.component';
 
 const routes: Routes = [
@@ -73,7 +72,7 @@ const routes: Routes = [
       },
       {
         path: 'model',
-        component: ModelComponent,
+        loadChildren: () => import('./model/model.module').then((m) => 
m.ModelModule),
         canActivate: ['canActivatePage'],
       },
       {
@@ -96,7 +95,7 @@ const routes: Routes = [
     {
       provide: 'canActivatePage',
       useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => 
{
-        const disablePaths = ['home', 'data', 'model', 'workspace', 
'interpreter'];
+        const disablePaths = ['home', 'data', 'workspace', 'interpreter'];
         let currentPage = state.url.split('/')[2];
         console.log('currentPage', currentPage);
         if (disablePaths.includes(currentPage)) return false;
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.component.ts
 
b/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.component.ts
index e778f7f..026f794 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.component.ts
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.component.ts
@@ -108,7 +108,7 @@ export class WorkbenchComponent implements OnInit {
       title: 'Model',
       iconType: 'experiment',
       routerLink: '/workbench/model',
-      disabled: true,
+      disabled: false,
     },
     {
       title: 'Workspace',
diff --git 
a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.module.ts 
b/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.module.ts
index 7ed7e21..c364471 100644
--- 
a/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.module.ts
+++ 
b/submarine-workbench/workbench-web/src/app/pages/workbench/workbench.module.ts
@@ -30,15 +30,16 @@ import { InterpreterModule } from 
'./interpreter/interpreter.module';
 import { NotebookModule } from './notebook/notebook.module';
 
 import { HomeComponent } from './home/home.component';
-import { ModelComponent } from './model/model.component';
 import { WorkbenchComponent } from './workbench.component';
 import { WorkspaceComponent } from './workspace/workspace.component';
 import { DataComponent } from './data/data.component';
 import { EnvironmentModule } from './environment/environment.module';
 import { TemplateModule } from './template/template.module';
+import { ModelModule } from './model/model.module';
+
 
 @NgModule({
-  declarations: [WorkbenchComponent, HomeComponent, WorkspaceComponent, 
DataComponent, ModelComponent],
+  declarations: [WorkbenchComponent, HomeComponent, WorkspaceComponent, 
DataComponent],
   imports: [
     CommonModule,
     WorkbenchRoutingModule,
@@ -53,6 +54,7 @@ import { TemplateModule } from './template/template.module';
     NotebookModule,
     EnvironmentModule,
     TemplateModule,
+    ModelModule,
   ],
 })
 export class WorkbenchModule {}

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

Reply via email to