Skip to content

Commit 0d7ad6c

Browse files
durranimlucas
durran
authored and
imlucas
committed
COMPASS-204: Drop Collection (#561)
1 parent da4053f commit 0d7ad6c

File tree

5 files changed

+208
-14
lines changed

5 files changed

+208
-14
lines changed

‎src/internal-packages/database/lib/components/collections-table.jsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@ const React = require('react');
22
const app = require('ampersand-app');
33
const CollectionsActions = require('../actions/collections-actions');
44
const CreateCollectionDialog = require('./create-collection-dialog');
5+
const DropCollectionDialog = require('./drop-collection-dialog');
56
const TextButton = require('hadron-app-registry').TextButton;
67
const numeral = require('numeral');
78

89
const _ = require('lodash');
910

10-
// const debug = require('debug')('mongodb-compass:server-stats:databases');
11-
1211
class CollectionsTable extends React.Component {
1312

1413
constructor(props) {
@@ -20,25 +19,15 @@ class CollectionsTable extends React.Component {
2019
CollectionsActions.sortCollections(column, order);
2120
}
2221

23-
onRowDeleteButtonClicked(/* collName */) {
24-
// CollectionsActions.deleteCollection(collName);
22+
onRowDeleteButtonClicked(index, collection) {
23+
CollectionsActions.openDropCollectionDialog(collection);
2524
}
2625

2726
onCreateCollectionButtonClicked() {
2827
CollectionsActions.openCreateCollectionDialog();
2928
}
3029

3130
render() {
32-
// convert some of the values to human-readable units (MB, GB, ...)
33-
// we do this here so that sorting is not affected in the store
34-
//
35-
// 'Collection Name',
36-
// 'Num. Documents',
37-
// 'Avg. Document Size',
38-
// 'Total Document Size',
39-
// 'Num. Indexes',
40-
// 'Total Index Size'
41-
4231
const rows = _.map(this.props.collections, (coll) => {
4332
return _.assign({}, coll, {
4433
'Documents': numeral(coll.Documents).format('0,0'),
@@ -64,11 +53,13 @@ class CollectionsTable extends React.Component {
6453
sortable
6554
sortOrder={this.props.sortOrder}
6655
sortColumn={this.props.sortColumn}
56+
valueIndex={0}
6757
removable
6858
onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
6959
onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
7060
/>
7161
<CreateCollectionDialog />
62+
<DropCollectionDialog />
7263
</div>
7364
);
7465
}

‎src/internal-packages/database/lib/components/drop-collection-dialog.jsx‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
const app = require('ampersand-app');
2+
const React = require('react');
3+
const Modal = require('react-bootstrap').Modal;
4+
const NamespaceStore = require('hadron-reflux-store').NamespaceStore;
5+
const toNS = require('mongodb-ns');
6+
const TextButton = require('hadron-app-registry').TextButton;
7+
const Actions = require('../actions/collections-actions');
8+
const DropCollectionStore = require('../stores/drop-collection-store');
9+
10+
/**
11+
* The dialog to drop a database.
12+
*/
13+
class DropCollectionDialog extends React.Component {
14+
15+
/**
16+
* The component constructor.
17+
*
18+
* @param {Object} props - The properties.
19+
*/
20+
constructor(props) {
21+
super(props);
22+
this.state = { name: '', confirmName: '' };
23+
this.ModalStatusMessage = app.appRegistry.getComponent('App.ModalStatusMessage');
24+
}
25+
26+
/**
27+
* Subscribe to the open dialog store.
28+
*/
29+
componentWillMount() {
30+
this.unsubscribeOpen = Actions.openDropCollectionDialog.listen(this.onOpenDialog.bind(this));
31+
this.unsubscribeDrop = DropCollectionStore.listen(this.onCollectionDropped.bind(this));
32+
}
33+
34+
/**
35+
* Unsubscribe from the store.
36+
*/
37+
componentWillUnmount() {
38+
this.unsubscribeOpen();
39+
this.unsubscribeDrop();
40+
}
41+
42+
/**
43+
* When the open dialog action is fired.
44+
*
45+
* @param {String} name - The name of the database to drop.
46+
*/
47+
onOpenDialog(name) {
48+
this.setState({
49+
open: true,
50+
name: name,
51+
confirmName: '',
52+
databaseName: toNS(NamespaceStore.ns).database
53+
});
54+
}
55+
56+
/**
57+
* When the cancel button is clicked.
58+
*/
59+
onCancelButtonClicked() {
60+
this.setState({ open: false });
61+
}
62+
63+
/**
64+
* Initiate the attempt to drop a database.
65+
*/
66+
onDropCollectionButtonClicked() {
67+
this.setState({ inProgress: true, error: false, errorMessage: '' });
68+
Actions.dropCollection(this.state.databaseName, this.state.name);
69+
}
70+
71+
/**
72+
* Handle finish database dropping.
73+
*
74+
* @param {Error} error - The error, if any.
75+
*/
76+
onCollectionDropped(error) {
77+
if (error) {
78+
this.setState({ inProgress: false, error: true, errorMessage: error.message });
79+
} else {
80+
this.setState({ inProgress: false, error: false, errorMessage: '', open: false });
81+
}
82+
}
83+
84+
/**
85+
* Fires when the confirmation name is changed.
86+
*
87+
* @param {Event} evt - The change event.
88+
*/
89+
onConfirmNameChanged(evt) {
90+
this.setState({ confirmName: evt.target.value });
91+
}
92+
93+
/**
94+
* Render the modal dialog.
95+
*
96+
* @returns {React.Component} The react component.
97+
*/
98+
render() {
99+
return (
100+
<Modal show={this.state.open} backdrop="static" keyboard={false} dialogClassName="drop-collection-dialog">
101+
<Modal.Header>
102+
<Modal.Title>Drop Collection</Modal.Title>
103+
</Modal.Header>
104+
105+
<Modal.Body>
106+
<div>
107+
<p className="drop-confirm-message">
108+
<i className="drop-confirm-icon fa fa-exclamation-triangle" aria-hidden="true"></i>
109+
Type the collection name
110+
<strong> {this.state.name} </strong>
111+
to drop
112+
</p>
113+
</div>
114+
<form>
115+
<div className="form-group">
116+
<input
117+
type="text"
118+
className="drop-confirm-input form-control"
119+
value={this.state.confirmName}
120+
onChange={this.onConfirmNameChanged.bind(this)} />
121+
</div>
122+
{this.state.error ?
123+
<this.ModalStatusMessage icon="times" message={this.state.errorMessage} type="error" />
124+
: null}
125+
{this.state.inProgress ?
126+
<this.ModalStatusMessage icon="align-center" message={'Drop in Progress'} type="in-progress" />
127+
: null}
128+
</form>
129+
</Modal.Body>
130+
131+
<Modal.Footer>
132+
<TextButton
133+
className="btn btn-default"
134+
text="Cancel"
135+
clickHandler={this.onCancelButtonClicked.bind(this)} />
136+
<button
137+
className="btn btn-primary"
138+
disabled={this.state.confirmName !== this.state.name}
139+
onClick={this.onDropCollectionButtonClicked.bind(this)}>
140+
Drop Collection
141+
</button>
142+
</Modal.Footer>
143+
</Modal>
144+
);
145+
}
146+
}
147+
148+
DropCollectionDialog.displayName = 'DropCollectionDialog';
149+
150+
module.exports = DropCollectionDialog;

‎src/internal-packages/database/lib/stores/drop-collection-store.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const Reflux = require('reflux');
2+
const app = require('ampersand-app');
3+
const Actions = require('../actions/collections-actions');
4+
5+
/**
6+
* The reflux store for dropping collections.
7+
*/
8+
const DropCollectionStore = Reflux.createStore({
9+
10+
/**
11+
* Initialize the store.
12+
*/
13+
init: function() {
14+
this.refreshInstance = app.appRegistry.getAction('App.InstanceActions').refreshInstance;
15+
this.listenTo(Actions.dropCollection, this.dropCollection);
16+
},
17+
18+
/**
19+
* Drop the collection.
20+
*
21+
* @param {String} dbName - The dbName.
22+
* @param {String} collection - The collection name.
23+
*/
24+
dropCollection(dbName, collection) {
25+
try {
26+
app.dataService.dropCollection(`${dbName}.${collection}`, this.handleResult.bind(this));
27+
} catch (e) {
28+
this.handleResult(e, null);
29+
}
30+
},
31+
32+
/**
33+
* Handle the drop collection result.
34+
*
35+
* @param {Error} error - The error.
36+
* @param {Object} result - The result.
37+
*/
38+
handleResult(error, result) {
39+
if (error) {
40+
this.trigger(error, result);
41+
} else {
42+
this.refreshInstance();
43+
this.trigger(error, result);
44+
}
45+
}
46+
});
47+
48+
module.exports = DropCollectionStore;

‎src/internal-packages/database/styles/drop-collection-dialog.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.drop-collection-dialog {
2+
width: 500px;
3+
}

‎src/internal-packages/database/styles/index.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import './drop-collection-dialog.less';
2+
13
.collections-table {
24
font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
35
font-weight: 500;

0 commit comments

Comments
 (0)