From 8dbc221dd8b77f251b70ba5bf5331711f7579103 Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Wed, 15 Nov 2023 16:54:09 +0100
Subject: [PATCH] feat(springboot-plugin) Add Info and Health pages

---
 .../hawtio/src/plugins/springboot/Health.tsx  | 165 +++++++++++++++---
 .../hawtio/src/plugins/springboot/Info.tsx    |  45 ++++-
 .../src/plugins/springboot/SpringBoot.tsx     |  72 ++++++++
 .../src/plugins/springboot/Springboot.tsx     |  54 ------
 .../hawtio/src/plugins/springboot/Trace.tsx   |  10 +-
 .../hawtio/src/plugins/springboot/help.md     |   4 +-
 .../hawtio/src/plugins/springboot/index.ts    |  10 +-
 .../plugins/springboot/springboot-service.ts  |  58 ++++--
 .../hawtio/src/plugins/springboot/types.ts    |  29 +++
 9 files changed, 342 insertions(+), 105 deletions(-)
 create mode 100644 packages/hawtio/src/plugins/springboot/SpringBoot.tsx
 delete mode 100644 packages/hawtio/src/plugins/springboot/Springboot.tsx

diff --git a/packages/hawtio/src/plugins/springboot/Health.tsx b/packages/hawtio/src/plugins/springboot/Health.tsx
index b7dd9123..ca31cbe5 100644
--- a/packages/hawtio/src/plugins/springboot/Health.tsx
+++ b/packages/hawtio/src/plugins/springboot/Health.tsx
@@ -1,27 +1,152 @@
-import React from 'react'
-import { Card, CardBody, CardHeader, Grid, GridItem, PageSection, Title } from '@patternfly/react-core'
+import React, { useEffect, useState } from 'react'
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  gridSpans,
+  PageSection,
+  Title,
+} from '@patternfly/react-core'
 import { loadHealth } from '@hawtiosrc/plugins/springboot/springboot-service'
+import { HealthComponentDetail, HealthData } from '@hawtiosrc/plugins/springboot/types'
+import { TableComposable, Tbody, Td, Tr } from '@patternfly/react-table'
+import { humanizeLabels } from '@hawtiosrc/util/strings'
+import { ChartDonutUtilization } from '@patternfly/react-charts'
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InfoCircleIcon,
+  QuestionCircleIcon,
+} from '@patternfly/react-icons'
 
