feat(targets): target select component can be expanded to reveal details

src/app/Agent/AboutAgentCard.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 { Card, CardBody, CardTitle } from '@patternfly/react-core';
+import * as React from 'react';
+
+export interface AboutAgentCardProps {}
+
+export const AboutAgentCard: React.FunctionComponent<AboutAgentCardProps> = (props) => {
+  return (
+    <Card>
+      <CardTitle>About the JMC Agent</CardTitle>
+      <CardBody>
+        The JMC Agent allows users to dynamically inject custom JFR events into running JVMs. In order to make use of
+        the JMC Agent, the agent jar must be present in the same container as the target, and the target must be started
+        with the agent (-javaagent:/path/to/agent.jar). Once these pre-requisites are met, the user can upload probe
+        templates to Cryostat and insert them to the target, as well as view or remove currently active probes.
+      </CardBody>
+    </Card>
+  );
+};

src/app/Agent/AgentLiveProbes.tsx

@@ -41,17 +41,11 @@ import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.s
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import {
   Button,
-  Card,
-  CardBody,
-  CardHeaderMain,
-  CardHeader,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
   TextInput,
-  Text,
-  TextVariants,
   Stack,
   StackItem,
   EmptyState,
@@ -74,6 +68,7 @@ import { EventProbe } from '@app/Shared/Services/Api.service';
 import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
 import { DeleteWarningType } from '@app/Modal/DeleteWarningUtils';
 import { SearchIcon } from '@patternfly/react-icons';
+import { AboutAgentCard } from './AboutAgentCard';
 
 export interface AgentLiveProbesProps {}
 
@@ -245,20 +240,7 @@ export const AgentLiveProbes: React.FunctionComponent<AgentLiveProbesProps> = (p
       <>
         <Stack hasGutter style={{ marginTop: '1em' }}>
           <StackItem>
-            <Card>
-              <CardHeader>
-                <CardHeaderMain>
-                  <Text component={TextVariants.h4}>About the JMC Agent</Text>
-                </CardHeaderMain>
-              </CardHeader>
-              <CardBody>
-                The JMC Agent allows users to dynamically inject custom JFR events into running JVMs. In order to make
-                use of the JMC Agent, the agent jar must be present in the same container as the target, and the target
-                must be started with the agent (-javaagent:/path/to/agent.jar). Once these pre-requisites are met, the
-                user can upload probe templates to Cryostat and insert them to the target, as well as view or remove
-                currently active probes.
-              </CardBody>
-            </Card>
+            <AboutAgentCard />
           </StackItem>
           <StackItem>
             <Toolbar id="active-probes-toolbar">

src/app/Agent/AgentProbeTemplates.tsx

@@ -42,10 +42,6 @@ import { useSubscriptions } from '@app/utils/useSubscriptions';
 import {
   ActionGroup,
   Button,
-  Card,
-  CardBody,
-  CardHeaderMain,
-  CardHeader,
   FileUpload,
   Form,
   FormGroup,
@@ -56,8 +52,6 @@ import {
   ToolbarGroup,
   ToolbarItem,
   TextInput,
-  Text,
-  TextVariants,
   StackItem,
   Stack,
   EmptyState,
@@ -83,6 +77,7 @@ import { ErrorView } from '@app/ErrorView/ErrorView';
 import { ProbeTemplate } from '@app/Shared/Services/Api.service';
 import { DeleteWarningType } from '@app/Modal/DeleteWarningUtils';
 import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
+import { AboutAgentCard } from './AboutAgentCard';
 
 export interface AgentProbeTemplatesProps {
   agentDetected: boolean;
@@ -328,20 +323,7 @@ export const AgentProbeTemplates: React.FunctionComponent<AgentProbeTemplatesPro
       <>
         <Stack hasGutter style={{ marginTop: '1em', marginBottom: '1.5em' }}>
           <StackItem>
-            <Card>
-              <CardHeader>
-                <CardHeaderMain>
-                  <Text component={TextVariants.h4}>About the JMC Agent</Text>
-                </CardHeaderMain>
-              </CardHeader>
-              <CardBody>
-                The JMC Agent allows users to dynamically inject custom JFR events into running JVMs. In order to make
-                use of the JMC Agent, the agent jar must be present in the same container as the target, and the target
-                must be started with the agent (-javaagent:/path/to/agent.jar). Once these pre-requisites are met, the
-                user can upload probe templates to Cryostat and insert them to the target, as well as view or remove
-                currently active probes.
-              </CardBody>
-            </Card>
+            <AboutAgentCard />
           </StackItem>
           <StackItem>
             <Toolbar id="probe-templates-toolbar">

src/app/Dashboard/Dashboard.tsx

@@ -41,7 +41,7 @@ import { TargetView } from '@app/TargetView/TargetView';
 export interface DashboardProps {}
 
 export const Dashboard: React.FunctionComponent<DashboardProps> = (props) => {
-  return <TargetView pageTitle="Dashboard" compactSelect={true} />;
+  return <TargetView pageTitle="Dashboard" compactSelect={false} hideEmptyState />;
 };
 
 export default Dashboard;

src/app/Login/Login.tsx

@@ -38,7 +38,7 @@
 import * as React from 'react';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationsContext } from '../Notifications/Notifications';
-import { Card, CardBody, CardFooter, CardHeader, PageSection, Text, Title } from '@patternfly/react-core';
+import { Card, CardBody, CardFooter, CardTitle, PageSection, Text } from '@patternfly/react-core';
 import { BasicAuthDescriptionText, BasicAuthForm } from './BasicAuthForm';
 import { OpenShiftAuthDescriptionText, OpenShiftPlaceholderAuthForm } from './OpenShiftPlaceholderAuthForm';
 import { NoopAuthForm } from './NoopAuthForm';
@@ -100,11 +100,7 @@ export const Login: React.FunctionComponent<LoginProps> = (props) => {
   return (
     <PageSection>
       <Card>
-        <CardHeader>
-          <Title headingLevel="h1" size="lg">
-            Login
-          </Title>
-        </CardHeader>
+        <CardTitle>Login</CardTitle>
         <CardBody>{loginForm}</CardBody>
         <CardFooter>{descriptionText}</CardFooter>
       </Card>

src/app/Recordings/Recordings.tsx

@@ -38,7 +38,7 @@
 import * as React from 'react';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { TargetView } from '@app/TargetView/TargetView';
-import { Card, CardBody, CardHeader, Tab, Tabs, Text, TextVariants } from '@patternfly/react-core';
+import { Card, CardBody, CardTitle, Tab, Tabs } from '@patternfly/react-core';
 import { ActiveRecordingsTable } from './ActiveRecordingsTable';
 import { ArchivedRecordingsTable } from './ArchivedRecordingsTable';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
@@ -67,9 +67,7 @@ export const Recordings: React.FunctionComponent<RecordingsProps> = (props) => {
       </Tabs>
     ) : (
       <>
-        <CardHeader>
-          <Text component={TextVariants.h4}>Active Recordings</Text>
-        </CardHeader>
+        <CardTitle>Active Recordings</CardTitle>
         <ActiveRecordingsTable archiveEnabled={false} />
       </>
     );

src/app/Rules/CreateRule.tsx

@@ -41,8 +41,6 @@ import {
   Button,
   Card,
   CardBody,
-  CardHeader,
-  CardHeaderMain,
   Form,
   FormGroup,
   FormSelect,
@@ -533,11 +531,6 @@ const Comp = () => {
         </GridItem>
         <GridItem xl={5}>
           <Card>
-            <CardHeader>
-              <CardHeaderMain>
-                <Text component={TextVariants.h4}>Match Expression Evaluator</Text>
-              </CardHeaderMain>
-            </CardHeader>
             <CardBody>
               <MatchExpressionEvaluator
                 inlineHint

src/app/Rules/Rules.tsx

@@ -41,18 +41,15 @@ import {
   Button,
   Card,
   CardBody,
-  CardHeader,
-  CardHeaderMain,
   EmptyState,
   EmptyStateIcon,
   Switch,
-  Text,
-  TextVariants,
   Title,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
   ToolbarGroup,
+  CardTitle,
 } from '@patternfly/react-core';
 import { SearchIcon, UploadIcon } from '@patternfly/react-icons';
 import {
@@ -419,11 +416,7 @@ export const Rules: React.FunctionComponent<RulesProps> = (props) => {
           </CardBody>
         </Card>
         <Card>
-          <CardHeader>
-            <CardHeaderMain>
-              <Text component={TextVariants.h4}>About Automated Rules</Text>
-            </CardHeaderMain>
-          </CardHeader>
+          <CardTitle>About Automated Rules</CardTitle>
           <CardBody>
             Automated Rules define a dynamic set of Target JVMs to connect to and start{' '}
             <Link to="/recordings">Active Recordings</Link> using a specific <Link to="/events">Event Template</Link>{' '}

src/app/Settings/Settings.tsx

@@ -62,7 +62,7 @@ export const Settings: React.FunctionComponent<SettingsProps> = (props) => {
         {settings.map((s) => (
           <Card key={s.title}>
             <CardTitle>
-              <Text component={TextVariants.h1}>{s.title}</Text>
+              <Text>{s.title}</Text>
               <Text component={TextVariants.small}>{s.description}</Text>
             </CardTitle>
             <CardBody>{s.element}</CardBody>

src/app/Shared/MatchExpressionEvaluator.tsx

@@ -60,6 +60,7 @@ import {
   InfoCircleIcon,
   WarningTriangleIcon,
 } from '@patternfly/react-icons';
+import { SerializedTarget } from '@app/Shared/SerializedTarget';
 
 export interface MatchExpressionEvaluatorProps {
   inlineHint?: boolean;
@@ -155,7 +156,7 @@ export const MatchExpressionEvaluator: React.FunctionComponent<MatchExpressionEv
     <>
       <Stack hasGutter>
         <StackItem>
-          <TargetSelect />
+          <TargetSelect simple />
         </StackItem>
         <StackItem>
           <Split hasGutter isWrappable>
@@ -189,13 +190,7 @@ export const MatchExpressionEvaluator: React.FunctionComponent<MatchExpressionEv
           <></>
         )}
         <StackItem>
-          {!!target?.alias && !!target?.connectUrl ? (
-            <CodeBlock>
-              <CodeBlockCode>{JSON.stringify(target, null, 2)}</CodeBlockCode>
-            </CodeBlock>
-          ) : (
-            <NoTargetSelected />
-          )}
+          <SerializedTarget target={target} />
         </StackItem>
       </Stack>
     </>

src/app/Shared/SerializedTarget.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 * as React from 'react';
+import { CodeBlock, CodeBlockCode } from '@patternfly/react-core';
+import { Target } from '@app/Shared/Services/Target.service';
+import { NoTargetSelected } from '@app/TargetView/NoTargetSelected';
+
+export interface SerializedTargetProps {
+  target?: Target;
+  indentLevel?: number;
+}
+
+export const SerializedTarget: React.FunctionComponent<SerializedTargetProps> = (props) => {
+  return (
+    <>
+      {!props.target ? (
+        <NoTargetSelected />
+      ) : (
+        <CodeBlock>
+          <CodeBlockCode>{JSON.stringify(props.target, null, props.indentLevel || 2)}</CodeBlockCode>
+        </CodeBlock>
+      )}
+    </>
+  );
+};

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

@@ -58,6 +58,7 @@ export const indexOfTarget = (arr: Target[], target: Target): number => {
 };
 
 export interface Target {
+  jvmId?: string; // present in responses, but we do not need to provide it in requests
   connectUrl: string;
   alias: string;
   labels?: {};