diff options
Diffstat (limited to 'src/app/byoq/CustomDSLSaveLoad.jsx')
| -rw-r--r-- | src/app/byoq/CustomDSLSaveLoad.jsx | 842 |
1 files changed, 842 insertions, 0 deletions
diff --git a/src/app/byoq/CustomDSLSaveLoad.jsx b/src/app/byoq/CustomDSLSaveLoad.jsx new file mode 100644 index 0000000..e106e4a --- /dev/null +++ b/src/app/byoq/CustomDSLSaveLoad.jsx @@ -0,0 +1,842 @@ +/* + * ============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 commonApi from 'utils/CommonAPIService.js'; +import {GlobalExtConstants} from 'utils/GlobalExtConstants.js'; +import Spinner from 'utils/SpinnerContainer.jsx'; +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 Tabs from 'react-bootstrap/lib/Tabs'; +import Tab from 'react-bootstrap/lib/Tab'; +import Pagination from 'react-js-pagination'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; +import Tooltip from 'react-bootstrap/lib/Tooltip'; +import Panel from 'react-bootstrap/lib/Panel'; +import {GeneralCommonFunctions} from 'utils/GeneralCommonFunctions.js'; +import Alert from 'react-bootstrap/lib/Alert'; +import MultiSelectDropDown from 'generic-components/MultiSelectDropDown.jsx'; +let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT; +let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE')); + +let INVLIST = GlobalExtConstants.INVLIST; + +const settings = { + 'NODESERVER': INVLIST.NODESERVER, + 'PROXY': INVLIST.PROXY, + 'PREFIX': INVLIST.PREFIX, + 'VERSION': INVLIST.VERSION, + 'USESTUBS': INVLIST.useStubs, + 'TABULAR': INVLIST.TABULAR, + 'APERTURE': INVLIST.APERTURE, + 'TABULARVERSION': INVLIST.TABULARVERSION +}; + +/** + * This class is used to handle any saving or loading of dsl queries + */ + +class CustomDSLSaveLoad extends Component { + + constructor(props) { + console.log(props); + super(props); + APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE')); + this.state = { + enablePublicQueriesBusyFeedback: false, + enableCommunityQueriesBusyFeedback: false, + enablePersonalQueriesBusyFeedback: false, + enableDeleteBusyFeedback: false, + loadedPublicQueries: [], + loadedCommunityQueries: [], + loadedPersonalQueries: [], + filteredPublicEntries: [], + filteredCommunityEntries: [], + filteredPersonalEntries: [], + initialFilteredPublicEntries: [], + initialFilteredCommunityEntries: [], + initialFilteredPersonalEntries:[], + totalPublicResults: 0, + totalCommunityResults: 0, + totalPersonalResults: 0, + queriesPublicErrMsg: false, + queriesCommunityErrMsg: false, + queriesPersonalErrMsg: false, + deleteErrMsg: false, + deleteSuccessfulMsg: false, + focusedEntryName: '', + focusedEntryType: false, + showDeleteModal: false, + filterPublicCriteria: '', + filterCommunityCriteria: '', + filterPersonalCriteria: '', + displayValue:'Category', + selectedOption:{"public":[],"community":[],"personal":[]}, + filterText:'', + activeType:'public', + queryId:'', + loadQueryList:[], + publicLoadQueryList:[], + personalLoadQueryList:[], + communityLoadQueryList:[], + loadQueryLimit:parseInt(sessionStorage.getItem(ENVIRONMENT + 'LOADTEMPLATE_MAX_COUNT')), + loadQueryFlag:true, + selectedCount:0 + }; + settings['ISAPERTURE']=APERTURE_SERVICE; + } + componentDidMount = () => { + this.setState({enablePersonalQueriesBusyFeedback:true,enablePublicQueriesBusyFeedback:true,enableCommunityQueriesBusyFeedback:true}); + this.getQueries(); + }; + componentWillUnmount = () => {}; + + filterPublicList = (event) =>{ + this.filterPublicListWithCategory(event.target.value); + } + filterPublicListWithCategory = (value) =>{ + var updatedList = this.state.loadedPublicQueries; + updatedList = Object.keys(updatedList).filter(key => { + return JSON.stringify(updatedList[key]).toLowerCase().search(value.toLowerCase()) !== -1; + }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} ); + let filterList=this.filterUpdatedList(updatedList, "public"); + console.log('filterPublicListWithCategory filterList>>>>>',filterList); + this.setState({filteredPublicEntries: filterList, totalPublicResults: Object.keys(filterList).length, filterPublicCriteria: value,filterText: value.toLowerCase()}); + } + filterCommunityList = (event) =>{ + this.filterCommunityListWithCategory(event.target.value); + } + filterCommunityListWithCategory = (value) =>{ + var updatedList = this.state.loadedCommunityQueries; + updatedList = Object.keys(updatedList).filter(key => { + return JSON.stringify(updatedList[key]).toLowerCase().search(value.toLowerCase()) !== -1; + }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} ); + let filterList=this.filterUpdatedList(updatedList, "community"); + console.log('filterCommunityListWithCategory filterList>>>>>',filterList); + this.setState({filteredCommunityEntries: filterList, totalCommunityResults: Object.keys(filterList).length, filterCommunityCriteria: value,filterText: value.toLowerCase()}); + } + filterPersonalList = (event) =>{ + this.filterPersonalListWithCategory(event.target.value); + } + filterPersonalListWithCategory =(value) =>{ + var updatedList = this.state.loadedPersonalQueries; + updatedList = Object.keys(updatedList).filter(key => { + return JSON.stringify(updatedList[key]).toLowerCase().search(value.toLowerCase()) !== -1; + }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} ); + let filterList=this.filterUpdatedList(updatedList, "personal"); + console.log('filterPersonalListWithCategory filterList>>>>>',filterList); + this.setState({filteredPersonalEntries: filterList, totalPersonalResults: Object.keys(filterList).length, filterPersonalCriteria: value,filterText: value.toLowerCase()}); + } + filterUpdatedList = (updatedList, type) =>{ + let selectedCategory = this.state.selectedOption[type]; + let filterList = []; + let selectedOption = []; + if(selectedCategory.length > 0){ + selectedOption = Object.keys(selectedCategory).map((index)=>{ + return selectedCategory[index].value; + }); + Object.keys(updatedList).map((key) => { + Object.keys(updatedList[key]).map((entry) => { + if(entry === 'category' && selectedOption.indexOf(updatedList[key][entry]) !==-1){ + filterList[key]=updatedList[key]; + } + }) + }); + }else{ + filterList=updatedList; + } + return filterList; + } + processQueryResponse = (res) => { + var formattedList = []; + for(var i = 0; i < res.length; i++){ + var newQueryObj = {}; + var requiredFieldCount = 0; + if(res[i]){ + newQueryObj.isSelect=false; + newQueryObj.id = res[i].id; + newQueryObj['is_aggregate'] = false; + newQueryObj['is_public'] = false; + newQueryObj['community_shared'] = false; + newQueryObj['template_details'] = []; + for(var j = 0; j < res[i].cols.length; j++){ + if(res[i].cols[j].name){ + if(res[i].cols[j].name === 'query_name'){ + requiredFieldCount++; + newQueryObj.name = res[i].cols[j].value; + } + if(res[i].cols[j].name === 'creator'){ + requiredFieldCount++; + newQueryObj.creator = res[i].cols[j].value; + } + if(res[i].cols[j].name === 'dsl'){ + requiredFieldCount++; + newQueryObj.dsl = res[i].cols[j].value; + } + if(res[i].cols[j].name === 'description'){ + newQueryObj.description = res[i].cols[j].value; + } + if(res[i].cols[j].name === 'is_aggregate'){ + newQueryObj['is_aggregate'] = res[i].cols[j].value; + } + if(res[i].cols[j].name === 'is_public'){ + newQueryObj['is_public'] = res[i].cols[j].value; + } + if(res[i].cols[j].name === 'community_shared'){ + newQueryObj['community_shared'] = res[i].cols[j].value; + } + if(res[i].cols[j].name === 'template_details'){ + newQueryObj['template_details'] = res[i].cols[j].value; + } + if(res[i].cols[j].name === 'category'){ + newQueryObj['category'] = res[i].cols[j].value; + } + } + } + newQueryObj.version = res[i].version; + } + if(requiredFieldCount === 3){ + formattedList[res[i].id] = newQueryObj; + }else{ + console.log('Issue occurred on query list processing for the following element: ' + JSON.stringify(newQueryObj)); + } + } + return formattedList; + } + + getPublicQueries = () => { + settings['ISTABULAR'] = true; + return new Promise((resolve, reject) => { + commonApi(settings, 'queries/is_public=true', 'GET', null, 'BYOQPublicQueries', GlobalExtConstants.OVERRIDE_DOMAIN) + .then(res => { + console.log('res:' + res.data, 'load'); + if(res.status === 200 || res.status === 404){ + if(res.data.status && (res.data.status !== 200 && res.data.status !== 201 && res.data.status !== 404)){ + this.triggerError(res.data); + }else{ + var list = this.processQueryResponse(res.data); + this.setState({ + enablePublicQueriesBusyFeedback:false, + filteredPublicEntries: list, + initialFilteredPublicEntries: list, + totalPublicResults: Object.keys(list).length, + loadedPublicQueries: list + }); + this.runPublicFilter(); + resolve(list); + } + }else{ + this.triggerError(res.data, 'public_load'); + } + resolve([]); + }, error=>{ + if(error.response.status === 404){ + this.setState({ + enablePublicQueriesBusyFeedback:false, + filteredPublicEntries: [], + totalPublicResults: 0, + initialFilteredPublicEntries:[], + loadedPublicQueries: [] + }); + }else{ + this.triggerError(error.response.data, 'public_load'); + } + resolve([]); + }).catch(error => { + this.triggerError(error, 'public_load'); + resolve([]); + }) + }) + } + getCommunityQueries = () => { + settings['ISTABULAR'] = true; + return new Promise((resolve, reject) => { + commonApi(settings, 'queries/community_shared=true', 'GET', null, 'BYOQCommunityQueries', GlobalExtConstants.OVERRIDE_DOMAIN) + .then(res => { + console.log('res:' + res.data, 'load'); + if(res.status === 200 || res.status === 404){ + if(res.data.status && (res.data.status !== 200 && res.data.status !== 201 && res.data.status !== 404)){ + this.triggerError(res.data); + }else{ + var list = this.processQueryResponse(res.data); + this.setState({ + enableCommunityQueriesBusyFeedback:false, + filteredCommunityEntries: list, + initialFilteredCommunityEntries: list, + totalCommunityResults: Object.keys(list).length, + loadedCommunityQueries: list + }); + this.runCommunityFilter(); + resolve(list); + } + }else{ + this.triggerError(res.data, 'community_load'); + } + resolve([]); + }, error=>{ + if(error.response.status === 404){ + this.setState({ + enableCommunityQueriesBusyFeedback:false, + filteredCommunityEntries: [], + totalCommunityResults: 0, + initialFilteredCommunityEntries:[], + loadedCommunityQueries: [] + }); + }else{ + this.triggerError(error.response.data, 'community_load'); + } + resolve([]); + }).catch(error => { + this.triggerError(error, 'community_load'); + resolve([]); + }) + }) + } + getPrivateQueries = () => { + settings['ISTABULAR'] = true; + let query='queries/is_public=false'; + if(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId')){ + query+='&creator=' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId'); + } + return new Promise((resolve, reject) => { + commonApi(settings, 'queries/is_public=false&creator=' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId'), 'GET', null, 'BYOQPersonalQueries', GlobalExtConstants.OVERRIDE_DOMAIN) + .then(res => { + console.log('res:' + res.data, 'load'); + if(res.status === 200 || res.status === 404){ + if(res.data.status && (res.data.status !== 200 && res.data.status !== 201 && res.data.status !== 404)){ + this.triggerError(res.data); + }else{ + var list = this.processQueryResponse(res.data); + this.setState({ + enablePersonalQueriesBusyFeedback:false, + filteredPersonalEntries: list, + initialFilteredPersonalEntries: list, + totalPersonalResults: Object.keys(list).length, + loadedPersonalQueries: list + }); + this.runPersonalFilter(); + resolve(list); + } + }else{ + this.triggerError(res.data, 'personal_load'); + } + resolve([]); + }, error=>{ + if(error.response.status === 404){ + this.setState({ + enablePersonalQueriesBusyFeedback:false, + filteredPersonalEntries: [], + initialFilteredPersonalEntries: [], + totalPersonalResults: 0, + loadedPersonalQueries: [] + }); + }else{ + this.triggerError(error.response.data, 'personal_load'); + } + resolve([]); + }).catch(error => { + this.triggerError(error, 'personal_load'); + resolve([]); + }) + }) + } + getQueries = () =>{ + var state = this; + this.getCommunityQueries(); + Promise.all([ + this.getPublicQueries(), + this.getPrivateQueries() + ]) + .then(function (responses) { + var result = Object.assign({}, responses[0], responses[1]); + state.props.setQueriesState(result); + state.setState({loadQueryList:[],publicLoadQueryList:[],personalLoadQueryList:[],communityLoadQueryList:[],selectedCount:0}); + }).catch(function (error) { + console.log(error); + }); + }; + triggerError = (error, type) => { + console.error('[CustomDslSaveLoad.jsx] error : ', JSON.stringify(error)); + let errMsg = ''; + if(error.status && error.message){ + errMsg += "Error Occurred: " + error.status + ' - ' +error.message; + }else{ + errMsg += "Error Occurred: " + JSON.stringify(error); + } + console.log(errMsg); + if(type === 'public_load'){ + this.setState({queriesPublicErrMsg:errMsg, + enablePublicQueriesBusyFeedback:false, + filteredPublicEntries: [], + totalPublicResults: 0, + loadedPublicQueries: []}); + var result = Object.assign({}, [], this.state.loadedPersonalQueries); + this.props.setQueriesState(result); + }else if(type === 'personal_load'){ + this.setState({queriesPersonalErrMsg:errMsg, + enablePersonalQueriesBusyFeedback:false, + filteredPersonalEntries: [], + totalPersonalResults: 0, + loadedPersonalQueries: []}); + var result = Object.assign({}, this.state.loadedPublicQueries, []); + this.props.setQueriesState(result); + }else if(type === 'community_load'){ + this.setState({queriesCommunityErrMsg:errMsg, + enableCommunityQueriesBusyFeedback:false, + filteredCommunityEntries: [], + totalCommunityResults: 0, + loadedCommunityQueries: []}); + var result = Object.assign({}, this.state.loadedCommunityQueries, []); + this.props.setQueriesState(result); + }else if (type === 'delete'){ + this.setState({deleteErrMsg: errMsg + " - Failed to delete query : " + this.state.focusedEntryName, enableDeleteBusyFeedback:false}); + GeneralCommonFunctions.scrollTo("deleteError"); + }else{ + console.log('[CustomDslSaveLoad.jsx] :: triggerError invoked with invalid type : ' + type); + } + } + + runPublicFilter = () =>{ + var updatedList = this.state.loadedPublicQueries; + updatedList = Object.keys(updatedList).filter(key => { + return JSON.stringify(updatedList[key]).toLowerCase().search(this.state.filterPublicCriteria.toLowerCase()) !== -1; + }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} ); + this.setState({filteredPublicEntries: updatedList, totalPublicResults: Object.keys(updatedList).length},()=>{if(this.state.selectedOption["public"].length>0){this.filterPublicListWithCategory(this.state.filterPublicCriteria)}}); + } + runCommunityFilter = () =>{ + var updatedList = this.state.loadedCommunityQueries; + updatedList = Object.keys(updatedList).filter(key => { + return JSON.stringify(updatedList[key]).toLowerCase().search(this.state.filterCommunityCriteria.toLowerCase()) !== -1; + }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} ); + this.setState({filteredCommunityEntries: updatedList, totalCommunityResults: Object.keys(updatedList).length},()=>{if(this.state.selectedOption["community"].length>0){this.filterCommunityListWithCategory(this.state.filterCommunityCriteria)}}); + } + runPersonalFilter = () =>{ + var updatedList = this.state.loadedPersonalQueries; + updatedList = Object.keys(updatedList).filter(key => { + return JSON.stringify(updatedList[key]).toLowerCase().search(this.state.filterPersonalCriteria.toLowerCase()) !== -1; + }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} ); + this.setState({filteredPersonalEntries: updatedList, totalPersonalResults: Object.keys(updatedList).length},()=>{if(this.state.selectedOption["personal"].length>0){this.filterPersonalListWithCategory(this.state.filterPersonalCriteria)}}); + } + + addElement = (element) =>{ + var updatedList = this.state.loadedPublicQueries; + updatedList[element.id] = element[0]; + this.setState({loadedPublicQueries: updatedList}); + this.props.setQueriesState(updatedList); + this.runPublicFilter(); + } + + submitDelete = () =>{ + var loadedQueries = []; + if(this.state.focusedEntryType === "personal"){ + loadedQueries = this.state.loadedPersonalQueries; + }else{ + loadedQueries = this.state.loadedPublicQueries; + } + this.setState({enableDeleteBusyFeedback:true}); + settings['ISTABULAR'] = true; + commonApi(settings, 'queries/' + encodeURIComponent(this.state.queryId), 'DELETE', '{\"id\":\"' + + encodeURIComponent(this.state.queryId) + '\"}', 'BYOQDeleteQuery', GlobalExtConstants.OVERRIDE_DOMAIN, null, + [{ + "name":"If-Match", + "value": loadedQueries[this.state.queryId].version + }]) + .then(res => { + console.log('res:' + res.data); + if(res.status === 200){ + if(res.data.status && (res.data.status !== 200 && res.data.status !== 201)){ + this.triggerError(res.data, 'delete'); + }else{ + var updatedList = loadedQueries; + //remove the entry from the list + updatedList = Object.keys(updatedList).filter(key => { + return key !== this.state.queryId; + }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} ); + this.setState({showDeleteModal:false, + focusedEntryName: '', + enableDeleteBusyFeedback:false, + deleteSuccessfulMsg: "Successfully deleted query : " + this.state.focusedEntryName}); + GeneralCommonFunctions.scrollTo("deleteSuccess"); + if(this.state.focusedEntryType === "personal"){ + this.getCommunityQueries(); + this.setState({loadedPersonalQueries: updatedList}); + var result = Object.assign({}, this.state.loadedPublicQueries, updatedList); + this.props.setQueriesState(result); + }else{ + this.setState({loadedPublicQueries: updatedList}); + var result = Object.assign({}, updatedList, this.state.loadedPersonalQueries); + this.props.setQueriesState(result); + } + this.runPublicFilter(); + this.runCommunityFilter(); + this.runPersonalFilter(); + } + }else{ + this.triggerError(res.data, 'delete'); + } + }, error=>{ + this.triggerError(error.response.data, 'delete'); + }).catch(error => { + this.triggerError(error, 'delete'); + }); + }; + + openDeleteModal = (id,name, isPublic) =>{ + var focusedEntryType = "public"; + if(isPublic === "true"){ + focusedEntryType = "public"; + }else{ + focusedEntryType = "personal"; + } + this.setState({showDeleteModal:true, focusedEntryName: name, focusedEntryType: focusedEntryType, deleteSuccessfulMsg:false, deleteErrMsg:false, queryId:id}); + }; + + closeDeleteModal = () =>{ + this.setState({showDeleteModal:false, focusedEntryName: '', focusedEntryType: false, deleteSuccessfulMsg:false, deleteErrMsg:false, queryId:''}); + }; + + loadQuery = (e) =>{ + this.loadQueryData(e.target.value,0); + }; + loadQueryData=(queryTemp, id)=>{ + let splitString = queryTemp.split('||'); + let name = splitString[0]; + let description = splitString[1]; + let category=(splitString[2] !== 'undefined')? splitString[2]:''; + let dsl = splitString[3]; + let isAggregate = splitString[4]; + let type = splitString[5]; + let queryId = splitString[6]; + let isCommunityShared = splitString[7]; + let templateDetails = splitString[8]; + this.props.loadCallback(name, description, category, dsl, isAggregate, type, queryId, isCommunityShared, id, templateDetails, false); + }; + loadBulkCallback =() =>{ + this.props.loadBulkCallback(this.state.loadQueryList); + } + loadAndRunQuery = (e) =>{ + let splitString = (e.target.value).split('||'); + let dsl = splitString[0]; + let isAggregate = splitString[1]; + this.props.loadCallback('', '', '', dsl, isAggregate, null, '', null, 0, [], true); + }; + onMultiSelectPublicDropdownSelect = (selectedOption) =>{ + console.log('onMultiSelectPublicDropdownSelect selectedList',selectedOption); + var tempSelection = this.state.selectedOption; + tempSelection["public"] = selectedOption; + this.setState({selectedOption:tempSelection},()=>{this.filterPublicListWithCategory(this.state.filterPublicCriteria)}); + }; + onMultiSelectCommunityDropdownSelect = (selectedOption) =>{ + console.log('onMultiSelectCommunityDropdownSelect selectedList',selectedOption); + var tempSelection = this.state.selectedOption; + tempSelection["community"] = selectedOption; + this.setState({selectedOption:tempSelection},()=>{this.filterCommunityListWithCategory(this.state.filterCommunityCriteria)}); + }; + onMultiSelectPersonalDropdownSelect = (selectedOption) =>{ + console.log('onMultiSelectPersonalDropdownSelect selectedList',selectedOption); + var tempSelection = this.state.selectedOption; + tempSelection["personal"] = selectedOption; + this.setState({selectedOption:tempSelection},()=>{this.filterPersonalListWithCategory(this.state.filterPersonalCriteria)}); + }; + prepareMultiOptions = (type) => { + //this.setState({activeType:type}); + let filteredEntries=[]; + if(type==='public'){ + filteredEntries=this.state.initialFilteredPublicEntries; + }else if(type==='community'){ + filteredEntries=this.state.initialFilteredCommunityEntries; + }else{ + filteredEntries=this.state.initialFilteredPersonalEntries; + } + let dupArray=[]; + let multiOption=Object.keys(filteredEntries).map((entry, idx) => { + let obj ={}; + if(filteredEntries[entry]['category'] && dupArray.indexOf(filteredEntries[entry]['category']) === -1){ + obj['value']=filteredEntries[entry]['category']; + obj['label']= filteredEntries[entry]['category']; + dupArray.push(filteredEntries[entry]['category']); + }else{ + obj=''; + } + return obj; + }); + let filterMultiOption = multiOption.filter((entry) => { + if(entry !== '') return entry; + }); + console.log('filterMultiOption>>>>>',filterMultiOption); + return filterMultiOption; + }; + editSavedQuery = (e) =>{ + let splitString = (e.target.value).split('||'); + let name = splitString[0]; + let description = splitString[1]; + let category = (splitString[2] !== 'undefined')? splitString[2]:''; + let dsl = atob(splitString[3]).replace('<pre>','').replace('</pre>',''); + let isAggregate = splitString[4]; + let type = splitString[5]; + let queryId= splitString[6]; + let isCommunityShared = splitString[7]; + let templateDetails = splitString[8]; + this.props.editCallback(name, description, category, dsl, isAggregate, type, queryId, isCommunityShared, templateDetails); + }; + loadAllQueries = () =>{ + console.log('this.state.loadQueryList>>>>',this.state.loadQueryList); + let loadQueryList=this.state.loadQueryList; + for(var l=0;l<loadQueryList.length;l++){ + this.loadQueryData(loadQueryList[l],l); + } + }; + onSelectCheckbox=(e) =>{ + let splitString = (e.target.value).split('||'); + let type = splitString[5]; + let queryId=splitString[6]; + let queryList=''; + let loadQuery=''; + if(type =='public'){ + queryList=this.state.filteredPublicEntries; + loadQuery= this.state.publicLoadQueryList; + }else if (type == 'personal'){ + queryList=this.state.filteredPersonalEntries; + loadQuery= this.state.personalLoadQueryList; + }else{ + queryList=this.state.filteredCommunityEntries; + loadQuery= this.state.communityLoadQueryList; + } + let flag= true; + if (e.target.checked) { + if(loadQuery.length<10){ + loadQuery.push(e.target.value); + queryList[queryId].isSelect=true; + } + }else{ + let index=loadQuery.indexOf(e.target.value); + loadQuery.splice(index,1); + queryList[queryId].isSelect=false; + } + flag=(loadQuery.length<=10)?true:false; + if(type=='public'){ + this.setState({loadQueryList:loadQuery,publicLoadQueryList:loadQuery,personalLoadQueryList:[],communityLoadQueryList:[],filteredPublicEntries:queryList,loadQueryFlag:flag,selectedCount:loadQuery.length}); + }else if(type=='personal'){ + this.setState({loadQueryList:loadQuery,personalLoadQueryList:loadQuery,publicLoadQueryList:[],communityLoadQueryList:[],filteredPersonalEntries:queryList,loadQueryFlag:flag,selectedCount:loadQuery.length}); + } else{ + this.setState({loadQueryList:loadQuery,communityLoadQueryList:loadQuery,publicLoadQueryList:[],personalLoadQueryList:[],filteredCommunityEntries:queryList,loadQueryFlag:flag,selectedCount:loadQuery.length}); + } + } + render() { + let savedQueryCard = (type, totalCount, filterList, filteredEntries) =>{ + let onMultiSelectDropdownSelect= (type==='public') ? this.onMultiSelectPublicDropdownSelect : (type==='community') ? this.onMultiSelectCommunityDropdownSelect : this.onMultiSelectPersonalDropdownSelect; + return <div className='card d3-model-card'> + <div className={'card-header ' + (this.props.isSavedQueryFlow ? 'show' : 'hidden')}> + <div> + <h3>Find A Query</h3> + </div> + </div> + <div className='card-header'> + <div> + <div style={{width:'82%',float:'left'}}> + <h5>Total Saved Queries: <strong>{totalCount}</strong></h5> + </div> + <div className={(this.props.isSavedQueryFlow ? 'show' : 'hidden')}> + <OverlayTrigger placement='top' overlay={<Tooltip id='tooltip-top'>{'Enabled for up to '+this.state.loadQueryLimit+' Queries'}</Tooltip>}> + <span className="d-inline-block" style={{display: 'inline-block'}}> + <button className='btn btn-outline-primary' type='button' onClick={()=>this.loadBulkCallback()} disabled={!(this.state.loadQueryList.length<=10 && this.state.loadQueryList.length>0)}>Load Selected Queries</button> + </span> + </OverlayTrigger> + </div> + </div> + <div> + <form> + <div className='alignFormTwinElements'> + <fieldset className="form-group"> + <input type="text" className="form-control form-control-lg" placeholder="Search" onChange={filterList}/> + </fieldset> + </div> + <div className='alignFormTwinElements'> + <fieldset className="form-group"> + <MultiSelectDropDown + options={this.prepareMultiOptions(type)} + displayValue={this.state.displayValue} + triggerSelect={onMultiSelectDropdownSelect} + /> + </fieldset> + </div> + </form> + </div> + </div> + <div className='card-content model-card-content'> + <table className="table table-hover table-striped"> + <thead> + <tr> + <th scope='col' className={(this.props.isSavedQueryFlow ? 'show' : 'hidden')}>Select</th> + <th scope="col">Name</th> + <th scope="col">Description</th> + <th scope="col">Category</th> + <th scope="col">Creator</th> + <th scope="col">Aggregate</th> + <th scope="col" className={((type === 'personal') ? '' : 'hidden')}>Shared</th> + <th scope="col">Actions</th> + </tr> + </thead> + <tbody> + {Object.keys(filteredEntries).sort(function(a, b) { + var compareA = a.toUpperCase(); + var compareB = b.toUpperCase(); + if(compareA < compareB) return -1; + if(compareA > compareB) return 1; + return 0; + }).map((entry, idx) => { + return ( + <tr> + <td className={(this.props.isSavedQueryFlow ? '' : 'hidden')}> + <div className="checkbox"> + <OverlayTrigger placement='top' overlay={<Tooltip id='tooltip-top'>{(this.state.selectedCount===this.state.loadQueryLimit)?'Reached Maximun Template Count '+this.state.loadQueryLimit:(this.state.loadQueryLimit-this.state.selectedCount)+' More Selectable'}</Tooltip>}> + <span className="d-inline-block" style={{display: 'inline-block'}}> + <label> + <input type="checkbox" checked={filteredEntries[entry].isSelect} onChange={this.onSelectCheckbox.bind(this)} value={filteredEntries[entry].name + '||' + filteredEntries[entry].description + '||' + filteredEntries[entry].category + '||' + filteredEntries[entry].dsl + '||' + filteredEntries[entry]['is_aggregate'] + '||' + type + '||' + entry + '||' + filteredEntries[entry]['community_shared'] + '||' + filteredEntries[entry]['template_details']} disabled={!filteredEntries[entry].isSelect && !this.state.loadQueryFlag}/> + </label> + </span> + </OverlayTrigger> + </div> + </td> + <td><strong>{filteredEntries[entry].name}</strong></td> + <td>{filteredEntries[entry].description}</td> + <td width='15%'>{(filteredEntries[entry].category)?filteredEntries[entry].category:''}</td> + <td>{filteredEntries[entry].creator}</td> + <td>{filteredEntries[entry]['is_aggregate']}</td> + <td className={((type === 'personal') ? '' : 'hidden')}>{filteredEntries[entry]['community_shared']}</td> + <td className="actionsRow"> + <div> + <button className={'btn btn-primary ' + (!this.props.isDSLBuilder ? '' : 'hidden')} type='button' value={filteredEntries[entry].dsl + "||" + filteredEntries[entry]['is_aggregate']} onClick={this.loadAndRunQuery}>Run</button> + <button className='btn btn-outline-secondary' type='button' value={filteredEntries[entry].name + '||' + filteredEntries[entry].description + '||' + filteredEntries[entry].category + '||' + filteredEntries[entry].dsl + '||' + filteredEntries[entry]['is_aggregate'] + '||' + type + '||' + entry + '||' + filteredEntries[entry]['community_shared'] + '||' + filteredEntries[entry]['template_details'] } onClick={this.loadQuery}>Load</button> + <button className={'btn btn-outline-secondary ' + ((this.props.isDataSteward || type === 'personal') && type !== 'community' && !this.props.isDSLBuilder ? '' : 'hidden')} type='button' value={filteredEntries[entry].name + '||' + filteredEntries[entry].description + '||' + filteredEntries[entry].category + '||' + filteredEntries[entry].dsl + '||' + filteredEntries[entry]['is_aggregate'] + '||' + type +'||' + entry + '||' + filteredEntries[entry]['community_shared'] + '||' + filteredEntries[entry]['template_details']} onClick={this.editSavedQuery}>Edit</button> + <button className={'btn btn-outline-secondary ' + ((this.props.isDataSteward || type === 'personal') && type !== 'community' && !this.props.isDSLBuilder ? '' : 'hidden')} type='button' onClick={(e) => this.openDeleteModal(entry,filteredEntries[entry].name, filteredEntries[entry]['is_public'])}>Delete</button> + </div> + </td> + </tr> + ); + })} + </tbody> + </table> + </div> + </div>}; + let savedQueryMessaging = (type, loadedQueries, queryErrMsg) => { return <Col> + <Alert className={!queryErrMsg ? 'show' : 'hidden'} bsStyle="warning"> + {type === 'public' && <h3>No Saved Public Queries Loaded</h3>} + {type === 'community' && <h3>No Saved Community Shared Queries Loaded</h3>} + {type === 'personal' && <h3>No Saved Personal Queries Loaded</h3>} + </Alert> + <Alert bsStyle="danger" className={queryErrMsg ? 'show' : 'hidden'} onDismiss={() => { + if(type==='public'){ + this.setState({queriesPublicErrMsg: false}); + }else if (type === 'community'){ + this.setState({queriesCommunityErrMsg: false}); + }else{ + this.setState({queriesPersonalErrMsg: false}); + }}}> + <h3>An error occurred</h3> + <p> + {queryErrMsg} + </p> + </Alert> + </Col> + } + let savedQueryTabs = () => { return <Tabs defaultActiveKey={'1'} id="multipleTabularView"> + <Tab eventKey={'1'} title={'Public'}> + <Spinner loading={this.state.enablePublicQueriesBusyFeedback}> + {Object.keys(this.state.loadedPublicQueries).length <= 0 && (<div>{savedQueryMessaging('public', this.state.loadedPublicQueries, this.state.queriesPublicErrMsg)}</div>)} + {Object.keys(this.state.loadedPublicQueries).length > 0 && (<div>{savedQueryCard('public', this.state.totalPublicResults, this.filterPublicList, this.state.filteredPublicEntries)}</div>)} + </Spinner> + </Tab> + <Tab eventKey={'2'} title={'Community'}> + <Spinner loading={this.state.enableCommunityQueriesBusyFeedback}> + {Object.keys(this.state.loadedCommunityQueries).length <= 0 && (<div>{savedQueryMessaging('community', this.state.loadedCommunityQueries, this.state.queriesCommunityErrMsg)}</div>)} + {Object.keys(this.state.loadedCommunityQueries).length > 0 && (<div>{savedQueryCard('community', this.state.totalCommunityResults, this.filterCommunityList, this.state.filteredCommunityEntries)}</div>)} + </Spinner> + </Tab> + <Tab eventKey={'3'} title={'My Personal Queries'}> + <Spinner loading={this.state.enablePersonalQueriesBusyFeedback}> + {Object.keys(this.state.loadedPersonalQueries).length <= 0 &&(<div>{savedQueryMessaging('personal', this.state.loadedPersonalQueries, this.state.queriesPersonalErrMsg)}</div>)} + {Object.keys(this.state.loadedPersonalQueries).length > 0 && (<div>{savedQueryCard('personal', this.state.totalPersonalResults, this.filterPersonalList, this.state.filteredPersonalEntries)}</div>)} + </Spinner> + </Tab> + </Tabs> + }; + if (!GlobalExtConstants.INVLIST.IS_ONAP){ + return (<div> + <div className='static-modal'> + <Modal show={this.state.showDeleteModal} onHide={this.closeDeleteModal} dialogClassName="modal-override"> + <Spinner loading={this.state.enableDeleteBusyFeedback}> + <Modal.Header> + <Modal.Title>Delete DSL Query</Modal.Title> + </Modal.Header> + <Modal.Body> + <Alert id="deleteError" className={this.state.deleteErrMsg ? 'show' : 'hidden'} bsStyle="danger" onDismiss={() => this.setState({deleteErrMsg: false})}> + <h3>An error occurred</h3> + <p> + {this.state.deleteErrMsg} + </p> + </Alert> + <p>Are you sure you want to delete the following query?: {this.state.focusedEntryName}</p> + </Modal.Body> + <Modal.Footer> + <Button onClick={this.closeDeleteModal}>Cancel</Button> + <Button onClick={this.submitDelete}>Delete</Button> + </Modal.Footer> + </Spinner> + </Modal> + </div> + + <Row> + <Col className={this.props.isSavedQueryFlow ? 'col-lg-10' : 'col-lg-12'}> + <Alert id="deleteSuccess" bsStyle="success" className={this.state.deleteSuccessfulMsg ? 'show' : 'hidden'} onDismiss={() => this.setState({deleteSuccessfulMsg: false})}> + <h3>Delete Successful</h3> + <p> + {this.state.deleteSuccessfulMsg} + </p> + </Alert> + {!this.props.isSavedQueryFlow && (<Panel> + <Panel.Heading> + <Panel.Title toggle> + <div className="checkbox"> + <h2>Saved Queries</h2> + </div> + </Panel.Title> + </Panel.Heading> + <Panel.Collapse> + <Panel.Body className='cardwrap'> + {savedQueryTabs()} + </Panel.Body> + </Panel.Collapse> + </Panel>)} + {this.props.isSavedQueryFlow && savedQueryTabs()} + </Col> + </Row> + </div>); + }else{ + return (<span></span>); + } + } +} + +export default CustomDSLSaveLoad; |