Add legend toggle to header.

awx/ui/src/screens/TopologyView/Header.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { t } from '@lingui/macro';
+import {
+  PageSection,
+  PageSectionVariants,
+  Switch,
+  Title,
+  Tooltip,
+} from '@patternfly/react-core';
+
+const Header = ({ title, handleSwitchToggle, toggleState }) => {
+  const { light } = PageSectionVariants;
+
+  return (
+    <PageSection variant={light}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          style={{
+            minHeight: '31px',
+          }}
+        >
+          <Title size="2xl" headingLevel="h2" data-cy="screen-title">
+            {title}
+          </Title>
+        </div>
+        <div>
+          <Tooltip content={t`Toggle legend`} position="top">
+            <Switch
+              id="legend-toggle-switch"
+              label={t`Legend`}
+              isChecked={toggleState}
+              onChange={() => handleSwitchToggle(!toggleState)}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </PageSection>
+  );
+};
+
+Header.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default Header;

awx/ui/src/screens/TopologyView/MeshGraph.js

@@ -8,7 +8,7 @@ import Legend from './Legend';
 import Tooltip from './Tooltip';
 
 // function MeshGraph({ data }) {
-function MeshGraph() {
+function MeshGraph({ showLegend }) {
   const [isNodeSelected, setIsNodeSelected] = useState(false);
   const [selectedNode, setSelectedNode] = useState(null);
   const [nodeDetail, setNodeDetail] = useState(null);
@@ -517,7 +517,7 @@ function MeshGraph() {
 
   return (
     <div id="chart" style={{ position: 'relative' }}>
-      <Legend />
+      {showLegend && <Legend />}
       <Tooltip
         isNodeSelected={isNodeSelected}
         renderNodeIcon={renderNodeIcon}

awx/ui/src/screens/TopologyView/TopologyView.js

@@ -1,12 +1,13 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import { t } from '@lingui/macro';
-import ScreenHeader from 'components/ScreenHeader/ScreenHeader';
 import { PageSection, Card, CardBody } from '@patternfly/react-core';
 import useRequest from 'hooks/useRequest';
 import { MeshAPI } from 'api';
+import Header from './Header';
 import MeshGraph from './MeshGraph';
 
 function TopologyView() {
+  const [showLegend, setShowLegend] = useState(true);
   const {
     isLoading,
     result: { meshData },
@@ -26,11 +27,18 @@ function TopologyView() {
   }, [fetchMeshVisualizer]);
   return (
     <>
-      <ScreenHeader breadcrumbConfig={{ '/topology_view': t`Topology View` }} />
-
+      <Header
+        title={t`Topology View`}
+        handleSwitchToggle={setShowLegend}
+        toggleState={showLegend}
+      />
       <PageSection>
         <Card>
-          <CardBody>{!isLoading && <MeshGraph data={meshData} />}</CardBody>
+          <CardBody>
+            {!isLoading && (
+              <MeshGraph data={meshData} showLegend={showLegend} />
+            )}
+          </CardBody>
         </Card>
       </PageSection>
     </>