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

Panel polish

pull/2887/head
Alex P 2018-02-27 23:13:16 -08:00
parent ec6ef119fb
commit fd12ab835f
4 changed files with 96 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
ui/src/kapacitor/components/KapacitorRules.js
View File

@ -54,51 +54,50 @@ const KapacitorRules = ({
return (
<PageContents source={source}>
<div className="panel-heading">
<h2 className="panel-title">
{builderHeader}
</h2>
<div className="u-flex u-ai-center u-jc-space-between">
<Link
to={`/sources/${source.id}/alert-rules/new`}
className="btn btn-sm btn-primary"
style={{marginRight: '4px'}}
>
<span className="icon plus" /> Build Alert Rule
</Link>
<div className="panel">
<div className="panel-heading">
<h2 className="panel-title">
{builderHeader}
</h2>
<div className="u-flex u-ai-center u-jc-space-between">
<Link
to={`/sources/${source.id}/alert-rules/new`}
className="btn btn-sm btn-primary"
style={{marginRight: '4px'}}
>
<span className="icon plus" /> Build Alert Rule
</Link>
</div>
</div>
<div className="panel-body">
<KapacitorRulesTable
source={source}
rules={builderRules}
onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus}
/>
</div>
</div>
<KapacitorRulesTable
source={source}
rules={builderRules}
onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus}
/>
<div className="row">
<div className="col-md-12">
<div className="panel">
<div className="panel-heading">
<h2 className="panel-title">
{scriptsHeader}
</h2>
<div className="u-flex u-ai-center u-jc-space-between">
<Link
to={`/sources/${source.id}/tickscript/new`}
className="btn btn-sm btn-success"
style={{marginRight: '4px'}}
>
<span className="icon plus" /> Write TICKscript
</Link>
</div>
</div>
<TasksTable
source={source}
tasks={rules}
onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus}
/>
</div>
<div className="panel">
<div className="panel-heading">
<h2 className="panel-title">
{scriptsHeader}
</h2>
<Link
to={`/sources/${source.id}/tickscript/new`}
className="btn btn-sm btn-success"
style={{marginRight: '4px'}}
>
<span className="icon plus" /> Write TICKscript
</Link>
</div>
<div className="panel-body">
<TasksTable
source={source}
tasks={rules}
onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus}
/>
</div>
</div>
</PageContents>
@ -125,9 +124,7 @@ const PageContents = ({children}) =>
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="panel">
{children}
</div>
{children}
</div>
</div>
</div>

56
ui/src/kapacitor/components/KapacitorRulesTable.js
View File

@ -15,35 +15,33 @@ const {
} = TASKS_TABLE
const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
<div className="panel-body">
<table className="table v-center table-highlight">
<thead>
<tr>
<th style={{minWidth: colName}}>Name</th>
<th style={{width: colTrigger}}>Rule Type</th>
<th style={{width: colMessage}}>Message</th>
<th style={{width: colAlerts}}>Alert Handlers</th>
<th style={{width: colEnabled}} className="text-center">
Task Enabled
</th>
<th style={{width: colActions}} />
</tr>
</thead>
<tbody>
{_.sortBy(rules, r => r.name.toLowerCase()).map(rule => {
return (
<RuleRow
key={rule.id}
rule={rule}
source={source}
onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus}
/>
)
})}
</tbody>
</table>
</div>
<table className="table v-center table-highlight">
<thead>
<tr>
<th style={{minWidth: colName}}>Name</th>
<th style={{width: colTrigger}}>Rule Type</th>
<th style={{width: colMessage}}>Message</th>
<th style={{width: colAlerts}}>Alert Handlers</th>
<th style={{width: colEnabled}} className="text-center">
Task Enabled
</th>
<th style={{width: colActions}} />
</tr>
</thead>
<tbody>
{_.sortBy(rules, r => r.name.toLowerCase()).map(rule => {
return (
<RuleRow
key={rule.id}
rule={rule}
source={source}
onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus}
/>
)
})}
</tbody>
</table>
const handleDelete = (rule, onDelete) => onDelete(rule)

52
ui/src/kapacitor/components/TasksTable.js
View File

@ -8,33 +8,31 @@ import {TASKS_TABLE} from 'src/kapacitor/constants/tableSizing'
const {colName, colType, colEnabled, colActions} = TASKS_TABLE
const TasksTable = ({tasks, source, onDelete, onChangeRuleStatus}) =>
<div className="panel-body">
<table className="table v-center table-highlight">
<thead>
<tr>
<th style={{minWidth: colName}}>Name</th>
<th style={{width: colType}}>Type</th>
<th style={{width: colEnabled}} className="text-center">
Task Enabled
</th>
<th style={{width: colActions}} />
</tr>
</thead>
<tbody>
{_.sortBy(tasks, t => t.id.toLowerCase()).map(task => {
return (
<TaskRow
key={task.id}
task={task}
source={source}
onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus}
/>
)
})}
</tbody>
</table>
</div>
<table className="table v-center table-highlight">
<thead>
<tr>
<th style={{minWidth: colName}}>Name</th>
<th style={{width: colType}}>Type</th>
<th style={{width: colEnabled}} className="text-center">
Task Enabled
</th>
<th style={{width: colActions}} />
</tr>
</thead>
<tbody>
{_.sortBy(tasks, t => t.id.toLowerCase()).map(task => {
return (
<TaskRow
key={task.id}
task={task}
source={source}
onDelete={onDelete}
onChangeRuleStatus={onChangeRuleStatus}
/>
)
})}
</tbody>
</table>
const handleDelete = (task, onDelete) => onDelete(task)

1
ui/src/style/theme/_panels.scss
View File

@ -9,6 +9,7 @@ $panel-gutter: 30px;
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: $panel-gutter;
}
.panel-heading {