From 8827aef3aa0fb97b9f4e2d0d37bd235c75ff1f51 Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Fri, 10 Feb 2023 17:31:28 -0500
Subject: [PATCH] feat(dashboard): implement embedded chart cards (#856)

* feat(dashboard): add basic embedded chart cards

* refactor iframe src construction

* add logical controller for all grafana chart cards

* release subscriptions when no controller subscribers

* cleanup

* replace px count with em

* wrap content in CardBody

* slow refresh rate

* add refresh and popout buttons, style plainly

* add TODO

* refactor, simplify controller timing

* cleanup controller instantiation and resource handling. button handling. recording creation integration with recording form.

* use embedded grafana builtin refresh capability

* cleanup, fix bug with no-recording target selection

* fixup! cleanup, fix bug with no-recording target selection

Signed-off-by: Andrew Azores <aazores@redhat.com>

* add leniency for loading no-longer-known card types from storage

* refactor cleanup

* reset iframe on target change to force data refresh

* add TODO

* update empty state

* re-add a refresh button to reset chart card

* only apply negative margin on wider cards

* cleanup

* react to recording start/stop/delete

* require recording to be running

* extract min refresh to settings

* break circular dep

* add checkbox for restarting existing recordings

* add basic snapshot test

* fix settings test

* add more tests

Signed-off-by: Andrew Azores <aazores@redhat.com>

* fix imports

* rebase fixup

Signed-off-by: Andrew Azores <aazores@redhat.com>

* use consistent card height

* fix array key warnings

* add missing set state call

* use function form set state

* remove redundant nullsafe nav check

* use array destructuring

* remove redundant first operator

* remove more redundant nullsafe navs

* replace <code> with <Label>

* set description empty to remove redundant explanation

* rename button

* memoize controller context

* reduce negative margin for easier dragging and resizing

* allow dynamic card height

* localize card content

* correct tests for localization

Signed-off-by: Andrew Azores <aazores@redhat.com>

* add typedefs for react-test-renderer

* remove redundant fragment wrapping

* tmp? loading view

* refactor cleanup/simplify, also fixes tests

* add snapshot for loading state

* controller initialization bugfix

* use Continuous template instead, seems to generally support most metrics cards

Signed-off-by: Andrew Azores <aazores@redhat.com>

* reset history and perform cleanup between tests

* set provider order to match real application

* experiment with generic provider render function

* move generic function into Common, expect localized view in test

* temporarily disable pointer events on iframes while resizing

* apply pointer events disabling during drag-and-drop

* downgrade to BETA

* lint fix

---------

Signed-off-by: Andrew Azores <aazores@redhat.com>
---
 locales/en/public.json                        |  22 ++
 package.json                                  |   1 +
 src/app/CreateRecording/CreateRecording.tsx   |  13 +
 .../CreateRecording/CustomRecordingForm.tsx   |  53 ++-
 src/app/Dashboard/AddCard.tsx                 |   2 +
 src/app/Dashboard/Charts/ChartCard.tsx        | 358 ++++++++++++++++++
 src/app/Dashboard/Charts/ChartContext.tsx     |  56 +++
 src/app/Dashboard/Charts/ChartController.tsx  | 200 ++++++++++
 src/app/Dashboard/Dashboard.tsx               | 104 +++--
 src/app/Dashboard/DraggableRef.tsx            |   7 +-
 src/app/Dashboard/ResizableRef.tsx            |   7 +
 src/app/Settings/ChartCardsConfig.tsx         | 103 +++++
 src/app/Settings/Settings.tsx                 |   2 +
 src/app/Settings/i18n.ts                      |   2 +
 src/app/Shared/Services/Api.service.tsx       |  16 +-
 src/app/Shared/Services/Settings.service.tsx  |  10 +
 src/app/TargetSelect/TargetSelect.tsx         |   4 +-
 src/app/utils/LocalStorage.ts                 |   1 +
 src/test/Common.tsx                           |  30 ++
 .../CustomRecordingForm.test.tsx              |   1 +
 .../CustomRecordingForm.test.tsx.snap         |  31 +-
 src/test/Dashboard/Charts/ChartCard.test.tsx  | 246 ++++++++++++
 .../__snapshots__/ChartCard.test.tsx.snap     | 348 +++++++++++++++++
 src/test/Settings/Settings.test.tsx           |   9 +
 .../__snapshots__/Settings.test.tsx.snap      |  59 ++-
 yarn.lock                                     |  10 +
 26 files changed, 1649 insertions(+), 46 deletions(-)
 create mode 100644 src/app/Dashboard/Charts/ChartCard.tsx
 create mode 100644 src/app/Dashboard/Charts/ChartContext.tsx
 create mode 100644 src/app/Dashboard/Charts/ChartController.tsx
 create mode 100644 src/app/Settings/ChartCardsConfig.tsx
 create mode 100644 src/test/Dashboard/Charts/ChartCard.test.tsx
 create mode 100644 src/test/Dashboard/Charts/__snapshots__/ChartCard.test.tsx.snap

diff --git a/locales/en/public.json b/locales/en/public.json
index f2e89a947..92becdeb0 100644
--- a/locales/en/public.json
+++ b/locales/en/public.json
@@ -12,6 +12,23 @@
     "OPEN_SOURCE_LICENSE": "Open Source License",
     "VERSION": "version"
   },
+  "CHART_CARD": {
+    "BUTTONS": {
+      "CREATE": {
+        "LABEL": "Create"
+      },
+      "POPOUT": {
+        "LABEL": "Pop out {{chartKind}} chart"
+      },
+      "SYNC": {
+        "LABEL": "Synchronize {{chartKind}} chart"
+      }
+    },
+    "NO_RECORDING": {
+      "DESCRIPTION": "Metrics cards display data taken from running flight recordings with the label <label>origin={{recordingName}}</label>. No such recordings are currently available.",
+      "TITLE": "No source recording"
+    }
+  },
   "DashboardCardActionMenu": {
     "RESET_SIZE": "Reset Size"
   },
@@ -55,6 +72,11 @@
       "LANGUAGE_REGION": "Language & Region",
       "NOTIFICATION_MESSAGE": "Notifications & Messages"
     },
