| {columnNames.action} | +{columnNames.result} | +{columnNames.severity} | +{columnNames.loggedBy} | +{columnNames.description} | +{columnNames.date} | +
|---|---|---|---|---|---|
| {event.action} | ++ {getResultIcon(event.result as ResultStatus)} {event.result} + | +{event.severity} | +{event.triggeredBy} | +{event.description} | +{event.timestamp} | +
| ID | +Name | +Type | +Status | +AvailabilityZone | +
|---|---|---|---|---|
| + {instance.instanceId} + | +{instance.instanceName} | +{instance.instanceType} | +{renderStatusLabel(instance.status)} | +{instance.availabilityZone} | +
+ Toggle 'Show terminated clusters' to view all clusters. + + ) : ( + 'No clusters found.' + )} +
| {columnNames.id} | +{columnNames.name} | +{columnNames.status} | +{columnNames.account} | +{columnNames.cloudProvider} | +{columnNames.region} | +{columnNames.nodes} | +{columnNames.console} | +
|---|---|---|---|---|---|---|---|
| + {cluster.clusterId} + | +{cluster.clusterName} | +{renderStatusLabel(cluster.status)} | ++ {cluster.accountName} + | +{cluster.provider} | +{cluster.region} | +{cluster.instanceCount} | ++ + Console + + | +
+
+ );
+
+ // Provider filter setup
+ const [isProviderMenuOpen, setIsProviderMenuOpen] = React.useState
+
+ );
+
+ const [isAttributeMenuOpen, setIsAttributeMenuOpen] = React.useState(false);
+ const attributeToggleRef = React.useRef
+
+ );
+
+ return (
+ {eventsError}
+Check the console for more details or try refreshing the page.
+| Time | +Action | +Result | +Resource | +Triggered By | +
|---|---|---|---|---|
| {event.timestamp ? new Date(event.timestamp).toLocaleString('es-ES') : '-'} | +{event.action} | ++ {getResultIcon(event.result as ResultStatus)} {event.result} + | ++ + {event.resourceId} + + | +{event.triggeredBy} | +
+ Toggle 'Show terminated instances' to view all instances. + + ) : ( + 'No instances found.' + )} +
| {columnNames.id} | +{columnNames.name} | +{columnNames.status} | +{columnNames.provider} | +{columnNames.availabilityZone} | +{columnNames.instanceType} | +
|---|---|---|---|---|---|
| + {instance.instanceId} + | ++ {instance.instanceName} + | +{renderStatusLabel(instance.status)} | +{instance.provider} | +{instance.availabilityZone} | +{instance.instanceType} | +
+
+ );
+
+ // Set up provider input
+ const [isProviderMenuOpen, setIsProviderMenuOpen] = React.useState
+
+ );
+
+ // Set up attribute selector
+ const [activeAttributeMenu, setActiveAttributeMenu] = React.useState<'Servers' | 'Status' | 'Provider'>('Servers');
+ const [isAttributeMenuOpen, setIsAttributeMenuOpen] = React.useState(false);
+ const attributeToggleRef = React.useRef
+
+ );
+
+ return (
+
+
+);
diff --git a/console/src/app/components/common/TablesPagination.tsx b/console/src/app/components/common/TablesPagination.tsx
new file mode 100644
index 00000000..4cbc6862
--- /dev/null
+++ b/console/src/app/components/common/TablesPagination.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+interface PaginationProps {
+ itemCount: number;
+ page: number;
+ perPage: number;
+ onSetPage: (page: number) => void;
+ onPerPageSelect: (perPage: number) => void;
+}
+
+export const TablePagination: React.FC