skyquake/framework/widgets/operational-status/launchpadOperationalStatus.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React from 'react';
  20 import Loader from 'widgets/loading-indicator/loadingIndicator.jsx';
  21
  22 //Currently displays all buffer state messages. Should consider showing only the n most recent.
  23 //TODO remove loader when current state is running
  24 //TODO need to look at refactoring this
  25 class ThrottledMessage extends React.Component {
  26
  27   constructor(props) {
  28     super(props);
  29     let self = this;
  30     this.displayBuffer = [];
  31     this.bufferInterval;
  32     this.last_id = null;
  33     this.state = {};
  34     this.state.loading = props.loading;
  35     this.state.buffer = {};
  36     this.state.displayMessage = 'Loading...'
  37   }
  38
  39   componentWillReceiveProps(nextProps) {
  40     let buffer = nextProps.buffer;
  41     if(buffer.length) {
  42       this.buildBufferObject(nextProps);
  43       this.bufferIt(this.props);
  44     }
  45   }
  46
  47   componentDidMount() {
  48     if(this.props.buffer.length) {
  49       let buffer = this.props.buffer;
  50       this.buildBufferObject(this.props);
  51       this.bufferIt(this.props);
  52     }
  53   }
  54   componentWillUnmount() {
  55     clearInterval(this.bufferInterval);
  56   }
  57   buildBufferObject(props) {
  58     let self = this;
  59     let buffer = self.state.buffer;
  60     this.last_id = props.buffer[props.buffer.length -1].id;
  61     props.buffer.map(function(item) {
  62       if(!buffer[item.id]) {
  63         buffer[item.id] = {
  64           displayed: false,
  65           data: item
  66         }
  67         self.displayBuffer.push(buffer[item.id]);
  68       }
  69     });
  70   }
  71
  72   bufferIt(props) {
  73     let self = this
  74     clearInterval(self.bufferInterval);
  75     self.bufferInterval = setInterval(function() {
  76       let currentStatus = self.props.currentStatus;
  77       let failed = currentStatus == 'failed';
  78       for (let i = 0; i < self.displayBuffer.length; i++) {
  79         if(!self.displayBuffer[i].displayed) {
  80           self.displayBuffer[i].displayed = true;
  81           let displaymsg;
  82           if(failed) {
  83             displaymsg = self.displayBuffer[self.displayBuffer.length-1].data.description;
  84             clearInterval(self.bufferInterval);
  85                 self.props.onEnd(failed);
  86           } else {
  87             displaymsg = self.displayBuffer[i].data.description;
  88           }
  89           self.setState({
  90               displayMessage: displaymsg
  91           });
  92           break;
  93         }
  94       }
  95
  96       if((currentStatus == 'running' || currentStatus == 'started' || currentStatus == 'stopped' || failed) && self.displayBuffer[self.displayBuffer.length - 1].displayed ) {
  97                 clearInterval(self.bufferInterval);
  98                 self.props.onEnd(failed);
  99         }
 100     }, 600)
 101   }
 102   render() {
 103     if(!this.props.hasFailed) {
 104       return (<span className='throttledMessageText' style={{margin:'1rem'}}>{this.state.displayMessage}</span>)
 105     } else {
 106       return (<span> </span>)
 107     }
 108   }
 109 }
 110
 111 ThrottledMessage.defaultProps = {
 112   buffer: []
 113 }
 114
 115 export default class operationalStatus extends React.Component {
 116   constructor(props) {
 117     super(props);
 118     this.state = {};
 119     this.state.message = 'Loading...';
 120     this.state.messageHistory = {};
 121   }
 122   componentWillReceiveProps(nextProps) {
 123
 124   }
 125   finishedMessages(){
 126     this.setState({
 127       loading: false
 128     })
 129   }
 130   statusMessage(currentStatus, currentStatusDetails) {
 131     var message = currentStatus;
 132     if (currentStatusDetails) {
 133        message += ' - ' + currentStatusDetails;
 134     }
 135     return message;
 136   }
 137   render() {
 138     let html;
 139     let isDisplayed = this.props.display;
 140     let isFailed = (this.props.currentStatus == 'failed') || false;
 141     let title = (!this.props.loading || isFailed) ? <h2>History</h2> : '';
 142     let status = this.props.status.map(function(status, index) {
 143       return (
 144         <li key={index}>
 145           {status.description}
 146           {status.details ? (
 147             <ul>
 148               <li>{status.details}
 149               </li>
 150             </ul>) : null}
 151         </li>
 152       )
 153     }).reverse();
 154     if(this.props.loading) {
 155       if (!isFailed) {
 156         isDisplayed = true;
 157         //If there is no collection of status event message, just display currentStatus
 158         if(status.length) {
 159               html = (
 160                       <div className={this.props.className + '_loading'}>
 161                         <Loader show={!isFailed}/>
 162                         <ThrottledMessage currentStatus={this.props.currentStatus} buffer={this.props.status} onEnd={this.props.doneLoading}/>
 163                       </div>
 164               )
 165         } else {
 166           html = (
 167                       <div className={this.props.className + '_loading'}>
 168                         <Loader show={!isFailed}/>
 169                         {this.statusMessage(this.props.currentStatus,this.props.currentStatusDetails)}
 170                       </div>
 171               )
 172         }
 173       } else {
 174           isDisplayed = true;
 175               html = (
 176
 177                         <ul>
 178                         <ThrottledMessage currentStatus={this.props.currentStatus} buffer={this.props.status} onEnd={this.props.doneLoading} hasFailed={isFailed}/>
 179                           {status}
 180                         </ul>
 181               )
 182       }
 183     } else {
 184       html = (
 185           <ul>
 186             {status}
 187           </ul>
 188       )
 189     }
 190     return (<div className={this.props.className + (isDisplayed ? '_open':'_close')}>{title} {html}</div>);
 191   }
 192 }
 193
 194 operationalStatus.defaultProps = {
 195   status: [],
 196   loading: true,
 197   display: false
 198 }
 199
 200
 201