Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(provider/kubernetes): v2 resize modal #4274

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/scripts/modules/core/src/domain/IServerGroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { IInstance } from './IInstance';
import { IInstanceCounts } from './IInstanceCounts';
import { ITask } from './ITask';
import { IMoniker } from 'core/naming/IMoniker';
import { ICapacity } from 'core/serverGroup';

// remnant from legacy code
export interface IAsg {
Expand All @@ -18,6 +19,7 @@ export interface IServerGroup {
asg?: IAsg;
buildInfo?: any;
category?: string;
capacity?: ICapacity;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seemed OK to add since it's in clouddriver's server group model.

cloudProvider: string;
cluster: string;
clusterEntityTags?: IEntityTags[];
Expand Down
6 changes: 4 additions & 2 deletions app/scripts/modules/kubernetes/v2/kubernetes.v2.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { KUBERNETES_V2_SERVER_GROUP_COMMAND_BUILDER } from './serverGroup/server
import { KUBERNETES_MANIFEST_CTRL } from './manifest/wizard/manifestWizard.controller';
import { KUBERNETES_MANIFEST_ENTRY } from './manifest/wizard/manifestEntry.component';
import { KUBERNETES_V2_SERVER_GROUP_TRANSFORMER } from './serverGroup/serverGroupTransformer.service';
import { KUBERNETES_V2_SERVER_GROUP_DETAILS_CTRL } from './serverGroup/details.controller';
import { KUBERNETES_V2_SERVER_GROUP_DETAILS_CTRL } from './serverGroup/details/details.controller';
import { KUBERNETES_V2_SERVER_GROUP_RESIZE_CTRL } from './serverGroup/details/resize/resize.controller';

// load all templates into the $templateCache
const templates = require.context('kubernetes', true, /\.html$/);
Expand All @@ -24,6 +25,7 @@ module(KUBERNETES_V2_MODULE, [
KUBERNETES_V2_SERVER_GROUP_COMMAND_BUILDER,
KUBERNETES_V2_SERVER_GROUP_TRANSFORMER,
KUBERNETES_V2_SERVER_GROUP_DETAILS_CTRL,
KUBERNETES_V2_SERVER_GROUP_RESIZE_CTRL,
KUBERNETES_MANIFEST_BASIC_SETTINGS,
KUBERNETES_MANIFEST_COMMAND_BUILDER,
KUBERNETES_MANIFEST_CTRL,
Expand All @@ -40,7 +42,7 @@ module(KUBERNETES_V2_MODULE, [
cloneServerGroupController: 'kubernetesManifestWizardCtrl',
cloneServerGroupTemplateUrl: require('./manifest/wizard/manifestWizard.html'),
transformer: 'kubernetesV2ServerGroupTransformer',
detailsTemplateUrl: require('./serverGroup/details.html'),
detailsTemplateUrl: require('./serverGroup/details/details.html'),
detailsController: 'kubernetesV2ServerGroupDetailsCtrl',
}
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ export interface IKubernetesServerGroup extends IServerGroup {
displayName: string;
apiVersion: string;
disabled: boolean;
manifest: any;
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { IController, module } from 'angular';
import { IModalService } from 'angular-ui-bootstrap';

import {
Application,
Expand All @@ -24,6 +25,7 @@ class KubernetesServerGroupDetailsController implements IController {

constructor(serverGroup: IServerGroupFromStateParams,
public app: Application,
private $uibModal: IModalService,
private serverGroupReader: ServerGroupReader) {
'ngInject';

Expand All @@ -34,7 +36,19 @@ class KubernetesServerGroupDetailsController implements IController {
}

public canResizeServerGroup(): boolean {
return false; // will change with daemon set
return this.serverGroup.kind !== 'DaemonSet';
}

public resizeServerGroup(): void {
this.$uibModal.open({
templateUrl: require('./resize/resize.html'),
controller: 'kubernetesV2ServerGroupResizeCtrl',
controllerAs: 'ctrl',
resolve: {
serverGroup: this.serverGroup,
application: this.app
}
});
}

private autoClose(): void {
Expand All @@ -55,6 +69,7 @@ class KubernetesServerGroupDetailsController implements IController {
.getServerGroup(this.app.name, fromParams.accountId, fromParams.region, fromParams.name)
.then((serverGroupDetails: IServerGroup) => {
this.serverGroup = this.transformServerGroup(serverGroupDetails);
this.serverGroup.account = fromParams.accountId;
this.state.loading = false;
});
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { copy, equals, IController, module } from 'angular'
import { IModalInstanceService } from 'angular-ui-bootstrap';

import {
Application,
ICapacity,
SERVER_GROUP_WRITER,
ServerGroupWriter,
TASK_MONITOR_BUILDER,
TaskMonitor,
TaskMonitorBuilder
} from '@spinnaker/core';
import { IKubernetesServerGroup } from '../IKubernetesServerGroup';

interface IResizeCommand {
capacity: ICapacity;
reason: string;
}

class KubernetesServerGroupResizeController implements IController {
public taskMonitor: TaskMonitor;
public command: IResizeCommand;
public current: ICapacity;
public verification = {
verified: false
};

constructor(public serverGroup: IKubernetesServerGroup,
taskMonitorBuilder: TaskMonitorBuilder,
private $uibModalInstance: IModalInstanceService,
private serverGroupWriter: ServerGroupWriter,
private application: Application) {
'ngInject';
this.taskMonitor = taskMonitorBuilder.buildTaskMonitor({
title: `Resizing ${this.serverGroup.name}`,
application: application,
modalInstance: $uibModalInstance,
} as any);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for the any cast? I think you gave $uibModalInstance the wrong type (which might by why) - should be IModalServiceInstance instead of IModalInstanceService.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh that would explain it - I thought typescript was mishandling the optional properties.


this.current = this.serverGroup.capacity;
this.command = {
capacity: copy(this.current),
} as IResizeCommand;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can initialize reason as null rather than cast like this.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

}

public isValid(): boolean {
return this.verification.verified && this.command.capacity.desired >= 0 && !equals(this.command.capacity, this.current);
}

public cancel(): void {
this.$uibModalInstance.dismiss();
};

public resize(): void {
this.taskMonitor.submit(() => {
const payload = {
capacity: this.command.capacity,
serverGroupName: this.serverGroup.name,
account: this.serverGroup.account,
region: this.serverGroup.region,
interestingHealthProviderNames: ['KubernetesPod'],
reason: this.command.reason,
};

return this.serverGroupWriter.resizeServerGroup(this.serverGroup, this.application, payload);
});
}
}

export const KUBERNETES_V2_SERVER_GROUP_RESIZE_CTRL = 'spinnaker.kubernetes.v2.serverGroup.details.resize.controller';

module(KUBERNETES_V2_SERVER_GROUP_RESIZE_CTRL, [
SERVER_GROUP_WRITER,
TASK_MONITOR_BUILDER,
])
.controller('kubernetesV2ServerGroupResizeCtrl', KubernetesServerGroupResizeController);
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<div modal-page class="confirmation-modal">
<task-monitor monitor="ctrl.taskMonitor"></task-monitor>
<form role="form" name="resizeForm">
<modal-close dismiss="$dismiss()"></modal-close>
<div class="modal-header">
<h3>Resize {{ctrl.serverGroup.kind}} {{ctrl.serverGroup.displayName}}</h3>
</div>
<div class="modal-body confirmation-modal">
<div class="form-horizontal">
<div class="form-group form-inline">
<div class="col-md-3 sm-label-right">
Current
</div>
<div class="col-md-3">
<div class="input-group">
<input type="number"
class="form-control input-sm highlight-pristine"
ng-model="ctrl.current.desired"
readonly/>
<span class="input-group-addon">pod<span ng-if="ctrl.current.desired != 1">s</span></span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing is going to go wrong here, since the input type is number, but should be a !== here and below.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah good catch

</div>
</div>
</div>
<div class="form-group form-inline">
<div class="col-md-3 sm-label-right">
Desired
</div>
<div class="col-md-3">
<div class="input-group">
<input type="number"
class="form-control input-sm highlight-pristine"
ng-model="ctrl.command.capacity.desired"
min="0"
required/>
<span class="input-group-addon">pod<span ng-if="ctrl.command.capacity.desired != 1">s</span></span>
</div>
</div>
</div>
</div>
<task-reason command="ctrl.command"></task-reason>
</div>
<div class="modal-footer">
<user-verification account="ctrl.serverGroup.account" verification="ctrl.verification"></user-verification>
<button type="submit" ng-click="ctrl.resize()" style="display:none"></button> <!-- Allows form submission via enter keypress-->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is everywhere...but can't you put ng-submit="ctrl.resize()" as a form attribute? Maybe I'm wrong.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing - why do you prefer ng-submit?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hidden button feels a little hacky. Or not. Who knows.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why, but the ng-submit form attribute causes the modal to close (but still submit the task) when you hit enter. With the hacky button you at get to see the task monitor do its thing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh. That's probably why it's being used. Now I know.

<button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
<button type="submit"
class="btn btn-primary"
ng-click="ctrl.resize()"
ng-disabled="!ctrl.isValid() || !resizeForm.$valid">
Submit
</button>
</div>
</form>
</div>