Skip to content
39 changes: 39 additions & 0 deletions mock-server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// Simple mock server for testing version API
const http = require('http');

const server = http.createServer((req, res) => {
// Enable CORS
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

if (req.method === 'OPTIONS') {
res.writeHead(200);
res.end();
return;
}

if (req.url === '/api/v1/version') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({
version: '3.1.0',
components: {
engine: { version: 'v0.0.3-e5f6g7h' },
webapp: { version: 'v0.0.3-9k8j7h6' },
cache: { version: 'v0.0.3-4m3n2bl' }
}
}));
} else if (req.url === '/api/v1/user') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ name: 'Test User' }));
} else {
res.writeHead(404);
res.end('Not Found');
}
});

const PORT = 8080;
server.listen(PORT, () => {
console.log(`Mock server running on http://localhost:${PORT}`);
console.log(`Version API: http://localhost:${PORT}/api/v1/version`);
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*
* SPDX-FileCopyrightText: Copyright (c) 2026, Red Hat Inc. & AFFILIATES. All rights reserved.
* SPDX-License-Identifier: Apache-2.0
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.redhat.ecosystemappeng.exploitiq.rest;

import jakarta.ws.rs.GET;
import jakarta.ws.rs.Path;
import jakarta.ws.rs.Produces;
import jakarta.ws.rs.core.MediaType;
import jakarta.ws.rs.core.Response;

import org.eclipse.microprofile.openapi.annotations.Operation;
import org.eclipse.microprofile.openapi.annotations.tags.Tag;

import java.util.HashMap;
import java.util.Map;

@Path("/version")
@Tag(name = "Version", description = "Application version information")
public class VersionResource {

@GET
@Produces(MediaType.APPLICATION_JSON)
@Operation(summary = "Get application version", description = "Returns version information for the Exploit Intelligence application")
public Response getVersion() {
Map<String, Object> versionInfo = new HashMap<>();

String version = System.getenv("EXPLOIT_IQ_VERSION");
versionInfo.put("version", version != null ? version : "unknown");

return Response.ok(versionInfo).build();
}
}
16 changes: 16 additions & 0 deletions src/main/webui/src/components/AboutModal.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/* We render the logo inside custom content, so remove the default brand/header
grid rows and let content start from the top alongside the close button. */
.ei-about-modal.pf-v6-c-about-modal-box {
grid-template-areas: "content close" !important;
grid-template-rows: auto !important;
height: fit-content !important;
}

.ei-about-modal.pf-v6-c-about-modal-box .pf-v6-c-about-modal-box__brand,
.ei-about-modal.pf-v6-c-about-modal-box .pf-v6-c-about-modal-box__header {
display: none !important;
}

.ei-about-modal.pf-v6-c-about-modal-box .pf-v6-c-about-modal-box__close {
padding-block-start: var(--pf-t--global--spacer--xl);
}
118 changes: 118 additions & 0 deletions src/main/webui/src/components/AboutModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
// SPDX-FileCopyrightText: Copyright (c) 2026, Red Hat Inc. & AFFILIATES. All rights reserved.
// SPDX-License-Identifier: Apache-2.0
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React from 'react';
import { AboutModal as PFAboutModal } from '@patternfly/react-core';
import { useVersion } from '../hooks/useVersion';
import './AboutModal.css';

interface AboutModalProps {
isOpen: boolean;
onClose: () => void;
}

const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
const { versionInfo, loading } = useVersion();

const components = versionInfo?.components;

return (
<PFAboutModal
isOpen={isOpen}
onClose={onClose}
trademark="COPYRIGHT © 2026"
brandImageSrc="/redhat.svg"
brandImageAlt="Red Hat"
className="ei-about-modal"
>
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--pf-t--global--spacer--2xl)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', height: '32px' }}>
<img
src="/redhat.svg"
alt="Red Hat"
style={{ width: '37px', height: '28px' }}
/>
<h1 style={{
fontSize: 'var(--pf-t--global--font--size--2xl)',
fontWeight: 'var(--pf-t--global--font--weight--heading--bold)' as any,
margin: 0,
color: '#151515',
}}>
Red Hat Trusted Profile Analyzer
</h1>
</div>

<h2 style={{
fontSize: 'var(--pf-t--global--font--size--heading--xl)',
fontWeight: 500,
margin: 0,
color: '#151515',
}}>
Exploit Intelligence
</h2>

<div>
<p style={{ margin: 0 }}>
Exploit Intelligence is an AI-powered exploitability analysis engine that performs
deep, function-level analysis on application code paths to determine if detected
vulnerabilities (CVEs) are reachable and executable in your environment.
<br />
For more information refer to{' '}
<a
href="https://docs.redhat.com/en/documentation/red_hat_trusted_profile_analyzer"
target="_blank"
rel="noopener noreferrer"
>
Red Hat Exploit Intelligence documentation
</a>
</p>
</div>

<dl style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--pf-t--global--spacer--md)' }}>
<div style={{ display: 'flex', gap: 'var(--pf-t--global--spacer--sm)' }}>
<dt style={{ fontWeight: 700, minWidth: '165px' }}>Version</dt>
<dd style={{ margin: 0 }}>{loading ? 'Loading...' : versionInfo?.version || 'unknown'}</dd>
</div>

{components && (
<>
<div style={{ display: 'flex', gap: 'var(--pf-t--global--spacer--sm)' }}>
<dt style={{ fontWeight: 700 }}>Components</dt>
</div>

{components.engine && (
<div style={{ display: 'flex', gap: 'var(--pf-t--global--spacer--sm)', paddingLeft: 'var(--pf-t--global--spacer--lg)' }}>
<dt style={{ fontWeight: 700, minWidth: '125px' }}>EI engine</dt>
<dd style={{ margin: 0 }}>{components.engine.version}</dd>
</div>
)}
{components.webapp && (
<div style={{ display: 'flex', gap: 'var(--pf-t--global--spacer--sm)', paddingLeft: 'var(--pf-t--global--spacer--lg)' }}>
<dt style={{ fontWeight: 700, minWidth: '125px' }}>EI webapp</dt>
<dd style={{ margin: 0 }}>{components.webapp.version}</dd>
</div>
)}
{components.cache && (
<div style={{ display: 'flex', gap: 'var(--pf-t--global--spacer--sm)', paddingLeft: 'var(--pf-t--global--spacer--lg)' }}>
<dt style={{ fontWeight: 700, minWidth: '125px' }}>Nginx cache</dt>
<dd style={{ margin: 0 }}>{components.cache.version}</dd>
</div>
)}
</>
)}
</dl>
</div>
</PFAboutModal>
);
};

