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

Use ConfirmButton when deleting a InfluxDB Connection

pull/10616/head
Alex P 2018-03-29 10:50:22 -07:00
parent 3e33bf3982
commit eee9b94cc2
2 changed files with 128 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
ui/src/sources/components/InfluxTable.js
View File

@ -7,6 +7,7 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
import Dropdown from 'shared/components/Dropdown' import Dropdown from 'shared/components/Dropdown'
import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip' import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
import ConfirmButton from 'shared/components/ConfirmButton'
const kapacitorDropdown = ( const kapacitorDropdown = (
kapacitors, kapacitors,
@ -96,117 +97,124 @@ const InfluxTable = ({
handleDeleteKapacitor, handleDeleteKapacitor,
isUsingAuth, isUsingAuth,
me, me,
}) => ( }) => {
<div className="row"> const wrappedDelete = s => () => {
<div className="col-md-12"> handleDeleteSource(s)
<div className="panel"> }
<div className="panel-heading"> return (
<h2 className="panel-title"> <div className="row">
{isUsingAuth ? ( <div className="col-md-12">
<span> <div className="panel">
Connections for <em>{me.currentOrganization.name}</em> <div className="panel-heading">
</span> <h2 className="panel-title">
) : ( {isUsingAuth ? (
<span>Connections</span> <span>
)} Connections for <em>{me.currentOrganization.name}</em>
</h2> </span>
<Authorized requiredRole={EDITOR_ROLE}> ) : (
<Link <span>Connections</span>
to={`/sources/${source.id}/manage-sources/new`} )}
className="btn btn-sm btn-primary" </h2>
> <Authorized requiredRole={EDITOR_ROLE}>
<span className="icon plus" /> Add Connection <Link
</Link> to={`/sources/${source.id}/manage-sources/new`}
</Authorized> className="btn btn-sm btn-primary"
</div> >
<div className="panel-body"> <span className="icon plus" /> Add Connection
<table className="table v-center margin-bottom-zero table-highlight"> </Link>
<thead> </Authorized>
<tr> </div>
<th className="source-table--connect-col" /> <div className="panel-body">
<th>InfluxDB Connection</th> <table className="table v-center margin-bottom-zero table-highlight">
<th className="text-right" /> <thead>
<th> <tr>
Kapacitor Connection{' '} <th className="source-table--connect-col" />
<QuestionMarkTooltip <th>InfluxDB Connection</th>
tipID="kapacitor-node-helper" <th className="text-right" />
tipContent={ <th>
'<p>Kapacitor Connections are<br/>scoped per InfluxDB Connection.<br/>Only one can be active at a time.</p>' Kapacitor Connection{' '}
} <QuestionMarkTooltip
/> tipID="kapacitor-node-helper"
</th> tipContent={
</tr> '<p>Kapacitor Connections are<br/>scoped per InfluxDB Connection.<br/>Only one can be active at a time.</p>'
</thead> }
<tbody> />
{sources.map(s => { </th>
return ( </tr>
<tr </thead>
key={s.id} <tbody>
className={s.id === source.id ? 'highlight' : null} {sources.map(s => {
> return (
<td> <tr
{s.id === source.id ? ( key={s.id}
<div className="btn btn-success btn-xs source-table--connect"> className={s.id === source.id ? 'highlight' : null}
Connected >
</div> <td>
) : ( {s.id === source.id ? (
<Link <div className="btn btn-success btn-xs source-table--connect">
className="btn btn-default btn-xs source-table--connect" Connected
to={`/sources/${s.id}/hosts`} </div>
> ) : (
Connect
</Link>
)}
</td>
<td>
<h5 className="margin-zero">
<Authorized
requiredRole={EDITOR_ROLE}
replaceWithIfNotAuthorized={<strong>{s.name}</strong>}
>
<Link <Link
to={`${location.pathname}/${s.id}/edit`} className="btn btn-default btn-xs source-table--connect"
className={ to={`/sources/${s.id}/hosts`}
s.id === source.id ? 'link-success' : null >
Connect
</Link>
)}
</td>
<td>
<h5 className="margin-zero">
<Authorized
requiredRole={EDITOR_ROLE}
replaceWithIfNotAuthorized={
<strong>{s.name}</strong>
} }
> >
<strong>{s.name}</strong> <Link
{s.default ? ' (Default)' : null} to={`${location.pathname}/${s.id}/edit`}
</Link> className={
s.id === source.id ? 'link-success' : null
}
>
<strong>{s.name}</strong>
{s.default ? ' (Default)' : null}
</Link>
</Authorized>
</h5>
<span>{s.url}</span>
</td>
<td className="text-right">
<Authorized requiredRole={EDITOR_ROLE}>
<ConfirmButton
customClass="delete-source table--show-on-row-hover"
type="btn-danger"
size="btn-xs"
text="Delete Connection"
confirmAction={wrappedDelete(s)}
/>
</Authorized> </Authorized>
</h5> </td>
<span>{s.url}</span> <td className="source-table--kapacitor">
</td> {kapacitorDropdown(
<td className="text-right"> s.kapacitors,
<Authorized requiredRole={EDITOR_ROLE}> s,
<a router,
className="btn btn-xs btn-danger table--show-on-row-hover" setActiveKapacitor,
href="#" handleDeleteKapacitor
onClick={handleDeleteSource(s)} )}
> </td>
Delete Connection </tr>
</a> )
</Authorized> })}
</td> </tbody>
<td className="source-table--kapacitor"> </table>
{kapacitorDropdown( </div>
s.kapacitors,
s,
router,
setActiveKapacitor,
handleDeleteKapacitor
)}
</td>
</tr>
)
})}
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
</div> )
) }
const {array, bool, func, shape, string} = PropTypes const {array, bool, func, shape, string} = PropTypes

