Files
grafana/public/app/features/dashboard/audit/audit_ctrl.ts

236 lines
6.8 KiB
TypeScript
Raw Normal View History

History and Version Control for Dashboard Updates A simple version control system for dashboards. Closes #1504. Goals 1. To create a new dashboard version every time a dashboard is saved. 2. To allow users to view all versions of a given dashboard. 3. To allow users to rollback to a previous version of a dashboard. 4. To allow users to compare two versions of a dashboard. Usage Navigate to a dashboard, and click the settings cog. From there, click the "Changelog" button to be brought to the Changelog view. In this view, a table containing each version of a dashboard can be seen. Each entry in the table represents a dashboard version. A selectable checkbox, the version number, date created, name of the user who created that version, and commit message is shown in the table, along with a button that allows a user to restore to a previous version of that dashboard. If a user wants to restore to a previous version of their dashboard, they can do so by clicking the previously mentioned button. If a user wants to compare two different versions of a dashboard, they can do so by clicking the checkbox of two different dashboard versions, then clicking the "Compare versions" button located below the dashboard. From there, the user is brought to a view showing a summary of the dashboard differences. Each summarized change contains a link that can be clicked to take the user a JSON diff highlighting the changes line by line. Overview of Changes Backend Changes - A `dashboard_version` table was created to store each dashboard version, along with a dashboard version model and structs to represent the queries and commands necessary for the dashboard version API methods. - API endpoints were created to support working with dashboard versions. - Methods were added to create, update, read, and destroy dashboard versions in the database. - Logic was added to compute the diff between two versions, and display it to the user. - The dashboard migration logic was updated to save a "Version 1" of each existing dashboard in the database. Frontend Changes - New views - Methods to pull JSON and HTML from endpoints New API Endpoints Each endpoint requires the authorization header to be sent in the format, ``` Authorization: Bearer <jwt> ``` where `<jwt>` is a JSON web token obtained from the Grafana admin panel. `GET "/api/dashboards/db/:dashboardId/versions?orderBy=<string>&limit=<int>&start=<int>"` Get all dashboard versions for the given dashboard ID. Accepts three URL parameters: - `orderBy` String to order the results by. Possible values are `version`, `created`, `created_by`, `message`. Default is `versions`. Ordering is always in descending order. - `limit` Maximum number of results to return - `start` Position in results to start from `GET "/api/dashboards/db/:dashboardId/versions/:id"` Get an individual dashboard version by ID, for the given dashboard ID. `POST "/api/dashboards/db/:dashboardId/restore"` Restore to the given dashboard version. Post body is of content-type `application/json`, and must contain. ```json { "dashboardId": <int>, "version": <int> } ``` `GET "/api/dashboards/db/:dashboardId/compare/:versionA...:versionB"` Compare two dashboard versions by ID for the given dashboard ID, returning a JSON delta formatted representation of the diff. The URL format follows what GitHub does. For example, visiting [/api/dashboards/db/18/compare/22...33](http://ec2-54-80-139-44.compute-1.amazonaws.com:3000/api/dashboards/db/18/compare/22...33) will return the diff between versions 22 and 33 for the dashboard ID 18. Dependencies Added - The Go package [gojsondiff](https://github.com/yudai/gojsondiff) was added and vendored.
2017-05-24 19:14:39 -04:00
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import angular from 'angular';
import moment from 'moment';
import coreModule from 'app/core/core_module';
import {DashboardModel} from '../model';
import {AuditLogOpts, RevisionsModel} from './models';
export class AuditLogCtrl {
appending: boolean;
dashboard: DashboardModel;
delta: { basic: string; html: string; };
diff: string;
limit: number;
loading: boolean;
max: number;
mode: string;
orderBy: string;
revisions: RevisionsModel[];
selected: number[];
start: number;
/** @ngInject */
constructor(private $scope,
private $rootScope,
private $window,
private $q,
private contextSrv,
private auditSrv) {
$scope.ctrl = this;
this.appending = false;
this.dashboard = $scope.dashboard;
this.diff = 'basic';
this.limit = 10;
this.loading = false;
this.max = 2;
this.mode = 'list';
this.orderBy = 'version';
this.selected = [];
this.start = 0;
this.resetFromSource();
$scope.$watch('ctrl.mode', newVal => {
$window.scrollTo(0, 0);
if (newVal === 'list') {
this.reset();
}
});
$rootScope.onAppEvent('dashboard-saved', this.onDashboardSaved.bind(this));
}
addToLog() {
this.start = this.start + this.limit;
this.getLog(true);
}
compareRevisionStateChanged(revision: any) {
if (revision.checked) {
this.selected.push(revision.version);
} else {
_.remove(this.selected, version => version === revision.version);
}
this.selected = _.sortBy(this.selected);
}
compareRevisionDisabled(checked: boolean) {
return (this.selected.length === this.max && !checked) || this.revisions.length === 1;
}
formatDate(date) {
date = moment.isMoment(date) ? date : moment(date);
const format = 'YYYY-MM-DD HH:mm:ss';
return this.dashboard.timezone === 'browser' ?
moment(date).format(format) :
moment.utc(date).format(format);
}
formatBasicDate(date) {
const now = this.dashboard.timezone === 'browser' ? moment() : moment.utc();
const then = this.dashboard.timezone === 'browser' ? moment(date) : moment.utc(date);
return then.from(now);
}
getDiff(diff: string) {
if (!this.isComparable()) { return; } // disable button but not tooltip
this.diff = diff;
this.mode = 'compare';
this.loading = true;
// instead of using lodash to find min/max we use the index
// due to the array being sorted in ascending order
const compare = {
new: this.selected[1],
original: this.selected[0],
};
if (this.delta[this.diff]) {
this.loading = false;
return this.$q.when(this.delta[this.diff]);
} else {
return this.auditSrv.compareVersions(this.dashboard, compare, diff).then(response => {
this.delta[this.diff] = response;
}).catch(err => {
this.mode = 'list';
this.$rootScope.appEvent('alert-error', ['There was an error fetching the diff', (err.message || err)]);
}).finally(() => { this.loading = false; });
}
}
getLog(append = false) {
this.loading = !append;
this.appending = append;
const options: AuditLogOpts = {
limit: this.limit,
start: this.start,
orderBy: this.orderBy,
};
return this.auditSrv.getAuditLog(this.dashboard, options).then(revisions => {
const formattedRevisions = _.flow(
_.partialRight(_.map, rev => _.extend({}, rev, {
checked: false,
message: (revision => {
if (revision.message === '') {
if (revision.version === 1) {
return 'Dashboard\'s initial save';
}
if (revision.restoredFrom > 0) {
return `Restored from version ${revision.restoredFrom}`;
}
if (revision.parentVersion === 0) {
return 'Dashboard overwritten';
}
return 'Dashboard saved';
}
return revision.message;
})(rev),
})))(revisions);
this.revisions = append ? this.revisions.concat(formattedRevisions) : formattedRevisions;
}).catch(err => {
this.$rootScope.appEvent('alert-error', ['There was an error fetching the audit log', (err.message || err)]);
}).finally(() => {
this.loading = false;
this.appending = false;
});
}
getMeta(version: number, property: string) {
const revision = _.find(this.revisions, rev => rev.version === version);
return revision[property];
}
isOriginalCurrent() {
return this.selected[1] === this.dashboard.version;
}
isComparable() {
const isParamLength = this.selected.length === 2;
const areNumbers = this.selected.every(version => _.isNumber(version));
const areValidVersions = _.filter(this.revisions, revision => {
return revision.version === this.selected[0] || revision.version === this.selected[1];
}).length === 2;
return isParamLength && areNumbers && areValidVersions;
}
isLastPage() {
return _.find(this.revisions, rev => rev.version === 1);
}
onDashboardSaved() {
this.$rootScope.appEvent('hide-dash-editor');
}
reset() {
this.delta = { basic: '', html: '' };
this.diff = 'basic';
this.mode = 'list';
this.revisions = _.map(this.revisions, rev => _.extend({}, rev, { checked: false }));
this.selected = [];
this.start = 0;
}
resetFromSource() {
this.revisions = [];
return this.getLog().then(this.reset.bind(this));
}
restore(version: number) {
this.$rootScope.appEvent('confirm-modal', {
title: 'Restore version',
text: '',
text2: `Are you sure you want to restore the dashboard to version ${version}? All unsaved changes will be lost.`,
icon: 'fa-rotate-right',
yesText: `Yes, restore to version ${version}`,
onConfirm: this.restoreConfirm.bind(this, version),
});
}
restoreConfirm(version: number) {
this.loading = true;
return this.auditSrv.restoreDashboard(this.dashboard, version).then(response => {
this.revisions.unshift({
id: this.revisions[0].id + 1,
checked: false,
dashboardId: this.dashboard.id,
parentVersion: version,
version: this.revisions[0].version + 1,
created: new Date(),
createdBy: this.contextSrv.user.name,
message: `Restored from version ${version}`,
});
this.reset();
const restoredData = response.dashboard;
this.dashboard = restoredData.dashboard;
this.dashboard.meta = restoredData.meta;
this.$scope.setupDashboard(restoredData);
}).catch(err => {
this.$rootScope.appEvent('alert-error', ['There was an error restoring the dashboard', (err.message || err)]);
}).finally(() => { this.loading = false; });
}
}
coreModule.controller('AuditLogCtrl', AuditLogCtrl);