Skip to content

Add errors handling and Workload explanation #20

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Apr 13, 2023
Merged

Add errors handling and Workload explanation #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,6 @@
* Table columns now may be styled directly with a column descriptor `style` property
* 0.2.3: Better handling of DB and Client Server errors
* 0.3.0: Administrative UI
* 0.3.1: Helpdesk Cases are automatically resolved in administrative actions
* 0.3.1: Helpdesk Cases are automatically resolved in administrative actions, Frontend changes:
* Add server errors handling
* Add workload description and external link to docs
4 changes: 2 additions & 2 deletions dbaas/static/b7d579a519616740b116.js → dbaas/static/e362c49b3047272f792b.js
View file
Open in desktop

Large diffs are not rendered by default.

0 ...tatic/b7d579a519616740b116.js.LICENSE.txt → ...tatic/e362c49b3047272f792b.js.LICENSE.txt
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion dbaas/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:400,500|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="b7d579a519616740b116.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:400,500|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="e362c49b3047272f792b.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
4 changes: 2 additions & 2 deletions dbaas/static/main.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@cloudblueconnect/eaas-database-extension",
"version": "0.2.1",
"version": "0.3.1",
"description": "On-demand provisioning of cloud-based database storages as a service.",
"author": "Ingram Micro",
"license": "Apache Software License 2.0",
Expand Down
1 change: 1 addition & 0 deletions ui/app/views/ActivateDialog.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ describe('ActivateDialog', () => {
expect(cmp.data()).toEqual({
dialogOpened: false,
saving: false,
errorText: null,
form: {
credentials: {
name: '',
Expand Down
14 changes: 14 additions & 0 deletions ui/app/views/ActivateDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ ez-dialog(
v-model="dialogOpened",
width="800",
title="Activate database",
:error-text="errorText",
)
ui-card(title="Access")
.detail-item._mt_0
Expand Down Expand Up @@ -107,6 +108,7 @@ export default {
},

data: () => ({
errorText: null,
dialogOpened: false,
saving: false,
form: initialForm(),
Expand All @@ -130,6 +132,7 @@ export default {
},

async save() {
this.errorText = null;
this.saving = true;

try {
Expand All @@ -138,6 +141,12 @@ export default {
this.$emit('saved');
this.close();
} catch (e) {
if (e.status === 422) {
this.errorText = 'An input error occurred. Please fill all required fields';
} else {
this.errorText = `#${e.status} ${e.message}`;
}

this.emit({ name: 'snackbar:error', value: e });
}

Expand All @@ -158,6 +167,11 @@ export default {
},

dialogOpened(v) {
if (!v) {
this.errorText = null;
this.form = initialForm();
}

if (this.value !== v) this.$emit('input', v);
},
},
Expand Down
48 changes: 30 additions & 18 deletions ui/app/views/CreateEditDialog.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ describe('CreateEditDialog', () => {
describe('#data', () => {
it('should provide initial data', () => {
expect(cmp.data()).toEqual({
errorText: null,
dialogOpened: false,
acceptTermsAndConds: false,
saving: false,
Expand Down Expand Up @@ -76,14 +77,23 @@ describe('CreateEditDialog', () => {
let setContext;

beforeEach(() => {
setContext = (isEdit, acceptTermsAndConds, name, description, contact, region) => {
setContext = (
isEdit,
acceptTermsAndConds,
name,
description,
workload,
contact,
region,
) => {
context = {
isEdit,
acceptTermsAndConds,

form: {
name,
description,
workload,

tech_contact: {
id: contact,
Expand All @@ -98,26 +108,28 @@ describe('CreateEditDialog', () => {
});

it.each([
[false, true, 'name', 'description', 'contact', 'region', ['toBe', true]],
[false, false, null, null, null, null, ['toBe', false]],
[false, true, null, null, null, null, ['toBe', false]],
[false, true, 'name', null, null, null, ['toBe', false]],
[false, true, null, 'description', null, null, ['toBe', false]],
[false, true, 'name', 'description', 'contact', null, ['toBe', false]],
[false, false, 'name', 'description', 'contact', 'region', ['toBe', false]],
[false, false, null, 'description', 'contact', 'region', ['toBe', false]],
[false, false, null, null, null, 'region', ['toBe', false]],

[true, false, 'name', 'description', 'contact', null, ['toBe', true]],
[true, false, null, null, 'contact', null, ['toBe', false]],
[true, false, null, null, null, null, ['toBe', false]],
[true, false, 'name', null, null, null, ['toBe', false]],
[false, true, 'name', 'description', 'workload', 'contact', 'region', ['toBe', true]],
[false, false, null, null, null, null, null, ['toBe', false]],
[false, true, null, null, null, null, null, ['toBe', false]],
[false, true, 'name', null, null, null, null, ['toBe', false]],
[false, true, null, 'description', null, null, null, ['toBe', false]],
[false, true, null, null, 'workload', null, null, ['toBe', false]],
[false, true, 'name', 'description', 'workload', 'contact', null, ['toBe', false]],
[false, false, 'name', 'description', 'workload', 'contact', 'region', ['toBe', false]],
[false, false, null, 'description', 'workload', 'contact', 'region', ['toBe', false]],
[false, false, null, null, null, null, 'region', ['toBe', false]],

[true, false, 'name', 'description', 'workload', 'contact', null, ['toBe', true]],
[true, false, null, null, 'workload', 'contact', null, ['toBe', false]],
[true, false, null, null, null, 'contact', null, ['toBe', false]],
[true, false, null, null, null, null, null, ['toBe', false]],
[true, false, 'name', null, null, null, null, ['toBe', false]],
])(
'When isEdit=%j, acceptTermsAndConds=%j, name=%j, contact=%j, region=%j should "%j"',
(isEdit, acceptTermsAndConds, name, description, contact, region, spec) => {
'When isEdit=%j, acceptTermsAndConds=%j, name=%j, description=%j, workload=%j, contact=%j, region=%j should "%j"',
(isEdit, acceptTermsAndConds, name, description, workload, contact, region, spec) => {
const [satisfies, condition] = spec;

setContext(isEdit, acceptTermsAndConds, name, description, contact, region);
setContext(isEdit, acceptTermsAndConds, name, description, workload, contact, region);

expect(cmp.computed.allowSaving(context))[satisfies](condition);
},
Expand Down
24 changes: 24 additions & 0 deletions ui/app/views/CreateEditDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ ez-dialog(
v-model="dialogOpened",
width="800",
title="Request database",
:error-text="errorText",
)
ui-card(title="General")
// CREATE MODE
Expand Down Expand Up @@ -38,6 +39,12 @@ ez-dialog(
input#large._ml_24(type="radio" v-model="form.workload" value="large", materialize)
label._ml_8(for="large", materialize) Large

p._mt_16._mb_0.assistive-text {{ workloadDescriptions[form.workload] }}
a._ml_4(
href="https://learn.microsoft.com/en-us/azure/postgresql/flexible-server/concepts-limits#maximum-connections",
target="_blank",
) Read more

// EDIT MODE
.detail-item._mt_0(v-if="isEdit")
.detail-item-head.item-label._mb_8 Name
Expand Down Expand Up @@ -154,6 +161,7 @@ export default {
},

data: () => ({
errorText: null,
dialogOpened: false,
acceptTermsAndConds: false,
saving: false,
Expand All @@ -168,15 +176,23 @@ export default {
isEdit
&& form.name
&& form.description
&& form.workload
&& form.tech_contact.id
) || (
!isEdit
&& acceptTermsAndConds
&& form.name
&& form.description
&& form.region.id
&& form.workload
&& form.tech_contact.id
)),

workloadDescriptions: () => ({
small: 'Plan "B2s". vCores: 2; Memory Size: 4Gb; Max Connections: 100; Max User Connections: 97',
medium: 'Plan "D2s_v3". vCores: 2; Memory Size: 8Gb; Max Connections: 859; Max User Connections: 856',
large: 'Plan "D8s_v3". vCores: 8; Memory Size: 32Gb; Max Connections: 3438; Max User Connections: 3435',
}),
},

methods: {
Expand All @@ -191,6 +207,7 @@ export default {
},

async save() {
this.errorText = null;
this.saving = true;

try {
Expand All @@ -200,6 +217,12 @@ export default {
this.$emit('saved');
this.close();
} catch (e) {
if (e.status === 422) {
this.errorText = 'An input error occurred. Please fill all required fields';
} else {
this.errorText = `#${e.status} ${e.message}`;
}

this.emit({ name: 'snackbar:error', value: e });
}

Expand Down Expand Up @@ -229,6 +252,7 @@ export default {
},

dialogOpened(v) {
if (!v) this.form = initialForm();
if (this.value !== v) this.$emit('input', v);
},
},
Expand Down