RepoConfigTestPanel...

Kai Reinhard

10.45.2019 618f5467f2bec282650b91652569677b2c3188c7

RepoConfigTestPanel...

 borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx

@@ -112,15 +112,18 @@
                                         repoConfig={repoConfig}
                                         handleRepoConfigChange={this.handleRepoConfigChange}
                                         setRepoValue={this.setRepoValue}/>
                <FormField length={12}>
                    <Link to={'/repos'} className={'btn btn-outline-primary'}><I18n name={'common.cancel'}/>
                    </Link>
                    <FormButton onClick={this.onSave} bsStyle="primary"
                                disabled={repoConfig.repo && repoConfig.repo.length > 0
                                && repoConfig.displayName && repoConfig.displayName.length > 0 ? false : true}
                                hintKey="configuration.save.hint"><I18n name={'common.save'}/>
                    </FormButton>
                </FormField>
                <FormGroup row={true}>
                    <FormLabel length={2}/>
                    <FormField length={10}>
                        <Link to={'/repos'} className={'btn btn-outline-primary'}><I18n name={'common.cancel'}/>
                        </Link>
                        <FormButton onClick={this.onSave} bsStyle="primary"
                                    disabled={repoConfig.repo && repoConfig.repo.length > 0
                                    && repoConfig.displayName && repoConfig.displayName.length > 0 ? false : true}
                                    hintKey="configuration.save.hint"><I18n name={'common.save'}/>
                        </FormButton>
                    </FormField>
                </FormGroup>
            </form>
            <code>
                <h2>Todo:</h2>

 borgbutler-webapp/src/components/views/repos/RepoConfigPanel.jsx

@@ -1,6 +1,5 @@
import React from 'react';
import {Alert, FormGroup} from 'reactstrap';
import {FormButton, FormField, FormLabel} from '../../general/forms/FormComponents';
import {FormButton, FormField, FormGroup, FormLabel} from '../../general/forms/FormComponents';
import {getRestServiceUrl} from '../../../utilities/global';
import I18n from "../../general/translation/I18n";
import LoadingOverlay from '../../general/loading/LoadingOverlay';
@@ -8,6 +7,7 @@
import ErrorAlert from "../../general/ErrorAlert";
import RepoConfigBasePanel from './RepoConfigBasePanel';
import RepoConfigPasswordPanel from './RepoConfigPasswordPanel';
import RepoConfigTestPanel from './RepoConfigTestPanel';

class RepoConfigPanel extends React.Component {

@@ -15,16 +15,13 @@
        super(props);
        this.state = {
            loading: false,
            repoConfig: undefined,
            testStatus: undefined,
            testResult: undefined
            repoConfig: undefined
        };

        this.fetch = this.fetch.bind(this);
        this.setRepoValue = this.setRepoValue.bind(this);
        this.onSave = this.onSave.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onTest = this.onTest.bind(this);
    }

    componentDidMount = () => this.fetch();
@@ -68,8 +65,6 @@
        //console.log(variable + "=" + value);
        this.setState({
            repoConfig: {...this.state.repoConfig, [variable]: value},
            // reset testStatus only, if test status is OK (config values are changed, new test required):
            testStatus: this.state.testStatus === 'OK' ? undefined : this.state.testStatus
        })
    }

