Skip to content

N
nexpie-grafana-theme
Commit ea4ce0ce by bergquist
Options

ux(playlist): finalize the ux for playlists

parent 6c617ba2
Showing with 65 additions and 20 deletions
public/app/features/playlist/partials/playlist.html
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
<h1 ng-show="!ctrl.isNew()">Edit Playlist</h1> <h1 ng-show="!ctrl.isNew()">Edit Playlist</h1>
</div> </div>
<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Name</span> <span class="gf-form-label width-7">Name</span>
...@@ -19,24 +21,28 @@ ...@@ -19,24 +21,28 @@
</div> </div>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="max-width-28"> <h3 class="page-headering">Dashboards</h3>
<h5 class="page-headering">Add dashboards</h5>
<div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
</div>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h5>Search results ({{ctrl.filteredDashboards.length + ctrl.filteredTags.length}})</h5>
<div class="playlist-search-containerwrapper">
<div class="max-width-32">
<h5 class="page-headering playlist-column-header">Available</h5>
<div style="">
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
</div>
</div>
</div>
<div ng-if="ctrl.filteredDashboards.length > 0"> <div ng-if="ctrl.filteredDashboards.length > 0">
<table class="grafana-options-table"> <table class="grafana-options-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.filteredDashboards"> <tr ng-repeat="playlistItem in ctrl.filteredDashboards">
<td style="white-space: nowrap;"> <td>
{{playlistItem.title}} <i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
</td> </td>
<td style="text-align: center"> <td class="add-dashboard">
<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)"> <button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Add to playlist Add to playlist
...@@ -46,7 +52,7 @@ ...@@ -46,7 +52,7 @@
</table> </table>
</div> </div>
<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;"> <div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
<div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;" <div ng-repeat="tag in ctrl.filteredTags" class="pointer tag-result-container"
ng-click="ctrl.addTagPlaylistItem(tag, $event)"> ng-click="ctrl.addTagPlaylistItem(tag, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term"> <a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
<i class="fa fa-tag"></i> <i class="fa fa-tag"></i>
...@@ -57,20 +63,20 @@ ...@@ -57,20 +63,20 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h5>Added dashboards</h5> <h5 class="page headering playlist-column-header">Selected</h5>
<table class="grafana-options-table"> <table class="grafana-options-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.playlistItems"> <tr ng-repeat="playlistItem in ctrl.playlistItems">
<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_id'"> <td ng-if="playlistItem.type === 'dashboard_by_id'">
{{playlistItem.title}} <i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
</td> </td>
<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_tag'"> <td ng-if="playlistItem.type === 'dashboard_by_tag'">
<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title"> <a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
<i class="fa fa-tag"></i> <i class="fa fa-tag"></i>
<span>{{playlistItem.title}}</span> <span>{{playlistItem.title}}</span>
</a> </a>
</td> </td>
<td style="text-align: right"> <td class="selected-playlistitem-settings">
<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)"> <button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
<i class="fa fa-arrow-up"></i> <i class="fa fa-arrow-up"></i>
</button> </button>
...@@ -89,7 +95,10 @@ ...@@ -89,7 +95,10 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<a class="btn btn-success" <a class="btn btn-success " ng-show="ctrl.isNew()"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)"><i class="fa fa-plus"></i>&nbsp;Add</a>
<a class="btn btn-success" ng-show="!ctrl.isNew()"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a> ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a> <a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
......
public/app/features/playlist/playlist_edit_ctrl.ts
...@@ -11,7 +11,7 @@ export class PlaylistEditCtrl { ...@@ -11,7 +11,7 @@ export class PlaylistEditCtrl {
searchQuery: string = ''; searchQuery: string = '';
loading: boolean = false; loading: boolean = false;
playlist: any = { playlist: any = {
interval: '10m', interval: '5m',
}; };
playlistItems: any = []; playlistItems: any = [];
dashboardresult: any = []; dashboardresult: any = [];
......
public/sass/pages/_playlist.scss
.playlist-description {
width: 555px;
margin-bottom: 20px;
}
.playlist-search-container { .playlist-search-container {
z-index: 1000; z-index: 1000;
position: relative; position: relative;
...@@ -18,6 +23,10 @@ ...@@ -18,6 +23,10 @@
right: 11px; right: 11px;
} }
.playlist-search-containerwrapper {
margin-bottom: 15px;
}
.playlist-search-field-wrapper { .playlist-search-field-wrapper {
input { input {
width: 100%; width: 100%;
...@@ -90,3 +99,29 @@ ...@@ -90,3 +99,29 @@
padding-left: 20px; padding-left: 20px;
} }
} }
.playlist-available-list {
td {
line-height: 2rem;
white-space: nowrap;
}
.add-dashboard {
text-align: center;
}
}
.playlist-column-header {
border-bottom: thin solid $gray-1;
padding-bottom: 10px;
margin-bottom: 15px;
}
.selected-playlistitem-settings {
text-align: right;
}
.tag-result-container {
width: 160px;
float: left;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment