create topology side panel using dynamic plugin extensions #9306

sahil143 · 2021-06-21T13:09:56Z

fixes: https://issues.redhat.com/browse/ODC-5845

This PR creates the topology side panel to use the dynamic plugin extensions

frontend/packages/console-shared/src/utils/order-extensions.ts

sahil143 · 2021-06-21T13:42:32Z

/retest

christianvogt · 2021-06-24T20:43:02Z

frontend/packages/topology/src/components/side-bar/providers/useDetailsResourceLink.tsx

+      ? resurceLinkExtension
+          .sort((a, b) => a.properties.priority - b.properties.priority)
+          .find(({ properties: { link } }) => !!link(element))
+          .properties?.link?.(element)


link function will be called twice on the last match instead of only once.

yes, this is intentional as we need to find the callback that doesn't return null and undefined and get result from that callback.
Couldn't find a lodash utility that does this.

christianvogt · 2021-06-24T20:44:55Z

frontend/packages/topology/src/components/side-bar/components/SideBarHeading.tsx

+    <div className="overview__sidebar-pane-head resource-overview__heading">
+      <h1 className="co-m-pane__heading">
+        <div className="co-m-pane__name co-resource-item">{resourceLink}</div>
+        <div className="co-actions">{/** actions */}</div>


Is this a WIP for another PR? If so add a comment.

If not, you should make use of the actions extensions to populate a menu.

christianvogt · 2021-06-24T20:45:35Z

frontend/packages/topology/src/components/side-bar/components/SideBarHeading.scss

@@ -0,0 +1,3 @@
+.topology-sidebar-alert {


Follow conventions.

christianvogt · 2021-06-24T20:49:57Z

frontend/packages/topology/src/components/side-bar/components/SideBarAlerts.tsx

+  useResourceAlertsContent?: (element: GraphElement) => DetailsResourceAlertContent;
+  element: GraphElement;
+}> = ({ title, dismissible = false, useResourceAlertsContent, element }) => {
+  const [showAlert, setShowAlert] = React.useState<boolean>(true);


Don't we store these values in user settings for health checks?

christianvogt · 2021-06-24T20:53:59Z

frontend/packages/console-dynamic-plugin-sdk/src/extensions/topology-details.ts

@@ -103,4 +103,5 @@ export type DetailsResourceAlertContent = {
  content: React.Component | undefined;
  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
  actionLinks?: React.ReactNode;
+  onClose?: () => void;


Why is this added to the API?
I don't think an alert needs to know when it is dismissed.

christianvogt · 2021-06-24T20:56:44Z

frontend/packages/topology/src/components/side-bar/TopologyGroupResourcesPanel.tsx

-  linkForResource?: (obj: K8sResourceKind) => React.ReactElement;
+  linkForResource?: (obj) => React.ReactElement;


Why remove the type?

christianvogt · 2021-06-24T20:58:22Z

frontend/packages/topology/src/components/side-bar/TopologyGroupResourcesPanel.tsx

-        <div key={model.kind}>
+        <div key={'kind'}>


keys should be unique

christianvogt · 2021-06-24T21:00:20Z

frontend/packages/helm-plugin/src/topology/sidebar/release-panel/tab-sections.tsx

+import { TYPE_HELM_RELEASE } from '../../components/const';
+import TopologyHelmReleaseNotesPanel from '../../TopologyHelmReleaseNotesPanel';
+
+export const useHelmReleasePanelDetailsTabSection = (element: GraphElement) => {


We're going to have a lot of sections.
The first check must be made efficiently to filter out all the sections which do not apply to the given element.
These should not be rendered as a hook.

After successfully passing the check, they should return a component which itself can use hooks within.

christianvogt · 2021-06-24T21:07:28Z

frontend/packages/topology/src/components/side-bar/components/SideBarHeading.tsx

+  const resourceLink = useDetailsResourceLink(element);
+  return (
+    <div className="overview__sidebar-pane-head resource-overview__heading">
+      <h1 className="co-m-pane__heading">
+        <div className="co-m-pane__name co-resource-item">{resourceLink}</div>


There needs to be a fallback resource link if one is not supplied via extension.

extract the resource and create a ResourceLink

render a non-linkable text based on the element's label

christianvogt · 2021-06-24T21:09:01Z

frontend/packages/helm-plugin/console-extensions.json

+      "insertAfter": "helm-release-panel-tab-section-details",
+      "insertBefore": "helm-release-panel-tab-section-releaseNotes"


Why both before and after properties?

Note that the order in which they are defined should remain in tact so long as they are defined by the same plugin.
Therefore if the helm plugin is contributing all help sections, we should not even need to define the before or after properties.

rohitkrai03 · 2021-07-02T14:58:24Z

/assign

rohitkrai03

/approve

Changes looks good to me. Tested locally. Works as expected.

rohitkrai03 · 2021-07-03T06:35:27Z

/lgtm

openshift-bot · 2021-07-03T08:22:13Z

/retest