Make UI work when not running at root path

awx/ui/src/api/models/ActivityStream.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class ActivityStream extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/activity_stream/';
+    this.baseUrl = 'api/v2/activity_stream/';
   }
 }
 

awx/ui/src/api/models/AdHocCommands.js

@@ -4,7 +4,7 @@ import RunnableMixin from '../mixins/Runnable.mixin';
 class AdHocCommands extends RunnableMixin(Base) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/ad_hoc_commands/';
+    this.baseUrl = 'api/v2/ad_hoc_commands/';
   }
 
   readCredentials(id) {

awx/ui/src/api/models/Applications.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Applications extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/applications/';
+    this.baseUrl = 'api/v2/applications/';
   }
 
   readTokens(appId, params) {

awx/ui/src/api/models/Auth.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Auth extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/auth/';
+    this.baseUrl = 'api/v2/auth/';
   }
 }
 

awx/ui/src/api/models/Config.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Config extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/config/';
+    this.baseUrl = 'api/v2/config/';
     this.read = this.read.bind(this);
   }
 

awx/ui/src/api/models/CredentialInputSources.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class CredentialInputSources extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/credential_input_sources/';
+    this.baseUrl = 'api/v2/credential_input_sources/';
   }
 }
 

awx/ui/src/api/models/CredentialTypes.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class CredentialTypes extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/credential_types/';
+    this.baseUrl = 'api/v2/credential_types/';
   }
 
   async loadAllTypes(

awx/ui/src/api/models/CredentialTypes.test.js

@@ -20,7 +20,7 @@ describe('CredentialTypesAPI', () => {
 
     expect(mockHttp.get).toHaveBeenCalledTimes(1);
     expect(mockHttp.get.mock.calls[0]).toEqual([
-      `/api/v2/credential_types/`,
+      `api/v2/credential_types/`,
       { params: { page_size: 200 } },
     ]);
     expect(types).toEqual(typesData);
@@ -41,11 +41,11 @@ describe('CredentialTypesAPI', () => {
 
     expect(mockHttp.get).toHaveBeenCalledTimes(2);
     expect(mockHttp.get.mock.calls[0]).toEqual([
-      `/api/v2/credential_types/`,
+      `api/v2/credential_types/`,
       { params: { page_size: 200 } },
     ]);
     expect(mockHttp.get.mock.calls[1]).toEqual([
-      `/api/v2/credential_types/`,
+      `api/v2/credential_types/`,
       { params: { page_size: 200, page: 2 } },
     ]);
     expect(types).toHaveLength(4);

awx/ui/src/api/models/Credentials.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Credentials extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/credentials/';
+    this.baseUrl = 'api/v2/credentials/';
 
     this.readAccessList = this.readAccessList.bind(this);
     this.readAccessOptions = this.readAccessOptions.bind(this);

awx/ui/src/api/models/Dashboard.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Dashboard extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/dashboard/';
+    this.baseUrl = 'api/v2/dashboard/';
   }
 
   readJobGraph(params) {

awx/ui/src/api/models/ExecutionEnvironments.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class ExecutionEnvironments extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/execution_environments/';
+    this.baseUrl = 'api/v2/execution_environments/';
   }
 
   readUnifiedJobTemplates(id, params) {

awx/ui/src/api/models/Groups.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Groups extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/groups/';
+    this.baseUrl = 'api/v2/groups/';
 
     this.associateHost = this.associateHost.bind(this);
     this.createHost = this.createHost.bind(this);

awx/ui/src/api/models/Hosts.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Hosts extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/hosts/';
+    this.baseUrl = 'api/v2/hosts/';
 
     this.readFacts = this.readFacts.bind(this);
     this.readAllGroups = this.readAllGroups.bind(this);

awx/ui/src/api/models/InstanceGroups.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class InstanceGroups extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/instance_groups/';
+    this.baseUrl = 'api/v2/instance_groups/';
 
     this.associateInstance = this.associateInstance.bind(this);
     this.disassociateInstance = this.disassociateInstance.bind(this);

awx/ui/src/api/models/Instances.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Instances extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/instances/';
+    this.baseUrl = 'api/v2/instances/';
 
     this.readHealthCheckDetail = this.readHealthCheckDetail.bind(this);
     this.healthCheck = this.healthCheck.bind(this);

awx/ui/src/api/models/Inventories.js

@@ -4,7 +4,7 @@ import InstanceGroupsMixin from '../mixins/InstanceGroups.mixin';
 class Inventories extends InstanceGroupsMixin(Base) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/inventories/';
+    this.baseUrl = 'api/v2/inventories/';
 
     this.readAccessList = this.readAccessList.bind(this);
     this.readAccessOptions = this.readAccessOptions.bind(this);

awx/ui/src/api/models/InventoryScripts.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class InventoryScripts extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/inventory_scripts/';
+    this.baseUrl = 'api/v2/inventory_scripts/';
   }
 }
 

awx/ui/src/api/models/InventorySources.js

@@ -8,7 +8,7 @@ class InventorySources extends LaunchUpdateMixin(
 ) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/inventory_sources/';
+    this.baseUrl = 'api/v2/inventory_sources/';
 
     this.createSchedule = this.createSchedule.bind(this);
     this.createSyncStart = this.createSyncStart.bind(this);

awx/ui/src/api/models/InventoryUpdates.js

@@ -4,7 +4,7 @@ import RunnableMixin from '../mixins/Runnable.mixin';
 class InventoryUpdates extends RunnableMixin(Base) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/inventory_updates/';
+    this.baseUrl = 'api/v2/inventory_updates/';
     this.createSyncCancel = this.createSyncCancel.bind(this);
   }
 

awx/ui/src/api/models/JobTemplates.js

@@ -8,7 +8,7 @@ class JobTemplates extends SchedulesMixin(
 ) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/job_templates/';
+    this.baseUrl = 'api/v2/job_templates/';
 
     this.createSchedule = this.createSchedule.bind(this);
     this.launch = this.launch.bind(this);

awx/ui/src/api/models/Jobs.js

@@ -4,7 +4,7 @@ import RunnableMixin from '../mixins/Runnable.mixin';
 class Jobs extends RunnableMixin(Base) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/jobs/';
+    this.baseUrl = 'api/v2/jobs/';
     this.jobEventSlug = '/job_events/';
   }
 

awx/ui/src/api/models/Labels.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Labels extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/labels/';
+    this.baseUrl = 'api/v2/labels/';
   }
 }
 

