Merge pull request #243 from opensds/development

Integration of Development branch to Master branch for RC2. Release tag will be v0.7.0-Daito-RC2

README.md

@@ -1,58 +1,129 @@
 # Summary
 OpenSDS dashboard uses the front-end development framework Angular5 (https://angular.io/)
-and relies on PrimeNG UI Components (https://www.primefaces.org/primeng/). Regardless of 
-deployment or two development, prepare the corresponding environment.
+and relies on PrimeNG UI Components (https://www.primefaces.org/primeng/). 
 
 # Prerequisite 
 
-### 1. Ubuntu
+## 1. Ubuntu
 * Version information
 ```shell
 root@proxy:~# cat /etc/issue
 Ubuntu 16.04.2 LTS \n \l
 ```
-
-### 2. Nginx installation
-```shell
-sudo apt-get install -y nginx
-```
-
-### 3. NodeJS installation, NPM will be installed with nodejs.
+## 2. NodeJS installation, NPM will be installed with nodejs.
 ```shell
 curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
 sudo apt-get install -y nodejs
 ```
 
-### 4. Angular CLI installation
+## 3. Angular CLI installation
 Specify the version[1.7.4] of angular5 suitable for installation.
 ```shell
 sudo npm install -g @angular/cli@1.7.4
 ```
+## 4. Nginx installation (Optional)
+To be used for testing the build using `ng build`. For development a local npm server is enough (explained below)
+```shell
+sudo apt-get install -y nginx
+```
 
 
 # Build & Start
-### 1. Git clone dashboard code.
+## 1. Git clone dashboard code.
 ```shell
 git clone https://github.com/opensds/opensds-dashboard.git
 ```
+Switch to appropriate branch or release tag. (`master`, `development` or the release tag)
+
+## 2. Build opensds dashboard.
+### 2.1 **For local development** a local npm server can be started. This will allow to run a local server and make changes to the code and use the live reload feature to see code changes on the fly.    
+
+#### Configure local proxy
+Open the `proxy.conf.json ` file located in the document root and update the IP addresses with the appropriate endpoints where the OpenSDS components are installed (usually machine IP or VM IP)
+```shell
+cd opensds-dashboard
+nano proxy.conf.json
+```
+The contents of the proxy.conf.json files are :
+```
+{
+    "/v1beta": {
+        "target": "http://139.159.150.240:50040",
+        "secure": false
+    },
+    "/v1": {
+        "target": "http://139.159.150.240:8089",
+        "secure": false
+    },
+    "/v3": {
+        "target": "http://139.159.150.240/identity",
+        "secure": false
+    }
+}
+```  
+
+To enable debug mode and to check log messages replace the content with the following. The `/orch` block is needed to test Orchestration services if orchestration is enabled in the setup.  
+```
+{
+    "/v1beta": {
+        "target": "http://192.168.56.123:50040",
+        "secure": false,
+         "logLevel" : "debug"
+    },
+    "/orch" : {
+        "target": "http://192.168.56.123:5000",
+        "secure": false,
+         "logLevel" : "debug",
+         "changeOrigin" : true,
+         "pathRewrite" : {
+            "^/orch/" : "/v1beta/"
+         }
+    },
+    "/v1": {
+        "target": "http://192.168.56.123:8089",
+        "secure": false,
+         "logLevel" : "debug"
+    },
+    "/v3": {
+        "target": "http://192.168.56.123/identity",
+        "secure": false,
+         "logLevel" : "debug"
+    }
+}
+```  
+
+#### Start the live development server
+```shell
+npm install
+npm start
+```
+This will start a NG Live development server and can be accessed at http://localhost:4200/  
+
+Make any changes in the code and the server will live reload. If this fails then run the below commands.  
+```shell
+sudo sysctl fs.inotify.max_user_watches=524288
+systemd-sysusers # (1)
+```  
+
+### 2.2 **Alternatively the dashboard code can be built and deployed.**  
 
-### 2. Build opensds dashboard.
-After the build work finished, the files in the `dist` folder should be copied to the folder ` /var/www/html/`.
+Use the commands below to build the dashboard code.  
 ```shell
 cd opensds-dashboard
 sudo npm install
 sudo ng build --prod
 ```
+After the build is successful, the files in the `dist` folder should be copied to the folder ` /var/www/html/`.
 
 ```shell
 cp -R opensds-dashboard/dist/* /var/www/html/
 ```
 
-### 3. Set nginx default config.
+## 3. Set nginx default config. (optional)
 ```shell
 vi /etc/nginx/sites-available/default 
 ```
-Configure proxy, points to the resource server, multi-cloud server and the authentication server respectively.
+Configure proxy, points to the resource server, multi-cloud server and the authentication server respectively. (replace 1.1.1.0 with the appropriate endpoints)
 Parameter 'client_max_body_size' configuration supports uploaded file size.
 Such as: 
 * Keystone server `http://1.1.1.0/identity`
@@ -73,12 +144,12 @@ location /v1/ {
 }
 ```
 
-### 4. Restart nginx
+## 4. Restart nginx (optional)
 ```shell
 service nginx restart 
 ```
 
-### 5. Access dashboard in browser.
+## 5. Access dashboard in browser. (optional)
 ```shell
 http://localhost/
 ```

src/app/app-routing.module.ts

@@ -1,12 +1,22 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HostsResolver } from './business/block/modify-host/host-resolver.service';
+import { AzResolver } from './business/block/modify-host/az-resolver.service';
 
 const routes: Routes = [
     {path: '', redirectTo: '/home', pathMatch: 'full'},
     {path: 'home', loadChildren: './business/home/home.module#HomeModule'},
     {path: 'block', loadChildren: './business/block/block.module#BlockModule'},
     {path: 'createVolume', loadChildren: './business/block/create-volume/create-volume.module#CreateVolumeModule'},
     {path: 'volumeDetails/:volumeId', loadChildren: './business/block/volume-detail/volume-detail.module#VolumeDetailModule'},
+    {path: 'createHost', loadChildren: './business/block/create-host/create-host.module#CreateHostModule'},
+    {path: 'modifyHost/:hostId', loadChildren: './business/block/modify-host/modify-host.module#ModifyHostModule',
+        resolve: {
+            host: HostsResolver,
+            az: AzResolver
+        }
+    },
+    {path: 'hostDetails/:hostId', loadChildren: './business/block/host-detail/host-detail.module#HostDetailModule'},
     {path: 'cloud', loadChildren: './business/cloud/cloud.module#CloudModule'},
     {path: 'profile', loadChildren: './business/profile/profile.module#ProfileModule'},
     {path: 'createProfile', loadChildren: './business/profile/createProfile/createProfile.module#CreateProfileModule'},
@@ -26,6 +36,10 @@ const routes: Routes = [
 
 @NgModule({
     imports: [RouterModule.forRoot(routes)],
-    exports: [RouterModule]
+    exports: [RouterModule],
+    providers: [
+        HostsResolver,
+        AzResolver
+    ]
 })
 export class AppRoutingModule {}

src/app/app.component.ts

@@ -78,7 +78,7 @@ export class AppComponent implements OnInit, AfterViewInit {
         },
         {
             "title": "Resource",
-            "description": "Volumes / Buckets / File Share",
+            "description": "Volumes / Buckets / File Share / Hosts",
             "routerLink": "/block"
         },
         {
@@ -111,7 +111,7 @@ export class AppComponent implements OnInit, AfterViewInit {
         },
         {
             "title": "Resource",
-            "description": "Volumes / Buckets / File Share",
+            "description": "Volumes / Buckets / File Share / Hosts",
             "routerLink": "/block"
         },
         {

src/app/business/block/attach.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { I18NService, HttpService, ParamStorService } from '../../shared/api';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class AttachService {
+  constructor(
+    private http: HttpService,
+    private paramStor: ParamStorService
+  ) { }
+
+  url = 'v1beta/{project_id}/block/attachments';
+
+
+  //Fetch all Attachments
+  getAttachments(): Observable<any> {
+    return this.http.get(this.url);
+  }
+
+   //Fetch Attachment by ID
+   getAttachmentById(id): Observable<any> {
+    let attachIdUrl = this.url + '/' + id
+    return this.http.get(attachIdUrl);
+  }
+  //Create Attachment
+  createAttachment(param) {
+    return this.http.post(this.url, param);
+  }
+
+  //Update Attachment
+  modifyAttachments(id,param) {
+    let modifyUrl = this.url + '/' + id
+    return this.http.put(modifyUrl, param);
+  }
+
+   //Delete Attachment
+   deleteAttachment(id): Observable<any> {
+    let deleteUrl = this.url + '/' + id
+    return this.http.delete(deleteUrl);
+  }
+
+}

src/app/business/block/block.component.ts

@@ -40,6 +40,7 @@ export class BlockComponent implements OnInit{
     showDropDown:boolean = false;
     fromVolume:boolean = false;
     fromFileShare:boolean = false;
+    fromHosts: boolean = false;
     countItems = [];
     constructor(
         public I18N: I18NService,
@@ -54,6 +55,7 @@ export class BlockComponent implements OnInit{
                 this.fromBuckets = params.fromRoute === "fromBuckets";
                 this.fromVolume = params.fromRoute === "fromVolume";
                 this.fromFileShare = params.fromRoute === "fromFileShare";
+                this.fromHosts = params.fromRoute === "fromHosts";
             }
           );
     }

src/app/business/block/block.html

@@ -23,5 +23,11 @@
         </div>
         <app-file-share></app-file-share>
     </p-tabPanel>
+    <p-tabPanel header="Hosts" [selected]="fromHosts">
+        <div class="content-header">
+            <p>{{I18N.keyID['sds_block_hosts_descrip']}}</p>
+        </div>
+        <app-hosts></app-hosts>
+    </p-tabPanel>
 
 </p-tabView>

src/app/business/block/block.module.ts

@@ -6,6 +6,7 @@ import { VolumeListModule } from './volumeList.module';
 import { VolumeGroupModule } from './volumeGroup.module';
 import { BucketsModule } from './buckets.module';
 import { FileShareModule } from './fileShare.module';
+import { HostsModule } from './hosts.module';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
@@ -26,6 +27,7 @@ let routers = [{
     ButtonModule,
     BucketsModule,
     FileShareModule,
+    HostsModule,
     ReactiveFormsModule,
     FormsModule,
     CommonModule

src/app/business/block/bucket-detail/bucket-detail.component.html

@@ -25,7 +25,7 @@
                 </div>
                 <p-dataTable [value]="allDir" [globalFilter]="searchByName" [(selection)]="selectedDir"  [showHeaderCheckbox]="true" resizableColumns="true" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[10,20,50,100]">
                     <p-column selectionMode="multiple" [style]="{'width': '60px'}"></p-column>
-                    <p-column field="ObjectKey" header="{{I18N.keyID['sds_block_volume_name']}}" [style]="{'width': '170px'}" >
+                    <p-column field="Key" header="{{I18N.keyID['sds_block_volume_name']}}" [style]="{'width': '170px'}" >
                         <ng-template pTemplate="body" let-file="rowData" let-i="rowIndex">
                             <a *ngIf="file.newFolder" title="{{file.objectName}}" (click)="folderLink(file)">
                                 <img style="vertical-align: middle;" src="assets/business/images/volume/icon_folder.png">
@@ -35,7 +35,7 @@
                         </ng-template>
                     </p-column>
                     <p-column field="size" header="Size" [style]="{'width': '120px'}"></p-column>
-                    <p-column field="Backend" header="Location" [style]="{'width': '120px'}" ></p-column>
+                    <p-column field="Location" header="Location" [style]="{'width': '120px'}" ></p-column>
                     <p-column field="Tier" header="Tier" ></p-column>
                     <p-column field="lastModified" header="Last Modified"></p-column>
                     <p-column header="{{I18N.keyID['sds_block_volume_operation']}}" [style]="{'width': '180px'}">