Fix VM Events card actions layout

openshift · Feb 5, 2020 · 8c7901e · 8c7901e
1 parent 333b7ac
commit 8c7901e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/frontend/packages/console-shared/src/components/dashboard/activity-card/ActivityBody.tsx b/frontend/packages/console-shared/src/components/dashboard/activity-card/ActivityBody.tsx
@@ -105,20 +105,24 @@ export const RecentEventsBodyContent: React.FC<RecentEventsBodyContentProps> = (
   );
 };
 
+export const PauseButton: React.FC<PauseButtonProps> = ({ paused, togglePause }) => (
+  <DashboardCardButtonLink
+    onClick={togglePause}
+    className="co-activity-card__recent-actions"
+    icon={paused ? <PlayIcon /> : <PauseIcon />}
+  >
+    {paused ? 'Resume' : 'Pause'}
+  </DashboardCardButtonLink>
+);
+
 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}
-          className="co-activity-card__recent-actions"
-          icon={paused ? <PlayIcon /> : <PauseIcon />}
-        >
-          {paused ? 'Resume' : 'Pause'}
-        </DashboardCardButtonLink>
+        <PauseButton paused={paused} togglePause={togglePause} />
       </div>
       <RecentEventsBodyContent {...props} paused={paused} setPaused={setPaused} />
     </>
@@ -214,3 +218,8 @@ type ActivityProps = {
   timestamp?: Date;
   children: React.ReactNode;
 };
+
+type PauseButtonProps = {
+  paused: boolean;
+  togglePause: () => void;
+};
diff --git a/...end/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-activity.scss b/...end/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-activity.scss
@@ -0,0 +1,3 @@
+.kubevirt-activity-card__actions {
+  --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--md);
+}
diff --git a/...tend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-activity.tsx b/...tend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-activity.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { CardActions } from '@patternfly/react-core';
 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, {
-  DashboardCardButtonLink,
-} from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardLink';
+import DashboardCardLink from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardLink';
 import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
 import ActivityBody, {
   RecentEventsBodyContent,
+  PauseButton,
 } from '@console/shared/src/components/dashboard/activity-card/ActivityBody';
 import { getName, getNamespace } from '@console/shared';
 import { resourcePath, FirehoseResource, FirehoseResult } from '@console/internal/components/utils';
@@ -22,6 +22,8 @@ import { getVmEventsFilters } from '../../../selectors/event';
 import { VMDashboardContext } from '../../vms/vm-dashboard-context';
 import { VMILikeEntityKind } from '../../../types/vmLike';
 
+import './vm-activity.scss';
+
 const combinedVmFilter = (vm: VMILikeEntityKind): EventFilterFuncion => (event) =>
   getVmEventsFilters(vm).some((filter) => filter(event.involvedObject));
 
@@ -70,10 +72,10 @@ export const VMActivityCard: React.FC = () => {
     <DashboardCard gradient>
       <DashboardCardHeader>
         <DashboardCardTitle>Events</DashboardCardTitle>
-        <DashboardCardLink to={viewEventsLink}>View all</DashboardCardLink>
-        <DashboardCardButtonLink onClick={togglePause}>
-          {paused ? 'Unpause' : 'Pause'}
-        </DashboardCardButtonLink>
+        <CardActions className="kubevirt-activity-card__actions">
+          <DashboardCardLink to={viewEventsLink}>View all</DashboardCardLink>
+          <PauseButton paused={paused} togglePause={togglePause} />
+        </CardActions>
       </DashboardCardHeader>
       <DashboardCardBody>
         <ActivityBody>