Dashboard Interface Function Modification

Change-Id: Ia3ebdfaa0dd3acde1e626ed500341e0d4ae72142
Issue-ID: USECASEUI-214
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

3 files changed, 96 insertions, 62 deletions

diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 605c455f..b4812924 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -1,5 +1,5 @@
 <!--
-    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -18,59 +18,60 @@
         <!-- nsList -->
         <div class="list" *ngIf="tab === 'NS'">
             <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
-            <div class="listupload">
-                <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
-                    <p class="ant-upload-drag-icon">
-                        <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-                    </p>
-                    <p class="ant-upload-text">Click or drag CSAR File here</p>
-                    <p class="ant-upload-hint"></p>
-                </nz-upload>
-                <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
-                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
-                    {{ nsuploading ? 'Uploading' : 'Start Upload' }}
-                </button>
-            </div>
-            <div class="listlin"></div>
-            <div class="listfile">
-                <div>
-                    <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
-                    <div class="listfilebgc">
-                        <div>111</div>
-                        <div class="color">pnf-test.csar</div>
-                        <div>
-                            <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+            <div style="width:100%;">
+                <div class="listupload">
+                    <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
+                        <p class="ant-upload-drag-icon">
+                            <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+                        </p>
+                        <p class="ant-upload-text">Click or drag CSAR File here</p>
+                        <p class="ant-upload-hint"></p>
+                    </nz-upload>
+                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
+                        style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+                        {{ nsuploading ? 'Uploading' : 'Start Upload' }}
+                    </button>
+                </div>
+                <div class="listlin"></div>
+                <div class="listfile">
+                    <div>
+                        <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
+                        <div class="listfilebgc">
+                            <div>111</div>
+                            <div class="color">pnf-test.csar</div>
+                            <div>
+                                <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+                            </div>
+                            <div>456</div>
                         </div>
-                        <div>456</div>
-                    </div>
-                    <div class="listfilebgc">
-                        <div>111</div>
-                        <div class="color">pnf-test.csar</div>
-                        <div class="color">
-                            <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+                        <div class="listfilebgc">
+                            <div>111</div>
+                            <div class="color">pnf-test.csar</div>
+                            <div class="color">
+                                <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+                            </div>
+                            <div>456</div>
+                        </div>
+                        <div class="listfilebgc">
+                            <div>111</div>
+                            <div>pnf-test.csar</div>
+                            <div class="color">File upload completed</div>
+                            <div>456</div>
+                        </div>
+                        <div class="listfilebgc">
+                            <div>111</div>
+                            <div>pnf-test.csar</div>
+                            <div class="color">File upload completed</div>
+                            <div>456</div>
+                        </div>
+                        <div class="listfilebgc">
+                            <div>111</div>
+                            <div class="color">pnf-test.csar</div>
+                            <div>File upload completed</div>
+                            <div>456</div>
                         </div>
-                        <div>456</div>
-                    </div>
-                    <div class="listfilebgc">
-                        <div>111</div>
-                        <div>pnf-test.csar</div>
-                        <div class="color">File upload completed</div>
-                        <div>456</div>
-                    </div>
-                    <div class="listfilebgc">
-                        <div>111</div>
-                        <div>pnf-test.csar</div>
-                        <div class="color">File upload completed</div>
-                        <div>456</div>
-                    </div>
-                    <div class="listfilebgc">
-                        <div>111</div>
-                        <div class="color">pnf-test.csar</div>
-                        <div>File upload completed</div>
-                        <div>456</div>
                     </div>
                 </div>
-
             </div>
             <nz-spin [nzSpinning]="isSpinning">
                 <div class="mask" *ngIf="isSpinning"></div>
@@ -136,7 +137,7 @@
                 </nz-table>
             </nz-spin>
             <!-- <div style="margin-top:8px;">
-                        Loading state��
+                        Loading state:
                         <nz-switch [(ngModel)]="isSpinning"></nz-switch>
                       </div> -->
 
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
index b4d92fde..b973e575 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
@@ -1,3 +1,18 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
 .title {
     font: 700 18px/18px "思源黑体";
     color: #4c5e70;
@@ -47,11 +62,13 @@ hr {
     // padding: 10px;
     .listupload {
         width: 22%;
-        float: left;
+        vertical-align: top;
+        display: inline-block;
         margin-left: 13%;
     }
     .listlin {
-        float: left;
+        vertical-align: top;
+        display: inline-block;
         width: 1%;
         margin-left: 10%;
         height: 177px;
@@ -59,8 +76,9 @@ hr {
         border-right: 2px solid #EEEEEE;
     }
     .listfile {
-        float: left;
-        width: 44%;
+        width: 43%;
+        vertical-align: top;
+        display: inline-block;
         margin-left: 10%;
         .listfilebgc { 
         background-color: #fff;
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index 95977823..a35de356 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -1,3 +1,18 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
 import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Component, OnInit, HostBinding } from '@angular/core';
 // import { MyhttpService } from '../../myhttp.service';
@@ -37,13 +52,13 @@ export class OnboardVnfVmComponent implements OnInit {
   //url
   url = {
     // line up
-    //ns:  '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
-    //vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
-    //pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
-    // 本地
-    ns: 'https://jsonplaceholder.typicode.com/posts/',
-    vnf: 'https://jsonplaceholder.typicode.com/posts/',
-    pnf: 'https://jsonplaceholder.typicode.com/posts/',
+    ns:  '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
+    vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
+    pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
+    // line local
+    //ns: 'https://jsonplaceholder.typicode.com/posts/',
+    //vnf: 'https://jsonplaceholder.typicode.com/posts/',
+    //pnf: 'https://jsonplaceholder.typicode.com/posts/',
   };
   constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService, private modalService: NzModalService) { }