UI improvements to search result list (larger click are for dashboard title link, plus UI look polish), Closes #709

2025-02-25 18:55:37 -06:00 · 2014-08-18 16:38:04 +02:00 · 2014-08-18 16:38:04 +02:00 · a64604de6b
commit a64604de6b
parent 1a3dac0c17
9 changed files with 109 additions and 59 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,7 @@

 - [Issue #578](https://github.com/grafana/grafana/issues/578). Dashboard: Row option to display row title even when the row is visible
 - [Issue #672](https://github.com/grafana/grafana/issues/672). Dashboard: panel fullscreen & edit state is present in url, can now link to graph in edit & fullscreen mode.
+- [Issue #709](https://github.com/grafana/grafana/issues/709). Dashboard: Small UI look polish to search results, made dashboard title link are larger

 **Fixes**
 - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13)
--- a/src/app/controllers/dashboardNavCtrl.js
+++ b/src/app/controllers/dashboardNavCtrl.js
@ -87,7 +87,9 @@ function (angular, _, moment, config, store) {
        });
    };

-    $scope.deleteDashboard = function(id) {
+    $scope.deleteDashboard = function(id, $event) {
+      $event.stopPropagation();
+
      if (!confirm('Are you sure you want to delete dashboard?')) {
        return;
      }
--- a/src/app/controllers/graphiteTarget.js
+++ b/src/app/controllers/graphiteTarget.js
@ -289,7 +289,7 @@ function (angular, _, config, gfunc, Parser) {
      this.expandable = options.expandable;

      if (options.type === 'template') {
-        this.html = $sce.trustAsHtml("<span style='color: #ECEC09'>" + options.value + "</span>");
+        this.html = $sce.trustAsHtml(options.value);
      }
      else {
        this.html = $sce.trustAsHtml(this.value);
--- a/src/app/controllers/search.js
+++ b/src/app/controllers/search.js
@ -50,7 +50,12 @@ function (angular, _, config, $) {
      }
    };

-    $scope.shareDashboard = function(title, id) {
+    $scope.goToDashboard = function(id) {
+      $location.path("/dashboard/db/" + id);
+    };
+
+    $scope.shareDashboard = function(title, id, $event) {
+      $event.stopPropagation();
      var baseUrl = window.location.href.replace(window.location.hash,'');

      $scope.share = {
--- a/src/app/partials/search.html
+++ b/src/app/partials/search.html
@ -47,50 +47,46 @@

        <h6 ng-hide="results.dashboards.length || results.metrics.length">No dashboards or metrics matching your query found</h6>

-        <table class="table table-condensed table-striped" ng-if="tagsOnly">
-          <tr ng-repeat="tag in results.tags" ng-class="{'selected-tag': $index === selectedIndex }">
-            <td>
-              <a ng-click="filterByTag(tag.term, $event)" class="label label-tag">
-                {{tag.term}} &nbsp;({{tag.count}})
-              </a>
-            </td>
-            <td style="width:100%;padding-left: 10px;font-weight: bold;">
-            </td>
-          </tr>
-        </table>
+        <div class="search-results-container" ng-if="tagsOnly">
+					<div ng-repeat="tag in results.tags"
+						   class="search-result-item pointer"
+							 ng-class="{'selected': $index === selectedIndex }"
+							 ng-click="filterByTag(tag.term, $event)">
+						<a class="search-result-link" >
+							<i class="icon icon-tag"></i>
+							<span class="label label-tag">{{tag.term}} &nbsp;({{tag.count}})</span>
+						</a>
+          </div>
+        </div>

-        <table class="table table-condensed table-striped" ng-if="!tagsOnly">
-					<tbody style="max-height: 570px; overflow: auto; display: block">
-          <tr bindonce ng-repeat="row in results.metrics"
-              class="grafana-search-metric-result"
-              ng-class="{'selected': $index === selectedIndex }">
-            <td><span class="label label-info">metric</span></td>
-            <td class="grafana-search-metric-name">
-              {{row.id}}
-            </td>
-            <td style="width:100%;">
-              <div class="grafana-search-metric-actions">
-                <a ng-click="addMetricToCurrentDashboard(row.id)"><i class="icon-plus-sign"></i> Add to dashboard</a>
-              </div>
-            </td>
-          </tr>
+				<div class="search-results-container" ng-if="!tagsOnly">
+					<div class="search-result-item pointer"
+							bindonce ng-repeat="row in results.dashboards"
+							ng-class="{'selected': $index === selectedIndex }" ng-click="goToDashboard(row.id)">
+
+							<a class="search-result-link" href="#/dashboard/db/{{row.id}}">
+								<i class="icon icon-th-large"></i>
+								<span bo-text="row.id"></span>
+							</a>
+
+							<div class="search-result-actions">
+								<a ng-click="shareDashboard(row.id, row.id, $event)" config-modal="app/partials/dashLoaderShare.html">
+									<i class="icon-share"></i> share &nbsp;&nbsp;&nbsp;
+								</a>
+								<a ng-click="deleteDashboard(row.id, $event)">
+									<i class="icon-remove"></i> delete
+								</a>
+							</div>
+
+							<div class="search-result-tags">
+								<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" style="margin-right: 5px;" class="label label-tag">
+									{{tag}}
+								</a>
+							</div>
+
+					</div>
+				</div>

-          <tr bindonce
-              ng-repeat="row in results.dashboards"
-              ng-class="{'selected': $index === selectedIndex }">
-            <td><a ng-click="deleteDashboard(row.id)"><i class="icon-remove"></i></a></td>
-            <td style="width:100%">
-              <a href="#/dashboard/db/{{row.id}}" bo-text="row.id"></a>
-            </td>
-            <td style="white-space: nowrap; text-align: right;">
-              <a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" style="margin-right: 5px;" class="label label-tag">
-                {{tag}}
-              </a>
-            </td>
-            <td><a><i class="icon-share" ng-click="shareDashboard(row.id, row.id)" config-modal="app/partials/dashLoaderShare.html"></i></a></td>
-          </tr>
-					</tbody>
-        </table>
      </div>
    </li>

--- a/src/app/services/dashboard/dashboardKeyBindings.js
+++ b/src/app/services/dashboard/dashboardKeyBindings.js
@ -18,8 +18,8 @@ function(angular, $) {
        keyboardManager.unbind('ctrl+s');
        keyboardManager.unbind('ctrl+r');
        keyboardManager.unbind('ctrl+z');
-        keyboardManager.unbind('esc');
      });
+      keyboardManager.unbind('esc');

      keyboardManager.bind('ctrl+f', function(evt) {
        scope.emitAppEvent('open-search', evt);
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@ -35,9 +35,8 @@
 // Search

 .grafana-search-panel {
-  padding: 6px 10px;
-
  .search-field-wrapper {
+    padding: 6px 10px;
    input {
      width: 100%;
    }
@ -50,25 +49,55 @@
      padding-right: 25px;
    }
  }
+}

-  .selected td, tr.selected:nth-child(odd)>td {
-    background: @blue;
-    color: white;
-    text-shadow: -1px -1px 1px rgba(0,0,0,0.3);
-    a {
-      color: white;
+.search-results-container {
+  .search-result-item a {
+  }
+
+  .search-result-item:hover, .search-result-item.selected {
+    .search-result-link, .icon {
+      color: @grafanaListHighlight;
+    }
+    .search-result-link .label {
+      background-color: @blue;
    }
  }

-  .selected-tag .label-tag {
-    background-color: @blue;
+
+  .search-result-link {
+    color: @grafanaListMainLinkColor;
+    .icon {
+      padding-right: 10px;
+      color: @grafanaListHighlightContrast;
+    }
+  }
+
+  .search-result-item:nth-child(odd) {
+    background-color: @grafanaListAccent;
+  }
+
+  .search-result-item {
+    padding: 6px 10px;
+    white-space: nowrap;
+    border-top: 1px solid @grafanaListBorderTop;
+    border-bottom: 1px solid @grafanaListBorderBottom;
+  }
+
+  .search-result-tags {
+    float: right;
+  }
+
+  .search-result-actions {
+    float: right;
+    padding-left: 10px;
  }
 }

 .search-tagview-switch {
  position: absolute;
  top: 15px;
-  right: 263px;
+  right: 266px;
  color: darken(@linkColor, 30%);
  &.active {
    color: @linkColor;
--- a/src/css/less/variables.dark.less
+++ b/src/css/less/variables.dark.less
@ -57,7 +57,7 @@

 // Links
 // -------------------------
-@linkColor:             darken(@white,5%);
+@linkColor:             darken(@white,11%);
@linkColorHover:        @white;


@ -93,6 +93,14 @@
@borderRadiusLarge:     4px;
@borderRadiusSmall:     2px;

+// Lists
+@grafanaListBackground:  transparent;
+@grafanaListAccent:         #232323;
+@grafanaListBorderTop:      #3E3E3E;
+@grafanaListBorderBottom:   #1c1919;
+@grafanaListHighlight:      @blue;
+@grafanaListHighlightContrast: #4F4F4F;
+@grafanaListMainLinkColor: @linkColor;

 // Tables
 // -------------------------
--- a/src/css/less/variables.light.less
+++ b/src/css/less/variables.light.less
@ -20,7 +20,7 @@

 // Accent colors
 // -------------------------
-@blue:                  #01A6E6;
+@blue:                  #007FFF;
@blueDark:              #75CAEB;
@green:                 #28B62C;
@red:                   #FF4136;
@ -97,6 +97,15 @@
@borderRadiusLarge:     4px;
@borderRadiusSmall:     2px;

+// Lists
+@grafanaListBackground:  transparent;
+@grafanaListAccent:         #f9f9f9;
+@grafanaListBorderTop:      #eee;
+@grafanaListBorderBottom:   #efefef;
+@grafanaListHighlight:      @blue;
+@grafanaListHighlightContrast: #ddd;
+@grafanaListMainLinkColor: @textColor;
+

 // Tables
 // -------------------------