skyquake/plugins/about/src/about.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 import React from 'react';
  19 import './about.scss';
  20 import UpTime from 'widgets/uptime/uptime.jsx';
  21 import AppHeader from 'widgets/header/header.jsx';
  22 var aboutActions = require('./aboutActions.js');
  23 var aboutStore = require('./aboutStore.js');
  24 //var MissionControlStore = require('./missionControlStore.js');
  25 class About extends React.Component {
  26   constructor(props) {
  27     super(props)
  28     var self = this;
  29     this.state = aboutStore.getState();
  30     aboutStore.listen(this.listenerUpdate);
  31     aboutStore.get();
  32     aboutStore.createTime();
  33   }
  34   componentWillUnmount() {
  35     aboutStore.listen(this.listenerUpdate);
  36   }
  37   listenerUpdate = (data) => {
  38       if (data.aboutList) {
  39         this.setState({
  40           list:data.aboutList
  41         })
  42       }
  43       if (data.createTime) {
  44         // Required cause backend won't provide a create-time
  45         let createTime = (data.createTime) ? Math.floor((new Date() / 1000)) - parseInt(data.createTime) : null;
  46         this.setState({
  47           createTime: createTime
  48         })
  49       }
  50       if (data.descriptorCount) {
  51         this.setState({
  52           descriptorCount: data.descriptorCount
  53         });
  54       }
  55     }
  56   render() {
  57     let self = this;
  58     let refPage = window.sessionStorage.getItem('refPage') || '{}';
  59     refPage = JSON.parse(refPage);
  60
  61     let mgmtDomainName = window.location.hash.split('/')[2];
  62     // If in the mission control, create an uptime table;
  63     var uptime = this.state.createTime && this.state.createTime;
  64
  65     var uptimeComponent = (
  66       <div className="table-container">
  67                   <h2> Uptime Info </h2>
  68                   <table>
  69                     <thead>
  70                       <tr>
  71                         <th>
  72                           Uptime
  73                         </th>
  74                         <th>
  75                           <UpTime initialTime={uptime} run={true} />
  76                         </th>
  77                       </tr>
  78                     </thead>
  79                   </table>
  80                 </div>
  81     );
  82
  83     var vcs_info = [];
  84
  85     for (let i = 0; this.state && this.state.list && i < this.state.list.vcs.components.component_info.length; i++) {
  86       var node = this.state.list.vcs.components.component_info[i];
  87       vcs_info.push(
  88           <tr key={i}>
  89             <td>
  90               {node.component_name}
  91             </td>
  92             <td>
  93               {node.component_type}
  94             </td>
  95             <td>
  96               {node.state}
  97             </td>
  98           </tr>
  99
 100         )
 101     }
 102
 103     if (this.state != null) {
 104       var html = (
 105               <div className="table-container-wrapper">
 106                 {uptimeComponent}
 107                 <div className="table-container">
 108                   <h2> Version Info </h2>
 109                   <table>
 110                     <thead>
 111                       <tr>
 112                         <th>
 113                           Build SHA
 114                         </th>
 115                         <th>
 116                           Version
 117                         </th>
 118                         <th>
 119                           Build Date
 120                         </th>
 121                       </tr>
 122                     </thead>
 123                     <tbody>
 124                       <tr>
 125                         <td>
 126                           {this.state.list ? this.state.list.version.build_sha : null}
 127                         </td>
 128                         <td>
 129                           {this.state.list ? this.state.list.version.version : null}
 130                         </td>
 131                         <td>
 132                           {this.state.list ? this.state.list.version.build_date : null}
 133                         </td>
 134                       </tr>
 135                     </tbody>
 136                   </table>
 137                 </div>
 138                 <div className="table-container">
 139                   <h2> Component Info </h2>
 140                   <table>
 141                     <thead>
 142                       <tr>
 143                         <th>
 144                           Component Name
 145                         </th>
 146                         <th>
 147                           Component Type
 148                         </th>
 149                         <th>
 150                           State
 151                         </th>
 152                       </tr>
 153                     </thead>
 154                     <tbody>
 155                       {vcs_info}
 156                     </tbody>
 157                   </table>
 158                 </div>
 159               </div>
 160               );
 161     } else {
 162       html = ''
 163     }
 164     return (
 165             <div className="about-container">
 166               {html}
 167             </div>
 168             )
 169   }
 170 }
 171 export default About;