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

DashboardSettings: Update to new form styles (#31022)

Browse Source 
* DashboardSettings: Update to new form styles

* Improve header margin and fixing issue in permissions tab

* Updated

* Switch to radio

* Remove unused import
This commit is contained in:
Torkel Ödegaard 2021-02-09 20:41:07 +01:00 committed by GitHub
parent b8a52ed0bd
commit 758d1386cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 98 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
View File

@ -37,6 +37,7 @@ const collapsableSectionStyles = (theme: GrafanaTheme) => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: ${theme.typography.size.lg}; font-size: ${theme.typography.size.lg};
line-height: ${theme.spacing.base * 5}px;
cursor: pointer; cursor: pointer;
`, `,
headerCollapsed: css` headerCollapsed: css`

2
packages/grafana-ui/src/components/Forms/Field.tsx
View File

@ -21,7 +21,7 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
/** Indicates if field is required */ /** Indicates if field is required */
required?: boolean; required?: boolean;
/** Error message to display */ /** Error message to display */
error?: string; error?: string | null;
/** Indicates horizontal layout of the field */ /** Indicates horizontal layout of the field */
horizontal?: boolean; horizontal?: boolean;
className?: string; className?: string;

4
packages/grafana-ui/src/components/TagsInput/TagItem.tsx
View File

@ -25,7 +25,7 @@ const getStyles = stylesFactory(({ theme, name }: { theme: GrafanaTheme; name: s
white-space: nowrap; white-space: nowrap;
text-shadow: none; text-shadow: none;
font-weight: 500; font-weight: 500;
line-height: 14px; font-size: ${theme.typography.size.sm};
display: flex; display: flex;
align-items: center; align-items: center;
`, `,
@ -43,7 +43,7 @@ export const TagItem: FC<Props> = ({ name, onRemove }) => {
return ( return (
<div className={styles.itemStyle}> <div className={styles.itemStyle}>
<span className={styles.nameStyle}>{name}</span> <span className={styles.nameStyle}>{name}</span>
<Icon name="times" onClick={() => onRemove(name)} /> <Icon className="pointer" name="times" onClick={() => onRemove(name)} />
</div> </div>
); );
}; };

4
public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx
View File

@ -94,9 +94,8 @@ export class DashboardPermissionsUnconnected extends PureComponent<Props, State>
<h5>You have changed folder, please save to view permissions.</h5> <h5>You have changed folder, please save to view permissions.</h5>
) : ( ) : (
<div> <div>
<div className="dashboard-settings__header">
<div className="page-action-bar"> <div className="page-action-bar">
<h3 className="d-inline-block">Permissions</h3> <h3 className="page-sub-heading">Permissions</h3>
<Tooltip placement="auto" content={<PermissionsInfo />}> <Tooltip placement="auto" content={<PermissionsInfo />}>
<Icon className="icon--has-hover page-sub-heading-icon" name="question-circle" /> <Icon className="icon--has-hover page-sub-heading-icon" name="question-circle" />
</Tooltip> </Tooltip>
@ -105,7 +104,6 @@ export class DashboardPermissionsUnconnected extends PureComponent<Props, State>
Add Permission Add Permission
</Button> </Button>
</div> </div>
</div>
<SlideDown in={isAdding}> <SlideDown in={isAdding}>
<AddPermission onAddPermission={this.onAddPermission} onCancel={this.onCancelAddPermission} /> <AddPermission onAddPermission={this.onAddPermission} onCancel={this.onCancelAddPermission} />
</SlideDown> </SlideDown>

25
public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
View File

@ -1,5 +1,5 @@
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Input, Tooltip, defaultIntervals } from '@grafana/ui'; import { Input, defaultIntervals, Field } from '@grafana/ui';
import { getTimeSrv } from '../../services/TimeSrv'; import { getTimeSrv } from '../../services/TimeSrv';
@ -56,16 +56,19 @@ export const AutoRefreshIntervals: FC<Props> = ({
); );
return ( return (
<div className="gf-form"> <Field
<label className="gf-form-label width-7">Auto-refresh</label> label="Auto refresh"
{invalidIntervalsMessage ? ( description="Define the auto refresh intervals that should be available in the auto refresh dropdown"
<Tooltip placement="right" content={invalidIntervalsMessage}> error={invalidIntervalsMessage}
<Input width={60} invalid value={intervalsString} onChange={onIntervalsChange} onBlur={onIntervalsBlur} /> invalid={!!invalidIntervalsMessage}
</Tooltip> >
) : ( <Input
<Input width={60} value={intervalsString} onChange={onIntervalsChange} onBlur={onIntervalsBlur} /> invalid={!!invalidIntervalsMessage}
)} value={intervalsString}
</div> onChange={onIntervalsChange}
onBlur={onIntervalsBlur}
/>
</Field>
); );
}; };

