From 2fa3f94d8a1b5bbcd8a2fad5e3d44d7d1b583251 Mon Sep 17 00:00:00 2001 From: Thuan Vo Date: Thu, 6 Apr 2023 15:35:39 -0400 Subject: [PATCH] chore(dashboard): restyle elements --- src/app/Dashboard/AddCard.tsx | 6 ++++-- .../Charts/jfr/JFRMetricsChartController.tsx | 4 ++-- src/app/Dashboard/Dashboard.tsx | 2 +- src/app/Dashboard/DashboardLayoutConfig.tsx | 2 +- src/app/QuickStarts/QuickStartDrawer.tsx | 8 +++++++- .../quickstarts/dashboard-quickstart.tsx | 18 ++++++++++-------- src/app/Shared/Services/Api.service.tsx | 6 ++++-- src/app/app.css | 18 ++++++++++++++++++ src/app/utils/fakeData.ts | 3 ++- 9 files changed, 49 insertions(+), 18 deletions(-) diff --git a/src/app/Dashboard/AddCard.tsx b/src/app/Dashboard/AddCard.tsx index e947b0a13..f099c65ec 100644 --- a/src/app/Dashboard/AddCard.tsx +++ b/src/app/Dashboard/AddCard.tsx @@ -204,7 +204,7 @@ export const AddCard: React.FC = ({ variant, ..._props }) => { case 'icon-button': return ( - @@ -221,8 +221,10 @@ export const AddCard: React.FC = ({ variant, ..._props }) => { aria-label="Dashboard Card Catalog Modal" isOpen={showWizard} width={'90%'} + className="card-catalog__wizard-modal" hasNoBodyWrapper showClose={false} + appendTo={portalRoot} > = ({ selection, onSelect }) ) : null} - {getFullDescription(t(toViewCard.title), t)} + {getFullDescription(t(title), t)} {preview ? (
diff --git a/src/app/Dashboard/Charts/jfr/JFRMetricsChartController.tsx b/src/app/Dashboard/Charts/jfr/JFRMetricsChartController.tsx index 1724a27ed..aa3d90b2c 100644 --- a/src/app/Dashboard/Charts/jfr/JFRMetricsChartController.tsx +++ b/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, }, - ], + ]), }); } } diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx index 46841ce6c..f8e9e68f7 100644 --- a/src/app/Dashboard/Dashboard.tsx +++ b/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; } } diff --git a/src/app/Dashboard/DashboardLayoutConfig.tsx b/src/app/Dashboard/DashboardLayoutConfig.tsx index 50c5f9546..e03409314 100644 --- a/src/app/Dashboard/DashboardLayoutConfig.tsx +++ b/src/app/Dashboard/DashboardLayoutConfig.tsx @@ -216,7 +216,7 @@ export const DashboardLayoutConfig: React.FunctionComponent Create Layout diff --git a/src/app/QuickStarts/QuickStartDrawer.tsx b/src/app/QuickStarts/QuickStartDrawer.tsx index c7bfba9e5..b2827eb79 100644 --- a/src/app/QuickStarts/QuickStartDrawer.tsx +++ b/src/app/QuickStarts/QuickStartDrawer.tsx @@ -120,7 +120,13 @@ export const GlobalQuickStartDrawer: React.FC = ({ return ( }> - {children} + { + e.stopPropagation(); + }} + > + {children} + ); diff --git a/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx b/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx index 75a008cf0..e9e54e9ef 100644 --- a/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx +++ b/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.', diff --git a/src/app/Shared/Services/Api.service.tsx b/src/app/Shared/Services/Api.service.tsx index 0afd52b78..c4a5e06c2 100644 --- a/src/app/Shared/Services/Api.service.tsx +++ b/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'; diff --git a/src/app/app.css b/src/app/app.css index 135007d6b..d49f7f5f0 100644 --- a/src/app/app.css +++ b/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; +} diff --git a/src/app/utils/fakeData.ts b/src/app/utils/fakeData.ts index bba56f868..73fbfda38 100644 --- a/src/app/utils/fakeData.ts +++ b/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 { + targetHasRecording(_target: Target, _filter?: ActiveRecordingFilterInput): Observable { return of(true); }