feat(dashboard): implement embedded chart cards

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.",

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",

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]
   );

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,14 +132,21 @@ export const CustomRecordingForm: React.FC<CustomRecordingFormProps> = ({ prefil
           .subscribe((resp) => {
             setLoading(false);
             if (resp && resp.ok) {
-              history.push('/recordings');
+              history.goBack();
             }
           })
       );
     },
     [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"

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;