+const componentSpanRecord: Record<string, number[]> = {
+  diskSpace: [7, 2],
+  ping: [5, 0],
+  camelHealth: [5, 1],
+  camel: [5, 1],
+}
+const ComponentDetails: React.FunctionComponent<{ componentDetails: HealthComponentDetail[] }> = ({
+  componentDetails,
+}) => {
+  return (
+    <TableComposable variant='compact' borders={false}>
+      <Tbody style={{ fontSize: 'xx-small' }}>
+        {componentDetails.map((detail, index) => {
+          return (
+            <Tr key={'row' + detail.key + index}>
+              <Td key={detail.key + index}>{humanizeLabels(detail.key)}:</Td>
+              <Td>
+                {typeof detail.value === 'string' ? detail.value : <ComponentDetails componentDetails={detail.value} />}
+              </Td>
+            </Tr>
+          )
+        })}
+      </Tbody>
+    </TableComposable>
+  )
+}
+const HealthStatusIcon: React.FunctionComponent<{ status: string }> = ({ status }) => {
+  switch (status) {
+    case 'UP':
+      return <CheckCircleIcon color={'green'} />
+    case 'DOWN':
+      return <ExclamationCircleIcon color={'red'} />
+    case 'OUT_OF_SERVICE':
+      return <ExclamationTriangleIcon color={'orange'} />
+    case 'UNKNOWN':
+      return <QuestionCircleIcon />
+    default:
+      return <InfoCircleIcon color={'blue'} />
+  }
+}
+
+const DiskComponentDetails: React.FunctionComponent<{ componentDetails: HealthComponentDetail[] }> = ({
+  componentDetails,
+}) => {
+  const total = Number.parseInt(componentDetails.find(k => k.key === 'total')!.value as string)
+  const free = Number.parseInt(componentDetails.find(k => k.key === 'free')!.value as string)
+  const usedPercentage = Math.round(((total - free) * 100) / total)
+
+  return (
+    <Grid height={'100%'}>
+      <GridItem span={6}>
+        <ComponentDetails componentDetails={componentDetails} />
+      </GridItem>
+      <GridItem span={6}>
+        <ChartDonutUtilization
+          ariaDesc='Storage capacity'
+          ariaTitle='Donut utilization chart example'
+          constrainToVisibleArea
+          data={{ x: 'Used Space', y: usedPercentage }}
+          name='chart2'
+          subTitle='of available space'
+          title={`${usedPercentage}% used`}
+          thresholds={[{ value: 90 }]}
+          width={435}
+        />
+      </GridItem>
+    </Grid>
+  )
+}
 export const Health: React.FunctionComponent = () => {
-  loadHealth()
+  const [healthData, setHealthData] = useState<HealthData>()
+
+  useEffect(() => {
+    loadHealth().then(healthData => {
+      setHealthData(healthData)
+    })
+  }, [])
+
   return (
-    <PageSection variant='light'>
-      <Grid hasGutter span={12}>
-        <GridItem>
-          <Card>
-            <CardHeader>
-              <Title headingLevel='h2'>System</Title>
-            </CardHeader>
-            <CardBody></CardBody>
-          </Card>
-          <Card>
-            <CardHeader>
-              <Title headingLevel='h2'>System</Title>
-            </CardHeader>
-            <CardBody></CardBody>
-          </Card>
-        </GridItem>
-      </Grid>
+    <PageSection variant='default'>
+      {healthData && (
+        <Grid hasGutter span={4}>
+          <GridItem span={12}>
+            <Card>
+              <CardHeader>
+                <Flex>
+                  <HealthStatusIcon status={healthData?.status} />
+                  <Title headingLevel='h3'>
+                    <span>Overall status: {healthData?.status}</span>
+                  </Title>
+                </Flex>
+              </CardHeader>
+            </Card>
+          </GridItem>
+          {healthData?.components.map(component => (
+            <GridItem
+              span={componentSpanRecord[component.name]![0] as gridSpans}
+              key={component.name}
+              mdRowSpan={componentSpanRecord[component.name]![1] as gridSpans}
+            >
+              <Card>
+                <CardHeader>
+                  <Title headingLevel='h3'>{humanizeLabels(component.name!)}</Title>
+                </CardHeader>
+                <CardBody>
+                  <Flex>
+                    <FlexItem>
+                      <HealthStatusIcon status={component.status} />
+                    </FlexItem>
+                    <FlexItem>Status: {component.status}</FlexItem>
+                    {component.details &&
+                      (component.name === 'diskSpace' ? (
+                        <DiskComponentDetails componentDetails={component.details} />
+                      ) : (
+                        <ComponentDetails componentDetails={component.details} />
+                      ))}
+                  </Flex>
+                </CardBody>
+              </Card>
+            </GridItem>
+          ))}
+        </Grid>
+      )}
     </PageSection>
   )
 }
