fix: all feedback incorporated need to insert pngs in overview and empty state

Author: parthivrh

packages/react-core/src/demos/Animations/Animations.md

@@ -32,6 +32,16 @@ import { AnimationsStartTourModal } from '@patternfly/react-core/dist/esm/demos/
 import { AnimationsEndTourModal } from '@patternfly/react-core/dist/esm/demos/Animations/AnimationsEndTourModal';
 import { AnimationsCreateDatabaseForm } from '@patternfly/react-core/dist/esm/demos/Animations/AnimationsCreateDatabaseForm';
 import { GuidedTourProvider, useGuidedTour } from '@patternfly/react-core/dist/esm/demos/Animations/GuidedTourContext';
+import BoltIcon from '@patternfly/react-icons/dist/esm/icons/bolt-icon';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
+import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
+import openshiftLogo from '../assets/Summit-collage-depoying-openshift-product-icon-RH.png'
+
+
+
 
 ## Demos
 

packages/react-core/src/demos/Animations/AnimationsCreateDatabaseForm.tsx

@@ -8,8 +8,6 @@ import {
   FormHelperText,
   FormAlert,
   FormGroupLabelHelp,
-  FormSelect,
-  FormSelectOption,
   HelperText,
   HelperTextItem,
   TextInput,
@@ -26,8 +24,6 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
   // State variables
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
-  const [version, setVersion] = useState('');
-  const [selectedTimeZone, setSelectedTimeZone] = useState('');
   const [password, setPassword] = useState('');
   // Submit state variables
   const [isSuccess, setIsSuccess] = useState(false);
@@ -43,7 +39,6 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
   const [isNameValid, setIsNameValid] = useState('default');
   const [isPasswordValid, setIsPasswordValid] = useState('default');
   const [isEmailValid, setIsEmailValid] = useState('default');
-  const [isTimeZoneValid, setIsTimeZoneValid] = useState('default');
 
   const handleNameChange = (_event: React.FormEvent<HTMLInputElement>, name: string) => {
     setName(name);
@@ -53,22 +48,13 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
     setEmail(email);
   };
 
-  const handleVersionChange = (_event: React.FormEvent<HTMLInputElement>, version: string) => {
-    setVersion(version);
-  };
-
   const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, password: string) => {
     setPassword(password);
   };
 
-  const handleTimeZoneChange = (event: React.FormEvent<HTMLSelectElement>, value: string) => {
-    setSelectedTimeZone(value);
-  };
-
   const validateName = (value: string) => /^[a-z0-9-]+$/.test(value) && value.length > 0;
   const validatePassword = (value: string) => value.length >= 12 && /[0-9]/.test(value) && /[A-Z]/.test(value);
   const validateEmail = (value: string) => value.includes('@');
-  const validateTimeZone = (value: string) => value !== '';
 
   const handleNameBlur = () => {
     setIsNameValid(validateName(name) ? 'success' : 'error');
@@ -82,23 +68,16 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
     setIsEmailValid(validateEmail(email) ? 'success' : 'error');
   };
 
-  const handleTimeZoneBlur = () => {
-    setIsTimeZoneValid(validateTimeZone(selectedTimeZone) ? 'success' : 'error');
-  };
-
   const handleSubmit = () => {
     const isNameCurrentValid = validateName(name);
     const isPasswordCurrentValid = validatePassword(password);
     const isEmailCurrentValid = validateEmail(email);
-    const isTimeZoneCurrentValid = validateTimeZone(selectedTimeZone);
 
     setIsNameValid(isNameCurrentValid ? 'success' : 'error');
     setIsPasswordValid(isPasswordCurrentValid ? 'success' : 'error');
     setIsEmailValid(isEmailCurrentValid ? 'success' : 'error');
-    setIsTimeZoneValid(isTimeZoneCurrentValid ? 'success' : 'error');
 
-    const allFieldsValid =
-      isNameCurrentValid && isPasswordCurrentValid && isEmailCurrentValid && isTimeZoneCurrentValid;
+    const allFieldsValid = isNameCurrentValid && isPasswordCurrentValid && isEmailCurrentValid;
 
     setActionCompleted(true);
     setIsSuccess(allFieldsValid);
@@ -108,7 +87,6 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
     setIsNameValid('default');
     setIsPasswordValid('default');
     setIsEmailValid('default');
-    setIsTimeZoneValid('default');
   };
 
   return renderTourStepElement(
@@ -190,38 +168,6 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
           </FormHelperText>
         )}
       </FormGroup>
