Skip to content

Commit

Permalink
rebase with Topology refactor PR and handles changes based on it
Browse files Browse the repository at this point in the history
  • Loading branch information
@invincibleJai
invincibleJai committed Jun 25, 2020
1 parent bac3f20 commit 3f29b53
Show file tree
Hide file tree
Showing 17 changed files with 183 additions and 198 deletions.
2 changes: 1 addition & 1 deletion frontend/packages/dev-console/src/components/topology/Topology.tsx
View file
Expand Up @@ -451,7 +451,7 @@ const Topology: React.FC<ComponentProps> = ({
if (isEdge(selectedEntity)) {
if (selectedEntity.getType() === TYPE_EVENT_PUB_SUB_LINK) {
const itemResources = selectedEntity.getData();
return <KnativeResourceOverviewPage item={itemResources.data.resources} />;
return <KnativeResourceOverviewPage item={itemResources.resources} />;
}
return <ConnectedTopologyEdgePanel edge={selectedEntity as BaseEdge} model={filteredModel} />;
}
Expand Down
3 changes: 2 additions & 1 deletion frontend/packages/dev-console/src/components/topology/actions/edgeActions.ts
View file
Expand Up @@ -7,6 +7,7 @@ import {
TYPE_EVENT_SOURCE_LINK,
TYPE_KNATIVE_REVISION,
TYPE_KNATIVE_SERVICE,
TYPE_EVENT_PUB_SUB,
TYPE_REVISION_TRAFFIC,
} from '@console/knative-plugin/src/topology/const';
import { getTopologyResourceObject } from '../topology-utils';
Expand Down Expand Up @@ -68,7 +69,7 @@ export const edgeActions = (edge: Edge, nodes: Node[]): KebabOption[] => {
case TYPE_SERVICE_BINDING:
return false;
case TYPE_EVENT_SOURCE_LINK:
return n.getType() === TYPE_KNATIVE_SERVICE;
return n.getType() === TYPE_KNATIVE_SERVICE || n.getType() === TYPE_EVENT_PUB_SUB;
case TYPE_REVISION_TRAFFIC:
return false;
case TYPE_TRAFFIC_CONNECTOR:
Expand Down
4 changes: 3 additions & 1 deletion frontend/packages/knative-plugin/src/actions/sink-source.ts
View file
@@ -1,10 +1,12 @@
import { KebabOption } from '@console/internal/components/utils';
import { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
import { setSinkSourceModal } from '../components/modals';
import { EventingSubscriptionModel } from '../models';

export const setSinkSource = (model: K8sKind, source: K8sResourceKind): KebabOption => {
const label = model.kind === EventingSubscriptionModel.kind ? `Move ${model.kind}` : 'Move Sink';
return {
label: 'Move Sink',
label,
callback: () =>
setSinkSourceModal({
source,
Expand Down
27 changes: 17 additions & 10 deletions frontend/packages/knative-plugin/src/components/overview/EventPubSubResources.tsx
View file
Expand Up @@ -11,7 +11,11 @@ type PubSubResourceOverviewListProps = {
};

type EventPubSubResourcesProps = {
item: OverviewItem;
item: OverviewItem & {
eventSources?: K8sResourceKind[];
eventingsubscription?: K8sResourceKind[];
connections?: K8sResourceKind[];
};
};

const PubSubResourceOverviewList: React.FC<PubSubResourceOverviewListProps> = ({
Expand Down Expand Up @@ -39,20 +43,23 @@ const PubSubResourceOverviewList: React.FC<PubSubResourceOverviewListProps> = ({
);

const EventPubSubResources: React.FC<EventPubSubResourcesProps> = ({ item }) => {
const { obj } = item;
const sinkServices = _.get(item, 'ksservices', []);
const sinkSources = _.get(item, 'eventSources', []);
const sinkSubscription = _.get(item, 'eventingsubscription', []);
const sinkConnections = _.get(item, 'connections', []);
const {
obj,
ksservices = [],
eventSources = [],
eventingsubscription = [],
connections = [],
} = item;

switch (obj.kind) {
case EventingSubscriptionModel.kind:
return <PubSubResourceOverviewList items={sinkConnections} title="Connections" />;
return <PubSubResourceOverviewList items={connections} title="Connections" />;
default:
return (
<>
<PubSubResourceOverviewList items={sinkServices} title="Knative Service" />
<PubSubResourceOverviewList items={sinkSources} title="Event Source" />
<PubSubResourceOverviewList items={sinkSubscription} title="Subscription" />
<PubSubResourceOverviewList items={ksservices} title="Knative Service" />
<PubSubResourceOverviewList items={eventSources} title="Event Source" />
<PubSubResourceOverviewList items={eventingsubscription} title="Subscription" />
</>
);
}
Expand Down
39 changes: 25 additions & 14 deletions frontend/packages/knative-plugin/src/components/sink-source/SinkSource.tsx
View file
Expand Up @@ -2,6 +2,8 @@ import * as React from 'react';
import { Formik, FormikValues, FormikHelpers } from 'formik';
import { K8sResourceKind, k8sUpdate, referenceFor, modelFor } from '@console/internal/module/k8s';
import SinkSourceModal from './SinkSourceModal';
import { knativeServingResourcesServices } from '../../utils/get-knative-resources';
import { getDynamicChannelResourceList } from '../../utils/fetch-dynamic-eventsources-utils';

export interface SinkSourceProps {
source: K8sResourceKind;
Expand All @@ -11,27 +13,28 @@ export interface SinkSourceProps {

const SinkSource: React.FC<SinkSourceProps> = ({ source, cancel, close }) => {
const {
kind: sourceKind,
metadata: { namespace, name },
spec: {
sink: {
ref: { name: sinkName, apiVersion, kind },
},
},
spec,
} = source;

const isPubSubSink = !!spec?.subscriber;
const { name: sinkName, apiVersion, kind } = isPubSubSink
? spec?.subscriber?.ref
: spec?.sink?.ref;
const initialValues = {
sink: {
ref: {
apiVersion: apiVersion || '',
kind: kind || '',
name: sinkName || '',
},
ref: {
apiVersion: apiVersion || '',
kind: kind || '',
name: sinkName || '',
},
};
const handleSubmit = (values: FormikValues, action: FormikHelpers<FormikValues>) => {
const updatePayload = {
...source,
...(sinkName !== values?.sink?.ref?.name && { spec: { ...source.spec, ...values } }),
...(sinkName !== values?.ref?.name &&
!isPubSubSink && { spec: { ...source.spec, sink: { ...values } } }),
...(sinkName !== values?.ref?.name &&
isPubSubSink && { spec: { ...source.spec, subscriber: { ...values } } }),
};
k8sUpdate(modelFor(referenceFor(source)), updatePayload)
.then(() => {
Expand All @@ -44,6 +47,13 @@ const SinkSource: React.FC<SinkSourceProps> = ({ source, cancel, close }) => {
});
};

const resourcesDropdownField = knativeServingResourcesServices(namespace);
let labelTitle = `Move ${sourceKind}`;
if (!isPubSubSink) {
resourcesDropdownField.push(...getDynamicChannelResourceList(namespace));
labelTitle = 'Move Sink';
}

return (
<Formik
initialValues={initialValues}
Expand All @@ -54,8 +64,9 @@ const SinkSource: React.FC<SinkSourceProps> = ({ source, cancel, close }) => {
{(formikProps) => (
<SinkSourceModal
{...formikProps}
namespace={namespace}
resourceName={name}
resourceDropdown={resourcesDropdownField}
labelTitle={labelTitle}
cancel={cancel}
/>
)}
Expand Down
37 changes: 17 additions & 20 deletions frontend/packages/knative-plugin/src/components/sink-source/SinkSourceModal.tsx
View file
Expand Up @@ -7,21 +7,22 @@ import {
ModalSubmitFooter,
} from '@console/internal/components/factory/modal';
import { ResourceDropdownField } from '@console/shared';
import { FirehoseResource } from '@console/internal/components/utils';
import FormSection from '@console/dev-console/src/components/import/section/FormSection';
import { knativeServingResourcesServices } from '../../utils/get-knative-resources';
import { getDynamicChannelResourceList } from '../../utils/fetch-dynamic-eventsources-utils';

export interface SinkSourceModalProps {
namespace: string;
resourceName: string;
resourceDropdown: FirehoseResource[];
labelTitle: string;
cancel?: () => void;
}

type Props = FormikProps<FormikValues> & SinkSourceModalProps;

const SinkSourceModal: React.FC<Props> = ({
namespace,
resourceName,
resourceDropdown,
labelTitle,
handleSubmit,
cancel,
isSubmitting,
Expand All @@ -37,37 +38,33 @@ const SinkSourceModal: React.FC<Props> = ({
(selectedValue, target) => {
const modelResource = target?.props?.model;
if (selectedValue) {
setFieldTouched('sink.ref.name', true);
setFieldValue('sink.ref.name', selectedValue);
setFieldTouched('ref.name', true);
setFieldValue('ref.name', selectedValue);
if (modelResource) {
const { apiGroup, apiVersion, kind } = modelResource;
const sinkApiversion = `${apiGroup}/${apiVersion}`;
setFieldValue('sink.ref.apiVersion', sinkApiversion);
setFieldTouched('sink.ref.apiVersion', true);
setFieldValue('sink.ref.kind', kind);
setFieldTouched('sink.ref.kind', true);
setFieldValue('ref.apiVersion', sinkApiversion);
setFieldTouched('ref.apiVersion', true);
setFieldValue('ref.kind', kind);
setFieldTouched('ref.kind', true);
}
validateForm();
}
},
[setFieldValue, setFieldTouched, validateForm],
);
const dirty = values?.sink?.ref?.name !== initialValues.sink.ref.name;
const resourcesDropdownField = [
...knativeServingResourcesServices(namespace),
...getDynamicChannelResourceList(namespace),
];
const dirty = values?.ref?.name !== initialValues.ref.name;
return (
<form className="modal-content modal-content--no-inner-scroll" onSubmit={handleSubmit}>
<ModalTitle>Move Sink</ModalTitle>
<ModalTitle>{labelTitle}</ModalTitle>
<ModalBody>
<p>
Select a sink to move the event source <strong>{resourceName}</strong> to
Connects <strong>{resourceName}</strong> to
</p>
<FormSection fullWidth>
<ResourceDropdownField
name="sink.ref.name"
resources={resourcesDropdownField}
name="ref.name"
resources={resourceDropdown}
dataSelector={['metadata', 'name']}
fullWidth
required
Expand All @@ -76,7 +73,7 @@ const SinkSourceModal: React.FC<Props> = ({
autocompleteFilter={autocompleteFilter}
onChange={onSinkChange}
autoSelect
selectedKey={values?.sink?.ref?.name}
selectedKey={values?.ref?.name}
/>
</FormSection>
</ModalBody>
Expand Down
3 changes: 1 addition & 2 deletions frontend/packages/knative-plugin/src/components/sink-source/__tests__/SinkSource.spec.tsx
View file
Expand Up @@ -18,13 +18,12 @@ describe('SinkSource', () => {
it('should render Formik with proper initial values', () => {
const formikForm = eventSourceForm.find(Formik);
expect(formikForm).toHaveLength(1);
expect(formikForm.get(0).props.initialValues.sink.ref.name).toBe('wss-event-display');
expect(formikForm.get(0).props.initialValues.ref.name).toBe('wss-event-display');
});

it('should render Formik child with proper props', () => {
const formikFormRender = eventSourceForm.find(Formik).get(0).props;
expect(formikFormRender.children).toHaveLength(1);
expect(formikFormRender.children().props.namespace).toBe('testproject3');
expect(formikFormRender.children().props.resourceName).toBe('bind-wss');
});
});
27 changes: 13 additions & 14 deletions ...end/packages/knative-plugin/src/components/sink-source/__tests__/SinkSourceModal.spec.tsx
View file
Expand Up @@ -16,21 +16,20 @@ describe('SinkSourceModal Form', () => {
let formProps: SinkSourceModalProps;
let sinkSourceModalWrapper: ShallowWrapper<SinkSourceModalProps>;
const formValues = {
sink: {
ref: {
apiVersion: `${ServiceModel.apiGroup}/${ServiceModel.apiVersion}`,
kind: ServiceModel.kind,
name: 'event-greeter',
},
ref: {
apiVersion: `${ServiceModel.apiGroup}/${ServiceModel.apiVersion}`,
kind: ServiceModel.kind,
name: 'event-greeter',
},
};
beforeEach(() => {
formProps = {
...formikFormProps,
values: formValues,
namespace: 'myapp',
resourceName: 'myappes',
initialValues: formValues,
resourceDropdown: [],
labelTitle: 'Move Sink',
};
sinkSourceModalWrapper = shallow(<SinkSourceModal {...formProps} />);
});
Expand All @@ -43,7 +42,7 @@ describe('SinkSourceModal Form', () => {
it('should render ResourceDropdownField for service', () => {
const serviceDropDown = sinkSourceModalWrapper.find(ResourceDropdownField);
expect(serviceDropDown).toHaveLength(1);
expect(serviceDropDown.get(0).props.name).toBe('sink.ref.name');
expect(serviceDropDown.get(0).props.name).toBe('ref.name');
expect(serviceDropDown.get(0).props.selectedKey).toBe('event-greeter');
});

Expand All @@ -67,12 +66,10 @@ describe('SinkSourceModal Form', () => {

it('Save should be enabled if value is changed', () => {
const sinkValues = {
sink: {
ref: {
apiVersion: `${ServiceModel.apiGroup}/${ServiceModel.apiVersion}`,
kind: ServiceModel.kind,
name: 'event-greeter-new',
},
ref: {
apiVersion: `${ServiceModel.apiGroup}/${ServiceModel.apiVersion}`,
kind: ServiceModel.kind,
name: 'event-greeter-new',
},
};
formProps = {
Expand All @@ -81,6 +78,8 @@ describe('SinkSourceModal Form', () => {
...formProps.values,
...sinkValues,
},
resourceDropdown: [],
labelTitle: 'Move Sink',
};
sinkSourceModalWrapper = shallow(<SinkSourceModal {...formProps} />);
const modalSubmitFooter = sinkSourceModalWrapper.find(ModalSubmitFooter);
Expand Down
23 changes: 11 additions & 12 deletions frontend/packages/knative-plugin/src/topology/components/knativeComponentFactory.ts
View file
Expand Up @@ -104,18 +104,17 @@ export const getKnativeComponentFactory = (): ComponentFactory => {
),
);
case TYPE_EVENT_PUB_SUB:
return withCreateConnector(
createConnectorCallback(),
CreateConnector,
)(
withDndDrop<
any,
any,
{ droppable?: boolean; hover?: boolean; canDrop?: boolean; dropTarget?: boolean },
NodeComponentProps
>(pubSubDropTargetSpec)(
withEditReviewAccess('update')(
withSelection(false, true)(withContextMenu(knativeContextMenu)(EventingPubSubNode)),
return withEditReviewAccess('update')(
withDragNode(nodeDragSourceSpec(type))(
withSelection(
false,
true,
)(
withContextMenu(knativeContextMenu)(
withDndDrop<any, any, {}, NodeComponentProps>(pubSubDropTargetSpec)(
EventingPubSubNode,
),
),
),
),
);
Expand Down
6 changes: 1 addition & 5 deletions frontend/packages/knative-plugin/src/topology/components/knativeComponentUtils.ts
View file
Expand Up @@ -143,11 +143,7 @@ export const eventingPubSubLinkDragSourceSpec = (): DragSourceSpec<
dropResult &&
canDropPubSubSinkOnNode(monitor.getOperation().type, props.element, dropResult)
) {
createSinkPubSubConnection(
props.element.getData(),
props.element.getSource(),
dropResult,
).catch((error) => {
createSinkPubSubConnection(props.element.getData(), dropResult).catch((error) => {
errorModal({
title: 'Error while sink',
error: error.message,
Expand Down
12 changes: 10 additions & 2 deletions frontend/packages/knative-plugin/src/topology/components/nodes/EventingPubSubNode.scss
View file
Expand Up @@ -20,11 +20,19 @@
stroke-width: 2px;
stroke: $selected-stroke-color;
}
&.is-highlight &__bg {
fill: $group-node-fill-color;
stroke: $interactive-stroke-color;
}
&.is-dropTarget &__bg {
fill: $interactive-fill-color;
stroke: $interactive-stroke-color;
}
}

.odc-m-drag-active,
.odc-m-filter-active {
.odc-event-source {
.odc-eventing-pubsub {
opacity: $de-emphasize-opacity;
&.is-dragging {
opacity: 1;
Expand All @@ -33,7 +41,7 @@
}

.odc-m-filter-active:not(.odc-m-drag-active) {
.odc-event-source {
.odc-eventing-pubsub {
&.is-filtered {
opacity: 1;
}
Expand Down

0 comments on commit 3f29b53

Please sign in to comment.