feat(volumes): Add filtering, grouping by volume type. Highlight ROOT…

… volumes

Fixes #485

src/app/security-group/sg-template-list/sg-template-list-item.component.html

@@ -20,8 +20,8 @@
     </div>
 
     <div class="card-wrapper" *ngIf="securityGroupTemplate?.description">
-      <div class="description first">{{ 'SECURITY_GROUP_PAGE.CARD.DESCRIPTION' | translate }}:</div>
-      <div class="description last">
+      <div class="description flex-1">{{ 'SECURITY_GROUP_PAGE.CARD.DESCRIPTION' | translate }}:</div>
+      <div class="description flex-2">
         <span
           class="tooltip-position-fix fixed-width-span"
           *ngIf="securityGroupTemplate.description"

src/app/shared/models/volume.model.ts

@@ -14,6 +14,11 @@ export enum VolumeType {
   DATADISK = 'DATADISK'
 }
 
+export const volumeTypeNames = {
+  [VolumeType.ROOT]: 'VOLUME_TYPE.ROOT',
+  [VolumeType.DATADISK]: 'VOLUME_TYPE.DATADISK'
+};
+
 @ZoneName()
 @FieldMapper({
   diskofferingid: 'diskOfferingId',

src/app/spare-drive/spare-drive-filter/spare-drive-filter.component.html

@@ -18,19 +18,34 @@
     >
       <md-option *ngFor="let z of zones" [value]="z">{{ z.name }}</md-option>
     </md-select>
-    <cs-divider-vertical></cs-divider-vertical>
+
     <md-select
+      class="filter-select"
+      multiple="true"
+      [placeholder]="'SPARE_DRIVE_PAGE.FILTERS.SELECT_TYPES' | translate"
+      [(ngModel)]="selectedTypes"
+      (change)="update()"
+    >
+      <md-option *ngFor="let t of types" [value]="t">
+        {{ getVolumeTypeName(t) | translate }}
+      </md-option>
+    </md-select>
+
+    <cs-divider-vertical></cs-divider-vertical>
+
+    <cs-draggable-select
       *ngIf="zones"
       class="filter-select"
       multiple="true"
       [placeholder]="'SPARE_DRIVE_PAGE.FILTERS.GROUP_BY' | translate"
       [(ngModel)]="selectedGroupingNames"
+      [dragItems]="groupings"
       (change)="update()"
     >
       <md-option *ngFor="let g of groupings" [value]="g">
         {{ g.label | translate }}
       </md-option>
-    </md-select>
+    </cs-draggable-select>
   </div>
 </cs-top-bar>
 

src/app/spare-drive/spare-drive-filter/spare-drive-filter.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as sortBy from 'lodash/sortBy';
+import { VolumeType, volumeTypeNames } from '../../shared/models/volume.model';
 import { Zone } from '../../shared/models/zone.model';
 import { FilterService } from '../../shared/services/filter.service';
 import { LocalStorageService } from '../../shared/services/local-storage.service';
@@ -16,6 +17,7 @@ import { LocalStorageService } from '../../shared/services/local-storage.service
 export interface SpareDriveFilter {
   spareOnly: boolean;
   selectedZones: Array<Zone>;
+  selectedTypes: Array<VolumeType>;
   groupings: Array<any>;
   query: string;
 }
@@ -33,16 +35,20 @@ export class SpareDriveFilterComponent implements OnChanges {
   @Input() public searchPanelWhite: boolean;
   @Output() public updateFilters: EventEmitter<SpareDriveFilter>;
 
-  private filtersKey = spareDriveListFilters;
+  public types = [VolumeType.ROOT, VolumeType.DATADISK];
+  public selectedTypes: Array<VolumeType> = [];
 
   public spareOnly: boolean;
+
   public selectedZones: Array<Zone> = [];
   public selectedGroupingNames = [];
   public query: string;
 
+  private filtersKey = spareDriveListFilters;
   private filterService = new FilterService({
     spareOnly: { type: 'boolean', defaultOption: false },
     zones: { type: 'array', defaultOption: [] },
+    types: { type: 'array', defaultOption: [] },
     groupings: { type: 'array', defaultOption: [] },
     query: { type: 'string' }
   }, this.router, this.localStorage, this.filtersKey, this.activatedRoute);
@@ -61,6 +67,10 @@ export class SpareDriveFilterComponent implements OnChanges {
     }
   }
 
+  public getVolumeTypeName(type: VolumeType): string {
+    return volumeTypeNames[type];
+  }
+
   public initFilters(): void {
     const params = this.filterService.getParams();
 
@@ -71,6 +81,10 @@ export class SpareDriveFilterComponent implements OnChanges {
       params['zones'].find(id => id === zone.id)
     );
 
+    this.selectedTypes = this.types.filter(type =>
+      params['types'].find(_ => _ === type)
+    );
+
     this.selectedGroupingNames = params.groupings.reduce((acc, _) => {
       const grouping = this.groupings.find(g => g.key === _);
       if (grouping) {
@@ -86,13 +100,15 @@ export class SpareDriveFilterComponent implements OnChanges {
     this.updateFilters.emit({
       spareOnly: this.spareOnly,
       selectedZones: sortBy(this.selectedZones, 'name'),
+      selectedTypes: this.selectedTypes,
       groupings: this.selectedGroupingNames,
       query: this.query
     });
 
     this.filterService.update(this.filtersKey, {
       spareOnly: this.spareOnly,
       zones: this.selectedZones.map(_ => _.id),
+      types: this.selectedTypes,
       groupings: this.selectedGroupingNames.map(_ => _.key),
       query: this.query
     });

src/app/spare-drive/spare-drive-item/spare-drive-item.component.html

@@ -2,6 +2,7 @@
   class="custom-card spare-drive-card"
   (click)="handleClick($event)"
   [class.card-selected]="isSelected(item)"
+  [class.root-disk]="isRoot"
 >
   <md-card-header>
     <md-card-title>
@@ -21,15 +22,16 @@
   </md-card-header>
   <md-card-content>
     <div class="card-wrapper">
-      <div class="first">
+      <div class="flex-1">
         <div class="row" *ngIf="descriptionIncludesQuery">
           {{ 'SPARE_DRIVE_PAGE.CARD.DESCRIPTION' | translate }}:
         </div>
 
         <div class="row">{{ 'SPARE_DRIVE_PAGE.CARD.SIZE' | translate }}:</div>
         <div class="row">{{ 'SPARE_DRIVE_PAGE.CARD.STATE' | translate }}:</div>
       </div>
-      <div class="last">
+
+      <div class="flex-1">
         <div class="row" *ngIf="descriptionIncludesQuery">
           <span [innerHTML]="item.description | highlight:query"></span>
         </div>

src/app/spare-drive/spare-drive-item/spare-drive-item.component.scss

@@ -4,10 +4,19 @@
 }
 
 .row {
-  height: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.root-disk {
+  background-image: repeating-linear-gradient(
+      -45deg,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0) 20px,
+      rgba(0, 0, 0, 0.05) 20px,
+      rgba(0, 0, 0, 0.05) 40px
+  );
+}

src/app/spare-drive/spare-drive-item/spare-drive-item.component.ts

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { MdMenuTrigger, MdDialog } from '@angular/material';
+import { MdMenuTrigger } from '@angular/material';
+import { SpareDriveActionsService } from '../../shared/actions/spare-drive-actions/spare-drive-actions.service';
 import { DiskOffering, Volume } from '../../shared/models';
+import { VolumeType } from '../../shared/models/volume.model';
 import { DiskOfferingService } from '../../shared/services/disk-offering.service';
 import { ZoneService } from '../../shared/services/zone.service';
-import { SpareDriveActionsService } from '../../shared/actions/spare-drive-actions/spare-drive-actions.service';
 import { SpareDriveItem } from '../spare-drive-item';
 
 
@@ -41,6 +42,10 @@ export class SpareDriveItemComponent extends SpareDriveItem implements OnInit, O
     }
   }
 
+  public get isRoot(): boolean {
+    return this.item.type === VolumeType.ROOT;
+  }
+
   public get descriptionIncludesQuery(): boolean {
     return this.query && this.item.description.includes(this.query);
   }

src/app/spare-drive/spare-drive-page/spare-drive-page.component.ts

@@ -12,6 +12,7 @@ import { ZoneService } from '../../shared/services/zone.service';
 import { filterWithPredicates } from '../../shared/utils/filter';
 import { WithUnsubscribe } from '../../utils/mixins/with-unsubscribe';
 import { SpareDriveFilter } from '../spare-drive-filter/spare-drive-filter.component';
+import { volumeTypeNames } from '../../shared/models/volume.model';
 
 
 export interface VolumeCreationData {
@@ -38,6 +39,12 @@ export class SpareDrivePageComponent extends WithUnsubscribe() implements OnInit
       label: 'SPARE_DRIVE_PAGE.FILTERS.GROUP_BY_ZONES',
       selector: (item: Volume) => item.zoneId,
       name: (item: Volume) => item.zoneName
+    },
+    {
+      key: 'types',
+      label: 'SPARE_DRIVE_PAGE.FILTERS.GROUP_BY_TYPES',
+      selector: (item: Volume) => item.type,
+      name: (item: Volume) => volumeTypeNames[item.type]
     }
   ];
   public query: string;
@@ -98,13 +105,14 @@ export class SpareDrivePageComponent extends WithUnsubscribe() implements OnInit
 
     this.updateGroupings();
 
-    const { selectedZones, spareOnly, query } = this.filterData;
+    const { selectedZones, selectedTypes, spareOnly, query } = this.filterData;
     this.query = query;
 
     this.visibleVolumes = filterWithPredicates(
       this.volumes,
       [
         this.filterVolumesByZones(selectedZones),
+        this.filterVolumesByTypes(selectedTypes),
         this.filterVolumesBySpare(spareOnly),
         this.filterVolumesBySearch()
       ]);
@@ -127,6 +135,16 @@ export class SpareDrivePageComponent extends WithUnsubscribe() implements OnInit
     };
   }
 
+  public filterVolumesByTypes(selectedTypes: Array<VolumeType>): (volume) => boolean {
+    return (volume) => {
+      if (selectedTypes.length) {
+        return selectedTypes.some(type => volume.type === type);
+      } else {
+        return true;
+      }
+    };
+  }
+
   public filterVolumesBySpare(spareOnly = false): (volume) => boolean {
     return (volume) => {
       if (spareOnly) {

src/app/spare-drive/spare-drive.module.ts

@@ -15,6 +15,7 @@ import {
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { DynamicModule } from 'ng-dynamic-component';
+// tslint:disable-next-line
 import { SpareDriveAttachmentComponent } from '../shared/actions/spare-drive-actions/spare-drive-attachment/spare-drive-attachment.component';
 import { SharedModule } from '../shared/shared.module';
 import { SpareDriveCreationDialogComponent } from './spare-drive-creation/spare-drive-creation-dialog.component';
@@ -23,15 +24,22 @@ import { SpareDriveFilterComponent } from './spare-drive-filter/spare-drive-filt
 import { SpareDriveItemComponent } from './spare-drive-item/spare-drive-item.component';
 import { SpareDriveListComponent } from './spare-drive-list/spare-drive-list.component';
 import { SpareDrivePageComponent } from './spare-drive-page/spare-drive-page.component';
+// tslint:disable-next-line
 import { SpareDriveActionsSidebarComponent } from './spare-drive-sidebar/actions-sidebar/spare-drive-actions-sidebar.component';
+// tslint:disable-next-line
 import { SpareDriveSidebarDiskOfferingComponent } from './spare-drive-sidebar/details/disk-offering/spare-drive-sidebar-disk-offering.component';
 import { SpareDriveDetailsComponent } from './spare-drive-sidebar/details/spare-drive-details.component';
+// tslint:disable-next-line
 import { SpareDriveSidebarVolumeComponent } from './spare-drive-sidebar/details/volume/spare-drive-sidebar-volume.component';
+// tslint:disable-next-line
 import { SpareDriveSnapshotCreationComponent } from './spare-drive-sidebar/snapshot-details/snapshot-creation/spare-drive-snapshot-creation.component';
 import { SnapshotActionsComponent } from './spare-drive-sidebar/snapshot-details/snapshot/snapshot-actions/snapshot-actions.component';
+// tslint:disable-next-line
 import { SpareDriveSnapshotComponent } from './spare-drive-sidebar/snapshot-details/snapshot/spare-drive-snapshot.component';
+// tslint:disable-next-line
 import { SpareDriveSnapshotDetailsComponent } from './spare-drive-sidebar/snapshot-details/spare-drive-snapshot-details.component';
 import { SpareDriveSidebarComponent } from './spare-drive-sidebar/spare-drive-sidebar.component';
+import { DraggableSelectModule } from '../shared/components/draggable-select/draggable-select.module';
 
 
 @NgModule({
@@ -50,7 +58,9 @@ import { SpareDriveSidebarComponent } from './spare-drive-sidebar/spare-drive-si
     MdTooltipModule,
     RouterModule,
     SharedModule,
-    TranslateModule
+    TranslateModule,
+    MdDialogModule,
+    DraggableSelectModule
   ],
   declarations: [
     SnapshotActionsComponent,

src/app/template/template/template.component.html

@@ -23,14 +23,14 @@
       <div>{{ 'TEMPLATE_PAGE.CARD.OS' | translate }}:</div>
       <div
         *ngIf="singleLine"
-        class="last single-line text-overflow-tooltip-fix"
+        class="flex-2 single-line text-overflow-tooltip-fix"
         [mdTooltip]="item.osTypeName"
         mdTooltipPosition="above"
         [innerHTML]="item.osTypeName | highlight:query"
       ></div>
       <div
         *ngIf="!singleLine"
-        class="last multiline"
+        class="flex-2 multiline"
         [innerHTML]="item.osTypeName | highlight:query"
       ></div>
     </div>

src/i18n/en.json

@@ -455,8 +455,10 @@
     "FILTERS": {
       "SPARE_DRIVES_ONLY": "Spare drives only",
       "SELECT_ZONES": "Select zones",
+      "SELECT_TYPES": "Select types",
       "GROUP_BY": "Group by",
-      "GROUP_BY_ZONES": "Zones"
+      "GROUP_BY_ZONES": "Zones",
+      "GROUP_BY_TYPES": "Types"
     },
     "CARD": {
       "DESCRIPTION": "Description",
@@ -1016,6 +1018,10 @@
     "DEPLOY_IN_PROGRESS": "Deploying",
     "RESET_PASSWORD_IN_PROGRESS": "Resetting password"
   },
+  "VOLUME_TYPE": {
+    "ROOT": "ROOT",
+    "DATADISK": "DATADISK"
+  },
   "DATE_TIME": {
     "AM": "AM",
     "PM": "PM",

src/i18n/ru.json

@@ -455,8 +455,10 @@
     "FILTERS": {
       "SPARE_DRIVES_ONLY": "Только свободные диски",
       "SELECT_ZONES": "Выберите зоны",
+      "SELECT_TYPES": "Выберите типы",
       "GROUP_BY": "Группировать по",
-      "GROUP_BY_ZONES": "Зонам"
+      "GROUP_BY_ZONES": "Зонам",
+      "GROUP_BY_TYPES": "Типам"
     },
     "CARD": {
       "DESCRIPTION": "Описание",
@@ -997,6 +999,10 @@
     "DEPLOY_IN_PROGRESS": "Развертывание",
     "RESET_PASSWORD_IN_PROGRESS": "Сброс пароля"
   },
+  "VOLUME_TYPE": {
+    "ROOT": "ROOT",
+    "DATADISK": "DATADISK"
+  },
   "DATE_TIME": {
     "AM": "AM",
     "PM": "PM",

src/style/app.scss

@@ -184,11 +184,11 @@ md-card.custom-card {
   display: flex;
   padding: 2px;
 
-  & > div.first {
+  & > div.flex-1 {
     flex: 1;
   }
 
-  & > div.last {
+  & > div.flex-2 {
     flex: 2;
 
     & span.fixed-length-span {