chore(dashboard): restyle elements

src/app/Dashboard/AddCard.tsx

@@ -204,7 +204,7 @@ export const AddCard: React.FC<AddCardProps> = ({ variant, ..._props }) => {
       case 'icon-button':
         return (
           <Tooltip content={'Add card'}>
-            <Button variant="plain" onClick={handleStart} style={{ padding: 0 }}>
+            <Button data-quickstart-id={'dashboard-add-btn'} variant="plain" onClick={handleStart} style={{ padding: 0 }}>
               <QuickSearchIcon />
             </Button>
           </Tooltip>
@@ -221,8 +221,10 @@ export const AddCard: React.FC<AddCardProps> = ({ variant, ..._props }) => {
         aria-label="Dashboard Card Catalog Modal"
         isOpen={showWizard}
         width={'90%'}
+        className="card-catalog__wizard-modal"
         hasNoBodyWrapper
         showClose={false}
+        appendTo={portalRoot}
       >
         <Wizard
           id={'card-catalog-wizard'}
@@ -395,7 +397,7 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
                 </LabelGroup>
               ) : null}
             </StackItem>
-            <StackItem>{getFullDescription(t(toViewCard.title), t)}</StackItem>
+            <StackItem>{getFullDescription(t(title), t)}</StackItem>
             <StackItem isFilled>
               {preview ? (
                 <div className="dashboard-card-preview">

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

@@ -152,12 +152,12 @@ export class JFRMetricsChartController {
     }
     return this._api.targetHasRecording(target, {
       state: RecordingState.RUNNING,
-      labels: [
+      labels: this._api.stringifyRecordingLabels([
         {
           key: 'origin',
           value: RECORDING_NAME,
         },
-      ],
+      ]),
     });
   }
 }

src/app/Dashboard/Dashboard.tsx

@@ -304,7 +304,7 @@ export function hasConfigByTitle(title: string, t: TFunction): boolean {
 
 export function getConfigByTitle(title: string, t: TFunction): DashboardCardDescriptor {
   for (const choice of getDashboardCards()) {
-    if (t(choice.title) === t(title)) {
+    if (t(choice.title) === title) {
       return choice;
     }
   }

src/app/Dashboard/DashboardLayoutConfig.tsx

@@ -216,7 +216,7 @@ export const DashboardLayoutConfig: React.FunctionComponent<DashboardLayoutConfi
         variant="primary"
         aria-label={t('DashboardLayoutConfig.NEW.LABEL')}
         onClick={handleCreateModalOpen}
-        data-quickstart-id="dashboard-new-btn"
+        data-quickstart-id="create-layout-btn"
       >
         Create Layout
       </Button>

src/app/QuickStarts/QuickStartDrawer.tsx

@@ -120,7 +120,13 @@ export const GlobalQuickStartDrawer: React.FC<GlobalQuickStartDrawerProps> = ({
   return (
     <React.Suspense fallback={<LoadingView />}>
       <QuickStartContext.Provider value={valuesForQuickStartContext}>
-        <QuickStartDrawer>{children}</QuickStartDrawer>
+        <QuickStartDrawer
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          {children}
+        </QuickStartDrawer>
       </QuickStartContext.Provider>
     </React.Suspense>
   );

src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx

@@ -100,9 +100,9 @@ Each card displays a different set of information about the currently selected t
         description: `
 **Dashboard Layouts** are used to organize the Dashboard Cards that are displayed in the Dashboard. We will start by creating a new Dashboard Layout.
 
-1. Click [New]{{highlight dashboard-new-btn}} on the **Layout Selector** toolbar.
+1. Click the [Layout Selector]{{highlight dashboard-layout-selector}} on the toolbar.
 
-    This will open a modal dialog.
+    This will open a dropdown menu. Click the [Create Layout]{{highlight create-layout-btn}}.
 
 2. Enter a name for the new layout.
 3. Click Create when you are finished.
@@ -118,13 +118,15 @@ Each card displays a different set of information about the currently selected t
         description: `
 To create a card, we will go through a **creation wizard** that will guide us through the process of selecting the card type, and configuring the card, if needed.
 
-1. Click the [Add]{{highlight dashboard-add-btn}} button on the Dashboard.
-2. From the [Card Type selector]{{highlight card-type-selector}}, select the **Target JVM Details** card.
-3. Click Finish.
-4. Repeat steps 1-2 to add the **MBeans Metrics Chart** card to the Dashboard Layout.
-5. This time, click Next to go to the next configuration step of the creation wizard.
+1. Click the [Catalog Icon]{{highlight dashboard-add-btn}} on the toolbar.
+    
+    This will open a modal. From the card catalog, select the **Target JVM Details** card. Full details and available preview will be shown on the drawer panel.
+
+2. Click Finish.
+3. Repeat steps 1-2 to add the **MBeans Metrics Chart** card to the Dashboard Layout.
+4. This time, click Next to go to the next configuration step of the creation wizard.
 [The default metric selected for the card is the \`Process CPU Load\` metric. You can change this by clicking the **Performance Metric** dropdown menu within the **MBeans Chart Card** configuration step and selecting a different metric. Try other metrics and settings!]{{admonition tip}}
-6. Click Finish again to finish creating the second card.
+5. Click Finish again to finish creating the second card.
 `,
         review: {
           instructions: '#### Verify that you see the two new cards in the Dashboard.',

src/app/Shared/Services/Api.service.tsx

@@ -1173,7 +1173,9 @@ export class ApiService {
       {
         connectUrl: target.connectUrl,
         recordingFilter: filter,
-      }
+      },
+      true,
+      true
     ).pipe(
       map((resp) => {
         const nodes = resp.data.targetNodes;
@@ -1824,7 +1826,7 @@ export interface ActiveRecordingFilterInput {
   durationMsLessThanEqual?: number;
   startTimeMsBeforeEqual?: number;
   startTimeMsAfterEqual?: number;
-  labels?: RecordingLabel[];
+  labels?: string;
 }
 
 export const automatedAnalysisRecordingName = 'automated-analysis';

src/app/app.css

@@ -622,3 +622,21 @@ svg.topology__node-decorator-icon.progress {
 .dashboard-card-preview .pf-c-card {
   box-shadow: none;
 }
+
+.card-catalog__wizard-modal {
+  height: 90%;
+}
+
+.card-catalog__detail-panel-body {
+  margin-top: -2.5em;
+}
+
+.pfext-spotlight__element-highlight-animate {
+  animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 1.2s pfext-spotlight-fade-out 1s ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+.pfext-spotlight__element-highlight-animate::after {
+  animation: 1.2s pfext-spotlight-expand 0.6s ease-out;
+  animation-fill-mode: forwards;
+}

src/app/utils/fakeData.ts

@@ -41,6 +41,7 @@ import { Notifications, NotificationsInstance } from '@app/Notifications/Notific
 import { Rule } from '@app/Rules/Rules';
 import {
   ActiveRecording,
+  ActiveRecordingFilterInput,
   ApiService,
   ArchivedRecording,
   EventProbe,
@@ -158,7 +159,7 @@ class FakeApiService extends ApiService {
   }
 
   // JFR Metrics card
-  targetHasRecording(_target: Target, _recordingName: string): Observable<boolean> {
+  targetHasRecording(_target: Target, _filter?: ActiveRecordingFilterInput): Observable<boolean> {
     return of(true);
   }