ux(dashboard): add panel stuff

public/app/features/dashboard/row/row.html

@@ -1,4 +1,4 @@
-<div class="dash-row-header" ng-if="ctrl.dashboard.editMode">
+<div class="dash-row-header gf-form-inline" ng-if="ctrl.dashboard.editMode">
   <div class="gf-form gf-form--grow dropdown">
     <a class="btn gf-form-btn btn-inverse dropdown-toggle" data-toggle="dropdown">
       <span>{{ctrl.row.title}}</span>
@@ -39,9 +39,10 @@
       </li>
     </ul>
 
-    <label class="btn gf-form-btn btn-inverse">
-      Add Panel <i class="fa fa-plus"></i>
-    </label>
+    <a class="btn gf-form-btn btn-inverse" ng-click="ctrl.addPanelMode=!ctrl.addPanelMode">
+      Add Panel
+      <i class="fa fa-plus"></i>
+    </a>
 
     <div class="gf-form-label gf-form-label--grow text-right" ng-click="ctrl.row.collapse = !ctrl.row.collapse">
       <a class="pointer">
@@ -57,7 +58,14 @@
 </div>
 
 <div class="panels-wrapper" ng-if="!ctrl.row.collapse">
-  <div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width ui-on-drag-enter="ctrl.onDragEnter($data)">
+  <div class="add-panel-container" ng-if="ctrl.addPanelMode">
+    <div class="add-panel-item" ng-repeat="panel in ctrl.panelPlugins">
+      <img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
+      <div class="add-panel-item-name">{{panel.name}}</div>
+    </div>
+  </div>
+
+  <div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
     <plugin-component type="panel" class="panel-margin">
     </plugin-component>
   </div>

public/app/features/dashboard/row/row.ts

@@ -13,11 +13,28 @@ export class DashRowCtrl {
   dashboard: any;
   row: any;
   panelPlugins;
+  addPanelSegment;
 
    /** @ngInject */
-  constructor(private $scope, private $rootScope, private $timeout) {
+  constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
     this.panelPlugins = config.panels;
+    console.log(this.panelPlugins);
+
     this.row.title = this.row.title || 'Row title';
+    this.addPanelSegment = uiSegmentSrv.newSegment({
+      value: 'add',
+      custom: 'false',
+      html: 'Add Panel <i class="fa fa-plus"></i>',
+      renderer: (item, defaultHighlighter) => {
+        return '<img src="' + item.img + '">' + defaultHighlighter(item.text);
+      }
+    });
+  }
+
+  getPanels() {
+    return this.$q.when(_.map(config.panels, panel => {
+      return this.uiSegmentSrv.newSegment({value: panel.name});
+    }));
   }
 
   onDrop(panelId, dropTarget) {
@@ -38,10 +55,6 @@ export class DashRowCtrl {
     this.$rootScope.$broadcast('render');
   }
 
-  onDragEnter(data) {
-    console.log('drag enter', data);
-  }
-
   addPanel(panel) {
     this.dashboard.addPanel(panel, this.row);
     this.$timeout(() => {

public/app/plugins/datasource/graphite/query_ctrl.ts

@@ -176,7 +176,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
       });
 
       // add wildcard option
-      altSegments.unshift(this.uiSegmentSrv.newSegment('*'));
+      altSegments.unshift(this.uiSegmentSr.newSegment('*'));
       return altSegments;
     }).catch(err => {
       appEvents.emit('alert-error', ['Error', err]);

public/sass/pages/_dashboard.scss

@@ -239,7 +239,6 @@ div.flot-text {
 .dash-edit-mode {
   .dash-row {
   }
-
   .panels-wrapper {
     padding: $panel-margin*2 0 0 $panel-margin;
   }
@@ -266,3 +265,30 @@ div.flot-text {
     color: $white;
   }
 }
+
+.add-panel-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.add-panel-item {
+  background: $panel-bg;
+  padding: $spacer;
+  min-width: 10rem;
+  max-width: 10rem;
+  text-align: center;
+  margin: $panel-margin;
+  &:hover {
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
+  }
+}
+
+.add-panel-item-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.add-panel-item-img {
+  width: 3.5rem;
+}