mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-19 17:01:13 +00:00
Remove AutoPilot v2 (#304)
* Remove AutoPilot v2 * Update DatabaseSettingsTab.ts * Update DatabaseSettingsTab.ts * Update src/Explorer/Tabs/DatabaseSettingsTab.ts Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com> * Update src/Explorer/Tabs/SettingsTab.ts * Update src/Explorer/Tabs/DatabaseSettingsTab.ts Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com> * Update src/Explorer/Tabs/SettingsTab.ts * Remove more unused code * Remove import Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>
This commit is contained in:
Steve Faulkner
GitHub
@@ -1,222 +0,0 @@
|
||||
import * as ko from "knockout";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import editable from "../../../Common/EditableUtility";
|
||||
import { ThroughputInputComponent, ThroughputInputParams, ThroughputInputViewModel } from "./ThroughputInputComponent";
|
||||
|
||||
const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
|
||||
|
||||
describe.skip("Throughput Input Component", () => {
|
||||
let component: any;
|
||||
let vm: ThroughputInputViewModel;
|
||||
const testId: string = "ThroughputValue";
|
||||
const value: ViewModels.Editable<number> = editable.observable(500);
|
||||
const minimum: ko.Observable<number> = ko.observable(400);
|
||||
const maximum: ko.Observable<number> = ko.observable(2000);
|
||||
|
||||
function buildListOptions(
|
||||
value: ViewModels.Editable<number>,
|
||||
minimum: ko.Observable<number>,
|
||||
maxium: ko.Observable<number>,
|
||||
canExceedMaximumValue?: boolean
|
||||
): ThroughputInputParams {
|
||||
return {
|
||||
testId,
|
||||
value,
|
||||
minimum,
|
||||
maximum,
|
||||
canExceedMaximumValue: ko.computed<boolean>(() => Boolean(canExceedMaximumValue)),
|
||||
costsVisible: ko.observable(false),
|
||||
isFixed: false,
|
||||
label: ko.observable("Label"),
|
||||
requestUnitsUsageCost: ko.observable("requestUnitsUsageCost"),
|
||||
showAsMandatory: false,
|
||||
autoPilotTiersList: null,
|
||||
autoPilotUsageCost: null,
|
||||
isAutoPilotSelected: null,
|
||||
selectedAutoPilotTier: null,
|
||||
throughputAutoPilotRadioId: null,
|
||||
throughputProvisionedRadioId: null,
|
||||
throughputModeRadioName: null
|
||||
};
|
||||
}
|
||||
|
||||
function simulateKeyPressSpace(target: HTMLElement): Promise<boolean> {
|
||||
const event = new KeyboardEvent("keydown", {
|
||||
key: "space"
|
||||
});
|
||||
|
||||
const result = target.dispatchEvent(event);
|
||||
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve(result);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
component = ThroughputInputComponent;
|
||||
document.body.innerHTML = component.template as any;
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await ko.cleanNode(document);
|
||||
});
|
||||
|
||||
describe("Rendering", () => {
|
||||
it("should display value text", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum));
|
||||
await ko.applyBindings(vm);
|
||||
expect(($("input") as HTMLInputElement).value).toContain(value().toString());
|
||||
});
|
||||
});
|
||||
|
||||
describe("Behavior", () => {
|
||||
it("should decrease value", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum));
|
||||
await ko.applyBindings(vm);
|
||||
value(450);
|
||||
$(".testhook-decreaseThroughput").click();
|
||||
expect(value()).toBe(400);
|
||||
$(".testhook-decreaseThroughput").click();
|
||||
expect(value()).toBe(400);
|
||||
});
|
||||
|
||||
it("should increase value", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum));
|
||||
await ko.applyBindings(vm);
|
||||
value(1950);
|
||||
$(".test-increaseThroughput").click();
|
||||
expect(value()).toBe(2000);
|
||||
$(".test-increaseThroughput").click();
|
||||
expect(value()).toBe(2000);
|
||||
});
|
||||
|
||||
it("should respect lower bound limits", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum));
|
||||
await ko.applyBindings(vm);
|
||||
value(minimum());
|
||||
$(".testhook-decreaseThroughput").click();
|
||||
expect(value()).toBe(minimum());
|
||||
});
|
||||
|
||||
it("should respect upper bound limits", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum));
|
||||
await ko.applyBindings(vm);
|
||||
value(maximum());
|
||||
$(".test-increaseThroughput").click();
|
||||
expect(value()).toBe(maximum());
|
||||
});
|
||||
|
||||
it("should allow throughput to exceed upper bound limit when canExceedMaximumValue is set", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
value(maximum());
|
||||
$(".test-increaseThroughput").click();
|
||||
expect(value()).toBe(maximum() + 100);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Accessibility", () => {
|
||||
it.skip("should decrease value with keypress", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum));
|
||||
await ko.applyBindings(vm);
|
||||
const target = $(".testhook-decreaseThroughput");
|
||||
|
||||
value(500);
|
||||
expect(value()).toBe(500);
|
||||
|
||||
const result = await simulateKeyPressSpace(target);
|
||||
expect(value()).toBe(400);
|
||||
});
|
||||
|
||||
it.skip("should increase value with keypress", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum));
|
||||
await ko.applyBindings(vm);
|
||||
const target = $(".test-increaseThroughput");
|
||||
|
||||
value(400);
|
||||
expect(value()).toBe(400);
|
||||
|
||||
const result = await simulateKeyPressSpace(target);
|
||||
// expect(value()).toBe(500);
|
||||
});
|
||||
|
||||
it("should set the decreaseButtonAriaLabel using the default step value", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
expect(vm.decreaseButtonAriaLabel).toBe("Decrease throughput by 100");
|
||||
});
|
||||
|
||||
it("should set the increaseButtonAriaLabel using the default step value", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
expect(vm.increaseButtonAriaLabel).toBe("Increase throughput by 100");
|
||||
});
|
||||
|
||||
it("should set the increaseButtonAriaLabel using the params step value", async () => {
|
||||
const options = buildListOptions(value, minimum, maximum, true);
|
||||
options.step = 10;
|
||||
vm = new component.viewModel(options);
|
||||
await ko.applyBindings(vm);
|
||||
expect(vm.increaseButtonAriaLabel).toBe("Increase throughput by 10");
|
||||
});
|
||||
|
||||
it("should set the decreaseButtonAriaLabel using the params step value", async () => {
|
||||
const options = buildListOptions(value, minimum, maximum, true);
|
||||
options.step = 10;
|
||||
vm = new component.viewModel(options);
|
||||
await ko.applyBindings(vm);
|
||||
expect(vm.decreaseButtonAriaLabel).toBe("Decrease throughput by 10");
|
||||
});
|
||||
|
||||
it("should set the decreaseButtonAriaLabel using the params step value", async () => {
|
||||
const options = buildListOptions(value, minimum, maximum, true);
|
||||
options.step = 10;
|
||||
vm = new component.viewModel(options);
|
||||
await ko.applyBindings(vm);
|
||||
});
|
||||
|
||||
it("should have aria-label attribute on increase button", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
const ariaLabel = $(".test-increaseThroughput").attributes.getNamedItem("aria-label").value;
|
||||
expect(ariaLabel).toBe("Increase throughput by 100");
|
||||
});
|
||||
|
||||
it("should have aria-label attribute on increase button", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
const ariaLabel = $(".testhook-decreaseThroughput").attributes.getNamedItem("aria-label").value;
|
||||
expect(ariaLabel).toBe("Decrease throughput by 100");
|
||||
});
|
||||
|
||||
it("should have role on increase button", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
const role = $(".test-increaseThroughput").attributes.getNamedItem("role").value;
|
||||
expect(role).toBe("button");
|
||||
});
|
||||
|
||||
it("should have role on decrease button", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("role").value;
|
||||
expect(role).toBe("button");
|
||||
});
|
||||
|
||||
it("should have tabindex 0 on increase button", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("tabindex").value;
|
||||
expect(role).toBe("0");
|
||||
});
|
||||
|
||||
it("should have tabindex 0 on decrease button", async () => {
|
||||
vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
|
||||
await ko.applyBindings(vm);
|
||||
const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("tabindex").value;
|
||||
expect(role).toBe("0");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,145 +0,0 @@
|
||||
<div>
|
||||
<div>
|
||||
<p class="pkPadding">
|
||||
<!-- ko if: showAsMandatory -->
|
||||
<span class="mandatoryStar">*</span>
|
||||
<!-- /ko -->
|
||||
|
||||
<span class="addCollectionLabel" data-bind="text: label"></span>
|
||||
|
||||
<!-- ko if: infoBubbleText -->
|
||||
<span class="infoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
|
||||
<span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
|
||||
</span>
|
||||
<!-- /ko -->
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- ko if: !isFixed -->
|
||||
<div data-bind="visible: showAutoPilot" class="throughputModeContainer">
|
||||
<input
|
||||
class="throughputModeRadio"
|
||||
aria-label="Autopilot mode"
|
||||
data-test="throughput-autoPilot"
|
||||
type="radio"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
data-bind="
|
||||
checked: isAutoPilotSelected,
|
||||
checkedValue: true,
|
||||
attr: {
|
||||
id: throughputAutoPilotRadioId,
|
||||
name: throughputModeRadioName,
|
||||
'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="throughputModeSpace"
|
||||
data-bind="
|
||||
attr: {
|
||||
for: throughputAutoPilotRadioId
|
||||
}"
|
||||
>Autopilot (preview)
|
||||
</span>
|
||||
|
||||
<input
|
||||
class="throughputModeRadio nonFirstRadio"
|
||||
aria-label="Manual mode"
|
||||
type="radio"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
data-bind="
|
||||
checked: isAutoPilotSelected,
|
||||
checkedValue: false,
|
||||
attr: {
|
||||
id: throughputProvisionedRadioId,
|
||||
name: throughputModeRadioName,
|
||||
'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="throughputModeSpace"
|
||||
data-bind="
|
||||
attr: {
|
||||
for: throughputProvisionedRadioId
|
||||
}"
|
||||
>Manual
|
||||
</span>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
<div data-bind="visible: isAutoPilotSelected">
|
||||
<select
|
||||
name="autoPilotTiers"
|
||||
class="collid select-font-size"
|
||||
aria-label="Autopilot Max RU/s"
|
||||
data-bind="
|
||||
options: autoPilotTiersList,
|
||||
optionsText: 'text',
|
||||
optionsValue: 'value',
|
||||
value: selectedAutoPilotTier,
|
||||
optionsCaption: 'Choose Max RU/s'"
|
||||
>
|
||||
</select>
|
||||
<p>
|
||||
<span
|
||||
data-bind="
|
||||
html: autoPilotUsageCost,
|
||||
visible: selectedAutoPilotTier"
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div data-bind="visible: !isAutoPilotSelected()">
|
||||
<div data-bind="setTemplateReady: true">
|
||||
<p class="addContainerThroughputInput">
|
||||
<input
|
||||
type="number"
|
||||
required
|
||||
data-bind="
|
||||
textInput: value,
|
||||
css: {
|
||||
dirty: value.editableIsDirty
|
||||
},
|
||||
enable: isEnabled,
|
||||
attr:{
|
||||
'data-test': testId,
|
||||
'class': cssClass,
|
||||
step: step,
|
||||
min: minimum,
|
||||
max: canExceedMaximumValue() ? null : maximum,
|
||||
'aria-label': ariaLabel
|
||||
}"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p data-bind="visible: costsVisible">
|
||||
<span data-bind="html: requestUnitsUsageCost"></span>
|
||||
</p>
|
||||
|
||||
<!-- ko if: spendAckVisible -->
|
||||
<p class="pkPadding">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label="acknowledge spend throughput"
|
||||
data-bind="
|
||||
attr: {
|
||||
title: spendAckText,
|
||||
id: spendAckId
|
||||
},
|
||||
checked: spendAckChecked"
|
||||
/>
|
||||
<span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
|
||||
</p>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: isFixed -->
|
||||
<p>
|
||||
Choose unlimited storage capacity for more than 10,000 RU/s.
|
||||
</p>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,261 +0,0 @@
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import * as ko from "knockout";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { KeyCodes } from "../../../Common/Constants";
|
||||
import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
|
||||
import ThroughputInputComponentTemplate from "./ThroughputInputComponent.html";
|
||||
|
||||
/**
|
||||
* Throughput Input:
|
||||
*
|
||||
* Creates a set of controls to input, sanitize and increase/decrease throughput
|
||||
*
|
||||
* How to use in your markup:
|
||||
* <throughput-input params="{ value: anObservableToHoldTheValue, minimum: anObservableWithMinimum, maximum: anObservableWithMaximum }">
|
||||
* </throughput-input>
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Parameters for this component
|
||||
*/
|
||||
export interface ThroughputInputParams {
|
||||
/**
|
||||
* Callback triggered when the template is bound to the component (for testing purposes)
|
||||
*/
|
||||
onTemplateReady?: () => void;
|
||||
|
||||
/**
|
||||
* Observable to bind the Throughput value to
|
||||
*/
|
||||
value: ViewModels.Editable<number>;
|
||||
|
||||
/**
|
||||
* Text to use as id for testing
|
||||
*/
|
||||
testId: string;
|
||||
|
||||
/**
|
||||
* Text to use as aria-label
|
||||
*/
|
||||
ariaLabel?: ko.Observable<string>;
|
||||
|
||||
/**
|
||||
* Minimum value in the range
|
||||
*/
|
||||
minimum: ko.Observable<number>;
|
||||
|
||||
/**
|
||||
* Maximum value in the range
|
||||
*/
|
||||
maximum: ko.Observable<number>;
|
||||
|
||||
/**
|
||||
* Step value for increase/decrease
|
||||
*/
|
||||
step?: number;
|
||||
|
||||
/**
|
||||
* Observable to bind the Throughput enabled status
|
||||
*/
|
||||
isEnabled?: ko.Observable<boolean>;
|
||||
|
||||
/**
|
||||
* Should show pricing controls
|
||||
*/
|
||||
costsVisible: ko.Observable<boolean>;
|
||||
|
||||
/**
|
||||
* RU price
|
||||
*/
|
||||
requestUnitsUsageCost: ko.Subscribable<string>; // Our code assigns to ko.Computed, but unit test assigns to ko.Observable
|
||||
|
||||
/**
|
||||
* State of the spending acknowledge checkbox
|
||||
*/
|
||||
spendAckChecked?: ko.Observable<boolean>;
|
||||
|
||||
/**
|
||||
* id of the spending acknowledge checkbox
|
||||
*/
|
||||
spendAckId?: ko.Observable<string>;
|
||||
|
||||
/**
|
||||
* spending acknowledge text
|
||||
*/
|
||||
spendAckText?: ko.Observable<string>;
|
||||
|
||||
/**
|
||||
* Show spending acknowledge controls
|
||||
*/
|
||||
spendAckVisible?: ko.Observable<boolean>;
|
||||
|
||||
/**
|
||||
* Display * to the left of the label
|
||||
*/
|
||||
showAsMandatory: boolean;
|
||||
|
||||
/**
|
||||
* If true, it will display a text to prompt users to use unlimited collections to go beyond max for fixed
|
||||
*/
|
||||
isFixed: boolean;
|
||||
|
||||
/**
|
||||
* Label of the provisioned throughut control
|
||||
*/
|
||||
label: ko.Observable<string>;
|
||||
|
||||
/**
|
||||
* Text of the info bubble for provisioned throughut control
|
||||
*/
|
||||
infoBubbleText?: ko.Observable<string>;
|
||||
|
||||
/**
|
||||
* Computed value that decides if value can exceed maximum allowable value
|
||||
*/
|
||||
canExceedMaximumValue?: ko.Computed<boolean>;
|
||||
|
||||
/**
|
||||
* CSS classes to apply on input element
|
||||
*/
|
||||
cssClass?: string;
|
||||
|
||||
isAutoPilotSelected: ko.Observable<boolean>;
|
||||
throughputAutoPilotRadioId: string;
|
||||
throughputProvisionedRadioId: string;
|
||||
throughputModeRadioName: string;
|
||||
autoPilotTiersList: ko.ObservableArray<ViewModels.DropdownOption<DataModels.AutopilotTier>>;
|
||||
selectedAutoPilotTier: ko.Observable<DataModels.AutopilotTier>;
|
||||
autoPilotUsageCost: ko.Computed<string>;
|
||||
showAutoPilot?: ko.Observable<boolean>;
|
||||
}
|
||||
|
||||
export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
|
||||
public ariaLabel: ko.Observable<string>;
|
||||
public canExceedMaximumValue: ko.Computed<boolean>;
|
||||
public step: number;
|
||||
public testId: string;
|
||||
public value: ViewModels.Editable<number>;
|
||||
public minimum: ko.Observable<number>;
|
||||
public maximum: ko.Observable<number>;
|
||||
public isEnabled: ko.Observable<boolean>;
|
||||
public cssClass: string;
|
||||
public decreaseButtonAriaLabel: string;
|
||||
public increaseButtonAriaLabel: string;
|
||||
public costsVisible: ko.Observable<boolean>;
|
||||
public requestUnitsUsageCost: ko.Subscribable<string>;
|
||||
public spendAckChecked: ko.Observable<boolean>;
|
||||
public spendAckId: ko.Observable<string>;
|
||||
public spendAckText: ko.Observable<string>;
|
||||
public spendAckVisible: ko.Observable<boolean>;
|
||||
public showAsMandatory: boolean;
|
||||
public infoBubbleText: string | ko.Observable<string>;
|
||||
public label: ko.Observable<string>;
|
||||
public isFixed: boolean;
|
||||
public showAutoPilot: ko.Observable<boolean>;
|
||||
public isAutoPilotSelected: ko.Observable<boolean>;
|
||||
public throughputAutoPilotRadioId: string;
|
||||
public throughputProvisionedRadioId: string;
|
||||
public throughputModeRadioName: string;
|
||||
public autoPilotTiersList: ko.ObservableArray<ViewModels.DropdownOption<DataModels.AutopilotTier>>;
|
||||
public selectedAutoPilotTier: ko.Observable<DataModels.AutopilotTier>;
|
||||
public autoPilotUsageCost: ko.Computed<string>;
|
||||
|
||||
public constructor(options: ThroughputInputParams) {
|
||||
super();
|
||||
super.onTemplateReady((isTemplateReady: boolean) => {
|
||||
if (isTemplateReady && options.onTemplateReady) {
|
||||
options.onTemplateReady();
|
||||
}
|
||||
});
|
||||
|
||||
const params: ThroughputInputParams = options;
|
||||
this.testId = params.testId || "ThroughputValue";
|
||||
this.ariaLabel = ko.observable((params.ariaLabel && params.ariaLabel()) || "");
|
||||
this.canExceedMaximumValue = params.canExceedMaximumValue || ko.computed(() => false);
|
||||
this.step = params.step || ThroughputInputViewModel._defaultStep;
|
||||
this.isEnabled = params.isEnabled || ko.observable(true);
|
||||
this.cssClass = params.cssClass || "textfontclr collid";
|
||||
this.minimum = params.minimum;
|
||||
this.maximum = params.maximum;
|
||||
this.value = params.value;
|
||||
this.decreaseButtonAriaLabel = "Decrease throughput by " + this.step.toString();
|
||||
this.increaseButtonAriaLabel = "Increase throughput by " + this.step.toString();
|
||||
this.costsVisible = options.costsVisible;
|
||||
this.requestUnitsUsageCost = options.requestUnitsUsageCost;
|
||||
this.spendAckChecked = options.spendAckChecked || ko.observable<boolean>(false);
|
||||
this.spendAckId = options.spendAckId || ko.observable<string>();
|
||||
this.spendAckText = options.spendAckText || ko.observable<string>();
|
||||
this.spendAckVisible = options.spendAckVisible || ko.observable<boolean>(false);
|
||||
this.showAsMandatory = !!options.showAsMandatory;
|
||||
this.isFixed = !!options.isFixed;
|
||||
this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
|
||||
this.label = options.label || ko.observable<string>();
|
||||
this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
|
||||
this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
|
||||
this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
|
||||
this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
|
||||
this.throughputModeRadioName = options.throughputModeRadioName;
|
||||
this.autoPilotTiersList = options.autoPilotTiersList;
|
||||
this.selectedAutoPilotTier = options.selectedAutoPilotTier;
|
||||
this.autoPilotUsageCost = options.autoPilotUsageCost;
|
||||
}
|
||||
|
||||
public decreaseThroughput() {
|
||||
let offerThroughput: number = this._getSanitizedValue();
|
||||
|
||||
if (offerThroughput > this.minimum()) {
|
||||
offerThroughput -= this.step;
|
||||
if (offerThroughput < this.minimum()) {
|
||||
offerThroughput = this.minimum();
|
||||
}
|
||||
|
||||
this.value(offerThroughput);
|
||||
}
|
||||
}
|
||||
|
||||
public increaseThroughput() {
|
||||
let offerThroughput: number = this._getSanitizedValue();
|
||||
|
||||
if (offerThroughput < this.maximum() || this.canExceedMaximumValue()) {
|
||||
offerThroughput += this.step;
|
||||
if (offerThroughput > this.maximum() && !this.canExceedMaximumValue()) {
|
||||
offerThroughput = this.maximum();
|
||||
}
|
||||
|
||||
this.value(offerThroughput);
|
||||
}
|
||||
}
|
||||
|
||||
public onIncreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
|
||||
if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
|
||||
this.increaseThroughput();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
public onDecreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
|
||||
if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
|
||||
this.decreaseThroughput();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
private _getSanitizedValue(): number {
|
||||
const throughput = this.value();
|
||||
return isNaN(throughput) ? 0 : Number(throughput);
|
||||
}
|
||||
|
||||
private static _defaultStep: number = 100;
|
||||
}
|
||||
|
||||
export const ThroughputInputComponent = {
|
||||
viewModel: ThroughputInputViewModel,
|
||||
template: ThroughputInputComponentTemplate
|
||||
};
|
||||
Reference in New Issue
Block a user