Merge pull request #112 from Kuadrant/all-policies-create-button

all policies create button & added emptystate views to empty resources

locales/en/plugin__kuadrant-console-plugin.json

@@ -1,15 +1,12 @@
 {
   "6 min read": "6 min read",
   "Add a new Gateway": "Add a new Gateway",
-  "Add Custom Weight Selector": "Add Custom Weight Selector",
   "Add Limit": "Add Limit",
-  "Add Match Expression": "Add Match Expression",
-  "Add Match Label": "Add Match Label",
-  "Add Value": "Add Value",
   "All Policies": "All Policies",
   "API Designer": "API Designer",
   "APIs / HTTPRoutes": "APIs / HTTPRoutes",
   "Auth": "Auth",
+  "AuthPolicy": "AuthPolicy",
   "Cancel": "Cancel",
   "Cert manager issuer type": "Cert manager issuer type",
   "cert-manager Operator": "cert-manager Operator",
@@ -21,36 +18,37 @@
   "Configured Limits": "Configured Limits",
   "Create": "Create",
   "Create AuthPolicy": "Create AuthPolicy",
-  "Create DNSPolicy": "Create DNSPolicy",
+  "Create DNS Policy": "Create DNS Policy",
   "Create Policies in": "Create Policies in",
-  "Create RateLimitPolicy": "Create RateLimitPolicy",
+  "Create Policy": "Create Policy",
+  "Create RateLimit Policy": "Create RateLimit Policy",
   "Create TLS Policy": "Create TLS Policy",
   "Created": "Created",
-  "Custom Weight Selectors": "Custom Weight Selectors",
   "Default Geo": "Default Geo",
-  "Default Weight": "Default Weight",
   "Define Rate Limit": "Define Rate Limit",
+  "Disabled": "Disabled",
   "DNS": "DNS",
+  "DNSPolicy": "DNSPolicy",
   "DNSPolicy configures how North-South based traffic should be balanced and reach the gateways": "DNSPolicy configures how North-South based traffic should be balanced and reach the gateways",
   "Duration": "Duration",
   "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.",
+  "Edit DNS Policy": "Edit DNS Policy",
   "Edit TLS Policy": "Edit TLS Policy",
+  "Enabled": "Enabled",
   "Endpoint": "Endpoint",
   "Enhance Your Work": "Enhance Your Work",
   "Error creating AuthPolicy": "Error creating AuthPolicy",
-  "Error creating DNSPolicy": "Error creating DNSPolicy",
-  "Error creating RateLimitPolicy": "Error creating RateLimitPolicy",
+  "Error creating Rate Limit Policy": "Error creating Rate Limit Policy",
   "Error parsing YAML:": "Error parsing YAML:",
   "Expand Getting Started": "Expand Getting Started",
-  "Expression Key": "Key",
-  "Expression Operator": "Operator",
-  "Expression Values": "Values",
   "Failure Threshold": "Failure Threshold",
   "Feature Highlights": "Feature Highlights",
   "Form View": "Form View",
   "Gateway API Target Reference": "Gateway API Target Reference",
   "Gateway: Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to": "Gateway: Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to",
   "Gateways": "Gateways",
+  "Geo": "Geo",
+  "Geography Label (e.g. 'eu')": "Geography Label (e.g. 'eu')",
   "Getting started resources": "Getting started resources",
   "Health Check": "Health Check",
   "Hide for session": "Hide for session",
@@ -66,10 +64,12 @@
   "Limit": "Limit",
   "Limit Name": "Limit Name",
   "Limit Name is required!": "Limit Name is required!",
+  "Load balancing options:.": "Load balancing options:.",
   "Loading..": "Loading..",
   "Name": "Name",
   "Namespace": "Namespace",
   "No limits configured yet": "No limits configured yet",
+  "No policies found": "No policies found",
   "OK": "OK",
   "Overview": "Overview",
   "Policies": "Policies",
@@ -78,19 +78,14 @@
   "Policy Topology": "Policy Topology",
   "Port": "Port",
   "Protocol": "Protocol",
+  "Provider Ref": "Provider Ref",
   "RateLimit": "RateLimit",
-  "RateLimitPolicy enables rate limiting for service workloads in a Gateway API network": "RateLimitPolicy enables rate limiting for service workloads in a Gateway API network",
+  "RateLimitPolicy": "RateLimitPolicy",
   "Read about the latest information and key features in the Kuadrant highlights.": "Read about the latest information and key features in the Kuadrant highlights.",
   "Release Notes": "Release Notes",
-  "Remove Custom Selector": "Remove Custom Selector",
-  "Remove Match Expression": "Remove Match Expression",
-  "Remove Match Label": "Remove Match Label",
-  "Remove Value": "Remove Value",
-  "Routing Strategy": "Routing Strategy",
-  "Routing Strategy to use": "Routing Strategy to use",
   "Save": "Save",
   "Select a gateway": "Select a gateway",
-  "Select a Namespace": "Select a Namespace",
+  "Select a Protocol": "Select a Protocol",
   "Select an ClusterIssuer": "Select an ClusterIssuer",
   "Select an HTTPRoute": "Select an HTTPRoute",
   "Select an Issuer": "Select an Issuer",
@@ -99,18 +94,18 @@
   "Select HTTPRoute": "Select HTTPRoute",
   "Select Issuer": "Select Issuer",
   "Status": "Status",
-  "Target reference type": "Target reference type",
   "Targets Gateway API networking resources Gateways to provide TLS for gateway listeners by managing the lifecycle of TLS certificates using cert-manager": "Targets Gateway API networking resources Gateways to provide TLS for gateway listeners by managing the lifecycle of TLS certificates using cert-manager",
+  "There are no policies to display - please create some.": "There are no policies to display - please create some.",
   "TLS": "TLS",
-  "To set defaults, overrides, and more complex limits, use the YAML view.": "To set defaults, overrides, and more complex limits, use the YAML view.",
+  "TLSPolicy": "TLSPolicy",
   "Type": "Type",
   "Unique name of the DNS Policy": "Unique name of the DNS Policy",
-  "Unique name of the RateLimitPolicy": "Unique name of the RateLimitPolicy",
   "Unique name of the TLSPolicy.": "Unique name of the TLSPolicy.",
   "Unit": "Unit",
   "View all quick starts": "View all quick starts",
   "View Documentation": "View Documentation",
   "Visit the blog": "Visit the blog",
+  "Weight": "Weight",
   "YAML View": "YAML View",
   "You can view and create HTTPRoutes": "You can view and create HTTPRoutes"
 }

