chore: simplifies rule table

cryostatio · Aug 23, 2024 · d331fad · d331fad
1 parent 579136e
commit d331fad
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git a/locales/en/public.json b/locales/en/public.json
@@ -329,7 +329,7 @@
     "CLEAN_DESCRIPTION": "Clean will stop any Active Recordings that {{ruleName}} created."
   },
   "Rules": {
-    "ABOUT_BODY": "Automated Rules define a dynamic set of target JVMs to connect to and start <0>Active Recordings</0> using a specific <1>Event Template</1> when the Automated Rule is created and when any new matching target JVMs appear. If your Target JVM connections require JMX Credentials, you can configure these in <2>Security</2>. Automated Rules can be configured to periodically copy the contents of the Active Recording to <3>Archives</3> to ensure you always have up-to-date information about your JVMs.",
+    "ABOUT_BODY": "Rules define a dynamic set of target JVMs to connect to and start <0>Active Recordings</0> using a specific <1>Event Template</1>. If your Target JVM connections require JMX Credentials, you can configure these in <2>Security</2>. Automated Rules can be configured to periodically copy the contents of the Active Recording to <3>Archives</3> to ensure you always have up-to-date information about your JVMs.",
     "ABOUT_TITLE": "About Automated Rules",
     "ARCHIVAL_PERIOD_TOOLTIP": "Period in seconds. Cryostat will connect to matching targets at this interval and copy the relevant Recording data into its archives. Values less than 1 prevent data from being repeatedly copied into archives - Recordings will be started and remain only in Target JVM memory.",
     "EVENT_SPECIFIER_TOOLTIP": "The name and location of the Event Template applied by this rule.",

diff --git a/src/app/Rules/Rules.tsx b/src/app/Rules/Rules.tsx
@@ -33,6 +33,9 @@ import {
   ToolbarContent,
   ToolbarItem,
   EmptyStateHeader,
+  TextContent,
+  Text,
+  TextVariants,
 } from '@patternfly/react-core';
 import { SearchIcon, UploadIcon } from '@patternfly/react-icons';
 import {
@@ -411,23 +414,25 @@ export const RulesTable: React.FC<RulesTableProps> = (_) => {
   return (
     <>
       <BreadcrumbPage pageTitle="Automated Rules">
-        <Card data-quickstart-id="about-rules">
-          <CardTitle>{t('Rules.ABOUT_TITLE')}</CardTitle>
-          <CardBody>
-            <Trans
-              t={t}
-              components={[
-                <Link to={'/recordings'} />,
-                <Link to={'/events'} />,
-                <Link to={'/security'} />,
-                <Link to={'/archives'} />,
-              ]}
-            >
-              Rules.ABOUT_BODY
-            </Trans>
-          </CardBody>
-        </Card>
         <Card>
+          <CardTitle>
+            {t('AUTOMATED_RULES', { ns: 'common' })}
+            <TextContent>
+              <Text component={TextVariants.small}>
+                <Trans
+                  t={t}
+                  components={[
+                    <Link to={'/recordings'} />,
+                    <Link to={'/events'} />,
+                    <Link to={'/security'} />,
+                    <Link to={'/archives'} />,
+                  ]}
+                >
+                  Rules.ABOUT_BODY
+                </Trans>
+              </Text>
+            </TextContent>
+          </CardTitle>
           <CardBody>
             <Toolbar id="automated-rule-toolbar">
               <ToolbarContent>

diff --git a/src/app/SecurityPanel/Credentials/StoredCredentials.tsx b/src/app/SecurityPanel/Credentials/StoredCredentials.tsx
@@ -41,6 +41,9 @@ import {
   MenuToggleCheckbox,
   ActionList,
   ActionListItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@@ -302,11 +305,13 @@ export const StoredCredentials = () => {
 
     return (
       <>
-        <ActionList>
-          {buttons.map((btn, idx) => (
-            <ActionListItem key={idx}>{btn}</ActionListItem>
-          ))}
-        </ActionList>
+        <Toolbar>
+          <ToolbarContent>
+            {buttons.map((btn, idx) => (
+              <ToolbarItem key={idx}>{btn}</ToolbarItem>
+            ))}
+          </ToolbarContent>
+        </Toolbar>
         <DeleteWarningModal
           warningType={DeleteOrDisableWarningType.DeleteCredentials}
           visible={warningModalOpen}