| {columnNames.id} | +{columnNames.name} | +{columnNames.status} | +{columnNames.cloudProvider} | +{columnNames.instanceCount} | +
|---|---|---|---|---|
| + {cluster.clusterId} + | +{cluster.clusterName} | +{renderStatusLabel(cluster.status)} | +{cluster.provider} | +{cluster.instanceCount} | +
| {columnNames.name} | +{columnNames.provider} | +{columnNames.clusterCount} | +{columnNames.cost15d} | +{columnNames.lastScan} | +
|---|---|---|---|---|
|
+ |
+ {renderProviderIcon(account.provider)} | +{account.clusterCount} | +{parseNumberToCurrency(account.last15DaysCost)} | +{parseScanTimestamp(account.lastScanTimestamp)} | +
+
+ );
+
+ // Set up attribute selector
+ const [activeAttributeMenu, setActiveAttributeMenu] = React.useState<'Account' | 'Provider'>('Account');
+ const [isAttributeMenuOpen, setIsAttributeMenuOpen] = React.useState(false);
+ const attributeToggleRef = React.useRef
+
+ );
+
+ return (
+ | {columnNames.date} | +{columnNames.operation} | +{columnNames.resource} | +{columnNames.status} | +{columnNames.requester} | +{columnNames.scheduledAction} | +{columnNames.description} | +
|---|---|---|---|---|---|---|
| {parseScanTimestamp(event.timestamp)} | +{renderOperationLabel(event.action)} | +
+ {event.resourceId ? (
+ <>
+ {renderResourceBadge(event.resourceType)}{' '}
+
+ {event.resourceName || event.resourceId}
+
+
+ ) : event.action === ActionOperations.SCAN ? (
+ <>
+ |
+ {renderActionStatusLabel(event.result)} | +{event.requester} | ++ {event.scheduleId ? #{event.scheduleId} : '-'} + | +{event.description} | +
+
+ );
+
+ // Actions filter setup
+ const [isActionMenuOpen, setIsActionMenuOpen] = React.useState
+
+ );
+
+ // Result filter setup
+ const [isResultMenuOpen, setIsResultMenuOpen] = React.useState
+
+ );
+
+ // Attribute selector setup
+ const [activeAttributeMenu, setActiveAttributeMenu] = React.useState
+
+ );
+
+ return (
+ | {columnNames.id} | +{columnNames.type} | +{columnNames.schedule} | +{columnNames.operation} | +{columnNames.status} | +{columnNames.target} | +{columnNames.requester} | +{columnNames.description} | +{columnNames.enabled} | +|
|---|---|---|---|---|---|---|---|---|---|
| {action.id} | +{renderActionTypeLabel(action.type)} | ++ {action.type === ActionTypes.CRON_ACTION + ? `${action.cronExpression} (${cronstrue.toString(action.cronExpression ?? '', { use24HourTimeFormat: true })})` + : parseScanTimestamp(action.time)} + | +{renderOperationLabel(action.operation)} | +{renderActionStatusLabel(action.status)} | ++ {renderTargetLabel( + action.clusterId, + action.clusterName, + action.targetAccountIds, + action.targetAccountNames, + action.selectAll + )} + | +{action.requester || '-'} | +{action.description || '-'} | ++ {action.enabled ? : } + | +
+ |
+
+
+ );
+
+ // Type filter setup
+ const [isTypeMenuOpen, setIsTypeMenuOpen] = React.useState
+
+ );
+
+ // Status filter setup
+ const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState
+
+ );
+
+ // Enabled filter setup
+ const [isEnabledMenuOpen, setIsEnabledMenuOpen] = React.useState
+
+ );
+
+ // Attribute selector setup
+ const [activeAttributeMenu, setActiveAttributeMenu] = React.useState
+
+ );
+
+ return (
+
+
+
+
+
+
+
+
+ {timeZones.map(zone => (
+
+ }
+ showClose={false}
+ isVisible={isTimeZoneOpen}
+ hasNoPadding
+ hasAutoWidth
+ appendTo={document.body}
+ zIndex={9999}
+ >
+ }
+ variant="control"
+ aria-label="Toggle timezone"
+ onClick={() => setIsTimeZoneOpen(!isTimeZoneOpen)}
+ >
+ {selectedTimeZone}
+
+
+
+
+
+ );
+};
+
+export default DateTimePicker;
diff --git a/console/src/app/Actions/Scheduler/components/ModalCreateAction.tsx b/console/src/app/Actions/Scheduler/components/ModalCreateAction.tsx
new file mode 100644
index 00000000..d1f0365d
--- /dev/null
+++ b/console/src/app/Actions/Scheduler/components/ModalCreateAction.tsx
@@ -0,0 +1,356 @@
+import {
+ Alert,
+ Button,
+ Checkbox,
+ FormHelperText,
+ FormGroup,
+ Form,
+ TextInput,
+ HelperText,
+ HelperTextItem,
+ Radio,
+ ToggleGroup,
+ ToggleGroupItem,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon, HelpIcon } from '@patternfly/react-icons';
+import { Popover } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import React from 'react';
+import { ActionOperations, ActionTypes } from '@app/types/types';
+import DateTimePicker from './DateTimePicker';
+import { AccountTypeaheadSelect, ALL_ACCOUNTS_ID } from './AccountSelector';
+import { ClusterTypeaheadSelect } from './ClusterSelector';
+import { ActionStatus } from '@app/types/types';
+import { debug } from '@app/utils/debugLogs';
+import { api, AccountResponseApi, ClusterResponseApi, ActionRequestApi } from '@api';
+import { useUser } from '@app/Contexts/UserContext';
+import cronValidate from 'cron-validate';
+
+interface ModalCreateActionProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onCreated: () => void;
+}
+
+export const ModalCreateAction: React.FunctionComponent
+ {zone}
+
+ ))}
+ | {columnNames.action} | +{columnNames.result} | +{columnNames.severity} | +{columnNames.requester} | +{columnNames.description} | +{columnNames.date} | +
|---|---|---|---|---|---|
| {event.action} | ++ {getResultIcon(event.result as ResultStatus)} {event.result} + | +{event.severity} | +{event.requester} | +{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 match the current filters.' + )} +
| {columnNames.id} | +{columnNames.name} | +{columnNames.status} | +{columnNames.account} | +{columnNames.provider} | +{columnNames.region} | +{columnNames.cost15d} | +{columnNames.console} | +
|---|---|---|---|---|---|---|---|
|
+ |
+ {cluster.clusterName} | +{renderStatusLabel(cluster.status)} | ++ {cluster.accountName} + | +{renderProviderIcon(cluster.provider)} | +{cluster.region} | +{parseNumberToCurrency(cluster.last15DaysCost)} | ++ + Console + + | +
+
+ );
+
+ // Provider filter setup
+ const [isProviderMenuOpen, setIsProviderMenuOpen] = React.useState
+
+ );
+
+ const [isAttributeMenuOpen, setIsAttributeMenuOpen] = React.useState(false);
+ const attributeToggleRef = React.useRef
+
+ );
+
+ return (
+ + Toggle 'Show terminated nodes' to view all nodes. + + ) : ( + 'No nodes match the current filters.' + )} +
| {columnNames.id} | +{columnNames.name} | +{columnNames.status} | +{columnNames.provider} | +{columnNames.availabilityZone} | +{columnNames.instanceType} | +
|---|---|---|---|---|---|
|
+ |
+ + {instance.instanceName} + | +{renderStatusLabel(instance.status)} | +{instance.provider} | +{instance.availabilityZone} | +{instance.instanceType} | +
+
+ );
+
+ const [isProviderMenuOpen, setIsProviderMenuOpen] = React.useState
+
+ );
+
+ const [activeAttributeMenu, setActiveAttributeMenu] = React.useState<'Nodes' | 'Status' | 'Provider'>('Nodes');
+ const [isAttributeMenuOpen, setIsAttributeMenuOpen] = React.useState(false);
+ const attributeToggleRef = React.useRef
+
+ );
+
+ return (
+
+ {/* Row 1: Summary cards */}
+
+ {cardData.summaryCards.map((card, cardIndex) => (
+
+
+ {card.title}
+
+ {renderContent(card.content, card.layout, card.totalCount)}
+
+ ))}
+
+
+ {/* Row 2: Partner chart + ranked lists */}
+
+
+
+
+ {eventsLoading ? (
+
+
+ ) : cardData.activityCards[0].customComponent ? (
+ cardData.activityCards[0].customComponent
+ ) : (
+ renderContent(
+ cardData.activityCards[0].content,
+ cardData.activityCards[0].layout,
+ cardData.activityCards[0].totalCount
+ )
+ )}
+
+
+
+
+
+
+ {/* Row 4: Recent Events */}
+
+
+ {eventsError}
+Check the console for more details or try refreshing the page.
+| Date | +Operation | +Resource | +Status | +Requester | +
|---|---|---|---|---|
| {parseScanTimestamp(event.timestamp)} | +{renderOperationLabel(event.action)} | +
+ {event.resourceId ? (
+ <>
+ {renderResourceBadge(event.resourceType)}{' '}
+
+ {event.resourceName || event.resourceId}
+
+
+ ) : event.action === ActionOperations.SCAN ? (
+ <>
+ |
+ {renderActionStatusLabel(event.result)} | +{event.requester} | +
+
+ `$${t.toFixed(0)}`}
+ style={{ tickLabels: { ...axisTextStyle, fontSize: 12 } }}
+ />
+
+
+
+
+ )}
+
+
+ )}
+
+ DONUT_COLORS[index % DONUT_COLORS.length],
+ },
+ }}
+ />
+
+
+
+ {total}
+ Clusters
+
+ {chartData.map((d, i) => (
+
+
+
+
+ {d.x}: {d.y}
+
+
+ ))}
+
+ {items.map((item, index) => (
+
+
+ {item.name || 'Unknown'}
+
+ {formatValue ? formatValue(item.clusterCount ?? 0) : (item.clusterCount ?? 0)}
+
+
+ ))}
+
+
+);
diff --git a/console/src/app/components/common/TableSkeleton.tsx b/console/src/app/components/common/TableSkeleton.tsx
new file mode 100644
index 00000000..bb166c24
--- /dev/null
+++ b/console/src/app/components/common/TableSkeleton.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+interface TableSkeletonProps {
+ rows?: number;
+ columns?: number;
+}
+
+export const TableSkeleton: React.FunctionComponent
+
+);
diff --git a/console/src/app/components/common/TablesPagination.tsx b/console/src/app/components/common/TablesPagination.tsx
new file mode 100644
index 00000000..d08665f5
--- /dev/null
+++ b/console/src/app/components/common/TablesPagination.tsx
@@ -0,0 +1,35 @@
+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
+ {Array.from({ length: columns }, (_, i) => (
+
+ {Array.from({ length: rows }, (_, rowIndex) => (
+
+ {Array.from({ length: columns }, (_, colIndex) => (
+
+ ))}
+