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

Red border color on input when zero hits in vizpicker
This commit is contained in:
Torkel Ödegaard 2019-02-13 15:22:00 +01:00 committed by GitHub
commit c243e78913
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 44 additions and 33 deletions

View File

@ -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/*/**"]
}
}

View File

@ -0,0 +1,13 @@
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 };

View File

@ -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;
}

View File

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

View File

@ -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';

View File

@ -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<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>
);

View File

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

View File

@ -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"
}

View File

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

View File

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

View File

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