fix: repair "group by" filter (#1060)

PR Close #1008

src/app/account/account-container/account-filter.container.ts

@@ -1,21 +1,14 @@
-import {
-  Component,
-  Input,
-  OnInit
-} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import * as accountActions from '../../reducers/accounts/redux/accounts.actions';
 import * as domainActions from '../../reducers/domains/redux/domains.actions';
 import * as roleActions from '../../reducers/roles/redux/roles.actions';
 import * as fromAccounts from '../../reducers/accounts/redux/accounts.reducers';
 import * as fromDomains from '../../reducers/domains/redux/domains.reducers';
 import * as fromRoles from '../../reducers/roles/redux/roles.reducers';
 import { Store } from '@ngrx/store';
-import { State } from '../../reducers/index';
+import { State } from '../../reducers';
 import { FilterService } from '../../shared/services/filter.service';
-import {
-  ActivatedRoute,
-  Router
-} from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { SessionStorageService } from '../../shared/services/session-storage.service';
 import { WithUnsubscribe } from '../../utils/mixins/with-unsubscribe';
 
@@ -25,6 +18,7 @@ const FILTER_KEY = 'accountListFilters';
   selector: 'cs-account-filter-container',
   template: `
     <cs-account-list-filter
+      *loading="loading$ | async"
       [domains]="domains$ | async"
       [roles]="roles$ | async"
       [roleTypes]="roleTypes$ | async"
@@ -47,6 +41,7 @@ export class AccountFilterContainerComponent extends WithUnsubscribe() implement
   @Input() selectedGroupings: Array<any>;
 
   readonly filters$ = this.store.select(fromAccounts.filters);
+  readonly loading$ = this.store.select(fromAccounts.isLoading);
   readonly domains$ = this.store.select(fromDomains.selectAll);
   readonly roles$ = this.store.select(fromRoles.selectAll);
   readonly roleTypes$ = this.store.select(fromRoles.roleTypes);

src/app/account/account-list-filter/account-list-filter.component.ts

@@ -1,18 +1,13 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output
-} from '@angular/core';
-import { Role } from '../../shared/models/role.model';
-import { Domain } from '../../shared/models/domain.model';
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
+import { Domain, Role } from '../../shared/models';
 import { stateTranslations } from '../account-container/account.container';
+import { reorderAvailableGroupings } from '../../shared/utils/reorder-groupings';
 
 @Component({
   selector: 'cs-account-list-filter',
   templateUrl: 'account-list-filter.component.html'
 })
-export class AccountListFilterComponent {
+export class AccountListFilterComponent implements OnInit {
   @Input() public domains: Array<Domain>;
   @Input() public roleTypes: Array<string>;
   @Input() public roles: Array<Role>;
@@ -33,4 +28,7 @@ export class AccountListFilterComponent {
     return stateTranslations[state];
   }
 
+  public ngOnInit() {
+    this.groupings = reorderAvailableGroupings(this.groupings, this.selectedGroupings);
+  }
 }

src/app/shared/directives/loading.directive.ts

@@ -8,6 +8,10 @@ import {
 } from '@angular/core';
 import { LoaderComponent } from '../components/loader/loader.component';
 
+/*
+* This directive is used to check the condition on the basis of which or shows an element or spinner.
+* This is similar to *ngIf="condition".
+ */
 @Directive({
   // tslint:disable-next-line
   selector: '[loading]',

src/app/shared/models/index.ts

@@ -18,4 +18,5 @@ export * from './role.model';
 export * from './domain.model';
 export * from './account.model';
 export * from './configuration.model';
+export * from './grouping.model';
 export * from './user.model';

src/app/shared/utils/reorder-groupings.ts

@@ -0,0 +1,7 @@
+import { Grouping } from '../models';
+
+export function reorderAvailableGroupings(availableGroupings: Grouping[], selectedGroupings: Grouping[]): Grouping[] {
+  const selectedKeys = selectedGroupings.map(el => el.key);
+  const notSelected = availableGroupings.filter(el => !selectedKeys.includes(el.key));
+  return [ ...selectedGroupings, ...notSelected];
+}

src/app/snapshot/snapshots-page/snapshot-filter/snapshot-filter.component.ts

@@ -1,14 +1,15 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { Account } from '../../../shared/models/account.model';
+import { Account } from '../../../shared/models';
 import { DateTimeFormatterService } from '../../../shared/services/date-time-formatter.service';
 import { Language } from '../../../shared/services/language.service';
+import { reorderAvailableGroupings } from '../../../shared/utils/reorder-groupings';
 
 @Component({
   selector: 'cs-snapshots-filter',
   templateUrl: './snapshot-filter.component.html'
 })
-export class SnapshotFilterComponent {
+export class SnapshotFilterComponent  implements OnInit {
   @Input() public isLoading: boolean;
   @Input() public accounts: Array<Account> = [];
   @Input() public types: Array<any> = [];
@@ -36,4 +37,8 @@ export class SnapshotFilterComponent {
     public dateTimeFormatterService: DateTimeFormatterService
   ) {
   }
+
+  public ngOnInit() {
+    this.availableGroupings = reorderAvailableGroupings(this.availableGroupings, this.selectedGroupings);
+  }
 }

src/app/ssh-keys/containers/ssh-key-filter/ssh-key-filter.container.ts

@@ -7,7 +7,7 @@ import { SessionStorageService } from '../../../shared/services/session-storage.
 import { WithUnsubscribe } from '../../../utils/mixins/with-unsubscribe';
 import { sshKeyGroupings } from '../ssh-key-page/ssh-key-page.container';
 import { AuthService } from '../../../shared/services/auth.service';
-import { Grouping } from '../../../shared/models/grouping.model';
+import { Grouping } from '../../../shared/models';
 
 import * as accountAction from '../../../reducers/accounts/redux/accounts.actions';
 import * as sshKeyActions from '../../../reducers/ssh-keys/redux/ssh-key.actions';
@@ -20,6 +20,7 @@ const FILTER_KEY = 'sshKeyListFilters';
   selector: 'cs-ssh-key-filter-container',
   template: `
     <cs-ssh-key-filter
+      *loading="loading$ | async"
       [accounts]="accounts$ | async"
       [selectedAccountIds]="selectedAccountIds$ | async"
       [selectedGroupings]="selectedGroupings$ | async"
@@ -32,7 +33,8 @@ export class ShhKeyFilterContainerComponent extends WithUnsubscribe() implements
 
   public groupings: Array<Grouping> = sshKeyGroupings;
 
-  private filters$ = this.store.select(fromSshKeys.filters);
+  readonly filters$ = this.store.select(fromSshKeys.filters);
+  readonly loading$ = this.store.select(fromSshKeys.isLoading);
   readonly accounts$ = this.store.select(fromAccounts.selectAll);
   readonly selectedGroupings$ = this.store.select(fromSshKeys.filterSelectedGroupings);
   readonly selectedAccountIds$ = this.store.select(fromSshKeys.filterSelectedAccountIds);

src/app/ssh-keys/ssh-key-filter/ssh-key-filter.component.ts

@@ -1,21 +1,20 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output
-} from '@angular/core';
-import { Grouping } from '../../shared/models/grouping.model';
-
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Grouping } from '../../shared/models';
+import { reorderAvailableGroupings } from '../../shared/utils/reorder-groupings';
 
 @Component({
   selector: 'cs-ssh-key-filter',
   templateUrl: 'ssh-key-filter.component.html'
 })
