mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
commit
c243e78913
19
package.json
19
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/*/**"]
|
||||
}
|
||||
}
|
||||
|
@ -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 };
|
@ -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;
|
||||
}
|
@ -7,4 +7,5 @@
|
||||
@import 'PanelOptionsGrid/PanelOptionsGrid';
|
||||
@import 'ColorPicker/ColorPicker';
|
||||
@import 'ValueMappingsEditor/ValueMappingsEditor';
|
||||
@import 'EmptySearchResult/EmptySearchResult';
|
||||
@import 'FormField/FormField';
|
||||
|
@ -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';
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -15,4 +15,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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"
|
||||
}
|
||||
|
@ -17,4 +17,3 @@
|
||||
"version": "5.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -17,4 +17,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -123,7 +123,6 @@
|
||||
}
|
||||
|
||||
.viz-picker {
|
||||
padding: 0px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user