Add Snapshot recording form

src/app/CreateRecording/CreateRecording.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import { filter, first } from 'rxjs/operators';
-import { Breadcrumb, BreadcrumbHeading, BreadcrumbItem, Card, CardBody, PageSection, Tabs, Tab } from '@patternfly/react-core';
+import { Breadcrumb, BreadcrumbHeading, BreadcrumbItem, Card, CardBody, PageSection, Tabs, Tab, Text, TextVariants } from '@patternfly/react-core';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationsContext } from '@app/Notifications/Notifications';
 import { CustomRecordingForm } from './CustomRecordingForm';
+import { SnapshotRecordingForm } from './SnapshotRecordingForm';
 
 export interface CreateRecordingProps {
   recordingName?: string;
@@ -50,10 +51,13 @@ export const CreateRecording = (props: CreateRecordingProps) => {
       </Breadcrumb>
       <Card>
         <CardBody>
-          <Tabs activeKey={activeTab} onSelect={(evt, idx) => setActiveTab(idx)}>
+          <Tabs activeKey={activeTab} onSelect={(evt, idx) => setActiveTab(Number(idx))}>
             <Tab eventKey={0} title="Custom Flight Recording">
               <CustomRecordingForm onSubmit={handleSubmit} />
             </Tab>
+            <Tab eventKey={1} title="Snapshot Recording">
+              <SnapshotRecordingForm onSubmit={handleSubmit} />
+            </Tab>
           </Tabs>
         </CardBody>
       </Card>

src/app/CreateRecording/CustomRecordingForm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import { filter, first, map } from 'rxjs/operators';
-import { ActionGroup, Breadcrumb, BreadcrumbHeading, BreadcrumbItem, Button, Card, CardBody, CardHeader, Checkbox, Form, FormGroup, FormSelect, FormSelectOption, FormSelectOptionGroup, TextArea, TextInput, Split, SplitItem, Text, TextVariants, Title, Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { ActionGroup, Button, Checkbox, Form, FormGroup, FormSelect, FormSelectOption, FormSelectOptionGroup, TextArea, TextInput, Split, SplitItem, Text, TextVariants, Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationsContext } from '@app/Notifications/Notifications';

src/app/CreateRecording/SnapshotRecordingForm.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+import { ActionGroup, Button, Form, FormGroup, Text, TextVariants } from '@patternfly/react-core';
+
+export interface SnapshotRecordingFormProps {
+  onSubmit: (command: string, args: string[]) => void;
+};
+
+export const SnapshotRecordingForm = (props) => {
+  const history = useHistory();
+
+  const handleSubmit = () => {
+    props.onSubmit('snapshot', []);
+  };
+
+  return (<>
+    <Form>
+      <Text component={TextVariants.p}>
+        A Snapshot recording is one which contains all information about all
+        events that have been captured in the current session by <i>other,&nbsp;
+        non-snapshot</i> recordings. Snapshots do not themselves define which
+        events are enabled, their thresholds, or any other options. A Snapshot
+        is only ever in the STOPPED state from the moment it is created.
+      </Text>
+      <ActionGroup>
+        <Button variant="primary" onClick={handleSubmit}>Create</Button>
+        <Button variant="secondary" onClick={history.goBack}>Cancel</Button>
+      </ActionGroup>
+    </Form>
+  </>);
+}