24
ui/src/style/unsorted.scss
View File

@ -203,7 +203,7 @@ br {
margin-bottom: 4px; margin-bottom: 4px;
&.intro { &.intro {
@include gradient-h($c-pool,$c-star); @include gradient-h($c-pool, $c-star);
color: $g20-white; color: $g20-white;
} }
@ -306,7 +306,7 @@ $tick-script-overlay-margin: 30px;
----------------------------------------------------------------------------- -----------------------------------------------------------------------------
*/ */
.icon.download.dlcsv:before { .icon.download.dlcsv:before {
content: "\e91d"; content: '\e91d';
font-weight: bold; font-weight: bold;
color: #bec2cc; color: #bec2cc;
} }
@ -403,23 +403,23 @@ $dash-editable-header-padding: 7px;
.page-header__left.page-header__dash-editable, .page-header__left.page-header__dash-editable,
.dashboard-title, .dashboard-title,
.dashboard-title input[type="text"].form-control.dashboard-title--input, .dashboard-title input[type='text'].form-control.dashboard-title--input,
.dashboard-title h1 { .dashboard-title h1 {
flex: 1 0 0; flex: 1 0 0;
} }
.dashboard-title { .dashboard-title {
display: flex; display: flex;
input[type="text"].form-control.dashboard-title--input, input[type='text'].form-control.dashboard-title--input,
input[type="text"].form-control.dashboard-title--input:focus, input[type='text'].form-control.dashboard-title--input:focus,
h1 { h1 {
font-size: $page-header-size; font-size: $page-header-size;
font-weight: $page-header-weight; font-weight: $page-header-weight;
padding: 0 $dash-editable-header-padding; padding: 0 $dash-editable-header-padding;
} }
input[type="text"].form-control.dashboard-title--input, input[type='text'].form-control.dashboard-title--input,
input[type="text"].form-control.dashboard-title--input:focus { input[type='text'].form-control.dashboard-title--input:focus {
font-size: $page-header-size; font-size: $page-header-size;
font-weight: $page-header-weight; font-weight: $page-header-weight;
} }
@ -439,7 +439,7 @@ $dash-editable-header-padding: 7px;
border-color 0.25s ease; border-color 0.25s ease;
&:after { &:after {
content: "\f058"; content: '\f058';
font-family: 'icomoon'; font-family: 'icomoon';
position: absolute; position: absolute;
font-size: 15px; font-size: 15px;
@ -550,3 +550,11 @@ div.dropdown.dropdown-stretch > div.dropdown-toggle,
div.dropdown.dropdown-stretch > button.dropdown-toggle { div.dropdown.dropdown-stretch > button.dropdown-toggle {
width: 100%; width: 100%;
} }
/*
Delete Source
-----------------------------------------------------------------------------
*/
.delete-source {
display: inline-block;
}