feat(matchExpr): allow hide alert actions

cryostatio · Mar 21, 2023 · 14687f6 · 14687f6
1 parent 12e0ad3
commit 14687f6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 148 deletions.
diff --git a/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx b/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
@@ -74,6 +74,8 @@ export const CreateCredentialModal: React.FunctionComponent<CreateCredentialModa
   const matchExpreRef = React.useRef(new SearchExprService());
   const [inProgress, setInProgress] = React.useState(false);
 
+  const alertOptions = React.useMemo(() => ({ hideActions: true }), []);
+
   return (
     <SearchExprServiceContext.Provider value={matchExpreRef.current}>
       <Modal
@@ -106,7 +108,7 @@ export const CreateCredentialModal: React.FunctionComponent<CreateCredentialModa
           <GridItem xl={8}>
             <Card isFullHeight isFlat>
               <CardBody style={{ overflow: 'auto' }}>
-                <MatchExpressionVisualizer />
+                <MatchExpressionVisualizer alertOptions={alertOptions} />
               </CardBody>
             </Card>
           </GridItem>

diff --git a/src/app/SecurityPanel/Credentials/CreateJmxCredentialModal.tsx b/src/app/SecurityPanel/Credentials/CreateJmxCredentialModal.tsx
diff --git a/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx b/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx
@@ -36,7 +36,7 @@
  * SOFTWARE.
  */
 import { TopologyControlBar } from '@app/Topology/GraphView/TopologyControlBar';
-import EntityDetails from '@app/Topology/Shared/Entity/EntityDetails';
+import EntityDetails, { AlertOptions } from '@app/Topology/Shared/Entity/EntityDetails';
 import { useSearchExpression } from '@app/Topology/Shared/utils';
 import { TopologySideBar } from '@app/Topology/SideBar/TopologySideBar';
 import { NodeType } from '@app/Topology/typings';
@@ -85,16 +85,20 @@ import { ServiceContext } from '../Services/Services';
 import { Target } from '../Services/Target.service';
 import { componentFactory, createTargetNode, layoutFactory, transformData } from './utils';
 
-export interface MatchExpressionVisualizerProps {}
+export interface MatchExpressionVisualizerProps {
+  alertOptions?: AlertOptions;
+}
 
-export const MatchExpressionVisualizer: React.FC<MatchExpressionVisualizerProps> = ({ ...props }) => {
+export const MatchExpressionVisualizer: React.FC<MatchExpressionVisualizerProps> = ({ alertOptions, ...props }) => {
   const [isGraph, setIsGraph] = React.useState(true);
   return (
     <Stack {...props} hasGutter>
       <StackItem>
         <LayoutRadioGroup onChange={setIsGraph} />
       </StackItem>
-      <StackItem isFilled>{isGraph ? <GraphView /> : <ListView />}</StackItem>
+      <StackItem isFilled>
+        {isGraph ? <GraphView alertOptions={alertOptions} /> : <ListView alertOptions={alertOptions} />}
+      </StackItem>
     </Stack>
   );
 };
@@ -141,7 +145,7 @@ const LayoutRadioGroup: React.FC<LayoutRadioGroupProps> = ({ onChange, ...props
   );
 };
 
-const GraphView: React.FC = ({ ...props }) => {
+const GraphView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
 
@@ -209,10 +213,10 @@ const GraphView: React.FC = ({ ...props }) => {
     }
     return (
       <TopologySideBar onClose={handleDrawerClose}>
-        <EntityDetails entity={selectedEntity} />
+        <EntityDetails entity={selectedEntity} alertOptions={alertOptions} />
       </TopologySideBar>
     );
-  }, [handleDrawerClose, selectedEntity]);
+  }, [handleDrawerClose, selectedEntity, alertOptions]);
 
   return (
     <TopologyView
@@ -233,7 +237,7 @@ const GraphView: React.FC = ({ ...props }) => {
   );
 };
 
-const ListView: React.FC = ({ ...props }) => {
+const ListView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
   const [matchExpression, setMatchExpression] = useSearchExpression();
@@ -324,13 +328,17 @@ const ListView: React.FC = ({ ...props }) => {
               id={`${connectUrl}-expand`}
               isHidden={!expanded.includes(connectUrl)}
             >
-              <EntityDetails entity={{ getData: () => tn }} columnModifier={{ default: '3Col' }} />
+              <EntityDetails
+                entity={{ getData: () => tn }}
+                columnModifier={{ default: '3Col' }}
+                alertOptions={alertOptions}
+              />
             </DataListContent>
           ) : null}
         </DataListItem>
       );
     });
-  }, [filtered, expanded, toggleExpand, setMatchExpression, props]);
+  }, [filtered, expanded, toggleExpand, setMatchExpression, props, alertOptions]);
 
   return <DataList aria-label={'Target List'}>{content}</DataList>;
 };
diff --git a/src/app/Topology/Shared/Entity/EntityDetails.tsx b/src/app/Topology/Shared/Entity/EntityDetails.tsx
@@ -103,6 +103,7 @@ export interface EntityDetailsProps {
   entity?: GraphElement | ListElement;
   columnModifier?: React.ComponentProps<typeof DescriptionList>['columnModifier'];
   className?: string;
+  alertOptions?: AlertOptions;
   actionFilter?: (_: NodeAction) => boolean;
 }
 
@@ -113,6 +114,7 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
   className,
   columnModifier,
   actionFilter,
+  alertOptions,
   ...props
 }) => {
   const [activeTab, setActiveTab] = React.useState<_supportedTab>('details');
@@ -128,6 +130,7 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
         <div {...props} style={{ height: '100%' }}>
           <EntityDetailHeader
             titleContent={titleContent}
+            alertOptions={alertOptions}
             badge={nodeTypeToAbbr(data.nodeType)}
             badgeTooltipContent={data.nodeType}
             status={isTarget ? getStatusTargetNode(data) : []}
@@ -158,7 +161,7 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
       );
     }
     return null;
-  }, [entity, setActiveTab, activeTab, props, columnModifier, actionFilter]);
+  }, [entity, setActiveTab, activeTab, props, columnModifier, actionFilter, alertOptions]);
   return <div className={css(className)}>{viewContent}</div>;
 };
 
@@ -644,12 +647,17 @@ export const GroupResources: React.FC<{ envNode: EnvironmentNode }> = ({ envNode
   );
 };
 
+export interface AlertOptions {
+  hideActions?: boolean;
+}
+
 export interface EntityDetailHeaderProps {
   titleContent: React.ReactNode;
   badgeTooltipContent?: React.ReactNode;
   badge?: ReturnType<typeof nodeTypeToAbbr>;
   actionDropdown?: React.ReactNode;
   status: [NodeStatus?, StatusExtra?];
+  alertOptions?: AlertOptions;
 }
 
 export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
@@ -658,6 +666,7 @@ export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
   badgeTooltipContent,
   actionDropdown,
   status: statusContent,
+  alertOptions = {},
   ...props
 }) => {
   const [status, extra] = statusContent;
@@ -680,7 +689,7 @@ export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
         >
           <Stack hasGutter>
             <StackItem key={'alert-description'}>{extra?.description}</StackItem>
-            {extra?.callForAction ? (
+            {extra?.callForAction && !alertOptions.hideActions ? (
               <StackItem key={'alert-call-for-action'}>
                 <Flex>
                   {extra.callForAction.map((action, index) => (