feat(core): add categories for application data sources (#5058)

app/scripts/modules/core/src/application/application.module.ts

@@ -3,6 +3,7 @@ import { module } from 'angular';
 import { PAGER_DUTY_MODULE } from 'core/pagerDuty/pagerDuty.module';
 
 import './applicationSearchResultType';
+import './nav/defaultCategories';
 import { APPLICATION_NAV_COMPONENT } from './nav/applicationNav.component';
 import { APPLICATION_NAV_SECONDARY_COMPONENT } from './nav/applicationNavSecondary.component';
 import { APPLICATION_STATE_PROVIDER } from './application.state.provider';

app/scripts/modules/core/src/application/nav/applicationNav.component.ts

@@ -37,7 +37,7 @@ export class ApplicationNavComponent implements IComponentOptions {
           analytics-event="{{dataSource.title}}"
           ng-class="{active: $ctrl.isActive(dataSource)}"
       >
-        <i ng-if="dataSource.icon" class="ds-icon fa fa-{{dataSource.icon}}"></i>
+        <i ng-if="dataSource.icon" class="{{dataSource.icon}}"></i>
         {{dataSource.label}}
 
         <x-data-source-notifications

app/scripts/modules/core/src/application/nav/applicationNavSecondary.component.ts

@@ -32,7 +32,6 @@ export class ApplicationNavSecondaryComponent implements IComponentOptions {
          analytics-category="Application Nav"
          analytics-event="{{dataSource.title}}"
          ng-class="{active: $ctrl.isActive(dataSource)}">
-         <i ng-if="dataSource.icon" class="ds-icon fa fa-{{dataSource.icon}}"></i>
         {{dataSource.label}}
 
          <x-data-source-notifications

app/scripts/modules/core/src/application/nav/defaultCategories.ts

@@ -0,0 +1,20 @@
+import { navigationCategoryRegistry } from './navigationCategory.registry';
+
+export const INFRASTRUCTURE_KEY = 'infrastructure';
+export const DELIVERY_KEY = 'delivery';
+
+navigationCategoryRegistry.register({
+  key: DELIVERY_KEY,
+  label: 'Delivery',
+  icon: 'fa fa-tasks',
+  primary: true,
+  order: 100,
+});
+
+navigationCategoryRegistry.register({
+  key: INFRASTRUCTURE_KEY,
+  label: 'Infrastructure',
+  icon: 'fa fa-cloud',
+  primary: true,
+  order: 200,
+});

app/scripts/modules/core/src/application/nav/navigationCategory.registry.ts

@@ -0,0 +1,46 @@
+import { cloneDeep } from 'lodash';
+
+export interface INavigationCategory {
+  key: string;
+  label: string;
+  icon?: string;
+  primary: boolean;
+  order: number;
+}
+
+export class NavigationCategoryRegistry {
+  private categories: INavigationCategory[] = [];
+  private orderOverrides: Map<string, number> = new Map();
+
+  public register(category: INavigationCategory): void {
+    this.categories.push(category);
+  }
+
+  public get(key: string): INavigationCategory {
+    return cloneDeep(this.categories.find(c => c.key === key));
+  }
+
+  public has(key: string): boolean {
+    return this.categories.some(c => c.key === key);
+  }
+
+  public getAll(): INavigationCategory[] {
+    return this.categories.slice().sort((a, b) => this.getOrder(a) - this.getOrder(b));
+  }
+
+  public overrideCategoryOrder(key: string, order: number): void {
+    this.orderOverrides.set(key, order);
+  }
+
+  public getHighestOrder(): number {
+    return Math.max(...this.categories.map(c => c.order).concat(Array.from(this.orderOverrides.values())));
+  }
+
+  public getOrder(category: INavigationCategory): number {
+    const { key, order } = category;
+    return this.orderOverrides.has(key) ? this.orderOverrides.get(key) : order;
+  }
+
+}
+
+export const navigationCategoryRegistry = new NavigationCategoryRegistry();

app/scripts/modules/core/src/application/service/applicationDataSource.registry.ts

@@ -1,6 +1,6 @@
 import { module } from 'angular';
 
-import * as _ from 'lodash';
+import { cloneDeep } from 'lodash';
 
 import { IDataSourceConfig } from './applicationDataSource';
 
@@ -34,7 +34,7 @@ export class ApplicationDataSourceRegistry {
   }
 
   public getDataSources(): IDataSourceConfig[] {
-    return _.cloneDeep(this.dataSources);
+    return cloneDeep(this.dataSources);
   }
 }
 

app/scripts/modules/core/src/application/service/applicationDataSource.ts

@@ -158,36 +158,11 @@ export interface IDataSourceConfig {
    * Default: true
    */
   visible?: boolean;
-}
-
-/**
- * @deprecated just use the IDataSourceConfig interface
- */
-export class DataSourceConfig implements IDataSourceConfig {
-  public activeState: string;
-  public afterLoad: (application: Application) => void;
-  public autoActivate = false;
-  public badge: string;
-  public credentialsField: string;
-  public description: string;
-  public icon: string;
-  public key: string;
-  public label: string;
-  public lazy = false;
-  public loader: (application: Application) => IPromise<any>;
-  public onLoad: (application: Application, result: any) => IPromise<any>;
-  public optIn = false;
-  public optional = false;
-  public primary = false;
-  public providerField: string;
-  public regionField: string;
-  public requireConfiguredApp = false;
-  public sref: string;
-  public visible = true;
 
-  constructor(config: IDataSourceConfig) {
-    Object.assign(this, config);
-  }
+  /**
+   * (Optional) Determines which second-level navigation menu this data source will belong to
+   */
+  category?: string;
 }
 
 @BindAll()
@@ -204,6 +179,7 @@ export class ApplicationDataSource implements IDataSourceConfig {
   public icon: string;
   public key: string;
   public label: string;
+  public category: string;
   public lazy = false;
   public loader: (application: Application) => IPromise<any>;
   public onLoad: (application: Application, result: any) => IPromise<any>;
@@ -266,9 +242,9 @@ export class ApplicationDataSource implements IDataSourceConfig {
    */
   public lastRefresh: number;
 
-  private refreshStream: Subject<void> = new Subject();
+  public refresh$: Subject<void> = new Subject();
 
-  private refreshFailureStream: Subject<any> = new Subject();
+  public refreshFailure$: Subject<any> = new Subject();
 
   /**
    * Simple counter used to track the most recent refresh call to avoid data stomping
@@ -289,7 +265,7 @@ export class ApplicationDataSource implements IDataSourceConfig {
    */
   public dataUpdated(): void {
     if (this.loaded) {
-      this.refreshStream.next(null);
+      this.refresh$.next(null);
     }
   }
 
@@ -329,10 +305,10 @@ export class ApplicationDataSource implements IDataSourceConfig {
    * @return a method to call to unsubscribe
    */
   public onNextRefresh($scope: IScope, method: any, failureMethod?: any): () => void {
-    const success: Subscription = this.refreshStream.take(1).subscribe(method);
+    const success: Subscription = this.refresh$.take(1).subscribe(method);
     let failure: Subscription = null;
     if (failureMethod) {
-      failure = this.refreshFailureStream.take(1).subscribe(failureMethod);
+      failure = this.refreshFailure$.take(1).subscribe(failureMethod);
     }
     const unsubscribe = () => {
       success.unsubscribe();
@@ -357,10 +333,10 @@ export class ApplicationDataSource implements IDataSourceConfig {
    * @return a method to call to unsubscribe
    */
   public onRefresh($scope: IScope, method: any, failureMethod?: any): () => void {
-    const success: Subscription = this.refreshStream.subscribe(method);
+    const success: Subscription = this.refresh$.subscribe(method);
     let failure: Subscription = null;
     if (failureMethod) {
-      failure = this.refreshFailureStream.subscribe(failureMethod);
+      failure = this.refreshFailure$.subscribe(failureMethod);
     }
     const unsubscribe = () => {
       success.unsubscribe();
@@ -393,8 +369,8 @@ export class ApplicationDataSource implements IDataSourceConfig {
     } else if (this.loadFailure) {
       deferred.reject();
     } else {
-      this.refreshStream.take(1).subscribe(deferred.resolve);
-      this.refreshFailureStream.take(1).subscribe(deferred.reject);
+      this.refresh$.take(1).subscribe(deferred.resolve);
+      this.refreshFailure$.take(1).subscribe(deferred.reject);
     }
     deferred.promise.catch(() => {});
     return deferred.promise;
@@ -475,7 +451,7 @@ export class ApplicationDataSource implements IDataSourceConfig {
           this.$log.warn(`Error retrieving ${this.key}`, rejection);
           this.loading = false;
           this.loadFailure = true;
-          this.refreshFailureStream.next(rejection);
+          this.refreshFailure$.next(rejection);
           // resolve, don't reject - the refreshFailureStream and loadFailure flags signal the rejection
           this.refreshQueue.forEach(d => d.resolve(rejection));
           this.refreshQueue.length = 0;

app/scripts/modules/core/src/loadBalancer/loadBalancer.dataSource.ts

@@ -1,6 +1,7 @@
 import { module, IQService } from 'angular';
 
 import { APPLICATION_DATA_SOURCE_REGISTRY, ApplicationDataSourceRegistry } from 'core/application/service/applicationDataSource.registry';
+import { INFRASTRUCTURE_KEY } from 'core/application/nav/defaultCategories';
 import { Application } from 'core/application/application.model';
 import { ENTITY_TAGS_READ_SERVICE, EntityTagsReader } from 'core/entityTag/entityTags.read.service';
 import { ILoadBalancer } from 'core/domain';
@@ -26,7 +27,9 @@ module(LOAD_BALANCER_DATA_SOURCE, [
 
   applicationDataSourceRegistry.registerDataSource({
     key: 'loadBalancers',
+    category: INFRASTRUCTURE_KEY,
     optional: true,
+    icon: 'fa fa-xs fa-fixed fa-sitemap',
     loader: loadLoadBalancers,
     onLoad: addLoadBalancers,
     afterLoad: addTags,

app/scripts/modules/core/src/pipeline/pipeline.dataSource.js

@@ -1,11 +1,12 @@
-import {APPLICATION_DATA_SOURCE_REGISTRY} from '../application/service/applicationDataSource.registry';
-import {EXECUTION_SERVICE} from './service/execution.service';
-import {PIPELINE_CONFIG_SERVICE} from 'core/pipeline/config/services/pipelineConfig.service';
-import {SETTINGS} from 'core/config/settings';
-import {CLUSTER_SERVICE} from 'core/cluster/cluster.service';
-
 const angular = require('angular');
 
+import { APPLICATION_DATA_SOURCE_REGISTRY } from 'core/application/service/applicationDataSource.registry';
+import { DELIVERY_KEY } from 'core/application/nav/defaultCategories';
+import { EXECUTION_SERVICE } from './service/execution.service';
+import { PIPELINE_CONFIG_SERVICE } from 'core/pipeline/config/services/pipelineConfig.service';
+import { SETTINGS } from 'core/config/settings';
+import { CLUSTER_SERVICE } from 'core/cluster/cluster.service';
+
 module.exports = angular
   .module('spinnaker.core.pipeline.dataSource', [
     APPLICATION_DATA_SOURCE_REGISTRY,
@@ -58,10 +59,10 @@ module.exports = angular
       applicationDataSourceRegistry.registerDataSource({
         optional: true,
         primary: true,
-        icon: 'list',
+        icon: 'fa fa-xs fa-fixed fa-list',
         key: 'executions',
         label: 'Pipelines',
-        category: 'delivery',
+        category: DELIVERY_KEY,
         sref: '.pipelines.executions',
         activeState: '**.pipelines.**',
         loader: loadExecutions,

app/scripts/modules/core/src/reactShims/react.injector.ts

@@ -3,6 +3,7 @@ import IInjectorService = angular.auto.IInjectorService;
 
 import { IModalService } from 'angular-ui-bootstrap';
 import { StateParams, StateService, UIRouter } from '@uirouter/core';
+import { ApplicationDataSourceRegistry } from 'core/application/service/applicationDataSource.registry';
 
 import { AccountService } from '../account/account.service';
 import { Api } from '../api/api.service';
@@ -89,6 +90,7 @@ export class CoreReactInject extends ReactInject {
   public get $uiRouter() { return this.$injector.get('$uiRouter') as UIRouter; }
   public get API() { return this.$injector.get('API') as Api; }
   public get accountService() { return this.$injector.get('accountService') as AccountService; }
+  public get applicationDataSourceRegistry() { return this.$injector.get('applicationDataSourceRegistry') as ApplicationDataSourceRegistry; }
   public get applicationModelBuilder() { return this.$injector.get('applicationModelBuilder') as ApplicationModelBuilder; }
   public get applicationReader() { return this.$injector.get('applicationReader') as ApplicationReader; }
   public get authenticationService() { return this.$injector.get('authenticationService') as AuthenticationService; }

app/scripts/modules/core/src/securityGroup/securityGroup.dataSource.ts

@@ -1,6 +1,7 @@
 import { module } from 'angular';
 
 import { APPLICATION_DATA_SOURCE_REGISTRY, ApplicationDataSourceRegistry } from 'core/application/service/applicationDataSource.registry';
+import { INFRASTRUCTURE_KEY } from 'core/application/nav/defaultCategories';
 import { Application } from 'core/application/application.model';
 import { SECURITY_GROUP_READER, SecurityGroupReader } from 'core/securityGroup/securityGroupReader.service';
 import { ENTITY_TAGS_READ_SERVICE, EntityTagsReader } from 'core/entityTag/entityTags.read.service';
@@ -30,7 +31,9 @@ module(SECURITY_GROUP_DATA_SOURCE, [
 
     applicationDataSourceRegistry.registerDataSource({
       key: 'securityGroups',
+      category: INFRASTRUCTURE_KEY,
       optional: true,
+      icon: 'fa fa-xs fa-fixed fa-lock',
       loader: loadSecurityGroups,
       onLoad: addSecurityGroups,
       afterLoad: addTags,

app/scripts/modules/core/src/serverGroup/serverGroup.dataSource.ts

@@ -1,5 +1,6 @@
 import { module, IQService } from 'angular';
 import { APPLICATION_DATA_SOURCE_REGISTRY, ApplicationDataSourceRegistry } from '../application/service/applicationDataSource.registry';
+import { INFRASTRUCTURE_KEY } from 'core/application/nav/defaultCategories';
 import { ENTITY_TAGS_READ_SERVICE, EntityTagsReader } from '../entityTag/entityTags.read.service';
 import { CLUSTER_SERVICE, ClusterService } from 'core/cluster/cluster.service';
 import { JSON_UTILITY_SERVICE, JsonUtilityService } from 'core/utils/json/json.utility.service';
@@ -41,10 +42,11 @@ module(SERVER_GROUP_DATA_SOURCE, [
     applicationDataSourceRegistry.registerDataSource({
       key: 'serverGroups',
       label: 'Clusters',
+      category: INFRASTRUCTURE_KEY,
       sref: '.insight.clusters',
       optional: true,
       primary: true,
-      icon: 'th-large',
+      icon: 'fas fa-xs fa-fixed fa-th-large',
       loader: loadServerGroups,
       onLoad: addServerGroups,
       afterLoad: addTags,

app/scripts/modules/core/src/task/task.dataSource.js

@@ -43,7 +43,7 @@ module.exports = angular
       afterLoad: runningTasksLoaded,
       lazy: true,
       primary: true,
-      icon: 'check-square',
+      icon: 'fa fa-xs fa-fixed fa-check-square',
     });
 
     applicationDataSourceRegistry.registerDataSource({