diff --git a/package.json b/package.json index 7dce5e04ea3..0a1eac59b21 100644 --- a/package.json +++ b/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/*/**"] } } diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx new file mode 100644 index 00000000000..ca31b12a007 --- /dev/null +++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx @@ -0,0 +1,13 @@ +import React, { FC } from 'react'; + +export interface Props { + children: JSX.Element | string; +} + +const EmptySearchResult: FC = ({ children }) => { + return ( +
{children}
+ ); +}; + +export { EmptySearchResult }; diff --git a/packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss b/packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss new file mode 100644 index 00000000000..3a1e3fa8b57 --- /dev/null +++ b/packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss @@ -0,0 +1,8 @@ +.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; +} diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index 225303722d8..a475a7ccc1b 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/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'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index dc435a8844d..86ce9347dad 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/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'; diff --git a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx index f0dd7d0f2c7..efbfed65a99 100644 --- a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx +++ b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx @@ -1,9 +1,9 @@ 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 { searchInput: HTMLElement; - pluginList = this.getPanelPlugins(''); + pluginList = this.getPanelPlugins; - constructor(props) { + constructor(props: Props) { super(props); } @@ -25,14 +25,13 @@ export class VizTypePicker extends PureComponent { 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 { render() { const filteredPluginList = this.getFilteredPluginList(); - + const hasResults = filteredPluginList.length > 0; return (
- {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))} + {hasResults ? ( + filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index)) + ) : ( + Could not find anything matching your query + )}
); diff --git a/public/app/plugins/panel/graph2/plugin.json b/public/app/plugins/panel/graph2/plugin.json index b11f93c9adc..518b1fb4fa5 100644 --- a/public/app/plugins/panel/graph2/plugin.json +++ b/public/app/plugins/panel/graph2/plugin.json @@ -15,4 +15,3 @@ } } } - diff --git a/public/app/plugins/panel/heatmap/plugin.json b/public/app/plugins/panel/heatmap/plugin.json index 0073c600bb6..ca5d424ede2 100644 --- a/public/app/plugins/panel/heatmap/plugin.json +++ b/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" } diff --git a/public/app/plugins/panel/text/plugin.json b/public/app/plugins/panel/text/plugin.json index 4e678bdc312..6667185ba4a 100644 --- a/public/app/plugins/panel/text/plugin.json +++ b/public/app/plugins/panel/text/plugin.json @@ -17,4 +17,3 @@ "version": "5.0.0" } } - diff --git a/public/app/plugins/panel/text2/plugin.json b/public/app/plugins/panel/text2/plugin.json index 840bb820696..5afecd424d7 100644 --- a/public/app/plugins/panel/text2/plugin.json +++ b/public/app/plugins/panel/text2/plugin.json @@ -17,4 +17,3 @@ } } } - diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 78e21da00ad..ff66ec2e339 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -123,7 +123,6 @@ } .viz-picker { - padding: 0px 20px; position: relative; }