diff --git a/packages/hawtio/src/plugins/springboot/Info.tsx b/packages/hawtio/src/plugins/springboot/Info.tsx
index dbecc38b..96381066 100644
--- a/packages/hawtio/src/plugins/springboot/Info.tsx
+++ b/packages/hawtio/src/plugins/springboot/Info.tsx
@@ -1,8 +1,39 @@
-import React from "react"
-import {PageSection} from "@patternfly/react-core"
+import React, { useEffect, useState } from 'react'
+import { FormGroup, PageSection } from '@patternfly/react-core'
+import { getInfo } from '@hawtiosrc/plugins/springboot/springboot-service'
+import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 
-export const Info:React.FunctionComponent = () => (
-  <PageSection variant='light'>
-      Info - TO BE DONE
-  </PageSection>
-)
+export const Info: React.FunctionComponent = () => {
+  const [systemProperties, setSystemProperties] = useState<{ key: string; value: string }[]>([])
+
+  useEffect(() => {
+    getInfo().then(res => {
+      setSystemProperties(res)
+    })
+  }, [])
+
+  return (
+    <PageSection variant='light'>
+      <FormGroup>
+        <TableComposable aria-label='Message Table' variant='compact' height='80vh' isStriped isStickyHeader>
+          <Thead>
+            <Tr>
+              <Th data-testid={'name-header'}>Property Name</Th>
+              <Th data-testid={'value-header'}>Property Value</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {systemProperties.map((prop, index) => {
+              return (
+                <Tr key={'row' + index} data-testid={'row' + index}>
+                  <Td style={{ width: '20%' }}>{prop.key}</Td>
+                  <Td style={{ flex: 3 }}>{prop.value}</Td>
+                </Tr>
+              )
+            })}
+          </Tbody>
+        </TableComposable>
+      </FormGroup>
+    </PageSection>
+  )
+}
diff --git a/packages/hawtio/src/plugins/springboot/SpringBoot.tsx b/packages/hawtio/src/plugins/springboot/SpringBoot.tsx
new file mode 100644
index 00000000..32093282
--- /dev/null
+++ b/packages/hawtio/src/plugins/springboot/SpringBoot.tsx
@@ -0,0 +1,72 @@
+import { Nav, NavItem, NavList, PageGroup, PageNavigation, PageSection, Title } from '@patternfly/react-core'
+import React, { useEffect, useState } from 'react'
+
+import { Navigate, NavLink, Route, Routes, useLocation } from 'react-router-dom'
+import { Health } from '@hawtiosrc/plugins/springboot/Health'
+import { Info } from '@hawtiosrc/plugins/springboot/Info'
+import { Loggers } from '@hawtiosrc/plugins/springboot/Loggers'
+import { Trace } from '@hawtiosrc/plugins/springboot/Trace'
+import { hasEndpoint } from '@hawtiosrc/plugins/springboot/springboot-service'
+
+type NavItem = {
+  id: string
+  title: string
+  component: JSX.Element
+}
+export const SpringBoot: React.FunctionComponent = () => {
+  const location = useLocation()
+  const [navItems, setNavItems] = useState<NavItem[]>([])
+
+  useEffect(() => {
+    const initNavItems = async () => {
+      const nav: NavItem[] = []
+      if (await hasEndpoint('Health')) {
+        nav.push({ id: 'health', title: 'Health', component: <Health /> })
+      }
+
+      if (await hasEndpoint('Info')) {
+        nav.push({ id: 'info', title: 'Info', component: <Info /> })
+      }
+
+      if (await hasEndpoint('Loggers')) {
+        nav.push({ id: 'loggers', title: 'Loggers', component: <Loggers /> })
+      }
+
+      if (await hasEndpoint('Trace')) {
+        nav.push({ id: 'trace', title: 'Trace', component: <Trace /> })
+      }
+
+      setNavItems([...nav])
+    }
+    initNavItems()
+  }, [])
+
+  return (
+    <React.Fragment>
+      <PageSection variant='light'>
+        <Title headingLevel='h1'>Spring Boot</Title>
+      </PageSection>
+      <PageGroup>
+        <PageNavigation>
+          <Nav aria-label='Spring-boot Nav' variant='tertiary'>
+            <NavList>
+              {navItems.map(navItem => (
+                <NavItem key={navItem.id} isActive={location.pathname === `/springboot/${navItem.id}`}>
+                  <NavLink to={navItem.id}>{navItem.title}</NavLink>
+                </NavItem>
+              ))}
+            </NavList>
+          </Nav>
+        </PageNavigation>
+      </PageGroup>
+      <PageSection>
+        <Routes>
+          {navItems.map(navItem => (
+            <Route key={navItem.id} path={navItem.id} element={navItem.component} />
+          ))}
+          <Route path='/' element={<Navigate to='health' />} />
+        </Routes>
+      </PageSection>
+    </React.Fragment>
+  )
+}
diff --git a/packages/hawtio/src/plugins/springboot/Springboot.tsx b/packages/hawtio/src/plugins/springboot/Springboot.tsx
deleted file mode 100644
index 68eec361..00000000
--- a/packages/hawtio/src/plugins/springboot/Springboot.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Nav, NavItem, NavList, PageGroup, PageNavigation, PageSection, Title } from '@patternfly/react-core'
-import React from 'react'
-
-import { Navigate, NavLink, Route, Routes, useLocation } from 'react-router-dom'
-import {Health} from "@hawtiosrc/plugins/springboot/Health"
-import {Info} from "@hawtiosrc/plugins/springboot/Info"
-import {Loggers} from "@hawtiosrc/plugins/springboot/Loggers"
-import {Trace} from "@hawtiosrc/plugins/springboot/Trace"
-
-
-type NavItem = {
-  id: string
-  title: string
-  component: JSX.Element
-}
-export const Springboot: React.FunctionComponent = () => {
-  const location = useLocation()
-
-  const navItems: NavItem[] = [
-    { id: 'health', title: 'Health', component: <Health /> },
-    { id: 'info', title: 'Info', component: <Info /> },
-    { id: 'loggers', title: 'Loggers', component: <Loggers /> },
-    { id: 'trace', title: 'Trace', component: <Trace /> },
-  ]
-
-  return (
-    <React.Fragment>
-      <PageSection variant='light'>
-        <Title headingLevel='h1'>Springboot</Title>
-      </PageSection>
-      <PageGroup>
-        <PageNavigation>
-          <Nav aria-label='Spring-boot Nav' variant='tertiary'>
-            <NavList>
-              {navItems.map(navItem => (
-                <NavItem key={navItem.id} isActive={location.pathname === `/springboot/${navItem.id}`}>
-                  <NavLink to={navItem.id}>{navItem.title}</NavLink>
-                </NavItem>
-              ))}
-            </NavList>
-          </Nav>
-        </PageNavigation>
-      </PageGroup>
-      <PageSection>
-        <Routes>
-          {navItems.map(navItem => (
-            <Route key={navItem.id} path={navItem.id} element={navItem.component} />
-          ))}
-          <Route path='/' element={<Navigate to='health' />} />
-        </Routes>
-      </PageSection>
-    </React.Fragment>
-  )
-}
diff --git a/packages/hawtio/src/plugins/springboot/Trace.tsx b/packages/hawtio/src/plugins/springboot/Trace.tsx
index ab58d6e3..c5a0e294 100644
--- a/packages/hawtio/src/plugins/springboot/Trace.tsx
+++ b/packages/hawtio/src/plugins/springboot/Trace.tsx
@@ -1,8 +1,4 @@
-import React from "react"
-import {PageSection} from "@patternfly/react-core"
+import React from 'react'
+import { PageSection } from '@patternfly/react-core'
 
