Use ConfirmButton when deleting a InfluxDB Connection
Alex P
parent
3e33bf3982
commit
eee9b94cc2
ui/src
sources/components
style
|
|
@ -7,6 +7,7 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
|
|||
|
||||
import Dropdown from 'shared/components/Dropdown'
|
||||
import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
|
||||
import ConfirmButton from 'shared/components/ConfirmButton'
|
||||
|
||||
const kapacitorDropdown = (
|
||||
kapacitors,
|
||||
|
|
@ -96,117 +97,124 @@ const InfluxTable = ({
|
|||
handleDeleteKapacitor,
|
||||
isUsingAuth,
|
||||
me,
|
||||
}) => (
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="panel">
|
||||
<div className="panel-heading">
|
||||
<h2 className="panel-title">
|
||||
{isUsingAuth ? (
|
||||
<span>
|
||||
Connections for <em>{me.currentOrganization.name}</em>
|
||||
</span>
|
||||
) : (
|
||||
<span>Connections</span>
|
||||
)}
|
||||
</h2>
|
||||
<Authorized requiredRole={EDITOR_ROLE}>
|
||||
<Link
|
||||
to={`/sources/${source.id}/manage-sources/new`}
|
||||
className="btn btn-sm btn-primary"
|
||||
>
|
||||
<span className="icon plus" /> Add Connection
|
||||
</Link>
|
||||
</Authorized>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<table className="table v-center margin-bottom-zero table-highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="source-table--connect-col" />
|
||||
<th>InfluxDB Connection</th>
|
||||
<th className="text-right" />
|
||||
<th>
|
||||
Kapacitor Connection{' '}
|
||||
<QuestionMarkTooltip
|
||||
tipID="kapacitor-node-helper"
|
||||
tipContent={
|
||||
'<p>Kapacitor Connections are<br/>scoped per InfluxDB Connection.<br/>Only one can be active at a time.</p>'
|
||||
}
|
||||
/>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sources.map(s => {
|
||||
return (
|
||||
<tr
|
||||
key={s.id}
|
||||
className={s.id === source.id ? 'highlight' : null}
|
||||
>
|
||||
<td>
|
||||
{s.id === source.id ? (
|
||||
<div className="btn btn-success btn-xs source-table--connect">
|
||||
Connected
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
className="btn btn-default btn-xs source-table--connect"
|
||||
to={`/sources/${s.id}/hosts`}
|
||||
>
|
||||
Connect
|
||||
</Link>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<h5 className="margin-zero">
|
||||
<Authorized
|
||||
requiredRole={EDITOR_ROLE}
|
||||
replaceWithIfNotAuthorized={<strong>{s.name}</strong>}
|
||||
>
|
||||
}) => {
|
||||
const wrappedDelete = s => () => {
|
||||
handleDeleteSource(s)
|
||||
}
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="panel">
|
||||
<div className="panel-heading">
|
||||
<h2 className="panel-title">
|
||||
{isUsingAuth ? (
|
||||
<span>
|
||||
Connections for <em>{me.currentOrganization.name}</em>
|
||||
</span>
|
||||
) : (
|
||||
<span>Connections</span>
|
||||
)}
|
||||
</h2>
|
||||
<Authorized requiredRole={EDITOR_ROLE}>
|
||||
<Link
|
||||
to={`/sources/${source.id}/manage-sources/new`}
|
||||
className="btn btn-sm btn-primary"
|
||||
>
|
||||
<span className="icon plus" /> Add Connection
|
||||
</Link>
|
||||
</Authorized>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<table className="table v-center margin-bottom-zero table-highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="source-table--connect-col" />
|
||||
<th>InfluxDB Connection</th>
|
||||
<th className="text-right" />
|
||||
<th>
|
||||
Kapacitor Connection{' '}
|
||||
<QuestionMarkTooltip
|
||||
tipID="kapacitor-node-helper"
|
||||
tipContent={
|
||||
'<p>Kapacitor Connections are<br/>scoped per InfluxDB Connection.<br/>Only one can be active at a time.</p>'
|
||||
}
|
||||
/>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sources.map(s => {
|
||||
return (
|
||||
<tr
|
||||
key={s.id}
|
||||
className={s.id === source.id ? 'highlight' : null}
|
||||
>
|
||||
<td>
|
||||
{s.id === source.id ? (
|
||||
<div className="btn btn-success btn-xs source-table--connect">
|
||||
Connected
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
to={`${location.pathname}/${s.id}/edit`}
|
||||
className={
|
||||
s.id === source.id ? 'link-success' : null
|
||||
className="btn btn-default btn-xs source-table--connect"
|
||||
to={`/sources/${s.id}/hosts`}
|
||||
>
|
||||
Connect
|
||||
</Link>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<h5 className="margin-zero">
|
||||
<Authorized
|
||||
requiredRole={EDITOR_ROLE}
|
||||
replaceWithIfNotAuthorized={
|
||||
<strong>{s.name}</strong>
|
||||
}
|
||||
>
|
||||
<strong>{s.name}</strong>
|
||||
{s.default ? ' (Default)' : null}
|
||||
</Link>
|
||||
<Link
|
||||
to={`${location.pathname}/${s.id}/edit`}
|
||||
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>
|
||||
</h5>
|
||||
<span>{s.url}</span>
|
||||
</td>
|
||||
<td className="text-right">
|
||||
<Authorized requiredRole={EDITOR_ROLE}>
|
||||
<a
|
||||
className="btn btn-xs btn-danger table--show-on-row-hover"
|
||||
href="#"
|
||||
onClick={handleDeleteSource(s)}
|
||||
>
|
||||
Delete Connection
|
||||
</a>
|
||||
</Authorized>
|
||||
</td>
|
||||
<td className="source-table--kapacitor">
|
||||
{kapacitorDropdown(
|
||||
s.kapacitors,
|
||||
s,
|
||||
router,
|
||||
setActiveKapacitor,
|
||||
handleDeleteKapacitor
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="source-table--kapacitor">
|
||||
{kapacitorDropdown(
|
||||
s.kapacitors,
|
||||
s,
|
||||
router,
|
||||
setActiveKapacitor,
|
||||
handleDeleteKapacitor
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const {array, bool, func, shape, string} = PropTypes
|
||||
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ br {
|
|||
margin-bottom: 4px;
|
||||
|
||||
&.intro {
|
||||
@include gradient-h($c-pool,$c-star);
|
||||
@include gradient-h($c-pool, $c-star);
|
||||
color: $g20-white;
|
||||
}
|
||||
|
||||
|
|
@ -306,7 +306,7 @@ $tick-script-overlay-margin: 30px;
|
|||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
.icon.download.dlcsv:before {
|
||||
content: "\e91d";
|
||||
content: '\e91d';
|
||||
font-weight: bold;
|
||||
color: #bec2cc;
|
||||
}
|
||||
|
|
@ -403,23 +403,23 @@ $dash-editable-header-padding: 7px;
|
|||
|
||||
.page-header__left.page-header__dash-editable,
|
||||
.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 {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.dashboard-title {
|
||||
display: flex;
|
||||
|
||||
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,
|
||||
input[type='text'].form-control.dashboard-title--input:focus,
|
||||
h1 {
|
||||
font-size: $page-header-size;
|
||||
font-weight: $page-header-weight;
|
||||
padding: 0 $dash-editable-header-padding;
|
||||
}
|
||||
|
||||
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,
|
||||
input[type='text'].form-control.dashboard-title--input:focus {
|
||||
font-size: $page-header-size;
|
||||
font-weight: $page-header-weight;
|
||||
}
|
||||
|
|
@ -439,7 +439,7 @@ $dash-editable-header-padding: 7px;
|
|||
border-color 0.25s ease;
|
||||
|
||||
&:after {
|
||||
content: "\f058";
|
||||
content: '\f058';
|
||||
font-family: 'icomoon';
|
||||
position: absolute;
|
||||
font-size: 15px;
|
||||
|
|
@ -550,3 +550,11 @@ div.dropdown.dropdown-stretch > div.dropdown-toggle,
|
|||
div.dropdown.dropdown-stretch > button.dropdown-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
Delete Source
|
||||
-----------------------------------------------------------------------------
|
||||
*/
|
||||
.delete-source {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue