Twins
/
cockpit-tailscale
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

PatternFly table

main
Gerard Braad 2023-06-22 22:05:05 +08:00
parent 110f6d4f30
commit 78b1c4535c
3 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"@patternfly/react-core": "5.0.0-prerelease.13", "@patternfly/react-core": "5.0.0-prerelease.13",
"@patternfly/react-icons": "5.0.0-prerelease.7", "@patternfly/react-icons": "5.0.0-prerelease.7",
"@patternfly/react-styles": "5.0.0-prerelease.5", "@patternfly/react-styles": "5.0.0-prerelease.5",
"@patternfly/react-table": "5.0.0-prerelease.13",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"yarn": "^1.22.19" "yarn": "^1.22.19"

39
src/app.tsx
View File

@ -4,7 +4,11 @@ import { TailscaleBackendState, TailscalePeer, TailscaleStatus, TailscaleUp } fr
import { Icon } from '@patternfly/react-core'; import { Icon } from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import {
ExpandableRowContent,
Table, Caption, Thead, Tbody, Tr, Th, Td,
SortByDirection,
} from '@patternfly/react-table';
type ApplicationProps = { type ApplicationProps = {
} }
@ -30,17 +34,20 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
render() { render() {
const columns: TableProps['cols'] = ['', 'IP', 'Hostname'];
return ( return (
<> <>
{ {
this.state.Status != null this.state.Status != null
? <table> ? <Table
<tr> aria-label="Tailscale peers"
<th>Online</th> variant='compact' borders={false}>
<th>IP</th> <Caption>Tailscale peers</Caption>
<th>Host name</th> <Tbody>
</tr>
<Peer {...this.state.Status.Self} /> <Peer {...this.state.Status.Self} />
{ {
Object.entries(this.state.Status.Peer).map(peer => { Object.entries(this.state.Status.Peer).map(peer => {
@ -48,8 +55,8 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
} }
) )
} }
</Tbody>
</table> </Table>
: <p>Loading...</p> : <p>Loading...</p>
} }
</> </>
@ -61,14 +68,14 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
class Peer extends React.Component<TailscalePeer> { class Peer extends React.Component<TailscalePeer> {
render() { render() {
return ( return (
<tr> <Tr>
<td> <Td>
{this.props.Online {this.props.Online
? <Icon status="success"><CheckCircleIcon /></Icon> ? <Icon status="success"><CheckCircleIcon /></Icon>
: <Icon status="danger"><ExclamationCircleIcon /></Icon> : <Icon status="danger"><ExclamationCircleIcon /></Icon>
}</td> }</Td>
<td>{this.props.TailscaleIPs[0]}</td> <Td>{this.props.TailscaleIPs[0]}</Td>
<td>{this.props.HostName}</td> <Td>{this.props.HostName}</Td>
</tr>); </Tr>);
} }
} }

2
src/index.tsx
View File

@ -6,7 +6,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Application } from './app'; import { Application } from './app';
import "patternfly/patternfly-5-overrides.scss"; //import "patternfly/patternfly-5-overrides.scss";
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
ReactDOM.render( ReactDOM.render(