Skip to content

Commit

Permalink
Add topology sidebar to Operator Backed Service
Browse files Browse the repository at this point in the history
  • Loading branch information
rottencandy committed Jul 24, 2020
1 parent ca7021b commit 1e044eb
Show file tree
Hide file tree
Showing 8 changed files with 123 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ import { updateModelFromFilters } from './data-transforms';
import { setSupportedTopologyFilters, setTopologyFilters } from './redux/action';
import { odcElementFactory } from './elements';
import KnativeTopologyEdgePanel from '@console/knative-plugin/src/components/overview/KnativeTopologyEdgePanel';
import TopologyOperatorBackedPanel from './operators/TopologyOperatorBackedPanel';

export const FILTER_ACTIVE_CLASS = 'odc-m-filter-active';

Expand Down Expand Up @@ -444,7 +445,11 @@ const Topology: React.FC<ComponentProps> = ({
return <TopologyHelmWorkloadPanel item={selectedEntity.getData() as TopologyDataObject} />;
}
if (selectedEntity.getType() === TYPE_OPERATOR_BACKED_SERVICE) {
return null;
return (
<TopologyOperatorBackedPanel
item={selectedEntity.getData() as TopologyDataObject<string>}
/>
);
}
if (selectedEntity.getType() === TYPE_VIRTUAL_MACHINE) {
return <TopologyVmPanel vmNode={selectedEntity} />;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import * as React from 'react';
import { ResourceLink } from '@console/internal/components/utils';
import { K8sResourceKind, referenceFor, modelFor } from '@console/internal/module/k8s';

type TopologyHelmReleaseResourceItemProps = {
type TopologyGroupResourceItemProps = {
item: K8sResourceKind;
releaseNamespace: string;
};

const TopologyHelmReleaseResourceItem: React.FC<TopologyHelmReleaseResourceItemProps> = ({
const TopologyGroupResourceItem: React.FC<TopologyGroupResourceItemProps> = ({
item,
releaseNamespace,
}) => {
Expand All @@ -29,4 +29,4 @@ const TopologyHelmReleaseResourceItem: React.FC<TopologyHelmReleaseResourceItemP
);
};

export default TopologyHelmReleaseResourceItem;
export default TopologyGroupResourceItem;
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from 'react';
import { K8sResourceKind } from '@console/internal/module/k8s';
import TopologyHelmReleaseResourceItem from './TopologyHelmReleaseResourceItem';
import TopologyGroupResourceItem from './TopologyGroupResourceItem';

type TopologyHelmReleaseResourceListProps = {
type TopologyGroupResourceListProps = {
resources: K8sResourceKind[];
releaseNamespace: string;
};

const TopologyHelmReleaseResourceList: React.FC<TopologyHelmReleaseResourceListProps> = ({
const TopologyGroupResourceList: React.FC<TopologyGroupResourceListProps> = ({
resources,
releaseNamespace,
}) => {
Expand All @@ -16,7 +16,7 @@ const TopologyHelmReleaseResourceList: React.FC<TopologyHelmReleaseResourceListP
{resources
.sort((r1, r2) => r1.metadata.name.localeCompare(r2.metadata.name))
.map((resource) => (
<TopologyHelmReleaseResourceItem
<TopologyGroupResourceItem
key={resource.metadata.name}
item={resource}
releaseNamespace={releaseNamespace}
Expand All @@ -26,4 +26,4 @@ const TopologyHelmReleaseResourceList: React.FC<TopologyHelmReleaseResourceListP
);
};

export default TopologyHelmReleaseResourceList;
export default TopologyGroupResourceList;
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import * as React from 'react';
import { K8sResourceKind, modelFor, referenceFor } from '@console/internal/module/k8s';
import { SidebarSectionHeading } from '@console/internal/components/utils';
import TopologyHelmReleaseResourceList from './TopologyHelmReleaseResourceList';
import TopologyGroupResourceList from './TopologyGroupResourceList';

type TopologyHelmReleaseResourcesPanelProps = {
type TopologyGroupResourcesPanelProps = {
manifestResources: K8sResourceKind[];
releaseNamespace: string;
};

const TopologyHelmReleaseResourcesPanel: React.SFC<TopologyHelmReleaseResourcesPanelProps> = ({
const TopologyGroupResourcesPanel: React.SFC<TopologyGroupResourcesPanelProps> = ({
manifestResources,
releaseNamespace,
}) => {
Expand All @@ -22,24 +22,19 @@ const TopologyHelmReleaseResourcesPanel: React.SFC<TopologyHelmReleaseResourcesP
}, [])
.sort((a, b) => a.localeCompare(b));

const resourceLists = kinds.reduce((lists, kind) => {
return kinds.reduce((lists, kind) => {
const model = modelFor(kind);
const resources = manifestResources.filter((resource) => resource.kind === model.kind);
if (resources.length) {
lists.push(
<div key={model.kind}>
<SidebarSectionHeading text={model.labelPlural} />
<TopologyHelmReleaseResourceList
resources={resources}
releaseNamespace={releaseNamespace}
/>
<TopologyGroupResourceList resources={resources} releaseNamespace={releaseNamespace} />
</div>,
);
}
return lists;
}, []);

return <div className="overview__sidebar-pane-body">{resourceLists}</div>;
};

export default TopologyHelmReleaseResourcesPanel;
export default TopologyGroupResourcesPanel;
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import * as UIActions from '@console/internal/actions/ui';
import { Node } from '@patternfly/react-topology';
import HelmReleaseOverview from '../../helm/details/overview/HelmReleaseOverview';
import { helmReleaseActions } from './actions/helmReleaseActions';
import TopologyHelmReleaseResourcesPanel from './TopologyHelmReleaseResourcesPanel';
import TopologyGroupResourcesPanel from '../components/TopologyGroupResourcesPanel';
import TopologyHelmReleaseNotesPanel from './TopologyHelmReleaseNotesPanel';

type PropsFromState = {
Expand Down Expand Up @@ -58,10 +58,12 @@ export const ConnectedTopologyHelmReleasePanel: React.FC<TopologyHelmReleasePane

const resourcesComponent = () =>
manifestResources ? (
<TopologyHelmReleaseResourcesPanel
manifestResources={manifestResources}
releaseNamespace={namespace}
/>
<div className="overview__sidebar-pane-body">
<TopologyGroupResourcesPanel
manifestResources={manifestResources}
releaseNamespace={namespace}
/>
</div>
) : null;

const releaseNotesComponent = () => <TopologyHelmReleaseNotesPanel releaseNotes={releaseNotes} />;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow, mount } from 'enzyme';
import { SidebarSectionHeading, StatusBox } from '@console/internal/components/utils';
import { mockHelmReleaseNode, mockManifest, mockReleaseNotes } from './mockData';
import TopologyHelmReleaseResourcesPanel from '../TopologyHelmReleaseResourcesPanel';
import TopologyGroupResourcesPanel from '../../components/TopologyGroupResourcesPanel';
import TopologyHelmReleaseNotesPanel from '../TopologyHelmReleaseNotesPanel';
import { SyncMarkdownView } from '@console/internal/components/markdown-view';
import { ConnectedTopologyHelmReleasePanel } from '../TopologyHelmReleasePanel';
Expand All @@ -13,7 +13,7 @@ describe('TopologyHelmReleasePanel', () => {
const component = mount(
<ConnectedTopologyHelmReleasePanel helmRelease={mockHelmReleaseNode} />,
);
expect(component.find(TopologyHelmReleaseResourcesPanel)).toHaveLength(1);
expect(component.find(TopologyGroupResourcesPanel)).toHaveLength(1);
});

it('should render the details tab when specified', () => {
Expand Down Expand Up @@ -44,7 +44,7 @@ describe('TopologyHelmReleaseResourcesPanel', () => {

it('should render the correct number of resource categories', () => {
const component = shallow(
<TopologyHelmReleaseResourcesPanel
<TopologyGroupResourcesPanel
manifestResources={manifestResources}
releaseNamespace="mock-ns"
/>,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import * as React from 'react';
import {
ResourceIcon,
ResourceLink,
SimpleTabNav,
ResourceSummary,
SectionHeading,
} from '@console/internal/components/utils';
import { referenceFor } from '@console/internal/module/k8s';
import TopologyOperatorBackedResources from './TopologyOperatorBackedResources';
import { TopologyDataObject } from '../topology-types';

export type TopologyOperatorBackedPanelProps = {
item: TopologyDataObject<string>;
};

const TopologyOperatorBackedPanel: React.FC<TopologyOperatorBackedPanelProps> = ({ item }) => {
const {
name,
resources: { obj },
} = item;

const ResourcesSection = () => <TopologyOperatorBackedResources item={item} />;
const DetailsSection = () => (
<div className="co-m-pane__body">
<SectionHeading text="Operator Details" />
<ResourceSummary resource={obj} />
</div>
);

return (
<div className="overview__sidebar-pane resource-overview">
<div className="overview__sidebar-pane-head resource-overview__heading">
<h1 className="co-m-pane__heading">
<div className="co-m-pane__name co-resource-item">
<ResourceIcon kind="Operator" />
<ResourceLink
kind={referenceFor(obj)}
name={name}
namespace={obj.metadata.namespace}
hideIcon
/>
</div>
</h1>
</div>
<SimpleTabNav
tabs={[
{ name: 'Details', component: DetailsSection },
{ name: 'Resources', component: ResourcesSection },
]}
tabProps={null}
additionalClassNames="co-m-horizontal-nav__menu--within-sidebar co-m-horizontal-nav__menu--within-overview-sidebar"
/>
</div>
);
};

export default TopologyOperatorBackedPanel;
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import * as React from 'react';
import OperatorBackedOwnerReferences from '@console/internal/components/utils';
import { TopologyDataObject } from '../topology-types';
import TopologyGroupResourcesPanel from '../components/TopologyGroupResourcesPanel';
import { OverviewItem } from '@console/shared';

type TopologyOperatorBackedResourcesProps = {
item: TopologyDataObject;
};

const TopologyOperatorBackedResources: React.FC<TopologyOperatorBackedResourcesProps> = ({
item,
}) => {
const { groupResources = [] } = item;
const finalRes = groupResources.map((val) => val.resources.obj);
const ownerReferencedResources = groupResources.reduce(
(acc, val) => {
acc.obj = { ...val.resources.obj, ...acc.obj };
return acc;
},
{ obj: {}, isOperatorBackedService: true },
);

return (
<div className="overview__sidebar-pane-body">
<OperatorBackedOwnerReferences item={ownerReferencedResources as OverviewItem} />
<TopologyGroupResourcesPanel
manifestResources={finalRes}
releaseNamespace={item.resources.obj.metadata.namespace}
/>
</div>
);
};

export default TopologyOperatorBackedResources;

0 comments on commit 1e044eb

Please sign in to comment.