added

Signed-off-by: saimedhi <saimedhi@amazon.com>

Author: saimedhi

public/pages/workflow_detail/tools/resources/resource_list_with_flyout.tsx

@@ -16,16 +16,19 @@ import {
   EuiTitle,
   EuiIcon,
   EuiText,
+  EuiEmptyPrompt,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import {
   Workflow,
   WorkflowResource,
   customStringify,
 } from '../../../../../common';
 import { fetchResourceData } from '../../../../utils';
-import { useAppDispatch } from '../../../../store';
+import { AppState, useAppDispatch } from '../../../../store';
 import { getDataSourceId } from '../../../../utils';
 import { columns } from './columns';
+import { useSelector } from 'react-redux';
 
 interface ResourceListFlyoutProps {
   workflow?: Workflow;
@@ -39,6 +42,7 @@ export function ResourceListWithFlyout(props: ResourceListFlyoutProps) {
   const dispatch = useAppDispatch();
   const dataSourceId = getDataSourceId();
   const [resourceDetails, setResourceDetails] = useState<string | null>(null);
+  const { loading } = useSelector((state: AppState) => state.opensearch);
 
   // Hook to initialize all resources. Reduce to unique IDs, since
   // the backend resources may include the same resource multiple times
@@ -72,10 +76,7 @@ export function ResourceListWithFlyout(props: ResourceListFlyoutProps) {
     try {
       const result = await fetchResourceData(row, dataSourceId!, dispatch);
       setResourceDetails(customStringify(result));
-    } catch (error) {
-      console.error('Failed to fetch resource data:', error);
-      setResourceDetails('Error fetching resource data.');
-    }
+    } catch (error) {}
   };
 
   // Closes the flyout and resets the selected resource data.
@@ -123,21 +124,27 @@ export function ResourceListWithFlyout(props: ResourceListFlyoutProps) {
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
             <EuiFlexGroup direction="column" gutterSize="xs">
-              <EuiFlexItem grow={true} style={{ paddingLeft: '20px' }}>
+              <EuiFlexItem grow={true}>
                 <EuiText size="m">
                   <h4>Resource details</h4>
                 </EuiText>
               </EuiFlexItem>
-
               <EuiFlexItem grow={true}>
-                <EuiCodeBlock
-                  language="json"
-                  fontSize="m"
-                  isCopyable={true}
-                  overflowHeight={650}
-                >
-                  {resourceDetails || 'Loading...'}
-                </EuiCodeBlock>
+                {resourceDetails && !loading ? (
+                  <EuiCodeBlock
+                    language="json"
+                    fontSize="m"
+                    isCopyable={true}
+                    overflowHeight={650}
+                  >
+                    {resourceDetails}
+                  </EuiCodeBlock>
+                ) : (
+                  <EuiEmptyPrompt
+                    icon={<EuiLoadingSpinner size="xl" />}
+                    title={<h2>Loading</h2>}
+                  />
+                )}
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlyoutBody>

public/pages/workflows/workflow_list/resource_list.tsx

@@ -14,14 +14,18 @@ import {
   RIGHT_ALIGNMENT,
   EuiText,
   Direction,
+  EuiEmptyPrompt,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import {
   Workflow,
   WorkflowResource,
   customStringify,
 } from '../../../../common';
-import { useAppDispatch } from '../../../store';
+import { AppState, useAppDispatch } from '../../../store';
 import { fetchResourceData, getDataSourceId } from '../../../utils';
+import { useSelector } from 'react-redux';
+import { isEmpty } from 'lodash';
 
 interface ResourceListProps {
   workflow?: Workflow;
@@ -35,9 +39,9 @@ export function ResourceList(props: ResourceListProps) {
   const dispatch = useAppDispatch();
   const dataSourceId = getDataSourceId();
   const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<{
-    [key: string]: React.ReactNode;
+    [key: string]: any;
   }>({});
-  const [codeBlockData, setCodeBlockData] = useState<any>(null);
+  const { loading } = useSelector((state: AppState) => state.opensearch);
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(10);
   const [sortField, setSortField] = useState<keyof WorkflowResource>('id');
@@ -56,16 +60,6 @@ export function ResourceList(props: ResourceListProps) {
     }
   }, [props.workflow?.resourcesCreated]);
 
-  useEffect(() => {
-    if (codeBlockData) {
-      const { item, data } = codeBlockData;
-      setItemIdToExpandedRowMap((prevMap) => ({
-        ...prevMap,
-        [item.id]: renderExpandedRow(data),
-      }));
-    }
-  }, [codeBlockData]);
-
   // Renders the expanded row to show resource details in a code block.
   const renderExpandedRow = useCallback(
     (data: any) => (
@@ -76,18 +70,37 @@ export function ResourceList(props: ResourceListProps) {
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={true} style={{ paddingLeft: '20px' }}>
-          <EuiCodeBlock
-            language="json"
-            fontSize="m"
-            isCopyable={true}
-            overflowHeight={150}
-          >
-            {customStringify(data)}
-          </EuiCodeBlock>
+          {!isEmpty(data) && !loading ? (
+            <EuiCodeBlock
+              language="json"
+              fontSize="m"
+              isCopyable={true}
+              overflowHeight={150}
+            >
+              {customStringify(data)}
+            </EuiCodeBlock>
+          ) : loading ? (
+            <EuiEmptyPrompt
+              icon={<EuiLoadingSpinner size="xl" />}
+              title={<h2>Loading</h2>}
+            />
+          ) : (
+            <EuiEmptyPrompt
+              iconType="alert"
+              iconColor="danger"
+              title={<h2>Error loading resource details</h2>}
+              body={
+                <p>
+                  You do not have permissions to access details of this
+                  resource.
+                </p>
+              }
+            />
+          )}
         </EuiFlexItem>
       </EuiFlexGroup>
     ),
-    [codeBlockData]
+    [loading]
   );
 
   // Expands or collapses the details for a resource item.
@@ -101,10 +114,16 @@ export function ResourceList(props: ResourceListProps) {
       try {
         const result = await fetchResourceData(item, dataSourceId!, dispatch);
         if (result) {
-          setCodeBlockData({ item, data: result });
+          setItemIdToExpandedRowMap((prevMap) => ({
+            ...prevMap,
+            [item.id]: renderExpandedRow(result),
+          }));
         }
       } catch (error) {
-        console.error('Failed to fetch resource data:', error);
+        setItemIdToExpandedRowMap((prevMap) => ({
+          ...prevMap,
+          [item.id]: renderExpandedRow(''),
+        }));
       }
     }
   };

public/store/reducers/opensearch_reducer.ts

@@ -83,7 +83,9 @@ export const getIndex = createAsyncThunk(
       dataSourceId
     );
     if (response instanceof HttpFetchError) {
-      return rejectWithValue('Error getting index settings and mappings: ' + response.body.message);
+      return rejectWithValue(
+        'Error getting index settings and mappings: ' + response.body.message
+      );
     } else {
       return response;
     }
@@ -272,6 +274,18 @@ const opensearchSlice = createSlice({
         state.loading = true;
         state.errorMessage = '';
       })
+      .addCase(getIndex.pending, (state, action) => {
+        state.loading = true;
+        state.errorMessage = '';
+      })
+      .addCase(getIngestPipeline.pending, (state, action) => {
+        state.loading = true;
+        state.errorMessage = '';
+      })
+      .addCase(getSearchPipeline.pending, (state, action) => {
+        state.loading = true;
+        state.errorMessage = '';
+      })
       .addCase(searchIndex.pending, (state, action) => {
         state.loading = true;
         state.errorMessage = '';
@@ -293,6 +307,18 @@ const opensearchSlice = createSlice({
         state.loading = false;
         state.errorMessage = '';
       })
+      .addCase(getIndex.fulfilled, (state, action) => {
+        state.loading = false;
+        state.errorMessage = '';
+      })
+      .addCase(getSearchPipeline.fulfilled, (state, action) => {
+        state.loading = false;
+        state.errorMessage = '';
+      })
+      .addCase(getIngestPipeline.fulfilled, (state, action) => {
+        state.loading = false;
+        state.errorMessage = '';
+      })
       .addCase(searchIndex.fulfilled, (state, action) => {
         state.loading = false;
         state.errorMessage = '';
@@ -309,6 +335,18 @@ const opensearchSlice = createSlice({
         state.errorMessage = action.payload as string;
         state.loading = false;
       })
+      .addCase(getIndex.rejected, (state, action) => {
+        state.errorMessage = action.payload as string;
+        state.loading = false;
+      })
+      .addCase(getIngestPipeline.rejected, (state, action) => {
+        state.errorMessage = action.payload as string;
+        state.loading = false;
+      })
+      .addCase(getSearchPipeline.rejected, (state, action) => {
+        state.errorMessage = action.payload as string;
+        state.loading = false;
+      })
       .addCase(searchIndex.rejected, (state, action) => {
         state.errorMessage = action.payload as string;
         state.loading = false;