extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-12-23 07:09:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

detail card details (#141)

Browse Source
This commit is contained in:
Michael Quigley 2023-01-03 11:36:31 -05:00
parent cbae0d1d21
commit 0dac9f4f34
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/console/detail/AccountDetail.js
View File

@ -1,7 +1,10 @@
import {mdiCardAccountDetails} from "@mdi/js";
import Icon from "@mdi/react";
const AccountDetail = (props) => { const AccountDetail = (props) => {
return ( return (
<div> <div>
<h2>Your Account: {props.user.email}</h2> <h2><Icon path={mdiCardAccountDetails} size={2} />{" "}{props.user.email}</h2>
</div> </div>
); );
} }

4
ui/src/console/detail/EnvironmentDetail.js
View File

@ -2,6 +2,8 @@ import * as metadata from "../../api/metadata";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import DataTable from 'react-data-table-component'; import DataTable from 'react-data-table-component';
import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines"; import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines";
import {mdiConsoleNetwork} from "@mdi/js";
import Icon from "@mdi/react";
const EnvironmentDetail = (props) => { const EnvironmentDetail = (props) => {
const [detail, setDetail] = useState({}); const [detail, setDetail] = useState({});
@ -64,7 +66,7 @@ const EnvironmentDetail = (props) => {
if(detail.environment) { if(detail.environment) {
return ( return (
<div> <div>
<h2>Environment: {detail.environment.description} ({detail.environment.zId})</h2> <h2><Icon path={mdiConsoleNetwork} size={2} />{" "}{detail.environment.description}</h2>
<div className={"zrok-datatable"}> <div className={"zrok-datatable"}>
<DataTable <DataTable
className={"zrok-datatable"} className={"zrok-datatable"}

4
ui/src/console/detail/ServiceDetail.js
View File

@ -1,6 +1,8 @@
import * as metadata from "../../api/metadata"; import * as metadata from "../../api/metadata";
import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines"; import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {mdiShareVariant} from "@mdi/js";
import Icon from "@mdi/react";
const ServiceDetail = (props) => { const ServiceDetail = (props) => {
const [detail, setDetail] = useState({}); const [detail, setDetail] = useState({});
@ -29,7 +31,7 @@ const ServiceDetail = (props) => {
if(detail) { if(detail) {
return ( return (
<div> <div>
<h2>Service: {detail.token}</h2> <h2><Icon path={mdiShareVariant} size={2} />{" "}{detail.backendProxyEndpoint}</h2>
<div className={"zrok-big-sparkline"}> <div className={"zrok-big-sparkline"}>
<Sparklines data={detail.metrics} limit={60} height={20}> <Sparklines data={detail.metrics} limit={60} height={20}>
<SparklinesLine color={"#3b2693"} /> <SparklinesLine color={"#3b2693"} />