feat(eventtemplates): enable custom event template UI to display when no target is selected

src/app/Events/EventTemplates.tsx

@@ -62,7 +62,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { forkJoin, Observable, of } from 'rxjs';
-import { catchError, concatMap, defaultIfEmpty, filter, first, tap } from 'rxjs/operators';
+import { catchError, concatMap, defaultIfEmpty, first, tap } from 'rxjs/operators';
 
 const tableColumns: TableColumn[] = [
   {
@@ -165,9 +165,10 @@ export const EventTemplates: React.FC<EventTemplatesProps> = () => {
       context.target
         .target()
         .pipe(
-          filter((target) => !!target),
           first(),
-          concatMap((target: Target) => context.api.getTargetEventTemplates(target)),
+          concatMap((target: Target) =>
+            target ? context.api.getTargetEventTemplates(target) : context.api.getEventTemplates(),
+          ),
         )
         .subscribe({
           next: handleTemplates,

src/app/Events/Events.tsx

@@ -15,8 +15,9 @@
  */
 import { AgentLiveProbes } from '@app/Agent/AgentLiveProbes';
 import { AgentProbeTemplates } from '@app/Agent/AgentProbeTemplates';
+import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { TargetView } from '@app/TargetView/TargetView';
+import { TargetContextSelector } from '@app/TargetView/TargetContextSelector';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { getActiveTab, switchTab } from '@app/utils/utils';
 import { Card, CardBody, Tab, Tabs, Tooltip } from '@patternfly/react-core';
@@ -30,19 +31,21 @@ export interface EventsProps {}
 
 export const Events: React.FC<EventsProps> = ({ ...props }) => {
   return (
-    <TargetView {...props} pageTitle="Events">
-      <Card isFullHeight>
-        <CardBody isFilled>
-          <EventTabs />
-        </CardBody>
-      </Card>
-      <Card isFullHeight>
-        <CardBody isFilled>
-          <AgentTabs />
-        </CardBody>
-      </Card>
-      <></>
-    </TargetView>
+    <>
+      <TargetContextSelector />
+      <BreadcrumbPage {...props} pageTitle="Events">
+        <Card isFullHeight>
+          <CardBody isFilled>
+            <EventTabs />
+          </CardBody>
+        </Card>
+        <Card isFullHeight>
+          <CardBody isFilled>
+            <AgentTabs />
+          </CardBody>
+        </Card>
+      </BreadcrumbPage>
+    </>
   );
 };
 
@@ -52,9 +55,18 @@ enum EventTab {
 }
 
 export const EventTabs: React.FC = () => {
+  const context = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+
   const { search, pathname } = useLocation();
   const navigate = useNavigate();
 
+  const [targetSelected, setTargetSelected] = React.useState(false);
+
+  React.useEffect(() => {
+    addSubscription(context.target.target().subscribe((t) => setTargetSelected(!!t)));
+  }, [addSubscription, context, context.target]);
+
   const activeTab = React.useMemo(() => {
     return getActiveTab(search, 'eventTab', Object.values(EventTab), EventTab.EVENT_TEMPLATE);
   }, [search]);
@@ -70,7 +82,7 @@ export const EventTabs: React.FC = () => {
       <Tab eventKey={EventTab.EVENT_TEMPLATE} title="Event Templates">
         <EventTemplates />
       </Tab>
-      <Tab eventKey={EventTab.EVENT_TYPE} title="Event types">
+      <Tab isAriaDisabled={!targetSelected} eventKey={EventTab.EVENT_TYPE} title="Event types">
         <EventTypes />
       </Tab>
     </Tabs>
@@ -89,6 +101,12 @@ export const AgentTabs: React.FC = () => {
   const { search, pathname } = useLocation();
   const navigate = useNavigate();
 
+  const [targetSelected, setTargetSelected] = React.useState(false);
+
+  React.useEffect(() => {
+    addSubscription(context.target.target().subscribe((t) => setTargetSelected(!!t)));
+  }, [addSubscription, context, context.target]);
+
   const activeTab = React.useMemo(() => {
     return getActiveTab(search, 'agentTab', Object.values(AgentTab), AgentTab.AGENT_TEMPLATE);
   }, [search]);
@@ -121,7 +139,7 @@ export const AgentTabs: React.FC = () => {
       <Tab
         eventKey={AgentTab.AGENT_PROBE}
         title="Live Configuration"
-        isAriaDisabled={!agentDetected}
+        isAriaDisabled={!targetSelected || !agentDetected}
         tooltip={
           agentDetected ? undefined : (
             <Tooltip content="JMC ByteCode Instrumentation Agent not detected for the selected Target JVM" />

src/app/Rules/CreateRule.tsx

@@ -285,7 +285,7 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
                     : [];
                 }),
               ),
-              of([]),
+              context.api.getEventTemplates().pipe(catchError((_) => of<EventTemplate[]>([]))),
             ),
           ),
         )

src/app/Shared/Services/Api.service.tsx

@@ -592,7 +592,7 @@ export class ApiService {
 
     const body = new window.FormData();
     body.append('template', file);
-    return this.sendLegacyRequest('v4', 'templates', 'Template Upload Failed', {
+    return this.sendLegacyRequest('v4', 'event_templates', 'Template Upload Failed', {
       body: body,
       method: 'POST',
       headers: {},
@@ -1361,6 +1361,10 @@ export class ApiService {
     return this.doGet(`targets/${target.id}/recordings`, 'v4', undefined, suppressNotifications, skipStatusCheck);
   }
 
+  getEventTemplates(suppressNotifications = false, skipStatusCheck = false): Observable<EventTemplate[]> {
+    return this.doGet<EventTemplate[]>('event_templates', 'v4', undefined, suppressNotifications, skipStatusCheck);
+  }
+
   getTargetEventTemplates(
     target: TargetStub,
     suppressNotifications = false,

src/test/Rules/CreateRule.test.tsx

@@ -43,6 +43,12 @@ const mockEventTemplate: EventTemplate = {
   provider: 'some provider',
   description: 'some description',
 };
+const mockCustomEventTemplate: EventTemplate = {
+  name: 'CustomTemplate',
+  type: 'CUSTOM',
+  provider: 'some provider',
+  description: 'some description',
+};
 
 const mockRule: Rule = {
   name: 'mockRule',
@@ -64,6 +70,7 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
+jest.spyOn(defaultServices.api, 'getEventTemplates').mockReturnValue(of([mockCustomEventTemplate]));
 jest.spyOn(defaultServices.api, 'getTargetEventTemplates').mockReturnValue(of([mockEventTemplate]));
 
 jest.spyOn(defaultServices.targets, 'targets').mockReturnValue(of([mockTarget]));