Skip to content

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

render and sort

parent a061de83
Showing with 154 additions and 57 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,83 +59,163 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP ...@@ -45,83 +59,163 @@ 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 ( return [
<div className="section gf-form-group"> <div className="gf-form" key="min">
<h5 className="page-heading">Thresholds</h5> <input
<div style={{ display: 'flex', alignItems: 'flexStart' }}> 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 <div
onClick={() => this.onAddThreshold(1)}
style={{ style={{
width: '20px', display: 'flex',
minHeight: '40px', alignItems: 'center',
flex: '0 1 auto', justifyContent: 'center',
background: 'linear-gradient(to bottom, green, red)', width: '36px',
height: '36px',
backgroundColor: 'green',
}} }}
/> >
<div style={{ flex: '1 0 auto' }}> <i className="fa fa-plus" />
{thresholds.map((threshold, index) => { </div>
return ( <Label width={18}>Add new threshold by clicking the line</Label>
<div className="gf-form" key={`${threshold}-${index}`}> </div>,
{!threshold.canRemove ? ( <div className="gf-form" key="max">
<Label width={5}>{threshold.label}</Label>
) : (
<input <input
className="gf-form-input width-7" className="gf-form-input"
onBlur={this.onBlur} onBlur={this.onBlur}
onChange={event => this.onChangeThresholdLabel(event, threshold)} onChange={event => this.onChangeThresholdValue(event, thresholds[1])}
value={threshold.label} 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 <input
className="gf-form-input" className="gf-form-input"
type="text" type="text"
value={threshold.value}
onChange={event => this.onChangeThresholdValue(event, threshold)} onChange={event => this.onChangeThresholdValue(event, threshold)}
value={threshold.value}
onBlur={this.onBlur} onBlur={this.onBlur}
/> />
{threshold.canRemove && ( {threshold.canRemove ? (
<span onClick={() => this.onRemoveThreshold(threshold)}> <div
<i className="fa fa-remove" /> onClick={() => this.onRemoveThreshold(threshold)}
</span> style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '36px',
height: '36px',
}}
>
<i className="fa fa-times" />
</div>
) : (
<Label width={3}>{threshold.label}</Label>
)} )}
</div> </div>
); );
})} });
<div className="gf-form"> }
<Label width={5}>Add</Label>
<span className="gf-form-input" onClick={this.onAddThreshold}> insertAtIndex(index) {
+ const { userAddedThresholds } = this.state;
</span>
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 (
<div className="section gf-form-group">
<h5 className="page-heading">Thresholds</h5>
<div style={{ display: 'flex', alignItems: 'flexStart' }}>
<div
style={{
width: '20px',
minHeight: '40px',
flex: '0 1 auto',
}}
>
{this.renderIndicator()}
</div> </div>
<div style={{ flex: '1 0 auto', marginLeft: '10px' }}>
{userAddedThresholds === 0 ? this.renderNoThresholds() : this.renderThresholds()}
</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