fix(core): provide valid ids for scrollTo clusters (#3965)

spinnaker · Jul 28, 2017 · dd5f6a6 · dd5f6a6
1 parent 2e687ef
commit dd5f6a6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/app/scripts/modules/core/src/cluster/allClusters.controller.js b/app/scripts/modules/core/src/cluster/allClusters.controller.js
@@ -11,6 +11,7 @@ import { INSIGHT_NGMODULE } from 'core/insight/insight.module';
 import { CLUSTER_FILTER_MODEL } from '../cluster/filter/clusterFilter.model';
 import { FILTER_TAGS_COMPONENT } from '../filterModel/filterTags.component';
 import { PROVIDER_SELECTION_SERVICE } from 'core/cloudProvider/providerSelection/providerSelection.service';
+import { ScrollToService } from 'core/utils';
 
 import './rollups.less';
 
@@ -55,7 +56,7 @@ module.exports = angular.module('spinnaker.core.cluster.allClusters.controller',
           $timeout(() => {
             if ($state.$current.name.endsWith('serverGroup')) {
               const key = ['serverGroup', $stateParams.accountId, $stateParams.region, $stateParams.serverGroup].join('-');
-              scrollToService.scrollTo('#' + key, 'all-clusters-groupings', 270, 0);
+              scrollToService.scrollTo('#' + ScrollToService.toDomId(key), 'all-clusters-groupings', 270, 0);
             }
           }, 50);
         },

diff --git a/app/scripts/modules/core/src/serverGroup/serverGroup.component.ts b/app/scripts/modules/core/src/serverGroup/serverGroup.component.ts
@@ -7,6 +7,7 @@ import { CLUSTER_FILTER_SERVICE } from 'core/cluster/filter/clusterFilter.servic
 import { INSTANCES_COMPONENT } from './../instance/instances.component';
 import { SERVER_GROUP_SEQUENCE_FILTER } from 'core/cluster/serverGroup.sequence.filter';
 import { IInstance, IServerGroup } from 'core/domain';
+import { ScrollToService } from 'core/utils';
 
 export interface JenkinsViewModel {
   number: number;
@@ -66,7 +67,7 @@ export class ServerGroupController implements IController {
       return this.viewModel.instances.length > 20;
     };
     const { account, region, name } = this.serverGroup;
-    this.key = ['serverGroup', account, region, name].join('-');
+    this.key = ScrollToService.toDomId(['serverGroup', account, region, name].join('-'));
   }
 
   public loadDetails(event: JQueryEventObject): void {

diff --git a/app/scripts/modules/core/src/utils/scrollTo/scrollTo.service.ts b/app/scripts/modules/core/src/utils/scrollTo/scrollTo.service.ts
@@ -1,9 +1,13 @@
-import {module} from 'angular';
+import { ITimeoutService, module } from 'angular';
 import * as $ from 'jquery';
 
 export class ScrollToService {
 
-  public constructor(private $timeout: ng.ITimeoutService) {}
+  public static toDomId(id: string) {
+    return id.replace(/[\W]/g, '-')
+  }
+
+  constructor(private $timeout: ITimeoutService) { 'ngInject'; }
 
   public scrollTo(selector: string, scrollableContainer: string, offset = 0, delay = 0): void {
     this.$timeout(() => {