Skip to content
This repository was archived by the owner on Feb 20, 2024. It is now read-only.

Commit 24d407f

Browse files
ricardojosegomezulmkericardojosegomezulmke
committed
health check logs rendering updated
1 parent 0658a92 commit 24d407f

12 files changed

+82
-62
lines changed

‎ReleaseNotes.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Solace Async API Management.
66
* [API-M Admin & Developer Portal](https://github.com/solace-iot-team/async-apim/tree/main/apim-portal): 0.0.31
77
* [API-M Server OpenAPI](https://github.com/solace-iot-team/async-apim/blob/main/apim-server/server/common/api.yml): 0.0.15
88
* [API-M Server](https://github.com/solace-iot-team/async-apim/tree/main/apim-server): 0.0.9
9-
* [API-M Connector OpenAPI](https://github.com/solace-iot-team/platform-api): 0.6.0
9+
* [API-M Connector OpenAPI](https://github.com/solace-iot-team/platform-api): 0.6.1
1010

1111
#### API-M Admin & Developer Portal
1212

‎apim-portal/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"dependencies": {
2626
"@asyncapi/react-component": "^1.0.0-next.18",
27-
"@solace-iot-team/apim-connector-openapi-browser": "^0.6.0",
27+
"@solace-iot-team/apim-connector-openapi-browser": "^0.6.1",
2828
"async-mutex": "^0.3.2",
2929
"base-64": "^1.0.0",
3030
"js-yaml": "^4.1.0",

‎apim-portal/src/admin-portal/components/ManageConnectors/TestConnector.tsx

+14-15
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ import { ApiCallState, TApiCallState } from "../../../utils/ApiCallState";
1515
import { APSClientOpenApi } from "../../../utils/APSClientOpenApi";
1616
import { APConnectorHealthCheck, TAPConnectorHealthCheckResult } from "../../../utils/APHealthCheck";
1717
import { ApiCallStatusError } from "../../../components/ApiCallStatusError/ApiCallStatusError";
18-
import { E_CALL_STATE_ACTIONS, ManageConnectorsCommon } from "./ManageConnectorsCommon";
18+
import { E_CALL_STATE_ACTIONS } from "./ManageConnectorsCommon";
1919
import { APLogger } from "../../../utils/APLogger";
20+
import { DisplayConnectorHealthCheckLog } from "../../../components/SystemHealth/DisplayConnectorHealthCheckLog";
21+
import { DisplaySystemHealthInfo, EAPSystemHealthInfoPart } from "../../../components/SystemHealth/DisplaySystemHealthInfo";
2022

2123
import '../../../components/APComponents.css';
2224
import "./ManageConnectors.css";
23-
import { SystemHealthCommon } from "../../../components/SystemHealth/SystemHealthCommon";
2425

2526
export interface ITestConnectorProps {
2627
connectorId: APSId;
@@ -34,10 +35,8 @@ export const TestConnector: React.FC<ITestConnectorProps> = (props: ITestConnect
3435
const componentName = 'TestConnector';
3536

3637
const TestingDialogHeader = "Performing health check ...";
37-
const ResultDialogHeader = "Details:";
3838

39-
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
40-
const [configContext, dispatchConfigContextAction] = React.useContext(ConfigContext);
39+
const [configContext] = React.useContext(ConfigContext);
4140
const [apsConnector, setApsConnector] = React.useState<APSConnector>();
4241
const [apiCallStatus, setApiCallStatus] = React.useState<TApiCallState | null>(null);
4342
const [showTestDialog, setShowTestDialog] = React.useState<boolean>(true);
@@ -121,16 +120,16 @@ export const TestConnector: React.FC<ITestConnectorProps> = (props: ITestConnect
121120
const renderTestDialogContent = (): JSX.Element => {
122121
return (
123122
<React.Fragment>
124-
<h3><b>Connector: {apsConnector?.displayName}</b></h3>
125-
{healthCheckResult &&
126-
<div>
127-
<span style={ {color: SystemHealthCommon.getColor(healthCheckResult.summary.success) }}>Summary: {ManageConnectorsCommon.healthCheckSuccessDisplay(healthCheckResult)}</span>
128-
<p>{ResultDialogHeader}</p>
129-
<pre style={ { fontSize: '10px' }} >
130-
{JSON.stringify(healthCheckResult?.healthCheckLog, null, 2)}
131-
</pre>
132-
</div>
133-
}
123+
<DisplaySystemHealthInfo
124+
systemHealthInfoPart={EAPSystemHealthInfoPart.CONNECTOR}
125+
healthCheckContext={{
126+
connectorHealthCheckResult: healthCheckResult,
127+
}}
128+
connectorDisplayName={apsConnector ? apsConnector.displayName : 'unknown'}
129+
/>
130+
<DisplayConnectorHealthCheckLog
131+
connectorHealthCheckResult={healthCheckResult}
132+
/>
134133
{!healthCheckResult &&
135134
<div>
136135
<p>{TestingDialogHeader}</p>

‎apim-portal/src/admin-portal/components/ManageConnectors/ViewConnector.tsx

+12-16
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { APSClientOpenApi } from "../../../utils/APSClientOpenApi";
1717
import { ApiCallStatusError } from "../../../components/ApiCallStatusError/ApiCallStatusError";
1818
import { E_CALL_STATE_ACTIONS, ManageConnectorsCommon, TViewManagedObject } from "./ManageConnectorsCommon";
1919
import { APConnectorApiCalls, TAPConnectorInfo } from "../../../utils/APConnectorApiCalls";
20+
import { DisplaySystemHealthInfo, EAPSystemHealthInfoPart } from "../../../components/SystemHealth/DisplaySystemHealthInfo";
21+
import { DisplayConnectorHealthCheckLog } from "../../../components/SystemHealth/DisplayConnectorHealthCheckLog";
2022

2123
import '../../../components/APComponents.css';
2224
import "./ManageConnectors.css";
@@ -80,25 +82,19 @@ export const ViewConnector: React.FC<IViewConnectorProps> = (props: IViewConnect
8082
}
8183
}, [apiCallStatus]); /* eslint-disable-line react-hooks/exhaustive-deps */
8284

83-
const renderHealthCheckInfo = (mo: TManagedObject) => {
84-
return(
85-
<>
86-
<pre style={ { fontSize: '10px' }} >
87-
{JSON.stringify(mo.healthCheckResult, null, 2)};
88-
</pre>
89-
</>
90-
);
91-
}
92-
9385
const renderHealthCheckDetails = (mo: TManagedObject) => {
9486
return (
9587
<React.Fragment>
96-
<div className="p-mb-2 p-mt-4 ap-display-component-header">
97-
Summary: {ManageConnectorsCommon.healthCheckSuccessDisplay(mo.healthCheckResult)}
98-
</div>
99-
<div className="p-ml-4">
100-
{renderHealthCheckInfo(mo)}
101-
</div>
88+
<DisplaySystemHealthInfo
89+
systemHealthInfoPart={EAPSystemHealthInfoPart.CONNECTOR}
90+
healthCheckContext={{
91+
connectorHealthCheckResult: mo.healthCheckResult,
92+
}}
93+
connectorDisplayName={mo.apsConnector.displayName}
94+
/>
95+
<DisplayConnectorHealthCheckLog
96+
connectorHealthCheckResult={mo.healthCheckResult}
97+
/>
10298
</React.Fragment>
10399
)
104100
}

‎apim-portal/src/admin-portal/components/MonitorSystemHealth/MonitorSystemHealth.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,10 @@ export const MonitorSystemHealth: React.FC<IMonitorSystemHealthProps> = (props:
8383
// * Toolbar *
8484
const renderLeftToolbarContent = (): JSX.Element | undefined => {
8585
if(!componentState.currentState) return undefined;
86-
if(showSystemHealthOverviewComponent) return (
87-
<React.Fragment>
88-
</React.Fragment>
89-
);
86+
// if(showSystemHealthOverviewComponent) return (
87+
// <React.Fragment>
88+
// </React.Fragment>
89+
// );
9090
return undefined;
9191
}
9292

‎apim-portal/src/admin-portal/components/MonitorSystemHealth/SystemHealthOverview.tsx

+16-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React from "react";
44
import { TabView, TabPanel } from 'primereact/tabview';
55

66
import { APHealthCheckContext } from '../../../components/APHealthCheckContextProvider';
7+
import { ConfigContext } from "../../../components/ConfigContextProvider/ConfigContextProvider";
78
import { APComponentHeader } from "../../../components/APComponentHeader/APComponentHeader";
89
import { TApiCallState } from "../../../utils/ApiCallState";
910
import { ApiCallStatusError } from "../../../components/ApiCallStatusError/ApiCallStatusError";
@@ -24,6 +25,7 @@ export const SystemHealthOverview: React.FC<ISystemHealthOverviewProps> = (props
2425
// const componentName = 'SystemHealthOverview';
2526

2627
const [healthCheckContext] = React.useContext(APHealthCheckContext);
28+
const [configContext] = React.useContext(ConfigContext);
2729

2830
const [apiCallStatus] = React.useState<TApiCallState | null>(null);
2931
const [tabActiveIndex, setTabActiveIndex] = React.useState(0);
@@ -42,20 +44,28 @@ export const SystemHealthOverview: React.FC<ISystemHealthOverviewProps> = (props
4244
<TabPanel header='Portal App'>
4345
<DisplaySystemHealthInfo
4446
systemHealthInfoPart={EAPSystemHealthInfoPart.PORTAL_APP}
45-
/>
46-
<DisplayPortalAppHealthCheckLog />
47+
healthCheckContext={healthCheckContext}
48+
connectorDisplayName={configContext.connector ? configContext.connector.displayName : 'unknown'}
49+
/>
50+
<DisplayPortalAppHealthCheckLog />
4751
</TabPanel>
4852
<TabPanel header='APIM Server'>
4953
<DisplaySystemHealthInfo
5054
systemHealthInfoPart={EAPSystemHealthInfoPart.SERVER}
51-
/>
55+
healthCheckContext={healthCheckContext}
56+
connectorDisplayName={configContext.connector ? configContext.connector.displayName : 'unknown'}
57+
/>
5258
<DisplayServerHealthCheckLog />
5359
</TabPanel>
5460
<TabPanel header='APIM Connector'>
5561
<DisplaySystemHealthInfo
5662
systemHealthInfoPart={EAPSystemHealthInfoPart.CONNECTOR}
63+
healthCheckContext={healthCheckContext}
64+
connectorDisplayName={configContext.connector ? configContext.connector.displayName : 'unknown'}
65+
/>
66+
<DisplayConnectorHealthCheckLog
67+
connectorHealthCheckResult={healthCheckContext.connectorHealthCheckResult}
5768
/>
58-
<DisplayConnectorHealthCheckLog />
5969
</TabPanel>
6070
{/* <TabPanel header='Devel'>
6171
<pre style={ { fontSize: '12px' }} >
@@ -76,6 +86,8 @@ export const SystemHealthOverview: React.FC<ISystemHealthOverviewProps> = (props
7686
<div className="ap-system-health-view-detail-left">
7787
<DisplaySystemHealthInfo
7888
systemHealthInfoPart={EAPSystemHealthInfoPart.ALL}
89+
healthCheckContext={healthCheckContext}
90+
connectorDisplayName={configContext.connector ? configContext.connector.displayName : 'unknown'}
7991
/>
8092
{renderDetailTabs()}
8193
</div>

‎apim-portal/src/admin-portal/pages/AdminPortalHealthCheckViewPage.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ import { AuthContext } from '../../components/AuthContextProvider/AuthContextPro
88
import { DisplaySystemHealthInfo } from '../../components/SystemHealth/DisplaySystemHealthInfo';
99
import { EAPHealthCheckSuccess, TAPHealthCheckSummary } from '../../utils/APHealthCheck';
1010
import { EUIAdminPortalResourcePaths, Globals } from '../../utils/Globals';
11+
import { ConfigContext } from '../../components/ConfigContextProvider/ConfigContextProvider';
1112

1213
export const AdminPortalHealthCheckViewPage: React.FC = () => {
1314
const componentName = 'AdminPortalHealthCheckViewPage';
1415

16+
const [configContext] = React.useContext(ConfigContext);
1517
const [healthCheckContext] = React.useContext(APHealthCheckContext);
1618
const [authContext] = React.useContext(AuthContext);
1719

@@ -72,7 +74,10 @@ export const AdminPortalHealthCheckViewPage: React.FC = () => {
7274
<React.Fragment>
7375
<div className='p-my-4'>{getHeader()}</div>
7476
<Divider className='p-mb-4'/>
75-
<DisplaySystemHealthInfo />
77+
<DisplaySystemHealthInfo
78+
healthCheckContext={healthCheckContext}
79+
connectorDisplayName={configContext.connector ? configContext.connector.displayName : 'unknown'}
80+
/>
7681
{/* <hr />
7782
<h1>Health Check:</h1>
7883
<pre style={ { fontSize: '12px' }} >

‎apim-portal/src/components/SystemHealth/DisplayConnectorHealthCheckLog.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,23 @@ import React from "react";
33

44
import { Panel } from "primereact/panel";
55

6-
import { APHealthCheckContext } from "../APHealthCheckContextProvider";
76
import {
87
TAPConnectorHealthCheckLogEntry,
9-
TAPConnectorHealthCheckLogEntryList
8+
TAPConnectorHealthCheckLogEntryList,
9+
TAPConnectorHealthCheckResult
1010
} from "../../utils/APHealthCheck";
1111
import { SystemHealthCommon } from "./SystemHealthCommon";
1212

1313
import "../APComponents.css";
1414

1515
export interface IDisplayConnectorHealthCheckLogProps {
1616
className?: string;
17+
connectorHealthCheckResult?: TAPConnectorHealthCheckResult
1718
}
1819

1920
export const DisplayConnectorHealthCheckLog: React.FC<IDisplayConnectorHealthCheckLogProps> = (props: IDisplayConnectorHealthCheckLogProps) => {
2021
// const componentName='DisplayConnectorHealthCheckLog';
2122

22-
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
23-
const [healthCheckContext, dispatchHealthCheckContextAction] = React.useContext(APHealthCheckContext);
24-
2523
const renderLogEntry = (logEntry: TAPConnectorHealthCheckLogEntry): JSX.Element => {
2624
const getHeader = (): JSX.Element => {
2725
return (
@@ -45,8 +43,8 @@ export const DisplayConnectorHealthCheckLog: React.FC<IDisplayConnectorHealthChe
4543
}
4644

4745
const renderConnectorHealthCheckLog = (): Array<JSX.Element> => {
48-
if(!healthCheckContext.connectorHealthCheckResult) return ([<></>]);
49-
const log: TAPConnectorHealthCheckLogEntryList = healthCheckContext.connectorHealthCheckResult.healthCheckLog;
46+
if(!props.connectorHealthCheckResult) return ([<></>]);
47+
const log: TAPConnectorHealthCheckLogEntryList = props.connectorHealthCheckResult.healthCheckLog;
5048
const displayList: Array<JSX.Element> = [];
5149
for(const logEntry of log) {
5250
displayList.push(renderLogEntry(logEntry));

‎apim-portal/src/components/SystemHealth/DisplaySystemHealthInfo.tsx

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11

22
import React from "react";
33

4-
import { APHealthCheckContext } from "../APHealthCheckContextProvider";
5-
import { ConfigContext } from "../ConfigContextProvider/ConfigContextProvider";
4+
import { TAPHealthCheckContext } from "../APHealthCheckContextProvider";
65
import { EAPHealthCheckSuccess, TAPHealthCheckSummary } from "../../utils/APHealthCheck";
76
import { SystemHealthCommon } from "./SystemHealthCommon";
87

@@ -18,15 +17,13 @@ export enum EAPSystemHealthInfoPart {
1817
export interface IDisplaySystemHealthInfoProps {
1918
className?: string;
2019
systemHealthInfoPart?: EAPSystemHealthInfoPart;
20+
healthCheckContext: TAPHealthCheckContext;
21+
connectorDisplayName: string
2122
}
2223

2324
export const DisplaySystemHealthInfo: React.FC<IDisplaySystemHealthInfoProps> = (props: IDisplaySystemHealthInfoProps) => {
2425
// const componentName='DisplaySystemHealthInfo';
2526

26-
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
27-
const [configContext, dispatchConfigContextAction] = React.useContext(ConfigContext);
28-
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
29-
const [healthCheckContext, dispatchHealthCheckContextAction] = React.useContext(APHealthCheckContext);
3027
const [systemHealthInfoPart, setSystemHealthInfoPart] = React.useState<EAPSystemHealthInfoPart>(EAPSystemHealthInfoPart.ALL);
3128

3229
React.useEffect(() => {
@@ -60,20 +57,19 @@ export const DisplaySystemHealthInfo: React.FC<IDisplaySystemHealthInfoProps> =
6057

6158
const renderPortalAppHealthInfo = (): JSX.Element => {
6259
if(systemHealthInfoPart === EAPSystemHealthInfoPart.PORTAL_APP || systemHealthInfoPart === EAPSystemHealthInfoPart.ALL) {
63-
return renderHealthInfo('Portal App', healthCheckContext.portalAppHealthCheckResult?.summary);
60+
return renderHealthInfo('Portal App', props.healthCheckContext.portalAppHealthCheckResult?.summary);
6461
} else return (<></>);
6562
}
6663

6764
const renderServerHealthInfo = (): JSX.Element => {
6865
if(systemHealthInfoPart === EAPSystemHealthInfoPart.SERVER || systemHealthInfoPart === EAPSystemHealthInfoPart.ALL) {
69-
return renderHealthInfo('Server', healthCheckContext.serverHealthCheckResult?.summary);
66+
return renderHealthInfo('Server', props.healthCheckContext.serverHealthCheckResult?.summary);
7067
} else return (<></>);
7168
}
7269

7370
const renderConnectorHealthInfo = (): JSX.Element => {
7471
if(systemHealthInfoPart === EAPSystemHealthInfoPart.CONNECTOR || systemHealthInfoPart === EAPSystemHealthInfoPart.ALL) {
75-
const connectorName = configContext.connector ? configContext.connector.displayName : 'unknown';
76-
return renderHealthInfo(`Connector: ${connectorName}`, healthCheckContext.connectorHealthCheckResult?.summary, 'Connector: no active connector');
72+
return renderHealthInfo(`Connector: ${props.connectorDisplayName}`, props.healthCheckContext.connectorHealthCheckResult?.summary, 'Connector: no active connector');
7773
} else return (<></>);
7874
}
7975

‎apim-portal/src/components/SystemHealth/SystemHealthCheck.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,10 @@ export const SystemHealthCheck: React.FC<ISystemHealthCheckProps> = (props: ISys
197197
return (
198198
<React.Fragment>
199199
{/* <p>count={count}, reinitializeConfigContextCount={reinitializeConfigContextCount}</p> */}
200-
<DisplaySystemHealthInfo />
200+
<DisplaySystemHealthInfo
201+
healthCheckContext={healthCheckContext}
202+
connectorDisplayName={configContext.connector ? configContext.connector.displayName : 'unknown'}
203+
/>
201204
</React.Fragment>
202205
);
203206
}

‎apim-portal/src/developer-portal/pages/DeveloperPortalHealthCheckViewPage.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Divider } from 'primereact/divider';
55

66
import { APHealthCheckContext } from '../../components/APHealthCheckContextProvider';
77
import { AuthContext } from '../../components/AuthContextProvider/AuthContextProvider';
8+
import { ConfigContext } from '../../components/ConfigContextProvider/ConfigContextProvider';
89
import { DisplaySystemHealthInfo } from '../../components/SystemHealth/DisplaySystemHealthInfo';
910
import { EAPHealthCheckSuccess, TAPHealthCheckSummary } from '../../utils/APHealthCheck';
1011
import { EUIDeveloperPortalResourcePaths, Globals } from '../../utils/Globals';
@@ -14,6 +15,8 @@ export const DeveloperPortalHealthCheckViewPage: React.FC = () => {
1415

1516
const [healthCheckContext] = React.useContext(APHealthCheckContext);
1617
const [authContext] = React.useContext(AuthContext);
18+
const [configContext] = React.useContext(ConfigContext);
19+
1720

1821
const history = useHistory();
1922

@@ -72,7 +75,10 @@ export const DeveloperPortalHealthCheckViewPage: React.FC = () => {
7275
<React.Fragment>
7376
<div className='p-my-4'>{getHeader()}</div>
7477
<Divider className='p-mb-4'/>
75-
<DisplaySystemHealthInfo />
78+
<DisplaySystemHealthInfo
79+
healthCheckContext={healthCheckContext}
80+
connectorDisplayName={configContext.connector ? configContext.connector.displayName : 'unknown'}
81+
/>
7682
{/* <hr />
7783
<h1>Health Check:</h1>
7884
<pre style={ { fontSize: '12px' }} >

‎apim-portal/src/pages/HealthCheckViewPage.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
33

44
import { APHealthCheckContext } from '../components/APHealthCheckContextProvider';
55
import { AuthContext } from '../components/AuthContextProvider/AuthContextProvider';
6+
import { ConfigContext } from '../components/ConfigContextProvider/ConfigContextProvider';
67
import { DisplaySystemHealthInfo } from '../components/SystemHealth/DisplaySystemHealthInfo';
78
import { UserContext } from '../components/UserContextProvider/UserContextProvider';
89
import { EAPHealthCheckSuccess, TAPHealthCheckSummary } from '../utils/APHealthCheck';
@@ -14,6 +15,7 @@ export const HealthCheckViewPage: React.FC = () => {
1415
/* eslint-disable @typescript-eslint/no-unused-vars */
1516
const [healthCheckContext, dispatchHealthCheckContextAction] = React.useContext(APHealthCheckContext);
1617
const [authContext, dispatchAuthContextAction] = React.useContext(AuthContext);
18+
const [configContext] = React.useContext(ConfigContext);
1719
const [userContext, dispatchUserContextAction] = React.useContext(UserContext);
1820
const [originAppState, setOriginAppState] = React.useState<EAppState>(userContext.originAppState);
1921
/* eslint-eanble @typescript-eslint/no-unused-vars */
@@ -67,7 +69,10 @@ export const HealthCheckViewPage: React.FC = () => {
6769
<hr />
6870
<h1 style={{fontSize: 'xx-large'}}>{getHeader()}</h1>
6971
<hr />
70-
<DisplaySystemHealthInfo />
72+
<DisplaySystemHealthInfo
73+
healthCheckContext={healthCheckContext}
74+
connectorDisplayName={configContext.connector ? configContext.connector.displayName : 'unknown'}
75+
/>
7176
{/* <hr />
7277
<h1>Health Check:</h1>
7378
<pre style={ { fontSize: '12px' }} >

0 commit comments

Comments
 (0)