feat(dashboard): dashboard card preview

src/app/Dashboard/AddCard.tsx

@@ -37,9 +37,10 @@
  */
 import { CardConfig } from '@app/Shared/Redux/Configurations/DashboardConfigSlice';
 import { dashboardConfigAddCardIntent, StateDispatch } from '@app/Shared/Redux/ReduxStore';
+import { ServiceContext } from '@app/Shared/Services/Services';
 import { EmptyText } from '@app/Topology/Shared/EmptyText';
 import QuickSearchIcon from '@app/Topology/Shared/QuickSearchIcon';
-import { QuickSearchButton } from '@app/Topology/Toolbar/QuickSearchButton';
+import { fakeServices } from '@app/utils/fakeData';
 import { useFeatureLevel } from '@app/utils/useFeatureLevel';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { portalRoot } from '@app/utils/utils';
@@ -211,15 +212,15 @@ export const AddCard: React.FC<AddCardProps> = ({ variant, ..._props }) => {
       default:
         return null;
     }
-  }, [handleStart, t]);
+  }, [handleStart, t, variant]);
 
   return (
     <>
       {content}
       <Modal
         aria-label="Dashboard Card Catalog Modal"
         isOpen={showWizard}
-        width={'80%'}
+        width={'90%'}
         hasNoBodyWrapper
         showClose={false}
       >
@@ -254,7 +255,7 @@ export const AddCard: React.FC<AddCardProps> = ({ variant, ..._props }) => {
               <StackItem>
                 <Text>{t('Dashboard.ADD_CARD_HELPER_TEXT')}</Text>
               </StackItem>
-              <StackItem isFilled>
+              <StackItem isFilled style={{ overflow: 'auto' }}>
                 <CardGallery selection={selection} onSelect={handleSelect} />
               </StackItem>
             </Stack>
@@ -321,7 +322,13 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
           key={title}
           hasSelectableInput
           isSelectableRaised
-          onClick={(event) => onSelect(event, t(title))}
+          onClick={(event) => {
+            if (selection === t(title)) {
+              setToViewCard(availableCards.find((card) => t(card.title) === selection));
+            } else {
+              onSelect(event, t(title));
+            }
+          }}
           isFullHeight
           isFlat
           isSelected={selection === t(title)}
@@ -361,13 +368,13 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
     }
     const { title, icon, labels, preview } = toViewCard;
     return (
-      <DrawerPanelContent isResizable defaultSize="300px">
+      <DrawerPanelContent isResizable defaultSize="50%">
         <DrawerHead>
           <DrawerActions>
             <DrawerCloseButton onClick={() => setToViewCard(undefined)} />
           </DrawerActions>
         </DrawerHead>
-        <DrawerPanelBody>
+        <DrawerPanelBody className="card-catalog__detail-panel-body">
           <Stack hasGutter>
             <StackItem>
               <Flex spacer={{ default: 'spacerSm' }}>
@@ -391,7 +398,16 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
             <StackItem>{getFullDescription(t(toViewCard.title), t)}</StackItem>
             <StackItem isFilled>
               {preview ? (
-                preview
+                <div className="dashboard-card-preview">
+                  <div
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    className="non-interactive-overlay"
+                  />
+                  <ServiceContext.Provider value={fakeServices}>{preview}</ServiceContext.Provider>
+                </div>
               ) : (
                 <Bullseye>
                   <EmptyText text={'No preview'} />

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx

@@ -969,4 +969,5 @@ export const AutomatedAnalysisCardDescriptor: DashboardCardDescriptor = {
       color: 'blue',
     },
   ],
+  preview: <AutomatedAnalysisCard span={12} dashboardId={0} isDraggable={false} isResizable={false} />,
 };

src/app/Dashboard/Charts/jfr/JFRMetricsChartController.tsx

@@ -42,7 +42,6 @@ import { SettingsService } from '@app/Shared/Services/Settings.service';
 import { NO_TARGET, Target, TargetService } from '@app/Shared/Services/Target.service';
 import {
   BehaviorSubject,
-  catchError,
   concatMap,
   distinctUntilChanged,
   finalize,
@@ -151,50 +150,6 @@ export class JFRMetricsChartController {
     if (target === NO_TARGET) {
       return of(false);
     }
-
-    return this._api
-      .graphql<CountResponse>(
-        `
-          query ActiveRecordingsForAutomatedAnalysis($connectUrl: String) {
-            targetNodes(filter: { name: $connectUrl }) {
-              recordings {
-                active (filter: {
-                  labels: ["origin=${RECORDING_NAME}"],
-                  state: "RUNNING",
-                }) {
-                aggregate {
-                  count
-                }
-              }
-            }
-            }
-          }`,
-        { connectUrl: target.connectUrl }
-      )
-      .pipe(
-        map((resp) => {
-          const nodes = resp.data.targetNodes;
-          if (nodes.length === 0) {
-            return false;
-          }
-          const count = nodes[0].recordings.active.aggregate.count;
-          return count > 0;
-        }),
-        catchError((_) => of(false))
-      );
+    return this._api.targetHasRecording(target, RECORDING_NAME);
   }
 }
-
-interface CountResponse {
-  data: {
-    targetNodes: {
-      recordings: {
-        active: {
-          aggregate: {
-            count: number;
-          };
-        };
-      };
-    }[];
-  };
-}

src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx

@@ -569,4 +569,17 @@ export const MBeanMetricsChartCardDescriptor: DashboardCardDescriptor = {
       color: 'blue',
     },
   ],
+  preview: (
+    <MBeanMetricsChartCard
+      themeColor={'blue'}
+      chartKind={chartKinds[0].displayName}
+      duration={60}
+      period={10}
+      span={12}
+      isFullHeight
+      isDraggable={false}
+      isResizable={false}
+      dashboardId={0}
+    />
+  ),
 };

