pezkuwichain/pezkuwi-telemetry
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-telemetry.git synced 2026-04-28 07:27:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Filter nodes by name when typing (#53)

Browse Source 
* Allow filtering of nodes by name
* Tidy up
This commit is contained in:
Maciej Hirsz
2018-09-25 19:56:14 +02:00
committed by GitHub
parent df56e33bf6
commit 2e483a595f
7 changed files with 198 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/Node/Location.css
+12 -2
View File
@@ -11,10 +11,20 @@
top: 50%;
left: 50%;
cursor: pointer;
z-index: 1;
z-index: 2;
transition: border-color 0.25s linear;
}
.Node-Location-dimmed {
width: 2px;
height: 2px;
margin-left: -1px;
margin-top: -1px;
z-index: 1;
background: #bbb;
border: none;
}
.Node-Location-ping {
pointer-events: none;
position: absolute;
@@ -26,7 +36,7 @@
}
.Node-Location-synced {
z-index: 2;
z-index: 3;
border-color: #d64ca8;
}
packages/frontend/src/components/Node/Location.tsx
+23 -10
View File
@@ -20,6 +20,12 @@ import './Location.css';
namespace Location {
export type Quarter = 0 | 1 | 2 | 3;
export interface Props {
node: AppState.Node;
position: Position;
focused: boolean;
}
export interface Position {
left: number;
top: number;
@@ -31,13 +37,15 @@ namespace Location {
}
}
class Location extends React.Component<AppState.Node & Location.Position, Location.State> {
class Location extends React.Component<Location.Props, Location.State> {
public readonly state = { hover: false };
public render() {
const { left, top, quarter, location } = this.props;
const height = this.props.blockDetails[0];
const propagationTime = this.props.blockDetails[4];
const { node, position, focused } = this.props;
const { left, top, quarter } = position;
const { blockDetails, location } = node;
const height = blockDetails[0];
const propagationTime = blockDetails[4];
if (!location) {
return null;
@@ -45,10 +53,14 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
let className = `Node-Location Node-Location-quarter${quarter}`;
if (propagationTime != null) {
className += ' Node-Location-synced';
} else if (height % 2 === 1) {
className += ' Node-Location-odd';
if (focused) {
if (propagationTime != null) {
className += ' Node-Location-synced';
} else if (height % 2 === 1) {
className += ' Node-Location-odd';
}
} else {
className += ' Node-Location-dimmed';
}
return (
@@ -62,8 +74,9 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
}
private renderDetails(location: Types.NodeLocation) {
const [name, implementation, version, validator] = this.props.nodeDetails;
const [height, hash, blockTime, blockTimestamp, propagationTime] = this.props.blockDetails;
const { node } = this.props;
const [name, implementation, version, validator] = node.nodeDetails;
const [height, hash, blockTime, blockTimestamp, propagationTime] = node.blockDetails;
let validatorRow = null;