mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux: dashboard settings progress
This commit is contained in:
Torkel Ödegaard
parent
7f597283e8
commit
c4b759fe6d
@ -1,146 +1,122 @@
|
||||
<div class="tabbed-view-header">
|
||||
<h2 class="tabbed-view-title">
|
||||
Version history
|
||||
</h2>
|
||||
<h3 class="dashboard-settings__header">
|
||||
<a ng-click="ctrl.switchMode('list')">Version History</a>
|
||||
<span ng-show="ctrl.mode === 'compare'">
|
||||
> Comparing {{ctrl.baseInfo.version}}
|
||||
<i class="fa fa-arrows-h"></i>
|
||||
{{ctrl.newInfo.version}}
|
||||
<cite class="muted" ng-if="ctrl.isNewLatest">(Latest)</cite>
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<ul class="gf-tabs">
|
||||
<li class="gf-tabs-item" >
|
||||
<a class="gf-tabs-link" ng-click="ctrl.switchMode('list');" ng-class="{active: ctrl.mode === 'list'}">
|
||||
List
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item" ng-show="ctrl.mode === 'compare'">
|
||||
<span class="active gf-tabs-link">
|
||||
Version Comparison
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="tabbed-view-close-btn" ng-click="ctrl.dismiss();">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
<div class="page-action-bar" ng-show="ctrl.mode === 'list'">
|
||||
<div class="page-action-bar__spacer"></div>
|
||||
<button type="button"
|
||||
class="btn btn-success"
|
||||
ng-if="ctrl.revisions.length > 1"
|
||||
ng-disabled="!ctrl.canCompare"
|
||||
ng-click="ctrl.getDiff(ctrl.diff)"
|
||||
bs-tooltip="ctrl.canCompare ? '' : 'Select 2 versions to start comparing'" data-placement="bottom">
|
||||
<i class="fa fa-code-fork" ></i> Compare versions
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tabbed-view-body">
|
||||
<div ng-if="ctrl.mode === 'list'">
|
||||
<div ng-if="ctrl.loading">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
<em>Fetching history list…</em>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.mode === 'list'">
|
||||
<div ng-if="ctrl.loading">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
<em>Fetching history list…</em>
|
||||
</div>
|
||||
<div ng-if="!ctrl.loading">
|
||||
<div class="gf-form-group">
|
||||
<table class="filter-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="width-4"></th>
|
||||
<th class="width-4">Version</th>
|
||||
<th class="width-14">Date</th>
|
||||
<th class="width-10">Updated By</th>
|
||||
<th>Notes</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="revision in ctrl.revisions">
|
||||
<td class="filter-table__switch-cell" bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''" data-placement="right">
|
||||
<gf-form-switch switch-class="gf-form-switch--table-cell" checked="revision.checked" on-change="ctrl.revisionSelectionChanged()" ng-disabled="!revision.checked && ctrl.canCompare">
|
||||
</gf-form-switch>
|
||||
</td>
|
||||
<td class="text-center">{{revision.version}}</td>
|
||||
<td>{{revision.createdDateString}}</td>
|
||||
<td>{{revision.createdBy}}</td>
|
||||
<td>{{revision.message}}</td>
|
||||
<td class="text-right">
|
||||
<a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version" ng-click="ctrl.restore(revision.version)">
|
||||
<i class="fa fa-history"></i> Restore
|
||||
</a>
|
||||
<a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
|
||||
<i class="fa fa-check"></i> Latest
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div ng-if="!ctrl.loading">
|
||||
<div class="gf-form-group">
|
||||
<table class="filter-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="width-4"></th>
|
||||
<th class="width-4">Version</th>
|
||||
<th class="width-14">Date</th>
|
||||
<th class="width-10">Updated By</th>
|
||||
<th>Notes</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="revision in ctrl.revisions">
|
||||
<td class="filter-table__switch-cell" bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''" data-placement="right">
|
||||
<gf-form-switch switch-class="gf-form-switch--table-cell"
|
||||
checked="revision.checked"
|
||||
on-change="ctrl.revisionSelectionChanged()"
|
||||
ng-disabled="!revision.checked && ctrl.canCompare">
|
||||
</gf-form-switch>
|
||||
</td>
|
||||
<td class="text-center">{{revision.version}}</td>
|
||||
<td>{{revision.createdDateString}}</td>
|
||||
<td>{{revision.createdBy}}</td>
|
||||
<td>{{revision.message}}</td>
|
||||
<td class="text-right">
|
||||
<a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version" ng-click="ctrl.restore(revision.version)">
|
||||
<i class="fa fa-history"></i> Restore
|
||||
</a>
|
||||
<a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
|
||||
<i class="fa fa-check"></i> Latest
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div ng-if="ctrl.appending">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
<em>Fetching more entries…</em>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-group" ng-show="ctrl.mode === 'list'">
|
||||
<div class="gf-form-button-row">
|
||||
<button type="button"
|
||||
class="btn gf-form-button btn-secondary"
|
||||
ng-if="ctrl.revisions.length > 1"
|
||||
ng-disabled="!ctrl.canCompare"
|
||||
ng-click="ctrl.getDiff(ctrl.diff)"
|
||||
bs-tooltip="ctrl.canCompare ? '' : 'Select 2 versions to start comparing'" data-placement="bottom">
|
||||
<i class="fa fa-code-fork" ></i> Compare versions
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn gf-form-button btn-inverse"
|
||||
ng-if="ctrl.revisions.length >= ctrl.limit"
|
||||
ng-click="ctrl.addToLog()"
|
||||
ng-disabled="ctrl.isLastPage()">
|
||||
Show more versions
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-tab-with-sidemenu" ng-if="ctrl.mode === 'compare'">
|
||||
<aside class="edit-sidemenu-aside">
|
||||
<ul class="edit-sidemenu">
|
||||
<li ng-class="{active: ctrl.diff === 'basic'}"><a ng-click="ctrl.getDiff('basic')" href="">Change Summary</a></li>
|
||||
<li ng-class="{active: ctrl.diff === 'html'}"><a ng-click="ctrl.getDiff('json')" href="">JSON Diff</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<div class="edit-tab-content">
|
||||
<div ng-if="ctrl.loading">
|
||||
<div ng-if="ctrl.appending">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
<em>Fetching changes…</em>
|
||||
<em>Fetching more entries…</em>
|
||||
</div>
|
||||
|
||||
<div ng-if="!ctrl.loading">
|
||||
<a type="button"
|
||||
class="btn gf-form-button btn-secondary pull-right"
|
||||
ng-click="ctrl.restore(ctrl.baseInfo.version)"
|
||||
ng-if="ctrl.isNewLatest">
|
||||
<i class="fa fa-history" ></i> Restore to version {{ctrl.baseInfo.version}}
|
||||
</a>
|
||||
<h4>
|
||||
Comparing Version {{ctrl.baseInfo.version}}
|
||||
<i class="fa fa-arrows-h"></i>
|
||||
Version {{ctrl.newInfo.version}}
|
||||
<cite class="muted" ng-if="ctrl.isNewLatest">(Latest)</cite>
|
||||
</h4>
|
||||
<section>
|
||||
<p class="small muted">
|
||||
<strong>Version {{ctrl.newInfo.version}}</strong> updated by
|
||||
<span>{{ctrl.newInfo.createdBy}} </span>
|
||||
<span>{{ctrl.newInfo.ageString}}</span>
|
||||
<span> - {{ctrl.newInfo.message}}</span>
|
||||
</p>
|
||||
<p class="small muted">
|
||||
<strong>Version {{ctrl.baseInfo.version}}</strong> updated by
|
||||
<span>{{ctrl.baseInfo.createdBy}} </span>
|
||||
<span>{{ctrl.baseInfo.ageString}}</span>
|
||||
<span> - {{ctrl.baseInfo.message}}</span>
|
||||
</p>
|
||||
</section>
|
||||
<div id="delta" diff-delta>
|
||||
<div class="delta-basic" ng-show="ctrl.diff === 'basic'" compile="ctrl.delta.basic"></div>
|
||||
<div class="delta-html" ng-show="ctrl.diff === 'json'" compile="ctrl.delta.json"></div>
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-button-row">
|
||||
<button type="button"
|
||||
class="btn gf-form-button btn-inverse"
|
||||
ng-if="ctrl.revisions.length >= ctrl.limit"
|
||||
ng-click="ctrl.addToLog()"
|
||||
ng-disabled="ctrl.isLastPage()">
|
||||
Show more versions
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.mode === 'compare'">
|
||||
<div ng-if="ctrl.loading">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
<em>Fetching changes…</em>
|
||||
</div>
|
||||
|
||||
<div ng-if="!ctrl.loading">
|
||||
<button type="button"
|
||||
class="btn btn-danger pull-right"
|
||||
ng-click="ctrl.restore(ctrl.baseInfo.version)"
|
||||
ng-if="ctrl.isNewLatest">
|
||||
<i class="fa fa-history" ></i> Restore to version {{ctrl.baseInfo.version}}
|
||||
</button>
|
||||
<section>
|
||||
<p class="small muted">
|
||||
<strong>Version {{ctrl.newInfo.version}}</strong> updated by
|
||||
<span>{{ctrl.newInfo.createdBy}} </span>
|
||||
<span>{{ctrl.newInfo.ageString}}</span>
|
||||
<span> - {{ctrl.newInfo.message}}</span>
|
||||
</p>
|
||||
<p class="small muted">
|
||||
<strong>Version {{ctrl.baseInfo.version}}</strong> updated by
|
||||
<span>{{ctrl.baseInfo.createdBy}} </span>
|
||||
<span>{{ctrl.baseInfo.ageString}}</span>
|
||||
<span> - {{ctrl.baseInfo.message}}</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div id="delta" diff-delta>
|
||||
<div class="delta-basic" compile="ctrl.delta.basic"></div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-button-row">
|
||||
<button class="btn btn-secondary" ng-click="ctrl.getDiff('json')">View JSON Diff</button>
|
||||
</div>
|
||||
|
||||
<div class="delta-html" ng-show="ctrl.diff === 'json'" compile="ctrl.delta.json"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
<div class="modal-body" ng-controller="AddAnnotationModalCtrl">
|
||||
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-header-title">
|
||||
Add Annotation
|
||||
</h2>
|
||||
|
||||
<a class="modal-header-close" ng-click="ctrl.close()">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="share-modal-body">
|
||||
<div class="share-modal-header">
|
||||
|
||||
<div class="share-modal-big-icon">
|
||||
<i class="fa fa-tag"></i>
|
||||
</div>
|
||||
|
||||
<div class="share-modal-content">
|
||||
|
||||
<div class="gf-form-group share-modal-options">
|
||||
<p class="share-modal-info-text">
|
||||
Add annotation details.
|
||||
</p>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8">Title</span>
|
||||
<input type="text" ng-model="ctrl.annotation.title" class="gf-form-input max-width-20">
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-8" ng-if="!ctrl.annotation.timeTo">Time</span>
|
||||
<span class="gf-form-label width-8" ng-if="ctrl.annotation.timeTo">Time Start</span>
|
||||
<input type="text" ng-model="ctrl.annotation.time" class="gf-form-input max-width-20">
|
||||
</div>
|
||||
<div class="gf-form" ng-if="ctrl.annotation.timeTo">
|
||||
<span class="gf-form-label width-8">Time Stop</span>
|
||||
<input type="text" ng-model="ctrl.annotation.timeTo" class="gf-form-input max-width-20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6>Description</h6>
|
||||
</div>
|
||||
<div class="gf-form-group share-modal-options">
|
||||
<div class="gf-form">
|
||||
<textarea rows="3" class="gf-form-input width-27" ng-model="ctrl.annotation.text"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-button-row">
|
||||
<button class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.addAnnotation()">
|
||||
<i class="fa fa-pencil"></i>
|
||||
Add Annotation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,64 +0,0 @@
|
||||
<h3 class="dashboard-settings__header">General</h3>
|
||||
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-7">Name</label>
|
||||
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-7">Description</label>
|
||||
<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-7">
|
||||
Tags
|
||||
<info-popover mode="right-normal">Press enter to add a tag</info-popover>
|
||||
</label>
|
||||
<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
|
||||
</bootstrap-tagsinput>
|
||||
</div>
|
||||
<folder-picker initial-title="ctrl.dashboard.meta.folderTitle"
|
||||
initial-folder-id="ctrl.dashboard.folderId"
|
||||
on-change="ctrl.onFolderChange($folder)"
|
||||
label-class="width-7">
|
||||
</folder-picker>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h5 class="section-heading">Options</h5>
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-11">Timezone</label>
|
||||
<div class="gf-form-select-wrapper">
|
||||
<select ng-model="ctrl.dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
|
||||
</div>
|
||||
</div>
|
||||
<gf-form-switch class="gf-form" label="Editable" tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable" label-class="width-11">
|
||||
</gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label="Hide Controls" tooltip="Hide row controls. Shortcut: CTRL+H or CMD+H" checked="ctrl.dashboard.hideControls" label-class="width-11">
|
||||
</gf-form-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h5 class="section-heading">Panel Options</h5>
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-11">
|
||||
Graph Tooltip
|
||||
<info-popover mode="right-normal">
|
||||
Cycle between options using Shortcut: CTRL+O or CMD+O
|
||||
</info-popover>
|
||||
</label>
|
||||
<div class="gf-form-select-wrapper">
|
||||
<select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div ng-if="editor.index == 1"> -->
|
||||
</div>
|
||||
<!-- -->
|
||||
<!-- <div ng-if="editor.index == 2"> -->
|
||||
<!-- </div> -->
|
||||
<!-- -->
|
||||
<!-- </div> -->
|
||||
@ -66,3 +66,15 @@
|
||||
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'links'" >
|
||||
<dash-links-editor></dash-links-editor>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'versions'" >
|
||||
<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'view_json'" >
|
||||
<h3 class="dashboard-settings__header">View JSON</h3>
|
||||
|
||||
<div class="gf-form">
|
||||
<textarea class="gf-form-input" ng-model="ctrl.json" rows="30" spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,7 @@ export class SettingsCtrl {
|
||||
dashboard: DashboardModel;
|
||||
isOpen: boolean;
|
||||
viewId: string;
|
||||
json: string;
|
||||
|
||||
sections: any[] = [
|
||||
{title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"},
|
||||
@ -31,21 +32,23 @@ export class SettingsCtrl {
|
||||
for (let section of this.sections) {
|
||||
const sectionParams = _.defaults({editview: section.id}, params);
|
||||
section.url = url + '?' + $.param(sectionParams);
|
||||
console.log(section.url);
|
||||
}
|
||||
|
||||
this.viewId = params.editview;
|
||||
$rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
|
||||
|
||||
this.$scope.$on('$destroy', () => {
|
||||
this.dashboard.updateSubmenuVisibility();
|
||||
this.$rootScope.$broadcast("refresh");
|
||||
});
|
||||
|
||||
this.onRouteUpdated();
|
||||
$rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
|
||||
}
|
||||
|
||||
onRouteUpdated() {
|
||||
console.log('settings route updated');
|
||||
this.viewId = this.$location.search().editview;
|
||||
|
||||
if (this.viewId) {
|
||||
this.json = JSON.stringify(this.dashboard.getSaveModelClone(), null, 2);
|
||||
}
|
||||
}
|
||||
|
||||
hideSettings() {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<div ng-if="variables.length === 0">
|
||||
<div class="empty-list-cta">
|
||||
<div class="empty-list-cta__title">There are no template variables added yet</div>
|
||||
<div class="empty-list-cta__title">There are no variables added yet</div>
|
||||
<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-success">
|
||||
<i class="gicon gicon-dashboard-new"></i>
|
||||
Add variable
|
||||
|
||||
Loading…
Reference in New Issue
Block a user