Merge pull request #6900 from AlexSCorey/6777-SyncInventorySourceList

Adds Sync Functionality to Inventory Source List

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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

@@ -5,7 +5,14 @@ class InventorySources extends LaunchUpdateMixin(Base) {
   constructor(http) {
     super(http);
     this.baseUrl = '/api/v2/inventory_sources/';
+
+    this.createSyncStart = this.createSyncStart.bind(this);
+  }
+
+  createSyncStart(sourceId, extraVars) {
+    return this.http.post(`${this.baseUrl}${sourceId}/update/`, {
+      extra_vars: extraVars,
+    });
   }
 }
-
 export default InventorySources;

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

@@ -5,7 +5,11 @@ class InventoryUpdates extends LaunchUpdateMixin(Base) {
   constructor(http) {
     super(http);
     this.baseUrl = '/api/v2/inventory_updates/';
+    this.createSyncCancel = this.createSyncCancel.bind(this);
+  }
+
+  createSyncCancel(sourceId) {
+    return this.http.post(`${this.baseUrl}${sourceId}/cancel/`);
   }
 }
-
 export default InventoryUpdates;

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { withI18n } from '@lingui/react';
 import { Link } from 'react-router-dom';
 import { t } from '@lingui/macro';
@@ -10,8 +10,12 @@ import {
   DataListItemCells,
   DataListCell,
   DataListAction,
+  Tooltip,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
+import StatusIcon from '@components/StatusIcon';
+
+import InventorySourceSyncButton from './InventorySourceSyncButton';
 
 function InventorySourceListItem({
   source,
@@ -21,47 +25,98 @@ function InventorySourceListItem({
   detailUrl,
   label,
 }) {
+  const [isSyncLoading, setIsSyncLoading] = useState(false);
+
+  const generateLastJobTooltip = job => {
+    return (
+      <>
+        <div>{i18n._(t`MOST RECENT SYNC`)}</div>
+        <div>
+          {i18n._(t`JOB ID:`)} {job.id}
+        </div>
+        <div>
+          {i18n._(t`STATUS:`)} {job.status.toUpperCase()}
+        </div>
+        {job.finished && (
+          <div>
+            {i18n._(t`FINISHED:`)} {job.finished}
+          </div>
+        )}
+      </>
+    );
+  };
   return (
-    <DataListItem aria-labelledby={`check-action-${source.id}`}>
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-source-${source.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={`check-action-${source.id}`}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell aria-label={i18n._(t`name`)} key="name">
-              <span>
-                <Link to={`${detailUrl}/details`}>
-                  <b>{source.name}</b>
-                </Link>
-              </span>
-            </DataListCell>,
-            <DataListCell aria-label={i18n._(t`type`)} key="type">
-              {label}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          id="actions"
-          aria-labelledby="actions"
-          aria-label="actions"
-        >
-          {source.summary_fields.user_capabilities.edit && (
-            <Button
-              aria-label={i18n._(t`Edit Source`)}
-              variant="plain"
-              component={Link}
-              to={`${detailUrl}/edit`}
-            >
-              <PencilAltIcon />
-            </Button>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+    <>
+      <DataListItem aria-labelledby={`check-action-${source.id}`}>
+        <DataListItemRow>
+          <DataListCheck
+            isDisabled={isSyncLoading}
+            id={`select-source-${source.id}`}
+            checked={isSelected}
+            onChange={onSelect}
+            aria-labelledby={`check-action-${source.id}`}
+          />
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="status" isFilled={false}>
+                {source.summary_fields.last_job && (
+                  <Tooltip
+                    position="top"
+                    content={generateLastJobTooltip(
+                      source.summary_fields.last_job
+                    )}
+                    key={source.summary_fields.last_job.id}
+                  >
+                    <Link
+                      to={`/jobs/inventory/${source.summary_fields.last_job.id}`}
+                    >
+                      <StatusIcon
+                        status={source.summary_fields.last_job.status}
+                      />
+                    </Link>
+                  </Tooltip>
+                )}
+              </DataListCell>,
+              <DataListCell aria-label={i18n._(t`name`)} key="name">
+                <span>
+                  <Link to={`${detailUrl}/details`}>
+                    <b>{source.name}</b>
+                  </Link>
+                </span>
+              </DataListCell>,
+              <DataListCell aria-label={i18n._(t`type`)} key="type">
+                {label}
+              </DataListCell>,
+            ]}
+          />
+          <DataListAction
+            id="actions"
+            aria-labelledby="actions"
+            aria-label="actions"
+          >
+            {source.summary_fields.user_capabilities.start && (
+              <InventorySourceSyncButton
+                onSyncLoading={isLoading => {
+                  setIsSyncLoading(isLoading);
+                }}
+                source={source}
+              />
+            )}
+            {source.summary_fields.user_capabilities.edit && (
+              <Button
+                aria-label={i18n._(t`Edit Source`)}
+                variant="plain"
+                component={Link}
+                isDisabled={isSyncLoading}
+                to={`${detailUrl}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            )}
+          </DataListAction>
+        </DataListItemRow>
+      </DataListItem>
+    </>
   );
 }
 export default withI18n()(InventorySourceListItem);

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.test.jsx

@@ -6,7 +6,19 @@ const source = {
   id: 1,
   name: 'Foo',
   source: 'Source Bar',
-  summary_fields: { user_capabilities: { start: true, edit: true } },
+  summary_fields: {
+    user_capabilities: { start: true, edit: true },
+    last_job: {
+      canceled_on: '2020-04-30T18:56:46.054087Z',
+      description: '',
+      failed: true,
+      finished: '2020-04-30T18:56:46.054031Z',
+      id: 664,
+      license_error: false,
+      name: ' Inventory 1 Org 0 - source 4',
+      status: 'canceled',
+    },
+  },
 };
 describe('<InventorySourceListItem />', () => {
   let wrapper;
@@ -37,19 +49,28 @@ describe('<InventorySourceListItem />', () => {
         label="Source Bar"
       />
     );
-    expect(wrapper.find('DataListCheck').length).toBe(1);
+    expect(wrapper.find('StatusIcon').length).toBe(1);
     expect(
       wrapper
-        .find('DataListCell')
+        .find('Link')
         .at(0)
-        .text()
-    ).toBe('Foo');
+        .prop('to')
+    ).toBe('/jobs/inventory/664');
+    expect(wrapper.find('DataListCheck').length).toBe(1);
+    expect();
     expect(
       wrapper
         .find('DataListCell')
         .at(1)
         .text()
+    ).toBe('Foo');
+    expect(
+      wrapper
+        .find('DataListCell')
+        .at(2)
+        .text()
     ).toBe('Source Bar');
+    expect(wrapper.find('InventorySourceSyncButton').length).toBe(1);
     expect(wrapper.find('PencilAltIcon').length).toBe(1);
   });
 
@@ -67,13 +88,48 @@ describe('<InventorySourceListItem />', () => {
     expect(wrapper.find('DataListCheck').prop('checked')).toBe(true);
   });
 
-  test(' should render edit buttons', () => {
+  test('should not render status icon', () => {
     const onSelect = jest.fn();
     wrapper = mountWithContexts(
       <InventorySourceListItem
         source={{
           ...source,
-          summary_fields: { user_capabilities: { edit: false, start: true } },
+          summary_fields: {
+            user_capabilities: { start: true, edit: true },
+            last_job: null,
+          },
+        }}
+        isSelected={false}
+        onSelect={onSelect}
+        label="Source Bar"
+      />
+    );
+    expect(wrapper.find('StatusIcon').length).toBe(0);
+  });
+
+  test('should not render sync buttons', async () => {
+    const onSelect = jest.fn();
+    wrapper = mountWithContexts(
+      <InventorySourceListItem
+        source={{
+          ...source,
+          summary_fields: { user_capabilities: { start: false, edit: true } },
+        }}
+        isSelected={false}
+        onSelect={onSelect}
+      />
+    );
+    expect(wrapper.find('InventorySourceSyncButton').length).toBe(0);
+    expect(wrapper.find('Button[aria-label="Edit Source"]').length).toBe(1);
+  });
+
+  test('should not render edit buttons', async () => {
+    const onSelect = jest.fn();
+    wrapper = mountWithContexts(
+      <InventorySourceListItem
+        source={{
+          ...source,
+          summary_fields: { user_capabilities: { start: true, edit: false } },
         }}
         isSelected={false}
         onSelect={onSelect}
@@ -81,5 +137,6 @@ describe('<InventorySourceListItem />', () => {
       />
     );
     expect(wrapper.find('Button[aria-label="Edit Source"]').length).toBe(0);
+    expect(wrapper.find('InventorySourceSyncButton').length).toBe(1);
   });
 });

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceSyncButton.jsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import PropTypes from 'prop-types';
+import { Button, Tooltip } from '@patternfly/react-core';
+import { SyncIcon, MinusCircleIcon } from '@patternfly/react-icons';
+import useRequest, { useDismissableError } from '@util/useRequest';
+import AlertModal from '@components/AlertModal/AlertModal';
+import ErrorDetail from '@components/ErrorDetail/ErrorDetail';
+import { InventoryUpdatesAPI, InventorySourcesAPI } from '@api';
+
+function InventorySourceSyncButton({ onSyncLoading, source, i18n }) {
+  const [updateStatus, setUpdateStatus] = useState(source.status);
+
+  const {
+    isLoading: startSyncLoading,
+    error: startSyncError,
+    request: startSyncProcess,
+  } = useRequest(
+    useCallback(async () => {
+      const {
+        data: { status },
+      } = await InventorySourcesAPI.createSyncStart(source.id);
+
+      setUpdateStatus(status);
+
+      return status;
+    }, [source.id]),
+    {}
+  );
+
+  const {
+    isLoading: cancelSyncLoading,
+    error: cancelSyncError,
+    request: cancelSyncProcess,
+  } = useRequest(
+    useCallback(async () => {
+      const {
+        data: {
+          summary_fields: {
+            current_update: { id },
+          },
+        },
+      } = await InventorySourcesAPI.readDetail(source.id);
+
+      await InventoryUpdatesAPI.createSyncCancel(id);
+      setUpdateStatus(null);
+    }, [source.id])
+  );
+
+  useEffect(() => onSyncLoading(startSyncLoading || cancelSyncLoading), [
+    onSyncLoading,
+    startSyncLoading,
+    cancelSyncLoading,
+  ]);
+
+  const { error, dismissError } = useDismissableError(
+    cancelSyncError || startSyncError
+  );
+
+  return (
+    <>
+      {updateStatus === 'pending' ? (
+        <Tooltip content={i18n._(t`Cancel sync process`)} position="top">
+          <Button
+            isDisabled={cancelSyncLoading || startSyncLoading}
+            aria-label={i18n._(t`Cancel sync source`)}
+            variant="plain"
+            onClick={cancelSyncProcess}
+          >
+            <MinusCircleIcon />
+          </Button>
+        </Tooltip>
+      ) : (
+        <Tooltip content={i18n._(t`Start sync process`)} position="top">
+          <Button
+            isDisabled={cancelSyncLoading || startSyncLoading}
+            aria-label={i18n._(t`Start sync source`)}
+            variant="plain"
+            onClick={startSyncProcess}
+          >
+            <SyncIcon />
+          </Button>
+        </Tooltip>
+      )}
+      {error && (
+        <AlertModal
+          isOpen={error}
+          variant="error"
+          title={i18n._(t`Error!`)}
+          onClose={dismissError}
+        >
+          {startSyncError
+            ? i18n._(t`Failed to sync inventory source.`)
+            : i18n._(t`Failed to cancel inventory source sync.`)}
+          <ErrorDetail error={error} />
+        </AlertModal>
+      )}
+    </>
+  );
+}
+
+InventorySourceSyncButton.propTypes = {
+  onSyncLoading: PropTypes.func.isRequired,
+  source: PropTypes.shape({}),
+};
+
+export default withI18n()(InventorySourceSyncButton);

awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceSyncButton.test.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { InventoryUpdatesAPI, InventorySourcesAPI } from '@api';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import InventorySourceSyncButton from './InventorySourceSyncButton';
+
+jest.mock('@api/models/InventoryUpdates');
+jest.mock('@api/models/InventorySources');
+
+const source = { id: 1, name: 'Foo', source: 'Source Bar' };
+const onSyncLoading = jest.fn();
+
+describe('<InventorySourceSyncButton />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(
+      <InventorySourceSyncButton
+        source={source}
+        onSyncLoading={onSyncLoading}
+      />
+    );
+  });
+  afterEach(() => {
+    wrapper.unmount();
+    jest.clearAllMocks();
+  });
+  test('should mount properly', async () => {
+    expect(wrapper.find('InventorySourceSyncButton').length).toBe(1);
+  });
+
+  test('should render start sync button', async () => {
+    expect(wrapper.find('SyncIcon').length).toBe(1);
+    expect(
+      wrapper.find('Button[aria-label="Start sync source"]').prop('isDisabled')
+    ).toBe(false);
+  });
+
+  test('should render cancel sync button', async () => {
+    wrapper = mountWithContexts(
+      <InventorySourceSyncButton
+        source={{ status: 'pending', ...source }}
+        onSyncLoading={onSyncLoading}
+      />
+    );
+    expect(wrapper.find('MinusCircleIcon').length).toBe(1);
+  });
+
+  test('should start sync properly', async () => {
+    InventorySourcesAPI.createSyncStart.mockResolvedValue({
+      data: { status: 'pending' },
+    });
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Start sync source"]').simulate('click')
+    );
+    expect(InventorySourcesAPI.createSyncStart).toBeCalledWith(1);
+    wrapper.update();
+    expect(wrapper.find('Button[aria-label="Cancel sync source"]').length).toBe(
+      1
+    );
+  });
+  test('should cancel sync properly', async () => {
+    InventorySourcesAPI.readDetail.mockResolvedValue({
+      data: { summary_fields: { current_update: { id: 120 } } },
+    });
+    InventoryUpdatesAPI.createSyncCancel.mockResolvedValue({
+      data: { status: '' },
+    });
+
+    wrapper = mountWithContexts(
+      <InventorySourceSyncButton
+        source={{ status: 'pending', ...source }}
+        onSyncLoading={onSyncLoading}
+      />
+    );
+    expect(wrapper.find('Button[aria-label="Cancel sync source"]').length).toBe(
+      1
+    );
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Cancel sync source"]').simulate('click')
+    );
+
+    expect(InventorySourcesAPI.readDetail).toBeCalledWith(1);
+    expect(InventoryUpdatesAPI.createSyncCancel).toBeCalledWith(120);
+
+    wrapper.update();
+
+    expect(wrapper.find('Button[aria-label="Start sync source"]').length).toBe(
+      1
+    );
+  });
+});