@@ -87,34 +82,6 @@
        }
    }

    onTest(event) {
        this.setState({
            testStatus: 'fetching',
            testResult: undefined
        });
        fetch(getRestServiceUrl("repoConfig/check"), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.state.repoConfig)
        })
            .then(response => response.text())
            .then(result => {
                //console.log("test-result: " + result);
                this.setState({
                    testStatus: result === 'OK' ? 'OK' : 'error',
                    testResult: result
                })
            })
            .catch((error) => {
                console.log("error", error);
                this.setState({
                    testStatus: 'exception'
                });
            });
    }

    async onCancel() {
        const response = this.fetch();
        if (response) await response;
@@ -132,37 +99,6 @@
                description={'Repo not available or mis-configured (please refer the log files for more details).'}
            />
        }
        let testResult = undefined;
        let testButtonColor = this.props.repoError ? 'danger' : 'info';
        if (!this.state.testStatus) {
            // No test available.
        } else if (this.state.testStatus === 'exception') {
            testResult = <ErrorAlert title={'Unknown error'} description={'Internal error while calling Rest API.'}/>;
        } else if (this.state.testStatus === 'OK') {
            testResult = <Alert color={'success'}>
                OK
            </Alert>;
            testButtonColor = 'success';
        } else if (this.state.testStatus === 'fetching') {
            testResult = <Alert color={'warning'}>
                Testing...
            </Alert>;
        } else {
            testResult = <ErrorAlert
                title={'Error while testing repo configuration'}
                description={this.state.testResult}
            />
            testButtonColor = 'danger';
        }
        let testResultGroup = '';
        if (testResult) {
            testResultGroup = <FormGroup row={true}>
                <FormLabel length={2}>{'Test result'}</FormLabel>
                <FormField length={10}>
                    {testResult}
                </FormField>
            </FormGroup>;
        }
        if (this.state.isFetching) {
            content = <React.Fragment>Loading...</React.Fragment>;
        } else if (this.state.failed) {
@@ -187,22 +123,19 @@
                                         repoConfig={repoConfig}
                                         handleRepoConfigChange={this.handleRepoConfigChange}
                                         setRepoValue={this.setRepoValue}/>
                <FormGroup row={true}>
                    <FormLabel length={2} />
                <FormGroup>
                    <FormLabel length={2}/>
                    <FormField length={10}>
                        <FormButton onClick={this.onCancel}
                                    hintKey="configuration.cancel.hint"><I18n name={'common.cancel'}/>
                        </FormButton>
                        <FormButton onClick={this.onTest} disabled={this.state.testStatus === 'fetching'}
                                    bsStyle={testButtonColor}
                                    hint={'Tries to connect to the repo and to get info from.'}>Test
                        </FormButton>
                        <FormButton onClick={this.onSave} bsStyle="primary"
                                    hintKey="configuration.save.hint"><I18n name={'common.save'}/>
                        </FormButton>
                    </FormField>
                </FormGroup>
                {testResultGroup}
                <RepoConfigTestPanel repoConfig={this.state.repoConfig}
                                     repoError={this.props.repoError}/>
                <LoadingOverlay active={this.state.loading}/>
            </React.Fragment>;
        }

 borgbutler-webapp/src/components/views/repos/RepoConfigTestPanel.jsx

New file
@@ -0,0 +1,99 @@
import React from 'react';
import {Alert} from 'reactstrap';
import {FormButton, FormField, FormGroup, FormLabel} from '../../general/forms/FormComponents';
import PropTypes from "prop-types";
import {getRestServiceUrl} from "../../../utilities/global";
import ErrorAlert from "../../general/ErrorAlert";

class RepoConfigTestPanel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            testStatus: undefined,
            testResult: undefined
        };
        this.onTest = this.onTest.bind(this);
    }

    onTest(event) {
        this.setState({
            testStatus: 'fetching',
            testResult: undefined
        });
        fetch(getRestServiceUrl("repoConfig/check"), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.props.repoConfig)
        })
            .then(response => response.text())
            .then(result => {
                //console.log("test-result: " + result);
                this.setState({
                    testStatus: result === 'OK' ? 'OK' : 'error',
                    testResult: result
                });
            })
            .catch((error) => {
                console.log("error", error);
                this.setState({
                    testStatus: 'exception',
                    testResult: undefined
                });
            });
    }

    render() {
        let testButtonColor = 'outline-info';
        if (this.state.testStatus === 'OK') {
            testButtonColor = 'outline-success';
        } else if (this.state.testStatus === 'error' || this.state.testStatus === 'exception' || this.props.repoError) {
            testButtonColor = 'outline-danger';
        } else {
            testButtonColor = 'outline-info';
        }
        let testResult = undefined;
        if (!this.state.testStatus) {
            // No test available.
        } else if (this.state.testStatus === 'exception') {
            testResult = <ErrorAlert title={'Unknown error'} description={'Internal error while calling Rest API.'}/>;
        } else if (this.state.testStatus === 'OK') {
            testResult = <Alert color={'success'}>
                OK
            </Alert>;
        } else if (this.state.testStatus === 'fetching') {
            testResult = <Alert color={'warning'}>
                Testing...
            </Alert>;
        } else {
            testResult = <ErrorAlert
                title={'Error while testing repo configuration'}
                description={this.state.testResult}
            />
        }
        return <FormGroup>
            <FormLabel length={2}>
            </FormLabel>
            <FormField length={10}>
                <FormButton onClick={this.onTest} disabled={this.state.testStatus === 'fetching'}
                            bsStyle={testButtonColor}
                            hint={'Tries to connect to the repo and to get info from.'}>Test
                </FormButton>
                {testResult}
            </FormField>
        </FormGroup>;
    }
}

RepoConfigTestPanel.propTypes = {
    repoConfig: PropTypes.object.isRequired,
    repoError: PropTypes.bool
};

RepoConfigTestPanel.defaultProps = {
    repoError: false
};

export default RepoConfigTestPanel;