awx/ui/src/api/models/Me.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Me extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/me/';
+    this.baseUrl = 'api/v2/me/';
   }
 }
 

awx/ui/src/api/models/Metrics.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Metrics extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/metrics/';
+    this.baseUrl = 'api/v2/metrics/';
   }
 }
 export default Metrics;

awx/ui/src/api/models/NotificationTemplates.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class NotificationTemplates extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/notification_templates/';
+    this.baseUrl = 'api/v2/notification_templates/';
   }
 
   test(id) {

awx/ui/src/api/models/Notifications.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Notifications extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/notifications/';
+    this.baseUrl = 'api/v2/notifications/';
   }
 }
 

awx/ui/src/api/models/Organizations.js

@@ -5,7 +5,7 @@ import InstanceGroupsMixin from '../mixins/InstanceGroups.mixin';
 class Organizations extends InstanceGroupsMixin(NotificationsMixin(Base)) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/organizations/';
+    this.baseUrl = 'api/v2/organizations/';
   }
 
   readAccessList(id, params) {

awx/ui/src/api/models/Organizations.test.js

@@ -20,7 +20,7 @@ describe('OrganizationsAPI', () => {
     const testParams = { foo: 'bar' };
     const testParamsDuplicates = { foo: ['bar', 'baz'] };
 
-    const mockBaseURL = `/api/v2/organizations/${orgId}/access_list/`;
+    const mockBaseURL = `api/v2/organizations/${orgId}/access_list/`;
 
     await OrganizationsAPI.readAccessList(orgId);
     await OrganizationsAPI.readAccessList(orgId, testParams);
@@ -41,7 +41,7 @@ describe('OrganizationsAPI', () => {
     const testParams = { foo: 'bar' };
     const testParamsDuplicates = { foo: ['bar', 'baz'] };
 
-    const mockBaseURL = `/api/v2/organizations/${orgId}/teams/`;
+    const mockBaseURL = `api/v2/organizations/${orgId}/teams/`;
 
     await OrganizationsAPI.readTeams(orgId);
     await OrganizationsAPI.readTeams(orgId, testParams);

awx/ui/src/api/models/ProjectUpdates.js

@@ -4,7 +4,7 @@ import RunnableMixin from '../mixins/Runnable.mixin';
 class ProjectUpdates extends RunnableMixin(Base) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/project_updates/';
+    this.baseUrl = 'api/v2/project_updates/';
   }
 
   readCredentials(id) {

awx/ui/src/api/models/Projects.js

@@ -8,7 +8,7 @@ class Projects extends SchedulesMixin(
 ) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/projects/';
+    this.baseUrl = 'api/v2/projects/';
 
     this.readAccessList = this.readAccessList.bind(this);
     this.readAccessOptions = this.readAccessOptions.bind(this);

awx/ui/src/api/models/Roles.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Roles extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/roles/';
+    this.baseUrl = 'api/v2/roles/';
   }
 
   disassociateUserRole(roleId, userId) {

awx/ui/src/api/models/Root.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Root extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/';
+    this.baseUrl = 'api/';
     this.redirectURL = '/api/v2/config/';
   }
 
@@ -31,7 +31,7 @@ class Root extends Base {
     // automation etc. should relocate this variable file to an importable
     // location in src prior to building. That said, a raw http call
     // works for now.
-    return this.http.get('/static/media/default.strings.json');
+    return this.http.get('static/media/default.strings.json');
   }
 }
 

awx/ui/src/api/models/Schedules.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Schedules extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/schedules/';
+    this.baseUrl = 'api/v2/schedules/';
   }
 
   createPreview(data) {

awx/ui/src/api/models/Settings.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Settings extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/settings/';
+    this.baseUrl = 'api/v2/settings/';
   }
 
   readAllOptions() {

awx/ui/src/api/models/SystemJobTemplates.js

@@ -7,7 +7,7 @@ const Mixins = SchedulesMixin(NotificationsMixin(Base));
 class SystemJobTemplates extends Mixins {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/system_job_templates/';
+    this.baseUrl = 'api/v2/system_job_templates/';
   }
 
   launch(id, data) {

awx/ui/src/api/models/SystemJobs.js

@@ -5,7 +5,7 @@ import RunnableMixin from '../mixins/Runnable.mixin';
 class SystemJobs extends RunnableMixin(Base) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/system_jobs/';
+    this.baseUrl = 'api/v2/system_jobs/';
   }
 
   readCredentials(id) {

awx/ui/src/api/models/Teams.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Teams extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/teams/';
+    this.baseUrl = 'api/v2/teams/';
   }
 
   associateRole(teamId, roleId) {

awx/ui/src/api/models/Teams.test.js

@@ -23,7 +23,7 @@ describe('TeamsAPI', () => {
 
     expect(mockHttp.post).toHaveBeenCalledTimes(1);
     expect(mockHttp.post.mock.calls[0]).toContainEqual(
-      `/api/v2/teams/${teamId}/roles/`,
+      `api/v2/teams/${teamId}/roles/`,
       { id: roleId }
     );
   });
@@ -33,7 +33,7 @@ describe('TeamsAPI', () => {
 
     expect(mockHttp.post).toHaveBeenCalledTimes(1);
     expect(mockHttp.post.mock.calls[0]).toContainEqual(
-      `/api/v2/teams/${teamId}/roles/`,
+      `api/v2/teams/${teamId}/roles/`,
       {
         id: roleId,
         disassociate: true,

awx/ui/src/api/models/Tokens.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Tokens extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/tokens/';
+    this.baseUrl = 'api/v2/tokens/';
   }
 }
 

awx/ui/src/api/models/UnifiedJobTemplates.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class UnifiedJobTemplates extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/unified_job_templates/';
+    this.baseUrl = 'api/v2/unified_job_templates/';
   }
 }
 

awx/ui/src/api/models/UnifiedJobs.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class UnifiedJobs extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/unified_jobs/';
+    this.baseUrl = 'api/v2/unified_jobs/';
   }
 }
 

awx/ui/src/api/models/Users.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class Users extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/users/';
+    this.baseUrl = 'api/v2/users/';
   }
 
   associateRole(userId, roleId) {

awx/ui/src/api/models/Users.test.js

@@ -20,7 +20,7 @@ describe('UsersAPI', () => {
 
     expect(mockHttp.post).toHaveBeenCalledTimes(1);
     expect(mockHttp.post.mock.calls[0]).toContainEqual(
-      `/api/v2/users/${userId}/roles/`,
+      `api/v2/users/${userId}/roles/`,
       { id: roleId }
     );
   });
@@ -30,7 +30,7 @@ describe('UsersAPI', () => {
 
     expect(mockHttp.post).toHaveBeenCalledTimes(1);
     expect(mockHttp.post.mock.calls[0]).toContainEqual(
-      `/api/v2/users/${userId}/roles/`,
+      `api/v2/users/${userId}/roles/`,
       {
         id: roleId,
         disassociate: true,

awx/ui/src/api/models/WorkflowApprovalTemplates.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class WorkflowApprovalTemplates extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/workflow_approval_templates/';
+    this.baseUrl = 'api/v2/workflow_approval_templates/';
   }
 }
 

awx/ui/src/api/models/WorkflowApprovals.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class WorkflowApprovals extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/workflow_approvals/';
+    this.baseUrl = 'api/v2/workflow_approvals/';
   }
 
   approve(id) {

awx/ui/src/api/models/WorkflowJobTemplateNodes.js

@@ -3,7 +3,7 @@ import Base from '../Base';
 class WorkflowJobTemplateNodes extends Base {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/workflow_job_template_nodes/';
+    this.baseUrl = 'api/v2/workflow_job_template_nodes/';
   }
 
   createApprovalTemplate(id, data) {

awx/ui/src/api/models/WorkflowJobTemplates.js

@@ -5,7 +5,7 @@ import NotificationsMixin from '../mixins/Notifications.mixin';
 class WorkflowJobTemplates extends SchedulesMixin(NotificationsMixin(Base)) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/workflow_job_templates/';
+    this.baseUrl = 'api/v2/workflow_job_templates/';
     this.createSchedule = this.createSchedule.bind(this);
   }
 

awx/ui/src/api/models/WorkflowJobs.js

@@ -4,7 +4,7 @@ import RunnableMixin from '../mixins/Runnable.mixin';
 class WorkflowJobs extends RunnableMixin(Base) {
   constructor(http) {
     super(http);
-    this.baseUrl = '/api/v2/workflow_jobs/';
+    this.baseUrl = 'api/v2/workflow_jobs/';
   }
 
   readNodes(id, params) {

awx/ui/src/components/About/About.js

@@ -41,7 +41,7 @@ function About({ version, isOpen, onClose }) {
       onClose={onClose}
       productName={brandName}
       trademark={`${copyright} ${new Date().getFullYear()} ${redHatInc}`}
-      brandImageSrc="/static/media/logo-header.svg"
+      brandImageSrc="static/media/logo-header.svg"
       brandImageAlt={t`Brand Image`}
     >
       <pre>

awx/ui/src/components/AppContainer/BrandLogo.js

@@ -14,7 +14,7 @@ const BrandImg = styled.img`
 `;
 
 const BrandLogo = ({ alt }) => (
-  <BrandImg src="/static/media/logo-header.svg" alt={alt} />
+  <BrandImg src="static/media/logo-header.svg" alt={alt} />
 );
 
 export default BrandLogo;

awx/ui/src/hooks/useWebsocket.js

@@ -8,7 +8,7 @@ export default function useWebsocket(subscribeGroups) {
     ws.current = new WebSocket(
       `${window.location.protocol === 'http:' ? 'ws:' : 'wss:'}//${
         window.location.host
-      }/websocket/`
+      }${window.location.pathname}websocket/`
     );
 
     const connect = () => {

awx/ui/src/screens/Job/JobOutput/connectJobSocket.js

@@ -4,7 +4,7 @@ export default function connectJobSocket({ type, id }, onMessage) {
   ws = new WebSocket(
     `${window.location.protocol === 'http:' ? 'ws:' : 'wss:'}//${
       window.location.host
-    }/websocket/`
+    }${window.location.pathname}websocket/`
   );
 
   ws.onopen = () => {

awx/ui/src/screens/Login/Login.js

@@ -32,7 +32,7 @@ import ErrorDetail from 'components/ErrorDetail';
 import { useSession } from 'contexts/Session';
 import { SESSION_REDIRECT_URL } from '../../constants';
 
-const loginLogoSrc = '/static/media/logo-login.svg';
+const loginLogoSrc = 'static/media/logo-login.svg';
 
 const Login = styled(PFLogin)`
   & .pf-c-brand {

awx/ui/src/screens/Login/Login.test.js

@@ -121,7 +121,7 @@ describe('<Login />', () => {
     });
     const { loginHeaderLogo } = await findChildren(wrapper);
     const { alt, src } = loginHeaderLogo.props();
-    expect([alt, src]).toEqual(['AWX', '/static/media/logo-login.svg']);
+    expect([alt, src]).toEqual(['AWX', 'static/media/logo-login.svg']);
   });
 
   test('custom login info handled correctly', async () => {
@@ -152,7 +152,7 @@ describe('<Login />', () => {
     });
     const { loginHeaderLogo } = await findChildren(wrapper);
     const { alt, src } = loginHeaderLogo.props();
-    expect([alt, src]).toEqual([null, '/static/media/logo-login.svg']);
+    expect([alt, src]).toEqual([null, 'static/media/logo-login.svg']);
     expect(wrapper.find('AlertModal').length).toBe(1);
   });
 

awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/AnalyticsStep.js

@@ -107,7 +107,7 @@ function AnalyticsStep() {
       <Flex alignItems={{ default: 'alignItemsCenter' }}>
         <img
           width="300"
-          src="/static/media/insights-analytics-dashboard.jpeg"
+          src="static/media/insights-analytics-dashboard.jpeg"
           alt={t`Insights for Ansible Automation Platform dashboard`}
         />
         <Button