142 lines
5.1 KiB
JavaScript
142 lines
5.1 KiB
JavaScript
import React, {PropTypes} from 'react';
|
|
import {Link} from 'react-router';
|
|
|
|
import CreateDatabase from './CreateDatabase';
|
|
|
|
const {number, string, shape, arrayOf, func} = PropTypes;
|
|
|
|
const DatabaseManager = React.createClass({
|
|
propTypes: {
|
|
database: string.isRequired,
|
|
databases: arrayOf(shape({})).isRequired,
|
|
dbStats: shape({
|
|
diskBytes: string.isRequired,
|
|
numMeasurements: number.isRequired,
|
|
numSeries: number.isRequired,
|
|
}),
|
|
users: arrayOf(shape({
|
|
id: number,
|
|
name: string.isRequired,
|
|
roles: string.isRequired,
|
|
})).isRequired,
|
|
queries: arrayOf(string).isRequired,
|
|
replicationFactors: arrayOf(number).isRequired,
|
|
onClickDatabase: func.isRequired,
|
|
onCreateDatabase: func.isRequired,
|
|
},
|
|
|
|
render() {
|
|
const {database, databases, dbStats, queries, users,
|
|
replicationFactors, onClickDatabase, onCreateDatabase} = this.props;
|
|
|
|
return (
|
|
<div className="page-wrapper database-manager">
|
|
<div className="enterprise-header">
|
|
<div className="enterprise-header__container">
|
|
<div className="enterprise-header__left">
|
|
<div className="dropdown minimal-dropdown">
|
|
<button className="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
<span className="button-text">{database}</span>
|
|
<span className="caret"></span>
|
|
</button>
|
|
<ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
|
|
{
|
|
databases.map((db) => {
|
|
return <li onClick={() => onClickDatabase(db.Name)} key={db.Name}><Link to={`/databases/manager/${db.Name}`}>{db.Name}</Link></li>;
|
|
})
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="enterprise-header__right">
|
|
<button className="btn btn-sm btn-primary" data-toggle="modal" data-target="#dbModal">Create Database</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="container-fluid">
|
|
<div className="row">
|
|
<div className="col-sm-12 col-md-4">
|
|
<div className="panel panel-minimal">
|
|
<div className="panel-heading">
|
|
<h2 className="panel-title">Database Stats</h2>
|
|
</div>
|
|
<div className="panel-body">
|
|
<div className="db-manager-stats">
|
|
<div>
|
|
<h4>{dbStats.diskBytes}</h4>
|
|
<p>On Disk</p>
|
|
</div>
|
|
<div>
|
|
<h4>{dbStats.numMeasurements}</h4>
|
|
<p>Measurements</p>
|
|
</div>
|
|
<div>
|
|
<h4>{dbStats.numSeries}</h4>
|
|
<p>Series</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-sm-12 col-md-8">
|
|
<div className="panel panel-minimal">
|
|
<div className="panel-heading">
|
|
<h2 className="panel-title">Users</h2>
|
|
</div>
|
|
<div className="panel-body">
|
|
<table className="table v-center margin-bottom-zero">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Role</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{
|
|
users.map((user) => {
|
|
return (
|
|
<tr key={user.name}>
|
|
<td><Link title="Manage Access" to={`/accounts/${user.name}`}>{user.name}</Link></td>
|
|
<td>{user.roles}</td>
|
|
</tr>
|
|
);
|
|
})
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="panel panel-minimal">
|
|
<div className="panel-heading">
|
|
<h2 className="panel-title">Continuous Queries Associated</h2>
|
|
</div>
|
|
<div className="panel-body continuous-queries">
|
|
{
|
|
queries.length ? queries.map((query, i) => <pre key={i}><code>{query}</code></pre>) :
|
|
(
|
|
<div className="continuous-queries__empty">
|
|
<img src="/assets/images/continuous-query-empty.svg" />
|
|
<h4>No queries to display</h4>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CreateDatabase onCreateDatabase={onCreateDatabase} replicationFactors={replicationFactors}/>
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default DatabaseManager;
|