Added version 1 fields to settings page

resources/js/components/Settings/SettingsIndex.js

@@ -259,7 +259,29 @@ export default class SettingsIndex extends Component {
                     classes: 'mr-2'
                 },
 
-            ]
+            ],
+            influxdb: [
+                {
+                    obj: data.influx_db_enabled,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.influx_db_host,
+                    type: 'text'
+                },
+                {
+                    obj: data.influx_db_port,
+                    type: 'number'
+                },
+                {
+                    obj: data.influx_db_username,
+                    type: 'text'
+                },
+                {
+                    obj: data.influx_db_password,
+                    type: 'password'
+                }
+            ],
         };
     }
 

resources/js/components/Settings/SettingsInput.js

@@ -112,6 +112,15 @@ export default class SettingsInput extends Component {
             onInput={this.handleInput} />
     }
 
+    generatePasswordInput(disabled) {
+        return <Form.Control
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput} />
+    }
+
     generateButtonGetInput() {
         var url = this.state.url;
 
@@ -146,6 +155,10 @@ export default class SettingsInput extends Component {
             input = this.generateTextInput(disabled);
         }
 
+        if(this.state.type === 'password') {
+            input = this.generatePasswordInput(disabled);
+        }
+
         if(this.state.type === 'btn-get') {
             input = this.generateButtonGetInput();
         }

resources/js/components/Settings/SettingsTabs.js

@@ -12,6 +12,7 @@ import HealthchecksSettings from './tabs/HealthchecksSettings';
 import NotificationsSettings from './tabs/NotificationsSettings';
 import Authentication from '../Authentication/Authentication';
 import TableSettings from './tabs/TableSettings';
+import InfluxDBSettings from './tabs/InfluxDBSettings';
 
 export default class SettingsTabs extends Component {
     constructor(props) {
@@ -30,6 +31,7 @@ export default class SettingsTabs extends Component {
             'Tables',
             'Notifications',
             'healthchecks.io',
+            'InfluxDB',
             'Reset',
             'Backup/Restore',
         ];
@@ -138,6 +140,11 @@ export default class SettingsTabs extends Component {
                             data={data.healthchecks}
                             generateInputs={this.generateInputs}
                             save={this.save} />
+            case 'InfluxDB':
+                return <InfluxDBSettings
+                            data={data.influxdb}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
             case 'Reset':
                 return <ResetSettings
                             data={data.healthchecks}

resources/js/components/Settings/tabs/InfluxDBSettings.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button, Tab } from 'react-bootstrap';
+import Axios from 'axios';
+
+export default class InfluxDBSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: this.props.data,
+        }
+    }
+
+    inputHandler = (name, val) => {
+        var settings = this.state.data;
+        var i = 0;
+        settings.forEach(ele => {
+            if(ele.obj.name == name) {
+                ele.obj.value = val;
+            }
+            settings[i] = ele;
+            i++;
+        });
+        this.setState({
+            data: settings
+        });
+    }
+
+    render() {
+        var settings = this.props.generateInputs(this.state.data, this.inputHandler);
+
+        return (
+            <Tab.Content>
+                {settings}
+                <div className="mt-3">
+                    <button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'healthchecks.io') }}>Save</button>
+                </div>
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('InfluxDBSettings')) {
+    ReactDOM.render(<InfluxDBSettings />, document.getElementById('InfluxDBSettings'));
+}