Skip to content

N
nexpie-grafana-theme
Commit 142cd92b by Peter Holmberg
Options

render and sort

parent a061de83
Showing with 160 additions and 63 deletions
public/app/plugins/panel/gauge/Thresholds.tsx
...@@ -5,6 +5,7 @@ import { Label } from '../../../core/components/Label/Label'; ...@@ -5,6 +5,7 @@ import { Label } from '../../../core/components/Label/Label';
interface State { interface State {
thresholds: Threshold[]; thresholds: Threshold[];
userAddedThresholds: number;
} }
export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsProps>, State> { export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsProps>, State> {
...@@ -13,21 +14,34 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -13,21 +14,34 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
this.state = { this.state = {
thresholds: this.props.options.thresholds || [ thresholds: this.props.options.thresholds || [
{ label: 'Min', value: 0, canRemove: false }, { index: 0, label: 'Min', value: 0, canRemove: false },
{ label: 'Max', value: 100, canRemove: false }, { index: 1, label: 'Max', value: 100, canRemove: false },
], ],
userAddedThresholds: 0,
}; };
} }
onAddThreshold = () => { onAddThreshold = index => {
this.setState(prevState => ({ const newThresholds = this.state.thresholds.map(threshold => {
thresholds: [...prevState.thresholds, { label: 'T1', value: 0, canRemove: true }], if (threshold.index >= index) {
})); threshold = { ...threshold, index: threshold.index + 1 };
}
return threshold;
});
const userAddedThresholds = this.state.userAddedThresholds + 1;
this.setState({
thresholds: this.sortThresholds([...newThresholds, { index: index, label: '', value: 0, canRemove: true }]),
userAddedThresholds: userAddedThresholds,
});
}; };
onRemoveThreshold = threshold => { onRemoveThreshold = threshold => {
this.setState(prevState => ({ this.setState(prevState => ({
thresholds: prevState.thresholds.filter(t => t !== threshold), thresholds: prevState.thresholds.filter(t => t !== threshold),
userAddedThresholds: prevState.userAddedThresholds - 1,
})); }));
}; };
...@@ -45,36 +59,148 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -45,36 +59,148 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
}); });
}; };
onChangeThresholdLabel = (event, threshold) => { onBlur = () => {
const newThresholds = this.state.thresholds.map(currentThreshold => { this.setState(prevState => ({
if (currentThreshold === threshold) { thresholds: this.sortThresholds(prevState.thresholds),
currentThreshold = { ...currentThreshold, label: event.target.value }; }));
}
return currentThreshold; this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
}); };
this.setState({ sortThresholds = thresholds => {
thresholds: newThresholds, return thresholds.sort((t1, t2) => {
return t1.index - t2.index;
}); });
}; };
onBlur = () => { getIndicatorColor(index) {
this.sortThresholds(); const { userAddedThresholds } = this.state;
this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds }); if (index === 0) {
}; return 'green';
} else if (index < userAddedThresholds) {
return 'yellow';
}
sortThresholds = () => { return 'red';
console.log('sort'); }
this.setState(prevState => ({
thresholds: prevState.thresholds.sort((t1, t2) => t1.value - t2.value),
}));
};
render() { renderNoThresholds() {
const { thresholds } = this.state; const { thresholds } = this.state;
return [
<div className="gf-form" key="min">
<input
className="gf-form-input"
onBlur={this.onBlur}
onChange={event => this.onChangeThresholdValue(event, thresholds[0])}
value={thresholds[0].value}
/>
<Label width={3}>{thresholds[0].label}</Label>
</div>,
<div className="gf-form" key="add">
<div
onClick={() => this.onAddThreshold(1)}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '36px',
height: '36px',
backgroundColor: 'green',
}}
>
<i className="fa fa-plus" />
</div>
<Label width={18}>Add new threshold by clicking the line</Label>
</div>,
<div className="gf-form" key="max">
<input
className="gf-form-input"
onBlur={this.onBlur}
onChange={event => this.onChangeThresholdValue(event, thresholds[1])}
value={thresholds[1].value}
/>
<Label width={3}>{thresholds[0].label}</Label>
</div>,
];
}
renderThresholds() {
const { thresholds } = this.state;
return thresholds.map((threshold, index) => {
return (
<div className="gf-form" key={`${threshold}-${index}`}>
<input
className="gf-form-input"
type="text"
onChange={event => this.onChangeThresholdValue(event, threshold)}
value={threshold.value}
onBlur={this.onBlur}
/>
{threshold.canRemove ? (
<div
onClick={() => this.onRemoveThreshold(threshold)}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '36px',
height: '36px',
}}
>
<i className="fa fa-times" />
</div>
) : (
<Label width={3}>{threshold.label}</Label>
)}
</div>
);
});
}
insertAtIndex(index) {
const { userAddedThresholds } = this.state;
if (userAddedThresholds === 0) {
return 1;
} else if (index === userAddedThresholds) {
return index - 1;
} else if (index > 0) {
return index + 1;
}
return -1;
}
renderIndicator() {
const { userAddedThresholds } = this.state;
const indicators = userAddedThresholds + 1;
const sections = [];
for (let i = 0; i < indicators; i++) {
sections.push(
<div
key={`${i}`}
onClick={() => this.onAddThreshold(this.insertAtIndex(i))}
style={{
width: '100%',
height: `calc(100%/${indicators})`,
cursor: 'pointer',
background: this.getIndicatorColor(i),
}}
/>
);
}
return sections;
}
render() {
const { userAddedThresholds } = this.state;
return ( return (
<div className="section gf-form-group"> <div className="section gf-form-group">
<h5 className="page-heading">Thresholds</h5> <h5 className="page-heading">Thresholds</h5>
...@@ -84,44 +210,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -84,44 +210,12 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
width: '20px', width: '20px',
minHeight: '40px', minHeight: '40px',
flex: '0 1 auto', flex: '0 1 auto',
background: 'linear-gradient(to bottom, green, red)',
}} }}
/> >
<div style={{ flex: '1 0 auto' }}> {this.renderIndicator()}
{thresholds.map((threshold, index) => { </div>
return ( <div style={{ flex: '1 0 auto', marginLeft: '10px' }}>
<div className="gf-form" key={`${threshold}-${index}`}> {userAddedThresholds === 0 ? this.renderNoThresholds() : this.renderThresholds()}
{!threshold.canRemove ? (
<Label width={5}>{threshold.label}</Label>
) : (
<input
className="gf-form-input width-7"
onBlur={this.onBlur}
onChange={event => this.onChangeThresholdLabel(event, threshold)}
value={threshold.label}
/>
)}
<input
className="gf-form-input"
type="text"
value={threshold.value}
onChange={event => this.onChangeThresholdValue(event, threshold)}
onBlur={this.onBlur}
/>
{threshold.canRemove && (
<span onClick={() => this.onRemoveThreshold(threshold)}>
<i className="fa fa-remove" />
</span>
)}
</div>
);
})}
<div className="gf-form">
<Label width={5}>Add</Label>
<span className="gf-form-input" onClick={this.onAddThreshold}>
+
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
......
public/app/types/panel.ts
...@@ -30,6 +30,7 @@ export interface PanelMenuItem { ...@@ -30,6 +30,7 @@ export interface PanelMenuItem {
} }
export interface Threshold { export interface Threshold {
index: number;
label: string; label: string;
value: number; value: number;
color?: string; color?: string;
......
public/sass/_grafana.scss
...@@ -103,6 +103,7 @@ ...@@ -103,6 +103,7 @@
@import 'components/add_data_source.scss'; @import 'components/add_data_source.scss';
@import 'components/page_loader'; @import 'components/page_loader';
@import 'components/unit-picker'; @import 'components/unit-picker';
@import 'components/thresholds';
// PAGES // PAGES
@import 'pages/login'; @import 'pages/login';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment