From e801db629e8518601425129ca7167bcceeb9de2e Mon Sep 17 00:00:00 2001 From: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Date: Wed, 16 Feb 2022 11:03:34 -0800 Subject: [PATCH] Ui/ Clients error handling (#14066) * add error message to date selection * adds dropdown to no billing error message * add error template * disabled months/years not allowed * clean up ternary statements * remove queues --- ui/app/components/clients/current.js | 29 ++++++------ ui/app/components/clients/history.js | 46 ++++++++++++------- ui/app/components/date-dropdown.js | 17 +++++-- .../routes/vault/cluster/clients/history.js | 7 ++- ui/app/styles/core/buttons.scss | 2 +- .../templates/components/clients/history.hbs | 45 +++++++++--------- ui/app/templates/components/date-dropdown.hbs | 16 +++++-- .../templates/vault/cluster/clients/error.hbs | 29 ++++++++++++ 8 files changed, 127 insertions(+), 64 deletions(-) create mode 100644 ui/app/templates/vault/cluster/clients/error.hbs diff --git a/ui/app/components/clients/current.js b/ui/app/components/clients/current.js index 2559baeeb4..1e8a490803 100644 --- a/ui/app/components/clients/current.js +++ b/ui/app/components/clients/current.js @@ -32,6 +32,20 @@ export default class Current extends Component { return this.totalUsageCounts.clients !== 0 && !!this.totalClientsData && !this.selectedAuthMethod; } + get filteredActivity() { + const namespace = this.selectedNamespace; + const auth = this.selectedAuthMethod; + if (!namespace && !auth) { + return this.getActivityResponse; + } + if (!auth) { + return this.byNamespaceCurrent.find((ns) => ns.label === namespace); + } + return this.byNamespaceCurrent + .find((ns) => ns.label === namespace) + .mounts?.find((mount) => mount.label === auth); + } + get countsIncludeOlderData() { let firstUpgrade = this.args.model.versionHistory[0]; if (!firstUpgrade) { @@ -60,21 +74,6 @@ export default class Current extends Component { return this.args.model.monthly?.responseTimestamp; } - // HELPERS - get filteredActivity() { - const namespace = this.selectedNamespace; - const auth = this.selectedAuthMethod; - if (!namespace && !auth) { - return this.getActivityResponse; - } - if (!auth) { - return this.byNamespaceCurrent.find((ns) => ns.label === namespace); - } - return this.byNamespaceCurrent - .find((ns) => ns.label === namespace) - .mounts?.find((mount) => mount.label === auth); - } - // ACTIONS @action selectNamespace([value]) { diff --git a/ui/app/components/clients/history.js b/ui/app/components/clients/history.js index c0976dbe25..fdd1639564 100644 --- a/ui/app/components/clients/history.js +++ b/ui/app/components/clients/history.js @@ -38,10 +38,15 @@ export default class History extends Component { years = Array.from({ length: 5 }, (item, i) => { return new Date().getFullYear() - i; }); + currentDate = new Date(); + currentYear = this.currentDate.getFullYear(); // integer of year + currentMonth = this.currentDate.getMonth(); // index of month @tracked isEditStartMonthOpen = false; @tracked startMonth = null; @tracked startYear = null; + @tracked allowedMonthMax = 12; + @tracked disabledYear = null; // FOR HISTORY COMPONENT // @@ -66,6 +71,7 @@ export default class History extends Component { @tracked noActivityDate = ''; @tracked responseRangeDiffMessage = null; @tracked isLoadingQuery = false; + @tracked licenseStartIsCurrentMonth = this.args.model.activity?.isLicenseDateError || false; @tracked selectedAuthMethod = null; @tracked authMethodOptions = []; @@ -117,6 +123,20 @@ export default class History extends Component { return `${this.arrayOfMonths[month]} ${year}`; } + get filteredActivity() { + const namespace = this.selectedNamespace; + const auth = this.selectedAuthMethod; + if (!namespace && !auth) { + return this.getActivityResponse; + } + if (!auth) { + return this.getActivityResponse.byNamespace.find((ns) => ns.label === namespace); + } + return this.getActivityResponse.byNamespace + .find((ns) => ns.label === namespace) + .mounts?.find((mount) => mount.label === auth); + } + get isDateRange() { return !isSameMonth( new Date(this.getActivityResponse.startTime), @@ -158,6 +178,7 @@ export default class History extends Component { @action async handleClientActivityQuery(month, year, dateType) { + this.isEditStartMonthOpen = false; if (dateType === 'cancel') { return; } @@ -196,6 +217,7 @@ export default class History extends Component { this.storage().setItem(INPUTTED_START_DATE, this.startTimeFromResponse); } this.queriedActivityResponse = response; + this.licenseStartIsCurrentMonth = response.isLicenseDateError; // compare if the response startTime comes after the requested startTime. If true throw a warning. // only display if they selected a startTime if ( @@ -210,7 +232,6 @@ export default class History extends Component { this.responseRangeDiffMessage = null; } } catch (e) { - // TODO CMB surface API errors when user selects start date after end date return e; } finally { this.isLoadingQuery = false; @@ -246,27 +267,18 @@ export default class History extends Component { // FOR START DATE MODAL @action - selectStartMonth(month) { + selectStartMonth(month, event) { this.startMonth = month; + // disables months if in the future + this.disabledYear = this.months.indexOf(month) >= this.currentMonth ? this.currentYear : null; + event.close(); } @action - selectStartYear(year) { + selectStartYear(year, event) { this.startYear = year; - } - - get filteredActivity() { - const namespace = this.selectedNamespace; - const auth = this.selectedAuthMethod; - if (!namespace && !auth) { - return this.getActivityResponse; - } - if (!auth) { - return this.getActivityResponse.byNamespace.find((ns) => ns.label === namespace); - } - return this.getActivityResponse.byNamespace - .find((ns) => ns.label === namespace) - .mounts?.find((mount) => mount.label === auth); + this.allowedMonthMax = year === this.currentYear ? this.currentMonth : 12; + event.close(); } storage() { diff --git a/ui/app/components/date-dropdown.js b/ui/app/components/date-dropdown.js index ba78465a91..c40b412f22 100644 --- a/ui/app/components/date-dropdown.js +++ b/ui/app/components/date-dropdown.js @@ -12,9 +12,15 @@ import { tracked } from '@glimmer/tracking'; * ``` * @param {function} handleDateSelection - is the action from the parent that the date picker triggers * @param {string} [name] - optional argument passed from date dropdown to parent function + * @param {string} [submitText] - optional argument to change submit button text */ - export default class DateDropdown extends Component { + currentDate = new Date(); + currentYear = this.currentDate.getFullYear(); // integer of year + currentMonth = this.currentDate.getMonth(); // index of month + + @tracked allowedMonthMax = 12; + @tracked disabledYear = null; @tracked startMonth = null; @tracked startYear = null; @@ -26,13 +32,18 @@ export default class DateDropdown extends Component { }); @action - selectStartMonth(month) { + selectStartMonth(month, event) { this.startMonth = month; + // disables months if in the future + this.disabledYear = this.months.indexOf(month) >= this.currentMonth ? this.currentYear : null; + event.close(); } @action - selectStartYear(year) { + selectStartYear(year, event) { this.startYear = year; + this.allowedMonthMax = year === this.currentYear ? this.currentMonth : 12; + event.close(); } @action diff --git a/ui/app/routes/vault/cluster/clients/history.js b/ui/app/routes/vault/cluster/clients/history.js index 9fa30faa5e..db7661bc11 100644 --- a/ui/app/routes/vault/cluster/clients/history.js +++ b/ui/app/routes/vault/cluster/clients/history.js @@ -8,10 +8,13 @@ export default class HistoryRoute extends Route { try { // on init ONLY make network request if we have a start time from the license // otherwise user needs to manually input - // TODO CMB what to return here? return start_time ? await this.store.queryRecord('clients/activity', { start_time }) : {}; } catch (e) { - return e; + // returns 400 when license start date is in the current month + if (e.httpStatus === 400) { + return { isLicenseDateError: true }; + } + throw e; } } diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index d014ff72ac..24bb5c3913 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -54,7 +54,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12); background-color: $color; color: $color-invert; - &:hover, + &:hover:not([disabled]), &.is-hovered { background-color: darken($color, 5%); border-color: darken($color, 5%); diff --git a/ui/app/templates/components/clients/history.hbs b/ui/app/templates/components/clients/history.hbs index cbd8d2d89a..f738eff12e 100644 --- a/ui/app/templates/components/clients/history.hbs +++ b/ui/app/templates/components/clients/history.hbs @@ -14,13 +14,22 @@ Edit {{else}} - + {{/if}}

{{this.versionText.description}}

- {{#if (eq @model.config.queriesAvailable false)}} + {{#if this.licenseStartIsCurrentMonth}} + + + + {{else if (eq @model.config.queriesAvailable false)}} {{#if (eq @model.config.enabled "On")}} {{/if}} {{/if}} - {{else}} + {{else if (or (not @model.startTimeFromLicense) (not this.startTimeFromResponse))}} + {{else}} + {{/if}} {{/if}} @@ -168,11 +179,12 @@