mirror of
https://github.com/grafana/grafana.git
synced 2025-02-10 23:55:47 -06:00
b6e46c9eb8
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.
55 lines
1.7 KiB
HTML
55 lines
1.7 KiB
HTML
<div class="modal-body" ng-controller="SaveDashboardMessageCtrl" ng-init="init();">
|
|
<div class="modal-header">
|
|
<h2 class="modal-header-title">
|
|
<i class="fa fa-exclamation"></i>
|
|
<span class="p-l-1">Unsaved changes</span>
|
|
</h2>
|
|
|
|
<a class="modal-header-close" ng-click="dismiss();">
|
|
<i class="fa fa-remove"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<form name="saveMessage" ng-submit="saveVersion(saveMessage.$valid)" class="modal-content" novalidate>
|
|
<h6 class="text-center">
|
|
You're leaving without saving your changes, are you sure you want to leave? To save, add a small note to describe the changes in this version.
|
|
</h6>
|
|
<div class="p-t-2">
|
|
<div class="gf-form">
|
|
<label class="gf-form-hint">
|
|
<input
|
|
type="text"
|
|
name="message"
|
|
class="gf-form-input"
|
|
placeholder="Updates to …"
|
|
give-focus="true"
|
|
ng-model="clone.message"
|
|
ng-model-options="{allowInvalid: true}"
|
|
ng-keydown="keyDown($event)"
|
|
ng-maxlength="clone.max"
|
|
autocomplete="off"
|
|
required />
|
|
<small class="gf-form-hint-text muted" ng-cloak>
|
|
<span ng-class="{'text-error': saveMessage.message.$invalid && saveMessage.message.$dirty }">
|
|
{{clone.message.length || 0}}
|
|
</span>
|
|
/ {{clone.max}} characters
|
|
</small>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gf-form-button-row text-center">
|
|
<button type="submit" class="btn btn-success" ng-disabled="saveMessage.$invalid">
|
|
Save changes
|
|
</button>
|
|
<button type="button" class="btn btn-danger" ng-click="ignore();dismiss()">
|
|
Discard changes and leave
|
|
</button>
|
|
<button class="btn btn-inverse" ng-click="dismiss();">Cancel</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|