extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-24 03:31:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

better ux (#14)

Browse Source
This commit is contained in:
Michael Quigley 2022-08-08 13:24:14 -04:00
parent 23288d38cd
commit 5a007f2401
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/Environments.js
View File

@ -3,6 +3,11 @@ import Services from './Services';
const Environments = (props) => { const Environments = (props) => {
const columns = [ const columns = [
{
name: 'Description',
selector: row => row.environment.description,
sortable: true,
},
{ {
name: 'Host', name: 'Host',
selector: row => row.environment.host, selector: row => row.environment.host,
@ -13,11 +18,6 @@ const Environments = (props) => {
selector: row => row.environment.address, selector: row => row.environment.address,
sortable: true, sortable: true,
}, },
{
name: 'Description',
selector: row => row.environment.description,
sortable: true,
},
{ {
name: 'Identity', name: 'Identity',
selector: row => row.environment.zitiIdentityId, selector: row => row.environment.zitiIdentityId,

12
ui/src/Network.js
View File

@ -3,6 +3,8 @@ import * as metadata from './api/metadata';
import {useEffect, useLayoutEffect, useRef, useState} from "react"; import {useEffect, useLayoutEffect, useRef, useState} from "react";
import ReactFlow, {isNode, useNodesState} from "react-flow-renderer"; import ReactFlow, {isNode, useNodesState} from "react-flow-renderer";
import dagre from 'dagre'; import dagre from 'dagre';
import { mdiDesktopClassic, mdiAccessPointNetwork } from '@mdi/js';
import Icon from "@mdi/react";
const Network = () => { const Network = () => {
const [overview, setOverview] = useState([]); const [overview, setOverview] = useState([]);
@ -53,8 +55,10 @@ function buildGraph(overview) {
let envId = id let envId = id
out.nodes.push({ out.nodes.push({
id: '' + envId, id: '' + envId,
data: {label: 'Environment: ' + item.environment.zitiIdentityId}, data: { label: <div><Icon path={mdiDesktopClassic} size={0.75} className={"flowNode"}/> { item.environment.description } </div> },
position: {x: (id * 25), y: 0}, position: { x: (id * 25), y: 0 },
style: { width: 'fit-content', backgroundColor: '#aaa', color: 'white' },
type: 'input',
draggable: true draggable: true
}); });
id++ id++
@ -63,8 +67,10 @@ function buildGraph(overview) {
if(item.active) { if(item.active) {
out.nodes.push({ out.nodes.push({
id: '' + id, id: '' + id,
data: {label: 'Service: ' + item.zitiServiceId}, data: {label: <div><Icon path={mdiAccessPointNetwork} size={0.75} className={"flowNode"}/> { item.endpoint }</div>},
position: {x: (id * 25), y: 0}, position: {x: (id * 25), y: 0},
style: { width: 'fit-content', backgroundColor: '#9367ef', color: 'white' },
type: 'output',
draggable: true draggable: true
}) })
out.edges.push({ out.edges.push({

4
ui/src/index.css
View File

@ -125,4 +125,8 @@ h1, h2, h3, h4, h5, h6 {
.nested-services { .nested-services {
padding-left: 10em; padding-left: 10em;
}
svg.flowNode {
vertical-align: middle;
} }