58
public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { SelectableValue, TimeZone } from '@grafana/data'; import { SelectableValue, TimeZone } from '@grafana/data';
import { Select, InlineSwitch, TagsInput, InlineField, Input } from '@grafana/ui'; import { Select, TagsInput, Input, Field, CollapsableSection, RadioButtonGroup } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { FolderPicker } from 'app/core/components/Select/FolderPicker'; import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import { DashboardModel } from '../../state/DashboardModel'; import { DashboardModel } from '../../state/DashboardModel';
@ -57,41 +57,50 @@ export const GeneralSettings: React.FC<Props> = ({ dashboard }) => {
dashboard.tags = tags; dashboard.tags = tags;
}; };
const onEditableChange = (ev: React.FormEvent<HTMLInputElement>) => { const onEditableChange = (value: boolean) => {
dashboard.editable = ev.currentTarget.checked; dashboard.editable = value;
setRenderCounter(renderCounter + 1); setRenderCounter(renderCounter + 1);
}; };
const editableOptions = [
{ label: 'Editable', value: true },
{ label: 'Read-only', value: false },
];
return ( return (
<> <div style={{ maxWidth: '600px' }}>
<h3 className="dashboard-settings__header" aria-label={selectors.pages.Dashboard.Settings.General.title}> <h3 className="dashboard-settings__header" aria-label={selectors.pages.Dashboard.Settings.General.title}>
General General
</h3> </h3>
<div className="gf-form-group"> <div className="gf-form-group">
<InlineField label="Name" labelWidth={14}> <Field label="Name">
<Input name="title" onBlur={onBlur} defaultValue={dashboard.title} width={60} /> <Input name="title" onBlur={onBlur} defaultValue={dashboard.title} />
</InlineField> </Field>
<InlineField label="Description" labelWidth={14}> <Field label="Description">
<Input name="description" onBlur={onBlur} defaultValue={dashboard.description} width={60} /> <Input name="description" onBlur={onBlur} defaultValue={dashboard.description} />
</InlineField> </Field>
<InlineField label="Tags" tooltip="Press enter to add a tag" labelWidth={14}> <Field label="Tags" description="Press enter to add a tag">
<TagsInput tags={dashboard.tags} onChange={onTagsChange} /> <TagsInput tags={dashboard.tags} onChange={onTagsChange} />
</InlineField> </Field>
<Field label="Folder">
<FolderPicker <FolderPicker
useNewForms={true}
initialTitle={dashboard.meta.folderTitle} initialTitle={dashboard.meta.folderTitle}
initialFolderId={dashboard.meta.folderId} initialFolderId={dashboard.meta.folderId}
onChange={onFolderChange} onChange={onFolderChange}
enableCreateNew={true} enableCreateNew={true}
dashboardId={dashboard.id} dashboardId={dashboard.id}
/> />
<InlineField </Field>
<Field
label="Editable" label="Editable"
tooltip="Uncheck, then save and reload to disable all dashboard editing" description="Set to read-only to disable all editing. Reload the dashboard for changes to take effect"
labelWidth={14}
> >
<InlineSwitch value={dashboard.editable} onChange={onEditableChange} /> <RadioButtonGroup value={dashboard.editable} options={editableOptions} onChange={onEditableChange} />
</InlineField> </Field>
</div> </div>
<TimePickerSettings <TimePickerSettings
onTimeZoneChange={onTimeZoneChange} onTimeZoneChange={onTimeZoneChange}
onRefreshIntervalChange={onRefreshIntervalChange} onRefreshIntervalChange={onRefreshIntervalChange}
@ -103,20 +112,23 @@ export const GeneralSettings: React.FC<Props> = ({ dashboard }) => {
timezone={dashboard.timezone} timezone={dashboard.timezone}
/> />
<h5 className="section-heading">Panel Options</h5> <CollapsableSection label="Panel options" isOpen={true}>
<div className="gf-form"> <Field
<InlineField label="Graph Tooltip" labelWidth={14}> label="Graph tooltip"
description="Controls tooltip and hover highlight behavior across different panels"
>
<Select <Select
onChange={onTooltipChange} onChange={onTooltipChange}
options={GRAPH_TOOLTIP_OPTIONS} options={GRAPH_TOOLTIP_OPTIONS}
width={40} width={40}
value={dashboard.graphTooltip} value={dashboard.graphTooltip}
/> />
</InlineField> </Field>
</div> </CollapsableSection>
<div className="gf-form-button-row"> <div className="gf-form-button-row">
{dashboard.meta.canSave && <DeleteDashboardButton dashboard={dashboard} />} {dashboard.meta.canSave && <DeleteDashboardButton dashboard={dashboard} />}
</div> </div>
</> </div>
); );
}; };

