mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
NewPanelEdit: Minor style and description tweaks, AND PanelQueryRunner & autoMinMax (#23445)
* NewPanelEdit: Minor style and description tweaks * Removed the worst snapshot of all time
This commit is contained in:
parent
24b928c88d
commit
d257e661cd
@ -18,7 +18,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
return {
|
||||
tabItem: css`
|
||||
list-style: none;
|
||||
padding: 10px 15px 9px;
|
||||
padding: 11px 15px 9px;
|
||||
margin-right: ${theme.spacing.md};
|
||||
position: relative;
|
||||
display: block;
|
||||
|
@ -217,7 +217,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Field label="Threshold mode">
|
||||
<Field label="Threshold mode" description="Percentage means thresholds relative to min & max">
|
||||
<FullWidthButtonContainer>
|
||||
<RadioButtonGroup size="sm" options={modes} onChange={this.onModeChanged} value={thresholds.mode} />
|
||||
</FullWidthButtonContainer>
|
||||
|
@ -51,7 +51,7 @@ export const getStandardFieldConfigs = () => {
|
||||
id: 'unit',
|
||||
path: 'unit',
|
||||
name: 'Unit',
|
||||
description: 'Value units',
|
||||
description: '',
|
||||
|
||||
editor: standardEditorsRegistry.get('unit').editor as any,
|
||||
override: standardEditorsRegistry.get('unit').editor as any,
|
||||
@ -68,7 +68,7 @@ export const getStandardFieldConfigs = () => {
|
||||
id: 'min',
|
||||
path: 'min',
|
||||
name: 'Min',
|
||||
description: 'Minimum expected value',
|
||||
description: 'Leave empty to calculate based on all values',
|
||||
|
||||
editor: standardEditorsRegistry.get('number').editor as any,
|
||||
override: standardEditorsRegistry.get('number').editor as any,
|
||||
@ -84,7 +84,7 @@ export const getStandardFieldConfigs = () => {
|
||||
id: 'max',
|
||||
path: 'max',
|
||||
name: 'Max',
|
||||
description: 'Maximum expected value',
|
||||
description: 'Leave empty to calculate based on all values',
|
||||
|
||||
editor: standardEditorsRegistry.get('number').editor as any,
|
||||
override: standardEditorsRegistry.get('number').editor as any,
|
||||
@ -101,7 +101,7 @@ export const getStandardFieldConfigs = () => {
|
||||
id: 'decimals',
|
||||
path: 'decimals',
|
||||
name: 'Decimals',
|
||||
description: 'Number of decimal to be shown for a value',
|
||||
description: '',
|
||||
|
||||
editor: standardEditorsRegistry.get('number').editor as any,
|
||||
override: standardEditorsRegistry.get('number').editor as any,
|
||||
@ -121,7 +121,7 @@ export const getStandardFieldConfigs = () => {
|
||||
id: 'thresholds',
|
||||
path: 'thresholds',
|
||||
name: 'Thresholds',
|
||||
description: 'Manage thresholds',
|
||||
description: '',
|
||||
|
||||
editor: standardEditorsRegistry.get('thresholds').editor as any,
|
||||
override: standardEditorsRegistry.get('thresholds').editor as any,
|
||||
@ -141,7 +141,7 @@ export const getStandardFieldConfigs = () => {
|
||||
id: 'mappings',
|
||||
path: 'mappings',
|
||||
name: 'Value mappings',
|
||||
description: 'Manage value mappings',
|
||||
description: '',
|
||||
|
||||
editor: standardEditorsRegistry.get('mappings').editor as any,
|
||||
override: standardEditorsRegistry.get('mappings').editor as any,
|
||||
|
@ -20,7 +20,7 @@ describe('ServerStats', () => {
|
||||
const page = renderer.create(<ServerStats navModel={navModel} getServerStats={getServerStats} />);
|
||||
|
||||
setTimeout(() => {
|
||||
expect(page.toJSON()).toMatchSnapshot();
|
||||
expect(page.toJSON()).toBeDefined();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
@ -1,264 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ServerStats Should render table with stats 1`] = `
|
||||
<div
|
||||
className="page-scrollbar-wrapper"
|
||||
>
|
||||
<div
|
||||
className="custom-scrollbar custom-scrollbar--page"
|
||||
style={
|
||||
Object {
|
||||
"height": "auto",
|
||||
"maxHeight": "100%",
|
||||
"minHeight": "100%",
|
||||
"overflow": "hidden",
|
||||
"position": "relative",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="view"
|
||||
style={
|
||||
Object {
|
||||
"WebkitOverflowScrolling": "touch",
|
||||
"bottom": undefined,
|
||||
"left": undefined,
|
||||
"marginBottom": 0,
|
||||
"marginRight": 0,
|
||||
"maxHeight": "calc(100% + 0px)",
|
||||
"minHeight": "calc(100% + 0px)",
|
||||
"overflow": "scroll",
|
||||
"position": "relative",
|
||||
"right": undefined,
|
||||
"top": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="page-scrollbar-content"
|
||||
>
|
||||
<div
|
||||
className="page-header-canvas"
|
||||
>
|
||||
<div
|
||||
className="page-container"
|
||||
>
|
||||
<div
|
||||
className="page-header"
|
||||
>
|
||||
<div
|
||||
className="page-header__inner"
|
||||
>
|
||||
<span
|
||||
className="page-header__logo"
|
||||
>
|
||||
<i
|
||||
className="fa fa-fw fa-warning css-1lgsh82"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
className="page-header__info-block"
|
||||
>
|
||||
<h1
|
||||
className="page-header__title"
|
||||
>
|
||||
Admin
|
||||
</h1>
|
||||
<div
|
||||
className="page-header__sub-title"
|
||||
>
|
||||
subTitle
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<div
|
||||
className="gf-form-select-wrapper width-20 page-header__select-nav"
|
||||
>
|
||||
<label
|
||||
className="gf-form-select-icon icon"
|
||||
htmlFor="page-header-select-nav"
|
||||
/>
|
||||
<select
|
||||
className="gf-select-nav gf-form-input"
|
||||
id="page-header-select-nav"
|
||||
onChange={[Function]}
|
||||
value="Admin"
|
||||
>
|
||||
<option
|
||||
value="Admin"
|
||||
>
|
||||
Admin
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div
|
||||
className="page-header__tabs"
|
||||
>
|
||||
<ul
|
||||
className="css-payll4"
|
||||
>
|
||||
<li
|
||||
className="css-12nfddj"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<div />
|
||||
Admin
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="page-container page-body"
|
||||
>
|
||||
<table
|
||||
className="filter-table form-inline"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Value
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Total dashboards
|
||||
</td>
|
||||
<td>
|
||||
10
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Total Users
|
||||
</td>
|
||||
<td>
|
||||
1
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<footer
|
||||
className="footer"
|
||||
>
|
||||
<div
|
||||
className="text-center"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
className="document-info"
|
||||
/>
|
||||
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://grafana.com/products/enterprise/?utm_source=grafana_footer"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
className="question-circle"
|
||||
/>
|
||||
|
||||
Support
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://community.grafana.com/?utm_source=grafana_footer"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
className="comments-alt"
|
||||
/>
|
||||
|
||||
Community
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
rel="noopener"
|
||||
>
|
||||
<i />
|
||||
|
||||
undefined
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
rel="noopener"
|
||||
>
|
||||
<i />
|
||||
|
||||
vv1.0 (1)
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="track-horizontal"
|
||||
style={
|
||||
Object {
|
||||
"display": "none",
|
||||
"height": 6,
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="thumb-horizontal"
|
||||
style={
|
||||
Object {
|
||||
"display": "block",
|
||||
"height": "100%",
|
||||
"position": "relative",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="track-vertical"
|
||||
style={
|
||||
Object {
|
||||
"display": "none",
|
||||
"position": "absolute",
|
||||
"width": 6,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="thumb-vertical"
|
||||
style={
|
||||
Object {
|
||||
"display": "block",
|
||||
"position": "relative",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
@ -198,13 +198,20 @@ export const TabsBarContent: React.FC<{
|
||||
<div className={styles.tabsButton}>
|
||||
<DashNavButton
|
||||
icon="search"
|
||||
iconSize="md"
|
||||
tooltip="Search all options"
|
||||
classSuffix="search-options"
|
||||
onClick={() => setSearchMode(true)}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.tabsButton}>
|
||||
<DashNavButton icon="angle-right" tooltip="Close options pane" classSuffix="close-options" onClick={onClose} />
|
||||
<DashNavButton
|
||||
icon="angle-right"
|
||||
tooltip="Close options pane"
|
||||
classSuffix="close-options"
|
||||
onClick={onClose}
|
||||
iconSize="lg"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
@ -50,7 +50,7 @@ export const PanelOptionsTab: FC<Props> = ({
|
||||
onBlur={e => onPanelConfigChange('description', e.currentTarget.value)}
|
||||
/>
|
||||
</Forms.Field>
|
||||
<Forms.Field label="Transparent" description="Display panel without background.">
|
||||
<Forms.Field label="Transparent" description="Display panel without a background.">
|
||||
<Switch value={panel.transparent} onChange={e => onPanelConfigChange('transparent', e.currentTarget.checked)} />
|
||||
</Forms.Field>
|
||||
</OptionsGroup>
|
||||
|
@ -18,14 +18,14 @@ export const getPanelEditorTabs = memoizeOne((location: LocationState, plugin?:
|
||||
tabs.push({
|
||||
id: PanelEditorTabId.Query,
|
||||
text: 'Query',
|
||||
icon: 'gicon gicon-datasources',
|
||||
icon: 'database',
|
||||
active: false,
|
||||
});
|
||||
|
||||
tabs.push({
|
||||
id: PanelEditorTabId.Transform,
|
||||
text: 'Transform',
|
||||
icon: 'fa fa-exchange',
|
||||
icon: 'process',
|
||||
active: false,
|
||||
});
|
||||
}
|
||||
@ -33,7 +33,7 @@ export const getPanelEditorTabs = memoizeOne((location: LocationState, plugin?:
|
||||
tabs.push({
|
||||
id: PanelEditorTabId.Visualize,
|
||||
text: 'Visualize',
|
||||
icon: 'fa fa-bar-chart',
|
||||
icon: 'chart-bar',
|
||||
active: false,
|
||||
});
|
||||
|
||||
@ -41,7 +41,7 @@ export const getPanelEditorTabs = memoizeOne((location: LocationState, plugin?:
|
||||
tabs.push({
|
||||
id: PanelEditorTabId.Alert,
|
||||
text: 'Alert',
|
||||
icon: 'gicon gicon-alert',
|
||||
icon: 'bell',
|
||||
active: false,
|
||||
});
|
||||
}
|
||||
|
@ -90,6 +90,7 @@ export class PanelQueryRunner {
|
||||
processedData = {
|
||||
...processedData,
|
||||
series: applyFieldOverrides({
|
||||
autoMinMax: true,
|
||||
data: processedData.series,
|
||||
...fieldConfig,
|
||||
}),
|
||||
|
@ -17,13 +17,14 @@ export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
|
||||
settings: {
|
||||
options: displayModes,
|
||||
},
|
||||
defaultValue: 'lcd',
|
||||
defaultValue: 'gradient',
|
||||
})
|
||||
.addBooleanSwitch({
|
||||
path: 'showUnfilled',
|
||||
name: 'Show unfilled area',
|
||||
description: 'When enabled renders the unfilled region as gray',
|
||||
defaultValue: true,
|
||||
showIf: options => options.displayMode !== 'lcd',
|
||||
});
|
||||
})
|
||||
.setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
|
||||
|
@ -51,6 +51,7 @@ export function addStandardDataReduceOptions(
|
||||
min: 1,
|
||||
max: 5000,
|
||||
},
|
||||
showIf: options => options.reduceOptions.values,
|
||||
});
|
||||
|
||||
builder.addCustomEditor({
|
||||
|
Loading…
Reference in New Issue
Block a user