--- /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 Select from 'react-select';
+import Button from 'react-bootstrap/lib/Button';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Grid from 'react-bootstrap/lib/Grid';
+import PanelGroup from 'react-bootstrap/lib/PanelGroup';
+import Panel from 'react-bootstrap/lib/Panel';
+import Label from 'react-bootstrap/lib/Label';
+import Collapse from 'react-bootstrap/lib/Collapse';
+import moment from "moment";
+import DatePicker from 'react-datepicker';
+import Modal from 'react-bootstrap/lib/Modal';
+import {ExportExcel} from 'utils/ExportExcel.js';
+import commonApi from 'utils/CommonAPIService.js';
+import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
+import Spinner from 'utils/SpinnerContainer.jsx';
+import ModelGallery from 'app/model/modelSearch/components/ModelGallery.jsx';
+import ModelCard from 'app/model/modelSearch/components/ModelCard.jsx';
+import OutputToggle from 'generic-components/OutputToggle.jsx';
+import Pagination from 'react-js-pagination';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+import {Visualization} from 'generic-components/OutputVisualization.jsx';
+import DownloadRangeModel from 'generic-components/DownloadRangeModel.jsx';
+
+
+
+let PAGINATION_CONSTANT = GlobalExtConstants.PAGINATION_CONSTANT;
+let INVLIST = GlobalExtConstants.INVLIST;
+let CUSTOMQUERYLIST = GlobalExtConstants.CUSTOMQUERYLIST;
+let generateExcels = ExportExcel.generateExcels;
+let DOWNLOAD_ALL = GlobalExtConstants.DOWNLOAD_ALL;
+let DOWNLOAD_TOOLTIP = GlobalExtConstants.DOWNLOAD_TOOLTIP;
+
+
+let dropdownList = null;
+let header = null;
+
+const inputClasses = ['form-control'];
+
+class CustomQuery extends Component {
+ nodeResults = '';
+ typeOfCall = true;
+ downloadTooltip = DOWNLOAD_TOOLTIP;
+ downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
+ downloadRangeTooltip= 'Download Results By Custom Range Selection';
+ historyStackString = '';
+ state = {
+ queryPlaceHolder: 'Please Select a Query',
+ placeholder: 'Please Select a Query',
+ reqPropPlaceholder: 'Please Enter Required Query or Property',
+ optionalPropPlaceholder: 'Please Enter Optional Query or Property',
+ displayReqProps: 'hidden',
+ startNode: '',
+ reqProps: '',
+ optionalProps: '',
+ disableInputs: true,
+ query: '',
+ showText: false,
+ description: '',
+ additionalInfo: '',
+ displayDescription: 'hidden',
+ customQueryOptions: null,
+ formIsValid: false,
+ nodes: [],
+ displayNodes: 'hidden',
+ multipleNodes: '',
+ isLoading: false,
+ isInitialLoad: true,
+ activePage: 1,
+ totalResults: 0,
+ showPagination: false,
+ showResults: false,
+ errorResults:false,
+ errorMessage: '',
+ noResults: false,
+ displayOptionalProps: 'hidden',
+ showHistoryModal:false,
+ startDate: moment(),
+ currentPayload: null,
+ viewName: localStorage.getItem(GlobalExtConstants.ENVIRONMENT + '_' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId') + '_viewPreference') || 'CardLayout',
+ res: null,
+ visualAddition: false,
+ nodeDisplay: '',
+ showNodeModal: false,
+ focusedNode: {},
+ historyType: 'cq',
+ focusedNodeUri: 0,
+ focusedNodeType: '',
+ historyParams: '',
+ showModelOptions: false,
+ enableCalendar: true,
+ resetColumnFilters: true,
+ isPageNumberChange: false,
+ totalPages: 0,
+ pageRange: 1,
+ showDownloadResultsModal: false,
+ errorDownloadResults:false,
+ downloadErrorMsg: '',
+ enableModelBusyFeedback:false,
+ downloadCount:DOWNLOAD_ALL,
+ defaultViewName: localStorage.getItem(GlobalExtConstants.ENVIRONMENT + '_' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId') + '_viewPreference') || 'CardLayout'
+ }
+
+ componentWillMount () {
+ console.log('componentWillMount');
+ sessionStorage.setItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS', false);
+ if(!this.props.location.historyStackString){
+ this.props.location.historyStackString = this.props.location.pathname + ',,Origin||';
+ }else{
+ this.historyStackString = this.props.location.historyStackString;
+ }
+ let queryList = Object.values(CUSTOMQUERYLIST.CUSTOMQUERYLIST);
+ dropdownList = queryList.sort(function (filter1, filter2) {
+ if (filter1.value < filter2.value) {
+ return -1;
+ } else if (filter1.value > filter2.value) {
+ return 1;
+ } else {
+ return 0;
+ }
+ });
+ };
+ onInputChangeHandler (){
+ console.log('onInputChangeHandler of select-Clear');
+ this.setState({
+ placeholder: 'Please Select A Query',
+ queryPlaceHolder: 'Please Select A Query', query: '',
+ reqPropPlaceholder: 'Please Enter Required Query or Property',
+ optionalPropPlaceholder: 'Please Enter Optional Query or Property',
+ startNode: '',
+ reqProps: '',
+ optionalProps: '',
+ disableInputs: true,
+ displayDescription: 'hidden',
+ nodes: [],
+ displayNodes: 'hidden',
+ multipleNodes: '',
+ isLoading: false,
+ displayOptionalProps: 'hidden',
+ formIsValid: false,
+ showPagination: false,
+ showResults: false,
+ errorResults: false,
+ errorMessage: '',
+ noResults: false,
+ isInitialLoad: true
+ });
+ }
+
+ updateSelectedHandler = (selectedOption) => {
+
+ const value = selectedOption === null ? 'Please Select A Query' : selectedOption.value
+ if(selectedOption){
+ console.log('updateSelectedHandler.reqPropPlaceholder: ' + selectedOption.reqPropPlaceholder);
+ console.log('updateSelectedHandler.value: ' + selectedOption.value);
+ this.setState({ placeholder: selectedOption.placeholder });
+ this.setState({ displayReqProps: selectedOption.reqPropPlaceholder ? 'show' : 'hidden' });
+ this.setState({ displayOptionalProps: selectedOption.optionalPropPlaceholder ? 'show' : 'hidden'});
+ this.setState({ reqPropPlaceholder: selectedOption.reqPropPlaceholder });
+ this.setState({ optionalPropPlaceholder: selectedOption.optionalPropPlaceholder});
+ this.setState({ disableInputs: false });
+ this.setState({ query: value });
+ this.setState({ description: selectedOption.description.summary });
+ this.setState({ additionalInfo: selectedOption.description.additionalInfo });
+ this.setState({ displayDescription: 'show' });
+ this.setState({ startNode: ''});
+ this.setState({ reqProps: ''});
+ this.setState({ optionalProps: ''});
+ this.setState({ queryPlaceHolder: value});
+ }else{
+ /*this.setState({ queryPlaceHolder: value, query: '',
+ reqPropPlaceholder: this.state.reqPropPlaceholder,optionalPropPlaceholder: this.state.optionalPropPlaceholder,
+ startNode: '',reqProps: '', optionalProps: ''});*/
+ this.onInputChangeHandler();
+ }
+ }
+ checkValidity() {
+ let isValid = true;
+ isValid = this.state.startNode.trim().length > 1 && isValid;
+ if (this.state.reqPropPlaceholder) {
+ console.log('Checking if reqProps is on state...');
+ isValid = this.state.reqProps.length > 1 && isValid;
+ }
+ return isValid;
+ }
+
+ inputChangeHandler = (event) => {
+ const target = event.target;
+ const value = target.value;
+ const name = target.name;
+ console.log('inputChangeHandler.value: ' + value);
+ console.log('inputChangeHandler.name: ' + name);
+ let formIsValid = null;
+ this.setState(
+ { [name]: value },
+ function () {
+ console.log('startNode:' + this.state.startNode);
+ console.log('reqProps:' + this.state.reqProps);
+ formIsValid = this.checkValidity();
+ console.log('formIsValid:' + formIsValid);
+ this.setState({ formIsValid: formIsValid });
+ });
+ }
+
+ onAdditem = (event) => {
+ //window.alert('onAddItem clicked');
+ event.preventDefault();
+ this.nodeResults = '';
+ this.typeOfCall = true;
+ this.formQueryString();
+ };
+ formPayload = () => {
+ var startNode = this.state.startNode;
+ startNode.trim();
+ console.log('startNode.trim().length: ' + startNode.trim().length);
+ var queryName = this.state.query;
+ var reqProps = this.state.reqProps;
+ var optionalProps = this.state.optionalProps;
+ console.log('start Node: ' + startNode);
+ console.log('query name: ' + queryName);
+ console.log('req props: ' + reqProps);
+ console.log('Optional props: ' + optionalProps);
+ let payload = null;
+
+ if(queryName === 'node-fromURI'){
+ payload = {
+ start: startNode
+ };
+ } else if ( reqProps === '' && optionalProps === '' ){
+ payload = {
+ start: startNode,
+ query: 'query/' + queryName
+ };
+ } else if(reqProps !== ''){
+ reqProps = '?' + reqProps;
+ payload = {
+ start: startNode,
+ query: 'query/' + queryName + reqProps
+ };
+ }
+ if(optionalProps !== ''){
+ if(reqProps === ''){
+ optionalProps = '?' + optionalProps;
+ }else{
+ optionalProps = reqProps + optionalProps;
+ }
+ payload = {
+ start: startNode,
+ query: 'query/' + queryName + optionalProps
+ };
+ }
+ return payload
+ }
+ formQueryString = () =>{
+ let payload = this.formPayload();
+
+ console.log('payload>>>>>' + payload.toString());
+ const settings = {
+ 'NODESERVER': INVLIST.NODESERVER,
+ 'PROXY': INVLIST.PROXY,
+ 'PREFIX': INVLIST.PREFIX,
+ 'VERSION': INVLIST.VERSION,
+ 'USESTUBS': INVLIST.useStubs
+
+ };
+ let queryStr = '';
+ if(this.typeOfCall){
+ queryStr = 'query?format=simple&resultIndex='
+ + this.state.activePage + '&resultSize=' + PAGINATION_CONSTANT.RESULTS_PER_PAGE;
+ this.setState({isLoading: true,nodes: [], currentPayload:payload});
+ }else{
+ let pagerange=this.state.pageRange.toString();
+ pagerange=pagerange.split('-');
+ if(pagerange.length > 1){
+ queryStr = 'query?format=simple&resultIndex=' + parseInt(pagerange[0]) + '&resultSize=' + PAGINATION_CONSTANT.RESULTS_PER_PAGE + '&resultRangeEnd=' + parseInt(pagerange[1]);
+ }else{
+ queryStr = 'query?format=simple&resultIndex=1&resultSize=' + parseInt(pagerange);
+ }
+ this.setState({enableModelBusyFeedback: true, currentPayload:payload});
+ }
+ this.getNodes(settings, queryStr, 'PUT', payload);
+ }
+
+
+ getNodes(settings, path, httpMethodType, payload) {
+ commonApi(settings, path, httpMethodType, payload, 'CQDefault')
+ .then(res => {
+ console.log(Object.keys(res.data));
+ this.processData(res);
+ if(this.state.nodes.length > 0 && this.state.visualAddition){
+ Visualization.chart('currentState' , [], [], this.state.res.data, this);
+ }
+ console.log('res:' + res);
+ }, error => {
+ console.log(JSON.stringify(error));
+ if(this.typeOfCall){
+ this.triggerError(error);
+ }else{
+ let errMsg = this.renderErrorMsg(error);
+ this.setState({ isLoading: false,errorDownloadResults:true,downloadErrorMsg:errMsg,enableModelBusyFeedback:false});
+ }
+ }).catch(error =>
+ {
+ console.log(JSON.stringify(error));
+ if(this.typeOfCall){
+ this.triggerError(error);
+ }else{
+ let errMsg = this.renderErrorMsg(error);
+ this.setState({ isLoading: false,errorDownloadResults:true,downloadErrorMsg:errMsg,enableModelBusyFeedback:false});
+ }
+ });
+
+ this.isEnabled = [];
+ }
+
+ triggerError = (error) =>{
+ // this.processData('');
+ this.setState({isLoading: false,
+ totalResults: 0,
+ showPagination: false,
+ showResults: false,
+ isInitialLoad: false,
+ errorResults:true,
+ noResults: true
+ });
+ this.downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
+ let errMsg = this.renderErrorMsg(error);
+ this.setState({errorMessage:errMsg});
+ }
+ renderErrorMsg = (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;
+ }
+ console.log(error.config);
+ return errMsg;
+ }
+
+ processData(resp) {
+ //data = CustomQueryResponse;
+ console.log( 'in Custom Query component file DATA: ' + JSON.stringify(resp.data));
+ if(this.typeOfCall){
+ if(resp.data && resp.data.results) {
+ this.setState(
+ { res: resp,
+ nodes: resp.data.results},
+ function () {
+ console.log('how many nodes? ', this.state.nodes.length);
+ this.setState({ multipleNodes: this.state.nodes.length > 1 ? 'col-lg-3 col-xl-3' : '' });
+ });
+ }
+ let totalResults = 0;
+ let downloadCount = DOWNLOAD_ALL;
+ if(resp.headers){
+ totalResults = parseInt(resp.headers['total-results']);
+ if(totalResults > DOWNLOAD_ALL){
+ this.downloadAllTooltip = DOWNLOAD_ALL + ' results out of '+ totalResults +' Results will be downloaded, please filter results further to obtain full report';
+ }else{
+ this.downloadAllTooltip = (totalResults === 1) ?'Downloads ' + totalResults + ' Results' : 'Downloads all ' + totalResults + ' Results' ;
+ downloadCount= totalResults;
+ }
+ this.setState({isLoading: false,
+ totalResults: totalResults,
+ totalPages: parseInt(resp.headers['total-pages']),
+ showResults: resp.headers['total-results'] > 0 ? true : false,
+ showPagination: resp.headers['total-results'] > 0 ? true : false,
+ isInitialLoad: false,
+ noResults: resp.headers['total-results'] && resp.headers['total-results'] > 0 ? false : true,
+ errorResults: !resp.headers['total-results'],
+ downloadCount: downloadCount
+ });
+ }
+
+ this.setState({ displayNodes: 'show', viewName: this.state.defaultViewName });
+ }else{
+ if(resp.data && resp.data.results) {
+ this.nodeResults = resp.data.results;
+ let totalResults = 0;
+ let totalPages = 0;
+ if(resp.headers){
+ totalResults = parseInt(resp.headers['total-results']);
+ totalPages = parseInt(resp.headers['total-pages']);
+ }
+ this.setState({isLoading: false,totalPages:totalPages,errorDownloadResults:false,downloadErrorMsg:''},() => {this.getAllExcels()});
+ }else{
+ this.nodeResults = '';
+ this.setState({isLoading: false,errorDownloadResults:true,downloadErrorMsg:error+'',enableModelBusyFeedback:false});
+ }
+ }
+ }
+
+ nodeOnClick(event, uri, id, nodeType) {
+ event.preventDefault();
+ let delimiter = '\/';
+ let start = 3;
+ let tokens = uri.split(delimiter).slice(start);
+ let result = tokens.join(delimiter);
+ sessionStorage.setItem(GlobalExtConstants.ENVIRONMENT + 'URI', result);
+ console.log(['/model/' + nodeType + '/' + id + '/' + '1']);
+ };
+ openDownloadRange = () =>{
+ this.setState({
+ showDownloadResultsModal: true,
+ errorDownloadResults: false,
+ downloadErrorMsg:''});
+ }
+ closeDownloadResults = () =>{
+ this.setState({
+ showDownloadResultsModal: false,
+ enableModelBusyFeedback: false
+ });
+ }
+ getAllExcels = (pageRange,rangeState) =>{
+
+ console.log('getAllExcels>>>>>>>>>>>*',pageRange);
+ if(pageRange){
+ this.typeOfCall=false;
+ let rangeModelState=(rangeState)? rangeState: false;
+ this.setState(
+ { pageRange: pageRange,enableModelBusyFeedback:true,showDownloadResultsModal:rangeModelState},
+ function () { this.formQueryString(); }.bind(this)
+ );
+ }else{
+ this.setState(
+ {errorDownloadResults: false, showDownloadResultsModal: false, downloadErrorMsg:'', isLoading: false, enableModelBusyFeedback:false},
+ function () { generateExcels(this.nodeResults);this.nodeResults='';this.typeOfCall = true;}.bind(this)
+ );
+ }
+ }
+ getExcels = () =>{
+ this.typeOfCall = true;
+ generateExcels(this.state.nodes);
+ }
+
+ handlePageChange = (pageNumber) => {
+ console.log('[CustomQuery.jsx] HandelPageChange active page is', pageNumber);
+ this.typeOfCall = true;
+ this.setState(
+ { activePage: pageNumber, isLoading: true, nodes: [], resetColumnFilters: false, isPageNumberChange: true },
+ function () { this.formQueryString(); }.bind(this)
+ );
+ };
+ openHistory = (nodeDisplay, nodeUri, nodeType) => { // open modal from Card
+ console.log('history >> showModal',nodeDisplay);
+
+ if(nodeType){
+ this.setState({
+ nodeDisplay: nodeDisplay,
+ showHistoryModal: true,
+ showModelOptions:true,
+ enableCalendar:true,
+ historyType:(this.state.historyType === 'cq') ? 'nodeState' : this.state.historyType,
+ focusedNodeUri: nodeUri,
+ focusedNodeType: nodeType,
+ });
+ }else{
+ let payload = this.formPayload();
+ this.setState({
+ showHistoryModal:true,
+ showModelOptions:false,
+ focusedNodeUri: JSON.stringify(payload),
+ focusedNodeType: nodeType,
+ enableCalendar:true,
+ historyType :'cq'
+ });
+ }
+ }
+ closeHistory = () => {
+ this.setState({
+ showHistoryModal: false,
+ enableCalendar:true,
+ historyType :'nodeState'
+ });
+ }
+
+ setViewName(event) {
+ console.log(event.currentTarget.value);
+ this.setState({
+ viewName: event.currentTarget.value
+ });
+ }
+
+ setDefaultViewName(event) {
+ let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
+ let layout = event.target.value;
+
+ if(sessionStorage.getItem(ENVIRONMENT + 'userId')) {
+ if (event.target.checked) {
+ localStorage.setItem(ENVIRONMENT + '_' + sessionStorage.getItem(ENVIRONMENT + 'userId') + '_viewPreference', layout);
+ } else {
+ localStorage.removeItem(ENVIRONMENT + '_' + sessionStorage.getItem(ENVIRONMENT + 'userId') + '_viewPreference');
+ }
+ }
+
+ this.setState({
+ defaultViewName: event.target.value
+ });
+ }
+
+ submitHistory = () => {
+ console.log("submitting history");
+ let paramToPassThrough = '';
+ if(this.state.focusedNodeType){
+ paramToPassThrough = '/history/' + this.state.historyType +'/' + this.state.focusedNodeType + '/' + btoa(this.state.focusedNodeUri);
+ }else{
+ paramToPassThrough = '/historyQuery/' + this.state.historyType + '/' + btoa(this.state.focusedNodeUri);
+ }
+ let epochStartTime = (this.state.startDate).unix();
+ this.props.history.push(paramToPassThrough + '/' + epochStartTime * 1000);
+ }
+
+ handleDateChange = (newDate) =>{
+ this.setState({ startDate: moment(+newDate) });
+ console.log('[CustomQuery.jsx] handleDateChange date is ', this.state.startDate);
+ console.log('[CustomQuery.jsx] handleDateChange date is in millis ', +this.state.startDate);
+ }
+ setHistoryType(event) {
+ console.log(event.target.value);
+ let enableCalendar = false;
+ if(event.target.value === 'nodeLifeCycle'){
+ enableCalendar = false;
+ }else{
+ enableCalendar = true;
+ }
+ this.setState({
+ historyType: event.target.value,
+ enableCalendar: enableCalendar
+ });
+ console.log(this.state.enableCalendar);
+ }
+ openNodeModal(nodeDisplay, nodeUri, nodeType){ // open modal
+ console.log('customquery >> showModal');
+ nodeDisplay = "Node Details of " + nodeUri;
+ let node = null;
+ let found = false;
+ for(var j = 0; j < this.state.nodes.length && !found; j++){
+ if(this.state.nodes[j].url === nodeUri){
+ node = this.state.nodes[j];
+ found = true;
+ }
+ }
+ if(nodeDisplay && found){
+ this.setState({
+ nodeDisplay: nodeDisplay,
+ focusedNode: node,
+ showNodeModal:true
+ });
+ }else{
+ this.setState({
+ showNodeModal:true
+ });
+ }
+ }
+
+ closeNodeModal = () => {
+ this.setState({
+ showNodeModal: false
+ });
+ }
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if(this.state.nodes.length > 0 && !this.state.visualAddition){
+ Visualization.chart('currentState', [], [], this.state.res.data, this);
+ this.setState({
+ showPagination: this.state.nodes.length > 0 ? true : false,
+ visualAddition: true
+ });
+ }
+ }
+ prepareDownloadRangeModel = () =>{
+ let downloadRangeModel = (this.state.showDownloadResultsModal)?<DownloadRangeModel
+ showDownloadResultsModal={this.state.showDownloadResultsModal}
+ totalPages={this.state.totalPages}
+ totalResults={this.state.totalResults}
+ triggerDownload={this.getAllExcels}
+ errorDownloadResults={this.state.errorDownloadResults}
+ downloadErrorMsg={this.state.downloadErrorMsg}
+ triggerClose={this.closeDownloadResults}
+ enableModelBusyFeedback={this.state.enableModelBusyFeedback}
+ /> : '';
+ return downloadRangeModel;
+ }
+ render() {
+ let simple = 'Enter Start Node Location => network/generic-vnfs/generic-vnf/a642ad94-9a84-4418-9358-c1ee860315e2';
+ let advanced = 'Enter Start Node Location => /cloud-infrastructure/cloud-regions/cloud-region/cloudowner1/cloudregion1';
+ let downloadRangeModel = this.prepareDownloadRangeModel();
+ if (this.state.displayValidationError) {
+ inputClasses.push('invalid');
+ }
+ let styling = inputClasses.join(' ');
+ console.log('styling:' + styling);
+ let nodes = '';
+ let classes = `${this.state.displayNodes} container-fluid`;
+ const modelGalleryElement = <ModelGallery
+ nodes={this.state.nodes}
+ viewName={this.state.viewName}
+ historyStackString={this.props.location.historyStackString}
+ openHistoryModal={this.openHistory}
+ isPageNumberChange={this.state.isPageNumberChange}
+ resetColumnInd={this.state.resetColumnFilters}
+ enableRealTime={false}/>;
+ if (this.state.nodes.length > 0) {
+ console.log('nodes exist');
+ nodes =
+ <div>
+ <hr />
+ {modelGalleryElement}
+ </div >;
+ }
+
+ return (
+ <div>
+ <header className='addPadding jumbotron my-4'>
+ <h1 className='display-2'>Welcome to Custom Queries!</h1>
+ <p className='lead'>
+ On this page you can choose from the many different
+ predefined custom queries has to offer. Simply
+ choose the query name and provide the location of the
+ start node.<br />
+ If prompted please also enter the values in required
+ properties field as some queries require these values
+ to execute.<br />
+ Check the Help Section on the right for examples.
+ </p>
+ </header>
+ <div className='static-modal'>
+ <Modal show={this.state.showHistoryModal} onHide={this.closeHistory}>
+ <Modal.Header>
+ <Modal.Title>Retrieve {(this.state.focusedNodeType) ? this.state.focusedNodeType: 'Custom Query '} History</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <form className={this.state.showModelOptions ? 'show' : 'hidden'}>
+ <div className="radio">
+ <label>
+ <input type="radio" value="nodeState"
+ checked={this.state.historyType === 'nodeState'}
+ onChange={(e) => this.setHistoryType(e)} />
+ View state at
+ </label>
+ </div>
+ <div className="radio">
+ <label>
+ <input type="radio" value="nodeLifeCycleSince"
+ checked={this.state.historyType === 'nodeLifeCycleSince'}
+ onChange={(e) => this.setHistoryType(e)} />
+ View updates since
+ </label>
+ </div>
+ <div className="radio">
+ <label>
+ <input type="radio" value="nodeLifeCycle"
+ checked={this.state.historyType === 'nodeLifeCycle'}
+ onChange={(e) => this.setHistoryType(e)} />
+ View all updates
+ </label>
+ </div>
+ </form>
+ <div className={this.state.enableCalendar ? 'show' : 'hidden'}>
+ <DatePicker
+ inline
+ selected={this.state.startDate}
+ onChange={(newDate) => this.handleDateChange(newDate)}
+ showTimeSelect
+ timeFormat="HH:mm"
+ timeIntervals={15}
+ dateFormat="MMMM D, YYYY h:mm a"
+ timeCaption="time"
+ />
+ </div>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button onClick={this.closeHistory}>Close</Button>
+ <Button onClick={this.submitHistory}>Submit</Button>
+ </Modal.Footer>
+ </Modal>
+ </div>
+ <div className='static-modal'>
+ <Modal show={this.state.showNodeModal} onHide={this.closeNodeModal} dialogClassName="modal-override">
+ <Modal.Header>
+ <Modal.Title>Retrieve {this.state.nodeDisplay}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <Grid fluid={true}>
+ <Row className='show-grid'>
+ <Col lg={12} md={12} sm={12} xs={12}>
+ <ModelCard
+ key={this.state.focusedNode.id}
+ nodeId={this.state.focusedNode.id}
+ nodeType={this.state.focusedNode['node-type']}
+ nodeProps={this.state.focusedNode.properties}
+ nodeRelatives={this.state.focusedNode['related-to']}
+ nodeUrl={this.state.focusedNode.url}
+ historyStackString={this.props.location.historyStackString}
+ openHistoryModal={this.openHistory}
+ enableRealTime={false}/>
+ </Col>
+ </Row>
+ </Grid>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button onClick={this.closeNodeModal}>Close</Button>
+ </Modal.Footer>
+ </Modal>
+ </div>
+ <div className='addPadding'>
+ <div className='row addPaddingTop'>
+ <Col md={8}>
+ <form style={{ margin: 0 }} onSubmit={this.onAdditem} id='customQueryForm' name='customQueryForm'>
+ <div className='form-group'>
+ <label>Query:</label><br />
+ <div id='customQueryText'>
+ <Select
+ className='dropdown-item'
+ autosize={true}
+ placeholder={this.state.queryPlaceHolder}
+ value={this.state.query}
+ onChange={this.updateSelectedHandler}
+ options={dropdownList} />
+ </div>
+ </div>
+ <div className={this.state.displayDescription} id='customQueryDescription'>
+ <Label bsStyle='info'>Description</Label>
+ <p><br />{this.state.description}</p>
+ <a onClick={() => this.setState({ showText: !this.state.showText })}
+ className={this.state.additionalInfo==='' ? 'hidden' : 'show'}>See more</a><br />
+ <Collapse in={this.state.showText}>
+ <div>
+ <span>
+ {this.state.additionalInfo.split('\n').map(info => {
+ return <div>{info}</div>;
+ })}
+ </span>
+ </div>
+ </Collapse>
+ </div>
+ <div className='form-group addPaddingTop' id='startNodeText'>
+ <label htmlFor='StartNode'>Enter Start Node Location (full uri path): </label>
+ <input type='text'
+ id='startNode'
+ className={styling}
+ name='startNode'
+ placeholder={this.state.placeholder}
+ onChange={this.inputChangeHandler}
+ disabled={this.state.disableInputs}
+ value={this.state.startNode} />
+ </div>
+ <div className={this.state.displayReqProps} id='reqPropsText'>
+ <label htmlFor={'reqProps'}>Required Properties</label>
+ <input type='text'
+ id='reqProps'
+ className={styling}
+ name='reqProps'
+ placeholder={this.state.reqPropPlaceholder}
+ onChange={this.inputChangeHandler}
+ disabled={this.state.disableInputs}
+ value={this.state.reqProps}/>
+ </div>
+ <div className={this.state.displayOptionalProps}>
+ <label htmlFor={'optionalProps'}>Optional Properties</label>
+ <input type='text'
+ id='optionalProps'
+ className={styling}
+ name='optionalProps'
+ placeholder={this.state.optionalPropPlaceholder}
+ onChange={this.inputChangeHandler}
+ disabled={this.state.disableInputs}
+ value={this.state.optionalProps} />
+ </div>
+ <div className='row addPaddingTop'>
+ <Col sm={12}>
+ <button className='btn btn-primary btn-md' disabled={!this.state.formIsValid}>Submit</button>
+ { INVLIST.isHistoryEnabled && (<button className='btn btn-outline-secondary' type='button' onClick={this.openHistory} disabled={!this.state.formIsValid}>History</button>)}
+ </Col>
+ </div>
+ </form>
+ </Col>
+ <Col md={4}>
+ <PanelGroup accordion id='rb-accordion'>
+ <Panel eventKey='1'>
+ <Panel.Heading>
+ <Panel.Title toggle>+ Simple Query</Panel.Title>
+ </Panel.Heading>
+ <Panel.Body collapsible className='cardwrap'>
+ <p>
+ Please specify a Query from the Dropdown Menu.<br />
+ <br />
+ Please enter exact location of the Starting Node Path
+ <br /> <br />
+ Submit
+ <br /> <br />
+ Examples: <br />
+ Query => complex-fromVnf<br />
+ Enter Starting Node => /network/pnfs/pnf/pnf-name1<br /> <br />
+ {simple}<br /><br />
+ *Simple Query requires no other values to be passed other than the start node path
+ </p>
+ </Panel.Body>
+ </Panel>
+ <Panel eventKey='2'>
+ <Panel.Heading>
+ <Panel.Title toggle>+ Advanced Queries with Properties</Panel.Title>
+ </Panel.Heading>
+ <Panel.Body collapsible>
+ <p className='cardwrap'>
+ Please specify a Query from the Dropdown Menu.<br />
+ <br />
+ Please enter exact location of the Starting Node Path<br /> <br />
+ Please enter required query parameter - if applicable<br /> <br />
+ Please enter optional query parameter - if applicable<br /> <br />
+ Example: <br />
+ Query => vlantag-fromVlanidouter<br /> <br />
+ {advanced}<br /> <br />
+ Required Properties: vlanIdOuter=203<br /> <br />
+ Optional Properties: vlanIdInner=103
+ </p>
+ </Panel.Body>
+ </Panel>
+ </PanelGroup>
+ </Col>
+ </div>
+ </div>
+
+ <div className='addPaddingTop'>
+ <div className='container-fluid model-container custom-query-result'>
+ <Spinner loading={this.state.isLoading}>
+ <Row className={this.state.isInitialLoad ? 'hidden' : 'show'}>
+ <Col md={12}>
+ <h2>
+ <span className='badge badge-dark'>{this.state.query}</span> Results
+ </h2>
+ <br/>
+ <h5>Total Results: <strong>{this.state.totalResults}</strong></h5>
+ </Col>
+ </Row>
+ { this.state.showResults && <div className='addPaddingTop'>
+ <OutputToggle scope={this} visualDisabled={this.state.totalResults > PAGINATION_CONSTANT}/>
+ </div> }
+ <Row className={this.state.showResults ? 'show' : 'hidden'}>
+ <Col md={8} className={this.state.showPagination ? 'show' : 'hidden'}>
+ <Pagination
+ activePage={this.state.activePage}
+ itemsCountPerPage={PAGINATION_CONSTANT.RESULTS_PER_PAGE}
+ totalItemsCount={this.state.totalResults}
+ pageRangeDisplayed={PAGINATION_CONSTANT.PAGE_RANGE_DISPLAY}
+ onChange={this.handlePageChange} />
+ </Col>
+ <Col md={2} className='text-right'>
+ <OverlayTrigger placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadAllTooltip}</Tooltip>}>
+ <span className="d-inline-block" style={{display: 'inline-block'}}>
+ <Button bsSize='small' onClick={()=>{this.getAllExcels(this.state.downloadCount)}}>
+ Download XLSX <i className='icon-documents-downloadablefile'></i>
+ </Button>
+ </span>
+ </OverlayTrigger>
+ </Col>
+ <Col md={2} className='text-right'>
+ <OverlayTrigger placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadRangeTooltip}</Tooltip>}>
+ <span className="d-inline-block" style={{display: 'inline-block'}}>
+ <Button bsSize='small' onClick={this.openDownloadRange}>
+ Download XLSX (Range) <i className='icon-documents-downloadablefile'></i>
+ </Button>
+ </span>
+ </OverlayTrigger>
+ </Col>
+ </Row>
+ <div className={'addPaddingTop alert alert-danger ' +(this.state.errorResults ? 'show' : 'hidden')} role="alert">
+ An error occurred, please try again later. If this issue persists, please contact the system administrator. {this.state.errorMessage}
+ </div>
+ <Row className={'addPaddingTop ' + (this.state.noResults ? 'show' : 'hidden')}>
+ <Col md={12}>
+ <h2>No Results Found</h2>
+ </Col>
+ </Row>
+ <Row className={this.state.isInitialLoad ? 'hidden' : 'show'}>
+ <div className={this.state.isLoading ? 'hidden' : 'show'}>
+ <div className='col align-self-center'>
+ <div className={classes}>
+ {nodes}
+ </div>
+ </div>
+ </div>
+ </Row>
+ <Row className={this.state.showPagination ? 'show' : 'hidden'}>
+ <Col md={12}>
+ <Pagination
+ activePage={this.state.activePage}
+ itemsCountPerPage={PAGINATION_CONSTANT.RESULTS_PER_PAGE}
+ totalItemsCount={this.state.totalResults}
+ pageRangeDisplayed={PAGINATION_CONSTANT.PAGE_RANGE_DISPLAY}
+ onChange={this.handlePageChange} />
+ </Col>
+ </Row>
+ </Spinner>
+ <Spinner loading={this.state.enableModelBusyFeedback}>
+ {downloadRangeModel}
+ </Spinner>
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
+
+export default CustomQuery;
Code Review / aai / sparky-fe.git / blobdiff