+    "CHARTS_CONFIG": {
+      "DESCRIPTION": "",
+      "REFRESH_RATE_SETTING": "Configure the minimum time to wait between data refreshes. Individual metrics cards may still request updates on a faster cycle, but the client application instance will throttle update requests to the server according to this setting.",
+      "TITLE": "Dashboard Metrics Configuration"
+    },
     "CREDENTIALS_STORAGE": {
       "BACKEND": {
         "DESCRIPTION": "Keep credentials in encrypted Cryostat backend storage. These credentials will be available to other users and will be used for Automated Rules.",
diff --git a/package.json b/package.json
index 891b1d3bb..ed36d3a38 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.2",
     "@types/js-base64": "3.3.1",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
     "@vue/preload-webpack-plugin": "^2.0.0",
diff --git a/src/app/CreateRecording/CreateRecording.tsx b/src/app/CreateRecording/CreateRecording.tsx
index ddc139b34..8ec9853ed 100644
--- a/src/app/CreateRecording/CreateRecording.tsx
+++ b/src/app/CreateRecording/CreateRecording.tsx
@@ -35,6 +35,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import { RecordingLabel } from '@app/RecordingMetadata/RecordingLabel';
 import { TemplateType } from '@app/Shared/Services/Api.service';
 import { TargetView } from '@app/TargetView/TargetView';
 import { Card, CardBody, Tab, Tabs } from '@patternfly/react-core';
@@ -45,8 +46,14 @@ import { CustomRecordingForm } from './CustomRecordingForm';
 import { SnapshotRecordingForm } from './SnapshotRecordingForm';
 
 export interface CreateRecordingProps {
+  restartExisting?: boolean;
+  name?: string;
   templateName?: string;
   templateType?: TemplateType;
+  labels?: RecordingLabel[];
+  duration?: number;
+  maxAge?: number;
+  maxSize?: number;
 }
 
 export interface EventTemplate {
@@ -63,8 +70,14 @@ const Comp: React.FC<RouteComponentProps<Record<string, never>, StaticContext, C
 
   const prefilled = React.useMemo(
     () => ({
+      restartExisting: props.location?.state?.restartExisting,
+      name: props.location?.state?.name,
       templateName: props.location?.state?.templateName,
       templateType: props.location?.state?.templateType,
+      labels: props.location?.state?.labels,
+      duration: props.location?.state?.duration,
+      maxAge: props.location?.state?.maxAge,
+      maxSize: props.location?.state?.maxSize,
     }),
     [props.location]
   );
diff --git a/src/app/CreateRecording/CustomRecordingForm.tsx b/src/app/CreateRecording/CustomRecordingForm.tsx
index 814896212..fc5fc1e39 100644
--- a/src/app/CreateRecording/CustomRecordingForm.tsx
+++ b/src/app/CreateRecording/CustomRecordingForm.tsx
@@ -75,8 +75,14 @@ import { EventTemplate } from './CreateRecording';
 
 export interface CustomRecordingFormProps {
   prefilled?: {
+    restartExisting?: boolean;
+    name?: string;
     templateName?: string;
     templateType?: TemplateType;
+    labels?: RecordingLabel[];
+    duration?: number;
+    maxAge?: number;
+    maxSize?: number;
   };
 }
 
@@ -89,22 +95,29 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
   const history = useHistory();
   const addSubscription = useSubscriptions();
 
-  const [recordingName, setRecordingName] = React.useState('');
-  const [nameValid, setNameValid] = React.useState(ValidatedOptions.default);
-  const [continuous, setContinuous] = React.useState(false);
+  const [recordingName, setRecordingName] = React.useState(prefilled?.name || '');
+  const [nameValid, setNameValid] = React.useState(
+    prefilled?.name
+      ? RecordingNamePattern.test(recordingName)
+        ? ValidatedOptions.success
+        : ValidatedOptions.error
+      : ValidatedOptions.default
+  );
+  const [restartExisting, setRestartExisting] = React.useState(prefilled?.restartExisting || false);
+  const [continuous, setContinuous] = React.useState((prefilled?.duration || 30) < 1);
   const [archiveOnStop, setArchiveOnStop] = React.useState(true);
-  const [duration, setDuration] = React.useState(30);
+  const [duration, setDuration] = React.useState(prefilled?.duration || 30);
   const [durationUnit, setDurationUnit] = React.useState(1000);
   const [durationValid, setDurationValid] = React.useState(ValidatedOptions.success);
   const [templates, setTemplates] = React.useState([] as EventTemplate[]);
   const [templateName, setTemplateName] = React.useState<string | undefined>(prefilled?.templateName);
   const [templateType, setTemplateType] = React.useState<TemplateType | undefined>(prefilled?.templateType);
-  const [maxAge, setMaxAge] = React.useState(0);
+  const [maxAge, setMaxAge] = React.useState(prefilled?.maxAge || 0);
   const [maxAgeUnits, setMaxAgeUnits] = React.useState(1);
-  const [maxSize, setMaxSize] = React.useState(0);
+  const [maxSize, setMaxSize] = React.useState(prefilled?.maxSize || 0);
   const [maxSizeUnits, setMaxSizeUnits] = React.useState(1);
   const [toDisk, setToDisk] = React.useState(true);
-  const [labels, setLabels] = React.useState([] as RecordingLabel[]);
+  const [labels, setLabels] = React.useState(prefilled?.labels || []);
   const [labelsValid, setLabelsValid] = React.useState(ValidatedOptions.default);
   const [loading, setLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
@@ -119,7 +132,7 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
           .subscribe((resp) => {
             setLoading(false);
             if (resp && resp.ok) {
-              history.push('/recordings');
+              history.goBack();
             }
           })
       );
@@ -127,6 +140,13 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
     [addSubscription, context.api, history, setLoading]
   );
 
+  const handleRestartExistingChange = React.useCallback(
+    (checked) => {
+      setRestartExisting(checked);
+    },
+    [setRestartExisting]
+  );
+
   const handleContinuousChange = React.useCallback(
     (checked) => {
       setContinuous(checked);
@@ -228,12 +248,12 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
   const setRecordingOptions = React.useCallback(
     (options: RecordingOptions) => {
       // toDisk is not set, and defaults to true because of https://github.com/cryostatio/cryostat/issues/263
-      setMaxAge(options.maxAge || 0);
+      setMaxAge(prefilled?.maxAge || options.maxAge || 0);
       setMaxAgeUnits(1);
-      setMaxSize(options.maxSize || 0);
+      setMaxSize(prefilled?.maxSize || options.maxSize || 0);
       setMaxSizeUnits(1);
     },
-    [setMaxAge, setMaxAgeUnits, setMaxSize, setMaxSizeUnits]
+    [setMaxAge, setMaxAgeUnits, setMaxSize, setMaxSizeUnits, prefilled]
   );
 
   const handleSubmit = React.useCallback(() => {
@@ -249,6 +269,7 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
     }
 
     const options: RecordingOptions = {
+      restart: restartExisting,
       toDisk: toDisk,
       maxAge: toDisk ? (continuous ? maxAge * maxAgeUnits : undefined) : undefined,
       maxSize: toDisk ? maxSize * maxSizeUnits : undefined,
@@ -276,6 +297,7 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
     nameValid,
     notifications,
     recordingName,
+    restartExisting,
     toDisk,
     handleCreateRecording,
   ]);
@@ -397,6 +419,15 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
             onChange={handleRecordingNameChange}
             validated={nameValid}
           />
+          <Checkbox
+            label="Restart if recording already exists"
+            isChecked={restartExisting}
+            isDisabled={loading}
+            onChange={handleRestartExistingChange}
+            aria-label="restartExisting checkbox"
+            id="recording-restart-existing"
+            name="recording-restart-existing"
+          />
         </FormGroup>
         <FormGroup
           label="Duration"
diff --git a/src/app/Dashboard/AddCard.tsx b/src/app/Dashboard/AddCard.tsx
index 615c81d63..ed1984679 100644
--- a/src/app/Dashboard/AddCard.tsx
+++ b/src/app/Dashboard/AddCard.tsx
@@ -301,6 +301,8 @@ const PropsConfigForm = ({ onChange, ...props }: PropsConfigFormProps) => {
               onChange={handleNumeric(ctrl.key)}
               onPlus={handleNumericStep(ctrl.key, 1)}
               onMinus={handleNumericStep(ctrl.key, -1)}
+              min={ctrl.extras?.min}
+              max={ctrl.extras?.max}
             />
           );
           break;
diff --git a/src/app/Dashboard/Charts/ChartCard.tsx b/src/app/Dashboard/Charts/ChartCard.tsx
new file mode 100644
index 000000000..eab645f1a
--- /dev/null
+++ b/src/app/Dashboard/Charts/ChartCard.tsx
@@ -0,0 +1,358 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { CreateRecordingProps } from '@app/CreateRecording/CreateRecording';
+import { LoadingView } from '@app/LoadingView/LoadingView';
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { FeatureLevel } from '@app/Shared/Services/Settings.service';
+import { useSubscriptions } from '@app/utils/useSubscriptions';
+import {
+  Bullseye,
+  Button,
+  CardActions,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Label,
+  Title,
+} from '@patternfly/react-core';
+import { DataSourceIcon, ExternalLinkAltIcon, SyncAltIcon } from '@patternfly/react-icons';
+import * as React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+import { interval } from 'rxjs';
+import { DashboardCardDescriptor, DashboardCardProps, DashboardCardSizes } from '../Dashboard';
+import { DashboardCard } from '../DashboardCard';
+import { ChartContext } from './ChartContext';
+import { ControllerState, RECORDING_NAME } from './ChartController';
+
+export interface ChartCardProps extends DashboardCardProps {
+  theme: string;
+  chartKind: string;
+  duration: number;
+  period: number;
+}
+
+// TODO these need to be localized
+export enum ChartKind {
+  'Core Count' = 1,
+  'Thread Count' = 2,
+  'CPU Load' = 3,
+  'Heap Usage' = 4,
+  'Memory Usage' = 5,
+  'Total Memory' = 6,
+  'Recording Start Time' = 7,
+  'Recording Duration' = 8,
+  'Classloading Statistics' = 9,
+  'Metaspace Summary' = 10,
+  'Network Utilization' = 11,
+  'Metaspace GC Threshold' = 12,
+  'Thread Statistics' = 13,
+  'Exception Statistics' = 14,
+  'Thread Context Switch Rate' = 15,
+  'Compiler Statistics' = 16,
+
+  'Safepoint Duration' = 18,
+  'File I/O' = 19,
+  'Compiler Total Time' = 20,
+
+  'Compiler Peak Time' = 24,
+
+  'Object Allocation Sample' = 38,
+}
+
+export function kindToId(kind: string): number {
+  return ChartKind[kind];
+}
+
+export const ChartCard: React.FC<ChartCardProps> = (props) => {
+  const [t] = useTranslation();
+  const serviceContext = React.useContext(ServiceContext);
+  const controllerContext = React.useContext(ChartContext);
+  const history = useHistory();
+  const addSubscription = useSubscriptions();
+  const [controllerState, setControllerState] = React.useState(ControllerState.NO_DATA);
+  const [randomKey, setRandomKey] = React.useState(Math.floor(Math.random()));
+  const [chartSrc, setChartSrc] = React.useState('');
+  const [dashboardUrl, setDashboardUrl] = React.useState('');
+
+  const updateRandomKey = React.useCallback(() => {
+    setRandomKey((prev) => {
+      let next = prev + 1;
+      if (next >= 10) {
+        next = 0;
+      }
+      return next;
+    });
+  }, [setRandomKey]);
+
+  React.useEffect(() => {
+    addSubscription(serviceContext.api.grafanaDashboardUrl().subscribe(setDashboardUrl));
+  }, [addSubscription, serviceContext, setDashboardUrl]);
+
+  React.useEffect(() => {
+    if (!dashboardUrl) {
+      return;
+    }
+    const u = new URL('/d-solo/main', dashboardUrl);
+    u.searchParams.append('theme', props.theme);
+    u.searchParams.append('panelId', String(kindToId(props.chartKind)));
+    u.searchParams.append('to', 'now');
+    u.searchParams.append('from', `now-${props.duration}s`);
+    u.searchParams.append('refresh', `${props.period}s`);
+    setChartSrc(u.toString());
+  }, [dashboardUrl, setControllerState, props.theme, props.chartKind, props.duration, props.period, setChartSrc]);
+
+  React.useEffect(() => {
+    addSubscription(controllerContext.controller.attach().subscribe(setControllerState));
+  }, [addSubscription, controllerContext, setControllerState]);
+
+  const refresh = React.useCallback(() => {
+    controllerContext.controller.requestRefresh();
+  }, [controllerContext]);
+
+  React.useEffect(() => {
+    refresh();
+    addSubscription(interval(props.period * 1000).subscribe(() => refresh()));
+  }, [addSubscription, props.period, refresh]);
+
+  const popout = React.useCallback(() => {
+    if (chartSrc && dashboardUrl) {
+      window.open(chartSrc, '_blank');
+    }
+  }, [chartSrc, dashboardUrl]);
+
+  const cardStyle = React.useMemo(() => {
+    if (controllerState !== ControllerState.READY) {
+      return {};
+    }
+    let height: number;
+    switch (props.chartKind) {
+      case 'Core Count':
+        height = 250;
+        break;
+      default:
+        height = 380;
+        break;
+    }
+    return { height };
+  }, [controllerState, props.chartKind]);
+
+  const resyncButton = React.useMemo(() => {
+    return (
+      <Button
+        key={0}
+        aria-label={t('CHART_CARD.BUTTONS.SYNC.LABEL', { chartKind: props.chartKind })}
+        onClick={updateRandomKey}
+        variant="plain"
+        icon={<SyncAltIcon />}
+        isDisabled={!chartSrc || !dashboardUrl}
+      />
+    );
+  }, [t, props.chartKind, updateRandomKey, chartSrc, dashboardUrl]);
+
+  const popoutButton = React.useMemo(() => {
+    return (
+      <Button
+        key={1}
+        aria-label={t('CHART_CARD.BUTTONS.POPOUT.LABEL', { chartKind: props.chartKind })}
+        onClick={popout}
+        variant="plain"
+        icon={<ExternalLinkAltIcon />}
+        isDisabled={!chartSrc || !dashboardUrl}
+      />
+    );
+  }, [t, props.chartKind, popout, chartSrc, dashboardUrl]);
+
+  const actions = React.useMemo(() => {
+    const a = props.actions || [];
+    return [resyncButton, popoutButton, ...a];
+  }, [props.actions, resyncButton, popoutButton]);
+
+  const header = React.useMemo(() => {
+    const isWide = props.span > 4;
+    const style = {
+      marginBottom: isWide ? '-2em' : '',
+    };
+    if (controllerState === ControllerState.READY) {
+      return (
+        <CardHeader style={style}>
+          <CardActions>{actions}</CardActions>
+        </CardHeader>
+      );
+    } else {
+      return (
+        <CardHeader style={style}>
+          <CardTitle>{props.chartKind}</CardTitle>
+          <CardActions>{props.actions}</CardActions>
+        </CardHeader>
+      );
+    }
+  }, [props.actions, props.span, props.chartKind, controllerState, actions]);
+
+  const handleCreateRecording = React.useCallback(() => {
+    history.push({
+      pathname: '/recordings/create',
+      state: {
+        restartExisting: true,
+        name: RECORDING_NAME,
+        templateName: 'Continuous',
+        templateType: 'TARGET',
+        labels: [{ key: 'origin', value: RECORDING_NAME }],
+        duration: -1,
+        // TODO these are arbitrary defaults that will be set in the recording creation form.
+        // Should these values be inferred in some more intelligent way?
+        maxAge: 120, // seconds
+        maxSize: 100 * 1024 * 1024, // bytes
+      } as CreateRecordingProps,
+    });
+  }, [history]);
+
+  return (
+    <DashboardCard
+      id={props.chartKind + '-chart-card'}
+      dashboardId={props.dashboardId}
+      cardSizes={ChartCardSizes}
+      isCompact
+      style={cardStyle}
+      cardHeader={header}
+    >
+      <CardBody>
+        {controllerState === ControllerState.UNKNOWN ? (
+          <LoadingView />
+        ) : controllerState === ControllerState.READY ? (
+          <iframe
+            className="disabled-pointer"
+            key={controllerState + randomKey}
+            style={{ height: '100%', width: '100%' }}
+            src={chartSrc}
+          />
+        ) : (
+          <Bullseye>
+            <EmptyState variant={EmptyStateVariant.large}>
+              <EmptyStateIcon icon={DataSourceIcon} />
+              <Title headingLevel="h2" size="md">
+                {t('CHART_CARD.NO_RECORDING.TITLE')}
+              </Title>
+              <EmptyStateBody>
+                <Trans
+                  t={t}
+                  values={{ recordingName: RECORDING_NAME }}
+                  components={{ label: <Label color="blue" isCompact /> }}
+                >
+                  CHART_CARD.NO_RECORDING.DESCRIPTION
+                </Trans>
+              </EmptyStateBody>
+              <Button variant="primary" onClick={handleCreateRecording}>
+                {t('CHART_CARD.BUTTONS.CREATE.LABEL')}
+              </Button>
+            </EmptyState>
+          </Bullseye>
+        )}
+      </CardBody>
+    </DashboardCard>
+  );
+};
+
+export const ChartCardSizes: DashboardCardSizes = {
+  span: {
+    minimum: 3,
+    default: 4,
+    maximum: 12,
+  },
+  height: {
+    // TODO: implement height resizing
+    minimum: Number.NaN,
+    default: Number.NaN,
+    maximum: Number.NaN,
+  },
+};
+
+export const ChartCardDescriptor: DashboardCardDescriptor = {
+  featureLevel: FeatureLevel.BETA,
+  title: 'Metrics Chart',
+  cardSizes: ChartCardSizes,
+  description: 'Display common performance metrics.',
+  descriptionFull:
+    'Display a single performance metric from a list of supported types. Data is displayed from the present moment back to a specified duration.',
+  component: ChartCard,
+  propControls: [
+    {
+      name: 'Theme',
+      key: 'theme',
+      values: ['light', 'dark'],
+      defaultValue: 'light',
+      description: 'Select a colour theme',
+      kind: 'select',
+    },
+    {
+      name: 'Performance Metric',
+      key: 'chartKind',
+      values: Object.values(ChartKind).filter((v) => typeof v === 'string'),
+      defaultValue: Object.values(ChartKind).filter((v) => typeof v === 'string')[0],
+      description: 'Select the metric to display in this card.', // TODO should this be a function that returns a value based on the selection?
+      kind: 'select',
+    },
+    {
+      name: 'Data Window',
+      key: 'duration',
+      defaultValue: 120,
+      description: 'The data window width in seconds.',
+      kind: 'number',
+      extras: {
+        min: 30,
+        max: 300,
+      },
+    },
+    {
+      name: 'Refresh Period',
+      key: 'period',
+      defaultValue: 10,
+      description: 'The chart refresh period in seconds.',
+      kind: 'number',
+      extras: {
+        min: 5,
+        max: 120,
+      },
+    },
+  ],
+};
diff --git a/src/app/Dashboard/Charts/ChartContext.tsx b/src/app/Dashboard/Charts/ChartContext.tsx
new file mode 100644
index 000000000..82abf44cb
--- /dev/null
+++ b/src/app/Dashboard/Charts/ChartContext.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { defaultServices } from '@app/Shared/Services/Services';
+import * as React from 'react';
+import { ChartController } from './ChartController';
+
+export interface Controllers {
+  controller: ChartController;
+}
+
+const ChartContext: React.Context<Controllers> = React.createContext({
+  controller: new ChartController(
+    defaultServices.api,
+    defaultServices.target,
+    defaultServices.notificationChannel,
+    defaultServices.settings
+  ),
+});
+
+export { ChartContext };
diff --git a/src/app/Dashboard/Charts/ChartController.tsx b/src/app/Dashboard/Charts/ChartController.tsx
new file mode 100644
index 000000000..1684a0c1f
--- /dev/null
+++ b/src/app/Dashboard/Charts/ChartController.tsx
@@ -0,0 +1,200 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { ApiService } from '@app/Shared/Services/Api.service';
+import { NotificationCategory, NotificationChannel } from '@app/Shared/Services/NotificationChannel.service';
+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,
+  first,
+  map,
+  merge,
+  Observable,
+  of,
+  pairwise,
+  ReplaySubject,
+  Subscription,
+  switchMap,
+  tap,
+  throttleTime,
+} from 'rxjs';
+
+export const RECORDING_NAME = 'dashboard_metrics';
+
+export enum ControllerState {
+  UNKNOWN = 0,
+  NO_DATA = 1,
+  READY = 2,
+}
+
+export class ChartController {
+  private readonly _state$ = new BehaviorSubject<ControllerState>(ControllerState.UNKNOWN);
+  private readonly _refCount$ = new BehaviorSubject<number>(0);
+  private readonly _updates$ = new ReplaySubject<void>(1);
+  private readonly _lazy: Subscription;
+  private _attach: Subscription | undefined;
+
+  constructor(
+    private readonly _api: ApiService,
+    private readonly _target: TargetService,
+    private readonly _notifications: NotificationChannel,
+    private readonly _settings: SettingsService
+  ) {
+    this._lazy = this._refCount$
+      .pipe(
+        map((v) => v > 0),
+        pairwise()
+      )
+      .subscribe(([prev, curr]) => {
+        if (!prev && curr) {
+          // first subscriber joined
+          this._start();
+        }
+        if (prev && !curr) {
+          // last subscriber left
+          this._stop();
+        }
+      });
+  }
+
+  attach(): Observable<ControllerState> {
+    this._refCount$.next(this._refCount$.value + 1);
+    return this._state$.asObservable().pipe(
+      distinctUntilChanged(),
+      finalize(() => this._refCount$.next(this._refCount$.value - 1))
+    );
+  }
+
+  requestRefresh(): void {
+    this._updates$.next();
+  }
+
+  _tearDown() {
+    this._state$.next(ControllerState.UNKNOWN);
+    this._lazy.unsubscribe();
+    this._stop();
+  }
+
+  private _stop(): void {
+    if (this._attach) {
+      this._attach.unsubscribe();
+      this._attach = undefined;
+    }
+  }
+
+  private _start(): void {
+    this._stop();
+    this._attach = merge(
+      merge(
+        this._updates$.pipe(throttleTime(this._settings.chartControllerConfig().minRefresh)),
+        this._notifications.messages(NotificationCategory.ActiveRecordingCreated),
+        this._notifications.messages(NotificationCategory.ActiveRecordingDeleted),
+        this._notifications.messages(NotificationCategory.ActiveRecordingStopped)
+      ).pipe(switchMap((_) => this._target.target().pipe(first()))),
+      this._target.target().pipe(tap((_) => this._state$.next(ControllerState.UNKNOWN)))
+    )
+      .pipe(concatMap((t) => this._hasRecording(t)))
+      .subscribe((v) => {
+        this._state$.next(v ? ControllerState.READY : ControllerState.NO_DATA);
+        if (v) {
+          this._api
+            .uploadActiveRecordingToGrafana(RECORDING_NAME)
+            .pipe(first())
+            .subscribe((_) => {
+              this._state$.next(ControllerState.READY);
+            });
+        }
+      });
+  }
+
+  private _hasRecording(target: Target): Observable<boolean> {
+    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))
+      );
+  }
+}
+
+interface CountResponse {
+  data: {
+    targetNodes: {
+      recordings: {
+        active: {
+          aggregate: {
+            count: number;
+          };
+        };
+      };
+    }[];
+  };
+}
diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx
index 1324b3c3d..d979e3aad 100644
--- a/src/app/Dashboard/Dashboard.tsx
+++ b/src/app/Dashboard/Dashboard.tsx
@@ -42,6 +42,7 @@ import {
   dashboardCardConfigResizeCardIntent,
 } from '@app/Shared/Redux/Configurations/DashboardConfigSlicer';
 import { dashboardCardConfigDeleteCardIntent, RootState, StateDispatch } from '@app/Shared/Redux/ReduxStore';
