IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

added highlighter, fixed setState and changed back flex to spacea around

Browse Source
This commit is contained in:
Patrick O'Carroll 2018-02-21 15:39:15 +01:00
parent 9ac82f3d0e
commit 5e5a4cf1b0
2 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
View File

@ -7,6 +7,7 @@ import { PanelContainer } from './PanelContainer';
import ScrollBar from 'app/core/components/ScrollBar/ScrollBar'; import ScrollBar from 'app/core/components/ScrollBar/ScrollBar';
import store from 'app/core/store'; import store from 'app/core/store';
import { LS_PANEL_COPY_KEY } from 'app/core/constants'; import { LS_PANEL_COPY_KEY } from 'app/core/constants';
import Highlighter from 'react-highlight-words';
export interface AddPanelPanelProps { export interface AddPanelPanelProps {
panel: PanelModel; panel: PanelModel;
@ -110,19 +111,29 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
dashboard.removePanel(dashboard.panels[0]); dashboard.removePanel(dashboard.panels[0]);
} }
renderText(text: string) {
//if(this.state.filter) {
let searchWords = this.state.filter.split('');
return <Highlighter highlightClassName="highlight-search-match" textToHighlight={text} searchWords={searchWords} />;
//}
//return text;
}
renderPanelItem(panel, index) { renderPanelItem(panel, index) {
return ( return (
<div key={index} className="add-panel__item" onClick={() => this.onAddPanel(panel)} title={panel.name}> <div key={index} className="add-panel__item" onClick={() => this.onAddPanel(panel)} title={panel.name}>
<img className="add-panel__item-img" src={panel.info.logos.small} /> <img className="add-panel__item-img" src={panel.info.logos.small} />
<div className="add-panel__item-name">{panel.name}</div> <div className="add-panel__item-name">{this.renderText(panel.name)}</div>
</div> </div>
); );
} }
filterChange(evt) { filterChange(evt) {
this.setState({ filter: evt.target.value }); this.setState({
this.setState({ panelPlugins: this.getPanelPlugins(evt.target.value) }); filter: evt.target.value,
this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins(evt.target.value) }); panelPlugins: this.getPanelPlugins(evt.target.value),
copiedPanelPlugins: this.getCopiedPanelPlugins(evt.target.value),
});
} }
filterPanels(panels, filter) { filterPanels(panels, filter) {
@ -133,17 +144,21 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
} }
openCopy() { openCopy() {
this.setState({ tab: 'Copy' }); this.setState({
this.setState({ filter: '' }); tab: 'Copy',
this.setState({ panelPlugins: this.getPanelPlugins('') }); filter: '',
this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins('') }); panelPlugins: this.getPanelPlugins(''),
copiedPanelPlugins: this.getCopiedPanelPlugins(''),
});
} }
openAdd() { openAdd() {
this.setState({ tab: 'Add' }); this.setState({
this.setState({ filter: '' }); tab: 'Add',
this.setState({ panelPlugins: this.getPanelPlugins('') }); filter: '',
this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins('') }); panelPlugins: this.getPanelPlugins(''),
copiedPanelPlugins: this.getCopiedPanelPlugins(''),
});
} }
render() { render() {

4
public/sass/components/_panel_add_panel.scss
View File

@ -44,7 +44,7 @@
overflow: auto; overflow: auto;
height: calc(100% - 50px); height: calc(100% - 50px);
align-content: flex-start; align-content: flex-start;
justify-content: space-between; justify-content: space-around;
position: relative; position: relative;
} }
@ -54,7 +54,7 @@
border-radius: 3px; border-radius: 3px;
padding: $spacer/3 $spacer; padding: $spacer/3 $spacer;
width: 32%; width: 31%;
height: 60px; height: 60px;
text-align: center; text-align: center;
margin: $gf-form-margin; margin: $gf-form-margin;