export default AboutModal;
78 changes: 46 additions & 32 deletions src/main/webui/src/components/PageHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.

/**
* Page header (masthead) component with branding and user toolbar
* Based on reference implementation pattern
*/

import React from 'react';
import React, { useState } from 'react';
import {
Masthead,
MastheadMain,
Expand All @@ -30,14 +25,14 @@ import {
Flex,
Stack,
FlexItem,
Button,
} from '@patternfly/react-core';
import { PageToggleButton } from '@patternfly/react-core';
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import UserAvatarDropdown from './UserAvatarDropdown';
import AboutModal from './AboutModal';

/**
* Brand component - displays Red Hat logo and product name
*/
const Brand: React.FC = () => {
return (
<Flex gap={{ default: "gapXs" }} alignItems={{ default: "alignItemsFlexStart" }}>
Expand Down Expand Up @@ -72,10 +67,12 @@ interface PageHeaderProps {
}

const PageHeader: React.FC<PageHeaderProps> = ({ isSidebarOpen, onSidebarToggle }) => {
const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);

const headerToolbar = (
<Toolbar
id="toolbar"
isFullHeight
<Toolbar
id="toolbar"
isFullHeight
isStatic
aria-label="Page header toolbar"
>
Expand Down Expand Up @@ -104,32 +101,49 @@ const PageHeader: React.FC<PageHeaderProps> = ({ isSidebarOpen, onSidebarToggle
md: 'visible',
}}
>
<UserAvatarDropdown />
<Button
variant="plain"
aria-label="About"
onClick={() => setIsAboutModalOpen(true)}
>
<QuestionCircleIcon />
</Button>
</ToolbarItem>
<ToolbarItem
visibility={{
default: 'hidden',
md: 'visible',
}}
>
<UserAvatarDropdown onAboutClick={() => setIsAboutModalOpen(true)} />
</ToolbarItem>
</ToolbarContent>
</Toolbar>
);

return (
<Masthead>
<MastheadMain>
<MastheadToggle>
<PageToggleButton
variant="plain"
aria-label="Global navigation"
isSidebarOpen={isSidebarOpen}
onSidebarToggle={onSidebarToggle}
id="vertical-nav-toggle"
>
<BarsIcon />
</PageToggleButton>
</MastheadToggle>
<MastheadBrand aria-label="ExploitIQ">
<Brand />
</MastheadBrand>
</MastheadMain>
<MastheadContent aria-label="Page header content">{headerToolbar}</MastheadContent>
</Masthead>
<>
<Masthead>
<MastheadMain>
<MastheadToggle>
<PageToggleButton
variant="plain"
aria-label="Global navigation"
isSidebarOpen={isSidebarOpen}
onSidebarToggle={onSidebarToggle}
id="vertical-nav-toggle"
>
<BarsIcon />
</PageToggleButton>
</MastheadToggle>
<MastheadBrand aria-label="ExploitIQ">
<Brand />
</MastheadBrand>
</MastheadMain>
<MastheadContent aria-label="Page header content">{headerToolbar}</MastheadContent>
</Masthead>
<AboutModal isOpen={isAboutModalOpen} onClose={() => setIsAboutModalOpen(false)} />
</>
);
};

Expand Down
24 changes: 20 additions & 4 deletions src/main/webui/src/components/UserAvatarDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,11 @@ import {
import { UserIcon } from "@patternfly/react-icons";
import { useAuth, logout } from "../hooks/useAuth";

const UserAvatarDropdown: React.FC = () => {
interface UserAvatarDropdownProps {
onAboutClick?: () => void;
}

const UserAvatarDropdown: React.FC<UserAvatarDropdownProps> = ({ onAboutClick }) => {
const [isOpen, setIsOpen] = useState(false);
const { userName, loading, error } = useAuth();

Expand All @@ -41,6 +45,13 @@ const UserAvatarDropdown: React.FC = () => {
setIsOpen(false);
};

const handleAbout = () => {
setIsOpen(false);
if (onAboutClick) {
onAboutClick();
}
Comment on lines +50 to +52

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional chaining ?.() is exactly the language feature for "call this if it exists", so the explicit null check is just a verbose way of writing the same thing.

Suggested change
if (onAboutClick) {
onAboutClick();
}
onAboutClick?.();
};

};

const handleLogout = async () => {
setIsOpen(false);
try {
Expand Down Expand Up @@ -86,9 +97,14 @@ const UserAvatarDropdown: React.FC = () => {
}

const userDropdownItems = (
<DropdownItem key="logout" onClick={handleLogout}>
Logout
</DropdownItem>
<>
<DropdownItem key="about" onClick={handleAbout}>
About
</DropdownItem>
<DropdownItem key="logout" onClick={handleLogout}>
Logout
</DropdownItem>
</>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

userDropdownItems is not needed because it's not re-used and because <></> wrapper is not necessary. See below.

);

return (
Expand Down
Loading