-      <FormGroup label="Database version" fieldId="simple-form-version-01">
-        <TextInput
-          type="text"
-          id="simple-form-version-01"
-          name="simple-form-version-01"
-          placeholder="e.g. 12c"
-          value={version}
-          onChange={handleVersionChange}
-        />
-      </FormGroup>
-      <FormGroup isRequired label="Time zone" fieldId="timezone-select">
-        <FormSelect
-          id="timezone-select"
-          value={selectedTimeZone}
-          onChange={handleTimeZoneChange}
-          aria-label="Select time zone"
-          onBlur={handleTimeZoneBlur}
-          validated={isTimeZoneValid as validationStatus}
-        >
-          <FormSelectOption isPlaceholder value="" label="Select a time zone" />
-          <FormSelectOption value="Eastern" label="Eastern" />
-          <FormSelectOption value="Central" label="Central" />
-          <FormSelectOption value="Pacific" label="Pacific" />
-        </FormSelect>
-        {isTimeZoneValid === 'error' && (
-          <FormHelperText>
-            <HelperText>
-              <HelperTextItem variant={isTimeZoneValid as validationStatus}>Please select a time zone</HelperTextItem>
-            </HelperText>
-          </FormHelperText>
-        )}
-      </FormGroup>
       <FormGroup label="Admin password" isRequired fieldId="simple-form-password-01">
         <TextInput
           isRequired

packages/react-core/src/demos/Animations/AnimationsOverview.tsx

