apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux: dashboard settings progress

Browse Source
pull/10177/head
Torkel Ödegaard 8 years ago
parent 61dbcfd35b
commit 7f597283e8
6 changed files with 71 additions and 82 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      public/app/features/dashboard/dashboard_ctrl.ts
  2. 12
      public/app/features/dashboard/dashnav/dashnav.ts
  3. 3
      public/app/features/dashboard/partials/settings.html
  4. 4
      public/app/features/dashboard/settings/settings.html
  5. 11
      public/app/features/dashboard/settings/settings.ts
  6. 117
      public/app/features/dashlinks/editor.html

6
public/app/features/dashboard/dashboard_ctrl.ts
Unescape View File

@ -122,12 +122,6 @@ export class DashboardCtrl implements PanelContainer {
this.$rootScope.$broadcast("refresh");
}
onFolderChange(folder) {
this.dashboard.folderId = folder.id;
this.dashboard.meta.folderId = folder.id;
this.dashboard.meta.folderTitle= folder.title;
}
getPanelContainer() {
return this;
}

12
public/app/features/dashboard/dashnav/dashnav.ts
Unescape View File

@ -131,18 +131,6 @@ export class DashNavCtrl {
return this.dashboardSrv.showSaveAsModal();
}
viewJson() {
var clone = this.dashboard.getSaveModelClone();
this.$rootScope.appEvent('show-json-editor', {
object: clone,
});
}
onFolderChange(folderId) {
this.dashboard.folderId = folderId;
}
showSearch() {
this.$rootScope.appEvent('show-dash-search');
}

3
public/app/features/dashboard/partials/settings.html
Unescape View File

@ -56,8 +56,7 @@
</div>
<!-- <div ng&#45;if="editor.index == 1"> -->
<!-- <dash&#45;links&#45;editor></dash&#45;links&#45;editor> -->
<!-- </div> -->
</div>
<!-- -->
<!-- <div ng&#45;if="editor.index == 2"> -->
<!-- </div> -->

4
public/app/features/dashboard/settings/settings.html
Unescape View File

@ -62,3 +62,7 @@
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'" ng-include="'public/app/features/templating/partials/editor.html'">
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'links'" >
<dash-links-editor></dash-links-editor>
</div>

11
public/app/features/dashboard/settings/settings.ts
Unescape View File

@ -21,8 +21,9 @@ export class SettingsCtrl {
/** @ngInject */
constructor(private $scope, private $location, private $rootScope) {
// temp hack
this.$scope.dashboard = this.dashboard;
// temp hack for annotations and variables editors
// that rely on inherited scope
$scope.dashboard = this.dashboard;
const params = this.$location.search();
const url = $location.path();
@ -56,6 +57,12 @@ export class SettingsCtrl {
});
});
}
onFolderChange(folder) {
this.dashboard.folderId = folder.id;
this.dashboard.meta.folderId = folder.id;
this.dashboard.meta.folderTitle= folder.title;
}
}
export function dashboardSettings() {

117
public/app/features/dashlinks/editor.html
Unescape View File

@ -1,80 +1,77 @@
<div class="editor-row">
<h5 class="section-heading">Links and Dash Navigation</h5>
<h3 class="dashboard-settings__header">
Dashboard Links
</h3>
<div ng-repeat="link in dashboard.links">
<div class="gf-form-group gf-form-inline">
<div class="section">
<div class="gf-form">
<span class="gf-form-label width-8">Type</span>
<div class="gf-form-select-wrapper width-10">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
</div>
<div ng-repeat="link in dashboard.links">
<div class="gf-form-group gf-form-inline">
<div class="section">
<div class="gf-form">
<span class="gf-form-label width-8">Type</span>
<div class="gf-form-select-wrapper width-10">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
</div>
<div class="gf-form" ng-show="link.type === 'dashboards'">
<span class="gf-form-label width-8">With tags</span>
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
</div>
<div class="gf-form" ng-show="link.type === 'dashboards'">
<span class="gf-form-label width-8">With tags</span>
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
</div>
<gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4" label-class="width-8" on-change="updated()"></gf-form-switch>
<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
</div>
<div ng-show="link.type === 'link'">
<div class="gf-form">
<li class="gf-form-label width-8">Url</li>
<input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
</div>
<gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4" label-class="width-8" on-change="updated()"></gf-form-switch>
<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
<div class="gf-form">
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
<input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
</div>
<div ng-show="link.type === 'link'">
<div class="gf-form">
<li class="gf-form-label width-8">Url</li>
<input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Tooltip</span>
<input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Icon</span>
<div class="gf-form-select-wrapper width-20">
<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Tooltip</span>
<input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
</div>
</div>
<div class="section gf-form-inline" style="display: flex">
<div>
<div class="gf-form">
<span class="gf-form-label width-6">Include</span>
<div class="gf-form">
<span class="gf-form-label width-8">Icon</span>
<div class="gf-form-select-wrapper width-20">
<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
</div>
</div>
<div>
<gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
</div>
</div>
</div>
<div style="display:flex; flex-direction:column; justify-content:flex-start">
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn width-4" ng-click="deleteLink($index)">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, -1)" ng-hide="$first"><i class="fa fa-arrow-up"></i></button>
</div>
<div class="section gf-form-inline" style="display: flex">
<div>
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, 1)" ng-hide="$last"><i class="fa fa-arrow-down"></i></button>
<span class="gf-form-label width-6">Include</span>
</div>
</div>
<div>
<gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
</div>
</div>
<div style="display:flex; flex-direction:column; justify-content:flex-start">
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn width-4" ng-click="deleteLink($index)">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, -1)" ng-hide="$first"><i class="fa fa-arrow-up"></i></button>
</div>
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, 1)" ng-hide="$last"><i class="fa fa-arrow-down"></i></button>
</div>
</div>
</div>
</div>
<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>

Write Preview
Loading…
Cancel
Save