| New file |
| | |
| | | import React from 'react'; |
| | | import {FormGroup, Input} from 'reactstrap'; |
| | | import { |
| | | FormButton, |
| | | FormField, |
| | | FormInput, |
| | | FormLabelField, |
| | | FormLabelInputField |
| | | } from '../../general/forms/FormComponents'; |
| | | import {getRestServiceUrl} from '../../../utilities/global'; |
| | | import I18n from "../../general/translation/I18n"; |
| | | import LoadingOverlay from '../../general/loading/LoadingOverlay'; |
| | | import PropTypes from "prop-types"; |
| | | import ErrorAlert from "../../general/ErrorAlert"; |
| | | |
| | | class RepoConfigPanel |
| | | extends React |
| | | .Component { |
| | | |
| | | constructor(props) { |
| | | super(props); |
| | | this.state = { |
| | | loading: false, |
| | | repoConfig: undefined |
| | | }; |
| | | |
| | | this.fetch = this.fetch.bind(this); |
| | | this.handleTextChange = this.handleTextChange.bind(this); |
| | | this.onSave = this.onSave.bind(this); |
| | | this.onCancel = this.onCancel.bind(this); |
| | | } |
| | | |
| | | componentDidMount = () => this.fetch(); |
| | | |
| | | fetch = () => { |
| | | this.setState({ |
| | | isFetching: true, |
| | | failed: false, |
| | | repoConfig: undefined |
| | | }); |
| | | fetch(getRestServiceUrl('repos/repoConfig', { |
| | | id: this.props.id |
| | | }), { |
| | | method: 'GET', |
| | | headers: { |
| | | 'Accept': 'application/json' |
| | | } |
| | | }) |
| | | .then(response => response.json()) |
| | | .then(json => { |
| | | this.setState({ |
| | | isFetching: false, |
| | | repoConfig: json |
| | | }) |
| | | }) |
| | | .catch((error) => { |
| | | console.log("error", error); |
| | | this.setState({ |
| | | isFetching: false, |
| | | failed: true |
| | | }); |
| | | }) |
| | | }; |
| | | |
| | | handleTextChange = event => { |
| | | event.preventDefault(); |
| | | this.setState({[event.target.name]: event.target.value}); |
| | | } |
| | | |
| | | onSave(event) { |
| | | this.setState({ |
| | | loading: true |
| | | }) |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | this.setReload(); |
| | | } |
| | | |
| | | onCancel() { |
| | | this.setReload(); |
| | | } |
| | | |
| | | render() { |
| | | let content; |
| | | if (this.state.isFetching) { |
| | | content = <React.Fragment>Loading...</React.Fragment>; |
| | | } else if (this.state.failed) { |
| | | content = <ErrorAlert |
| | | title={'Cannot load config or repository'} |
| | | description={'Something went wrong during contacting the rest api.'} |
| | | action={{ |
| | | handleClick: this.fetchRepo, |
| | | title: 'Try again' |
| | | }} |
| | | />; |
| | | } else if (this.state.repoConfig) { |
| | | const repoConfig = this.state.repoConfig; |
| | | content = <React.Fragment> |
| | | <FormGroup> |
| | | <FormLabelInputField label={'Display name'} fieldLength={12} |
| | | name={'displayName'} value={repoConfig.displayName} |
| | | onChange={this.handleTextChange} |
| | | placeholder="Enter display name (only for displaying purposes)."/> |
| | | <FormLabelInputField label={'Repo'} fieldLength={12} |
| | | name={'repo'} value={repoConfig.repo} |
| | | onChange={this.handleTextChange} |
| | | placeholder="Enter the name of the repo, used by Borg."/> |
| | | <FormLabelInputField label={'RSH'} fieldLength={12} |
| | | name={'rsh'} value={repoConfig.rsh} |
| | | onChange={this.handleTextChange} |
| | | placeholder="Enter the rsh value (ssh command) for remote repository."/> |
| | | <FormLabelInputField label={'Password command'} fieldLength={12} |
| | | name={'passwordCommand'} value={repoConfig.passwordCommand} |
| | | onChange={this.handleTextChange} |
| | | placeholder="Enter the password command to get the command from."/> |
| | | <FormLabelInputField label={'Password'} fieldLength={6} type={'password'} |
| | | name={'passwordCommand'} value={repoConfig.password} |
| | | onChange={this.handleTextChange} |
| | | hint={"It's recommended to use password command instead."} |
| | | /> |
| | | <FormField length={12}> |
| | | <FormButton onClick={this.onCancel} |
| | | hintKey="configuration.cancel.hint"><I18n name={'common.cancel'}/> |
| | | </FormButton> |
| | | <FormButton onClick={this.onSave} bsStyle="primary" |
| | | hintKey="configuration.save.hint"><I18n name={'common.save'}/> |
| | | </FormButton> |
| | | </FormField> |
| | | </FormGroup> |
| | | <LoadingOverlay active={this.state.loading}/> |
| | | </React.Fragment>; |
| | | } |
| | | return <React.Fragment>{content}</React.Fragment>; |
| | | } |
| | | } |
| | | |
| | | RepoConfigPanel |
| | | .propTypes = { |
| | | id: PropTypes.string |
| | | }; |
| | | |
| | | export default RepoConfigPanel; |
| | | |