@@ -1,4 +1,4 @@
-import { Fragment, FunctionComponent } from 'react';
+import { Fragment, FunctionComponent, useState } from 'react';
 import {
   Button,
   Content,
@@ -15,148 +15,107 @@ import {
   Divider,
   Grid,
   GridItem,
-  Icon,
-  Label,
   PageSection,
   Title
 } from '../..';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-import PowerOffIcon from '@patternfly/react-icons/dist/esm/icons/power-off-icon';
-import PortIcon from '@patternfly/react-icons/dist/esm/icons/port-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import AutomationIcon from '@patternfly/react-icons/dist/esm/icons/automation-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import MultiContentCard from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard';
-import AnimationsOverviewCardStatus from './AnimationsOverviewCardStatus';
-import AnimationsOverviewEventsCard from './AnimationsOverviewEventsCard';
+import AnimationsOverviewClusterInventory from './AnimationsOverviewClusterInventory';
+import AnimationsOverviewNetworkActivity from './AnimationsOverviewNetworkActivity';
+import AnimationsOverviewStorage from './AnimationsOverviewStorage';
+import AnimationsOverviewMemoryUtilization from './AnimationsOverviewMemoryUtilization';
+import openshiftLogo from './assets/Summit-collage-depoying-openshift-product-icon-RH.png';
+
+interface AnimationsOverviewProps {
+  recentActivityCard?: React.ReactNode;
+}
+
+export const AnimationsOverview: FunctionComponent<AnimationsOverviewProps> = ({ recentActivityCard }) => {
+  const [displayMultiContentCard, setDisplayMultiContentCard] = useState(true);
+
+  const handleCloseMultiContentCard = () => {
+    setDisplayMultiContentCard(false);
+  };
 
-export const AnimationsOverview: FunctionComponent = () => {
   const cards = [
     // Card 1: Performance
     <Card isFullHeight isPlain key="card-1">
       <CardHeader>
-        <Content>
-          <Label variant="outline" color="blue" icon={<PortIcon />}>
-            Performance
-          </Label>
-        </Content>
+        <Content component={ContentVariants.h3}>Animations</Content>
       </CardHeader>
       <CardBody>
         <Content component={ContentVariants.p} className="pf-v6-u-mb-sm">
-          Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and
-          issues with system performance
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <a href="#">378 systems</a>
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <Label status="danger" variant="outline">
-            Incident
-          </Label>
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <Icon size="md" isInline>
-            <PowerOffIcon />
-          </Icon>
-          <span>
-            {' '}
-            System reboot <b>is not</b> required
-          </span>
+          Animations are a new way to interact with your data. They are a way to visualize your data in a way that is
+          easy to understand and use.
         </Content>
       </CardBody>
       <CardFooter>
         <Button variant="link" icon={<ArrowRightIcon />} iconPosition="end" isInline>
-          View pathway
+          They're everywhere
         </Button>
       </CardFooter>
     </Card>,
     // Card 2: Stability
     <Card isFullHeight isPlain key="card-2">
       <CardHeader>
-        <Content>
-          <Label variant="outline" color="blue" icon={<CubeIcon />}>
-            Stability
-          </Label>
-        </Content>
+        <Content component={ContentVariants.h3}>Network security</Content>
       </CardHeader>
       <CardBody>
         <Content component={ContentVariants.p} className="pf-v6-u-mb-sm">
-          Adjust your networking configuration to get ahead of network performance degradations and packet losses.
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <a href="#">211 systems</a>
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <Label status="danger" variant="outline">
-            Incident
-          </Label>
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <Icon size="md" isInline>
-            <PowerOffIcon />
-          </Icon>
-          <span>
-            {' '}
-            System reboot <b>is</b> required
-          </span>
+          Network security is a critical part of any organization's security posture.
         </Content>
       </CardBody>
       <CardFooter>
         <Button variant="link" icon={<ArrowRightIcon />} iconPosition="end" isInline>
-          View pathway
+          Security updates
         </Button>
       </CardFooter>
     </Card>,
     // Card 3: Availability
     <Card isFullHeight isPlain key="card-3">
       <CardHeader>
-        <Content>
-          <Label variant="outline" color="blue" icon={<AutomationIcon />}>
-            Availability
-          </Label>
-        </Content>
+        <Content component={ContentVariants.h3}>Cluster alerting</Content>
       </CardHeader>
       <CardBody>
         <Content component={ContentVariants.p} className="pf-v6-u-mb-sm">
-          Fine tune your Oracle DB configuration to improve database performance and avoid process failure
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <a href="#">166 systems</a>
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <Label status="danger" variant="outline">
-            Incident
-          </Label>
-        </Content>
-        <Content className="pf-v6-u-mb-md">
-          <Icon size="md" isInline>
-            <PowerOffIcon />
-          </Icon>
-          <span>
-            {' '}
-            System reboot <b>is not</b> required
-          </span>
+          Cluster alerting is a critical part of any organization's security posture.
         </Content>
       </CardBody>
       <CardFooter>
         <Button variant="link" icon={<ArrowRightIcon />} iconPosition="end" isInline>
-          View pathway
+          View logs
         </Button>
       </CardFooter>
+    </Card>,
+    // Card 4: Image
+    <Card isFullHeight isPlain key="card-4">
+      <CardBody>
+        <img src={openshiftLogo} alt="OpenShift Logo" />
+      </CardBody>
     </Card>
   ];
 
   return (
     <Fragment>
-      <PageSection id="overview">
-        <MultiContentCard isExpandable={true} cards={cards} toggleText="Improve recommended pathways" />
-      </PageSection>
+      {displayMultiContentCard && (
+        <PageSection id="overview">
+          <MultiContentCard
+            isExpandable={true}
+            withDividers
+            cards={cards}
+            toggleText="What's new in OpenShift?"
+            actions={<Button icon={<TimesIcon />} variant="plain" onClick={handleCloseMultiContentCard} />}
+          />
+        </PageSection>
+      )}
       <PageSection aria-label="Detail status events">
-        <Grid hasGutter xl2={4}>
-          <GridItem>
-            <Card>
+        <Grid hasGutter>
+          <GridItem span={3} rowSpan={4}>
+            <Card isFullHeight>
               <CardTitle>
                 <Title headingLevel="h4" size="xl">
-                  Details
+                  Cluster Details
                 </Title>
               </CardTitle>
               <CardBody>
@@ -191,12 +150,23 @@ export const AnimationsOverview: FunctionComponent = () => {
               </CardFooter>
             </Card>
           </GridItem>
-          <GridItem>
-            <AnimationsOverviewCardStatus />
+          <GridItem span={3} rowSpan={2}>
+            <AnimationsOverviewClusterInventory />
+          </GridItem>
+          <GridItem span={2} rowSpan={2}>
+            <AnimationsOverviewStorage />
+          </GridItem>
+          <GridItem span={4} rowSpan={2}>
+            <AnimationsOverviewMemoryUtilization />
           </GridItem>
-          <GridItem>
-            <AnimationsOverviewEventsCard />
+          <GridItem span={4} rowSpan={2}>
+            <AnimationsOverviewNetworkActivity />
           </GridItem>
+          {recentActivityCard && (
+            <GridItem span={5} rowSpan={2}>
+              {recentActivityCard}
+            </GridItem>
+          )}
         </Grid>
       </PageSection>
     </Fragment>