Updated search result view, removed delete link, added delete action from dashboard cogs dropdown

pkg/api/dashboard.go

@@ -45,7 +45,7 @@ func GetDashboard(c *middleware.Context) {
 	dash := query.Result
 	dto := dtos.Dashboard{
 		Model: dash.Data,
-		Meta:  dtos.DashboardMeta{IsStarred: isStarred},
+		Meta:  dtos.DashboardMeta{IsStarred: isStarred, Slug: slug},
 	}
 
 	c.JSON(200, dto)

pkg/api/dtos/models.go

@@ -28,6 +28,7 @@ type CurrentUser struct {
 type DashboardMeta struct {
 	IsStarred bool   `json:"isStarred"`
 	IsHome    bool   `json:"isHome"`
+	Slug      string `json:"slug"`
 }
 
 type Dashboard struct {

src/app/controllers/search.js

@@ -19,9 +19,6 @@ function (angular, _, config, $) {
       $scope.db = datasourceSrv.getGrafanaDB();
       $scope.currentSearchId = 0;
 
-      // events
-      $scope.onAppEvent('dashboard-deleted', $scope.dashboardDeleted);
-
       $timeout(function() {
         $scope.giveSearchFocus = $scope.giveSearchFocus + 1;
         $scope.query.query = '';
@@ -77,6 +74,10 @@ function (angular, _, config, $) {
         .then(function(results) {
           if (localSearchId < $scope.currentSearchId) { return; }
 
+          if ($scope.query.query === "") {
+            results.dashboards.splice(0, 1, { title: 'Home', url: config.appSubUrl + '/', isHome: true });
+          }
+
           $scope.results.dashboards = results.dashboards;
           $scope.results.tags = results.tags;
           $scope.resultCount = results.tagsOnly ? results.tags.length : results.dashboards.length;
@@ -112,16 +113,6 @@ function (angular, _, config, $) {
       $scope.searchDashboards();
     };
 
-    $scope.deleteDashboard = function(dash, evt) {
-      evt.stopPropagation();
-      $scope.appEvent('delete-dashboard', { slug: dash.slug, title: dash.title });
-    };
-
-    $scope.dashboardDeleted = function(evt, payload) {
-      var dash = _.findWhere($scope.results.dashboards, { slug: payload.slug });
-      $scope.results.dashboards = _.without($scope.results.dashboards, dash);
-    };
-
     $scope.addMetricToCurrentDashboard = function (metricId) {
       $scope.dashboard.rows.push({
         title: '',

src/app/features/dashboard/dashboardNavCtrl.js

@@ -103,23 +103,21 @@ function (angular, _, moment, config, store) {
         });
     };
 
-    $scope.deleteDashboard = function(evt, options) {
+    $scope.deleteDashboard = function() {
       if (!$scope.isAdmin()) { return false; }
 
       $scope.appEvent('confirm-modal', {
         title: 'Delete dashboard',
-        text: 'Do you want to delete dashboard ' + options.title + '?',
+        text: 'Do you want to delete dashboard ' + $scope.dashboard.title + '?',
         onConfirm: function() {
-          $scope.deleteDashboardConfirmed(options);
+          $scope.deleteDashboardConfirmed();
         }
       });
     };
 
-    $scope.deleteDashboardConfirmed = function(options) {
+    $scope.deleteDashboardConfirmed = function() {
-      var slug = options.slug;
+      $scope.db.deleteDashboard($scope.dashboardMeta.slug).then(function() {
-      $scope.db.deleteDashboard(slug).then(function() {
+        $scope.appEvent('alert-success', ['Dashboard Deleted', $scope.dashboard.title + ' has been deleted']);
-        $scope.appEvent('dashboard-deleted', options);
-        $scope.appEvent('alert-success', ['Dashboard Deleted', options.title + ' has been deleted']);
       }, function(err) {
         $scope.appEvent('alert-error', ['Deleted failed', err]);
       });

src/app/partials/dashboard_topnav.html

@@ -43,6 +43,7 @@
 						<li><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
 						<li><a class="pointer" ng-click="exportDashboard();">Export</a></li>
 						<li><a class="pointer" ng-click="editJson();">View JSON</a></li>
+						<li><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
 					</ul>
 				</li>
 			</ul>

src/app/partials/search.html

@@ -7,11 +7,11 @@
 		</span>
 		<div class="search-switches">
 			<i class="fa fa-filter"></i>
-			<a class="pointer" ng-click="showStarred()" tabindex="2">
+			<a class="pointer" href="javascript:void();" ng-click="showStarred()" tabindex="2">
 				<i class="fa fa-remove" ng-show="query.starred"></i>
 				starred
 			</a> |
-			<a class="pointer" ng-click="showTags()" tabindex="3">
+			<a class="pointer" href="javascript:void();" ng-click="showTags()" tabindex="3">
 				<i class="fa fa-remove" ng-show="query.tagcloud"></i>
 				tags
 			</a>
@@ -43,28 +43,22 @@
 		<div class="search-results-container" ng-if="!query.tagcloud">
 			<h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6>
 
-			<div class="search-result-item pointer" bindonce ng-repeat="row in results.dashboards"
+			<a class="search-result-item pointer" bindonce ng-repeat="row in results.dashboards"
-				ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.slug)">
+				ng-class="{'selected': $index === selectedIndex }" ng-href="{{row.url}}">
 
-				<div class="search-result-actions small">
+				<span class="search-result-tags">
-					<a ng-click="deleteDashboard(row, $event)">
+					<span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name tag="tag"  class="label label-tag">
-						<i class="fa fa-remove"></i> delete
-					</a>
-				</div>
-
-				<div class="search-result-tags">
-					<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name tag="tag"  class="label label-tag">
 						{{tag}}
-					</a>
+					</span>
 					<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
-				</div>
+				</span>
 
-				<a class="search-result-link">
+				<span class="search-result-link">
-					<i class="fa fa-th-large"></i>
+					<i class="fa fa-th-large" ng-show="!row.isHome"></i>
+					<i class="fa fa-home" ng-show="row.isHome"></i>
 					<span bo-text="row.title"></span>
+				</span>
 			</a>
-
-			</div>
 		</div>
 	</div>
 

src/css/less/search.less

@@ -3,11 +3,16 @@
   top: 33px;
   margin: 15px;
   z-index: 1000;
-  position: fixed;
+  position: absolute;
   width: 700px;
   box-shadow: 0px 0px 55px 0px black;
   padding: 10px;
-  font-size: 16px;
+
+  .label-tag {
+    margin-left: 6px;
+    font-size: 11px;
+    padding: 2px 6px;
+  }
 }
 
 // Search
@@ -34,9 +39,7 @@
   line-height: 28px;
 
   .search-result-item:hover, .search-result-item.selected {
-    .search-result-link, .search-result-link > .fa {
+    background-color: @grafanaListHighlight;
-      color: @grafanaListHighlight;
-    }
   }
 
   .selected {
@@ -56,30 +59,21 @@
 
   .search-result-link {
     color: @grafanaListMainLinkColor;
-    .fa-th-large {
+    .fa {
       padding-right: 10px;
-      color: @grafanaListHighlightContrast;
     }
   }
 
-  .search-result-item:nth-child(odd) {
-    background-color: @grafanaListAccent;
-  }
-
   .search-result-item {
+    display: block;
     padding: 3px 10px;
     white-space: nowrap;
-    border-bottom: 1px solid @grafanaListBorderBottom;
+    background-color: @grafanaListBackground;
-    border-top: 1px solid @grafanaListBorderTop;
+    margin-bottom: 4px;
   }
 
   .search-result-tags {
     float: right;
-    .label-tag {
-      margin-left: 6px;
-      font-size: 11px;
-      padding: 2px 6px;
-    }
   }
 
   .search-result-actions {

src/css/less/variables.dark.less

@@ -85,13 +85,12 @@
 @borderRadiusSmall:     2px;
 
 // Lists
-@grafanaListBackground:  transparent;
+@grafanaListBackground:  #262626;
 @grafanaListAccent:      lighten(@grayDarker, 2%);
 @grafanaListBorderTop:      @grayDark;
 @grafanaListBorderBottom:   @black;
-@grafanaListHighlight:      @blue;
+@grafanaListHighlight:      #343434;
-@grafanaListHighlightContrast: #4F4F4F;
+@grafanaListMainLinkColor: @textColor;
-@grafanaListMainLinkColor: @linkColor;
 
 // Scrollbars
 @scrollbarBackground: #3a3a3a;