feat(vm-snapshots): implement vm snapshots details sidebar

src/app/account/account/account-item.component.ts

@@ -1,9 +1,9 @@
 import { EventEmitter } from '@angular/core';
 import { MatMenuTrigger } from '@angular/material';
-import { AuthService } from '../../shared/services/auth.service';
 import { Account } from '../../shared/models';
-import { stateTranslations } from '../account-container/account.container';
+import { AuthService } from '../../shared/services/auth.service';
 import { isUserBelongsToAccount } from '../../shared/utils/account';
+import { stateTranslations } from '../account-container/account.container';
 
 export class AccountItemComponent {
   public item: Account;
@@ -19,11 +19,8 @@ export class AccountItemComponent {
 
   constructor(protected authService: AuthService) {}
 
-  public handleClick(e: MouseEvent): void {
-    e.stopPropagation();
-    if (!this.matMenuTrigger || !this.matMenuTrigger.menuOpen) {
-      this.onClick.emit(this.item);
-    }
+  public handleClick(): void {
+    this.onClick.emit(this.item);
   }
 
   public isAdmin() {

src/app/account/account/card-item/account-card-item.component.html

@@ -1,5 +1,5 @@
 <mat-card
-  (click)="handleClick($event)"
+  (click)="handleClick()"
   [class.card-selected]="isSelected(item)"
   class="entity-card"
 >
@@ -18,7 +18,9 @@
         [style.visibility]="!isSelf ? 'visible' : 'hidden'"
         mat-icon-button
         [matMenuTriggerFor]="actionsMenu"
-        class="entity-card-menu">
+        class="entity-card-menu"
+        (click)="$event.stopPropagation()"
+      >
         <mat-icon class="mdi-dots-vertical"></mat-icon>
       </button>
     </ng-container>

src/app/account/account/row-item/account-row-item.component.html

@@ -1,5 +1,5 @@
 <mat-list-item
-  (click)="handleClick($event)"
+  (click)="handleClick()"
   [class.card-selected]="isSelected(item)"
   class="entity-list-item"
 >
@@ -30,6 +30,7 @@ <h2 class="entity-list-item-title">
     mat-icon-button
     [style.visibility]="isAdmin() && !isSelf ? 'visible' : 'hidden'"
     [matMenuTriggerFor]="actionsMenu"
+    (click)="$event.stopPropagation()"
   >
     <mat-icon class="mdi-dots-vertical"></mat-icon>
   </button>

src/app/reducers/snapshots/redux/snapshot.reducers.spec.ts

@@ -92,67 +92,4 @@ describe('Snapshot Reducer', () => {
     expect(state.ids).toEqual(['2']);
     expect(state.entities).toEqual({ 2: snapshots[1] });
   });
-
-  it('should select filtered snapshots', () => {
-    const differentSnapshots: Snapshot[] = [
-      {
-        id: '1',
-        domain: 'test-domain',
-        domainid: 'test-domain-id',
-        created: '2016-01-11T15:59:42+0700',
-        physicalsize: 100,
-        volumeid: 'volume-id-2',
-        name: 'snapshot for testing',
-        tags: [],
-        state: SnapshotStates.BackedUp,
-        revertable: true,
-        snapshottype: SnapshotType.Daily,
-        account: 'develop',
-      },
-      {
-        id: '2',
-        domain: 'test-domain',
-        domainid: 'test-domain-id',
-        created: '2017-10-15T15:59:42+0700',
-        physicalsize: 100,
-        volumeid: 'volume-id-3',
-        name: 'snapshot for testing',
-        tags: [],
-        state: SnapshotStates.BackedUp,
-        revertable: false,
-        snapshottype: SnapshotType.Manual,
-        account: 'test',
-      },
-    ];
-
-    let slice = fromSnapshots.selectFilteredSnapshots.projector(differentSnapshots, {
-      accounts: [],
-      vmIds: [],
-      date: '2017-10-15T00:00:00.000Z',
-      query: undefined,
-      volumeSnapshotTypes: [],
-    });
-
-    expect(slice).toEqual([differentSnapshots[1]]);
-
-    slice = fromSnapshots.selectFilteredSnapshots.projector(differentSnapshots, {
-      accounts: [],
-      vmIds: [],
-      date: null,
-      query: undefined,
-      volumeSnapshotTypes: [SnapshotType.Daily],
-    });
-
-    expect(slice).toEqual([differentSnapshots[0]]);
-
-    slice = fromSnapshots.selectFilteredSnapshots.projector(differentSnapshots, {
-      accounts: ['develop'],
-      vmIds: [],
-      date: null,
-      query: undefined,
-      volumeSnapshotTypes: [],
-    });
-
-    expect(slice).toEqual([differentSnapshots[0]]);
-  });
 });

src/app/reducers/snapshots/redux/snapshot.reducers.ts

@@ -1,8 +1,7 @@
 import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 import * as moment from 'moment';
-import { getSnapshotDescription, Snapshot } from '../../../shared/models';
-import * as snapshotPageSelectors from '../../../snapshot/store/snapshot-page.selectors';
+import { Snapshot } from '../../../shared/models';
 import * as volumeActions from '../../volumes/redux/volumes.actions';
 import * as snapshotActions from './snapshot.actions';
 
@@ -89,48 +88,3 @@ export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.get
 );
 
 export const isLoading = createSelector(getSnapshotEntitiesState, state => state.loading);
-
-export const getSelectedSnapshot = createSelector(
-  getSnapshotEntitiesState,
-  state => state.entities[state.selectedSnapshotId],
-);
-
-export const selectFilteredSnapshots = createSelector(
-  selectAll,
-  snapshotPageSelectors.getFilters,
-  (snapshots, filter) => {
-    const filterByTypes = (snapshot: Snapshot) =>
-      !filter.volumeSnapshotTypes.length ||
-      !!filter.volumeSnapshotTypes.find(type => type === snapshot.snapshottype);
-
-    const filterByAccount = (snapshot: Snapshot) =>
-      !filter.accounts.length || !!filter.accounts.find(id => id === snapshot.account);
-
-    const filterByDate = (snapshot: Snapshot) =>
-      !filter.date ||
-      moment(snapshot.created).isBetween(
-        moment(filter.date).startOf('day'),
-        moment(filter.date).endOf('day'),
-      );
-
-    const queryLower = filter.query && filter.query.toLowerCase();
-    const filterByQuery = (snapshot: Snapshot) => {
-      return (
-        !filter.query ||
-        snapshot.name.toLowerCase().indexOf(queryLower) > -1 ||
-        (getSnapshotDescription(snapshot) &&
-          getSnapshotDescription(snapshot)
-            .toLowerCase()
-            .indexOf(queryLower) > -1)
-      );
-    };
-
-    return snapshots.filter(
-      (snapshot: Snapshot) =>
-        filterByAccount(snapshot) &&
-        filterByTypes(snapshot) &&
-        filterByDate(snapshot) &&
-        filterByQuery(snapshot),
-    );
-  },
-);

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

@@ -1,5 +1,5 @@
 <mat-card
-  (click)="handleClick($event)"
+  (click)="handleClick()"
   [class.card-selected]="isSelected(item)"
   class="entity-card"
 >
@@ -8,7 +8,7 @@
     <mat-card-title [matTooltip]="item.name" class="entity-card-title">
       <span [innerHTML]="item.name | highlight:query"></span>
     </mat-card-title>
-    <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="entity-card-menu">
+    <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="entity-card-menu" (click)="$event.stopPropagation()">
       <mat-icon class="mdi-dots-vertical"></mat-icon>
     </button>
   </mat-card-header>

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

@@ -1,5 +1,5 @@
 <mat-list-item
-  (click)="handleClick($event)"
+  (click)="handleClick()"
   [class.card-selected]="isSelected(item)"
   class="entity-list-item"
 >
@@ -20,7 +20,7 @@ <h2 class="entity-list-item-title" [innerHTML]="item.name | highlight:query"></h
     <span [innerHTML]="item.description | highlight:query"></span>
   </div>
 
-  <button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+  <button mat-icon-button [matMenuTriggerFor]="actionsMenu" (click)="$event.stopPropagation()">
     <mat-icon class="mdi-dots-vertical"></mat-icon>
   </button>
 

src/app/security-group/sg-list-item/security-group-list-item.component.ts

@@ -1,10 +1,10 @@
 import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { MatMenuTrigger } from '@angular/material';
-
-import { getType, isSecurityGroupNative, SecurityGroup } from '../sg.model';
+import { NgrxEntities } from '../../shared/interfaces';
 import { VirtualMachine } from '../../vm';
 import { SecurityGroupViewMode } from '../sg-view-mode';
-import { NgrxEntities } from '../../shared/interfaces';
+
+import { getType, isSecurityGroupNative, SecurityGroup } from '../sg.model';
 
 export class SecurityGroupListItemComponent implements OnChanges {
   public item: SecurityGroup;
@@ -34,11 +34,8 @@ export class SecurityGroupListItemComponent implements OnChanges {
     }
   }
 
-  public handleClick(e: MouseEvent): void {
-    e.stopPropagation();
-    if (!this.matMenuTrigger.menuOpen) {
-      this.onClick.emit(this.item);
-    }
+  public handleClick(): void {
+    this.onClick.emit(this.item);
   }
 
   public get isPrivate(): boolean {

src/app/shared/components/state-indicator/round-state-indicator.component.scss

@@ -1,5 +1,9 @@
 $circle-size: 14px;
 
+:host {
+  margin-right: 5px;
+}
+
 mat-icon {
   font-size: $circle-size;
   width: $circle-size;

src/app/shared/models/vm-snapshot.model.ts

@@ -1,4 +1,6 @@
+import { SnapshotType } from '../types';
 import { BaseModel } from './base.model';
+import { Snapshot } from './snapshot.model';
 
 export interface VmSnapshot extends BaseModel {
   account: string;
@@ -16,3 +18,10 @@ export interface VmSnapshot extends BaseModel {
   virtualmachineid: string;
   zoneid: string;
 }
+
+export function getSnapshotType(snapshot: VmSnapshot | Snapshot): SnapshotType {
+  if (!snapshot) {
+    return undefined;
+  }
+  return (snapshot as VmSnapshot).virtualmachineid == null ? SnapshotType.Volume : SnapshotType.VM;
+}

src/app/shared/types/index.ts

@@ -1,4 +1,5 @@
 export * from './day-of-week';
 export * from './language';
+export * from './snapshot-type';
 export * from './time-format';
 export * from './keyboard-layout';

src/app/shared/types/snapshot-type.ts

@@ -0,0 +1,4 @@
+export enum SnapshotType {
+  Volume,
+  VM,
+}

src/app/snapshot/components/vm-snapshot-action-menu/vm-snapshot-action-menu.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { State, vmSnapshotsActions } from '../../../root-store';
 import { VmState } from '../../../vm/shared/vm.model';
+import { VmSnapshotSidebarViewModel } from '../../models/vm-snapshot-sidebar.view-model';
 import { VmSnapshotViewModel } from '../../models/vm-snapshot.view-model';
 
 @Component({
@@ -11,7 +12,7 @@ import { VmSnapshotViewModel } from '../../models/vm-snapshot.view-model';
 })
 export class VmSnapshotActionMenuComponent implements OnInit {
   @Input()
-  public snapshot: VmSnapshotViewModel;
+  public snapshot: VmSnapshotViewModel | VmSnapshotSidebarViewModel;
   public vmStates = VmState;
 
   constructor(private store: Store<State>) {}

src/app/snapshot/components/vm-snapshot-card-view/vm-snapshot-card-view.component.html

@@ -1,4 +1,8 @@
-<mat-card class="entity-card">
+<mat-card
+  class="entity-card"
+  [class.card-selected]="isSelected(item)"
+  (click)="onSelect()"
+>
   <mat-card-header class="entity-card-header">
     <cs-round-state-indicator
       class="entity-card-thumbnail"
@@ -8,7 +12,7 @@
     <mat-card-title class="entity-card-title" [matTooltip]="item.name">
       <span>{{ item.name }}</span>
     </mat-card-title>
-    <button mat-icon-button [mat-menu-trigger-for]="actionsMenu" class="entity-card-menu">
+    <button mat-icon-button [mat-menu-trigger-for]="actionsMenu" class="entity-card-menu" (click)="$event.stopPropagation()">
       <mat-icon class="mdi-dots-vertical"></mat-icon>
     </button>
   </mat-card-header>

src/app/snapshot/components/vm-snapshot-card-view/vm-snapshot-card-view.component.ts

@@ -1,16 +1,23 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material';
 import { VmSnapshotViewModel } from '../../models/vm-snapshot.view-model';
 
 @Component({
   selector: 'cs-vm-snapshot-card-view',
   templateUrl: './vm-snapshot-card-view.component.html',
   styleUrls: ['./vm-snapshot-card-view.component.scss'],
 })
-export class VmSnapshotCardViewComponent implements OnInit {
+export class VmSnapshotCardViewComponent {
   @Input()
   public item: VmSnapshotViewModel;
+  @Input()
+  public isSelected: (vmSnapshot: VmSnapshotViewModel) => boolean;
+  @Output()
+  public clicked = new EventEmitter<VmSnapshotViewModel>();
+  @ViewChild(MatMenuTrigger)
+  public matMenuTrigger: MatMenuTrigger;
 
-  constructor() {}
-
-  ngOnInit() {}
+  public onSelect() {
+    this.clicked.emit(this.item);
+  }
 }

src/app/snapshot/components/vm-snapshot-list-view/vm-snapshot-list-view.component.html

@@ -1,4 +1,8 @@
-<mat-list-item  class="entity-list-item">
+<mat-list-item
+  class="entity-list-item"
+  [class.card-selected]="isSelected(item)"
+  (click)="onSelect()"
+>
   <cs-square-state-indicator
     class="entity-list-item-status-indicator"
     [state]="item.state.toLowerCase()"
@@ -17,7 +21,7 @@ <h2 class="entity-list-item-title">
     {{ 'SNAPSHOT_PAGE.CARD.CREATED' | translate }}: {{ item.created | csStringifyDate }}
   </div>
 
-  <button mat-icon-button [mat-menu-trigger-for]="actionsMenu">
+  <button mat-icon-button [mat-menu-trigger-for]="actionsMenu" (click)="$event.stopPropagation()">
     <mat-icon class="mdi-dots-vertical"></mat-icon>
   </button>
 

src/app/snapshot/components/vm-snapshot-list-view/vm-snapshot-list-view.component.ts

@@ -1,16 +1,23 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material';
 import { VmSnapshotViewModel } from '../../models/vm-snapshot.view-model';
 
 @Component({
   selector: 'cs-vm-snapshot-list-view',
   templateUrl: './vm-snapshot-list-view.component.html',
   styleUrls: ['./vm-snapshot-list-view.component.scss'],
 })
-export class VmSnapshotListViewComponent implements OnInit {
+export class VmSnapshotListViewComponent {
   @Input()
   public item: VmSnapshotViewModel;
+  @Input()
+  public isSelected: (vmSnapshot: VmSnapshotViewModel) => boolean;
+  @Output()
+  public clicked = new EventEmitter<VmSnapshotViewModel>();
+  @ViewChild(MatMenuTrigger)
+  public matMenuTrigger: MatMenuTrigger;
 
-  constructor() {}
-
-  ngOnInit() {}
+  public onSelect() {
+    this.clicked.emit(this.item);
+  }
 }