feat(*): add data plane nodes page

.ci/docker-compose.yml

@@ -56,3 +56,45 @@ services:
       &kong-depends_on
       kong-db:
         condition: service_healthy
+
+  kong-gen-cert:
+    # Using a empty string as the fallback makes this env optional but still fails if not set when used
+    image: "${GATEWAY_IMAGE:- }"
+    security_opt:
+      - no-new-privileges:true
+    command: >-
+      sh -c "kong hybrid gen_cert /tmp/hybrid/cluster.crt /tmp/hybrid/cluster.key"
+    volumes:
+      - "${GITHUB_WORKSPACE:-.}/hybrid:/tmp/hybrid:z"
+
+  kong-hybrid-cp:
+    <<: *kong
+    command: >-
+      sh -c "kong migrations bootstrap && kong migrations up && kong migrations finish && kong start"
+    ports:
+      - "8001-8006:8001-8006"
+    environment:
+      <<: *kong-environment
+      KONG_PG_DATABASE: kong
+      KONG_ROLE: control_plane
+      KONG_CLUSTER_CERT: /tmp/hybrid/cluster.crt
+      KONG_CLUSTER_CERT_KEY: /tmp/hybrid/cluster.key
+    volumes:
+      - "${GITHUB_WORKSPACE:-.}/hybrid:/tmp/hybrid"
+
+  kong-hybrid-dp:
+    <<: *kong
+    hostname: "" # no hostname for data planes
+    ports: [] # no ports for data planes
+    command: sh -c "kong start"
+    environment:
+      KONG_DATABASE: off
+      KONG_ROLE: data_plane
+      KONG_CLUSTER_CERT: /tmp/hybrid/cluster.crt
+      KONG_CLUSTER_CERT_KEY: /tmp/hybrid/cluster.key
+      KONG_CLUSTER_CONTROL_PLANE: kong-hybrid-cp:8005
+      KONG_CLUSTER_TELEMETRY_ENDPOINT: kong-hybrid-cp:8006
+    volumes:
+      - "${GITHUB_WORKSPACE:-.}/hybrid:/tmp/hybrid"
+    depends_on:
+      - kong-hybrid-cp # so that we can start the control plane by scaling the data planes

.github/workflows/.reusable_e2e_tests_oss.yml

@@ -25,15 +25,16 @@ jobs:
           - consumers
           - certificates
           - ca-certificates
-          - misc
-          - vaults
+          - data-plane-nodes
           - keys
           - key-sets
+          - misc
           - plugins
           - routes
           - services
           - snis
           - upstreams
+          - vaults
         router-flavor: [traditional_compatible]
         include:
           - suite: routes-expressions
@@ -83,7 +84,8 @@ jobs:
         with:
           current-image: ${{ inputs.gateway-image }}
 
-      - name: Start Kong
+      - name: Start Kong traditional
+        if: ${{ matrix.suite != 'data-plane-nodes' }}
         timeout-minutes: 10
         working-directory: ${{ github.workspace }}
         env:
@@ -95,6 +97,21 @@ jobs:
           docker compose -f .ci/docker-compose.yml logs
           exit $_compose_exit
 
+      - name: Start Kong hybrid
+        if: ${{ matrix.suite == 'data-plane-nodes' }}
+        timeout-minutes: 10
+        working-directory: ${{ github.workspace }}
+        env:
+          GATEWAY_IMAGE: ${{ inputs.gateway-image }}
+        run: |
+          mkdir -p hybrid
+          chmod a+w ./hybrid
+          docker compose -f .ci/docker-compose.yml up kong-gen-cert
+          _compose_exit=0
+          docker compose -f .ci/docker-compose.yml up -d kong-hybrid-dp --scale kong-hybrid-dp=3 --wait || _compose_exit=$?
+          docker compose -f .ci/docker-compose.yml logs
+          exit $_compose_exit
+
       - name: Run E2E tests - OSS
         timeout-minutes: 10
         env:

package.json

