Skip to content

Commit

Permalink
Merge pull request #630 from anvithks/masking-view-resource-groups
Browse files Browse the repository at this point in the history 
[Delfin UI] Updated the masking views UI. Added support for resource groups
  • Loading branch information
@skdwriting
skdwriting authored Sep 28, 2021
2 parents 1ca1dc4 + d7426f6 commit 43712b8
Show file tree
Hide file tree
Showing 7 changed files with 685 additions and 12 deletions.
46 changes: 46 additions & 0 deletions src/app/business/delfin/delfin.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -511,6 +511,52 @@ export class DelfinService {
return this.http.get(url);
}

getAllVolumeGroups(storageId, nativeVolumeGroupId?, name?, limit?, offset?, sort?): Observable<any> {
let query = {};

if(nativeVolumeGroupId){
query['native_volume_group_id'] = nativeVolumeGroupId;
}
if(name){
query['name'] = name;
}
if(limit){
query['limit'] = limit;
}
if(offset){
query['offset'] = offset;
}
if(sort){
query['sort'] = sort;
}
query = '?' + Utils.prePareQuery(query);
let url =this.delfinStoragesUrl + '/' + storageId + '/volume-groups' + query;
return this.http.get(url);
}

getAllPortGroups(storageId, nativePortGroupId?, name?, limit?, offset?, sort?): Observable<any> {
let query = {};

if(nativePortGroupId){
query['native_port_group_id'] = nativePortGroupId;
}
if(name){
query['name'] = name;
}
if(limit){
query['limit'] = limit;
}
if(offset){
query['offset'] = offset;
}
if(sort){
query['sort'] = sort;
}
query = '?' + Utils.prePareQuery(query);
let url =this.delfinStoragesUrl + '/' + storageId + '/port-groups' + query;
return this.http.get(url);
}

