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

Fixed styling

Browse Source
This commit is contained in:
Hugo Häggmark 2019-01-14 16:40:44 +01:00
parent a431efa0da
commit 7934116e5c
3 changed files with 109 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ describe('Initialization', () => {
it('should add a base threshold if missing', () => { it('should add a base threshold if missing', () => {
const instance = setup(); const instance = setup();
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]); expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]);
}); });
}); });
@ -31,13 +31,13 @@ describe('Add threshold', () => {
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 0, value: -Infinity, color: '#299c46' },
]); ]);
}); });
it('should add another threshold above a first', () => { it('should add another threshold above a first', () => {
const instance = setup({ const instance = setup({
thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }], thresholds: [{ index: 0, value: -Infinity, color: '#299c46' }, { index: 1, value: 50, color: '#EAB839' }],
}); });
instance.onAddThreshold(2); instance.onAddThreshold(2);
@ -45,14 +45,14 @@ describe('Add threshold', () => {
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 0, value: -Infinity, color: '#299c46' },
]); ]);
}); });
it('should add another threshold between first and second index', () => { it('should add another threshold between first and second index', () => {
const instance = setup({ const instance = setup({
thresholds: [ thresholds: [
{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
], ],
@ -64,7 +64,7 @@ describe('Add threshold', () => {
{ index: 3, value: 75, color: '#EF843C' }, { index: 3, value: 75, color: '#EF843C' },
{ index: 2, value: 62.5, color: '#6ED0E0' }, { index: 2, value: 62.5, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 0, value: -Infinity, color: '#299c46' },
]); ]);
}); });
}); });
@ -73,7 +73,7 @@ describe('change threshold value', () => {
it('should update value and resort rows', () => { it('should update value and resort rows', () => {
const instance = setup(); const instance = setup();
const thresholds = [ const thresholds = [
{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 50, color: '#EAB839' }, { index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
]; ];
@ -88,7 +88,7 @@ describe('change threshold value', () => {
instance.onChangeThresholdValue(mockEvent, thresholds[1]); instance.onChangeThresholdValue(mockEvent, thresholds[1]);
expect(instance.state.thresholds).toEqual([ expect(instance.state.thresholds).toEqual([
{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 78, color: '#EAB839' }, { index: 1, value: 78, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' }, { index: 2, value: 75, color: '#6ED0E0' },
]); ]);

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

@ -21,7 +21,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
super(props); super(props);
const thresholds: Threshold[] = const thresholds: Threshold[] =
props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }]; props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: '#299c46' }];
this.state = { thresholds, baseColor: BasicGaugeColor.Green }; this.state = { thresholds, baseColor: BasicGaugeColor.Green };
} }
@ -37,11 +37,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
const newThresholds = thresholds.map(threshold => { const newThresholds = thresholds.map(threshold => {
if (threshold.index >= index) { if (threshold.index >= index) {
const index = threshold.index + 1; const index = threshold.index + 1;
threshold = { threshold = { ...threshold, index, color: colors[index] };
...threshold,
index,
color: colors[index],
};
} }
return threshold; return threshold;
}); });
@ -128,92 +124,52 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
}); });
}; };
renderThresholds() { renderInput = (threshold: Threshold) => {
const { thresholds } = this.state; const value = threshold.index === 0 ? 'Base' : threshold.value;
return thresholds.map((threshold, index) => {
return ( return (
<div className="threshold-row" key={`${threshold.index}-${index}`}> <div className="thresholds-row-input-inner">
<div className="threshold-row-inner"> <div className="thresholds-row-input-inner-arrow" />
<div className="threshold-row-color"> <input
{threshold.color && ( className="thresholds-row-input-inner-value"
<div className="threshold-row-color-inner"> type="text"
<ColorPicker onChange={event => this.onChangeThresholdValue(event, threshold)}
color={threshold.color} value={value}
onChange={color => this.onChangeThresholdColor(threshold, color)} onBlur={this.onBlur}
readOnly={threshold.index === 0}
/> />
<div className="thresholds-row-input-inner-color">
{threshold.color && (
<div className="thresholds-row-input-inner-color-colorpicker">
<ColorPicker color={threshold.color} onChange={color => this.onChangeThresholdColor(threshold, color)} />
</div> </div>
)} )}
</div> </div>
<input {threshold.index > 0 && (
className="threshold-row-input" <div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
type="text"
onChange={event => this.onChangeThresholdValue(event, threshold)}
value={threshold.value}
onBlur={this.onBlur}
/>
<div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
<i className="fa fa-times" /> <i className="fa fa-times" />
</div> </div>
</div> )}
</div> </div>
); );
}); };
}
renderIndicator() {
const { thresholds } = this.state;
return thresholds.map((t, i) => {
return (
<div key={`${t.value}-${i}`} className="indicator-section">
<div onClick={() => this.onAddThreshold(t.index + 1)} style={{ height: '50%', backgroundColor: t.color }} />
<div onClick={() => this.onAddThreshold(t.index)} style={{ height: '50%', backgroundColor: t.color }} />
</div>
);
});
}
renderBaseIndicator() {
return (
<div className="indicator-section" style={{ height: '100%' }}>
<div
onClick={() => this.onAddThreshold(0)}
style={{ height: '100%', backgroundColor: BasicGaugeColor.Green }}
/>
</div>
);
}
renderBase() {
const baseColor = BasicGaugeColor.Green;
return (
<div className="threshold-row threshold-row-base">
<div className="threshold-row-inner threshold-row-inner--base">
<div className="threshold-row-color">
<div className="threshold-row-color-inner">
<ColorPicker color={baseColor} onChange={color => this.onChangeBaseColor(color)} />
</div>
</div>
<div className="threshold-row-label">Base</div>
</div>
</div>
);
}
render() { render() {
const { thresholds } = this.state;
return ( return (
<PanelOptionsGroup title="Thresholds"> <PanelOptionsGroup title="Thresholds">
<div className="thresholds"> <div className="thresholds">
<div className="color-indicators"> {thresholds.map((threshold, index) => {
{this.renderIndicator()} return (
{this.renderBaseIndicator()} <div className="thresholds-row" key={`${threshold.index}-${index}`}>
<div className="thresholds-row-add-button">
<i className="fa fa-plus-circle fa-2x" onClick={() => this.onAddThreshold(threshold.index + 1)} />
</div> </div>
<div className="threshold-rows"> <div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} />
{this.renderThresholds()} <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
{this.renderBase()}
</div> </div>
);
})}
</div> </div>
</PanelOptionsGroup> </PanelOptionsGroup>
); );

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

@ -1,38 +1,67 @@
.thresholds { .thresholds-row {
display: flex; display: flex;
flex-direction: row;
height: 70px;
} }
.threshold-rows { .thresholds-row:last-child > .thresholds-row-color-indicator {
margin-left: 5px; border-bottom-left-radius: $border-radius;
} border-bottom-right-radius: $border-radius;
.threshold-row {
display: flex;
align-items: center;
margin-top: 3px;
padding: 5px;
&::before {
font-family: 'FontAwesome';
content: '\f0d9';
color: $input-label-border-color;
}
}
.threshold-row-inner {
border: 1px solid $input-label-border-color;
border-radius: $border-radius;
display: flex;
overflow: hidden; overflow: hidden;
height: 37px;
&--base {
width: auto;
}
} }
.threshold-row-color { .thresholds-row-add-button {
width: 36px; align-self: center;
margin-right: 5px;
color: $green;
}
.thresholds-row-add-button > i {
cursor: pointer;
}
.thresholds-row-color-indicator {
width: 20px;
}
.thresholds-row-input {
margin-top: 51px;
margin-left: 2px;
}
.thresholds-row-input-inner {
display: flex;
justify-content: center;
flex-direction: row;
height: 37px;
}
.thresholds-row-input-inner > div:last-child {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
.thresholds-row-input-inner-arrow {
align-self: center;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid $gray-5;
}
.thresholds-row-input-inner-value {
border: 1px solid $input-label-border-color;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
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; border-right: 1px solid $input-label-border-color;
display: flex; display: flex;
align-items: center; align-items: center;
@ -40,7 +69,7 @@
background-color: $input-bg; background-color: $input-bg;
} }
.threshold-row-color-inner { .thresholds-row-input-inner-color-colorpicker {
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -48,56 +77,15 @@
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
} }
.threshold-row-input { .thresholds-row-input-inner-remove {
padding: 8px 10px;
width: 150px;
}
.threshold-row-label {
background-color: $input-label-bg;
padding: 5px;
display: flex;
align-items: center;
}
.threshold-row-add-label {
align-items: center;
display: flex;
padding: 5px 8px;
}
.threshold-row-remove {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 37px; height: 37px;
width: 37px; width: 37px;
background-color: $gray-5;
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; cursor: pointer;
} }
.threshold-row-add {
border-right: $border-width solid $input-label-border-color;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
background-color: $green;
}
.threshold-row-label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.indicator-section {
width: 100%;
height: 50px;
cursor: pointer;
}
.color-indicators {
width: 15px;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
overflow: hidden;
}