Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Polish severity color config UI

pull/10616/head
Alex P 2018-06-20 14:54:13 -07:00 committed by Iris Scholten
parent 1685c181f0
commit fb42e5259c
2 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/src/logs/components/OptionsOverlay.tsx
View File

@ -38,14 +38,23 @@ class OptionsOverlay extends Component<Props, State> {
<Container maxWidth={700}>
<Heading title="Configure Log Viewer" onDismiss={onDismissOverlay} />
<Body>
<div className="row">
<div className="col-sm-6">
<label className="form-label">Customize Severity Colors</label>
{this.severityConfigs}
<button
className="btn btn-sm btn-default"
className="btn btn-sm btn-default btn-block"
onClick={this.handleResetSeverity}
>
<span className="icon refresh" />
Reset to Defaults
</button>
{this.severityConfigs}
</div>
<div className="col-sm-6">
<label className="form-label">Order Table Columns</label>
<p>Column re-ordering goes here</p>
</div>
</div>
</Body>
</Container>
)
@ -58,7 +67,9 @@ class OptionsOverlay extends Component<Props, State> {
<div className="logs-options--color-list">
{workingSeverityConfigs.map(config => (
<div key={uuid.v4()} className="logs-options--color-row">
<div className="logs-options--color-column">{config.severity}</div>
<div className="logs-options--color-column">
<div className="logs-options--label">{config.severity}</div>
</div>
<div className="logs-options--color-column">
<ColorDropdown
selected={config.override || config.default}

16
ui/src/style/components/logs-viewer-options.scss
View File

@ -19,3 +19,19 @@
.logs-options--color-column {
width: 50%;
}
.logs-options--label {
height: 30px;
border-radius: $radius;
background-color: $g3-castle;
padding: 0 11px;
line-height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $g13-mist;
font-weight: 500;
font-size: 13px;
margin-right: 4px;
@include no-user-select();
}