diff --git a/interface/src/components/MenuAppBar.tsx b/interface/src/components/MenuAppBar.tsx index 9ff87465e..9c8e9040b 100644 --- a/interface/src/components/MenuAppBar.tsx +++ b/interface/src/components/MenuAppBar.tsx @@ -8,7 +8,7 @@ import { Card, CardContent, CardActions } from '@material-ui/core'; import { withStyles, createStyles, Theme, WithTheme, WithStyles, withTheme } from '@material-ui/core/styles'; -import WifiIcon from '@material-ui/icons/Wifi'; +import SettingsEthernetIcon from '@material-ui/icons/SettingsEthernet'; import SettingsIcon from '@material-ui/icons/Settings'; import AccessTimeIcon from '@material-ui/icons/AccessTime'; import AccountCircleIcon from '@material-ui/icons/AccountCircle'; @@ -146,7 +146,7 @@ class MenuAppBar extends React.Component { - + diff --git a/interface/src/network/NetworkStatus.ts b/interface/src/network/NetworkStatus.ts index fa83dd7b0..f555bc574 100644 --- a/interface/src/network/NetworkStatus.ts +++ b/interface/src/network/NetworkStatus.ts @@ -1,13 +1,22 @@ -import { Theme } from '@material-ui/core'; -import { NetworkStatus, NetworkConnectionStatus } from './types'; +import { Theme } from "@material-ui/core"; +import { NetworkStatus, NetworkConnectionStatus } from "./types"; export const isConnected = ({ status }: NetworkStatus) => { - return ((status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED) || (status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED)); -} + return ( + status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED || + status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED + ); +}; -export const isWiFi = ({ status }: NetworkStatus) => (status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED) +export const isWiFi = ({ status }: NetworkStatus) => + status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED; +export const isEthernet = ({ status }: NetworkStatus) => + status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED; -export const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme) => { +export const networkStatusHighlight = ( + { status }: NetworkStatus, + theme: Theme +) => { switch (status) { case NetworkConnectionStatus.WIFI_STATUS_IDLE: case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED: @@ -22,7 +31,7 @@ export const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme) default: return theme.palette.warning.main; } -} +}; export const networkStatus = ({ status }: NetworkStatus) => { switch (status) { @@ -45,4 +54,4 @@ export const networkStatus = ({ status }: NetworkStatus) => { default: return "Unknown"; } -} +}; diff --git a/interface/src/network/NetworkStatusForm.tsx b/interface/src/network/NetworkStatusForm.tsx index 77a097998..889ddf3cb 100644 --- a/interface/src/network/NetworkStatusForm.tsx +++ b/interface/src/network/NetworkStatusForm.tsx @@ -1,45 +1,64 @@ -import React, { Component, Fragment } from 'react'; +import React, { Component, Fragment } from "react"; -import { WithTheme, withTheme } from '@material-ui/core/styles'; -import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'; +import { WithTheme, withTheme } from "@material-ui/core/styles"; +import { + Avatar, + Divider, + List, + ListItem, + ListItemAvatar, + ListItemText, +} from "@material-ui/core"; -import DNSIcon from '@material-ui/icons/Dns'; -import WifiIcon from '@material-ui/icons/Wifi'; -import SettingsInputComponentIcon from '@material-ui/icons/SettingsInputComponent'; -import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna'; -import DeviceHubIcon from '@material-ui/icons/DeviceHub'; -import RefreshIcon from '@material-ui/icons/Refresh'; +import DNSIcon from "@material-ui/icons/Dns"; +import WifiIcon from "@material-ui/icons/Wifi"; +import RouterIcon from "@material-ui/icons/Router"; +import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent"; +import SettingsInputAntennaIcon from "@material-ui/icons/SettingsInputAntenna"; +import DeviceHubIcon from "@material-ui/icons/DeviceHub"; +import RefreshIcon from "@material-ui/icons/Refresh"; -import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components'; -import { networkStatus, networkStatusHighlight, isConnected, isWiFi } from './NetworkStatus'; -import { NetworkStatus } from './types'; +import { + RestFormProps, + FormActions, + FormButton, + HighlightAvatar, +} from "../components"; +import { + networkStatus, + networkStatusHighlight, + isConnected, + isWiFi, + isEthernet, +} from "./NetworkStatus"; +import { NetworkStatus } from "./types"; type NetworkStatusFormProps = RestFormProps & WithTheme; class NetworkStatusForm extends Component { - dnsServers(status: NetworkStatus) { if (!status.dns_ip_1) { return "none"; } - return status.dns_ip_1 + (status.dns_ip_2 ? ',' + status.dns_ip_2 : ''); + return status.dns_ip_1 + (status.dns_ip_2 ? "," + status.dns_ip_2 : ""); } createListItems() { - const { data, theme } = this.props + const { data, theme } = this.props; + return ( - + {isWiFi(data) && } + {isEthernet(data) && } - { - isWiFi(data) && + {isWiFi(data) && ( @@ -51,8 +70,8 @@ class NetworkStatusForm extends Component { - } - { isConnected(data) && + )} + {isConnected(data) && ( @@ -67,14 +86,20 @@ class NetworkStatusForm extends Component { - + # - + @@ -83,7 +108,10 @@ class NetworkStatusForm extends Component { - + @@ -92,11 +120,14 @@ class NetworkStatusForm extends Component { - + - } + )} ); } @@ -104,18 +135,20 @@ class NetworkStatusForm extends Component { render() { return ( - - {this.createListItems()} - + {this.createListItems()} - } variant="contained" color="secondary" onClick={this.props.loadData}> + } + variant="contained" + color="secondary" + onClick={this.props.loadData} + > Refresh ); } - } export default withTheme(NetworkStatusForm);