From 0dac9f4f3482610e5a7fb754f0ac96fa6fe5b630 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Tue, 3 Jan 2023 11:36:31 -0500
Subject: [PATCH] detail card details (#141)

---
 ui/src/console/detail/AccountDetail.js     | 5 ++++-
 ui/src/console/detail/EnvironmentDetail.js | 4 +++-
 ui/src/console/detail/ServiceDetail.js     | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui/src/console/detail/AccountDetail.js b/ui/src/console/detail/AccountDetail.js
index 4da788e9..230d950f 100644
--- a/ui/src/console/detail/AccountDetail.js
+++ b/ui/src/console/detail/AccountDetail.js
@@ -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>
     );
 }
diff --git a/ui/src/console/detail/EnvironmentDetail.js b/ui/src/console/detail/EnvironmentDetail.js
index 16df2286..151654e3 100644
--- a/ui/src/console/detail/EnvironmentDetail.js
+++ b/ui/src/console/detail/EnvironmentDetail.js
@@ -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"}
diff --git a/ui/src/console/detail/ServiceDetail.js b/ui/src/console/detail/ServiceDetail.js
index 5d0d5a5c..7417e006 100644
--- a/ui/src/console/detail/ServiceDetail.js
+++ b/ui/src/console/detail/ServiceDetail.js
@@ -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"} />