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

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

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

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

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