-export const Trace:React.FunctionComponent = () => (
-  <PageSection variant='light'>
-    Trace - TO BE DONE
-  </PageSection>
-)
+export const Trace: React.FunctionComponent = () => <PageSection variant='light'>Trace - TO BE DONE</PageSection>
diff --git a/packages/hawtio/src/plugins/springboot/help.md b/packages/hawtio/src/plugins/springboot/help.md
index c3cfafc4..1d327dce 100644
--- a/packages/hawtio/src/plugins/springboot/help.md
+++ b/packages/hawtio/src/plugins/springboot/help.md
@@ -8,11 +8,11 @@ Displays the current health status of the application together with details retu
 
 ### Info
 
-Displays relevant information regarding the Spring boot application. It is the  output of the Info actuator endpoint.
+Displays relevant information regarding the Spring boot application. It is the output of the Info actuator endpoint.
 
 ### Loggers
 
-Lists all  the available loggers in the application. You can modify the level of a logger and the changes will take effect immediately.
+Lists all the available loggers in the application. You can modify the level of a logger and the changes will take effect immediately.
 
 ### Trace
 
diff --git a/packages/hawtio/src/plugins/springboot/index.ts b/packages/hawtio/src/plugins/springboot/index.ts
index 05f4096a..ffcef010 100644
--- a/packages/hawtio/src/plugins/springboot/index.ts
+++ b/packages/hawtio/src/plugins/springboot/index.ts
@@ -4,15 +4,15 @@ import { pluginId, pluginPath } from './globals'
 import { workspace } from '@hawtiosrc/plugins'
 import { helpRegistry } from '@hawtiosrc/help'
 import help from './help.md'
