diff --git a/console-extensions.json b/console-extensions.json index 2b5fcdc..5403639 100644 --- a/console-extensions.json +++ b/console-extensions.json @@ -28,7 +28,7 @@ "properties": { "exact": true, "path": "/k8s/all-namespaces/rhcl/policies", - "component": { "$codeRef": "KuadrantDashboardPage" } + "component": { "$codeRef": "KuadrantPoliciesPage" } } }, { diff --git a/package.json b/package.json index 9f6a95d..f3035e0 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,8 @@ "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", + "KuadrantPoliciesPage": "./components/KuadrantPoliciesPage" }, "dependencies": { "@console/pluginAPI": "*" diff --git a/src/components/KuadrantPoliciesPage.tsx b/src/components/KuadrantPoliciesPage.tsx new file mode 100644 index 0000000..f956fe3 --- /dev/null +++ b/src/components/KuadrantPoliciesPage.tsx @@ -0,0 +1,125 @@ +import * as React from 'react'; +import { useParams } from 'react-router-dom'; +import Helmet from 'react-helmet'; +import { useTranslation } from 'react-i18next'; +import { + Page, + PageSection, + Title, +} from '@patternfly/react-core'; +import { + Table, + Thead, + Tr, + Th, + Td, + Tbody, +} from '@patternfly/react-table'; +import { useK8sWatchResource, K8sResourceCommon, ResourceLink, useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk'; +import './example.css'; + +interface Resource { + name: string; + gvk: { + group: string; + version: string; + kind: string; + }; +} + +interface ExtendedK8sResourceCommon extends K8sResourceCommon { + status?: { + addresses?: { value: string }[]; + }; +} + +const resources: Resource[] = [ + { name: 'AuthPolicies', gvk: { group: 'kuadrant.io', version: 'v1beta2', kind: 'AuthPolicy' } }, + { name: 'DNSPolicies', gvk: { group: 'kuadrant.io', version: 'v1alpha1', kind: 'DNSPolicy' } }, + { name: 'RateLimitPolicies', gvk: { group: 'kuadrant.io', version: 'v1beta2', kind: 'RateLimitPolicy' } }, + { name: 'TLSPolicies', gvk: { group: 'kuadrant.io', version: 'v1alpha1', kind: 'TLSPolicy' } }, +]; + +const KuadrantPoliciesPage: React.FC = () => { + const { t } = useTranslation('plugin__console-plugin-template'); + const { ns } = useParams<{ ns: string }>(); + const [activeNamespace, setActiveNamespace] = useActiveNamespace(); + + React.useEffect(() => { + if (ns && ns !== activeNamespace) { + setActiveNamespace(ns); + } + console.log(`Initial namespace: ${activeNamespace}`); + }, [ns, activeNamespace, setActiveNamespace]); + + const formatTimestamp = (timestamp: string) => { + const date = new Date(timestamp); + const now = new Date(); + const diff = now.getTime() - date.getTime(); + const diffDays = Math.floor(diff / (1000 * 3600 * 24)); + return diffDays > 0 ? `${diffDays}d` : 'Today'; + }; + + const renderTable = (resource: Resource, data: ExtendedK8sResourceCommon[], loaded: boolean, loadError: any) => ( + + {resource.name} + {loaded && !loadError ? ( + + + + + + + {resource.name === 'Gateways' && } + + + + {data.map((item) => ( + + + + + {resource.name === 'Gateways' && ( + + )} + + ))} + +
{t('Name')}{t('Namespace')}{t('Age')}{t('Address')}
+ + + + {formatTimestamp(item.metadata.creationTimestamp)} + {item.status?.addresses?.length ? item.status.addresses.map((address) => address.value).join(', ') : 'N/A'} +
+ ) : ( +
{t('Loading...')}
+ )} +
+ ); + + return ( + <> + + {t('Kuadrant')} + + + + {t('Kuadrant')} + + {resources.map((resource) => { + const { group, version, kind } = resource.gvk; + const [data, loaded, loadError] = useK8sWatchResource({ + groupVersionKind: { group, version, kind }, + namespace: activeNamespace === '#ALL_NS#' ? undefined : activeNamespace, + isList: true, + }); + + return renderTable(resource, data, loaded, loadError); + })} + + + ); +}; + +export default KuadrantPoliciesPage;