|
|
@@ -0,0 +1,577 @@
|
|
|
+//© 2019 Dublin City University, Trinity College Dublin. All rights reserved. This material may not be reproduced, displayed, modified or distributed without the express prior written permission of the copyright holder.
|
|
|
+import React, { Component } from 'react';
|
|
|
+import {
|
|
|
+ Modal,
|
|
|
+ ModalHeader,
|
|
|
+ ModalBody,
|
|
|
+ ModalFooter,
|
|
|
+ Button,
|
|
|
+ FormGroup,
|
|
|
+ Form,
|
|
|
+ Label,
|
|
|
+ Input,
|
|
|
+ Col,
|
|
|
+ Card,
|
|
|
+ CardHeader,
|
|
|
+ CardBody,
|
|
|
+ Table,
|
|
|
+ ListGroup,
|
|
|
+ CustomInput
|
|
|
+} from 'reactstrap';
|
|
|
+import Slider from 'react-rangeslider'
|
|
|
+import 'react-rangeslider/lib/index.css'
|
|
|
+import LoadingSpinner from '../Dashboard/loading';
|
|
|
+import LoadingFailed from '../Dashboard/loadingFailed';
|
|
|
+import { allMetricsForAssessment } from '../../services/luzzuFrameWorkAPIs/getAllMetricsAvailableForAssessment';
|
|
|
+import { checkDatasetPLDExists } from '../../services/tripleStoreAPIs/sparql/checkDatasetPLDExists';
|
|
|
+import { read } from '../../services/tripleStoreAPIs/readFromTripleStore';
|
|
|
+import { deleteGraph } from '../../services/tripleStoreAPIs/deleteGraphFromTripleStore';
|
|
|
+import { addDataset,getDataset, updateDataset, getStatus } from '../../services/datasetConfigDetails/datasetConfigDetails';
|
|
|
+import { uploadToTripleStore } from '../../services/tripleStoreAPIs/uploadToTripleStore';
|
|
|
+import { get1SpatialAssessmentMetrics } from '../../services/tripleStoreAPIs/sparql/get1SpatialAssessmentMetrics';
|
|
|
+import { statusUpdate } from '../../services/tripleStoreAPIs/statusUpdate';
|
|
|
+import properties from '../../config/dashboardProperties';
|
|
|
+import metricExceptionMapping from '../../config/metricKnowledgeBaseMapping';
|
|
|
+
|
|
|
+class PipelineConnectDatasetOptions extends Component {
|
|
|
+ state = {
|
|
|
+ ...this.props.currentState,
|
|
|
+ pipelineNum : 0,
|
|
|
+ assessmentMetrics: [],
|
|
|
+ assessmentDimensions : [],
|
|
|
+ dimensionValues: [],
|
|
|
+ metricValues: [],
|
|
|
+ dimensionsNames: [],
|
|
|
+ categories: [],
|
|
|
+ categoryValues: [],
|
|
|
+ sessionStore: JSON.parse(sessionStorage.getItem("PIPELINECACHE"))
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ let category = [...new Set(this.state.sessionStore[this.state.pipelineNum].dimensionData.map((metric) => (metric.result.cat.value).split("/")[5]))];
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ categories: category
|
|
|
+ }, () => { this.prepareMetricDetails(); }
|
|
|
+ );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ prepareMetricDetails = () => {
|
|
|
+ let tempArrayThree = [];
|
|
|
+ this.state.categories.map((cat) => {
|
|
|
+ let dims = [];
|
|
|
+ (this.state.sessionStore[this.state.pipelineNum].dimensionData.map((assessed) => {
|
|
|
+ if (cat === (assessed.result.cat.value).split("/")[5]) {
|
|
|
+ var contains = false
|
|
|
+ dims.forEach((metric)=>{
|
|
|
+ if(metric == (assessed.result.dimInstance.value).split("/")[5]){
|
|
|
+ contains = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(!contains){
|
|
|
+ dims.push((assessed.result.dimInstance.value).split("/")[5])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ var item = {
|
|
|
+ category: (cat).split("-")[0],
|
|
|
+ dimensions: dims,
|
|
|
+ }
|
|
|
+ tempArrayThree.push(item)
|
|
|
+ });
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ categoryValues: tempArrayThree
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ metrictoggleChange = (index) => (event) => {
|
|
|
+ let prevAssessmentDetails = [...this.state.assessmentDetails];
|
|
|
+ let changeAssessmentDetails = prevAssessmentDetails[index];
|
|
|
+
|
|
|
+ if (changeAssessmentDetails.target === 1.0) {
|
|
|
+ changeAssessmentDetails.target = 0;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ changeAssessmentDetails.target = 1.0;
|
|
|
+ }
|
|
|
+ prevAssessmentDetails[index] = changeAssessmentDetails;
|
|
|
+
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ prevAssessmentDetails
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ assessMetricChange = (index) => (event) => {
|
|
|
+ let prevAssessmentDetails = [...this.state.assessmentDetails];
|
|
|
+ let changeAssessmentDetails = prevAssessmentDetails[index];
|
|
|
+
|
|
|
+ if (event.target.value === "false") {
|
|
|
+ changeAssessmentDetails.assess = false;
|
|
|
+ changeAssessmentDetails.prevtarget = changeAssessmentDetails.target;
|
|
|
+ changeAssessmentDetails.target = 0;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ changeAssessmentDetails.assess = true;
|
|
|
+ changeAssessmentDetails.target = changeAssessmentDetails.prevtarget;
|
|
|
+ }
|
|
|
+ prevAssessmentDetails[index] = changeAssessmentDetails;
|
|
|
+
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ prevAssessmentDetails
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ metricValueChange = (index) => (value) => {
|
|
|
+ let prevAssessmentDetails = [...this.state.assessmentDetails];
|
|
|
+ let changeAssessmentDetails = prevAssessmentDetails[index];
|
|
|
+
|
|
|
+ if (changeAssessmentDetails.assess === true) {
|
|
|
+ changeAssessmentDetails.target = value;
|
|
|
+ prevAssessmentDetails[index] = changeAssessmentDetails;
|
|
|
+
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ prevAssessmentDetails
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ checkExistingdatasetPLDInTripleStore = (datasetPLD) =>
|
|
|
+ {
|
|
|
+ let exists = false;
|
|
|
+
|
|
|
+ return new Promise((resolve)=>
|
|
|
+ {
|
|
|
+ this.setState({isloading:true},()=>{
|
|
|
+ read(checkDatasetPLDExists(datasetPLD)).then((response)=>{
|
|
|
+ //console.log(response);
|
|
|
+ this.setState({isloading:false},()=>{
|
|
|
+ if(response)
|
|
|
+ {
|
|
|
+ if(response.results.bindings.length>0)
|
|
|
+ {
|
|
|
+ exists = true;
|
|
|
+ resolve(exists);
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ exists=false;
|
|
|
+ resolve(exists);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ exists=false;
|
|
|
+ resolve(exists);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ checkExistingDatasetPLDInConfigFile = (datasetPLD) =>
|
|
|
+ {
|
|
|
+ let exists = false;
|
|
|
+
|
|
|
+ return new Promise((resolve)=>
|
|
|
+ {
|
|
|
+ this.setState({isloading:true},()=>{
|
|
|
+
|
|
|
+ let parameter = {
|
|
|
+ datasetPLD: datasetPLD
|
|
|
+ };
|
|
|
+
|
|
|
+ getDataset(parameter).then((response)=>{
|
|
|
+ //console.log(response);
|
|
|
+ this.setState({isloading:false},()=>{
|
|
|
+ if(response.status===200)
|
|
|
+ {
|
|
|
+ if(response.data.datasetDetails.length>0)
|
|
|
+ {
|
|
|
+ exists=true;
|
|
|
+ resolve(exists);
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ exists=false;
|
|
|
+ resolve(exists);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ exists=false;
|
|
|
+ resolve(exists);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ checkWrapperServiceIsReachable =()=>
|
|
|
+ {
|
|
|
+ let isReachable = false;
|
|
|
+
|
|
|
+ return new Promise((resolve)=>
|
|
|
+ {
|
|
|
+ this.setState({isloading:true},()=>{
|
|
|
+ getStatus().then((response)=>{
|
|
|
+ this.setState({isloading:false},()=>{
|
|
|
+ if(response.status===200)
|
|
|
+ {
|
|
|
+ if(response.data.status==="OK")
|
|
|
+ {
|
|
|
+ isReachable=true;
|
|
|
+ resolve(isReachable);
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ isReachable=false;
|
|
|
+ resolve(isReachable);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ isReachable=false;
|
|
|
+ resolve(isReachable);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ checkTripleStoreIsReachable =()=>
|
|
|
+ {
|
|
|
+ let isReachable = false;
|
|
|
+
|
|
|
+ return new Promise((resolve)=>
|
|
|
+ {
|
|
|
+ this.setState({isloading:true},()=>{
|
|
|
+ statusUpdate().then((response)=>{
|
|
|
+ this.setState({isloading:false},()=>{
|
|
|
+ if(response)
|
|
|
+ {
|
|
|
+
|
|
|
+ if(response.status===200)
|
|
|
+ {
|
|
|
+ isReachable=true;
|
|
|
+ resolve(isReachable);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ isReachable=false;
|
|
|
+ resolve(isReachable);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ isReachable=false;
|
|
|
+ resolve(isReachable);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ checkMetricsWithSameURI = (assessmentMetrics) => {
|
|
|
+ //console.log(assessmentMetrics);
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let problems = [];
|
|
|
+ if (assessmentMetrics.length > 0) {
|
|
|
+ let dictionary = {};
|
|
|
+ let metricsToAssess = 0;
|
|
|
+ assessmentMetrics.forEach((metric) => {
|
|
|
+ if (metric.assess === true) {
|
|
|
+ metricsToAssess += 1;
|
|
|
+ if (dictionary[metric.metric] === undefined) {
|
|
|
+ dictionary[metric.metric] = new Array();
|
|
|
+ }
|
|
|
+ dictionary[metric.metric].push(metric.label);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let keys = Object.keys(dictionary);
|
|
|
+
|
|
|
+ keys.forEach((key) => {
|
|
|
+ if (dictionary[key].length > 1) {
|
|
|
+ problems.push({
|
|
|
+ [key]: [...dictionary[key]]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (metricsToAssess === 0) {
|
|
|
+ problems.push({
|
|
|
+ NoMetricSelected: ["Please select alteast one Metric for assessment"]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //console.log(problems);
|
|
|
+ return resolve(problems);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ problems.push({
|
|
|
+ NoMetricSelected: ["Please select alteast one Metric for assessment"]
|
|
|
+ });
|
|
|
+ return resolve(problems);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ triggerSubmitValidation = async () => {
|
|
|
+ let fileIsUploadedToTripleStore = false;
|
|
|
+ let graphName = "";
|
|
|
+ const targets = this.state.assessmentDetails.filter((metric) => { if (metric.assess) { return true; } return false; }).map((metric) => { if (metric.type === "boolean") { return (1); } else { return (metric.target); } });
|
|
|
+ let expectedProgress = 0.0;
|
|
|
+ if (targets.length > 0) {
|
|
|
+ expectedProgress = targets.reduce((previous, current) => current += previous) / targets.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ let assessmentMetrics = [];
|
|
|
+ assessmentMetrics = this.state.assessmentDetails.map((metric) => { return ({ javaPackageName: metric.javapackagename, label: metric.label, comment: metric.comment, category: metric.category, dimension: metric.dimension, metric: metric.metricURI, assess: metric.assess, type: metric.type, target: Number(parseFloat(metric.target).toFixed(2)) }); });
|
|
|
+
|
|
|
+ let tripleStoreIsReachable = true;
|
|
|
+ let wrapperServiceIsReachable = true;
|
|
|
+ let existingDatasetPLDInConfigFile=false;
|
|
|
+ let existingdatasetPLDInTripleStore=false;
|
|
|
+ let metricSelectionProblems = [];
|
|
|
+
|
|
|
+ //tripleStoreIsReachable=await this.checkTripleStoreIsReachable();
|
|
|
+ wrapperServiceIsReachable = await this.checkWrapperServiceIsReachable();
|
|
|
+ metricSelectionProblems = await this.checkMetricsWithSameURI(assessmentMetrics);
|
|
|
+ if (!wrapperServiceIsReachable)
|
|
|
+ {
|
|
|
+ metricSelectionProblems.push({WrapperServiceNotAvailable: "Host:"+properties.wrapperAPI.host+", Port:"+properties.wrapperAPI.port});
|
|
|
+ }
|
|
|
+
|
|
|
+ if(wrapperServiceIsReachable & this.state.datasetID === "")
|
|
|
+ {
|
|
|
+ existingDatasetPLDInConfigFile = await this.checkExistingDatasetPLDInConfigFile(this.state.datasetPLD);
|
|
|
+
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ if(tripleStoreIsReachable & this.state.datasetID === "")
|
|
|
+ {
|
|
|
+ existingdatasetPLDInTripleStore = await this.checkExistingdatasetPLDInTripleStore(this.state.datasetPLD);
|
|
|
+ }
|
|
|
+ */
|
|
|
+
|
|
|
+ if (existingDatasetPLDInConfigFile | existingdatasetPLDInTripleStore)
|
|
|
+ {
|
|
|
+ metricSelectionProblems.push({datasetPLDAlreadyExists: this.state.datasetPLD});
|
|
|
+ }
|
|
|
+
|
|
|
+ if(metricSelectionProblems.length===0)
|
|
|
+ {
|
|
|
+ let fileName = "";
|
|
|
+ if (!this.state.isSparqlEndPoint) {
|
|
|
+ fileName = this.state.fileUploadedPath + this.state.fileUploadedName;
|
|
|
+ }
|
|
|
+ if (this.state.datasetID === "") {
|
|
|
+ //Functionality to Add new Dataset
|
|
|
+ let requestBody = {
|
|
|
+ datasetID: Math.floor(Date.now()),
|
|
|
+ datasetName: this.state.datasetName,
|
|
|
+ fileName: fileName,
|
|
|
+ datasetPLD: this.state.datasetPLD,
|
|
|
+ isSparqlEndPoint: this.state.isSparqlEndPoint,
|
|
|
+ sparqlEndPoint: this.state.sparqlEndPointURL,
|
|
|
+ lastAssessmentRequestID: "",
|
|
|
+ knowledgeBaseID: "",
|
|
|
+ expectedProgress: Number(parseFloat(expectedProgress).toFixed(2)),
|
|
|
+ assessmentMetrics: [...assessmentMetrics]
|
|
|
+ }
|
|
|
+ this.setState({ isloading: true }, () => {
|
|
|
+ addDataset(requestBody).then(async (res) => {
|
|
|
+ //Upload File to Triple Store
|
|
|
+ if (!this.state.isSparqlEndPoint & !fileIsUploadedToTripleStore) {
|
|
|
+ graphName = this.state.fileUploadedName.split('.').slice(0, -1).join('.');
|
|
|
+ await uploadToTripleStore(this.state.fileToUpload, graphName).then((response) => {
|
|
|
+ if (response) {
|
|
|
+ if (response.status === 201) {
|
|
|
+ fileIsUploadedToTripleStore = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ fileIsUploadedToTripleStore = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res.status === 201) {
|
|
|
+ this.setState({
|
|
|
+ isloading: false,
|
|
|
+ loadFailed: false
|
|
|
+ }, () => {
|
|
|
+ this.props.onSubmit(fileIsUploadedToTripleStore, graphName);
|
|
|
+ this.props.whenAddNew(requestBody);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.setState({
|
|
|
+ isloading: false,
|
|
|
+ loadFailed: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ //Functionality to Update existing Dataset
|
|
|
+ let requestBody = {
|
|
|
+ datasetID: this.state.datasetID,
|
|
|
+ datasetName: this.state.datasetName,
|
|
|
+ fileName: fileName,
|
|
|
+ datasetPLD: this.state.datasetPLD,
|
|
|
+ isSparqlEndPoint: this.state.isSparqlEndPoint,
|
|
|
+ sparqlEndPoint: this.state.sparqlEndPointURL,
|
|
|
+ knowledgeBaseID: this.state.knowledgeBaseID,
|
|
|
+ lastAssessmentRequestID: this.state.lastAssessmentRequestID,
|
|
|
+ expectedProgress: Number(parseFloat(expectedProgress).toFixed(2)),
|
|
|
+ assessmentMetrics: [...assessmentMetrics]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setState({ isloading: true }, () => {
|
|
|
+ updateDataset(requestBody, this.state.datasetID).then(async (res) => {
|
|
|
+ //Upload File to Triple Store
|
|
|
+ //console.log(this.state.fileToUpload);
|
|
|
+ if (!this.state.isSparqlEndPoint & !fileIsUploadedToTripleStore & this.state.fileToUpload !== null) {
|
|
|
+ graphName = this.state.fileUploadedName.split('.').slice(0, -1).join('.');
|
|
|
+ //Delete Old Graph
|
|
|
+ if(this.state.historyFileToUpload!==null)
|
|
|
+ {
|
|
|
+
|
|
|
+ await deleteGraph(this.state.graphName).then((response)=>{
|
|
|
+ //console.log(response);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ await uploadToTripleStore(this.state.fileToUpload, graphName).then((response) => {
|
|
|
+ if (response) {
|
|
|
+ if (response.status === 201) {
|
|
|
+ fileIsUploadedToTripleStore = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ fileIsUploadedToTripleStore = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res.status === 200) {
|
|
|
+ this.setState({
|
|
|
+ isloading: false,
|
|
|
+ loadFailed: false
|
|
|
+ }, () => {
|
|
|
+
|
|
|
+ this.props.onSubmit(fileIsUploadedToTripleStore, graphName);
|
|
|
+ this.props.whenUpdateExisting(requestBody);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.setState({
|
|
|
+ isloading: false,
|
|
|
+ loadFailed: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ //Has Problem
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ hasProblems: true,
|
|
|
+ assessmentProblems: metricSelectionProblems
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ toggleAlertModel = () => {
|
|
|
+ this.setState({
|
|
|
+ loadFailed: false
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ toggleProblemsModel = () => {
|
|
|
+ this.setState({
|
|
|
+ hasProblems: false,
|
|
|
+ assessmentProblems: []
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ triggerBackAction = () => {
|
|
|
+ this.props.onBack(this.state);
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+
|
|
|
+ let metricTable = null;
|
|
|
+ console.log(this.state.categoryValues)
|
|
|
+ if(this.state.categoryValues.length > 0){
|
|
|
+ console.log('in')
|
|
|
+ metricTable = (
|
|
|
+ this.state.categoryValues.map((cat) => {
|
|
|
+ return <Card key={cat.category}><CardHeader><b style={{ 'textTransform': 'uppercase' }}>{cat.category}</b></CardHeader><CardBody>
|
|
|
+ {cat.dimensions.map((dimension) => {
|
|
|
+ return <Card key={dimension}><CardHeader><b style={{ 'textTransform': 'uppercase' }}>{dimension}</b></CardHeader><CardBody><Table striped responsive size="sm"><thead><tr><th style={{ width: '60%' }}>METRIC NAME</th><th style={{ width: '15%' }}>ASSESS?</th><th style={{ width: '25%' }}>SET TARGET</th></tr></thead><tbody>
|
|
|
+ </tbody></Table></CardBody></Card>
|
|
|
+ })}
|
|
|
+ </CardBody></Card>
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ console.log(metricTable)
|
|
|
+ return (
|
|
|
+ <Modal isOpen={true} className="modal-dialog-centered modal-lg">
|
|
|
+ <ModalHeader style={{ margin: 'auto' }}>Configure Metrics for Test Dataset</ModalHeader>
|
|
|
+ <ModalBody>
|
|
|
+ {this.state.isloading ? <LoadingSpinner /> : null}
|
|
|
+ {this.state.loadFailed ? <LoadingFailed clickHandler={this.toggleAlertModel} /> : null}
|
|
|
+ <Form>
|
|
|
+ <FormGroup>
|
|
|
+ <div data-spy="scroll" data-target="#metric-list">
|
|
|
+ <ListGroup id="metric-list">
|
|
|
+ <Col xs={'auto'}>
|
|
|
+ {metricTable}
|
|
|
+ </Col>
|
|
|
+ </ListGroup>
|
|
|
+ </div>
|
|
|
+ </FormGroup>
|
|
|
+ </Form>
|
|
|
+ </ModalBody>
|
|
|
+ <ModalFooter>
|
|
|
+ <Button color="secondary" onClick={this.triggerBackAction}>Back</Button>
|
|
|
+ <Button color="primary" onClick={this.triggerSubmitValidation}>Next</Button>{' '}
|
|
|
+ </ModalFooter>
|
|
|
+ </Modal>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+export default PipelineConnectDatasetOptions;
|
IanKelly121