extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-21 10:17:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

initial layout and design tweaks (#234)

Browse Source
This commit is contained in:
Michael Quigley 2023-05-03 12:42:56 -04:00
parent 0be4bbc513
commit f0daa9371e
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
4 changed files with 33 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ui/src/console/Console.js
View File

@ -1,4 +1,4 @@
import {Container, Nav, Navbar, NavDropdown} from "react-bootstrap"; import {Col, Container, Nav, Navbar, NavDropdown, Row} from "react-bootstrap";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import Visualizer from "./visualizer/Visualizer"; import Visualizer from "./visualizer/Visualizer";
import Enable from "./modals/Enable"; import Enable from "./modals/Enable";
@ -64,14 +64,22 @@ const Console = (props) => {
</Navbar.Collapse> </Navbar.Collapse>
</Container> </Container>
</Navbar> </Navbar>
<Visualizer <Container fluid={"xl"}>
user={props.user} <Row id={"controls-row"}>
overview={overview} <Col>
defaultSelection={defaultSelection} <Visualizer
selection={selection} user={props.user}
setSelection={setSelection} overview={overview}
/> defaultSelection={defaultSelection}
<Detail user={props.user} selection={selection} /> selection={selection}
setSelection={setSelection}
/>
</Col>
<Col>
<Detail user={props.user} selection={selection} />
</Col>
</Row>
</Container>
<Enable show={showEnableModal} onHide={closeEnableModal} token={props.user.token} /> <Enable show={showEnableModal} onHide={closeEnableModal} token={props.user.token} />
<Version show={showVersionModal} onHide={closeVersionModal} /> <Version show={showVersionModal} onHide={closeVersionModal} />
</Container> </Container>

30
ui/src/console/visualizer/Network.js
View File

@ -16,20 +16,8 @@ const Network = (props) => {
}, []); }, []);
const paintNode = (node, ctx) => { const paintNode = (node, ctx) => {
let nodeColor = "#636363"; let nodeColor = node.selected ? "#04adef" : "#9BF316";
let textColor = "#ccc"; let textColor = node.selected ? "white" : "black";
switch(node.type) {
case "environment":
nodeColor = "#444";
break;
case "share": // share
nodeColor = "#291A66";
break;
default:
//
}
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
ctx.textAlign = "center"; ctx.textAlign = "center";
@ -41,16 +29,6 @@ const Network = (props) => {
roundRect(ctx, node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14, 1.25); roundRect(ctx, node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14, 1.25);
ctx.fill(); ctx.fill();
if(node.selected) {
ctx.strokeStyle = "#c4bdde";
ctx.stroke();
} else {
if(node.type === "share") {
ctx.strokeStyle = "#433482";
ctx.stroke();
}
}
ctx.fillStyle = textColor; ctx.fillStyle = textColor;
ctx.fillText(node.label, node.x, node.y); ctx.fillText(node.label, node.x, node.y);
} }
@ -64,12 +42,12 @@ const Network = (props) => {
ref={targetRef} ref={targetRef}
graphData={props.networkGraph} graphData={props.networkGraph}
width={props.size.width} width={props.size.width}
height={500} height={800}
onNodeClick={nodeClicked} onNodeClick={nodeClicked}
linkOpacity={.75} linkOpacity={.75}
linkWidth={1.5} linkWidth={1.5}
nodeCanvasObject={paintNode} nodeCanvasObject={paintNode}
backgroundColor={"#3b2693"} backgroundColor={"linear-gradient(180deg, #0E0238 0%, #231069 100%);"}
cooldownTicks={300} cooldownTicks={300}
/> />
) )

4
ui/src/console/visualizer/graph.js
View File

@ -40,7 +40,7 @@ export const mergeGraph = (oldGraph, user, newOverview) => {
newGraph.links.push({ newGraph.links.push({
target: accountNode.id, target: accountNode.id,
source: envNode.id, source: envNode.id,
color: "#777" color: "#9BF316"
}); });
if(env.shares) { if(env.shares) {
env.shares.forEach(shr => { env.shares.forEach(shr => {
@ -59,7 +59,7 @@ export const mergeGraph = (oldGraph, user, newOverview) => {
newGraph.links.push({ newGraph.links.push({
target: envNode.id, target: envNode.id,
source: shrNode.id, source: shrNode.id,
color: "#777" color: "#9BF316"
}); });
}); });
} }

11
ui/src/index.css
View File

@ -25,7 +25,7 @@ code, pre {
.visualizer-container { .visualizer-container {
padding: 10px; padding: 10px;
background: #3b2693; background: linear-gradient(180deg, #0E0238 0%, #231069 100%);
border-radius: 15px; border-radius: 15px;
margin-top: 15px; margin-top: 15px;
} }
@ -120,4 +120,13 @@ code, pre {
#zrok-tou { #zrok-tou {
margin-top: 15px; margin-top: 15px;
}
#controls-row {
margin-left: -30px;
margin-right: -30px;
}
#navbar {
background: linear-gradient(180deg, #0E0238 0%, #231069 100%);
} }