detail card details (#141)

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

View File

@ -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>
);
}

View File

@ -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"}

View File

@ -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"} />