Dashboard view

console-extensions.json

@@ -3,16 +3,8 @@
     "type": "console.page/route",
     "properties": {
       "exact": true,
-      "path": "/k8s/ns/:ns/kuadrant/dashboard",
-      "component": { "$codeRef": "KuadrantDashboardPage" }
-    }
-  },
-  {
-    "type": "console.page/route",
-    "properties": {
-      "exact": true,
-      "path": "/k8s/all-namespaces/kuadrant/dashboard",
-      "component": { "$codeRef": "KuadrantDashboardPage" }
+      "path": "/kuadrant/overview",
+      "component": { "$codeRef": "KuadrantOverviewPage" }
     }
   },
   {
@@ -70,17 +62,17 @@
   {
     "type": "console.navigation/href",
     "properties": {
-      "id": "rhcl-dashboard-admin",
-      "name": "%plugin__console-plugin-template~Dashboard%",
-      "href": "/k8s/all-namespaces/kuadrant/dashboard",
+      "id": "kuadrant-overview-admin",
+      "name": "%plugin__console-plugin-template~Overview%",
+      "href": "/kuadrant/overview",
       "perspective": "admin",
       "section": "kuadrant-section-admin"
     }
   },
   {
     "type": "console.navigation/href",
     "properties": {
-      "id": "rhcl-policies-admin",
+      "id": "kuadrant-policies-admin",
       "name": "%plugin__console-plugin-template~Policies%",
       "href": "/kuadrant/all-namespaces/policies",
       "perspective": "admin",
@@ -90,7 +82,7 @@
   {
     "type": "console.navigation/href",
     "properties": {
-      "id": "rhcl-policy-topology-admin",
+      "id": "kuadrant-policy-topology-admin",
       "name": "%plugin__console-plugin-template~Policy Topology%",
       "href": "/kuadrant/policy-topology",
       "perspective": "admin",
@@ -109,17 +101,17 @@
   {
     "type": "console.navigation/href",
     "properties": {
-      "id": "rhcl-dashboard-dev",
-      "name": "%plugin__console-plugin-template~Dashboard%",
-      "href": "/k8s/all-namespaces/kuadrant/dashboard",
+      "id": "kuadrant-dashboard-dev",
+      "name": "%plugin__console-plugin-template~Overview%",
+      "href": "/kuadrant/overview",
       "perspective": "dev",
       "section": "kuadrant-section-dev"
     }
   },
   {
     "type": "console.navigation/href",
     "properties": {
-      "id": "rhcl-policies-dev",
+      "id": "kuadrant-policies-dev",
       "name": "%plugin__console-plugin-template~Policies%",
       "href": "/kuadrant/all-namespaces/policies",
       "perspective": "dev",
@@ -129,7 +121,7 @@
   {
     "type": "console.navigation/href",
     "properties": {
-      "id": "rhcl-policy-topology-dev",
+      "id": "kuadrant-policy-topology-dev",
       "name": "%plugin__console-plugin-template~Policy Topology%",
       "href": "/kuadrant/policy-topology",
       "perspective": "dev",

locales/en/plugin__console-plugin-template.json

@@ -16,7 +16,7 @@
   "Namespace": "Namespace",
   "Select a Namespace": "Select a Namespace",
   "Address": "Address",
-  "Dashboard": "Dashboard",
+  "Overview": "Overview",
   "Policies": "Policies",
   "Policy Topology": "Policy Topology",
   "TLS": "TLS",
@@ -69,5 +69,24 @@
   "Target reference type": "Target reference type",
   "Unique name of the RateLimitPolicy": "Unique name of the RateLimitPolicy",
   "RateLimitPolicy enables rate limiting for service workloads in a Gateway API network": "RateLimitPolicy enables rate limiting for service workloads in a Gateway API network",
-  "To set defaults, overrides, and more complex limits, use the YAML view.": "To set defaults, overrides, and more complex limits, use the YAML view."
+  "To set defaults, overrides, and more complex limits, use the YAML view.": "To set defaults, overrides, and more complex limits, use the YAML view.",
+  "Learn how to create, import and use Kuadrant policies on OpenShift with step-by-step instructions and tasks.": "Learn how to create, import and use Kuadrant policies on OpenShift with step-by-step instructions and tasks.",
+  "Learning Resources": "Learning Resources",
+  "Create Policies in": "Create Policies in",
+  "Add a new Gateway": "Add a new Gateway",
+  "View Documentation": "View Documentation",
+  "View all quick starts": "View all quick starts",
+  "Feature Highlights": "Feature Highlights",
+  "Read about the latest information and key features in the Kuadrant highlights.": "Read about the latest information and key features in the Kuadrant highlights.",
+  "highlights": "highlights",
+  "Visit the blog": "Visit the blog",
+  "Getting started resources": "Getting started resources",
+  "6 min read": "6 min read",
+  "Release Notes": "Release Notes",
+  "Enhance Your Work": "Enhance Your Work",
+  "Ease operational complexity with API management and App Connectivity by using additional Operators and tools.": "Ease operational complexity with API management and App Connectivity by using additional Operators and tools.",
+  "API Designer": "API Designer",
+  "cert-manager Operator": "cert-manager Operator",
+  "APIs / HTTPRoutes": "APIs / HTTPRoutes",
+  "Hide for session": "Hide for session"
 }

package.json

@@ -28,7 +28,7 @@
     "@openshift-console/dynamic-plugin-sdk": "^1.6.0",
     "@openshift-console/dynamic-plugin-sdk-webpack": "^1.2.0",
     "@patternfly/react-core": "^5.3.3",
-    "@patternfly/react-icons": "^5.1.1",
+    "@patternfly/react-icons": "^5.4.0",
     "@patternfly/react-styles": "^5.1.1",
     "@types/node": "^18.0.0",
     "@types/react": "^17.0.37",
@@ -74,7 +74,7 @@
     "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",
+      "KuadrantOverviewPage": "./components/KuadrantOverviewPage",
       "PolicyTopologyPage": "./components/PolicyTopologyPage",
       "KuadrantPoliciesPage": "./components/KuadrantPoliciesPage",
       "KuadrantDNSPolicyCreatePage": "./components/KuadrantDNSPolicyCreatePage",

src/components/DropdownWithKebab.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement, Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+import { k8sDelete, K8sResourceCommon } from '@openshift-console/dynamic-plugin-sdk';
+import getModelFromResource from '../utils/getModelFromResource'; // Assume you have a utility for getting the model from the resource
+
+type DropdownWithKebabProps = {
+  obj: K8sResourceCommon;
+};
+
+const DropdownWithKebab: React.FC<DropdownWithKebabProps> = ({ obj }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onDeleteConfirm = async () => {
+    try {
+      const model = getModelFromResource(obj);
+      await k8sDelete({ model, resource: obj });
+      console.log('Successfully deleted', obj.metadata.name);
+    } catch (error) {
+      console.error('Failed to delete', obj.metadata.name, error);
+    } finally {
+      setIsDeleteModalOpen(false);
+    }
+  };
+
+  const onDeleteClick = () => {
+    setIsDeleteModalOpen(true);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setIsOpen(false);
+    if (value === 'delete') {
+      onDeleteClick();
+    }
+  };
+
+  return (
+    <>
+      <Dropdown
+        isOpen={isOpen}
+        onSelect={onSelect}
+        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            aria-label="kebab dropdown toggle"
+            variant="plain"
+            onClick={onToggleClick}
+            isExpanded={isOpen}
+          >
+            <EllipsisVIcon />
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+      >
+        <DropdownList>
+          <DropdownItem value="edit" key="edit">
+            Edit
+          </DropdownItem>
+          <DropdownItem value="delete" key="delete">
+            Delete
+          </DropdownItem>
+        </DropdownList>
+      </Dropdown>
+
+      <Modal
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        aria-labelledby="delete-modal-title"
+        aria-describedby="delete-modal-body"
+        variant="medium"
+      >
+        <ModalHeader title="Confirm Delete" />
+        <ModalBody>
+          Are you sure you want to delete the resource <b>{obj.metadata.name}</b>?
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant={ButtonVariant.danger} onClick={onDeleteConfirm}>
+            Delete
+          </Button>
+          <Button key="cancel" variant={ButtonVariant.link} onClick={() => setIsDeleteModalOpen(false)}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};
+
+export default DropdownWithKebab;