chartwerk
/
grafana-chartwerk-panel
4
0
Fork 0
Code Issues 2 Pull Requests Projects Releases 1 Wiki Activity
Browse Source

pretty styles

merge-requests/6/head
rozetko 2 years ago
parent
c450a4150e
commit
9d6abbb424
2 changed files with 59 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/editors/IconsEditor.tsx
  2. 124
      src/components/editors/ThresholdsEditor.tsx

2
src/components/editors/IconsEditor.tsx
Unescape View File

@ -241,7 +241,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
margin-bottom: ${theme.spacing.xxs}; margin-bottom: ${theme.spacing.xxs};
`, `,
slider: css` slider: css`
padding-bottom: 0; padding-bottom: ${theme.spacing.xxs};
`, `,
row: css` row: css`
margin-bottom: ${theme.spacing.sm}; margin-bottom: ${theme.spacing.sm};

124
src/components/editors/ThresholdsEditor.tsx
Unescape View File

@ -7,6 +7,7 @@ import {
HorizontalGroup, HorizontalGroup,
IconButton, IconButton,
InlineField, InlineField,
InlineLabel,
InlineSwitch, InlineSwitch,
Input, Input,
stylesFactory, stylesFactory,
@ -18,6 +19,7 @@ import React from 'react';
import { css } from 'emotion'; import { css } from 'emotion';
import * as _ from 'lodash'; import * as _ from 'lodash';
interface Props { interface Props {
defaultColor: string; defaultColor: string;
arcBackground: string; arcBackground: string;
@ -71,78 +73,68 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
const styles = getStyles(theme.v1); const styles = getStyles(theme.v1);
return ( return (
<div> <div>
<Input <InlineField label="Default Gauge Color">
className={styles.row} <InlineLabel>
type="text" <ColorPicker
value={'Default Gauge Color'} color={config.defaultColor}
disabled onChange={(val) => onFieldChange('defaultColor', val)}
prefix={ enableNamedColors={true}
<div> />
<ColorPicker </InlineLabel>
color={config.defaultColor} </InlineField>
onChange={(val) => onFieldChange('defaultColor', val)}
enableNamedColors={true} <InlineField label="Arc Background">
/> <InlineLabel>
</div> <ColorPicker
} color={config.arcBackground}
/> onChange={(val) => onFieldChange('arcBackground', val)}
<Input enableNamedColors={true}
className={styles.row} />
type="text" </InlineLabel>
value={'Arc Background'} </InlineField>
disabled
prefix={
<div>
<ColorPicker
color={config.arcBackground}
onChange={(val) => onFieldChange('arcBackground', val)}
enableNamedColors={true}
/>
</div>
}
/>
{config.thresholds.map((threshold, thresholdIdx) => { {config.thresholds.map((threshold, thresholdIdx) => {
return ( return (
<HorizontalGroup key={thresholdIdx}> <HorizontalGroup key={thresholdIdx}>
<Input
type="text"
value={'Color'}
disabled
prefix={
<div>
<ColorPicker
color={threshold.color}
onChange={(newVal) => onThresholdFieldChange(thresholdIdx, 'color', newVal)}
enableNamedColors={true}
/>
</div>
}
/>
<InlineField label="Use metric"> <InlineField label="Use metric">
<InlineSwitch <InlineSwitch
value={threshold.useMetric} value={threshold.useMetric}
onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'useMetric', (evt.target as any).checked)} onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'useMetric', (evt.target as any).checked)}
/> />
</InlineField> </InlineField>
{threshold.useMetric ? ( <InlineField>
<FieldNamePicker {threshold.useMetric ? (
context={context} <FieldNamePicker
value={threshold.metricName as string} context={context}
onChange={(newVal: any) => onThresholdFieldChange(thresholdIdx, 'metricName', newVal)} value={threshold.metricName as string}
item={fieldNamePickerSettings} onChange={(newVal: any) => onThresholdFieldChange(thresholdIdx, 'metricName', newVal)}
/> item={fieldNamePickerSettings}
) : ( />
<Input ) : (
placeholder="value" <Input
value={threshold.value} placeholder="value"
onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)} value={threshold.value}
/> onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
)} />
<IconButton )}
name="trash-alt" </InlineField>
onClick={() => removeThreshold(thresholdIdx)} <InlineField label="Color">
tooltip="Delete Threshold" <InlineLabel>
></IconButton> <ColorPicker
color={threshold.color}
onChange={(newVal) => onThresholdFieldChange(thresholdIdx, 'color', newVal)}
enableNamedColors={true}
/>
</InlineLabel>
</InlineField>
<InlineField>
<InlineLabel width={0} className={styles.deleteButton}>
<IconButton
name="trash-alt"
onClick={() => removeThreshold(thresholdIdx)}
tooltip="Delete Threshold"
></IconButton>
</InlineLabel>
</InlineField>
</HorizontalGroup> </HorizontalGroup>
); );
})} })}
@ -157,13 +149,13 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
} }
interface ThresholdsEditorStyles { interface ThresholdsEditorStyles {
row: string; deleteButton: string;
} }
const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdsEditorStyles => { const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdsEditorStyles => {
return { return {
row: css` deleteButton: css`
margin-bottom: ${theme.spacing.sm}; margin-right: 0px!important;
`, `,
}; };
}); });

Write Preview
Loading…
Cancel
Save