mirror of
https://github.com/openziti/zrok.git
synced 2024-12-22 23:02:52 +01:00
detail card details (#141)
This commit is contained in:
parent
cbae0d1d21
commit
0dac9f4f34
@ -1,7 +1,10 @@
|
||||
import {mdiCardAccountDetails} from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
|
||||
const AccountDetail = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<h2>Your Account: {props.user.email}</h2>
|
||||
<h2><Icon path={mdiCardAccountDetails} size={2} />{" "}{props.user.email}</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -2,6 +2,8 @@ import * as metadata from "../../api/metadata";
|
||||
import {useEffect, useState} from "react";
|
||||
import DataTable from 'react-data-table-component';
|
||||
import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines";
|
||||
import {mdiConsoleNetwork} from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
|
||||
const EnvironmentDetail = (props) => {
|
||||
const [detail, setDetail] = useState({});
|
||||
@ -64,7 +66,7 @@ const EnvironmentDetail = (props) => {
|
||||
if(detail.environment) {
|
||||
return (
|
||||
<div>
|
||||
<h2>Environment: {detail.environment.description} ({detail.environment.zId})</h2>
|
||||
<h2><Icon path={mdiConsoleNetwork} size={2} />{" "}{detail.environment.description}</h2>
|
||||
<div className={"zrok-datatable"}>
|
||||
<DataTable
|
||||
className={"zrok-datatable"}
|
||||
|
@ -1,6 +1,8 @@
|
||||
import * as metadata from "../../api/metadata";
|
||||
import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines";
|
||||
import {useEffect, useState} from "react";
|
||||
import {mdiShareVariant} from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
|
||||
const ServiceDetail = (props) => {
|
||||
const [detail, setDetail] = useState({});
|
||||
@ -29,7 +31,7 @@ const ServiceDetail = (props) => {
|
||||
if(detail) {
|
||||
return (
|
||||
<div>
|
||||
<h2>Service: {detail.token}</h2>
|
||||
<h2><Icon path={mdiShareVariant} size={2} />{" "}{detail.backendProxyEndpoint}</h2>
|
||||
<div className={"zrok-big-sparkline"}>
|
||||
<Sparklines data={detail.metrics} limit={60} height={20}>
|
||||
<SparklinesLine color={"#3b2693"} />
|
||||
|
Loading…
Reference in New Issue
Block a user