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.

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

Dashboard save fail indication #3715

Merged
merged 4 commits into from
Apr 19, 2019
Merged

Dashboard save fail indication #3715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e769701
Dashboard save fail indication
ranbena Apr 17, 2019
8961c56
Added button loading state
ranbena Apr 18, 2019
201d4f9
Change edit state when save completes
ranbena Apr 19, 2019
a9b6bca
Removed unneeded css class
ranbena Apr 19, 2019
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: 0 additions & 4 deletions client/app/assets/less/redash/redash-newstyle.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -937,8 +937,4 @@ text.slicetext {

.markdown strong {
font-weight: bold;
}

.disabled-silent {
pointer-events: none;
}
33 changes: 23 additions & 10 deletions client/app/pages/dashboards/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,29 @@ <h3>
</div>
<div class="col-xs-4 col-sm-5 col-lg-5 text-right dashboard__control p-r-0">
<span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
<div ng-if="$ctrl.layoutEditing" ng-switch="$ctrl.isLayoutDirty || $ctrl.saveInProgress">
<span class="save-status" data-saving ng-switch-when="true">Saving</span>
<span class="save-status" ng-switch-default>Saved</span>

<button type="button" class="btn btn-primary btn-sm"
ng-disabled="$ctrl.isGridDisabled"
ng-click="$ctrl.editLayout(false)"
ng-class="{'disabled-silent': $ctrl.isLayoutDirty || $ctrl.saveInProgress }">
<i class="fa fa-check"></i> Done Editing
</button>
<div ng-if="$ctrl.layoutEditing" ng-switch="$ctrl.isLayoutDirty">
<span ng-switch-when="true" ng-switch="$ctrl.saveInProgress || $ctrl.saveDelay">
<span ng-switch-when="true">
<span class="save-status" data-saving>Saving</span>
<button class="btn btn-primary btn-sm" ng-disabled="$ctrl.editBtnClickedWhileSaving" ng-click="$ctrl.editBtnClickedWhileSaving = true">
<i class="fa fa-check" ng-class="{'fa-spinner fa-pulse': $ctrl.editBtnClickedWhileSaving}"></i> Done Editing
</button>
</span>
<span ng-switch-default>
<span class="save-status" data-error>Saving Failed</span>
<button class="btn btn-primary btn-sm" ng-click="$ctrl.saveDashboardLayout()">
Retry
</button>
</span>
</span>
<span ng-switch-default>
<span class="save-status">Saved</span>
<button class="btn btn-primary btn-sm"
ng-disabled="$ctrl.isGridDisabled"
ng-click="$ctrl.editLayout(false)">
<i class="fa fa-check"></i> Done Editing
</button>
</span>
</div>

<button type="button" class="btn btn-default btn-sm" ng-click="$ctrl.togglePublished()" tooltip="Publish Dashboard" ng-if="$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
Expand Down
19 changes: 16 additions & 3 deletions client/app/pages/dashboards/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,15 @@ function DashboardCtrl(
Events,
) {
this.saveInProgress = false;
this.saveDelay = false;

const saveDashboardLayout = () => {
this.saveDashboardLayout = () => {
if (!this.dashboard.canEdit()) {
return;
}

this.isLayoutDirty = true;

// calc diff, bail if none
const changedWidgets = getWidgetsWithChangedPositions(this.dashboard.widgets);
if (!changedWidgets.length) {
Expand All @@ -61,11 +64,15 @@ function DashboardCtrl(
return;
}

this.saveDelay = false;
this.saveInProgress = true;
return $q
.all(_.map(changedWidgets, widget => widget.save()))
.then(() => {
this.isLayoutDirty = false;
if (this.editBtnClickedWhileSaving) {
this.layoutEditing = false;
}
})
.catch(() => {
// in the off-chance that a widget got deleted mid-saving it's position, an error will occur
Expand All @@ -74,11 +81,17 @@ function DashboardCtrl(
})
.finally(() => {
this.saveInProgress = false;
this.editBtnClickedWhileSaving = false;
});
};

const saveDashboardLayoutDebounced = _.debounce(saveDashboardLayout, 2000);
const saveDashboardLayoutDebounced = () => {
this.saveDelay = true;
return _.debounce(() => this.saveDashboardLayout(), 2000)();
};

this.saveDelay = false;
this.editBtnClickedWhileSaving = false;
this.layoutEditing = false;
this.isFullscreen = false;
this.refreshRate = null;
Expand Down Expand Up @@ -402,7 +415,7 @@ function DashboardCtrl(

if (!this.layoutEditing) {
// We need to wait a bit while `angular` updates widgets, and only then save new layout
$timeout(saveDashboardLayout, 50);
$timeout(() => this.saveDashboardLayout(), 50);
}
};

Expand Down
4 changes: 4 additions & 0 deletions client/app/pages/dashboards/dashboard.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,10 @@
animation: saving 2s linear infinite;
}
}

&[data-error] {
color: #F44336;
}
}
}

Expand Down