@@ -27,6 +27,7 @@
     "@kong-ui-public/entities-certificates": "^3.0.11",
     "@kong-ui-public/entities-consumer-credentials": "^3.0.11",
     "@kong-ui-public/entities-consumers": "^3.0.11",
+    "@kong-ui-public/entities-data-plane-nodes": "^0.1.1",
     "@kong-ui-public/entities-gateway-services": "^3.0.12",
     "@kong-ui-public/entities-key-sets": "^3.0.11",
     "@kong-ui-public/entities-keys": "^3.0.11",
@@ -43,6 +44,7 @@
     "@kong/kongponents": "^9.0.0-alpha.146",
     "@material-design-icons/font": "^0.14.9",
     "axios": "^1.6.0",
+    "dayjs": "^1.11.10",
     "marked": "^5.1.0",
     "monaco-editor": "0.21.3",
     "pinia": "^2.1.6",

src/App.vue

@@ -16,12 +16,16 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
 import { AppLayout, type SidebarPrimaryItem } from '@kong-ui-public/app-layout'
 import { GithubStar } from '@kong-ui-public/misc-widgets'
+import { useInfoStore } from '@/stores/info'
 import NavbarLogo from '@/components/NavbarLogo.vue'
 import MakeAWish from '@/components/MakeAWish.vue'
 
 const route = useRoute()
+const infoStore = useInfoStore()
+const { isHybridMode } = storeToRefs(infoStore)
 
 const sidebarItems = computed<Array<SidebarPrimaryItem>>(() => [
   {
@@ -96,6 +100,18 @@ const sidebarItems = computed<Array<SidebarPrimaryItem>>(() => [
     key: 'Key Sets',
     active: route.meta?.entity === 'key-set',
   },
+  ...(
+    isHybridMode.value
+      ? [
+          {
+            name: 'Data Plane Nodes',
+            to: { name: 'data-plane-nodes' },
+            key: 'Data Plane Nodes',
+            active: route.meta?.entity === 'data-plane-node',
+          },
+        ]
+      : []
+  ),
 ])
 </script>
 

src/locales/en.json

@@ -205,6 +205,39 @@
       "detail.title": "Key Set: {name}",
       "create.form.title": "New Key Set",
       "edit.form.title": "Edit Key Set"
+    },
+    "dp-nodes": {
+      "list.title": "Data Plane Nodes",
+      "copy.id": "Copy ID",
+      "copy.success": "Copied {id} to clipboard",
+      "not.applicable": "N/A",
+      "headers": {
+        "hostname": "Hostname",
+        "version": "Version",
+        "last.seen": "Last Seen",
+        "sync.status": "Sync Status",
+        "cert.expires.at": "Cert Expires At",
+        "log.level": "Log Level",
+        "labels": "Labels"
+      },
+      "empty": {
+        "title": "No Data Plane Nodes",
+        "message": "There is no Data Plane Node connected to this Control Plane"
+      },
+      "error": {
+        "title": "Data Plane Nodes could not be retrieved",
+        "fetch.fail": "Failed to fetch data planes",
+        "copy.fail": "Failed to copy to clipboard",
+        "get.log.level.fail": "Failed to fetch log level of node {id}"
+      },
+      "bulk.actions": {
+        "placeholder": "{count}Bulk Actions",
+        "change.log.level": "Change Log Level"
+      },
+      "tooltips": {
+        "revert": "Log level is scheduled to revert to {level} at {time}",
+        "not.supported": "Log leveling is not supported for this DP node."
+      }
     }
   },
   "wish": {

src/pages/consumers/Detail.vue

@@ -73,7 +73,10 @@ const onFetchSuccess = (entity) => {
 onMounted(async () => {
   // If the page is not loaded from the configuration tab, we need to fetch the consumer username
   if (route.name !== 'consumer-detail') {
-    const { data } = await apiService.findRecord('consumers', id.value)
+    const { data } = await apiService.findRecord<{ username: string, custom_id: string }>(
+      'consumers',
+      id.value,
+    )
 
     titleName.value = data.username ?? data.custom_id
   }