-import {Springboot} from "@hawtiosrc/plugins/springboot/Springboot"
+import { SpringBoot } from '@hawtiosrc/plugins/springboot/SpringBoot'
 
 export const springboot: HawtioPlugin = () => {
   hawtio.addPlugin({
     id: pluginId,
-    title: 'Springboot',
+    title: 'Spring Boot',
     path: pluginPath,
-    component: Springboot,
-    isActive: async () => workspace.hasMBeans(),
+    component: SpringBoot,
+    isActive: async () => workspace.treeContainsDomainAndProperties('org.springframework.boot'),
   })
-  helpRegistry.add(pluginId, 'Runtime', help, 16)
+  helpRegistry.add(pluginId, 'Spring Boot', help, 17)
 }
diff --git a/packages/hawtio/src/plugins/springboot/springboot-service.ts b/packages/hawtio/src/plugins/springboot/springboot-service.ts
index 24d6d0a7..23d75f44 100644
--- a/packages/hawtio/src/plugins/springboot/springboot-service.ts
+++ b/packages/hawtio/src/plugins/springboot/springboot-service.ts
@@ -1,11 +1,49 @@
-import { SystemProperty } from '@hawtiosrc/plugins/runtime/types'
-import { jolokiaService } from '@hawtiosrc/plugins'
-
-export async function loadHealth() {
-  const attr = await jolokiaService.execute('org.springframework.boot:type=Endpoint,name=Health', 'health')
-  console.log(attr)
-  // for (const [k, v] of Object.entries(attr as object)) {
-  //   systemProperties.push({ key: k, value: v })
-  // }
-  //return systemProperties
+import { jolokiaService, workspace } from '@hawtiosrc/plugins'
+import { HealthComponent, HealthData, JolokiaHealthData } from './types'
+
+export async function loadHealth(): Promise<HealthData> {
+  const data = (await jolokiaService.execute(
+    'org.springframework.boot:type=Endpoint,name=Health',
+    'health',
+  )) as JolokiaHealthData
+  let healthComponents: HealthComponent[] = []
+
+  healthComponents = Object.entries(data.components).map(([componentName, component]) => {
+    let details
+
+    if (component.details) {
+      details = Object.entries(component.details).map(([detailKey, detailValue]) => {
+        const typ = typeof detailValue
+        const value = ['string', 'number', 'boolean'].includes(typ)
+          ? detailValue.toString()
+          : Object.entries(detailValue).map(([key, value]) => ({ key, value }))
+
+        return {
+          key: detailKey,
+          value: value,
+        }
+      })
+    }
+
+    return {
+      name: componentName,
+      status: component.status,
+      details: component.details ? details : undefined,
+    }
+  })
+
+  return { status: data.status, components: healthComponents }
+}
+
+export async function getInfo() {
+  const res = await jolokiaService.execute('org.springframework.boot:type=Endpoint,name=Info', 'info')
+  const properties: { key: string; value: string }[] = Object.entries(res as object).map(([key, value]) => ({
+    key,
+    value,
+  }))
+  return properties
+}
+
+export async function hasEndpoint(name: string): Promise<boolean> {
+  return await workspace.treeContainsDomainAndProperties('org.springframework.boot', { type: 'Endpoint', name: name })
 }
diff --git a/packages/hawtio/src/plugins/springboot/types.ts b/packages/hawtio/src/plugins/springboot/types.ts
index e69de29b..5bfeffa6 100644
--- a/packages/hawtio/src/plugins/springboot/types.ts
+++ b/packages/hawtio/src/plugins/springboot/types.ts
@@ -0,0 +1,29 @@
+export type HealthComponent = {
+  name: string
+  status: string
+  details?: HealthComponentDetail[]
+}
+export type HealthComponentDetail = {
+  key: string
+  value: string | HealthComponentDetail[]
+}
+export type HealthData = {
+  components: HealthComponent[]
+  status: string
+}
+
+export type JolokiaHealthData = {
+  status: string
+  components: {
+    [name: string]: {
+      details?: {
+        [key: string]:
+          | string
+          | {
+              [key: string]: string
+            }
+      }
+      status: string
+    }
+  }
+}