initial inclusion of react-policy-topology

Signed-off-by: Jason Madigan <[email protected]>
Kuadrant · Aug 27, 2024 · 92e4b2a · 92e4b2a
1 parent d9637ef
commit 92e4b2a
Show file tree

Hide file tree

Showing 10 changed files with 47,600 additions and 20,527 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
+
diff --git a/console-extensions.json b/console-extensions.json
@@ -36,15 +36,15 @@
     "properties": {
       "exact": true,
       "path": "/k8s/ns/:ns/rhcl/policy-topology",
-      "component": { "$codeRef": "KuadrantDashboardPage" }
+      "component": { "$codeRef": "PolicyTopologyPage" }
     }
   },
   {
     "type": "console.page/route",
     "properties": {
       "exact": true,
       "path": "/k8s/all-namespaces/rhcl/policy-topology",
-      "component": { "$codeRef": "KuadrantDashboardPage" }
+      "component": { "$codeRef": "PolicyTopologyPage" }
     }
   },
   {

diff --git a/locales/en/plugin__console-plugin-template.json b/locales/en/plugin__console-plugin-template.json
@@ -15,5 +15,7 @@
   "Name": "Name",
   "Namespace": "Namespace",
   "Address": "Address",
-  "Dashboard": "Dashboard"
+  "Dashboard": "Dashboard",
+  "Policies": "Policies",
+  "Policy Topology": "Policy Topology"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,13 +74,19 @@
     "displayName": "OpenShift Console Plugin Template",
     "description": "Template project for OpenShift Console plugins. Edit package.json to change this message and the plugin name.",
     "exposedModules": {
-      "KuadrantDashboardPage": "./components/KuadrantDashboardPage"
+      "KuadrantDashboardPage": "./components/KuadrantDashboardPage",
+      "PolicyTopologyPage": "./components/PolicyTopologyPage"
     },
     "dependencies": {
       "@console/pluginAPI": "*"
     }
   },
   "dependencies": {
-    "@patternfly/react-table": "^5.3.3"
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
+    "@patternfly/react-table": "^5.3.3",
+    "babel-loader": "^9.1.3",
+    "react-policy-topology": "^0.1.8"
   }
 }
diff --git a/src/components/KuadrantDashboardPage.tsx b/src/components/KuadrantDashboardPage.tsx
@@ -16,7 +16,7 @@ import {
   Tbody,
 } from '@patternfly/react-table';
 import { useK8sWatchResource, K8sResourceCommon, ResourceLink, useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
-import './example.css';
+import './kuadrant.css';
 
 interface Resource {
   name: string;

diff --git a/src/components/PolicyTopologyPage.tsx b/src/components/PolicyTopologyPage.tsx
@@ -0,0 +1,139 @@
+import * as React from 'react';
+import Helmet from 'react-helmet';
+import { Page, PageSection, Title, Card, CardTitle, CardBody } from '@patternfly/react-core';
+import PolicyTopology from 'react-policy-topology';
+import './kuadrant.css';
+
+const PolicyTopologyPage: React.FC = () => {
+  const dotString = `
+    strict digraph "" {
+      graph [bb="0,0,440.51,352"];
+      node [fillcolor=lightgrey,
+        label="",
+        shape=ellipse
+      ];
+      "gateway.gateway.networking.k8s.io:default/prod-web"	 [fillcolor="#e5e5e5",
+        height=0.57778,
+        label="Gateway\ndefault/prod-web",
+        pos="280.92,253.6",
+        shape=box,
+        style=filled,
+        width=1.5612];
+      "gateway.gateway.networking.k8s.io:default/prod-web#http"	 [fillcolor="#e5e5e5",
+        height=0.57778,
+        label="Listener\ndefault/prod-web#http",
+        pos="369.92,176",
+        shape=box,
+        style=filled,
+        width=1.9609];
+      "gateway.gateway.networking.k8s.io:default/prod-web" -> "gateway.gateway.networking.k8s.io:default/prod-web#http" [key="Gateway -> Listener",
+      pos="e,346.01,196.85 304.77,232.8 315.05,223.85 327.21,213.24 338.23,203.63"];
+    "gateway.gateway.networking.k8s.io:default/prod-web#https" [fillcolor="#e5e5e5",
+      height=0.57778,
+      label="Listener\ndefault/prod-web#https",
+      pos="74.922,176",
+      shape=box,
+      style=filled,
+      width=2.0365];
+    "gateway.gateway.networking.k8s.io:default/prod-web" -> "gateway.gateway.networking.k8s.io:default/prod-web#https" [key="Gateway -> Listener",
+    pos="e,129.7,196.64 225.99,232.91 199.33,222.87 167.14,210.74 139.34,200.27"];
+    "httproute.gateway.networking.k8s.io:default/my-app" [fillcolor="#e5e5e5",
+    height=0.57778,
+    label="HTTPRoute\ndefault/my-app",
+    pos="223.92,98.4",
+    shape=box,
+    style=filled,
+    width=1.4101];
+    "httproute.gateway.networking.k8s.io:default/my-app#rule-1" [fillcolor="#e5e5e5",
+    height=0.57778,
+    label="HTTPRouteRule\ndefault/my-app#rule-1",
+    pos="72.922,20.8",
+    shape=box,
+    style=filled,
+    width=1.9716];
+    "httproute.gateway.networking.k8s.io:default/my-app" -> "httproute.gateway.networking.k8s.io:default/my-app#rule-1" [key="HTTPRoute -> HTTPRouteRule",
+    pos="e,113.24,41.518 183.46,77.605 164.59,67.911 141.98,56.29 122.14,46.092"];
+    "httproute.gateway.networking.k8s.io:default/my-app#rule-2" [fillcolor="#e5e5e5",
+    height=0.57778,
+    label="HTTPRouteRule\ndefault/my-app#rule-2",
+    pos="232.92,20.8",
+    shape=box,
+    style=filled,
+    width=1.9716];
+    "httproute.gateway.networking.k8s.io:default/my-app" -> "httproute.gateway.networking.k8s.io:default/my-app#rule-2" [key="HTTPRoute -> HTTPRouteRule",
+    pos="e,230.5,41.653 226.33,77.605 227.25,69.689 228.32,60.489 229.32,51.828"];
+    "gateway.gateway.networking.k8s.io:default/prod-web#http" -> "httproute.gateway.networking.k8s.io:default/my-app" [key="Listener -> HTTPRoute",
+    pos="e,262.9,119.12 330.8,155.2 312.64,145.55 290.89,133.99 271.77,123.83"];
+    "gateway.gateway.networking.k8s.io:default/prod-web#https" -> "httproute.gateway.networking.k8s.io:default/my-app" [key="Listener -> HTTPRoute",
+    pos="e,184.14,119.12 114.85,155.2 133.38,145.55 155.58,133.99 175.09,123.83"];
+    "dnspolicy.kuadrant.io:default/geo" [height=0.57778,
+    label="DNSPolicy\ndefault/geo",
+    pos="215.92,331.2",
+    shape=note,
+    style=dashed,
+    width=1.108];
+    "dnspolicy.kuadrant.io:default/geo" -> "gateway.gateway.networking.k8s.io:default/prod-web" [key="Policy -> Target",
+    pos="e,263.45,274.45 233.34,310.4 240.55,301.79 249.04,291.66 256.83,282.36",
+    style=dashed];
+    "tlspolicy.kuadrant.io:default/https" [height=0.57778,
+    label="TLSPolicy\ndefault/https",
+    pos="74.922,253.6",
+    shape=note,
+    style=dashed,
+    width=1.1943];
+    "tlspolicy.kuadrant.io:default/https" -> "gateway.gateway.networking.k8s.io:default/prod-web#https" [key="Policy -> Target",
+    pos="e,74.922,196.85 74.922,232.8 74.922,224.89 74.922,215.69 74.922,207.03",
+    style=dashed];
+    "authpolicy.kuadrant.io:default/api-key-admins" [height=0.57778,
+    label="AuthPolicy\ndefault/api-key-admins",
+    pos="72.922,98.4",
+    shape=note,
+    style=dashed,
+    width=2.0256];
+    "authpolicy.kuadrant.io:default/api-key-admins" -> "httproute.gateway.networking.k8s.io:default/my-app#rule-1" [key="Policy -> Target",
+    pos="e,72.922,41.653 72.922,77.605 72.922,69.689 72.922,60.489 72.922,51.828",
+    style=dashed];
+    "authpolicy.kuadrant.io:default/business-hours" [height=0.57778,
+    label="AuthPolicy\ndefault/business-hours",
+    pos="344.92,331.2",
+    shape=note,
+    style=dashed,
+    width=1.9718];
+    "authpolicy.kuadrant.io:default/business-hours" -> "gateway.gateway.networking.k8s.io:default/prod-web" [key="Policy -> Target",
+    pos="e,298.12,274.45 327.77,310.4 320.67,301.79 312.31,291.66 304.64,282.36",
+    style=dashed];
+    "ratelimitpolicy.kuadrant.io:default/my-app-rl" [height=0.57778,
+    label="RateLimitPolicy\ndefault/my-app-rl",
+    pos="223.92,176",
+    shape=note,
+    style=dashed,
+    width=1.5936];
+    "ratelimitpolicy.kuadrant.io:default/my-app-rl" -> "httproute.gateway.networking.k8s.io:default/my-app" [key="Policy -> Target",
+    pos="e,223.92,119.25 223.92,155.2 223.92,147.29 223.92,138.09 223.92,129.43",
+    style=dashed];
+    }
+  `;
+
+  return (
+    <>
+      <Helmet>
+        <title>Policy Topology</title>
+      </Helmet>
+      <Page>
+        <PageSection variant="light">
+          <Title headingLevel="h1">Policy Topology</Title>
+        </PageSection>
+        <PageSection className='policy-topology-section'>
+          <Card>
+            <CardTitle>Topology View</CardTitle>
+            <CardBody>
+              <PolicyTopology initialDotString={dotString} />
+            </CardBody>
+          </Card>
+        </PageSection>
+      </Page>
+    </>
+  );
+};
+
+export default PolicyTopologyPage;
diff --git a/src/components/example.css → src/components/kuadrant.css b/src/components/example.css → src/components/kuadrant.css
@@ -5,3 +5,16 @@
    * https://patternfly-react-main.surge.sh/developer-resources/global-css-variables */
   color: var(--pf-global--palette--blue-400);
 }
+
+.policy-topology-container svg text {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  font-size: 0.7em
+}
+
+.policy-topology-container svg {
+  height: 100%;
+  width: 900px;
+  background-color: transparent;
+}
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -15,7 +15,6 @@ interface Configuration extends WebpackConfiguration {
 
 const config: Configuration = {
   mode: isProd ? 'production' : 'development',
-  // No regular entry points needed. All plugin related scripts are generated via ConsoleRemotePlugin.
   entry: {},
   context: path.resolve(__dirname, 'src'),
   output: {
@@ -29,8 +28,20 @@ const config: Configuration = {
   module: {
     rules: [
       {
-        test: /\.(jsx?|tsx?)$/,
-        exclude: /\/node_modules\//,
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules\/(?!(react-policy-topology\/|some-other-library\/)).*/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env', '@babel/preset-react'],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
         use: [
           {
             loader: 'ts-loader',
@@ -62,7 +73,6 @@ const config: Configuration = {
   devServer: {
     static: './dist',
     port: 9001,
-    // Allow Bridge running in a container to connect to the plugin dev server.
     allowedHosts: 'all',
     headers: {
       'Access-Control-Allow-Origin': '*',