Add hover css to role table rows
Andrew Watkins
parent
532b63eb99
commit
d991c55167
|
|
@ -1,37 +1,88 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
import Dropdown from 'src/shared/components/MultiSelectDropdown'
|
||||
import _ from 'lodash'
|
||||
|
||||
const RolesTable = ({roles}) => (
|
||||
<div className="panel panel-minimal">
|
||||
<div className="panel-body">
|
||||
<table className="table v-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Permissions</th>
|
||||
<th>Users</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
roles.length ? roles.map((role) => (
|
||||
<tr key={role.name}>
|
||||
<td>{role.name}</td>
|
||||
<td>{role.permissions && role.permissions.map((p) => p.scope).join(', ')}</td>
|
||||
<td>{role.users && role.users.map((u) => u.name).join(', ')}</td>
|
||||
</tr>
|
||||
)) : (() => (
|
||||
<tr className="table-empty-state">
|
||||
<th colSpan="5">
|
||||
<p>You don't have any Roles,<br/>why not create one?</p>
|
||||
</th>
|
||||
</tr>
|
||||
))()
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
// TODO: replace with actual GLOBAL permissions endpoint when we get those from enterprise team
|
||||
const PERMISSIONS = [
|
||||
"NoPermissions",
|
||||
"ViewAdmin",
|
||||
"ViewChronograf",
|
||||
"CreateDatabase",
|
||||
"CreateUserAndRole",
|
||||
"AddRemoveNode",
|
||||
"DropDatabase",
|
||||
"DropData",
|
||||
"ReadData",
|
||||
"WriteData",
|
||||
"Rebalance",
|
||||
"ManageShard",
|
||||
"ManageContinuousQuery",
|
||||
"ManageQuery",
|
||||
"ManageSubscription",
|
||||
"Monitor",
|
||||
"CopyShard",
|
||||
"KapacitorAPI",
|
||||
"KapacitorConfigAPI"
|
||||
]
|
||||
|
||||
const RolesTable = ({roles}) => {
|
||||
return (
|
||||
<div className="panel panel-info">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<div className="users__search-widget input-group admin__search-widget">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Filter Role..."
|
||||
/>
|
||||
<div className="input-group-addon">
|
||||
<span className="icon search" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" className="btn btn-primary">Create Role</a>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<table className="table v-center admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Permissions</th>
|
||||
<th>Users</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
roles.length ? roles.map((role) => (
|
||||
<tr key={role.name}>
|
||||
<td>
|
||||
{role.name}
|
||||
</td>
|
||||
<td>
|
||||
{console.log(role.permissions[0].allowed)}
|
||||
<Dropdown selectedItems={_.get(role, ['permissions', '0', 'allowed'], [])} items={PERMISSIONS} onApply={() => {}}/>
|
||||
</td>
|
||||
<td>
|
||||
{role.users && role.users.map((u) => u.name).join(', ')}
|
||||
</td>
|
||||
<td className="text-right">
|
||||
<button className="btn btn-xs btn-danger admin-table--delete">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
)) : (() => (
|
||||
<tr className="table-empty-state">
|
||||
<th colSpan="5">
|
||||
<p>You don't have any Roles,<br/>why not create one?</p>
|
||||
</th>
|
||||
</tr>
|
||||
))()
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const {
|
||||
arrayOf,
|
||||
|
|
|
|||
|
|
@ -2,10 +2,13 @@
|
|||
Custom Search Widget
|
||||
----------------------------------------------
|
||||
*/
|
||||
$search-widget-height: 36px;
|
||||
|
||||
.users__search-widget {
|
||||
position: relative;
|
||||
|
||||
input.form-control {
|
||||
height: $search-widget-height;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
|
@ -19,7 +22,7 @@
|
|||
.input-group-addon {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
line-height: calc(#{$search-widget-height} - 2px);
|
||||
position: absolute;
|
||||
color: $g10-wolf;
|
||||
top: 0;
|
||||
|
|
@ -32,4 +35,7 @@
|
|||
transition:
|
||||
color 0.25s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin__search-widget {
|
||||
width: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,6 +108,40 @@ table .monotype {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Table Styles for Admin Pages
|
||||
----------------------------------------------
|
||||
*/
|
||||
.admin-table {
|
||||
.admin-table--delete {
|
||||
visibility: hidden;
|
||||
}
|
||||
tbody tr {
|
||||
transition: background-color 0.25s ease;
|
||||
&:hover {
|
||||
background-color: $g4-onyx;
|
||||
}
|
||||
}
|
||||
tbody tr:hover .admin-table--delete {
|
||||
visibility: visible;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
background-color: transparent;
|
||||
width: 330px;
|
||||
|
||||
.caret {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
tbody tr:hover .dropdown-toggle {
|
||||
color: $g20-white !important;
|
||||
background-color: $c-pool;
|
||||
|
||||
.caret {opacity: 1;}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Responsive Tables
|
||||
----------------------------------------------
|
||||
|
|
@ -119,4 +153,4 @@ table .monotype {
|
|||
border-color: $g5-pepper;
|
||||
@include custom-scrollbar($g5-pepper, $c-pool);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
.panel-title {
|
||||
color: $g10-wolf !important;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 30px;
|
||||
background-color: $g3-castle;
|
||||
|
|
@ -38,24 +37,40 @@
|
|||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
th,td {
|
||||
border-color: $g5-pepper;
|
||||
}
|
||||
th {
|
||||
color: $g17-whisper;
|
||||
}
|
||||
td {
|
||||
color: $g14-chromium;
|
||||
}
|
||||
tbody tr:last-child td {
|
||||
border-bottom: 2px solid $g5-pepper;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel.panel-info {
|
||||
background-color: $g3-castle;
|
||||
border: 0;
|
||||
|
||||
.panel-body,
|
||||
.panel-heading {
|
||||
background-color: transparent;
|
||||
}
|
||||
.panel-body {
|
||||
padding: 30px;
|
||||
}
|
||||
.panel-heading {
|
||||
border-color: $g4-onyx;
|
||||
.panel-title { color: $g14-chromium;}
|
||||
}
|
||||
}
|
||||
.panel .panel-body table {
|
||||
margin: 0;
|
||||
|
||||
th,td {
|
||||
border-color: $g5-pepper;
|
||||
}
|
||||
th {
|
||||
color: $g17-whisper;
|
||||
}
|
||||
td {
|
||||
color: $g14-chromium;
|
||||
}
|
||||
tbody tr:last-child td {
|
||||
border-bottom: 2px solid $g5-pepper;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
|
@ -673,4 +688,4 @@ $form-static-checkbox-size: 16px;
|
|||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue