Merge pull request #3468 from rawagner/pause_evetns

Add pause functionality to activity/events card

frontend/packages/console-shared/src/components/dashboard/activity-card/ActivityBody.tsx

@@ -9,6 +9,7 @@ import { FirehoseResult } from '@console/internal/components/utils/types';
 import { EventStreamList } from '@console/internal/components/utils/event-stream';
 import { K8sResourceKind, EventKind } from '@console/internal/module/k8s';
 import { PrometheusResponse } from '@console/internal/components/graphs';
+import { DashboardCardButtonLink } from '../dashboard-card/DashboardCardLink';
 import EventItem from './EventItem';
 import './activity-card.scss';
 
@@ -23,15 +24,32 @@ export const Activity: React.FC<ActivityProps> = ({ timestamp, children }) => (
   </div>
 );
 
-export const RecentEventsBodyContent: React.FC<RecentEventsBodyProps> = ({ events, filter }) => {
+export const RecentEventsBodyContent: React.FC<RecentEventsBodyContentProps> = ({
+  events,
+  filter,
+  paused,
+  setPaused,
+}) => {
+  const ref = React.useRef([]);
+  React.useEffect(() => {
+    if (paused && events) {
+      ref.current = events.data;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paused]);
+  if (!paused && events) {
+    ref.current = events.data;
+  }
+  const eventsData = ref.current;
   const [expanded, setExpanded] = React.useState([]);
   const onToggle = React.useCallback(
     (uid: string) => {
-      expanded.includes(uid)
-        ? setExpanded(expanded.filter((e) => e !== uid))
-        : setExpanded([...expanded, uid]);
+      const isExpanded = expanded.includes(uid);
+      const newExpanded = isExpanded ? expanded.filter((e) => e !== uid) : [...expanded, uid];
+      setPaused(isExpanded ? !!newExpanded.length : !isExpanded);
+      setExpanded(newExpanded);
     },
-    [expanded],
+    [expanded, setPaused],
   );
   const isExpanded = React.useCallback(
     (uid: string) => {
@@ -51,7 +69,7 @@ export const RecentEventsBodyContent: React.FC<RecentEventsBodyProps> = ({ event
     return <div className="skeleton-activity" />;
   }
 
-  const filteredEvents = filter ? events.data.filter(filter) : events.data;
+  const filteredEvents = filter ? eventsData.filter(filter) : eventsData;
   const sortedEvents = sortEvents(filteredEvents);
   if (filteredEvents.length === 0) {
     return (
@@ -76,12 +94,21 @@ export const RecentEventsBodyContent: React.FC<RecentEventsBodyProps> = ({ event
   );
 };
 
-export const RecentEventsBody: React.FC<RecentEventsBodyProps> = (props) => (
-  <>
-    <div className="co-activity-card__recent-title">Recent Events</div>
-    <RecentEventsBodyContent {...props} />
-  </>
-);
+export const RecentEventsBody: React.FC<RecentEventsBodyProps> = (props) => {
+  const [paused, setPaused] = React.useState(false);
+  const togglePause = React.useCallback(() => setPaused(!paused), [paused]);
+  return (
+    <>
+      <div className="co-activity-card__recent-title">
+        Recent Events
+        <DashboardCardButtonLink onClick={togglePause}>
+          {paused ? 'Unpause' : 'Pause'}
+        </DashboardCardButtonLink>
+      </div>
+      <RecentEventsBodyContent {...props} paused={paused} setPaused={setPaused} />
+    </>
+  );
+};
 
 export const OngoingActivityBody: React.FC<OngoingActivityBodyProps> = ({
   loaded,
@@ -159,6 +186,11 @@ type RecentEventsBodyProps = {
   filter?: (event: EventKind) => boolean;
 };
 
+type RecentEventsBodyContentProps = RecentEventsBodyProps & {
+  paused?: boolean;
+  setPaused?: (paused: boolean) => void;
+};
+
 type ActivityProps = {
   timestamp?: Date;
   children: React.ReactNode;

frontend/packages/console-shared/src/components/dashboard/activity-card/activity-card.scss

@@ -62,6 +62,8 @@
 .co-activity-card__recent-title {
   border-top: solid 1px $pf-color-black-300;
   border-bottom: solid 1px $pf-color-black-300;
+  display: flex;
+  justify-content: space-between;
   padding: 0.2rem var(--pf-c-card--child--PaddingRight) 0.2rem var(--pf-c-card--child--PaddingLeft);
 }
 

frontend/packages/console-shared/src/components/dashboard/dashboard-card/DashboardCardLink.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
-import { Button, Popover, PopoverPosition } from '@patternfly/react-core';
+import { Button, ButtonProps, Popover, PopoverPosition } from '@patternfly/react-core';
 
-const DashboardCardButtonLink: React.FC<DashboardCardButtonLinkProps> = React.memo(
+export const DashboardCardButtonLink: React.FC<DashboardCardButtonLinkProps> = React.memo(
   ({ children, className, ...rest }) => (
     <Button
       variant="link"
@@ -56,7 +56,7 @@ export const DashboardCardPopupLink: React.FC<DashboardCardPopupLinkProps> = Rea
 
 export default DashboardCardLink;
 
-type DashboardCardButtonLinkProps = {
+type DashboardCardButtonLinkProps = ButtonProps & {
   children: React.ReactNode;
   className?: string;
 };

frontend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-activity.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
 import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
 import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardLink from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardLink';
+import DashboardCardLink, {
+  DashboardCardButtonLink,
+} from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardLink';
 import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
 import ActivityBody, {
   RecentEventsBodyContent,
@@ -30,8 +32,8 @@ const getEventsResource = (namespace: string): FirehoseResource => ({
   namespace,
 });
 
-const RecentEvent = withDashboardResources(
-  ({ watchK8sResource, stopWatchK8sResource, resources, vm }: RecentEventProps) => {
+const RecentEvent = withDashboardResources<RecentEventProps>(
+  ({ watchK8sResource, stopWatchK8sResource, resources, vm, paused, setPaused }) => {
     React.useEffect(() => {
       if (vm) {
         const eventsResource = getEventsResource(getNamespace(vm));
@@ -46,6 +48,8 @@ const RecentEvent = withDashboardResources(
       <RecentEventsBodyContent
         events={resources.events as FirehoseResult<EventKind[]>}
         filter={combinedVmFilter(vm)}
+        paused={paused}
+        setPaused={setPaused}
       />
     );
   },
@@ -54,6 +58,9 @@ const RecentEvent = withDashboardResources(
 export const VMActivityCard: React.FC = () => {
   const { vm } = React.useContext(VMDashboardContext);
 
+  const [paused, setPaused] = React.useState(false);
+  const togglePause = React.useCallback(() => setPaused(!paused), [paused]);
+
   const name = getName(vm);
   const namespace = getNamespace(vm);
   const viewEventsLink = `${resourcePath(VirtualMachineModel.kind, name, namespace)}/events`;
@@ -63,10 +70,13 @@ export const VMActivityCard: React.FC = () => {
       <DashboardCardHeader>
         <DashboardCardTitle>Events</DashboardCardTitle>
         <DashboardCardLink to={viewEventsLink}>View all</DashboardCardLink>
+        <DashboardCardButtonLink onClick={togglePause}>
+          {paused ? 'Unpause' : 'Pause'}
+        </DashboardCardButtonLink>
       </DashboardCardHeader>
       <DashboardCardBody>
         <ActivityBody>
-          <RecentEvent vm={vm} />
+          <RecentEvent vm={vm} paused={paused} setPaused={setPaused} />
         </ActivityBody>
       </DashboardCardBody>
     </DashboardCard>
@@ -77,4 +87,6 @@ type EventFilterFuncion = (event: EventKind) => boolean;
 
 type RecentEventProps = DashboardItemProps & {
   vm: VMKind;
+  paused: boolean;
+  setPaused: (paused: boolean) => void;
 };

frontend/public/components/dashboard/dashboards-page/overview-dashboard/activity-card.tsx

@@ -26,7 +26,7 @@ import { connectToFlags, WithFlagsProps, FlagsObject } from '../../../../reducer
 const eventsResource: FirehoseResource = { isList: true, kind: EventModel.kind, prop: 'events' };
 
 const RecentEvent = withDashboardResources(
-  ({ watchK8sResource, stopWatchK8sResource, resources }: DashboardItemProps) => {
+  ({ watchK8sResource, stopWatchK8sResource, resources }) => {
     React.useEffect(() => {
       watchK8sResource(eventsResource);
       return () => {