--- /dev/null
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import commonApi from 'utils/CommonAPIService.js';
+import deepDiffMapper from 'utils/DiffUtil.js';
+import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
+import Spinner from 'utils/SpinnerContainer.jsx';
+
+import HistoryGallery from './components/HistoryGallery.jsx';
+import HistoryCard from './components/HistoryCard.jsx';
+import NodeDiffCard from './components/NodeDiffCard.jsx';
+import AnimationControls from './components/AnimationControls.jsx';
+import moment from "moment";
+import Grid from 'react-bootstrap/lib/Grid';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Button from 'react-bootstrap/lib/Button';
+import Modal from 'react-bootstrap/lib/Modal';
+import Pagination from 'react-js-pagination';
+import { HistoryConstants } from './HistoryConstants';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+import ReactBootstrapSlider from 'react-bootstrap-slider';
+
+let INVLIST = GlobalExtConstants.INVLIST;
+/**
+ * This class is used to handle any url interactions for models.
+ * When a user selects a inventory item in browse or special search,
+ * this model class should be used to handle the url + params and query
+ * the proxy server.
+ */
+
+class History extends Component {
+
+ elements = [];
+ pageTitle = '';
+ nodeType = '';
+ nodeResults = '';
+ payload = {start : atob(this.props.match.params.nodeUriEnc)};
+
+ constructor(props) {
+ console.log(props);
+ super(props);
+ this.state = {
+ activePage: 1,
+ totalResults: 0,
+ enableBusyFeedback: true,
+ enableBusyRecentFeedback: true,
+ enableBusyHistoryStateFeedback: true,
+ enableBusyDiffFeedback: true,
+ data: [],
+ nodes: [],
+ nodeCurrentState: null,
+ nodeHistoryState: null,
+ showHistoryModal: false,
+ splitScreenCard: false,
+ entries: [],
+ filteredEntries: [],
+ isLifeCycle: false,
+ isState: false,
+ currentStateHistoryValue: parseInt(this.props.match.params.epochTime),
+ stepEpochStateTime: 1000,
+ maxEpochStartTime: Math.round(new Date().getTime()),
+ minEpochStartTime: parseInt(this.props.match.params.epochTime) - 259200000,
+ nodeDiff: null,
+ showSlider: false,
+ sliderTickArray: null,
+ showTicks: INVLIST.showTicks,
+ selectedHistoryStateFormatted: moment(parseInt(this.props.match.params.epochTime)).format('dddd, MMMM Do, YYYY h:mm:ss A'),
+ nodeDisplay: (this.props.match.params.nodeType).toUpperCase(),// + ' : ' + (atob(this.props.match.params.nodeUriEnc)).split(this.props.match.params.nodeType + '\/').pop(),
+ nodeName: (this.props.match.params.nodeType).toUpperCase(),
+ historyErrMsg: null,
+ changesErrMsg: null,
+ lifecycleErrMsg: null,
+ currentErrMsg: null
+ };
+ console.log('minEpochStateTime: '+this.state.minEpochStateTime);
+ console.log('maxEpochStartTime: '+this.state.maxEpochStartTime);
+ console.log('stepEpochStateTime: '+this.state.stepEpochStateTime);
+ console.log('currentStateHistoryValue: '+this.state.currentStateHistoryValue);
+
+ }
+ resultsMessage = '';
+ componentDidMount = () => {
+ console.log('[History.jsx] componentDidMount props available are', JSON.stringify(this.props));
+ if(INVLIST.isHistoryEnabled){
+ this.beforefetchInventoryData();
+ }
+ };
+ componentWillUnmount = () => {
+ console.log('[History.jsx] componentWillUnMount');
+ }
+ getUnixSecondsFromMs = (ms) => {
+ return ms/1000;
+ }
+ beforefetchInventoryData = (param) => {
+ if (param) {
+ this.setState(
+ { enableBusyFeedback: true, activePage: 1, totalResults: 0},
+ function () { this.fetchInventoryData(param); }.bind(this)
+ );
+ } else {
+ this.fetchInventoryData();
+ }
+ };
+ initState = () =>{
+ this.setState({
+ activePage: 1,
+ totalResults: 0,
+ enableBusyFeedback: true,
+ enableBusyRecentFeedback: true,
+ enableBusyHistoryStateFeedback: true,
+ enableBusyDiffFeedback: true,
+ data: [],
+ nodes: [],
+ nodeCurrentState: null,
+ nodeHistoryState: null,
+ showHistoryModal: false,
+ splitScreenCard: false,
+ entries: [],
+ filteredEntries: [],
+ isLifeCycle: false,
+ isState: false,
+ stepEpochStateTime: 1000,
+ maxEpochStartTime: Math.round(new Date().getTime()),
+ minEpochStartTime: parseInt(this.props.match.params.epochTime) - 259200000,
+ nodeDiff: null,
+ showSlider: false,
+ sliderTickArray: null,
+ showTicks: INVLIST.showTicks,
+ nodeDisplay: (this.props.match.params.nodeType).toUpperCase(),// + ' : ' + (atob(this.props.match.params.nodeUriEnc)).split(this.props.match.params.nodeType + '\/').pop(),
+ nodeName: (this.props.match.params.nodeType).toUpperCase(),
+ historyErrMsg: null,
+ changesErrMsg: null,
+ lifecycleErrMsg: null,
+ currentErrMsg: null
+ });
+ }
+ getSettings = () => {
+ const settings = {
+ 'NODESERVER': INVLIST.NODESERVER,
+ 'PROXY': INVLIST.PROXY,
+ 'PREFIX': INVLIST.PREFIX,
+ 'VERSION': INVLIST.VERSION,
+ 'USESTUBS': INVLIST.useStubs
+ };
+ return settings;
+ }
+ fetchInventoryData = (param) => {
+ console.log('fetchInventoryData', param);
+ this.resultsMessage = '';
+ let settings = this.getSettings();
+ const inventory = INVLIST.INVENTORYLIST;
+ let url = '';
+ console.log('[History.jsx] fetchInventoryData nodeUriEnc= ', atob(this.props.match.params.nodeUriEnc));
+ let pageName = "History";
+ this.nodeResults = '';
+ switch(this.props.match.params.type){
+ case('nodeState'):
+ this.setState({splitScreenCard: true, isState: true, showState: true});
+ this.getCurrentStateCall(settings);
+ this.pageTitle = "State of "+ this.state.nodeDisplay +" at "+ moment(parseInt(this.props.match.params.epochTime)).format('dddd, MMMM Do, YYYY h:mm:ss A');
+ break;
+ case('nodeLifeCycleSince'):
+ this.setState({splitScreenCard: false, isLifeCycle: true, showLifeCycle: true});
+ this.getCurrentStateCall(settings);
+ this.commonApiServiceCall(settings, null);
+ this.pageTitle = "Network element state(s) of "+ this.state.nodeDisplay;
+ break;
+ case('nodeLifeCycle'):
+ this.setState({splitScreenCard: false, isLifeCycle: true, showLifeCycle: true});
+ this.getCurrentStateCall(settings);
+ this.commonApiServiceCall(settings, null);
+ this.pageTitle = "Network element state(s) of "+ this.state.nodeDisplay;
+ break;
+ default:
+ this.pageTitle = "History";
+ this.setState({splitScreenCard: false, isLifeCycle: true, showLifeCycle: true});
+ this.getCurrentStateCall(settings);
+ this.commonApiServiceCall(settings, null);
+ }
+ console.log('[History.jsx] active page', this.state.activePage);
+ };
+ generateEntries = (properties, relationships, actions) =>{
+ let tempEntries = [];
+ if(properties){
+ for (var i = 0; i < properties.length; i++) {
+ properties[i].displayTimestamp = moment(properties[i].timestamp).format('dddd, MMMM Do, YYYY h:mm:ss A');
+ properties[i].timeRank = properties[i].timestamp;
+ properties[i].type = "attribute";
+ properties[i].header = "Attribute: " + properties[i].key;
+ if(properties[i].value !== null && properties[i].value !== 'null'){
+ properties[i].action = "Updated";
+ properties[i].body = "Updated to value: " + properties[i].value;
+ }else{
+ properties[i].action = "Deleted";
+ properties[i].body = "Removed";
+ }
+ properties[i]['tx-id'] = (properties[i]['tx-id']) ? properties[i]['tx-id'] : 'N/A';
+ tempEntries.push(properties[i]);
+ }
+ }
+ if(actions){
+ for (var k = 0; k < actions.length; k++) {
+ actions[k].displayTimestamp = moment(actions[k].timestamp).format('dddd, MMMM Do, YYYY h:mm:ss A');
+ actions[k].timeRank = actions[k].timestamp;
+ actions[k].type = "action";
+ actions[k].header = "Action: " + actions[k].action;
+ if(actions[k].action === 'CREATED'){
+ actions[k].action = "Created";
+ actions[k].body = "Network Element Created";
+ }else if(actions[k].action === 'DELETED'){
+ actions[k].action = "Deleted";
+ actions[k].body = "Network Element Removed";
+ }
+ actions[k]['tx-id'] = (actions[k]['tx-id']) ? actions[k]['tx-id'] : 'N/A';
+ tempEntries.push(actions[k]);
+ }
+ }
+ if(relationships){
+ for (var j = 0; j < relationships.length; j++) {
+ if(relationships[j].timestamp){
+ relationships[j].dbStartTime = relationships[j].timestamp;
+ relationships[j].displayTimestamp = moment(relationships[j].dbStartTime).format('dddd, MMMM Do, YYYY h:mm:ss A');
+ relationships[j].timeRank = relationships[j].dbStartTime;
+ relationships[j].type = "relationship";
+ relationships[j].header = "Relationship added";
+ relationships[j].body = "The relationship with label " + relationships[j]['relationship-label'] + " was added from this node to the "+ relationships[j]['node-type'] +" at " + relationships[j].url;
+ relationships[j].action = "Added";
+ relationships[j]['tx-id'] = (relationships[j]['tx-id']) ? relationships[j]['tx-id'] : 'N/A';
+ let additions = JSON.parse(JSON.stringify(relationships[j]));
+ tempEntries.push(additions);
+ }
+ if(relationships[j]['end-timestamp']){
+ relationships[j].dbEndTime = relationships[j]['end-timestamp'];
+ relationships[j].sot = relationships[j]['end-sot'];
+ relationships[j].displayTimestamp = moment(relationships[j].dbEndTime).format('dddd, MMMM Do, YYYY h:mm:ss A');
+ relationships[j].timeRank = relationships[j].dbEndTime;
+ relationships[j].header = "Relationship removed";
+ relationships[j].body = "The " + relationships[j]['node-type'] +" : " + relationships[j].url + " relationship with label " + relationships[j]['relationship-label'] + " was removed from this node.";
+ relationships[j].type = "relationship";
+ relationships[j].action = "Deleted";
+ relationships[j]['tx-id'] = (relationships[j]['tx-id']) ? relationships[j]['tx-id'] : 'N/A';
+ let deletions = JSON.parse(JSON.stringify(relationships[j]));
+ tempEntries.push(deletions);
+ }
+ }
+ }
+
+ let tempEntriesSorted = tempEntries.sort(function(a, b) {
+ var compareA = a.timeRank;
+ var compareB = b.timeRank;
+ if(compareA > compareB) return -1;
+ if(compareA < compareB) return 1;
+ return 0;
+ });
+
+ this.setState({
+ totalResults : tempEntriesSorted.length,
+ entries : tempEntriesSorted,
+ filteredEntries: tempEntriesSorted
+ });
+
+ }
+ triggerHistoryStateCall = (nodeUri, epochTime) =>{
+ //get url for historical call
+ let settings = this.getSettings();
+ window.scrollTo(0, 400);
+ this.setState({
+ enableBusyHistoryStateFeedback : true,
+ enableBusyDiffFeedback: true
+ });
+ this.getHistoryStateCall(settings, null, null, epochTime);
+ }
+ generateDiffArray = (arr) => {
+ let tempArray = {};
+ tempArray['properties'] = [];
+ tempArray['related-to'] = [];
+
+ for (var i = 0; i < arr.properties.length; i++ ){
+ tempArray['properties'][arr.properties[i].key] = arr.properties[i];
+ }
+ for (var j = 0; j < arr['related-to'].length; j++ ){
+ //TODO use id if it is coming
+ tempArray['related-to'][arr['related-to'][j].url] = arr['related-to'][j];
+ }
+ return tempArray;
+ }
+ getCurrentStateCall = (settings,url,param) =>{
+ this.setState({currentErrMsg:null});
+ commonApi(settings, "query?format=state", 'PUT', this.payload, 'currentNodeState', null, 'history-traversal')
+ .then(res => {
+ let node = atob(this.props.match.params.nodeUriEnc).split(res.data.results[0]['node-type'] + '\/').pop();
+ res.data.results[0].primaryHeader = 'Current state of ' + this.state.nodeName + ' - ' + node;
+ res.data.results[0].secondaryHeader = atob(this.props.match.params.nodeUriEnc);
+ this.setState(
+ {
+ nodeCurrentState : res.data.results[0],
+ enableBusyRecentFeedback: false,
+ nodeDisplay :node
+ });
+ if(this.props.match.params.type === 'nodeState'){
+ this.getHistoryStateCall(settings, null);
+ }
+ console.log('After recent node service call ......',this.state);
+ console.log('[History.jsx] recent node results : ', res.data.results[0]);
+ }, error=>{
+ this.triggerError(error, "current");
+ }).catch(error => {
+ this.triggerError(error, 'current');
+ });
+ };
+ getHistoryStateCall = (settings, url, param, timeStamp) =>{
+ let ts = this.state.currentStateHistoryValue;
+ if(timeStamp){
+ ts = parseInt(timeStamp);
+ }
+ if(this.state.showTicks){
+ this.setState({changesErrMsg:null});
+ commonApi(settings, "query?format=changes", 'PUT', this.payload, 'historicalNodeStateChanges', null, 'history-traversal')
+ .then(res => {
+ let tickTempArray = [];
+ for(var j = 0; j < res.data.results.length; j++ ){
+ for(var k = 0; k < res.data.results[j].changes.length; k++){
+ if(!tickTempArray.includes(res.data.results[j].changes[k])){
+ tickTempArray.push(res.data.results[j].changes[k]);
+ }
+ }
+ }
+ let tickArray = tickTempArray.sort(function(a, b) {
+ var compareA = a;
+ var compareB = b;
+ if(compareA < compareB) return -1;
+ if(compareA > compareB) return 1;
+ return 0;
+ });
+ console.log("tick array: " + tickArray);
+ this.setState({showSlider:true, sliderTickArray: tickArray});
+ }, error=>{
+ this.triggerError(error, "changes");
+ }).catch(error => {
+ this.triggerError(error, 'changes');
+ });
+ }else{
+ this.setState({showSlider:true});
+ }
+ this.setState({historyErrMsg:null});
+ commonApi(settings, "query?format=state&startTs=" + ts + "&endTs=" + ts, 'PUT', this.payload, 'historicalNodeState', null, 'history-traversal')
+ .then(res => {
+ let node = atob(this.props.match.params.nodeUriEnc).split(res.data.results[0]['node-type'] + '\/').pop();
+ res.data.results[0].primaryHeader = 'Historical state of '+ this.state.nodeName + ' - ' + node + ' as of ' + moment(parseInt(this.props.match.params.epochTime)).format('dddd, MMMM Do, YYYY h:mm:ss A');
+ res.data.results[0].secondaryHeader = atob(this.props.match.params.nodeUriEnc);
+ this.setState(
+ {
+ showState: true,
+ splitScreenCard: true,
+ nodeHistoryState : res.data.results[0],
+ enableBusyHistoryStateFeedback: false
+ });
+ console.log('After historical node state service call ......',this.state);
+ console.log('[History.jsx] historical node state results : ', res.data.results[0]);
+ if(this.state.nodeHistoryState != null && this.state.nodeCurrentState != null){
+ let nodeDiffHistoryArr = this.generateDiffArray(this.state.nodeHistoryState);
+ let nodeDiffCurrentArr = this.generateDiffArray(this.state.nodeCurrentState);
+ var result = deepDiffMapper.map(nodeDiffHistoryArr, nodeDiffCurrentArr);
+ console.log("diff map" + result);
+ this.setState({ nodeDiff: result, enableBusyDiffFeedback: false });
+ }else{
+ this.setState({ enableBusyDiffFeedback: false });
+ }
+ }, error=>{
+ this.triggerError(error, "historic");
+ }).catch(error => {
+ this.triggerError(error, 'historic');
+ });
+
+ };
+
+ commonApiServiceCall = (settings,url,param) =>{
+ let path = "query?format=lifecycle";
+ let stubPath = "nodeLifeCycle";
+ if(this.props.match.params.type === "nodeLifeCycleSince"){
+ path += "&startTs=" + parseInt(this.props.match.params.epochTime);
+ stubPath += "Since";
+ }
+ this.setState({lifecycleErrMsg:null});
+ commonApi(settings, path, 'PUT', this.payload, stubPath, null, 'history-traversal')
+ .then(res => {
+ // Call dispatcher to update state
+ console.log('once before service call ......',this.state);
+ let resp = res.data.results[0];
+ this.resultsMessage = '';
+ let totalResults = 0;
+ if(resp && resp.properties.length + resp['related-to'].length > 0){
+ if(this.props.match.params.type === "nodeState"){
+ totalResults = 1;
+ }else{
+ //wait to generate entries to set this
+ totalResults = 0;
+ }
+ }
+ this.setState(
+ {
+ totalResults : totalResults,
+ enableBusyFeedback:false,
+ });
+ if(resp){
+ this.generateEntries(resp.properties, resp['related-to'], resp['node-actions']);
+ }
+ console.log('After service call ......',this.state);
+ console.log('[History.jsx] results : ', resp);
+ }, error=>{
+ this.triggerError(error, 'lifecycle');
+ }).catch(error => {
+ this.triggerError(error, 'lifecycle');
+ });
+ };
+ triggerError = (error, type) => {
+ console.error('[History.jsx] error : ', JSON.stringify(error));
+ let errMsg = '';
+ if (error.response) {
+ // The request was made and the server responded with a status code
+ // that falls out of the range of 2xx
+ console.log(error.response.data);
+ console.log(error.response.status);
+ console.log(error.response.headers);
+ if(error.response.status){
+ errMsg += " Code: " + error.response.status;
+ }
+ if(error.response.data){
+ errMsg += " - " + JSON.stringify(error.response.data);
+ }
+ } else if (error.request) {
+ // The request was made but no response was received
+ // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+ // http.ClientRequest in node.js
+ console.log(error.request);
+ errMsg += " - Request was made but no response received";
+ } else {
+ // Something happened in setting up the request that triggered an Error
+ console.log('Error', error.message);
+ errMsg += " - Unknown error occurred " + error.message;
+ }
+ //Suppress 404's because that is just no results
+ if(error.response && error.response.status === 404){
+ errMsg = '';
+ }
+ if(type === 'lifecycle'){
+ this.setState({
+ lifecycleErrMsg: errMsg,
+ enableBusyFeedback: false,
+ totalResults: 0
+ });
+ }else if (type === 'changes'){
+ this.setState({
+ showSlider:true,
+ changesErrMsg: errMsg
+ });
+ }else if (type === 'historic'){
+ console.log('[History.jsx] historical node state error : ', error);
+ this.setState(
+ {
+ showState: true,
+ splitScreenCard: true,
+ nodeHistoryState : null,
+ enableBusyHistoryStateFeedback:false,
+ enableBusyDiffFeedback:false,
+ historyErrMsg: errMsg
+ });
+ }else if (type === 'current'){
+ this.setState(
+ {
+ nodeCurrentState : null,
+ currentErrMsg: errMsg,
+ enableBusyRecentFeedback:false
+ });
+ }else{
+ console.log('[History.jsx] triggerError method called without a type.' );
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ console.log('[History.jsx] componentWillReceiveProps');
+ console.log('[History.jsx] next nodeUri:', atob(nextProps.match.params.nodeUriEnc));
+ console.log('[History.jsx] this nodeUri:', atob(this.props.match.params.nodeUriEnc));
+
+ if (nextProps.match.params.nodeUriEnc
+ && nextProps.match.params.type
+ && nextProps.match.params.epochTime
+ && ((nextProps.match.params.nodeUriEnc !== this.props.match.params.nodeUriEnc) ||
+ (nextProps.match.params.type !== this.props.match.params.type) ||
+ (nextProps.match.params.epochTime !== this.props.match.params.epochTime))
+ ) {
+ this.initState();
+ this.props = nextProps;
+ this.beforefetchInventoryData();
+ }
+ };
+
+ handlePageChange = (pageNumber) => {
+ console.log('[History.jsx] HandelPageChange active page is', pageNumber);
+ this.setState(
+ { activePage: pageNumber, enableBusyFeedback: true },
+ function () { this.beforefetchInventoryData(); }.bind(this)
+ );
+ };
+
+ // HELPER FUNCTIONS
+ isContaining = (nameKey, listArray) => {
+ let found = false;
+ listArray.map((lists) => {
+ if (lists.id === nameKey) {
+ found = true;
+ }
+ });
+ return found;
+ };
+
+ stateHistoryFormat = (event) =>{
+ this.setState({ currentStateHistoryValue: event.target.value, selectedHistoryStateFormatted: moment(event.target.value).format('dddd, MMMM Do, YYYY h:mm:ss A')});
+ };
+ changeHistoryState = () =>{
+ console.log('minEpochStateTime: ' + this.state.minEpochStateTime);
+ console.log('maxEpochStartTime: ' + this.state.maxEpochStartTime);
+ console.log('stepEpochStateTime: ' + this.state.stepEpochStateTime);
+ console.log('currentStateHistoryValue: ' + this.state.currentStateHistoryValue);
+ console.log("Calling the route again with a new timestamp");
+ this.props.history.push('/history/' + this.props.match.params.type + '/' + this.props.match.params.nodeType + '/' + this.props.match.params.nodeUriEnc + '/' + this.state.currentStateHistoryValue);
+ }
+ filterList = (event) =>{
+ var updatedList = this.state.entries;
+ updatedList = updatedList.filter((entry) =>{
+ return JSON.stringify(entry).toLowerCase().search(
+ event.target.value.toLowerCase()) !== -1;
+ });
+ this.setState({filteredEntries: updatedList, totalResults: updatedList.length});
+ }
+
+ setHistoricStateValues = (currValue) =>{
+ this.setState({currentStateHistoryValue: currValue, selectedHistoryStateFormatted: moment(currValue).format('dddd, MMMM Do, YYYY h:mm:ss A')});
+ }
+
+ navigateHistory = (time) =>{
+ this.props.history.push('/history/' + this.props.match.params.type + '/' + this.props.match.params.nodeType + '/' + this.props.match.params.nodeUriEnc + '/' + time);
+ }
+
+ setStateValue = (key, value) =>{
+ this.setState((state) => { key : value });
+ }
+ getStateValue = (stateVar) => {
+ return this.state[stateVar];
+ }
+
+ render() {
+ console.log('[History Props] render: ', JSON.stringify(this.props) + 'elements : ', this.elements);
+ console.log('[History nodeUri] render: ', atob(this.props.match.params.nodeUriEnc));
+ if(INVLIST.isHistoryEnabled){
+ return (
+ <div>
+ <header className='addPadding jumbotron my-4'>
+ <h1 className='display-2'>Network Element History</h1>
+ <p className='lead'>
+ On this page you have the ability to view a network element in its current and historic state.
+ The attributes are clickable to view extended information about who and when they were last updated.
+ {this.props.match.params.type === "nodeLifeCycle" || this.props.match.params.type === "nodeLifeCycleSince"
+ ? 'The table at the bottom of the page shows a list of all updates made on the network element (it is filterable).\n' +
+ 'Click an update in that table to rebuild the historic state at the time of the update.\n' +
+ 'A difference will be displayed between the current state and the historic state in the center.' : ''}
+ </p>
+ </header>
+ <Grid fluid={true} className='addPadding'>
+ <Row>
+ <Col className='col-lg-12'>
+ <div className='card d3-model-card'>
+ <div className='card-header model-card-header'>
+ <h2>{this.pageTitle}</h2>
+ </div>
+ <Row className={this.state.changesErrMsg ? 'show' : 'hidden'} >
+ <div className='addPaddingTop alert alert-danger' role="alert">
+ An error occurred while trying to get the state changes, please try again later. If this issue persists, please contact the system administrator. {this.state.changesErrMsg}
+ </div>
+ </Row>
+ { (this.state.isState && this.state.showSlider && this.state.showTicks) && (
+ <div className='card-header'>
+ <Row className='show-grid'>
+ <Col md={3}>
+ <ReactBootstrapSlider
+ value={this.state.currentStateHistoryValue}
+ change={this.stateHistoryFormat}
+ slideStop={this.stateHistoryFormat}
+ step={ 1 }
+ ticks={ this.state.sliderTickArray }
+ ticks_snap_bounds={ 10000 }
+ orientation="horizontal" />
+ <p>{this.state.selectedHistoryStateFormatted}</p>
+ <button type='button' className='btn btn-outline-primary' onClick={this.changeHistoryState}>Refresh</button>
+ </Col>
+ <AnimationControls playControlsDisabled={true} get={this.getStateValue} set={this.setStateValue} tickArray={this.state.sliderTickArray} currentValue={this.state.currentStateHistoryValue} setValueState={this.setHistoricStateValues} setNavigate={this.navigateHistory} />
+ </Row>
+ </div>)}
+ { (this.state.isState && this.state.showSlider && !this.state.showTicks) && (
+ <div className='card-header'>
+ <Row className='show-grid'>
+ <Col md={12}>
+ <ReactBootstrapSlider
+ value={this.state.currentStateHistoryValue}
+ change={this.stateHistoryFormat}
+ slideStop={this.stateHistoryFormat}
+ step={this.state.stepEpochStateTime}
+ max={this.state.maxEpochStartTime}
+ min={this.state.minEpochStartTime}
+ orientation="horizontal" />
+ <p>{this.state.selectedHistoryStateFormatted}</p>
+ <button type='button' className='btn btn-outline-primary' onClick={this.changeHistoryState}>Refresh</button>
+ </Col>
+ </Row>
+ </div>)}
+ <div className='card-content model-card-content'>
+ <div>
+ <Row className='show-grid'>
+ <Col md={12}>
+ <Spinner loading={this.state.enableBusyHistoryStateFeedback && this.state.showState}>
+ {this.state.showState && !this.historyErrMsg && (<HistoryCard split={this.state.splitScreenCard} node={this.state.nodeHistoryState}/>)}
+ <Row className={this.state.historyErrMsg ? 'show' : 'hidden'} >
+ <div className='addPaddingTop alert alert-danger' role="alert">
+ An error occurred while trying to get the historic state, please try again later. If this issue persists, please contact the system administrator. {this.state.historyErrMsg}
+ </div>
+ </Row>
+ </Spinner>
+ <Spinner loading={this.state.showState && this.state.enableBusyDiffFeedback}>
+ {this.state.showState && (<NodeDiffCard diff={this.state.nodeDiff}/>)}
+ </Spinner>
+ <Spinner loading={this.state.enableBusyRecentFeedback}>
+ { !this.currentErrMsg && (<HistoryCard split={this.state.splitScreenCard} node={this.state.nodeCurrentState}/>)}
+ <Row className={this.state.currentErrMsg ? 'show' : 'hidden'} >
+ <div className='addPaddingTop alert alert-danger' role="alert">
+ An error occurred while trying to get the current state, please try again later. If this issue persists, please contact the system administrator. {this.state.currentErrMsg}
+ </div>
+ </Row>
+ </Spinner>
+ <hr />
+ <span className='resultMessage'>{this.resultsMessage}</span>
+ </Col>
+ </Row>
+ </div>
+ </div>
+ <div className='card-footer'>
+ <strong>Tip:</strong> <em>Click any attribute to view more details</em>
+ </div>
+ </div>
+ </Col>
+ </Row>
+ <Row>
+ <div className={'addPaddingTop alert alert-danger ' + (this.state.lifecycleErrMsg ? 'show' : 'hidden')} role="alert">
+ An error occurred while trying to get the list of updates on the current node, please try again later. If this issue persists, please contact the system administrator. {this.state.lifecycleErrMsg}
+ </div>
+ {this.state.showLifeCycle && !this.state.lifecycleErrMsg && (
+ <Col className='col-lg-12'>
+ <div className='card d3-model-card'>
+ <div className='card-header model-card-header'>
+ <h2 className={this.props.match.params.type === "nodeLifeCycle" ? 'show' : 'hidden'}>All Updates on {this.state.nodeDisplay}</h2>
+ <h2 className={this.props.match.params.type === "nodeLifeCycleSince" ? 'show' : 'hidden'}>All Updates on {this.state.nodeDisplay} Since {this.state.selectedHistoryStateFormatted}</h2>
+ </div>
+ <div className='card-header'>
+ <p><strong>Tip:</strong> <em>Click any update to view the state of the node at that point in time</em></p>
+ <div>
+ <h5>Total Results: <strong>{this.state.totalResults}</strong></h5>
+ </div>
+ <div>
+ <form>
+ <fieldset className="form-group">
+ <input type="text" className="form-control form-control-lg" placeholder="Search" onChange={this.filterList}/>
+ </fieldset>
+ </form>
+ </div>
+ </div>
+ <div className='card-content model-card-content'>
+ <Spinner loading={this.state.enableBusyFeedback}>
+ <div>
+ <HistoryGallery nodeId={atob(this.props.match.params.nodeUriEnc)} entries={this.state.filteredEntries} triggerState={this.triggerHistoryStateCall}/>
+ </div>
+ </Spinner>
+ </div>
+ </div>
+ </Col> )}
+ </Row>
+ </Grid>
+ </div>
+ );
+ }else{
+ return(<p>History Not Enabled for this instance, please check config.</p>)
+ }
+ }
+}
+
+export default History;
Code Review / aai / sparky-fe.git / blobdiff