...

Kai Reinhard

18.59.2018 8f1019f522f630e98a254f13c4da96aed844bda1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {PageHeader} from '../../general/BootstrapComponents';
import LogFilters from './LogFilters';
import {changeFilter, requestLogReload} from '../../../actions';
import LogTable from './LogTable';
import I18n from '../../general/translation/I18n';
import './LogViewer.css';
import ErrorAlert from '../../general/ErrorAlert';
 
class LogPage extends React.Component {
 
    componentDidMount = () => this.props.loadLog();
 
    handleToggleSortOrder = () => {
        let filters = this.props.filters;
        this.props.changeFilter('ascendingOrder', filters.ascendingOrder === 'true' ? 'false'  : 'true');
        this.props.loadLog();
    };
 
    handleInputChange = (event) => {
        this.props.changeFilter(event.target.name, event.target.value);
    };
 
    render = () => {
 
        let content;
 
        if (this.props.loading) {
            content = <i>Loading...</i>
        } else if (this.props.failed) {
            content = <ErrorAlert
                title={'Cannot load Log'}
                description={'Something went wrong during contacting the rest api.'}
                action={{
                    handleClick: this.props.loadLog,
                    title: 'Try again'
                }}
            />;
        } else {
            content = <LogTable
                search={this.props.filters.search}
                locationFormat={this.props.filters.locationFormat}
                entries={this.props.entries}
                ascendingOrder={this.props.filters.ascendingOrder}
                toggleOrder={this.handleToggleSortOrder}
                showStackTrace={this.props.filters.showStackTrace}
            />;
        }
 
        return (
            <React.Fragment>
                <PageHeader><I18n name={'logviewer'} /></PageHeader>
                <LogFilters
                    filters={this.props.filters}
                    changeFilter={this.handleInputChange}
                    loadLog={(event) => {
                        event.preventDefault();
                        this.props.loadLog();
                    }}
                />
                {content}
            </React.Fragment>
        );
    };
}
 
LogPage.propTypes = {
    changeFilter: PropTypes.func.isRequired,
    filters: PropTypes.shape({
        threshold: PropTypes.oneOf(['error', 'warn', 'info', 'debug', 'trace']),
        search: PropTypes.string,
        locationFormat: PropTypes.oneOf(['none', 'short', 'normal']),
        showStackTrace: PropTypes.oneOf(['true', 'false']),
        maxSize: PropTypes.oneOf(['50', '100', '500', '1000', '10000']),
        ascendingOrder: PropTypes.oneOf(['true', 'false'])
    }).isRequired,
    loadLog: PropTypes.func.isRequired
};
 
const mapStateToProps = state => state.log;
 
const actions = {
    changeFilter,
    loadLog: requestLogReload
};
 
export default connect(mapStateToProps, actions)(LogPage);