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 fossInfoComponent = (
  66       <div className="table-container">
  67         <h2> FOSS Info </h2>
  68         <table>
  69           <thead>
  70             <tr>
  71               <th>
  72                 <a target="_blank" href='https://open.riftio.com/open-source-software-usage/'>
  73                   Click here for FOSS Info (requires Internet connection)
  74                 </a>
  75               </th>
  76             </tr>
  77           </thead>
  78         </table>
  79       </div>
  80     );
  81
  82     var uptimeComponent = (
  83       <div className="table-container">
  84                   <h2> Uptime Info </h2>
  85                   <table>
  86                     <thead>
  87                       <tr>
  88                         <th>
  89                           Uptime
  90                         </th>
  91                         <th>
  92                           <UpTime initialTime={uptime} run={true} />
  93                         </th>
  94                       </tr>
  95                     </thead>
  96                   </table>
  97                 </div>
  98     );
  99
 100     var vcs_info = [];
 101
 102     for (let i = 0; this.state && this.state.list && i < this.state.list.vcs.components.component_info.length; i++) {
 103       var node = this.state.list.vcs.components.component_info[i];
 104       vcs_info.push(
 105           <tr key={i}>
 106             <td>
 107               {node.component_name}
 108             </td>
 109             <td>
 110               {node.component_type}
 111             </td>
 112             <td>
 113               {node.state}
 114             </td>
 115           </tr>
 116
 117         )
 118     }
 119
 120     if (this.state != null) {
 121       var html = (
 122               <div className="table-container-wrapper">
 123                 {fossInfoComponent}
 124                 {uptimeComponent}
 125                 <div className="table-container">
 126                   <h2> Version Info </h2>
 127                   <table>
 128                     <thead>
 129                       <tr>
 130                         <th>
 131                           Build SHA
 132                         </th>
 133                         <th>
 134                           Version
 135                         </th>
 136                         <th>
 137                           Build Date
 138                         </th>
 139                       </tr>
 140                     </thead>
 141                     <tbody>
 142                       <tr>
 143                         <td>
 144                           {this.state.list ? this.state.list.version.build_sha : null}
 145                         </td>
 146                         <td>
 147                           {this.state.list ? this.state.list.version.version : null}
 148                         </td>
 149                         <td>
 150                           {this.state.list ? this.state.list.version.build_date : null}
 151                         </td>
 152                       </tr>
 153                     </tbody>
 154                   </table>
 155                 </div>
 156                 <div className="table-container">
 157                   <h2> Component Info </h2>
 158                   <table>
 159                     <thead>
 160                       <tr>
 161                         <th>
 162                           Component Name
 163                         </th>
 164                         <th>
 165                           Component Type
 166                         </th>
 167                         <th>
 168                           State
 169                         </th>
 170                       </tr>
 171                     </thead>
 172                     <tbody>
 173                       {vcs_info}
 174                     </tbody>
 175                   </table>
 176                 </div>
 177               </div>
 178               );
 179     } else {
 180       html = ''
 181     }
 182     return (
 183             <div className="about-container">
 184               {html}
 185             </div>
 186             )
 187   }
 188 }
 189 export default About;