-export class ShhKeyFilterComponent {
+export class ShhKeyFilterComponent implements OnInit {
   @Input() public accounts: Array<Account>;
   @Input() public selectedAccountIds: Array<string> = [];
   @Input() public selectedGroupings: Array<Grouping> = [];
   @Input() public groupings: Array<Grouping>;
   @Output() public onGroupingsChange = new EventEmitter<Array<Grouping>>();
   @Output() public onAccountsChange = new EventEmitter<Array<string>>();
+
+  public ngOnInit() {
+    this.groupings = reorderAvailableGroupings(this.groupings, this.selectedGroupings);
+  }
 }

src/app/template/containers/template-filter.container.html

@@ -1,31 +1,30 @@
-<cs-top-bar>
-  <cs-template-filters
-    [dialogMode]="dialogMode"
-    [showIsoSwitch]="showIsoSwitch"
+<cs-template-filters
+  *loading="loading$ | async"
+  [dialogMode]="dialogMode"
+  [showIsoSwitch]="showIsoSwitch"
 
-    [accounts]="accounts$ | async"
-    [domains]="domains$ | async"
-    [osTypes]="osTypes$ | async"
-    [zones]="zones$ | async"
-    [groups]="groups$ | async"
-    [availableGroupings]="availableGroupings"
-    [query]="query$ | async"
+  [accounts]="accounts$ | async"
+  [domains]="domains$ | async"
+  [osTypes]="osTypes$ | async"
+  [zones]="zones$ | async"
+  [groups]="groups$ | async"
+  [availableGroupings]="availableGroupings"
+  [query]="query$ | async"
 
-    [viewMode]="selectedViewMode$ | async"
-    [selectedAccountIds]="selectedAccountIds$ | async"
-    [selectedGroupings]="selectedGroupings$ | async"
-    [selectedZones]="selectedZones$ | async"
-    [selectedTypes]="selectedTypes$ | async"
-    [selectedOsFamilies]="selectedOsFamilies$ | async"
-    [selectedGroups]="selectedGroups$ | async"
+  [viewMode]="selectedViewMode$ | async"
+  [selectedAccountIds]="selectedAccountIds$ | async"
+  [selectedGroupings]="selectedGroupings$ | async"
+  [selectedZones]="selectedZones$ | async"
+  [selectedTypes]="selectedTypes$ | async"
+  [selectedOsFamilies]="selectedOsFamilies$ | async"
+  [selectedGroups]="selectedGroups$ | async"
 
-    (viewModeChange)="onViewModeChange($event)"
-    (selectedAccountsChange)="onAccountsChange($event)"
-    (selectedGroupingsChange)="onGroupingsChange($event)"
-    (selectedTypesChange)="onTypesChange($event)"
-    (selectedZonesChange)="onZonesChange($event)"
-    (selectedGroupsChange)="onGroupsChange($event)"
-    (selectedOsFamiliesChange)="onOsFamiliesChange($event)"
-    (queryChange)="onQueryChange($event)"
-  ></cs-template-filters>
-</cs-top-bar>
+  (viewModeChange)="onViewModeChange($event)"
+  (selectedAccountsChange)="onAccountsChange($event)"
+  (selectedGroupingsChange)="onGroupingsChange($event)"
+  (selectedTypesChange)="onTypesChange($event)"
+  (selectedZonesChange)="onZonesChange($event)"
+  (selectedGroupsChange)="onGroupsChange($event)"
+  (selectedOsFamiliesChange)="onOsFamiliesChange($event)"
+  (queryChange)="onQueryChange($event)"
+></cs-template-filters>

src/app/template/containers/template-filter.container.ts

@@ -1,24 +1,12 @@
+import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { WithUnsubscribe } from '../../utils/mixins/with-unsubscribe';
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnInit
-} from '@angular/core';
-import { OsFamily } from '../../shared/models/os-type.model';
-import {
-  TemplateFilters,
-  TemplateResourceType
-} from '../shared/base-template.service';
+import { OsFamily } from '../../shared/models';
+import { TemplateFilters, TemplateResourceType } from '../shared/base-template.service';
 import { FilterService } from '../../shared/services/filter.service';
 import { Store } from '@ngrx/store';
