diff --git a/app/scripts/modules/core/src/cluster/allClusters.controller.js b/app/scripts/modules/core/src/cluster/allClusters.controller.js index a0afc09943c..d767aff87f1 100644 --- 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 index c45b0e78e51..b230d993113 100644 --- 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 index 1820724d349..55767374d41 100644 --- 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(() => {