+import { ServiceContext } from '@app/Shared/Services/Services';
 import { FeatureLevel } from '@app/Shared/Services/Settings.service';
 import { TargetView } from '@app/TargetView/TargetView';
 import { CardActions, CardBody, CardHeader, Grid, GridItem, gridSpans, Text } from '@patternfly/react-core';
@@ -50,6 +51,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Observable, of } from 'rxjs';
 import { AddCard } from './AddCard';
 import { AutomatedAnalysisCardDescriptor } from './AutomatedAnalysis/AutomatedAnalysisCard';
+import { ChartCardDescriptor } from './Charts/ChartCard';
+import { ChartContext } from './Charts/ChartContext';
+import { ChartController } from './Charts/ChartController';
 import { DashboardCard } from './DashboardCard';
 import { DashboardCardActionMenu } from './DashboardCardActionMenu';
 
@@ -82,11 +86,13 @@ export interface PropControl {
   kind: 'boolean' | 'number' | 'string' | 'text' | 'select';
   values?: any[] | Observable<any>;
   defaultValue: any;
+  extras?: any;
 }
 
 export interface DashboardProps {}
 
 export interface DashboardCardProps {
+  span: number;
   dashboardId: number;
   actions?: JSX.Element[];
 }
@@ -225,10 +231,24 @@ export const AllPlaceholderCardDescriptor: DashboardCardDescriptor = {
 export const getDashboardCards: (featureLevel?: FeatureLevel) => DashboardCardDescriptor[] = (
   featureLevel = FeatureLevel.DEVELOPMENT
 ) => {
-  const cards = [AutomatedAnalysisCardDescriptor, NonePlaceholderCardDescriptor, AllPlaceholderCardDescriptor];
+  const cards = [
+    AutomatedAnalysisCardDescriptor,
+    ChartCardDescriptor,
+    NonePlaceholderCardDescriptor,
+    AllPlaceholderCardDescriptor,
+  ];
   return cards.filter((card) => card.featureLevel >= featureLevel);
 };
 
+export function hasConfigByName(name: string): boolean {
+  for (const choice of getDashboardCards()) {
+    if (choice.component.name === name) {
+      return true;
+    }
+  }
+  return false;
+}
+
 export function getConfigByName(name: string): DashboardCardDescriptor {
   for (const choice of getDashboardCards()) {
     if (choice.component.name === name) {
@@ -238,6 +258,15 @@ export function getConfigByName(name: string): DashboardCardDescriptor {
   throw new Error(`Unknown card type selection: ${name}`);
 }
 
+export function hasConfigByTitle(title: string): boolean {
+  for (const choice of getDashboardCards()) {
+    if (choice.title === title) {
+      return true;
+    }
+  }
+  return false;
+}
+
 export function getConfigByTitle(title: string): DashboardCardDescriptor {
   for (const choice of getDashboardCards()) {
     if (choice.title === title) {
@@ -248,8 +277,30 @@ export function getConfigByTitle(title: string): DashboardCardDescriptor {
 }
 
 export const Dashboard: React.FC<DashboardProps> = (_) => {
+  const serviceContext = React.useContext(ServiceContext);
   const dispatch = useDispatch<StateDispatch>();
   const cardConfigs: CardConfig[] = useSelector((state: RootState) => state.dashboardConfigs.list);
+  const chartController = React.useRef(
+    new ChartController(
+      serviceContext.api,
+      serviceContext.target,
+      serviceContext.notificationChannel,
+      serviceContext.settings
+    )
+  );
+
+  const chartContext = React.useMemo(() => {
+    return {
+      controller: chartController.current,
+    };
+  }, [chartController]);
+
+  React.useEffect(() => {
+    const controller = chartController.current;
+    return () => {
+      controller._tearDown();
+    };
+  }, []);
 
   const handleRemove = React.useCallback(
     (idx: number) => {
@@ -261,7 +312,7 @@ export const Dashboard: React.FC<DashboardProps> = (_) => {
   const handleResetSize = React.useCallback(
     (idx: number) => {
       const defaultSpan = getConfigByName(cardConfigs[idx].name).cardSizes.span.default;
-      if (defaultSpan == cardConfigs[idx].span) {
+      if (defaultSpan === cardConfigs[idx].span) {
         return;
       }
       dispatch(dashboardCardConfigResizeCardIntent(idx, defaultSpan));
@@ -271,28 +322,33 @@ export const Dashboard: React.FC<DashboardProps> = (_) => {
 
   return (
     <TargetView pageTitle="Dashboard" compactSelect={false}>
-      <Grid id={'dashboard-grid'} hasGutter>
-        {cardConfigs.map((cfg, idx) => (
-          <FeatureFlag level={getConfigByName(cfg.name).featureLevel} key={`${cfg.id}-wrapper`}>
-            <GridItem span={cfg.span} key={cfg.id} order={{ default: idx.toString() }}>
-              {React.createElement(getConfigByName(cfg.name).component, {
-                ...cfg.props,
-                dashboardId: idx,
-                actions: [
-                  <DashboardCardActionMenu
-                    key={`${cfg.name}-actions`}
-                    onRemove={() => handleRemove(idx)}
-                    onResetSize={() => handleResetSize(idx)}
-                  />,
-                ],
-              })}
-            </GridItem>
-          </FeatureFlag>
-        ))}
-        <GridItem key={cardConfigs.length} order={{ default: cardConfigs.length.toString() }}>
-          <AddCard />
-        </GridItem>
-      </Grid>
+      <ChartContext.Provider value={chartContext}>
+        <Grid id={'dashboard-grid'} hasGutter>
+          {cardConfigs
+            .filter((cfg) => hasConfigByName(cfg.name))
+            .map((cfg, idx) => (
+              <FeatureFlag level={getConfigByName(cfg.name).featureLevel} key={`${cfg.id}-wrapper`}>
+                <GridItem span={cfg.span} key={cfg.id} order={{ default: idx.toString() }}>
+                  {React.createElement(getConfigByName(cfg.name).component, {
+                    span: cfg.span,
+                    ...cfg.props,
+                    dashboardId: idx,
+                    actions: [
+                      <DashboardCardActionMenu
+                        key={`${cfg.name}-actions`}
+                        onRemove={() => handleRemove(idx)}
+                        onResetSize={() => handleResetSize(idx)}
+                      />,
+                    ],
+                  })}
+                </GridItem>
+              </FeatureFlag>
+            ))}
+          <GridItem key={cardConfigs.length} order={{ default: cardConfigs.length.toString() }}>
+            <AddCard />
+          </GridItem>
+        </Grid>
+      </ChartContext.Provider>
     </TargetView>
   );
 };
diff --git a/src/app/Dashboard/DraggableRef.tsx b/src/app/Dashboard/DraggableRef.tsx
index de537b58a..0f9628974 100644
--- a/src/app/Dashboard/DraggableRef.tsx
+++ b/src/app/Dashboard/DraggableRef.tsx
@@ -39,6 +39,7 @@ import { dashboardCardConfigReorderCardIntent } from '@app/Shared/Redux/Configur
 import { css } from '@patternfly/react-styles';
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { handleDisabledElements } from './ResizableRef';
 
 const getOverlapScales = (dragIndex: number, hoverIndex: number): [number, number] => {
   let leftScale = OFFSET_SCALE;
@@ -188,6 +189,7 @@ export const DraggableRef: React.FunctionComponent<DraggableRefProps> = ({
         setIsDragging(false);
         setRefStyle(INIT_STYLE);
       }
+      handleDisabledElements(false);
     },
     [setIsDragging, setRefStyle, isDragging]
   );
@@ -211,6 +213,7 @@ export const DraggableRef: React.FunctionComponent<DraggableRefProps> = ({
           ...refStyle,
         });
       }
+      handleDisabledElements(false);
     },
     [dispatch, setIsDragging, setRefStyle, refStyle, dashboardId]
   );
@@ -266,7 +269,7 @@ export const DraggableRef: React.FunctionComponent<DraggableRefProps> = ({
                   return;
                 }
                 // check the position we are hovering the card over
-                /* this case needs to be checked so that cards to the left of the dragged card are 
+                /* this case needs to be checked so that cards to the left of the dragged card are
                    not translated when the dragged card is being dragged to the right, and vice versa */
 
                 // if (dragIndex >= gapIndex) => we are dragging the card "backwards"
@@ -336,6 +339,7 @@ export const DraggableRef: React.FunctionComponent<DraggableRefProps> = ({
         transition: '',
         transform: `translate(${ev.pageX - startCoords.current[0]}px, ${ev.pageY - startCoords.current[1]}px)`,
       });
+      handleDisabledElements(true);
     },
     [setRefStyle, refStyle]
   );
@@ -379,6 +383,7 @@ export const DraggableRef: React.FunctionComponent<DraggableRefProps> = ({
       mouseUpListener.current = () => onMouseUpWhileDragging(droppableItems);
       document.addEventListener('mousemove', mouseMoveListener.current);
       document.addEventListener('mouseup', mouseUpListener.current);
+      handleDisabledElements(true);
     },
     [setRefStyle, setIsDragging, onMouseMoveWhileDragging, onMouseUpWhileDragging, refStyle, isDragging]
   );
diff --git a/src/app/Dashboard/ResizableRef.tsx b/src/app/Dashboard/ResizableRef.tsx
index 4565a362b..2ced4f383 100644
--- a/src/app/Dashboard/ResizableRef.tsx
+++ b/src/app/Dashboard/ResizableRef.tsx
@@ -59,6 +59,11 @@ function normalizeAsGridSpans(val: number, min: number, max: number, a: gridSpan
   return _.clamp(ans, a, b) as gridSpans;
 }
 
+export function handleDisabledElements(disabled: boolean): void {
+  const disabledElements: HTMLElement[] = Array.from(document.querySelectorAll('.disabled-pointer'));
+  disabledElements.forEach((el) => (el.style['pointer-events'] = disabled ? 'none' : 'auto'));
+}
+
 export const ResizableRef: React.FunctionComponent<ResizableRefProps> = ({
   dashboardId,
   cardSizes,
@@ -129,6 +134,7 @@ export const ResizableRef: React.FunctionComponent<ResizableRefProps> = ({
     document.body.style.removeProperty('cursor');
     document.removeEventListener('mousemove', callbackMouseMove);
     document.removeEventListener('mouseup', callbackMouseUp);
+    handleDisabledElements(false);
   }, [callbackMouseMove]);
 
   const handleOnMouseDown = React.useCallback(
@@ -141,6 +147,7 @@ export const ResizableRef: React.FunctionComponent<ResizableRefProps> = ({
       isResizing.current = true;
       minWidth.current = undefined;
       maxWidth.current = undefined;
+      handleDisabledElements(true);
     },
     [callbackMouseMove, callbackMouseUp]
   );
diff --git a/src/app/Settings/ChartCardsConfig.tsx b/src/app/Settings/ChartCardsConfig.tsx
new file mode 100644
index 000000000..8507844cb
--- /dev/null
+++ b/src/app/Settings/ChartCardsConfig.tsx
@@ -0,0 +1,103 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { FormGroup, HelperText, HelperTextItem, NumberInput, Stack, StackItem } from '@patternfly/react-core';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { UserSetting } from './Settings';
+
+const min = 1;
+
+const Component = () => {
+  const [t] = useTranslation();
+  const context = React.useContext(ServiceContext);
+
+  const [minRefresh, setMinRefresh] = React.useState(context.settings.chartControllerConfig().minRefresh);
+
+  const handleChange = React.useCallback(
+    (evt) => {
+      setMinRefresh((prev) => {
+        let value = isNaN(evt.target.value) ? prev : Number(evt.target.value);
+        if (value < min) {
+          value = min;
+        }
+        context.settings.setChartControllerConfig({ minRefresh: value });
+        return value;
+      });
+    },
+    [setMinRefresh, context.settings]
+  );
+
+  const handleVisibleStep = React.useCallback(
+    (delta: number) => () => {
+      const v = minRefresh + delta;
+      context.settings.setChartControllerConfig({ minRefresh: v });
+      setMinRefresh(v);
+    },
+    [minRefresh, context.settings]
+  );
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroup>
+          <HelperText>
+            <HelperTextItem>{t('SETTINGS.CHARTS_CONFIG.REFRESH_RATE_SETTING')}</HelperTextItem>
+          </HelperText>
+          <NumberInput
+            inputName="minRefresh"
+            value={minRefresh}
+            min={min}
+            onChange={handleChange}
+            onMinus={handleVisibleStep(-1)}
+            onPlus={handleVisibleStep(1)}
+            unit={t('SECOND', { ns: 'common' })}
+          />
+        </FormGroup>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export const ChartCardsConfig: UserSetting = {
+  titleKey: 'SETTINGS.CHARTS_CONFIG.TITLE',
+  descConstruct: 'SETTINGS.CHARTS_CONFIG.DESCRIPTION',
+  content: Component,
+  category: 'SETTINGS.CATEGORIES.DASHBOARD',
+};
diff --git a/src/app/Settings/Settings.tsx b/src/app/Settings/Settings.tsx
index 8d182d75c..fe113a26e 100644
--- a/src/app/Settings/Settings.tsx
+++ b/src/app/Settings/Settings.tsx
@@ -62,6 +62,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { AutomatedAnalysisConfig } from './AutomatedAnalysisConfig';
 import { AutoRefresh } from './AutoRefresh';
+import { ChartCardsConfig } from './ChartCardsConfig';
 import { CredentialsStorage } from './CredentialsStorage';
 import { DatetimeControl } from './DatetimeControl';
 import { DeletionDialogControl } from './DeletionDialogControl';
@@ -136,6 +137,7 @@ export const Settings: React.FC<SettingsProps> = (_) => {
       [
         NotificationControl,
         AutomatedAnalysisConfig,
+        ChartCardsConfig,
         CredentialsStorage,
         DeletionDialogControl,
         WebSocketDebounce,
diff --git a/src/app/Settings/i18n.ts b/src/app/Settings/i18n.ts
index e72288c6a..22888e311 100644
--- a/src/app/Settings/i18n.ts
+++ b/src/app/Settings/i18n.ts
@@ -38,6 +38,8 @@
 /**
  * t('SETTINGS.AUTOMATED_ANALYSIS_CONFIG.TITLE')
  * t('SETTINGS.AUTOMATED_ANALYSIS_CONFIG.DESCRIPTION')
+ * t('SETTINGS.CHARTS_CONFIG.TITLE')
+ * t('SETTINGS.CHARTS_CONFIG.DESCRIPTION')
  * t('SETTINGS.AUTO_REFRESH.TITLE')
  * t('SETTINGS.AUTO_REFRESH.DESCRIPTION')
  * t('SETTINGS.CREDENTIALS_STORAGE.TITLE')
diff --git a/src/app/Shared/Services/Api.service.tsx b/src/app/Shared/Services/Api.service.tsx
index 5a60bc848..c4b680574 100644
--- a/src/app/Shared/Services/Api.service.tsx
+++ b/src/app/Shared/Services/Api.service.tsx
@@ -297,8 +297,13 @@ export class ApiService {
     if (!!recordingAttributes.duration && recordingAttributes.duration > 0) {
       form.append('duration', String(recordingAttributes.duration));
     }
-    form.append('archiveOnStop', String(recordingAttributes.archiveOnStop));
+    if (recordingAttributes.archiveOnStop != null) {
+      form.append('archiveOnStop', String(recordingAttributes.archiveOnStop));
+    }
     if (recordingAttributes.options) {
+      if (recordingAttributes.options.restart) {
+        form.append('restart', String(recordingAttributes.options.restart));
+      }
       if (recordingAttributes.options.toDisk != null) {
         form.append('toDisk', String(recordingAttributes.options.toDisk));
       }
@@ -1349,6 +1354,7 @@ export interface EventTemplate {
 }
 
 export interface RecordingOptions {
+  restart?: boolean;
   toDisk?: boolean;
   maxSize?: number;
   maxAge?: number;
@@ -1413,6 +1419,14 @@ export const defaultAutomatedAnalysisRecordingConfig: AutomatedAnalysisRecording
   maxAge: 0,
 };
 
+export interface ChartControllerConfig {
+  minRefresh: number;
+}
+
+export const defaultChartControllerConfig: ChartControllerConfig = {
+  minRefresh: 10,
+};
+
 // New target specific archived recording apis now enforce a non-empty target field
 // The placeholder targetId for uploaded (non-target) recordings is "uploads"
 export const UPLOADS_SUBDIRECTORY = 'uploads';
diff --git a/src/app/Shared/Services/Settings.service.tsx b/src/app/Shared/Services/Settings.service.tsx
index 6b62b8dc0..57c570db9 100644
--- a/src/app/Shared/Services/Settings.service.tsx
+++ b/src/app/Shared/Services/Settings.service.tsx
@@ -43,7 +43,9 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import {
   AutomatedAnalysisRecordingConfig,
   automatedAnalysisRecordingName,
+  ChartControllerConfig,
   defaultAutomatedAnalysisRecordingConfig,
+  defaultChartControllerConfig,
   RecordingAttributes,
 } from './Api.service';
 import { NotificationCategory } from './NotificationChannel.service';
@@ -146,6 +148,14 @@ export class SettingsService {
     saveToLocalStorage('AUTOMATED_ANALYSIS_RECORDING_CONFIG', config);
   }
 
+  chartControllerConfig(defaultConfig = defaultChartControllerConfig): ChartControllerConfig {
+    return getFromLocalStorage('CHART_CONTROLLER_CONFIG', defaultConfig);
+  }
+
+  setChartControllerConfig(config: ChartControllerConfig): void {
+    saveToLocalStorage('CHART_CONTROLLER_CONFIG', config);
+  }
+
   deletionDialogsEnabled(): Map<DeleteOrDisableWarningType, boolean> {
     const value = getFromLocalStorage('DELETION_DIALOGS_ENABLED', undefined);
     if (typeof value === 'object') {
diff --git a/src/app/TargetSelect/TargetSelect.tsx b/src/app/TargetSelect/TargetSelect.tsx
index d4b0aa2ad..16389ac17 100644
--- a/src/app/TargetSelect/TargetSelect.tsx
+++ b/src/app/TargetSelect/TargetSelect.tsx
@@ -273,7 +273,7 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
               aria-label="Create target"
               isDisabled={isLoading}
               onClick={showCreateTargetModal}
-              variant="control"
+              variant="plain"
               icon={<PlusCircleIcon />}
             />
             <Button
@@ -282,7 +282,7 @@ export const TargetSelect: React.FunctionComponent<TargetSelectProps> = (props)
                 isLoading || selected == NO_TARGET || selected.annotations?.cryostat['REALM'] !== CUSTOM_TARGETS_REALM
               }
               onClick={handleDeleteButton}
-              variant="control"
+              variant="plain"
               icon={<TrashIcon />}
               {...deleteButtonLoadingProps}
             />
diff --git a/src/app/utils/LocalStorage.ts b/src/app/utils/LocalStorage.ts
index 48c0ed952..6e7720865 100644
--- a/src/app/utils/LocalStorage.ts
+++ b/src/app/utils/LocalStorage.ts
@@ -48,6 +48,7 @@ export enum LocalStorageKey {
   AUTO_REFRESH_PERIOD,
   AUTO_REFRESH_UNITS,
   AUTOMATED_ANALYSIS_RECORDING_CONFIG,
+  CHART_CONTROLLER_CONFIG,
   DELETION_DIALOGS_ENABLED,
   VISIBLE_NOTIFICATIONS_COUNT,
   NOTIFICATIONS_ENABLED,
diff --git a/src/test/Common.tsx b/src/test/Common.tsx
index dbd39b442..fece8b310 100644
--- a/src/test/Common.tsx
+++ b/src/test/Common.tsx
@@ -193,6 +193,36 @@ export const renderWithServiceContextAndReduxStoreWithRouter = (
   return { store, user, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
 };
 
+export const renderWithProvidersAndRedux = (
+  ui: React.ReactElement,
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  providers: ProviderInstance<any>[],
+  { preloadedState = {}, store = setupStore(preloadedState), user = userEvent.setup(), ...renderOptions } = {}
+) => {
+  if (providers.length < 1) {
+    throw new Error('At least one provider must be specified');
+  }
+  const Wrapper = ({ children }: PropsWithChildren<unknown>) => {
+    let els = children;
+    for (let i = 0; i < providers.length; i++) {
+      const provider = providers[i];
+      const ctx = React.createElement(provider.kind, { key: i, value: provider.instance }, els);
+      els = [ctx];
+    }
+    return (
+      <Provider key={0} store={store}>
+        {els}
+      </Provider>
+    );
+  };
+  return { store, user, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
+};
+
+export interface ProviderInstance<T> {
+  kind: React.Provider<T>;
+  instance: T;
+}
+
 export const testTranslate = (key: string, ns = 'public'): string => {
   // if no translation is found, return the "test value" for debugging
   return t(key, 'i18next test value', { ns: ns });
diff --git a/src/test/CreateRecording/CustomRecordingForm.test.tsx b/src/test/CreateRecording/CustomRecordingForm.test.tsx
index 639951035..483190894 100644
--- a/src/test/CreateRecording/CustomRecordingForm.test.tsx
+++ b/src/test/CreateRecording/CustomRecordingForm.test.tsx
@@ -145,6 +145,7 @@ describe('<CustomRecordingForm />', () => {
       duration: 30,
       archiveOnStop: true,
       options: {
+        restart: false,
         toDisk: true,
         maxAge: undefined,
         maxSize: 0,
diff --git a/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap b/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
index 97c5cbf70..e7e64f90f 100644
--- a/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
+++ b/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
@@ -60,6 +60,31 @@ Array [
           type="text"
           value=""
         />
+        <div
+          className="pf-c-check"
+        >
+          <input
+            aria-invalid={false}
+            aria-label="restartExisting checkbox"
+            checked={false}
+            className="pf-c-check__input"
+            data-ouia-component-id="OUIA-Generated-Checkbox-1"
+            data-ouia-component-type="PF4/Checkbox"
+            data-ouia-safe={true}
+            disabled={false}
+            id="recording-restart-existing"
+            name="recording-restart-existing"
+            onChange={[Function]}
+            required={false}
+            type="checkbox"
+          />
+          <label
+            className="pf-c-check__label"
+            htmlFor="recording-restart-existing"
+          >
+            Restart if recording already exists
+          </label>
+        </div>
         <div
           aria-live="polite"
           className="pf-c-form__helper-text"
@@ -111,7 +136,7 @@ Array [
                 aria-label="Continuous checkbox"
                 checked={false}
                 className="pf-c-check__input"
-                data-ouia-component-id="OUIA-Generated-Checkbox-1"
+                data-ouia-component-id="OUIA-Generated-Checkbox-2"
                 data-ouia-component-type="PF4/Checkbox"
                 data-ouia-safe={true}
                 disabled={false}
@@ -140,7 +165,7 @@ Array [
                 aria-label="ArchiveOnStop checkbox"
                 checked={true}
                 className="pf-c-check__input"
-                data-ouia-component-id="OUIA-Generated-Checkbox-2"
+                data-ouia-component-id="OUIA-Generated-Checkbox-3"
                 data-ouia-component-type="PF4/Checkbox"
                 data-ouia-safe={true}
                 disabled={false}
@@ -530,7 +555,7 @@ Array [
                 aria-invalid={false}
                 checked={true}
                 className="pf-c-check__input"
-                data-ouia-component-id="OUIA-Generated-Checkbox-3"
+                data-ouia-component-id="OUIA-Generated-Checkbox-4"
                 data-ouia-component-type="PF4/Checkbox"
                 data-ouia-safe={true}
                 disabled={false}
diff --git a/src/test/Dashboard/Charts/ChartCard.test.tsx b/src/test/Dashboard/Charts/ChartCard.test.tsx
new file mode 100644
index 000000000..8cbfa7da1
--- /dev/null
+++ b/src/test/Dashboard/Charts/ChartCard.test.tsx
@@ -0,0 +1,246 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+jest.mock('@app/Dashboard/Charts/ChartController');
+
+import { ChartCard, kindToId } from '@app/Dashboard/Charts/ChartCard';
+import { ChartContext } from '@app/Dashboard/Charts/ChartContext';
+import { ChartController, ControllerState } from '@app/Dashboard/Charts/ChartController';
+import { NotificationsContext, NotificationsInstance } from '@app/Notifications/Notifications';
+import { setupStore, store } from '@app/Shared/Redux/ReduxStore';
+import { defaultServices, ServiceContext } from '@app/Shared/Services/Services';
+import { cleanup, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createMemoryHistory, MemoryHistory } from 'history';
+import React from 'react';
+import { Provider } from 'react-redux';
+import renderer, { act } from 'react-test-renderer';
+import { of } from 'rxjs';
+import { renderWithProvidersAndRedux } from '../../Common';
+
+let history: MemoryHistory = createMemoryHistory({ initialEntries: ['/'] });
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useRouteMatch: () => ({ url: history.location.pathname }),
+  useHistory: () => history,
+}));
+
+const mockDashboardUrl = 'http://localhost:3000';
+jest.spyOn(defaultServices.api, 'grafanaDashboardUrl').mockReturnValue(of(mockDashboardUrl));
+
+const mockTarget = { connectUrl: 'service:jmx:rmi://someUrl', alias: 'fooTarget' };
+jest.spyOn(defaultServices.target, 'target').mockReturnValue(of(mockTarget));
+
+const mockController = new ChartController(
+  defaultServices.api,
+  defaultServices.target,
+  defaultServices.notificationChannel,
+  defaultServices.settings
+);
+const mockChartContext = {
+  controller: mockController,
+};
+
+describe('<ChartCard />', () => {
+  beforeEach(() => (history = createMemoryHistory({ initialEntries: ['/'] })));
+  afterEach(cleanup);
+
+  it('renders correctly', async () => {
+    jest.spyOn(mockController, 'attach').mockReturnValue(of(ControllerState.READY));
+
+    let tree;
+    await act(async () => {
+      tree = renderer.create(
+        <ServiceContext.Provider value={defaultServices}>
+          <NotificationsContext.Provider value={NotificationsInstance}>
+            <ChartContext.Provider value={mockChartContext}>
+              <Provider store={store}>
+                <ChartCard theme={'light'} chartKind={'CPU Load'} duration={120} period={10} span={6} dashboardId={0} />
+              </Provider>
+            </ChartContext.Provider>
+          </NotificationsContext.Provider>
+        </ServiceContext.Provider>
+      );
+    });
+    expect(tree.toJSON()).toMatchSnapshot('with-content');
+  });
+
+  it('renders loading state correctly', async () => {
+    jest.spyOn(mockController, 'attach').mockReturnValue(of(ControllerState.UNKNOWN));
+
+    let tree;
+    await act(async () => {
+      tree = renderer.create(
+        <ServiceContext.Provider value={defaultServices}>
+          <NotificationsContext.Provider value={NotificationsInstance}>
+            <ChartContext.Provider value={mockChartContext}>
+              <Provider store={store}>
+                <ChartCard theme={'light'} chartKind={'CPU Load'} duration={120} period={10} span={6} dashboardId={0} />
+              </Provider>
+            </ChartContext.Provider>
+          </NotificationsContext.Provider>
+        </ServiceContext.Provider>
+      );
+    });
+    expect(tree.toJSON()).toMatchSnapshot('loading-view');
+  });
+
+  it('renders empty state correctly', async () => {
+    jest.spyOn(mockController, 'attach').mockReturnValue(of(ControllerState.NO_DATA));
+
+    let tree;
+    await act(async () => {
+      tree = renderer.create(
+        <ServiceContext.Provider value={defaultServices}>
+          <NotificationsContext.Provider value={NotificationsInstance}>
+            <ChartContext.Provider value={mockChartContext}>
+              <Provider store={store}>
+                <ChartCard theme={'light'} chartKind={'CPU Load'} duration={120} period={10} span={6} dashboardId={0} />
+              </Provider>
+            </ChartContext.Provider>
+          </NotificationsContext.Provider>
+        </ServiceContext.Provider>
+      );
+    });
+    expect(tree.toJSON()).toMatchSnapshot('empty-state');
+  });
+
+  it('renders empty state with information and action button', async () => {
+    jest.spyOn(mockController, 'attach').mockReturnValue(of(ControllerState.NO_DATA));
+
+    renderChartCard(
+      <ChartCard theme={'light'} chartKind={'CPU Load'} duration={120} period={10} span={6} dashboardId={0} />
+    );
+
+    expect(screen.getByText('CPU Load')).toBeInTheDocument();
+    expect(screen.getByText('No source recording')).toBeInTheDocument();
+    expect(
+      screen.getByText((s) => s.includes('Metrics cards display data taken from running flight recordings'))
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /create/i })).toBeInTheDocument();
+  });
+
+  it('navigates to recording creation with prefilled state when empty state button clicked', async () => {
+    jest.spyOn(mockController, 'attach').mockReturnValue(of(ControllerState.NO_DATA));
+
+    const { user } = renderChartCard(
+      <ChartCard theme={'light'} chartKind={'CPU Load'} duration={120} period={10} span={6} dashboardId={0} />
+    );
+
+    expect(history.location.pathname).toBe('/');
+    await user.click(screen.getByRole('button', { name: /create/i }));
+    expect(history.location.pathname).toBe('/recordings/create');
+    expect(history.location.state).toEqual({
+      duration: -1,
+      labels: [
+        {
+          key: 'origin',
+          value: 'dashboard_metrics',
+        },
+      ],
+      maxAge: 120,
+      maxSize: 100 * 1024 * 1024,
+      name: 'dashboard_metrics',
+      restartExisting: true,
+      templateName: 'Continuous',
+      templateType: 'TARGET',
+    });
+  });
+
+  it.each([
+    ['CPU Load', 120, 5],
+    ['Heap Usage', 90, 10],
+    ['Network Utilization', 60, 15],
+    ['File I/O', 30, 20],
+  ])('renders iframe', async (chartKind: string, duration: number, period: number) => {
+    jest.spyOn(mockController, 'attach').mockReturnValue(of(ControllerState.READY));
+
+    const { container } = renderChartCard(
+      <ChartCard theme={'light'} chartKind={chartKind} duration={duration} period={period} span={6} dashboardId={0} />
+    );
+
+    const iframe = container.querySelector('iframe');
+    expect(iframe).toBeTruthy();
+    const u = new URL(iframe?.src || '');
+    expect(u.host).toBe('localhost:3000');
+    expect(u.protocol).toBe('http:');
+    const params = new URLSearchParams();
+    params.set('theme', 'light');
+    params.set('panelId', String(kindToId(chartKind)));
+    params.set('to', 'now');
+    params.set('from', `now-${duration}s`);
+    params.set('refresh', `${period}s`);
+    expect(u.searchParams.toString()).toEqual(params.toString());
+  });
+});
+
+const renderChartCard = (
+  ui: React.ReactElement,
+  {
+    services = defaultServices,
+    notifications = NotificationsInstance,
+    chartContext = mockChartContext,
+    preloadState = {},
+    store = setupStore(preloadState),
+    user = userEvent.setup(),
+    ...renderOptions
+  } = {}
+) => {
+  return renderWithProvidersAndRedux(
+    ui,
+    [
+      {
+        kind: ChartContext.Provider,
+        instance: chartContext,
+      },
+      {
+        kind: NotificationsContext.Provider,
+        instance: notifications,
+      },
+      {
+        kind: ServiceContext.Provider,
+        instance: services,
+      },
+    ],
+    {
+      store,
+      user,
+      ...renderOptions,
+    }
+  );
+};
diff --git a/src/test/Dashboard/Charts/__snapshots__/ChartCard.test.tsx.snap b/src/test/Dashboard/Charts/__snapshots__/ChartCard.test.tsx.snap
new file mode 100644
index 000000000..956a37c10
--- /dev/null
+++ b/src/test/Dashboard/Charts/__snapshots__/ChartCard.test.tsx.snap
@@ -0,0 +1,348 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ChartCard /> renders correctly: with-content 1`] = `
+<div
+  className="draggable-ref-wrapper"
+  onDragStart={[Function]}
+  onTransitionEnd={[Function]}
+  style={Object {}}
+>
+  <div
+    className="dashboard-card-resizable-wrapper"
+  >
+    <article
+      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+      data-ouia-component-id="OUIA-Generated-Card-1"
+      data-ouia-component-type="PF4/Card"
+      data-ouia-safe={true}
+      id="CPU Load-chart-card"
+      style={
+        Object {
+          "height": 380,
+        }
+      }
+    >
+      <div
+        className="draggable-ref__grip"
+        draggable={true}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <div
+          className="pf-c-card__header"
+          style={
+            Object {
+              "marginBottom": "-2em",
+            }
+          }
+        >
+          <div
+            className="pf-c-card__actions"
+          >
+            <button
+              aria-disabled={false}
+              aria-label="Synchronize CPU Load chart"
+              className="pf-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-disabled={false}
+              aria-label="Pop out CPU Load chart"
+              className="pf-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        className="pf-c-card__body"
+      >
+        <iframe
+          className="disabled-pointer"
+          src="http://localhost:3000/d-solo/main?theme=light&panelId=3&to=now&from=now-120s&refresh=10s"
+          style={
+            Object {
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        />
+      </div>
+    </article>
+    <div
+      className="resizable-ref"
+      onMouseDown={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`<ChartCard /> renders empty state correctly: empty-state 1`] = `
+<div
+  className="draggable-ref-wrapper"
+  onDragStart={[Function]}
+  onTransitionEnd={[Function]}
+  style={Object {}}
+>
+  <div
+    className="dashboard-card-resizable-wrapper"
+  >
+    <article
+      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+      data-ouia-component-id="OUIA-Generated-Card-3"
+      data-ouia-component-type="PF4/Card"
+      data-ouia-safe={true}
+      id="CPU Load-chart-card"
+      style={Object {}}
+    >
+      <div
+        className="draggable-ref__grip"
+        draggable={true}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <div
+          className="pf-c-card__header"
+          style={
+            Object {
+              "marginBottom": "-2em",
+            }
+          }
+        >
+          <div
+            className="pf-c-card__title"
+            id="CPU Load-chart-card-title"
+          >
+            CPU Load
+          </div>
+          <div
+            className="pf-c-card__actions"
+          />
+        </div>
+      </div>
+      <div
+        className="pf-c-card__body"
+      >
+        <div
+          className="pf-l-bullseye"
+        >
+          <div
+            className="pf-c-empty-state pf-m-lg"
+          >
+            <div
+              className="pf-c-empty-state__content"
+            >
+              <svg
+                aria-hidden="true"
+                aria-labelledby={null}
+                className="pf-c-empty-state__icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 896 1024"
+                width="1em"
+              >
+                <path
+                  d="M750.6252,63 L896.0002,223 L750.6252,383 L704.0002,339.594 L780.807,255.06 L179.0074,254.909 L178.9774,254.909 C147.0174,254.909 117.0004,268.239 94.4554,292.446 C71.9454,316.615 59.6154,348.704 59.7374,382.802 C59.9914,453.334 113.4824,511 178.9784,511 L717.0204,511 C764.8314,511 809.7404,530.399 843.4754,566.14 C877.3464,602.026 896.0004,649.93 896.0004,701.029 L896.0004,701.689 C896.0004,752.688 877.3844,800.818 843.5834,837.211 C809.9954,873.375 765.2134,893.895 717.4864,894.992 L717.1364,895 L276.310151,895.001486 C261.798404,956.828303 206.189494,1003 140,1003 C62.804,1003 0,940.196 0,863 C0,785.804 62.804,723 140,723 C206.189852,723 261.799004,769.172196 276.310386,830.999515 L716.5394,831 C748.5984,830.173 778.6564,816.448 801.2074,792.166 C823.8134,767.826 836.2624,735.694 836.2624,701.689 L836.2624,701.029 C836.2624,667.119 823.8964,635.341 801.4404,611.55 C778.9654,587.739 748.9844,575 717.0204,575 L178.9784,575 C80.6694,575 0.0014,489 0.0014,383.047 C0.0014,332 18.3334,283.634 52.1394,247.337 C85.9744,211.008 131.0224,191 178.9774,191 L179.0224,191 L781.009,191.162 L704.0002,106.406 L750.6252,63 Z M140,787 C98.093,787 64,821.094 64,863 C64,904.906 98.093,939 140,939 C181.907,939 216,904.906 216,863 C216,821.094 181.907,787 140,787 Z"
+                />
+              </svg>
+              <h2
+                className="pf-c-title pf-m-md"
+                data-ouia-component-id="OUIA-Generated-Title-4"
+                data-ouia-component-type="PF4/Title"
+                data-ouia-safe={true}
+              >
+                No source recording
+              </h2>
+              <div
+                className="pf-c-empty-state__body"
+              >
+                Metrics cards display data taken from running flight recordings with the label 
+                <span
+                  className="pf-c-label pf-m-blue pf-m-compact"
+                >
+                  <span
+                    className="pf-c-label__content"
+                  >
+                    origin=dashboard_metrics
+                  </span>
+                </span>
+                . No such recordings are currently available.
+              </div>
+              <button
+                aria-disabled={false}
+                aria-label={null}
+                className="pf-c-button pf-m-primary"
+                data-ouia-component-id="OUIA-Generated-Button-primary-3"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={false}
+                onClick={[Function]}
+                role={null}
+                type="button"
+              >
+                Create
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    <div
+      className="resizable-ref"
+      onMouseDown={[Function]}
+    />
+  </div>
+</div>
+`;
+
+exports[`<ChartCard /> renders loading state correctly: loading-view 1`] = `
+<div
+  className="draggable-ref-wrapper"
+  onDragStart={[Function]}
+  onTransitionEnd={[Function]}
+  style={Object {}}
+>
+  <div
+    className="dashboard-card-resizable-wrapper"
+  >
+    <article
+      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+      data-ouia-component-id="OUIA-Generated-Card-2"
+      data-ouia-component-type="PF4/Card"
+      data-ouia-safe={true}
+      id="CPU Load-chart-card"
+      style={Object {}}
+    >
+      <div
+        className="draggable-ref__grip"
+        draggable={true}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <div
+          className="pf-c-card__header"
+          style={
+            Object {
+              "marginBottom": "-2em",
+            }
+          }
+        >
+          <div
+            className="pf-c-card__title"
+            id="CPU Load-chart-card-title"
+          >
+            CPU Load
+          </div>
+          <div
+            className="pf-c-card__actions"
+          />
+        </div>
+      </div>
+      <div
+        className="pf-c-card__body"
+      >
+        <div
+          className="pf-l-bullseye"
+        >
+          <div
+            className="pf-c-empty-state"
+          >
+            <div
+              className="pf-c-empty-state__content"
+            >
+              <div
+                className="pf-c-empty-state__icon"
+              >
+                <span
+                  aria-label="Contents"
+                  aria-valuetext="Loading..."
+                  className="pf-c-spinner pf-m-xl"
+                  role="progressbar"
+                >
+                  <span
+                    className="pf-c-spinner__clipper"
+                  />
+                  <span
+                    className="pf-c-spinner__lead-ball"
+                  />
+                  <span
+                    className="pf-c-spinner__tail-ball"
+                  />
+                </span>
+              </div>
+              <h2
+                className="pf-c-title pf-m-lg"
+                data-ouia-component-id="OUIA-Generated-Title-3"
+                data-ouia-component-type="PF4/Title"
+                data-ouia-safe={true}
+              >
+                Loading
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    <div
+      className="resizable-ref"
+      onMouseDown={[Function]}
+    />
+  </div>
+</div>
+`;
diff --git a/src/test/Settings/Settings.test.tsx b/src/test/Settings/Settings.test.tsx
index 3bfc24f27..94cb432c5 100644
--- a/src/test/Settings/Settings.test.tsx
+++ b/src/test/Settings/Settings.test.tsx
@@ -70,6 +70,15 @@ jest.mock('@app/Settings/AutomatedAnalysisConfig', () => ({
   } as UserSetting,
 }));
 
+jest.mock('@app/Settings/ChartCardsConfig', () => ({
+  ChartCardsConfig: {
+    titleKey: 'SETTINGS.CHARTS_CONFIG.TITLE',
+    descConstruct: 'SETTINGS.CHARTS_CONFIG.DESCRIPTION',
+    category: 'SETTINGS.CATEGORIES.DASHBOARD',
+    content: () => <Text>Chart Cards Config Component</Text>,
+  } as UserSetting,
+}));
+
 jest.mock('@app/Settings/CredentialsStorage', () => ({
   CredentialsStorage: {
     titleKey: 'SETTINGS.CREDENTIALS_STORAGE.TITLE',
diff --git a/src/test/Settings/__snapshots__/Settings.test.tsx.snap b/src/test/Settings/__snapshots__/Settings.test.tsx.snap
index 437b9e6d7..554622e5c 100644
--- a/src/test/Settings/__snapshots__/Settings.test.tsx.snap
+++ b/src/test/Settings/__snapshots__/Settings.test.tsx.snap
@@ -517,6 +517,57 @@ exports[`<Settings/> renders correctly 1`] = `
                       </p>
                     </div>
                   </div>
+                  <div
+                    className="pf-c-form__group"
+                  >
+                    <div
+                      className="pf-c-form__group-label"
+                    >
+                      <label
+                        className="pf-c-form__label"
+                      >
+                        <span
+                          className="pf-c-form__label-text"
+                        >
+                          <h2
+                            className="pf-c-title pf-m-lg"
+                            data-ouia-component-id="OUIA-Generated-Title-7"
+                            data-ouia-component-type="PF4/Title"
+                            data-ouia-safe={true}
+                          >
+                            Dashboard Metrics Configuration
+                          </h2>
+                        </span>
+                      </label>
+                       
+                    </div>
+                    <div
+                      className="pf-c-form__group-control"
+                    >
+                      <div
+                        className="pf-c-helper-text"
+                      >
+                        <div
+                          className="pf-c-helper-text__item"
+                        >
+                          <span
+                            className="pf-c-helper-text__item-text"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
+                      <p
+                        className=""
+                        data-ouia-component-id="OUIA-Generated-Text-7"
+                        data-ouia-component-type="PF4/Text"
+                        data-ouia-safe={true}
+                        data-pf-content={true}
+                      >
+                        Chart Cards Config Component
+                      </p>
+                    </div>
+                  </div>
                 </form>
               </div>
               <div
@@ -540,7 +591,7 @@ exports[`<Settings/> renders correctly 1`] = `
                         >
                           <h2
                             className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-7"
+                            data-ouia-component-id="OUIA-Generated-Title-8"
                             data-ouia-component-type="PF4/Title"
                             data-ouia-safe={true}
                           >
@@ -570,7 +621,7 @@ exports[`<Settings/> renders correctly 1`] = `
                       </div>
                       <p
                         className=""
-                        data-ouia-component-id="OUIA-Generated-Text-7"
+                        data-ouia-component-id="OUIA-Generated-Text-8"
                         data-ouia-component-type="PF4/Text"
                         data-ouia-safe={true}
                         data-pf-content={true}
@@ -593,7 +644,7 @@ exports[`<Settings/> renders correctly 1`] = `
                         >
                           <h2
                             className="pf-c-title pf-m-lg"
-                            data-ouia-component-id="OUIA-Generated-Title-8"
+                            data-ouia-component-id="OUIA-Generated-Title-9"
                             data-ouia-component-type="PF4/Title"
                             data-ouia-safe={true}
                           >
@@ -621,7 +672,7 @@ exports[`<Settings/> renders correctly 1`] = `
                       </div>
                       <p
                         className=""
-                        data-ouia-component-id="OUIA-Generated-Text-8"
+                        data-ouia-component-id="OUIA-Generated-Text-9"
                         data-ouia-component-type="PF4/Text"
                         data-ouia-safe={true}
                         data-pf-content={true}
diff --git a/yarn.lock b/yarn.lock
index e82ff587d..9c7b5791d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1683,6 +1683,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-test-renderer@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "@types/react-test-renderer@npm:18.0.0"
+  dependencies:
+    "@types/react": "*"
+  checksum: 6afc938a1d7618d88ab8793e251f0bd5981bf3f08c1b600f74df3f8800b92589ea534dc6dcb7c8d683893fcc740bf8d7843a42bf2dae59785cfe88f004bd7b0b
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*":
   version: 18.0.26
   resolution: "@types/react@npm:18.0.26"
@@ -3456,6 +3465,7 @@ __metadata:
     "@types/js-base64": 3.3.1
     "@types/lodash": ^4.14.191
     "@types/react-router-dom": ^5.3.3
+    "@types/react-test-renderer": ^18.0.0
     "@typescript-eslint/eslint-plugin": ^5.51.0
     "@typescript-eslint/parser": ^5.51.0
     "@vue/preload-webpack-plugin": ^2.0.0