35
public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
View File

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { InlineField, Input, InlineSwitch, TimeZonePicker, Tooltip } from '@grafana/ui'; import { Input, TimeZonePicker, Field, Switch, CollapsableSection } from '@grafana/ui';
import { rangeUtil, TimeZone } from '@grafana/data'; import { rangeUtil, TimeZone } from '@grafana/data';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
@ -52,45 +52,34 @@ export class TimePickerSettings extends PureComponent<Props, State> {
render() { render() {
return ( return (
<div className="editor-row"> <CollapsableSection label="Time options" isOpen={true}>
<h5 className="section-heading">Time Options</h5> <Field label="Timezone" aria-label={selectors.components.TimeZonePicker.container}>
<div className="gf-form-group">
<div className="gf-form" aria-label={selectors.components.TimeZonePicker.container}>
<label className="gf-form-label width-7">Timezone</label>
<TimeZonePicker <TimeZonePicker
includeInternal={true} includeInternal={true}
value={this.props.timezone} value={this.props.timezone}
onChange={this.onTimeZoneChange} onChange={this.onTimeZoneChange}
width={40} width={40}
/> />
</div> </Field>
<AutoRefreshIntervals <AutoRefreshIntervals
refreshIntervals={this.props.refreshIntervals} refreshIntervals={this.props.refreshIntervals}
onRefreshIntervalChange={this.props.onRefreshIntervalChange} onRefreshIntervalChange={this.props.onRefreshIntervalChange}
/> />
<div className="gf-form"> <Field
<span className="gf-form-label width-7">Now delay now-</span> label="Now delay now"
<Tooltip description="Enter 1m to ignore the last minute (because it can contain incomplete metrics)"
placement="right"
content={'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'}
> >
<Input <Input
width={60}
invalid={!this.state.isNowDelayValid} invalid={!this.state.isNowDelayValid}
placeholder="0m" placeholder="0m"
onChange={this.onNowDelayChange} onChange={this.onNowDelayChange}
defaultValue={this.props.nowDelay} defaultValue={this.props.nowDelay}
/> />
</Tooltip> </Field>
</div> <Field label="Hide time picker">
<Switch value={!!this.props.timePickerHidden} onChange={this.onHideTimePickerChange} />
<div className="gf-form"> </Field>
<InlineField labelWidth={14} label="Hide time picker"> </CollapsableSection>
<InlineSwitch value={!!this.props.timePickerHidden} onChange={this.onHideTimePickerChange} />
</InlineField>
</div>
</div>
</div>
); );
} }
} }

3
public/sass/components/_dashboard_settings.scss
View File

@ -52,8 +52,7 @@
.dashboard-settings__header { .dashboard-settings__header {
font-size: $font-size-h3; font-size: $font-size-h3;
margin-bottom: $space-xl; margin-bottom: $space-md;
line-height: 36px;
} }
.dashboard-settings__subheader { .dashboard-settings__subheader {