Adds instances to aactivty stream

awx/ui/src/screens/ActivityStream/ActivityStream.js

@@ -188,6 +188,10 @@ function ActivityStream() {
             >
               {t`Notification Templates`}
             </SelectOption>
+            <SelectOption
+              key="instance"
+              value="instance"
+            >{t`Instances`}</SelectOption>
             <SelectOption key="instance_groups" value="instance_group">
               {t`Instance Groups`}
             </SelectOption>

awx/ui/src/screens/InstanceGroup/InstanceGroups.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { t } from '@lingui/macro';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, useLocation } from 'react-router-dom';
 
 import useRequest from 'hooks/useRequest';
 import { SettingsAPI } from 'api';
@@ -14,6 +14,7 @@ import ContainerGroupAdd from './ContainerGroupAdd';
 import ContainerGroup from './ContainerGroup';
 
 function InstanceGroups() {
+  const { pathname } = useLocation();
   const {
     request: settingsRequest,
     isLoading: isSettingsRequestLoading,
@@ -62,10 +63,14 @@ function InstanceGroups() {
     });
   }, []);
 
+  const streamType = pathname.includes('instances')
+    ? 'instance'
+    : 'instance_group';
+
   return (
     <>
       <ScreenHeader
-        streamType="instance_group"
+        streamType={streamType}
         breadcrumbConfig={breadcrumbConfig}
       />
       <Switch>

awx/ui/src/screens/InstanceGroup/InstanceGroups.test.js

@@ -1,10 +1,20 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-
+import { InstanceGroupsAPI } from 'api';
 import InstanceGroups from './InstanceGroups';
 
+const mockUseLocationValue = {
+  pathname: '',
+};
+jest.mock('api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => mockUseLocationValue,
+}));
 describe('<InstanceGroups/>', () => {
   test('should set breadcrumbs', () => {
+    mockUseLocationValue.pathname = '/instance_groups';
+
     const wrapper = shallow(<InstanceGroups />);
 
     const header = wrapper.find('ScreenHeader');
@@ -15,4 +25,17 @@ describe('<InstanceGroups/>', () => {
       '/instance_groups/container_group/add': 'Create new container group',
     });
   });
+  test('should set breadcrumbs', async () => {
+    mockUseLocationValue.pathname = '/instance_groups/1/instances';
+    InstanceGroupsAPI.readInstances.mockResolvedValue({
+      data: { results: [{ hostname: 'EC2', id: 1 }] },
+    });
+    InstanceGroupsAPI.readInstanceOptions.mockResolvedValue({
+      data: { actions: {} },
+    });
+
+    const wrapper = shallow(<InstanceGroups />);
+
+    expect(wrapper.find('ScreenHeader').prop('streamType')).toEqual('instance');
+  });
 });