getAllStorageHosts(storageId, nativeStorageHostId?, name?, limit?, offset?, sort?): Observable<any> {
let query = {};

Expand Down
269 changes: 264 additions & 5 deletions src/app/business/delfin/masking-views/masking-views.component.html
View file

Large diffs are not rendered by default.

56 changes: 49 additions & 7 deletions src/app/business/delfin/masking-views/masking-views.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,16 @@ export class MaskingViewsComponent implements OnInit {
availabilityZones: "Availability Zones",
initiators: "Initiators",
storage_id: "Storage ID",
native_storage_host_id: "Native Host ID"
native_storage_host_id: "Native Host ID",
native_storage_host_group_id: "Native Storage Host Group ID",
id: "Delfin ID",
};
volumeLabel = {
name: this.i18n.keyID["sds_block_volume_name"],
description: this.i18n.keyID["sds_block_volume_descri"],
wwn: "WWN",
native_volume_id: "Native Volume ID",
native_volume_group_id: "Native Volume Group ID",
storage_id: "Storage ID",
compressed: "Compressed",
deduplicated: "Deduplicated",
Expand All @@ -69,7 +72,9 @@ export class MaskingViewsComponent implements OnInit {
};
portLabel = {
name: this.i18n.keyID["sds_block_volume_name"],
description: this.i18n.keyID["sds_block_volume_descri"],
native_port_id: "Native Port ID",
native_port_group_id:"Native Port Group ID",
storage_id: "Storage ID",
cpu_info: "CPU Info",
soft_version: "Software Version",
Expand Down Expand Up @@ -116,8 +121,18 @@ export class MaskingViewsComponent implements OnInit {
view['storageHostInitiatorsCount'] = 0;
view['volumesCount'] = 0;
view['storageHost'] = {};
if(view['native_storage_host_group_id']){
} else if(view['native_storage_host_id']){
if(view['native_storage_host_group_id'] && view['native_storage_host_group_id'] != ""){
this.ds.getAllStorageHostGroups(storageId, view['native_storage_host_group_id']).subscribe((res)=>{
let storageHostGroup = res.json().storage_host_groups;
view['storageHostGroup'] = storageHostGroup[0];
if(storageHostGroup && storageHostGroup.length){
view['storageHostGroup'] = storageHostGroup[0];
view['storage_hosts'] = storageHostGroup[0].storage_hosts ? storageHostGroup[0].storage_hosts : [];
}
}, (error)=>{
console.log("Something went wrong. Could not fetch storage host group.")
})
} else if(view['native_storage_host_id'] && view['native_storage_host_id'] != ""){
this.ds.getAllStorageHosts(storageId, view['native_storage_host_id']).subscribe((res)=>{
let storageHost = res.json().storage_hosts;
view['storageHost'] = storageHost[0];
Expand All @@ -129,8 +144,17 @@ export class MaskingViewsComponent implements OnInit {
}


if(view['native_volume_group_id']){
} else if(view['native_volume_id']){
if(view['native_volume_group_id'] && view['native_volume_group_id'] != ""){
this.ds.getAllVolumeGroups(storageId, view['native_volume_group_id']).subscribe((res)=>{
let volumeGroup = res.json().volume_groups;
if(volumeGroup && volumeGroup.length){
view['volumeGroup'] = volumeGroup[0];
view['volumes'] = volumeGroup[0].volumes ? volumeGroup[0].volumes : [];
}
}, (error)=>{
console.log("Something went wrong. Could not fetch volume groups.")
})
} else if(view['native_volume_id'] && view['native_volume_id'] != ""){
//view['volumesCount'] = view['volumes'].length;
this.ds.getAllVolumes(storageId, view['native_volume_id']).subscribe((res)=>{
let volume = res.json().volumes[0];
Expand All @@ -147,8 +171,17 @@ export class MaskingViewsComponent implements OnInit {
})
}

if(view['native_port_group_id']){
} else if(view['native_port_id']){
if(view['native_port_group_id'] && view['native_port_group_id'] != ""){
this.ds.getAllPortGroups(storageId, view['native_port_group_id']).subscribe((res)=>{
let portGroup = res.json().port_groups;
if(portGroup && portGroup.length){
view['portGroup'] = portGroup[0];
view['ports'] = portGroup[0].ports ? portGroup[0].ports : [];
}
}, (error)=>{
console.log("Something went wrong. Could not fetch port groups.")
})
} else if(view['native_port_id'] && view['native_port_id'] != ""){
this.ds.getAllPorts(storageId, view['native_port_id']).subscribe((res)=>{
let port = res.json().ports[0];
view['port'] = port;
Expand All @@ -172,6 +205,15 @@ export class MaskingViewsComponent implements OnInit {
switch (src) {
case 'maskingView': this.detailsLabels.heading = "Masking View Details";

break;
case 'storageHostGroup': this.detailsLabels.heading = "Storage Host Group Details";

break;
case 'volumeGroup': this.detailsLabels.heading = "Volume Group Details";

break;
case 'portGroup': this.detailsLabels.heading = "Port Group Details";

break;
case 'storageHost': this.detailsLabels.heading = "Storage Host Details";

Expand Down
3 changes: 3 additions & 0 deletions src/app/business/delfin/storage-details/storage-details.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { StoragePoolsComponent } from '../storage-pools/storage-pools.component'
import { ControllersComponent } from '../controllers/controllers.component';
import { PortsComponent } from '../ports/ports.component';
import { StorageHostInitiatorsComponent } from '../storage-host-initiators/initiators.component';
import { StorageHostsComponent } from '../storage-hosts/storage-hosts.component';
import { DisksComponent } from '../disks/disks.component';
import { QtreesComponent } from '../qtrees/qtrees.component';
import { FilesystemsComponent } from '../filesystems/filesystems.component';
Expand Down Expand Up @@ -37,6 +38,7 @@ let routers = [{
ControllersComponent,
PortsComponent,
StorageHostInitiatorsComponent,
StorageHostsComponent,
DisksComponent,
QtreesComponent,
FilesystemsComponent,
Expand All @@ -50,6 +52,7 @@ let routers = [{
ControllersComponent,
PortsComponent,
StorageHostInitiatorsComponent,
StorageHostsComponent,
DisksComponent,
QtreesComponent,
FilesystemsComponent,
Expand Down
210 changes: 210 additions & 0 deletions src/app/business/delfin/storage-hosts/storage-hosts.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
<div class="table-toolbar">
<div class="left">
</div>
<div class="right">
<div class="ui-inputsearch">
<input type="text" #searchAll pInputText placeholder="{{i18n.keyID['sds_block_volume_search']}}">
<button pButton type="button" icon="fa-search"></button>
</div>
</div>
</div>
<p-dataTable [value]="storageHostsArr" [globalFilter]="searchAll" [lazy]="true" (onLazyLoad)="loadInitiatorsLazy($event)" [expandableRows]="true" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[10,20,50,100]" [totalRecords]="totalRecords" #spt>
<p-column expander="true" styleClass="col-icon" [style]="{'width': '3%'}"></p-column>
<p-column field="name" header="Name">
<ng-template pTemplate="body" let-storageHost="rowData">
<a (mouseenter)="showStorageHostOverview($event, storageHost, storageHostOverviewPanel)" (mouseleave)="showStorageHostOverview($event, storageHost, storageHostOverviewPanel)">{{storageHost.name}}</a>
</ng-template>
</p-column>
<p-column field="ip_address" header="IP Address">
</p-column>
<p-column field="status" header="Status" [style]="{'width': '8%'}">
<ng-template pTemplate="body" let-storageHost="rowData">
<span class="storage-status-icon" [ngClass]="{normal: storageHost.status=='Normal', abnormal: storageHost.status=='abnormal' || storageHost.status=='unknown' || storageHost.status=='offline'}"><i class="fa fa-circle"></i></span>
<span *ngIf="storageHost.status=='Normal'">Normal</span>
<span *ngIf="storageHost.status=='abnormal' || storageHost.status=='unknown'">Unknown</span>
<span *ngIf="storageHost.status=='offline'">Offline</span>
</ng-template>
</p-column>
<p-column header="Host ID">
<ng-template pTemplate="body" let-storageHost="rowData">
{{storageHost.native_storage_host_id}}
</ng-template>
</p-column>
<ng-template let-storageHost pTemplate="rowexpansion">
<div class="details-basic-info">
<div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid">
<div class="ui-grid-col-12">
<div class="ui-grid-row details-basic-item-class">
<div class="ui-grid-col-2">
{{label.name}}:
</div>
<div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="storageHost">
{{storageHost.name}}
</div>
<div class="ui-grid-col-2">
{{label.status}}:
</div>
<div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="storageHost">
<span class="storage-status-icon" [ngClass]="{normal: storageHost.status=='Normal', abnormal: storageHost.status=='abnormal' || storageHost.status=='unknown' || storageHost.status=='offline'}"><i class="fa fa-circle"></i></span>
<span *ngIf="storageHost.status=='Normal'">Normal</span>
<span *ngIf="storageHost.status=='abnormal' || storageHost.status=='unknown'">Unknown</span>
<span *ngIf="storageHost.status=='offline'">Offline</span>
</div>
<div class="ui-grid-col-2">
{{label.created_at}}:
</div>
<div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="storageHost">
{{storageHost.created_at ? (storageHost.created_at | date:'long') : '--'}}
</div>


</div>
<div class="ui-grid-row details-basic-item-class">
<div class="ui-grid-col-2">
{{label.ip_address}}:
</div>
<div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="storageHost">
{{storageHost.ip_address ? storageHost.ip_address : '--'}}
</div>
<div class="ui-grid-col-2">
{{label.native_storage_host_id}}:
</div>
<div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="storageHost">
{{storageHost.native_storage_host_id | slice:0:20}}
<a *ngIf="storageHost.native_storage_host_id.length > 20" pTooltip="{{storageHost.native_storage_host_id}}" tooltipPosition="top">
...
</a>
</div>
<div class="ui-grid-col-2">
{{label.updated_at}}:
</div>
<div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="storageHost">
{{storageHost.updated_at ? (storageHost.updated_at | date:'long') : '--'}}
</div>

</div>
<div class="ui-grid-row details-basic-item-class">
<div class="ui-grid-col-2">
{{label.storage_id}}:
</div>
<div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="storageHost">
{{storageHost.storage_id | slice:0:20}}
<a *ngIf="storageHost.storage_id.length > 20" pTooltip="{{storageHost.storage_id}}" tooltipPosition="top">
...
</a>
</div>
<div class="ui-grid-col-2">
{{label.id}}:
</div>
<div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="storageHost">
{{storageHost.id | slice:0:20}}
<a *ngIf="storageHost.id.length > 20" pTooltip="{{storageHost.id}}" tooltipPosition="top">
...
</a>
</div>

<div class="ui-grid-col-2">

</div>
<div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="storageHost">

</div>
</div>
<div class="ui-grid-row details-basic-item-class">
<div class="ui-grid-col-2">
{{label.description}}:
</div>
<div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="storageHost">
<a *ngIf="storageHost.description.length > 20" pTooltip="{{storageHost.description}}" tooltipPosition="top">
...
</a>
</div>
<div class="ui-grid-col-2">

</div>
<div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="storageHost">

</div>
<div class="ui-grid-col-2">

</div>
<div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="storageHost">

</div>
</div>
<div class="ui-grid-row details-basic-item-class">
<div class="ui-grid-col-12">
<h3>Storage Host Initiators</h3>
</div>
</div>
<!-- Show Storage host Initiators List -->
<div *ngIf="selectedStorageHosts && selectedStorageHosts.length">
<app-delfin-storage-host-initiators [selectedStorage]="selectedStorage" [selectedInitiators]="storageHost.storage_host_initiators"></app-delfin-storage-host-initiators>
</div>
</div>
</div>
</div>
</ng-template>
</p-dataTable>

<p-overlayPanel styleClass="overview-panel" #storageHostOverviewPanel>
<div class="ui-g overview-title">
<h4>{{storageHostOverview && storageHostOverview.name}}</h4>
</div>
<div class="ui-g ui-g-nopad overview-item" >
<div class="ui-g-6">
<span class="overview-item-label">Status: </span>
</div>
<div *ngIf="storageHostOverview" class="ui-g-6">
<span class="storage-status-icon" [ngClass]="{normal: storageHostOverview && storageHostOverview.status =='Normal', abnormal: storageHostOverview && storageHostOverview.status =='abnormal' || storageHostOverview.status =='unknown'}"><i class="fa fa-circle"></i></span>
<span *ngIf="storageHostOverview && storageHostOverview.status=='Normal'">Normal</span>
<span *ngIf=" storageHostOverview && storageHostOverview.status=='abnormal' || storageHostOverview.status=='unknown'">Unknown</span>
<span *ngIf=" storageHostOverview && storageHostOverview.status=='offline'">Offline</span>
</div>
</div>
<div class="ui-g overview-item">
<div class="ui-g-6">
<span class="overview-item-label">
Storage ID
</span>
</div>
<div class="ui-g-6">
<span>
{{ storageHostOverview && storageHostOverview.storage_id}}
</span>
</div>
</div>
<div class="ui-g overview-item">
<div class="ui-g-6">
<span class="overview-item-label">
Host ID
</span>
</div>
<div class="ui-g-6">
<span>
{{ storageHostOverview && storageHostOverview.native_storage_host_id}}
</span>
</div>
</div>
<div class="ui-g overview-item">
<div class="ui-g-6">
<span class="overview-item-label">
Storage Serial No.
</span>
</div>
<div class="ui-g-6">
<span>
{{ selectedStorageDetails && selectedStorageDetails.serial_number}}
</span>
</div>
</div>
<div class="ui-g overview-item">
<div class="ui-g-6">
WWN
</div>
<div class="ui-g-6">
{{storageHostOverview && storageHostOverview.ip_address}}}}
</div>
</div>
<hr />
</p-overlayPanel>
Loading

0 comments on commit 43712b8

Please sign in to comment.