Add graph view to project overview workloads tab #6901

jeff-phillips-18 · 2020-10-12T14:38:07Z

Fixes
https://issues.redhat.com/browse/ODC-4925

Description
Adds the ability to switch to the graph view in the workloads tab for the project overview page.

Screen Shots:

Browser conformance:

Chrome
Firefox
Safari
Edge

@bgliwa01 @bmignano @serenamarie125

serenamarie125 · 2020-10-12T15:24:05Z

FYI @alimobrem @beanh66

bgliwa01

lgtm

serenamarie125

@jeff-phillips-18 just to be sure, I'm going to include this as a Request for Change

If you are in the Project->Workloads(graph) tab and do an in-context add, you should be brought to a form, and then brought back to the Project->Workloads(graph) tab to see the results. I'm guessing right now it may navigate directly to the Topology page we use in Dev Perspective.

jeff-phillips-18 · 2020-10-13T11:54:20Z

@serenamarie125 currently it takes you back to the workloads tab but with the list view selected :(

sahil143

@jeff-phillips-18 Creating any resource from the catalog (operator backed, templates) using the Add to Project context menu seems to redirect to the respective Admin page. This is happening because we have checks to redirect in the form based on the active perspective. Is this expected behavior?

jeff-phillips-18 · 2020-10-13T14:26:49Z

@serenamarie125 fixed to redirect to the previous view for the workloads tab.

debsmita1 · 2020-10-14T08:28:54Z

@jeff-phillips-18 In the Project workloads page, I tried adding a database using the Add to Project context menu, on creation it took me to the Template Instance Details page. I was expecting that it would bring me back to the view from where I started

vikram-raj · 2020-10-21T09:19:20Z

frontend/packages/dev-console/src/components/topology/TopologyPage.tsx

@@ -125,11 +113,52 @@ export const TopologyPageContext: React.FC<TopologyPageProps> = observer(({ matc
  );
 });

-export const TopologyPage: React.FC<TopologyPageProps> = ({ match }) => {
+type TopologyWorkloadsPageProps = {
+  match: any;


Suggested change

match: any;

match: RMatch<{

name?: string;

}>;

vikram-raj · 2020-10-21T09:23:05Z

frontend/public/components/overview/OverviewListPage.tsx

-import { useParams } from 'react-router-dom';
-import DataModelProvider from '@console/dev-console/src/components/topology/data-transforms/DataModelProvider';
-import { TopologyDataRenderer } from '@console/dev-console/src/components/topology/TopologyDataRenderer';
+import TopologyPage from '@console/dev-console/src/components/topology/TopologyPage';


This import looks bad. We shouldn't import the dev-console package in public.

This is known and already existing. I believe the plan is move Topology out of dev-console and into its own mono repo.

If we are to share topology with admin console, we need to move it to a new package as a standalone tool.

edit: I'm not suggesting we do this now :)

vikram-raj · 2020-10-21T09:23:29Z

frontend/public/components/overview/OverviewListPage.tsx

-    </DataModelProvider>
-  );
+type OverviewListPageProps = {
+  match: any;


Suggested change

match: any;

match: RMatch<{

ns?: string;

}>;

vikram-raj · 2020-10-21T09:28:52Z

There is no padding around the container in the loading state.

jeff-phillips-18 · 2020-10-21T18:11:52Z

@vikram-raj Updated PTAL.

christianvogt · 2020-10-21T19:35:07Z

frontend/packages/dev-console/src/components/topology/TopologyPage.tsx

+const setTopologyWorkloadsActiveView = (id: string) => {
+  localStorage.setItem(LAST_TOPOLOGY_WORKLOADS_VIEW_LOCAL_STORAGE_KEY, id);
+};
+
+const getTopologyWorkloadsActiveView = () => {
+  return localStorage.getItem(LAST_TOPOLOGY_WORKLOADS_VIEW_LOCAL_STORAGE_KEY);
+};


Does UX want a separate setting for the topology page and for the workload page?

UX and PM agreed to using a single setting.

Sorry, missed the thought behind this. We are keeping view preference separate per sections (Workloads vs Topology). UX and PM agreed to that. The saved layout of the graph view is shared between the sections.

christianvogt · 2020-10-21T19:39:43Z

frontend/packages/dev-console/src/components/topology/TopologyPage.tsx

+      {workloadsPage ? (
+        <TopologyWorkloadsPage match={match} />
+      ) : (
+        <TopologyPageContext match={match} />
+      )}


Both views are exactly the same minus the project selector.
I think they should share a lot more in common between the two pages and come up with a common strategy for the URL handling.

christianvogt · 2020-10-21T19:45:21Z

frontend/packages/operator-lifecycle-manager/src/components/operand/create-operand.tsx

-  const next =
-    activePerspective === 'dev'
-      ? '/topology'
-      : `${resourcePathFromModel(
-          ClusterServiceVersionModel,
-          match.params.appName,
-          match.params.ns,
-        )}/${match.params.plural}`;


I don't think we can change the location we go to after creating an operand. The user who was in the installed operators nav item will now be redirected to the workloads tab even though an operand may not result in a workload being created.

Removed this change

serenamarie125 · 2020-10-27T16:32:25Z

@alimobrem @beanh66 FYI

jeff-phillips-18 · 2020-10-29T15:11:12Z

/retest

jerolimov

I tested this a while and it works great for me.

/lgtm

openshift-bot · 2020-11-04T02:25:23Z

/retest