src/app/Dashboard/Charts/mbean/MBeanMetricsChartController.tsx

@@ -36,20 +36,18 @@
  * SOFTWARE.
  */
 
-import { ApiService, MBeanMetrics, MBeanMetricsResponse } from '@app/Shared/Services/Api.service';
+import { ApiService, MBeanMetrics } from '@app/Shared/Services/Api.service';
 import { SettingsService } from '@app/Shared/Services/Settings.service';
 import { Target, TargetService } from '@app/Shared/Services/Target.service';
 import {
   BehaviorSubject,
-  catchError,
   concatMap,
   distinctUntilChanged,
   finalize,
   first,
   map,
   merge,
   Observable,
-  of,
   pairwise,
   ReplaySubject,
   Subject,
@@ -164,27 +162,6 @@ export class MBeanMetricsChartController {
       l += '}';
       q.push(l);
     });
-    return this._api
-      .graphql<MBeanMetricsResponse>(
-        `
-          query MBeanMXMetricsForTarget($connectUrl: String) {
-            targetNodes(filter: { name: $connectUrl }) {
-              mbeanMetrics {
-                ${q.join('\n')}
-              }
-            }
-          }`,
-        { connectUrl: target.connectUrl }
-      )
-      .pipe(
-        map((resp) => {
-          const nodes = resp.data.targetNodes;
-          if (!nodes || nodes.length === 0) {
-            return {};
-          }
-          return nodes[0]?.mbeanMetrics;
-        }),
-        catchError((_) => of({}))
-      );
+    return this._api.getTargetMBeanMetrics(target, q);
   }
 }

src/app/Dashboard/DashboardCard.tsx

@@ -62,7 +62,6 @@ export const DashboardCard: React.FC<DashboardCardProps> = ({
   isDraggable = true,
   isResizable = true,
   cardSizes,
-
   ...props
 }: DashboardCardProps) => {
   const cardRef = React.useRef<HTMLDivElement>(null);

src/app/Dashboard/DashboardLayoutConfig.tsx

@@ -63,7 +63,7 @@ import {
   ToolbarItem,
 } from '@patternfly/react-core';
 import { Dropdown } from '@patternfly/react-core/dist/js/next';
-import { DownloadIcon, PencilAltIcon, PlusCircleIcon, TrashIcon, UploadIcon } from '@patternfly/react-icons';
+import { DownloadIcon, PencilAltIcon, TrashIcon, UploadIcon } from '@patternfly/react-icons';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';

src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx

@@ -90,12 +90,10 @@ export const JvmDetailsCard: React.FC<JvmDetailsCardProps> = (props) => {
           <CardActions>{...props.actions || []}</CardActions>
         </CardHeader>
       }
+      style={{ height: '36em' }} // FIXME: Remove after implementing height resizing
       {...props}
     >
-      <CardBody
-        // FIXME: Remove after implementing height resizing
-        style={{ height: '36em' }}
-      >
+      <CardBody>
         <EntityDetails entity={wrappedTarget} actionFilter={actionFilter} />
       </CardBody>
     </DashboardCard>
@@ -131,4 +129,5 @@ export const JvmDetailsCardDescriptor: DashboardCardDescriptor = {
       color: 'blue',
     },
   ],
+  preview: <JvmDetailsCard span={12} isDraggable={false} isFullHeight={false} isResizable={false} dashboardId={0} />,
 };