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

Reordered the input row

Browse Source
This commit is contained in:
Hugo Häggmark 2019-01-15 09:35:37 +01:00
parent 39c672cb1f
commit ad1505b346
3 changed files with 59 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
View File

@ -69,6 +69,26 @@ describe('Add threshold', () => {
});
});
describe('Remove threshold', () => {
it('should remove threshold', () => {
const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' },
];
const instance = setup({
thresholds,
});
instance.onRemoveThreshold(thresholds[1]);
expect(instance.state.thresholds).toEqual([
{ index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 75, color: '#6ED0E0' },
]);
});
});
describe('change threshold value', () => {
it('should update value and resort rows', () => {
const instance = setup();

33
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View File

@ -69,7 +69,19 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
onRemoveThreshold = (threshold: Threshold) => {
this.setState(
prevState => ({ thresholds: prevState.thresholds.filter(t => t !== threshold) }),
prevState => {
const newThresholds = prevState.thresholds.map(t => {
if (t.index > threshold.index) {
const index = t.index - 1;
t = { ...t, index };
}
return t;
});
return {
thresholds: newThresholds.filter(t => t !== threshold),
};
},
() => this.updateGauge()
);
};
@ -128,15 +140,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
const value = threshold.index === 0 ? 'Base' : threshold.value;
return (
<div className="thresholds-row-input-inner">
<div className="thresholds-row-input-inner-arrow" />
<input
className="thresholds-row-input-inner-value"
type="text"
onChange={event => this.onChangeThresholdValue(event, threshold)}
value={value}
onBlur={this.onBlur}
readOnly={threshold.index === 0}
/>
<span className="thresholds-row-input-inner-arrow" />
<div className="thresholds-row-input-inner-color">
{threshold.color && (
<div className="thresholds-row-input-inner-color-colorpicker">
@ -144,6 +148,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
</div>
)}
</div>
<div className="thresholds-row-input-inner-value">
<input
type="text"
onChange={event => this.onChangeThresholdValue(event, threshold)}
value={value}
onBlur={this.onBlur}
readOnly={threshold.index === 0}
/>
</div>
{threshold.index > 0 && (
<div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
<i className="fa fa-times" />

30
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
View File

@ -48,7 +48,18 @@
height: 37px;
}
.thresholds-row-input-inner > div:last-child {
.thresholds-row-input-inner > div {
border-left: 1px solid $input-label-border-color;
border-top: 1px solid $input-label-border-color;
border-bottom: 1px solid $input-label-border-color;
}
.thresholds-row-input-inner > *:nth-child(2) {
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
.thresholds-row-input-inner > *:last-child {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
@ -57,24 +68,18 @@
align-self: center;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid $input-label-border-color;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid $input-label-border-color;
}
.thresholds-row-input-inner-value {
border: 1px solid $input-label-border-color;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
.thresholds-row-input-inner-value > input {
padding: 8px 10px;
width: 150px;
}
.thresholds-row-input-inner-color {
width: 37px;
border-top: 1px solid $input-label-border-color;
border-bottom: 1px solid $input-label-border-color;
border-right: 1px solid $input-label-border-color;
display: flex;
align-items: center;
justify-content: center;
@ -96,8 +101,5 @@
height: 37px;
width: 37px;
background-color: $input-label-border-color;
border-top: 1px solid $input-label-border-color;
border-bottom: 1px solid $input-label-border-color;
border-right: 1px solid $input-label-border-color;
cursor: pointer;
}