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 store from 'app/core/store';
import { LS_PANEL_COPY_KEY } from 'app/core/constants';
import Highlighter from 'react-highlight-words';
export interface AddPanelPanelProps {
panel: PanelModel;
@ -110,19 +111,29 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
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) {
return (
<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} />
<div className="add-panel__item-name">{panel.name}</div>
<div className="add-panel__item-name">{this.renderText(panel.name)}</div>
</div>
);
}
filterChange(evt) {
this.setState({ filter: evt.target.value });
this.setState({ panelPlugins: this.getPanelPlugins(evt.target.value) });
this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins(evt.target.value) });
this.setState({
filter: evt.target.value,
panelPlugins: this.getPanelPlugins(evt.target.value),
copiedPanelPlugins: this.getCopiedPanelPlugins(evt.target.value),
});
}
filterPanels(panels, filter) {
@ -133,17 +144,21 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
}
openCopy() {
this.setState({ tab: 'Copy' });
this.setState({ filter: '' });
this.setState({ panelPlugins: this.getPanelPlugins('') });
this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins('') });
this.setState({
tab: 'Copy',
filter: '',
panelPlugins: this.getPanelPlugins(''),
copiedPanelPlugins: this.getCopiedPanelPlugins(''),
});
}
openAdd() {
this.setState({ tab: 'Add' });
this.setState({ filter: '' });
this.setState({ panelPlugins: this.getPanelPlugins('') });
this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins('') });
this.setState({
tab: 'Add',
filter: '',
panelPlugins: this.getPanelPlugins(''),
copiedPanelPlugins: this.getCopiedPanelPlugins(''),
});
}
render() {

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

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