src/components/KuadrantPoliciesPage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useParams } from 'react-router-dom';
+import { useState } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { sortable } from '@patternfly/react-table';
 import {
@@ -10,11 +11,19 @@ import {
   useActiveNamespace,
   useActivePerspective,
   ListPageCreateLink,
-  ListPageBody
+  ListPageBody,
 } from '@openshift-console/dynamic-plugin-sdk';
 
 import { Title } from '@patternfly/react-core';
-import { Alert, AlertGroup } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertGroup,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import ResourceList from './ResourceList';
 import './kuadrant.css';
 import resourceGVKMapping from '../utils/latest';
@@ -42,6 +51,20 @@ export const AllPoliciesListPage: React.FC<{
   paginationLimit?: number;
 }> = ({ activeNamespace, columns, showAlertGroup = false, paginationLimit }) => {
   const { t } = useTranslation('plugin__kuadrant-console-plugin');
+  const history = useHistory();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onMenuSelect = (_event: React.MouseEvent<Element, MouseEvent>, policyType: string) => {
+    const resource = resourceGVKMapping[policyType];
+    const resolvedNamespace = activeNamespace === '#ALL_NS#' ? 'default' : activeNamespace;
+    const targetUrl = `/k8s/ns/${resolvedNamespace}/${resource.group}~${resource.version}~${resource.kind}/~new`;
+    history.push(targetUrl);
+    setIsOpen(false); // Close the dropdown after selecting an option
+  };
 
   return (
     <>
@@ -53,18 +76,57 @@ export const AllPoliciesListPage: React.FC<{
             </Alert>
           </AlertGroup>
         )}
-        <ResourceList
-          resources={resources.map((r) => r.gvk)}
-          namespace={activeNamespace}
-          columns={columns}
-          paginationLimit={paginationLimit}
-        />
+
+        <div className="co-m-nav-title--row kuadrant-resource-create-container">
+          <ResourceList
+            resources={resources.map((r) => r.gvk)}
+            namespace={activeNamespace}
+            columns={columns}
+            paginationLimit={paginationLimit}
+          />
+
+          <div className="kuadrant-resource-create-button pf-u-mt-md">
+            <Dropdown
+              isOpen={isOpen}
+              onSelect={onMenuSelect}
+              onOpenChange={setIsOpen}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onToggleClick}
+                  isExpanded={isOpen}
+                  variant="primary"
+                >
+                  {t('Create Policy')}
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <DropdownItem value="AuthPolicy" key="auth-policy">
+                  {t('AuthPolicy')}
+                </DropdownItem>
+                <DropdownItem value="RateLimitPolicy" key="rate-limit-policy">
+                  {t('RateLimitPolicy')}
+                </DropdownItem>
+                <DropdownItem value="DNSPolicy" key="dns-policy">
+                  {t('DNSPolicy')}
+                </DropdownItem>
+                <DropdownItem value="TLSPolicy" key="tls-policy">
+                  {t('TLSPolicy')}
+                </DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </div>
+        </div>
       </ListPageBody>
     </>
   );
 };
 
