Finish import log for imported roles

src/components/legacy-role/role-import-form.tsx

@@ -2,7 +2,7 @@ import { Trans, t } from '@lingui/macro';
 import { ActionGroup, Button } from '@patternfly/react-core';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { LegacyImportAPI } from 'src/api';
+import { LegacyImportAPI, NamespaceAPI } from 'src/api';
 import { AlertType, DataForm, ExternalLink } from 'src/components';
 import { useContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';

src/components/my-imports/import-console.tsx

@@ -5,6 +5,7 @@ import {
   CollectionVersionSearch,
   ImportDetailType,
   ImportListType,
+  LegacyRoleImportDetailType,
   PulpStatus,
 } from 'src/api';
 import { StatusIndicator, Tooltip } from 'src/components';
@@ -16,9 +17,18 @@ interface IProps {
   empty?: boolean;
   followMessages?: boolean;
   loading: boolean;
-  selectedImport: ImportListType;
+  roleImport?: LegacyRoleImportDetailType;
+  selectedImport?: ImportListType;
   setFollowMessages?: (follow: boolean) => void;
-  task: ImportDetailType;
+  task?: ImportDetailType;
+}
+
+function legacyStatusToPulpStatus(v1status: string): PulpStatus {
+  return (
+    {
+      SUCCESS: PulpStatus.completed,
+    }[v1status] || PulpStatus[v1status.toLowerCase() as PulpStatus]
+  );
 }
 
 export function ImportConsole({
@@ -27,16 +37,20 @@ export function ImportConsole({
   empty,
   followMessages,
   loading,
+  roleImport,
   selectedImport,
   setFollowMessages,
   task,
 }: IProps) {
   const lastImport = useRef<HTMLDivElement>(null);
 
-  const inProgress = !selectedImport
-    ? true
-    : selectedImport.state === PulpStatus.running ||
-      selectedImport.state === PulpStatus.waiting;
+  const state =
+    selectedImport?.state ||
+    task?.state ||
+    (roleImport?.state && legacyStatusToPulpStatus(roleImport.state)) ||
+    null;
+
+  const inProgress = [PulpStatus.running, PulpStatus.waiting].includes(state);
 
   const scrollToBottom = () =>
     window.requestAnimationFrame(
@@ -59,39 +73,44 @@ export function ImportConsole({
   }, [followMessages, inProgress]);
 
   const collectionPipeline = collection?.repository?.pulp_labels?.pipeline;
+  const error = task?.error || roleImport?.error;
 
   const title =
-    !selectedImport || empty ? null : (
+    empty || (!selectedImport && !roleImport) ? null : (
       <div>
         <div className='title-bar'>
           <div>
             <span className='data-title'>{t`Status:`}</span>{' '}
-            <StatusIndicator type='secondary' status={selectedImport.state} />
-          </div>
-          <div>
-            <span className='data-title'>{t`Approval status:`}</span>{' '}
-            {!collection
-              ? t`waiting for import to finish`
-              : {
-                  rejected: t`rejected`,
-                  staging: t`waiting for approval`,
-                  approved: t`approved`,
-                }[collectionPipeline] || t`could not be determined yet`}
-          </div>
-          <div>
-            <span className='data-title'>{t`Version:`}</span>{' '}
-            {selectedImport.version}
+            <StatusIndicator type='secondary' status={state} />
           </div>
+          {selectedImport ? (
+            <>
+              <div>
+                <span className='data-title'>{t`Approval status:`}</span>{' '}
+                {!collection
+                  ? t`waiting for import to finish`
+                  : {
+                      rejected: t`rejected`,
+                      staging: t`waiting for approval`,
+                      approved: t`approved`,
+                    }[collectionPipeline] || t`could not be determined yet`}
+              </div>
+              <div>
+                <span className='data-title'>{t`Version:`}</span>{' '}
+                {selectedImport.version}
+              </div>
+            </>
+          ) : null}
 
-          {task && task.error ? (
+          {error?.code || error?.description || error?.traceback ? (
             <div>
               <span className='data-title'>{t`Error message:`}</span>{' '}
-              {task.error.code}
+              {error.code}
               <pre>
-                <code>{task.error.description}</code>
+                <code>{error.description}</code>
               </pre>
               <pre>
-                <code>{task.error.traceback}</code>
+                <code>{error.traceback}</code>
               </pre>
             </div>
           ) : null}
@@ -116,6 +135,17 @@ export function ImportConsole({
     </div>
   );
 
+  const messages = task
+    ? task.messages
+    : roleImport
+      ? roleImport.summary_fields.task_messages.map(
+          ({ message_type: level, message_text: message }) => ({
+            level,
+            message,
+          }),
+        )
+      : [];
+
   return (
     <div className='hub-import-console' data-cy={'ImportConsole'}>
       {title}
@@ -135,22 +165,22 @@ export function ImportConsole({
           </Tooltip>
         </div>
 
-        {task.messages.map(renderMessage)}
+        {messages.map(renderMessage)}
 
-        {task.messages.length === 0 ? (
+        {messages.length === 0 ? (
           <div className='message'>
             <span className='error'>{t`No task messages available`}</span>
           </div>
         ) : null}
 
-        {task.state === PulpStatus.completed && (
+        {state === PulpStatus.completed && (
           <div className='message'>
             <br />
             <span className='success'>{t`Done`}</span>
           </div>
         )}
 
-        {task.state === PulpStatus.failed && (
+        {state === PulpStatus.failed && (
           <div className='message'>
             <br />
             <span className='failed'>{t`Failed`}</span>

src/containers/ansible-role/role-detail.tsx

@@ -219,8 +219,8 @@ interface RoleImportDetailProps {
 }
 
 interface RoleImportDetailState {
+  lastImport: LegacyRoleImportDetailType;
   loading: boolean;
-  results: LegacyRoleImportDetailType[];
 }
 
 class RoleImportLog extends React.Component<
@@ -230,61 +230,57 @@ class RoleImportLog extends React.Component<
   constructor(props) {
     super(props);
     this.state = {
-      //role: null,
-      //addAlert: null,
       loading: true,
-      results: [],
+      lastImport: null,
     };
   }
 
   componentDidMount() {
-    this.setState({ loading: true, results: [] });
-
-    LegacyImportAPI.getLastSuccessfulRoleImport(this.props.role.id)
-      .then(({ data: { results } }) =>
-        this.setState({
-          results: results,
-          loading: false,
-        }),
+    const { addAlert, role } = this.props;
+    this.setState({ loading: true, lastImport: null });
+
+    LegacyImportAPI.list({
+      detail: true,
+      limit: 1,
+      role_id: role.id,
+      sort: '-created',
+      state: 'SUCCESS',
+    })
+      .then(
+        ({
+          data: {
+            results: [lastImport],
+          },
+        }) =>
+          this.setState({
+            lastImport,
+            loading: false,
+          }),
       )
       .catch(
         handleHttpError(
           t`Failed to get import log`,
-          () => this.setState({ loading: false, results: null }),
-          this.props.addAlert,
+          () => this.setState({ loading: false, lastImport: null }),
+          addAlert,
         ),
       );
   }
 
-  setFollowMessages() {}
-
   render() {
-    const lastImport = this.state.results[0];
+    const { role } = this.props;
+    const { lastImport, loading } = this.state;
 
     return (
       <>
-        {!this.state.loading &&
-        this.state.results &&
-        this.state.results.length == 0 ? (
+        {!loading && !lastImport ? (
           <EmptyStateNoData
-            title={t`No import logs for role id ${this.props.role.id}`}
+            title={t`No import logs for role id ${role.id}`}
             description={t`No import logs were found for the role.`}
           />
         ) : null}
 
         {lastImport && (
-          <>
-            <div>{lastImport.role_id}</div>
-            <ImportConsole
-              loading={this.state.loading}
-              empty={false}
-              role={this.props.role}
-              task={lastImport}
-              selectedImport={lastImport}
-              followMessages={true}
-              setFollowMessages={this.setFollowMessages}
-            />
-          </>
+          <ImportConsole loading={loading} roleImport={lastImport} />
         )}
       </>
     );