-import {
-  ActivatedRoute,
-  Router
-} from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { SessionStorageService } from '../../shared/services/session-storage.service';
-import { State } from '../../reducers/index';
+import { State } from '../../reducers';
 
 import * as fromTemplates from '../../reducers/templates/redux/template.reducers';
 import * as templateActions from '../../reducers/templates/redux/template.actions';
@@ -41,6 +29,7 @@ const FILTER_KEY = 'templateListFilters';
 })
 export class TemplateFilterContainerComponent extends WithUnsubscribe() implements OnInit, AfterViewInit {
   readonly filters$ = this.store.select(fromTemplates.filters);
+  readonly loading$ = this.store.select(fromTemplates.isLoading);
   readonly osTypes$ = this.store.select(fromOsTypes.selectAll);
   readonly accounts$ = this.store.select(fromAccounts.selectAll);
   readonly domains$ = this.store.select(fromDomains.selectEntities);

src/app/template/template-filters/template-filters.component.ts

@@ -1,14 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { OsFamily, OsType } from '../../shared/models/os-type.model';
-import { Zone } from '../../shared/models/zone.model';
 import { TemplateFilters, TemplateResourceType } from '../shared/base-template.service';
-import { Account } from '../../shared/models/account.model';
-import { Domain, getPath } from '../../shared/models/domain.model';
+import { Account, Domain, getPath, OsFamily, OsType, Zone } from '../../shared/models';
 import { Dictionary } from '@ngrx/entity/src/models';
 import { AuthService } from '../../shared/services/auth.service';
 import { TemplateGroup } from '../../shared/models/template-group.model';
 import { TranslateService } from '@ngx-translate/core';
 import { Language } from '../../shared/services/language.service';
+import { reorderAvailableGroupings } from '../../shared/utils/reorder-groupings';
 
 
 @Component({
@@ -78,6 +76,8 @@ export class TemplateFiltersComponent implements OnInit {
         this.selectedTypes = this.categoryFilters.concat();
       }
     }
+
+    this.availableGroupings = reorderAvailableGroupings(this.availableGroupings, this.selectedGroupings);
   }
 
   public get locale(): Language {

src/app/vm/container/vm-filter.container.ts

@@ -1,11 +1,5 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnInit
-} from '@angular/core';
-import { State } from '../../reducers/index';
+import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { State } from '../../reducers';
 import { Store } from '@ngrx/store';
 import * as fromVMs from '../../reducers/vm/redux/vm.reducers';
 import * as fromAccounts from '../../reducers/accounts/redux/accounts.reducers';
@@ -15,14 +9,12 @@ import * as accountActions from '../../reducers/accounts/redux/accounts.actions'
 import * as zoneActions from '../../reducers/zones/redux/zones.actions';
 import { FilterService } from '../../shared/services/filter.service';
 import { SessionStorageService } from '../../shared/services/session-storage.service';
-import {
-  ActivatedRoute,
-  Router
-} from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { VmState } from '../shared/vm.model';
 import { AuthService } from '../../shared/services/auth.service';
 import { WithUnsubscribe } from '../../utils/mixins/with-unsubscribe';
 import * as debounce from 'lodash/debounce';
+import { Grouping } from '../../shared/models';
 
 const FILTER_KEY = 'vmListFilters';
 
@@ -52,8 +44,8 @@ const FILTER_KEY = 'vmListFilters';
 })
 export class VMFilterContainerComponent extends WithUnsubscribe() implements OnInit, AfterViewInit {
 
-  @Input() groupings: Array<any>;
-  @Input() selectedGroupings: Array<any>;
+  @Input() groupings: Array<Grouping>;
+  @Input() selectedGroupings: Array<Grouping>;
 
   readonly filters$ = this.store.select(fromVMs.filters);
   readonly query$ = this.store.select(fromVMs.filterQuery);
@@ -88,13 +80,13 @@ export class VMFilterContainerComponent extends WithUnsubscribe() implements OnI
   ].filter(state => !state.hasOwnProperty('access') || state['access']);
 
   private filterService = new FilterService({
-    zones: { type: 'array', defaultOption: [] },
-    groups: { type: 'array', defaultOption: [] },
-    groupings: { type: 'array', defaultOption: [] },
-    query: { type: 'string' },
-    states: { type: 'array', options: this.states.map(_ => _.state), defaultOption: [] },
-    accounts: {type: 'array', defaultOption: [] }
-  },
+      zones: { type: 'array', defaultOption: [] },
+      groups: { type: 'array', defaultOption: [] },
+      groupings: { type: 'array', defaultOption: [] },
+      query: { type: 'string' },
+      states: { type: 'array', options: this.states.map(_ => _.state), defaultOption: [] },
+      accounts: { type: 'array', defaultOption: [] }
+    },
     this.router,
     this.sessionStorage,
     FILTER_KEY,