From bf3d5b32684f745150573003f95d07bd68b48119 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Tue, 3 Feb 2015 13:38:31 -0800 Subject: [PATCH] Refactored some basic elements. --- src/ContainerDetails.react.js | 140 +++++----------------------- src/ContainerDetailsHeader.react.js | 36 +++++++ src/ContainerHome.react.js | 30 ++++++ src/ContainerListItem.react.js | 16 +++- 4 files changed, 106 insertions(+), 116 deletions(-) create mode 100644 src/ContainerDetailsHeader.react.js create mode 100644 src/ContainerHome.react.js diff --git a/src/ContainerDetails.react.js b/src/ContainerDetails.react.js index 63b5d0f3ed..c8a680de2a 100644 --- a/src/ContainerDetails.react.js +++ b/src/ContainerDetails.react.js @@ -12,11 +12,14 @@ var ContainerUtil = require('./ContainerUtil'); var docker = require('./Docker'); var boot2docker = require('./Boot2Docker'); var ProgressBar = require('react-bootstrap/ProgressBar'); -var Popover = require('react-bootstrap/Popover'); +var ContainerDetailsHeader = require('./ContainerDetailsHeader.react'); +var ContainerHome = require('./ContainerHome.react'); + var ContainerDetails = React.createClass({ mixins: [Router.State, Router.Navigation], _oldHeight: 0, + PAGE_HOME: 'home', PAGE_LOGS: 'logs', PAGE_SETTINGS: 'settings', PAGE_PORTS: 'ports', @@ -24,14 +27,12 @@ var ContainerDetails = React.createClass({ getInitialState: function () { return { logs: [], - page: this.PAGE_LOGS, + page: this.PAGE_HOME, env: {}, pendingEnv: {}, ports: {}, defaultPort: null, - volumes: {}, - popoverVolumeOpen: false, - popoverViewOpen: false, + volumes: {} }; }, componentWillReceiveProps: function () { @@ -41,22 +42,6 @@ var ContainerDetails = React.createClass({ this.init(); ContainerStore.on(ContainerStore.SERVER_PROGRESS_EVENT, this.updateProgress); ContainerStore.on(ContainerStore.SERVER_LOGS_EVENT, this.updateLogs); - - // Make clicking anywhere close popovers - $('body').on('click', function (e) { - var popoverViewIsTarget = $('.popover-view').is(e.target) || $('.popover-view').has(e.target).length !== 0 || $('.dropdown-view').is(e.target) || $('.dropdown-view').has(e.target).length !== 0; - var popoverVolumeIsTarget = $('.popover-volume').is(e.target) || $('.popover-volume').has(e.target).length !== 0 || $('.dropdown-volume').is(e.target) || $('.dropdown-volume').has(e.target).length !== 0; - var state = {}; - if (!popoverViewIsTarget) { - state.popoverViewOpen = false; - } - if (!popoverVolumeIsTarget) { - state.popoverVolumeOpen = false; - } - if (this.state.popoverViewOpen || this.state.popoverVolumeOpen) { - this.setState(state); - } - }.bind(this)); }, componentWillUnmount: function () { ContainerStore.removeListener(ContainerStore.SERVER_PROGRESS_EVENT, this.updateProgress); @@ -72,23 +57,6 @@ var ContainerDetails = React.createClass({ } this._oldHeight = parent[0].scrollHeight - parent.height(); } - - var $viewDropdown = $(this.getDOMNode()).find('.dropdown-view'); - var $volumeDropdown = $(this.getDOMNode()).find('.dropdown-volume'); - var $viewPopover = $(this.getDOMNode()).find('.popover-view'); - var $volumePopover = $(this.getDOMNode()).find('.popover-volume'); - - /*if ($viewDropdown.offset() && $volumeDropdown.offset()) { - $viewPopover.offset({ - top: $viewDropdown.offset().top + 32, - left: $viewDropdown.offset().left - ($viewPopover.outerWidth() / 2) + 14 - }); - - $volumePopover.offset({ - top: $volumeDropdown.offset().top + 32, - left: $volumeDropdown.offset().left + $volumeDropdown.outerWidth() - $volumePopover.outerWidth() / 2 - 20 - }); - }*/ }, init: function () { var container = ContainerStore.container(this.getParams().name); @@ -126,6 +94,11 @@ var ContainerDetails = React.createClass({ }); } }, + showHome: function () { + this.setState({ + page: this.PAGE_HOME + }); + }, showLogs: function () { this.setState({ page: this.PAGE_LOGS @@ -161,16 +134,6 @@ var ContainerDetails = React.createClass({ if (err) { throw err; } }); }, - handleViewDropdown: function(e) { - this.setState({ - popoverViewOpen: !this.state.popoverViewOpen - }); - }, - handleVolumeDropdown: function(e) { - this.setState({ - popoverVolumeOpen: !this.state.popoverVolumeOpen - }); - }, handleRestart: function () { ContainerStore.restart(this.props.container.Name, function (err) { console.log(err); @@ -273,19 +236,6 @@ var ContainerDetails = React.createClass({ return false; } - var state; - if (this.props.container.State.Running) { - state = RUNNING; - } else if (this.props.container.State.Restarting) { - state = RESTARTING; - } else if (this.props.container.State.Paused) { - state = PAUSED; - } else if (this.props.container.State.Downloading) { - state = DOWNLOADING; - } else { - state = STOPPED; - } - var button; if (this.state.progress === 1) { button = View; @@ -354,31 +304,6 @@ var ContainerDetails = React.createClass({ disabled: this.props.container.State.Downloading }); - var viewPopoverClasses = React.addons.classSet({ - popover: true, - hidden: false - }); - - var popoverVolumeClasses = React.addons.classSet({ - 'popover-volume': true, - hidden: !this.state.popoverVolumeOpen - }); - - var popoverViewClasses = React.addons.classSet({ - 'popover-view': true, - hidden: !this.state.popoverViewOpen - }); - - var dropdownClasses = { - btn: true, - 'btn-action': true, - 'with-icon': true, - 'dropdown-toggle': true, - disabled: !this.props.container.State.Running - }; - var dropdownViewButtonClass = React.addons.classSet(assign({'dropdown-view': true}, dropdownClasses)); - var dropdownVolumeButtonClass = React.addons.classSet(assign({'dropdown-volume': true}, dropdownClasses)); - var ports = _.map(_.pairs(self.state.ports), function (pair, index, list) { var key = pair[0]; var val = pair[1]; @@ -410,7 +335,11 @@ var ContainerDetails = React.createClass({ ); } else { - if (this.state.page === this.PAGE_LOGS) { + if (this.state.page === this.PAGE_HOME) { + body = ( + + ); + } else if (this.state.page === this.PAGE_LOGS) { body = (
@@ -449,12 +378,6 @@ var ContainerDetails = React.createClass({
); } else { - var preview; - if (this.state.defaultPort) { - preview = ( - - ); - } body = (
@@ -492,6 +415,12 @@ var ContainerDetails = React.createClass({ } } + var tabHomeClasses = React.addons.classSet({ + 'tab': true, + 'active': this.state.page === this.PAGE_HOME, + disabled: this.props.container.State.Downloading + }); + var tabLogsClasses = React.addons.classSet({ 'tab': true, 'active': this.state.page === this.PAGE_LOGS, @@ -518,14 +447,12 @@ var ContainerDetails = React.createClass({ return (
-
-

{this.props.container.Name}

{state} -
+
- View + Run
@@ -537,29 +464,12 @@ var ContainerDetails = React.createClass({
+ Home Logs Settings
{body} - -
-
-
DOCKER PORT
-
MAC PORT
-
- {ports} -
- - -
-
-
DOCKER FOLDER
-
MAC FOLDER
-
- {volumes} -
-
); } diff --git a/src/ContainerDetailsHeader.react.js b/src/ContainerDetailsHeader.react.js new file mode 100644 index 0000000000..289de0819e --- /dev/null +++ b/src/ContainerDetailsHeader.react.js @@ -0,0 +1,36 @@ +var async = require('async'); +var _ = require('underscore'); +var $ = require('jquery'); +var React = require('react/addons'); +var Router = require('react-router'); +var Modal = require('react-bootstrap/Modal'); +var RetinaImage = require('react-retina-image'); +var ModalTrigger = require('react-bootstrap/ModalTrigger'); +var ContainerModal = require('./ContainerModal.react'); +var ContainerListItem = require('./ContainerListItem.react'); +var Header = require('./Header.react'); +var docker = require('./Docker'); + +var ContainerDetailsHeader = React.createClass({ + render: function () { + var state; + if (this.props.container.State.Running) { + state = RUNNING; + } else if (this.props.container.State.Restarting) { + state = RESTARTING; + } else if (this.props.container.State.Paused) { + state = PAUSED; + } else if (this.props.container.State.Downloading) { + state = DOWNLOADING; + } else { + state = STOPPED; + } + return ( +
+

{this.props.container.Name}

{state} +
+ ); + } +}); + +module.exports = ContainerDetailsHeader; diff --git a/src/ContainerHome.react.js b/src/ContainerHome.react.js new file mode 100644 index 0000000000..d81fdf6755 --- /dev/null +++ b/src/ContainerHome.react.js @@ -0,0 +1,30 @@ +var async = require('async'); +var _ = require('underscore'); +var $ = require('jquery'); +var React = require('react/addons'); +var Router = require('react-router'); +var Modal = require('react-bootstrap/Modal'); +var RetinaImage = require('react-retina-image'); +var ModalTrigger = require('react-bootstrap/ModalTrigger'); +var ContainerModal = require('./ContainerModal.react'); +var ContainerListItem = require('./ContainerListItem.react'); +var Header = require('./Header.react'); +var docker = require('./Docker'); + +var ContainerHome = React.createClass({ + render: function () { + /*var preview; + if (this.state.defaultPort) { + preview = ( + + ); + }*/ + return ( +
+

HOME

+
+ ); + } +}); + +module.exports = ContainerHome; diff --git a/src/ContainerListItem.react.js b/src/ContainerListItem.react.js index 6ff3251262..4057bb5963 100644 --- a/src/ContainerListItem.react.js +++ b/src/ContainerListItem.react.js @@ -9,6 +9,8 @@ var ModalTrigger = require('react-bootstrap/ModalTrigger'); var ContainerModal = require('./ContainerModal.react'); var Header = require('./Header.react'); var docker = require('./docker'); +var remote = require('remote'); +var dialog = remote.require('dialog'); var ContainerListItem = React.createClass({ componentWillMount: function () { @@ -22,6 +24,18 @@ var ContainerListItem = React.createClass({ var $action = $(this.getDOMNode()).find('.action'); $action.hide(); }, + handleDeleteContainer: function () { + dialog.showMessageBox({ + message: 'Are you sure you want to delete this container?', + buttons: ['Delete', 'Cancel'] + }, function (index) { + if (index === 0) { + ContainerStore.remove(this.props.container.Name, function (err) { + console.error(err); + }); + } + }.bind(this)); + }, render: function () { var self = this; var container = this.props.container; @@ -73,7 +87,7 @@ var ContainerListItem = React.createClass({
- +