Showing warning and disabling edit button for output if plugin is mis…

…sing.

Also adding spinner in output list during loading.

Fixes #1185

javascript/src/components/outputs/EditOutputButton.jsx

@@ -34,7 +34,7 @@ var EditOutputButton = React.createClass({
         );
         return (
             <span>
-                <Button bsStyle="info" onClick={this.handleClick.bind(null, output)}>
+                <Button disabled={this.props.disabled} bsStyle="info" onClick={this.handleClick.bind(null, output)}>
                     Edit
                 </Button>
                 {configurationForm}

javascript/src/components/outputs/Output.jsx

@@ -7,6 +7,7 @@ var Button = require('react-bootstrap').Button;
 var PermissionsMixin = require('../../util/PermissionsMixin');
 var Col = require('react-bootstrap').Col;
 var Row = require('react-bootstrap').Row;
+var Alert = require('react-bootstrap').Alert;
 
 var Output = React.createClass({
     mixins: [PermissionsMixin],
@@ -24,16 +25,23 @@ var Output = React.createClass({
             </Button>
         );
     },
+    _typeNotAvailable() {
+        return (this.props.types[this.props.output.type] == undefined);
+    },
     render() {
         var output = this.props.output;
         var deleteButton = (this.props.streamId && this.isPermitted(this.props.permissions, ["stream_outputs:delete"]) ? this._deleteFromStreamButton(output) : null);
 
         var editButton = (this.isPermitted(this.props.permissions, ["outputs:edit"]) ?
-            <EditOutputButton output={output} onUpdate={this.props.onUpdate} getTypeDefinition={this.props.getTypeDefinition} /> : null);
+            <EditOutputButton disabled={this._typeNotAvailable()} output={output} onUpdate={this.props.onUpdate}
+                              getTypeDefinition={this.props.getTypeDefinition} /> : null);
         var terminateButton = (this.isPermitted(this.props.permissions, ["outputs:terminate"]) ? this._deleteGloballyButton(output) : null);
 
         var contentPack = (output.content_pack ? (<span title="Created from content pack"><i className="fa fa-gift"></i></span>) : null);
 
+        var alert = (this._typeNotAvailable() ? <Alert bsStyle="danger">
+                The plugin required for this output is not loaded. Editing it is not possible. Please load the plugin or delete the output.
+            </Alert> : null);
         return (
             <div key={output.id} className="row content node-row">
                 <Col md={12}>
@@ -57,6 +65,7 @@ var Output = React.createClass({
                     </Row>
                     <Row>
                         <Col md={8}>
+                            {alert}
                             <ConfigurationWell key={"configuration-well-output-" + output.id} id={output.id} configuration={output.configuration} />
                         </Col>
                     </Row>

javascript/src/components/outputs/OutputList.jsx

@@ -14,7 +14,7 @@ var OutputList = React.createClass({
     _formatOutput(output) {
         return (<Output key={output.id} output={output} streamId={this.props.streamId} permissions={this.props.permissions}
                         removeOutputFromStream={this.props.onRemove} removeOutputGlobally={this.props.onTerminate}
-                        onUpdate={this.props.onUpdate} getTypeDefinition={this.props.getTypeDefinition} />);
+                        onUpdate={this.props.onUpdate} getTypeDefinition={this.props.getTypeDefinition} types={this.props.types} />);
     },
     render() {
         if (this.props.outputs) {

javascript/src/components/outputs/OutputsComponent.jsx

@@ -8,6 +8,9 @@ var OutputsStore = require('../../stores/outputs/OutputsStore');
 var StreamsStore = require('../../stores/streams/StreamsStore');
 var UserNotification = require("../../util/UserNotification");
 var PermissionsMixin = require('../../util/PermissionsMixin');
+var Spinner = require('../common/Spinner');
+var Row = require('react-bootstrap').Row;
+var Col = require('react-bootstrap').Col;
 
 var OutputComponent = React.createClass({
     mixins: [PermissionsMixin],
@@ -96,25 +99,34 @@ var OutputComponent = React.createClass({
         });
     },
     render() {
-        var permissions = this.props.permissions;
-        var streamId = this.props.streamId;
-        var createOutputDropdown = (this.isPermitted(permissions, ["outputs:create"]) ?
-            <CreateOutputDropdown types={this.state.types} onSubmit={this._handleCreateOutput} getTypeDefinition={OutputsStore.loadAvailable} streamId={streamId}/> : "");
-        var assignOutputDropdown = (streamId ?
-            <AssignOutputDropdown ref="assignOutputDropdown" streamId={streamId} outputs={this.state.assignableOutputs} onSubmit={this._handleAssignOutput}/> : "");
-        return (<div className="outputs">
-                    <div className="row content">
-                        <div className="col-md-4">
-                            {createOutputDropdown}
-                        </div>
-                        <div className="col-md-8">
-                            {assignOutputDropdown}
-                        </div>
-                    </div>
+        if (this.state.outputs && this.state.types) {
+            var permissions = this.props.permissions;
+            var streamId = this.props.streamId;
+            var createOutputDropdown = (this.isPermitted(permissions, ["outputs:create"]) ?
+                <CreateOutputDropdown types={this.state.types} onSubmit={this._handleCreateOutput}
+                                      getTypeDefinition={OutputsStore.loadAvailable} streamId={streamId}/> : "");
+            var assignOutputDropdown = (streamId ?
+                <AssignOutputDropdown ref="assignOutputDropdown" streamId={streamId}
+                                      outputs={this.state.assignableOutputs}
+                                      onSubmit={this._handleAssignOutput}/> : "");
+            return (<div className="outputs">
+                <Row className="content">
+                    <Col md={4}>
+                        {createOutputDropdown}
+                    </Col>
+                    <Col md={8}>
+                        {assignOutputDropdown}
+                    </Col>
+                </Row>
 
-                    <OutputList ref="outputList" streamId={streamId} outputs={this.state.outputs} permissions={permissions} getTypeDefinition={OutputsStore.loadAvailable}
-                        onRemove={this._removeOutputFromStream} onTerminate={this._removeOutputGlobally} onUpdate={this._handleOutputUpdate}/>
-                </div>);
+                <OutputList ref="outputList" streamId={streamId} outputs={this.state.outputs} permissions={permissions}
+                            getTypeDefinition={OutputsStore.loadAvailable} types={this.state.types}
+                            onRemove={this._removeOutputFromStream} onTerminate={this._removeOutputGlobally}
+                            onUpdate={this._handleOutputUpdate}/>
+            </div>);
+        } else {
+            return <Spinner />;
+        }
     }
 });
 module.exports = OutputComponent;