Skip to content

COMPASS-2347: Databases and Collection in readonly mode #1337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 17, 2017
Merged

COMPASS-2347: Databases and Collection in readonly mode #1337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions src/internal-plugins/database-ddl/lib/component/databases-table.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ class DatabasesTable extends React.Component {
this.setState(state);
}

isReadonlyDistro() {
return process.env.HADRON_READONLY === 'true';
}

renderNoCollections(isWritable) {
return (
<div className="no-collections-zero-state">
Expand All @@ -92,6 +96,19 @@ class DatabasesTable extends React.Component {
);
}

renderCreateDatabaseButton() {
if (!this.isReadonlyDistro()) {
return (
<this.TextWriteButton
className="btn btn-primary btn-xs"
dataTestId="open-create-database-modal-button"
text="Create Database"
tooltipId="database-ddl-is-not-writable"
clickHandler={this.onCreateDatabaseButtonClicked.bind(this)} />
);
}
}

render() {
if (this.props.databases === LOADING_STATE) {
// Handled by the <Status> component
Expand All @@ -111,12 +128,7 @@ class DatabasesTable extends React.Component {
return (
<div className="rtss-databases" data-test-id="databases-table">
<div className="rtss-databases-create-button action-bar controls-container">
<this.TextWriteButton
className="btn btn-primary btn-xs"
dataTestId="open-create-database-modal-button"
text="Create Database"
tooltipId="database-ddl-is-not-writable"
clickHandler={this.onCreateDatabaseButtonClicked.bind(this)} />
{this.renderCreateDatabaseButton()}
</div>
<div className="column-container">
<div className="column main">
Expand All @@ -128,7 +140,7 @@ class DatabasesTable extends React.Component {
sortOrder={this.props.sortOrder}
sortColumn={this.props.sortColumn}
valueIndex={0}
removable={this.state.isWritable}
removable={this.state.isWritable && !this.isReadonlyDistro()}
onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
/>
Expand Down
26 changes: 19 additions & 7 deletions src/internal-plugins/database/lib/components/collections-table.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,30 @@ class CollectionsTable extends React.Component {
this.setState(state);
}

isReadonlyDistro() {
return process.env.HADRON_READONLY === 'true';
}

renderLink(coll) {
const collName = coll['Collection Name'];
return (
<a className="collections-table-link" href="#" onClick={this.onNameClicked.bind(this, collName)}>{collName}</a>
);
}

renderButton() {
if (!this.isReadonlyDistro()) {
return (
<this.TextWriteButton
className="btn btn-primary btn-xs"
dataTestId="open-create-collection-modal-button"
text="Create Collection"
tooltipId="database-is-not-writable"
clickHandler={this.onCreateCollectionButtonClicked.bind(this)} />
);
}
}

render() {
const rows = _.map(this.props.renderedCollections, (coll) => {
const linkName = this.renderLink(coll);
Expand All @@ -84,12 +101,7 @@ class CollectionsTable extends React.Component {
return (
<div className="collections-table" data-test-id="collections-table">
<div className="collections-table-create-button action-bar controls-container">
<this.TextWriteButton
className="btn btn-primary btn-xs"
dataTestId="open-create-collection-modal-button"
text="Create Collection"
tooltipId="database-is-not-writable"
clickHandler={this.onCreateCollectionButtonClicked.bind(this)} />
{this.renderButton()}
</div>
<div className="column-container">
<div className="column main">
Expand All @@ -101,7 +113,7 @@ class CollectionsTable extends React.Component {
sortOrder={this.props.sortOrder}
sortColumn={this.props.sortColumn}
valueIndex={0}
removable={this.state.isWritable}
removable={this.state.isWritable && !this.isReadonlyDistro()}
onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
/>
Expand Down
47 changes: 29 additions & 18 deletions src/internal-plugins/sidebar/lib/components/sidebar-collection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ class SidebarCollection extends React.Component {
}
}

isReadonlyDistro() {
return process.env.HADRON_READONLY === 'true';
}

renderReadonly() {
if (this.props.readonly) {
return (
Expand All @@ -67,25 +71,36 @@ class SidebarCollection extends React.Component {
}
}

renderDropCollectionButton() {
if (!this.isReadonlyDistro()) {
const tooltipText = this.state.isWritable ?
'Drop collection' :
this.state.description;
const tooltipOptions = {
'data-for': TOOLTIP_IDS.DROP_COLLECTION,
'data-effect': 'solid',
'data-offset': "{'bottom': 10, 'left': -5}",
'data-tip': tooltipText
};
let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-collection fa fa-trash-o';
if (!this.state.isWritable) {
dropClassName += ' compass-sidebar-icon-is-disabled';
}
return (
<i
className={dropClassName}
onClick={this.handleDropCollectionClick.bind(this, this.state.isWritable)}
{...tooltipOptions} />
);
}
}

render() {
const collectionName = this.getCollectionName();
const tooltipText = this.state.isWritable ?
'Drop collection' :
this.state.description;
const tooltipOptions = {
'data-for': TOOLTIP_IDS.DROP_COLLECTION,
'data-effect': 'solid',
'data-offset': "{'bottom': 10, 'left': -5}",
'data-tip': tooltipText
};
let itemClassName = 'compass-sidebar-item compass-sidebar-item-is-actionable';
if (this.props.activeNamespace === this.props._id) {
itemClassName += ' compass-sidebar-item-is-active';
}
let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-collection fa fa-trash-o';
if (!this.state.isWritable) {
dropClassName += ' compass-sidebar-icon-is-disabled';
}
return (
<div className={itemClassName}>
<div
Expand All @@ -97,11 +112,7 @@ class SidebarCollection extends React.Component {
{this.renderReadonly()}
</div>
<div className="compass-sidebar-item-actions compass-sidebar-item-actions-ddl">
<i
className={dropClassName}
onClick={this.handleDropCollectionClick.bind(this, this.state.isWritable)}
{...tooltipOptions}
/>
{this.renderDropCollectionButton()}
</div>
</div>
);
Expand Down
90 changes: 54 additions & 36 deletions src/internal-plugins/sidebar/lib/components/sidebar-database.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,37 +87,63 @@ class SidebarDatabase extends React.Component {
}
}

isReadonlyDistro() {
return process.env.HADRON_READONLY === 'true';
}

renderCreateCollectionButton() {
if (!this.isReadonlyDistro()) {
const createTooltipText = this.state.isWritable ?
'Create collection' :
this.state.description;
const createTooltipOptions = {
'data-for': TOOLTIP_IDS.CREATE_COLLECTION,
'data-effect': 'solid',
'data-offset': "{'bottom': 10, 'left': -8}",
'data-tip': createTooltipText
};
let createClassName = 'mms-icon-add-circle compass-sidebar-icon compass-sidebar-icon-create-collection';
if (!this.state.isWritable) {
createClassName += ' compass-sidebar-icon-is-disabled';
}
return (
<i
className={createClassName}
onClick={this.handleCreateCollectionClick.bind(this, this.state.isWritable)}
{...createTooltipOptions} />
);
}
}

renderDropDatabaseButton() {
if (!this.isReadonlyDistro()) {
const dropTooltipText = this.state.isWritable ?
'Drop database' :
'Drop database is not available on a secondary node'; // TODO: Arbiter/recovering/etc
const dropTooltipOptions = {
'data-for': TOOLTIP_IDS.DROP_DATABASE,
'data-effect': 'solid',
'data-offset': "{'bottom': 10, 'left': -5}",
'data-tip': dropTooltipText
};
let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-database fa fa-trash-o';
if (!this.state.isWritable) {
dropClassName += ' compass-sidebar-icon-is-disabled';
}
return (
<i
className={dropClassName}
onClick={this.handleDropDBClick.bind(this, this.state.isWritable)}
{...dropTooltipOptions} />
);
}
}

render() {
const createTooltipText = this.state.isWritable ?
'Create collection' :
this.state.description;
const createTooltipOptions = {
'data-for': TOOLTIP_IDS.CREATE_COLLECTION,
'data-effect': 'solid',
'data-offset': "{'bottom': 10, 'left': -8}",
'data-tip': createTooltipText
};
const dropTooltipText = this.state.isWritable ?
'Drop database' :
'Drop database is not available on a secondary node'; // TODO: Arbiter/recovering/etc
const dropTooltipOptions = {
'data-for': TOOLTIP_IDS.DROP_DATABASE,
'data-effect': 'solid',
'data-offset': "{'bottom': 10, 'left': -5}",
'data-tip': dropTooltipText
};
let headerClassName = 'compass-sidebar-item-header compass-sidebar-item-header-is-expandable compass-sidebar-item-header-is-actionable';
if (this.props.activeNamespace === this.props._id) {
headerClassName += ' compass-sidebar-item-header-is-active';
}
let createClassName = 'mms-icon-add-circle compass-sidebar-icon compass-sidebar-icon-create-collection';
if (!this.state.isWritable) {
createClassName += ' compass-sidebar-icon-is-disabled';
}
let dropClassName = 'compass-sidebar-icon compass-sidebar-icon-drop-database fa fa-trash-o';
if (!this.state.isWritable) {
dropClassName += ' compass-sidebar-icon-is-disabled';
}
return (
<div className="compass-sidebar-item compass-sidebar-item-is-top-level" style={this.props.style}>
<div className={headerClassName}>
Expand All @@ -131,16 +157,8 @@ class SidebarDatabase extends React.Component {
{this.props._id}
</div>
<div className="compass-sidebar-item-header-actions compass-sidebar-item-header-actions-ddl">
<i
className={createClassName}
onClick={this.handleCreateCollectionClick.bind(this, this.state.isWritable)}
{...createTooltipOptions}
/>
<i
className={dropClassName}
onClick={this.handleDropDBClick.bind(this, this.state.isWritable)}
{...dropTooltipOptions}
/>
{this.renderCreateCollectionButton()}
{this.renderDropDatabaseButton()}
</div>
</div>
<div className="compass-sidebar-item-content">
Expand Down
56 changes: 31 additions & 25 deletions src/internal-plugins/sidebar/lib/components/sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,10 @@ class Sidebar extends React.Component {
return null;
}

isReadonlyDistro() {
return process.env.HADRON_READONLY === 'true';
}

/**
* On expand/collapse of sidebar-database, add/remove from expandedDBs state and recompute row heights
* @param{string} _id sidebar-database _id
Expand All @@ -160,32 +164,34 @@ class Sidebar extends React.Component {
}

renderCreateDatabaseButton() {
const tooltipText = this.state.description;
const tooltipOptions = this.state.isWritable ? {} : {
'data-for': TOOLTIP_IDS.CREATE_DATABASE_BUTTON,
'data-effect': 'solid',
'data-place': 'right',
'data-offset': "{'right': -10}",
'data-tip': tooltipText
};
let className = 'compass-sidebar-button-create-database';
if (!this.state.isWritable) {
className += ' compass-sidebar-button-is-disabled';
if (!this.isReadonlyDistro()) {
const tooltipText = this.state.description;
const tooltipOptions = this.state.isWritable ? {} : {
'data-for': TOOLTIP_IDS.CREATE_DATABASE_BUTTON,
'data-effect': 'solid',
'data-place': 'right',
'data-offset': "{'right': -10}",
'data-tip': tooltipText
};
let className = 'compass-sidebar-button-create-database';
if (!this.state.isWritable) {
className += ' compass-sidebar-button-is-disabled';
}
return (
<div className="compass-sidebar-button-create-database-container" {...tooltipOptions}>
<button
className={className}
title="Create Database"
onClick={this.handleCreateDatabaseClick.bind(this, this.state.isWritable)}
>
<i className="mms-icon-add" />
<text className="plus-button">
Create Database
</text>
</button>
</div>
);
}
return (
<div className="compass-sidebar-button-create-database-container" {...tooltipOptions}>
<button
className={className}
title="Create Database"
onClick={this.handleCreateDatabaseClick.bind(this, this.state.isWritable)}
>
<i className="mms-icon-add" />
<text className="plus-button">
Create Database
</text>
</button>
</div>
);
}

renderSidebarDatabase({index, key, style}) {
Expand Down