import React from 'react'; import ReactJson from 'react-json-view'; import { Button } from 'react-bootstrap'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import { Link } from 'react-router-dom'; import 'react-tabs/style/react-tabs.css'; import './NodeDetailCard.scss'; export class NodeDetailCard extends React.Component { constructor(props) { super(props); this.state = { nodeData: { kind: '', properties: { name: '' } }, hidden: true, displayProperties: [], stat: {}, floatRight: false, timestamp: null, rca: false }; } componentDidUpdate(){ this.setState({ nodeData: this.props.nodeData, displayProperties: this.props.nodeData.properties, hidden: this.props.hidden, stat: this.props.stat, floatRight: this.props.floatRight, timestamp: this.props.timestamp, rca: this.props.rca }); } shouldComponentUpdate(nextProps) { return this.state.hidden !== nextProps.hidden || this.state.nodeData !== nextProps.nodeData || this.state.stat !== nextProps.stat || this.state.timestamp !== nextProps.timestamp; } show() { this.setState({ hidden: false }); } render() { return ( <div className={`card node-info-card ${this.state.hidden ? 'hidden' : ''} pt-0 ${this.state.floatRight ? "right" : ''}`}> <button type="button" className="close mt-1 mr-2 mb-0" aria-label="Close" onClick={this.props.hideDetailCard}> <span aria-hidden="true">×</span> </button> <div className="card-body mt-0 pt-0"> <h4 className="card-title">{this.state.nodeData.properties.name}</h4> <h5 className="card-subtitle">{this.state.nodeData.kind.replace('_', ' ')}</h5> { this.state.rca === false ? <Tabs> <TabList> <Tab><i class="fa fa-info-circle" aria-hidden="true"></i>Details</Tab> <Tab><i class="fa fa-medkit" aria-hidden="true"></i>Analysis</Tab> </TabList> <TabPanel> <div className="card-text node-info-text"> <ReactJson src={this.state.displayProperties} name={null} collapsed={2} displayDataTypes={false}/> </div> </TabPanel> <TabPanel className="analysis"> { this.state.nodeData.kind === 'alert' ? <span> <p> Perform Root Cause Analysis </p> <Link to={`/rca?source=${this.state.nodeData.id}&time_point=${this.state.timestamp}`} > <Button className="rca" size="sm" variant="outline-warning"> Analyze </Button> </Link> </span> : <p>Root Cause Analysis not available for {this.state.nodeData.kind} objects</p> } </TabPanel> </Tabs> : <div className="card-text node-info-text"> <ReactJson src={this.state.displayProperties} name={null} collapsed={2} displayDataTypes={false}/> </div> } </div> </div> ); } }