skyquake/plugins/launchpad/src/recordViewer/recordDetails.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 LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx';
  21 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
  22 import Prism from 'prismjs';
  23 import 'prismjs/themes/prism.css';
  24 export default class RecordDetails extends React.Component{
  25   constructor(props) {
  26     super(props)
  27   }
  28   render(){
  29     let html;
  30     // Prism can't handle escaped \n and other characters
  31     let text = JSON.stringify(this.props.data, undefined, 2)
  32                 .replace(/\r\n/g, '\n')
  33                 .replace(/\\\\n/g, "\n")
  34                 .replace(/\\\\'/g, "\'")
  35                 .replace(/\\\\"/g, '\"')
  36                 .replace(/\\\\&/g, "\&")
  37                 .replace(/\\\\r/g, "\r")
  38                 .replace(/\\\\t/g, "\t")
  39                 .replace(/\\\\b/g, "\b")
  40                 .replace(/\\\\f/g, "\f");
  41     // html = this.props.isLoading ? <LoadingIndicator size={10} show={true} /> : <pre className="json">{JSON.stringify(this.props.data, undefined, 2)}</pre>;
  42     html = this.props.isLoading ? <LoadingIndicator size={10} show={true} /> : Prism.highlight(text, Prism.languages.javascript, 'javascript');
  43     return (
  44             <DashboardCard showHeader={true} title="Record Details" className={this.props.isLoading ? 'loading' : 'recordDetails'}>
  45               <pre className="language-js">
  46               <code dangerouslySetInnerHTML={{__html: html}} />
  47               </pre>
  48             </DashboardCard>
  49             );
  50   }
  51 }
  52 RecordDetails.defaultProps = {
  53   data: {}
  54 }