mirror of
https://github.com/gosticks/web.git
synced 2026-10-06 22:57:01 +00:00
Use a top tab layout in network settings
The network info page now uses a form to display the data Signed-off-by: Mcat12 <newtoncat12@yahoo.com>
This commit is contained in:
Mcat12
@@ -67,25 +67,15 @@ class DHCPInfo extends Component {
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
<div className="card border-0 bg-success stat-dbl-height-lock">
|
||||
<div className="card-body">
|
||||
<div className="card-icon">
|
||||
<i className="fa fa-cogs fa-2x"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-img-overlay">
|
||||
<h3>{t("DHCP")}</h3>
|
||||
<pre>
|
||||
{t("DHCP Active")}: {this.state.active.toString()}<br/>
|
||||
{t("Start IP")}: {this.state.ip_start}<br/>
|
||||
{t("End IP")}: {this.state.ip_end}<br/>
|
||||
{t("Router IP")}: {this.state.router_ip}<br/>
|
||||
{t("Lease Time")}: {this.state.lease_time} h<br/>
|
||||
{t("Domain")}: {this.state.domain}<br/>
|
||||
{t("IPv6 Support")}: {this.state.ipv6_support.toString()}<br/>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<pre>
|
||||
{t("DHCP Active")}: {this.state.active.toString()}<br/>
|
||||
{t("Start IP")}: {this.state.ip_start}<br/>
|
||||
{t("End IP")}: {this.state.ip_end}<br/>
|
||||
{t("Router IP")}: {this.state.router_ip}<br/>
|
||||
{t("Lease Time")}: {this.state.lease_time} h<br/>
|
||||
{t("Domain")}: {this.state.domain}<br/>
|
||||
{t("IPv6 Support")}: {this.state.ipv6_support.toString()}<br/>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,41 +69,31 @@ class DNSInfo extends Component {
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
<div className="card border-0 bg-success stat-dbl-height-lock">
|
||||
<div className="card-body">
|
||||
<div className="card-icon">
|
||||
<i className="fa fa-binoculars fa-2x"/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-sm-4 col-xs-4">
|
||||
<pre>
|
||||
<br/>
|
||||
{t("Upstream DNS Servers")}:<br/>
|
||||
{this.state.upstream_dns.map(item => item + "\n")}<br/>
|
||||
</pre>
|
||||
</div>
|
||||
<div className="card-img-overlay">
|
||||
<h3>{t("DNS")}</h3>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-sm-4 col-xs-4">
|
||||
<pre>
|
||||
<br/>
|
||||
{t("Upstream DNS Servers")}:<br/>
|
||||
{this.state.upstream_dns.map(item => item + "\n")}<br/>
|
||||
</pre>
|
||||
</div>
|
||||
<div className="col-lg-4 col-sm-4 col-xs-4">
|
||||
<pre>
|
||||
<br/>
|
||||
{t("Interface listening behavior")}: {this.state.options.listening_type}<br/>
|
||||
{t("Forward FQDNs only")}: {this.state.options.fqdn_required.toString()}<br/>
|
||||
{t("Only forward public reverse lookups")}:{this.state.options.bogus_priv.toString()}<br/>
|
||||
{t("Use DNSSEC")}: {this.state.options.dnssec.toString()}
|
||||
</pre>
|
||||
</div>
|
||||
<div className="col-lg-4 col-sm-4 col-xs-4">
|
||||
<pre>
|
||||
<br/>
|
||||
{t("Conditional Forwarding")}<br/>
|
||||
{t("Enabled")}: {this.state.conditional_forwarding.enabled.toString()}<br/>
|
||||
{t("Router IP")}: {this.state.conditional_forwarding.router_ip.toString()}<br/>
|
||||
{t("Local Domain Name")}: {this.state.conditional_forwarding.domain.toString()}<br/>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-sm-4 col-xs-4">
|
||||
<pre>
|
||||
<br/>
|
||||
{t("Interface listening behavior")}: {this.state.options.listening_type}<br/>
|
||||
{t("Forward FQDNs only")}: {this.state.options.fqdn_required.toString()}<br/>
|
||||
{t("Only forward public reverse lookups")}:{this.state.options.bogus_priv.toString()}<br/>
|
||||
{t("Use DNSSEC")}: {this.state.options.dnssec.toString()}
|
||||
</pre>
|
||||
</div>
|
||||
<div className="col-lg-4 col-sm-4 col-xs-4">
|
||||
<pre>
|
||||
<br/>
|
||||
{t("Conditional Forwarding")}<br/>
|
||||
{t("Enabled")}: {this.state.conditional_forwarding.enabled.toString()}<br/>
|
||||
{t("Router IP")}: {this.state.conditional_forwarding.router_ip.toString()}<br/>
|
||||
{t("Local Domain Name")}: {this.state.conditional_forwarding.domain.toString()}<br/>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -56,23 +56,11 @@ class FTLInfo extends Component {
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
<div className="card border-0 bg-success stat-dbl-height-lock">
|
||||
<div className="card-block">
|
||||
<div className="card-icon">
|
||||
<i className="fa fa-database fa-2x"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-img-overlay">
|
||||
<h3>
|
||||
{t("FTL Database")}
|
||||
</h3>
|
||||
<pre>
|
||||
{t("Queries")}: {this.state.queries}<br/>
|
||||
{t("Filesize")}: {this.state.filesize} B<br/>
|
||||
{t("SQLite version")}: {this.state.sqlite_version}<br/>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<pre>
|
||||
{t("Queries")}: {this.state.queries}<br/>
|
||||
{t("Filesize")}: {this.state.filesize} B<br/>
|
||||
{t("SQLite version")}: {this.state.sqlite_version}<br/>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
* This file is copyright under the latest version of the EUPL.
|
||||
* Please see LICENSE file for your rights under this license. */
|
||||
|
||||
import React, { Component } from "react";
|
||||
import React, { Component, Fragment } from "react";
|
||||
import { translate } from "react-i18next";
|
||||
import { api, ignoreCancel, makeCancelable } from "../../utils";
|
||||
import { Col, Form, FormGroup, Input, Label } from "reactstrap";
|
||||
|
||||
class NetworkInfo extends Component {
|
||||
state = {
|
||||
@@ -58,22 +59,34 @@ class NetworkInfo extends Component {
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
<div className="card border-0 bg-success stat-dbl-height-lock">
|
||||
<div className="card-block">
|
||||
<div className="card-icon">
|
||||
<i className="fa fa-sitemap fa-2x"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-img-overlay">
|
||||
<h3>{t("Network")}</h3>
|
||||
<pre>
|
||||
{t("Interface")}: {this.state.interface}<br/>
|
||||
{t("IPv4 address")}: {this.state.ipv4_address}<br/>
|
||||
{t("IPv6 address")}: {this.state.ipv6_address}<br/>
|
||||
{t("Hostname")}: {this.state.hostname}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<Fragment>
|
||||
<Form>
|
||||
<FormGroup row>
|
||||
<Label for="interface" sm={4}>{t("Interface")}</Label>
|
||||
<Col sm={8}>
|
||||
<Input plaintext id="interface">{this.state.interface}</Input>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
<FormGroup row>
|
||||
<Label for="ipv4_address" sm={4}>{t("IPv4 address")}</Label>
|
||||
<Col sm={8}>
|
||||
<Input plaintext id="ipv4_address">{this.state.ipv4_address}</Input>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
<FormGroup row>
|
||||
<Label for="ipv6_address" sm={4}>{t("IPv6 address")}</Label>
|
||||
<Col sm={8}>
|
||||
<Input plaintext id="ipv6_address">{this.state.ipv6_address}</Input>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
<FormGroup row>
|
||||
<Label for="hostname" sm={4}>{t("Hostname")}</Label>
|
||||
<Col sm={8}>
|
||||
<Input plaintext id="hostname">{this.state.hostname}</Input>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+72
-24
@@ -8,30 +8,78 @@
|
||||
* This file is copyright under the latest version of the EUPL.
|
||||
* Please see LICENSE file for your rights under this license. */
|
||||
|
||||
import React from 'react';
|
||||
import React, { Component } from "react";
|
||||
import { translate } from "react-i18next";
|
||||
import { Nav, NavItem, NavLink, TabContent, TabPane } from "reactstrap";
|
||||
import DHCPInfo from "../components/settings/DHCPInfo";
|
||||
import DNSInfo from "../components/settings/DNSInfo";
|
||||
import NetworkInfo from "../components/settings/NetworkInfo";
|
||||
import FTLInfo from "../components/settings/FTLInfo";
|
||||
|
||||
import DHCPInfo from '../components/settings/DHCPInfo';
|
||||
import DNSInfo from '../components/settings/DNSInfo';
|
||||
import NetworkInfo from '../components/settings/NetworkInfo';
|
||||
import FTLInfo from '../components/settings/FTLInfo';
|
||||
class Networking extends Component {
|
||||
state = {
|
||||
activeTab: "network"
|
||||
};
|
||||
|
||||
export default () => (
|
||||
<div className="animated fadeIn">
|
||||
<div className="container-flex">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-xs-6">
|
||||
<NetworkInfo/>
|
||||
</div>
|
||||
<div className="col-lg-6 col-xs-6">
|
||||
<DHCPInfo/>
|
||||
</div>
|
||||
<div className="col-lg-12 col-xs-12">
|
||||
<DNSInfo/>
|
||||
</div>
|
||||
<div className="col-lg-3 col-xs-3">
|
||||
<FTLInfo/>
|
||||
</div>
|
||||
/**
|
||||
* Set the active tab to the input
|
||||
*
|
||||
* @param tab the tab ID to switch to
|
||||
*/
|
||||
setTab = tab => {
|
||||
if(this.state.activeTab !== tab) {
|
||||
this.setState({
|
||||
activeTab: tab
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a navigation tab
|
||||
*
|
||||
* @param id the tab's ID
|
||||
* @param name the tab's display name
|
||||
* @returns {NavItem} the tab component
|
||||
*/
|
||||
tab = (id, name) => (
|
||||
<NavItem>
|
||||
<NavLink active={this.state.activeTab === id} onClick={() => this.setTab(id)}>
|
||||
{name}
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
);
|
||||
|
||||
/**
|
||||
* Create tab content
|
||||
*
|
||||
* @param id the tab's ID
|
||||
* @param component the component to render in the tab
|
||||
* @returns {TabPane} the tab content component
|
||||
*/
|
||||
tabContent = (id, component) => (
|
||||
<TabPane tabId={id}>{component}</TabPane>
|
||||
);
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<Nav tabs>
|
||||
{this.tab("network", t("Network"))}
|
||||
{this.tab("dhcp", t("DHCP"))}
|
||||
{this.tab("dns", t("DNS"))}
|
||||
{this.tab("ftl", t("FTL"))}
|
||||
</Nav>
|
||||
<TabContent activeTab={this.state.activeTab}>
|
||||
{this.tabContent("network", <NetworkInfo/>)}
|
||||
{this.tabContent("dhcp", <DHCPInfo/>)}
|
||||
{this.tabContent("dns", <DNSInfo/>)}
|
||||
{this.tabContent("ftl", <FTLInfo/>)}
|
||||
</TabContent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(["common", "settings"])(Networking);
|
||||
|
||||
Reference in New Issue
Block a user