-const PoliciesListPage: React.FC<{ resource: Resource; activeNamespace: string }> = ({ resource, activeNamespace }) => {
+const PoliciesListPage: React.FC<{ resource: Resource; activeNamespace: string }> = ({
+  resource,
+  activeNamespace,
+}) => {
   const { t } = useTranslation('plugin__kuadrant-console-plugin');
   const resolvedNamespace = activeNamespace === '#ALL_NS#' ? 'default' : activeNamespace;
 
@@ -80,7 +142,9 @@ const PoliciesListPage: React.FC<{ resource: Resource; activeNamespace: string }
         <div className="co-m-nav-title--row kuadrant-resource-create-container">
           <ResourceList resources={[resource.gvk]} namespace={activeNamespace} />
           <div className="kuadrant-resource-create-button pf-u-mt-md">
-            <ListPageCreateLink to={`/k8s/ns/${resolvedNamespace}/${resource.gvk.group}~${resource.gvk.version}~${resource.gvk.kind}/~new`}>
+            <ListPageCreateLink
+              to={`/k8s/ns/${resolvedNamespace}/${resource.gvk.group}~${resource.gvk.version}~${resource.gvk.kind}/~new`}
+            >
               {t(`plugin__kuadrant-console-plugin~Create ${resource.gvk.kind}`)}
             </ListPageCreateLink>
           </div>

src/components/PolicyTopologyPage.tsx

@@ -318,7 +318,7 @@ const goToResource = (resourceType: string, resourceName: string) => {
 const customLayoutFactory = (type: string, graph: any): any => {
   return new DagreLayout(graph, {
     rankdir: 'TB',
-    nodesep: 0,
+    nodesep: 20,
     ranksep: 0,
     nodeDistance: 80,
   });

src/components/ResourceList.tsx

@@ -1,7 +1,16 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { sortable } from '@patternfly/react-table';
-import { Alert, AlertGroup, Pagination, Label } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertGroup,
+  Pagination,
+  Label,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  Title,
+} from '@patternfly/react-core';
 import {
   K8sResourceCommon,
   ResourceLink,
@@ -16,6 +25,7 @@ import {
   ListPageBody,
   ListPageFilter,
 } from '@openshift-console/dynamic-plugin-sdk';
+import { SearchIcon } from '@patternfly/react-icons';
 import {
   CheckCircleIcon,
   ExclamationTriangleIcon,
@@ -343,29 +353,46 @@ const ResourceList: React.FC<ResourceListProps> = ({
       <div className="kuadrant-policy-list-body">
         <ListPageBody>
           <ListPageFilter data={data} loaded={allLoaded} onFilterChange={onFilterChange} />
-          <VirtualizedTable<K8sResourceCommon>
-            data={paginatedData}
-            unfilteredData={data}
-            loaded={allLoaded}
-            loadError={combinedLoadError}
-            columns={usedColumns}
-            Row={ResourceRow}
-          />
-          <div className="kuadrant-pagination-left">
-            <Pagination
-              itemCount={filteredData.length}
-              perPage={perPage}
-              page={currentPage}
-              onSetPage={onSetPage}
-              onPerPageSelect={onPerPageSelect}
-              variant="bottom"
-              perPageOptions={[
-                { title: '5', value: 5 },
-                { title: '10', value: 10 },
-                { title: '20', value: 20 },
-              ]}
+          {paginatedData.length === 0 && allLoaded ? (
+            <EmptyState>
+              <EmptyStateIcon icon={SearchIcon} />
+              <Title headingLevel="h4" size="lg">
+                {t('plugin__kuadrant-console-plugin~No policies found')}
+              </Title>
+              <EmptyStateBody>
+                {t(
+                  'plugin__kuadrant-console-plugin~There are no policies to display - please create some.',
+                )}
+              </EmptyStateBody>
+            </EmptyState>
+          ) : (
+            <VirtualizedTable<K8sResourceCommon>
+              data={paginatedData}
+              unfilteredData={data}
+              loaded={allLoaded}
+              loadError={combinedLoadError}
+              columns={usedColumns}
+              Row={ResourceRow}
             />
-          </div>
+          )}
+
+          {paginatedData.length > 0 && (
+            <div className="kuadrant-pagination-left">
+              <Pagination
+                itemCount={filteredData.length}
+                perPage={perPage}
+                page={currentPage}
+                onSetPage={onSetPage}
+                onPerPageSelect={onPerPageSelect}
+                variant="bottom"
+                perPageOptions={[
+                  { title: '5', value: 5 },
+                  { title: '10', value: 10 },
+                  { title: '20', value: 20 },
+                ]}
+              />
+            </div>
+          )}
         </ListPageBody>
       </div>
     </>

src/components/dnspolicy/HealthCheckField.tsx

@@ -20,7 +20,7 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
           value={healthCheck.endpoint}
           onChange={(event) => onChange({ ...healthCheck, endpoint: event.currentTarget.value })}
           isRequired
-          placeholder={t("/")}
+          placeholder="/"
         />
       </FormGroup>
       <FormGroup label={t('Failure Threshold')} isRequired fieldId="health-check-failure-threshold">
@@ -31,8 +31,7 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
           onChange={(event) => onChange({ ...healthCheck, failureThreshold: Number(event.currentTarget.value) })}
           isRequired
           min={1}
-          placeholder={t("0")}
-
+          placeholder="0"
         />
       </FormGroup>
       <FormGroup label={t('Port')} isRequired fieldId="health-check-port">
@@ -43,7 +42,7 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
           onChange={(event) => onChange({ ...healthCheck, port: Number(event.currentTarget.value) })}
           isRequired
           min={1}
-          placeholder={t("0")}
+          placeholder="0"
         />
       </FormGroup>
       <FormGroup label={t('Protocol')} isRequired fieldId="health-check-protocol">
@@ -54,7 +53,7 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
           isRequired
           aria-label={t('Select a Protocol')}
         >
-          <FormSelectOption key="placeholder" value="" label={t('Select a protocol')} isDisabled />
+          <FormSelectOption key="placeholder" value="" label={t('Select a Protocol')} isDisabled />
           <FormSelectOption key="HTTP" value="HTTP" label="HTTP" />
           <FormSelectOption key="HTTPS" value="HTTPS" label="HTTPS" />
         </FormSelect>