Merge pull request #15399 from grafana/15330-vizpicker-red-when-0-hits

Red border color on input when zero hits in vizpicker

package.json

@@ -129,14 +129,8 @@
     }
   },
   "lint-staged": {
-    "*.{ts,tsx,json,scss}": [
-      "prettier --write",
-      "git add"
-    ],
-    "*pkg/**/*.go": [
-      "gofmt -w -s",
-      "git add"
-    ]
+    "*.{ts,tsx,json,scss}": ["prettier --write", "git add"],
+    "*pkg/**/*.go": ["gofmt -w -s", "git add"]
   },
   "prettier": {
     "trailingComma": "es5",
@@ -201,12 +195,7 @@
     "**/@types/react": "16.7.6"
   },
   "workspaces": {
-    "packages": [
-      "packages/*"
-    ],
-    "nohoist": [
-      "**/@types/*",
-      "**/@types/*/**"
-    ]
+    "packages": ["packages/*"],
+    "nohoist": ["**/@types/*", "**/@types/*/**"]
   }
 }

packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx

+import React, { FC } from 'react';
+
+export interface Props {
+  children: JSX.Element | string;
+}
+
+const EmptySearchResult: FC<Props> = ({ children }) => {
+  return (
+    <div className="empty-search-result">{children}</div>
+  );
+};
+
+export { EmptySearchResult };

packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss

+.empty-search-result {
+  border-left: 3px solid $info-box-border-color;
+  background-color: $empty-list-cta-bg;
+  padding: $spacer;
+  min-width: 350px;
+  border-radius: $border-radius;
+  margin-bottom: $spacer*2;
+}

packages/grafana-ui/src/components/index.scss

@@ -7,4 +7,5 @@
 @import 'PanelOptionsGrid/PanelOptionsGrid';
 @import 'ColorPicker/ColorPicker';
 @import 'ValueMappingsEditor/ValueMappingsEditor';
+@import 'EmptySearchResult/EmptySearchResult';
 @import 'FormField/FormField';

packages/grafana-ui/src/components/index.ts

@@ -23,3 +23,4 @@ export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
 export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
 export { Gauge } from './Gauge/Gauge';
 export { Switch } from './Switch/Switch';
+export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';

public/app/features/dashboard/panel_editor/VizTypePicker.tsx

 import React, { PureComponent } from 'react';
-import _ from 'lodash';
 
 import config from 'app/core/config';
 import { PanelPlugin } from 'app/types/plugins';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
+import { EmptySearchResult } from '@grafana/ui';
 
 export interface Props {
   current: PanelPlugin;
@@ -14,9 +14,9 @@ export interface Props {
 
 export class VizTypePicker extends PureComponent<Props> {
   searchInput: HTMLElement;
-  pluginList = this.getPanelPlugins('');
+  pluginList = this.getPanelPlugins;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
   }
 
@@ -25,14 +25,13 @@ export class VizTypePicker extends PureComponent<Props> {
     return filteredPluginList.length - 1;
   }
 
-  getPanelPlugins(filter): PanelPlugin[] {
-    const panels = _.chain(config.panels)
-      .filter({ hideFromList: false })
-      .map(item => item)
-      .value();
+  get getPanelPlugins(): PanelPlugin[] {
+    const allPanels = config.panels;
 
-    // add sort by sort property
-    return _.sortBy(panels, 'sort');
+    return Object.keys(allPanels)
+      .filter(key => allPanels[key]['hideFromList'] === false)
+      .map(key => allPanels[key])
+      .sort((a: PanelPlugin, b: PanelPlugin) => a.sort - b.sort);
   }
 
   renderVizPlugin = (plugin: PanelPlugin, index: number) => {
@@ -63,11 +62,15 @@ export class VizTypePicker extends PureComponent<Props> {
 
   render() {
     const filteredPluginList = this.getFilteredPluginList();
-
+    const hasResults = filteredPluginList.length > 0;
     return (
       <div className="viz-picker">
         <div className="viz-picker-list">
-          {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
+          {hasResults ? (
+            filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))
+          ) : (
+            <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
+          )}
         </div>
       </div>
     );

public/app/plugins/panel/graph2/plugin.json

@@ -15,4 +15,3 @@
     }
   }
 }
-

public/app/plugins/panel/heatmap/plugin.json

@@ -16,8 +16,8 @@
       "large": "img/icn-heatmap-panel.svg"
     },
     "links": [
-      {"name": "Brendan Gregg - Heatmaps", "url": "http://www.brendangregg.com/heatmaps.html"},
-      {"name": "Brendan Gregg - Latency Heatmaps", "url": " http://www.brendangregg.com/HeatMaps/latency.html"}
+      { "name": "Brendan Gregg - Heatmaps", "url": "http://www.brendangregg.com/heatmaps.html" },
+      { "name": "Brendan Gregg - Latency Heatmaps", "url": " http://www.brendangregg.com/HeatMaps/latency.html" }
     ],
     "version": "5.0.0"
   }

public/app/plugins/panel/text/plugin.json

@@ -17,4 +17,3 @@
     "version": "5.0.0"
   }
 }
-

public/app/plugins/panel/text2/plugin.json

@@ -17,4 +17,3 @@
     }
   }
 }
-

public/sass/components/_panel_editor.scss

@@ -123,7 +123,6 @@
 }
 
 .viz-picker {
-  padding: 0px 20px;
   position: relative;
 }