({ value, link, type, isDisabled = false, fitConten
const stringValue = value.toString();
return (
-
+
{/* If a type is provided, display a corresponding icon */}
- {type &&
+
)}
-
+ {/* If the cell is disabled, render the value without a link */}
+
+ {isDisabled ? (
+ renderValue(stringValue, isDisabled, fitContent)
+ ) : (
+ // Otherwise, render the value as a link
+
+
);
};
diff --git a/components/console/src/core/components/LocaleDateTimeCell/index.tsx b/components/console/src/core/components/LocaleDateTimeCell/index.tsx
new file mode 100644
index 0000000..53b77d2
--- /dev/null
+++ b/components/console/src/core/components/LocaleDateTimeCell/index.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+
+import { Flex, FlexItem, Icon, Tooltip } from '@patternfly/react-core';
+import { CalendarAltIcon, ClockIcon, HistoryIcon } from '@patternfly/react-icons';
+import { TableText } from '@patternfly/react-table';
+
+import { formatDateWithLocale, formatRelativeTime, getDateTooltip, parseDate } from '../../utils/dateFormatUtils';
+
+export interface LocaleDateTimeCellProps {
+ /** The date value to format - can be a string, number (timestamp), or Date object */
+ value?: string | number | Date | null | undefined;
+
+ /** Whether to show the date part (default: true) */
+ showDate?: boolean;
+
+ /** Whether to show the time part (default: true) */
+ showTime?: boolean;
+
+ /** Whether to show relative time (e.g., "2 hours ago") instead of absolute time */
+ showRelative?: boolean;
+
+ /** Whether to show an icon next to the formatted date */
+ showIcon?: boolean;
+
+ /** Custom icon to display (defaults to clock icon for timestamps) */
+ icon?: React.ReactNode;
+
+ /** Whether to use a compact format for space-constrained areas */
+ compact?: boolean;
+
+ /** Custom tooltip text (defaults to full timestamp) */
+ tooltip?: string;
+
+ /** Whether to show tooltip on hover (default: true) */
+ showTooltip?: boolean;
+
+ /** Custom CSS class name */
+ className?: string;
+
+ /** Placeholder text when value is null/undefined (default: "-") */
+ placeholder?: string;
+
+ /** Whether to use table cell styling optimized for data tables */
+ isTableCell?: boolean;
+
+ /** Whether to wrap text or truncate (default: true for table cells) */
+ truncate?: boolean;
+}
+
+/**
+ * A flexible date/time formatting component with browser locale support and icons
+ * Suitable for both table cells and general UI elements
+ */
+const LocaleDateTimeCell: React.FC = ({
+ value,
+ showDate = true,
+ showTime = true,
+ showRelative = false,
+ showIcon = true,
+ icon,
+ compact = false,
+ tooltip,
+ showTooltip = true,
+ className = '',
+ placeholder = '-',
+ isTableCell = false,
+ truncate = true
+}) => {
+ // Parse the input value to a Date object
+ const parsedDate = parseDate(value);
+
+ // If no valid date, show placeholder
+ if (!parsedDate) {
+ const content = {placeholder} ;
+
+ if (isTableCell) {
+ return {content} ;
+ }
+
+ return content;
+ }
+
+ // Format the date based on options
+ const formattedDate = showRelative
+ ? formatRelativeTime(parsedDate)
+ : formatDateWithLocale(parsedDate, {
+ showDate,
+ showTime,
+ compact
+ });
+
+ // Generate tooltip content
+ const tooltipContent = tooltip || getDateTooltip(parsedDate);
+
+ // Determine which icon to show
+ const getIcon = () => {
+ if (icon) {
+ return icon;
+ }
+
+ if (showRelative) {
+ return
+ {showIcon && (
+
+
+ {getIcon()}
+
+
+ )}
+
+ {formattedDate}
+
+
+ );
+
+ // Wrap with tooltip if enabled
+ const wrappedContent = showTooltip ? {content} : content;
+
+ // Return table-specific formatting if needed
+ if (isTableCell) {
+ return {wrappedContent} ;
+ }
+
+ return wrappedContent;
+};
+
+export default LocaleDateTimeCell;
diff --git a/components/console/src/core/components/ModalWrapper/index.tsx b/components/console/src/core/components/ModalWrapper/index.tsx
new file mode 100644
index 0000000..82aaa9b
--- /dev/null
+++ b/components/console/src/core/components/ModalWrapper/index.tsx
@@ -0,0 +1,107 @@
+import { FC, ReactNode } from 'react';
+
+import { Modal, ModalVariant, ModalBody, ModalHeader, ModalFooter, Button } from '@patternfly/react-core';
+
+import { ModalContextProvider, useModalContext } from '../../contexts/ModalContext';
+
+export interface ModalWrapperProps {
+ /** Modal title */
+ title: string;
+ /** Whether modal is open */
+ isOpen: boolean;
+ /** Close handler */
+ onClose: () => void;
+ /** Modal size variant */
+ variant?: ModalVariant;
+ /** Modal content */
+ children: ReactNode;
+ /** Whether modal has a body wrapper */
+ hasNoBodyWrapper?: boolean;
+ /** Whether to show footer with context actions */
+ showFooter?: boolean;
+ /** Optional aria-label for accessibility */
+ 'aria-label'?: string;
+ /** Optional aria-describedby for accessibility */
+ 'aria-describedby'?: string;
+}
+
+const ModalFooterButtons = function () {
+ const { actions } = useModalContext();
+ const { onSubmit, onCancel, isSubmitting, submitLabel, cancelLabel, isSubmitDisabled } = actions;
+
+ if (!onSubmit && !onCancel) {
+ return null;
+ }
+
+ return (
+
+ {onSubmit && (
+
+ {submitLabel || 'Submit'}
+
+ )}
+ {onCancel && (
+
+ {cancelLabel || 'Cancel'}
+
+ )}
+
+ );
+};
+
+/**
+ * Reusable modal wrapper component that provides consistent modal patterns
+ * Handles common modal structure and behavior across the application
+ */
+export const ModalWrapper: FC = function ({
+ title,
+ isOpen,
+ onClose,
+ variant = ModalVariant.medium,
+ children,
+ hasNoBodyWrapper = false,
+ showFooter = false,
+ 'aria-label': ariaLabel,
+ 'aria-describedby': ariaDescribedby
+}) {
+ if (hasNoBodyWrapper) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ {children}
+ {showFooter &&
+
+ );
+};
+
+export default ModalWrapper;
diff --git a/components/console/src/core/components/NavBar/index.tsx b/components/console/src/core/components/NavBar/index.tsx
index d6c6b74..be184a7 100644
--- a/components/console/src/core/components/NavBar/index.tsx
+++ b/components/console/src/core/components/NavBar/index.tsx
@@ -1,15 +1,27 @@
-import { Nav, NavItem, NavList } from '@patternfly/react-core';
+import { Nav, NavItem, NavList, NavGroup } from '@patternfly/react-core';
import { Link, useLocation } from 'react-router-dom';
-import { ROUTES } from '@config/routes';
+import { NAV_GROUPS, NAV_SINGLE_ITEMS } from '../../../config/navGroups';
const NavBar = function () {
const { pathname } = useLocation();
return (
+ {NAV_GROUPS.map((group) => (
+
+
+ {group.items.map(({ name, path }) => (
+
+
+ ))}
+
+
+ ))}
+ {/* Render single items as top-level NavItems */}
- {ROUTES.map(({ name, path }) => (
+ {NAV_SINGLE_ITEMS.map(({ name, path }) => (
diff --git a/components/console/src/core/components/NavigationViewLink/index.tsx b/components/console/src/core/components/NavigationViewLink/index.tsx
index 3c65a53..ad9cf49 100644
--- a/components/console/src/core/components/NavigationViewLink/index.tsx
+++ b/components/console/src/core/components/NavigationViewLink/index.tsx
@@ -1,6 +1,6 @@
import { FC, ReactElement } from 'react';
-import { Icon, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Icon, Content, ContentVariants } from '@patternfly/react-core';
import { ListIcon, TopologyIcon } from '@patternfly/react-icons';
import { Link } from 'react-router-dom';
@@ -15,13 +15,13 @@ const NavigationViewLink: FC<{ link: string; linkLabel: string; iconName?: 'topo
iconName = 'topologyIcon'
}) {
return (
-
-
+
+
{icons[iconName]} {linkLabel}
-
+
-
+
);
};
diff --git a/components/console/src/core/components/ResourceIcon/ResourceIcon.css b/components/console/src/core/components/ResourceIcon/ResourceIcon.css
index dd31331..e3f08dc 100644
--- a/components/console/src/core/components/ResourceIcon/ResourceIcon.css
+++ b/components/console/src/core/components/ResourceIcon/ResourceIcon.css
@@ -1,46 +1,18 @@
/* Resource icon */
.sk-resource-icon {
- background-color: var(--pf-v5-global--palette--black-500);
- border-radius: 20px;
- color: var(--pf-v5-global--palette--white);
- display: inline-block;
- flex-shrink: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ width: 22px;
+ height: 22px;
font-size: 12px;
- font-weight: 400;
- line-height: 20px;
- margin-right: 4px;
- min-width: 20px;
- padding: 0 4px;
- text-align: center;
- white-space: nowrap;
-}
-
-.sk-resource-site {
- background-color: var(--pf-v5-global--palette--green-600);
-}
-
-.sk-resource-process-group {
- background-color: var(--pf-v5-global--palette--light-green-500);
-}
-
-.sk-resource-service {
- background-color: var(--pf-v5-global--palette--purple-500);
-}
-
-.sk-resource-process {
- background-color: var(--pf-v5-global--palette--cyan-300);
-}
-
-.sk-resource-van {
- background-color: var(--pf-v5-global--palette--blue-300);
-}
-
-.sk-resource-invitation {
- background-color: var(--pf-v5-global--palette--gold-300);
-}
-
-.sk-resource-skupper {
- margin-left: -5px;
- min-width: 32px;
- background-color: transparent;
+ font-weight: 500;
+ font-family: inherit;
+ line-height: 1;
+ margin-right: 6px;
+ background: var(--pf-v6-global--palette--black-500); /* fallback, overridden inline */
+ color: var(--pf-t-global--palette--white);
+ -webkit-font-smoothing: antialiased;
+ user-select: none;
}
diff --git a/components/console/src/core/components/ResourceIcon/index.tsx b/components/console/src/core/components/ResourceIcon/index.tsx
index c6ef531..3a97c20 100644
--- a/components/console/src/core/components/ResourceIcon/index.tsx
+++ b/components/console/src/core/components/ResourceIcon/index.tsx
@@ -2,26 +2,67 @@ import { FC } from 'react';
import { Tooltip } from '@patternfly/react-core';
-import skupperProcessSVG from '@assets/skupper.svg';
+import skupperProcessSVG from '../../../assets/skupper.svg';
+import { hexColors } from '../../../config/colors';
import './ResourceIcon.css';
interface ResourceIconProps {
- type: 'site' | 'backbone' | 'link' | 'van' | 'invitation';
+ type: 'site' | 'backbone' | 'link' | 'van' | 'invitation' | 'accessPoint' | 'library' | 'application' | 'deployment';
}
const RESOURCE_MAP = {
- site: { class: 'sk-resource-site', symbol: 'S' },
- backbone: { class: 'sk-resource-process-group', symbol: 'B' },
- link: { class: 'sk-resource-process', symbol: 'L' },
- van: { class: 'sk-resource-van', symbol: 'V' },
- invitation: { class: 'sk-resource-invitation', symbol: 'I' }
+ backbone: {
+ class: 'sk-resource-backbone',
+ symbol: 'B',
+ style: { background: hexColors.Blue400, color: hexColors.White }
+ },
+ van: {
+ class: 'sk-resource-van',
+ symbol: 'V',
+ style: { background: hexColors.Orange700, color: hexColors.White }
+ },
+ site: {
+ class: 'sk-resource-site',
+ symbol: 'S',
+ style: { background: hexColors.Teal500, color: hexColors.White }
+ },
+ accessPoint: {
+ class: 'sk-resource-ap',
+ symbol: 'AP',
+ style: { background: hexColors.Red600, color: hexColors.White }
+ },
+ link: {
+ class: 'sk-resource-link',
+ symbol: 'L',
+ style: { background: hexColors.Purple300, color: hexColors.Black900 }
+ },
+ invitation: {
+ class: 'sk-resource-invitation',
+ symbol: 'I',
+ style: { background: hexColors.Green500, color: hexColors.White }
+ },
+ library: {
+ class: 'sk-resource-library',
+ symbol: 'LIB',
+ style: { background: hexColors.Purple700, color: hexColors.White }
+ },
+ application: {
+ class: 'sk-resource-applcation',
+ symbol: 'A',
+ style: { background: hexColors.Blue100, color: hexColors.Black900 }
+ },
+ deployment: {
+ class: 'sk-resource-deployment',
+ symbol: 'D',
+ style: { background: hexColors.Cyan500, color: hexColors.White }
+ }
};
const ResourceIcon: FC = function ({ type }) {
return (
-
+
{RESOURCE_MAP[type].symbol ||
diff --git a/components/console/src/core/components/SkBreadcrumb/index.tsx b/components/console/src/core/components/SkBreadcrumb/index.tsx
index e22ff76..003bb93 100644
--- a/components/console/src/core/components/SkBreadcrumb/index.tsx
+++ b/components/console/src/core/components/SkBreadcrumb/index.tsx
@@ -1,8 +1,7 @@
import { Breadcrumb, BreadcrumbHeading, BreadcrumbItem } from '@patternfly/react-core';
import { Link, useLocation, useSearchParams } from 'react-router-dom';
-import { getTestsIds } from '@config/testIds';
-import { getIdAndNameFromUrlParams } from '@core/utils/getIdAndNameFromUrlParams';
+import { getIdAndNameFromUrlParams } from '../../utils/getIdAndNameFromUrlParams';
const SkBreadcrumb = function () {
const { pathname } = useLocation();
@@ -18,15 +17,26 @@ const SkBreadcrumb = function () {
const queryParams = searchParams.size > 0 ? `?${searchParams.toString()}` : '';
+ // Dynamically capitalize and format segment names from URL
+ // Automatically handles both section names and detail pages with nome@id format
+ const formatDisplayName = (segment: string) =>
+ // Capitalize first letter and replace common abbreviations
+ segment
+ .split(/[-_]/) // Split on hyphens and underscores
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(' ');
+
return (
-
- {pathsNormalized.map((path, index) => (
-
- {path.name !== 'sites' && path.name !== 'invitations' && (
-
- ))}
+
+ {pathsNormalized.map((path, index) => {
+ const displayName = formatDisplayName(path.name);
+
+ return (
+
+
+ );
+ })}
{lastPath?.name}
diff --git a/components/console/src/core/components/SkIsLoading/index.tsx b/components/console/src/core/components/SkIsLoading/index.tsx
index cee5f9c..da54748 100644
--- a/components/console/src/core/components/SkIsLoading/index.tsx
+++ b/components/console/src/core/components/SkIsLoading/index.tsx
@@ -1,23 +1,15 @@
import { Bullseye, Spinner } from '@patternfly/react-core';
-import { getTestsIds } from '@config/testIds';
-
const SkIsLoading = function ({ customSize = '150px' }) {
return (
-
+
diff --git a/components/console/src/core/components/SkSearchFilter/SkSearchFilter.css b/components/console/src/core/components/SkSearchFilter/SkSearchFilter.css
index 2cb101f..b8cdf06 100644
--- a/components/console/src/core/components/SkSearchFilter/SkSearchFilter.css
+++ b/components/console/src/core/components/SkSearchFilter/SkSearchFilter.css
@@ -2,6 +2,6 @@
padding-left: 8px;
}
-.sk-search-filter .pf-v5-c-text-input-group__icon {
+.sk-search-filter .pf-t-c-text-input-group__icon {
display: none;
}
diff --git a/components/console/src/core/components/SkSearchFilter/__tests__/SkFilter.spec.tsx b/components/console/src/core/components/SkSearchFilter/__tests__/SkFilter.spec.tsx
deleted file mode 100644
index 6a79b0e..0000000
--- a/components/console/src/core/components/SkSearchFilter/__tests__/SkFilter.spec.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { render, fireEvent } from '@testing-library/react';
-
-import SkSearchFilter from '..';
-
-describe('SkSearchFilter', () => {
- const onSearchMock = jest.fn();
- const selectOptions = [
- { id: 'option1', name: 'Option 1' },
- { id: 'option2', name: 'Option 2' }
- ];
-
- it('should handle input change', () => {
- const { getByPlaceholderText } = render({statusMenuItems}
-
+
+
{selectOptions.map(({ id, name }) => {
const value = filterValues[id as keyof FilterValues];
if (value) {
return (
-
- handleDeleteFilter(id as string)}>
+
+ handleDeleteFilter(id as string)}>
{value}
-
-
+
+
);
}
diff --git a/components/console/src/core/components/SkTable/SkTable.interfaces.ts b/components/console/src/core/components/SkTable/SkTable.interfaces.ts
index da5e6b0..4537b49 100644
--- a/components/console/src/core/components/SkTable/SkTable.interfaces.ts
+++ b/components/console/src/core/components/SkTable/SkTable.interfaces.ts
@@ -1,3 +1,4 @@
+import { ComponentType } from 'react';
import { TdProps } from '@patternfly/react-table';
export type NonNullableValue = T extends null | undefined ? never : T;
@@ -6,7 +7,7 @@ export interface SKTableProps {
columns: SKColumn>[];
rows?: NonNullableValue[];
title?: string;
- customCells?: Record;
+ customCells?: Record>;
borders?: boolean;
isStriped?: boolean;
isPlain?: boolean;
@@ -17,6 +18,8 @@ export interface SKTableProps {
paginationPageSize?: number;
paginationTotalRows?: number;
onGetFilters?: Function;
+ emptyStateMessage?: string;
+ emptyStateDescription?: string;
}
export interface SKColumn extends TdProps {
diff --git a/components/console/src/core/components/SkTable/index.tsx b/components/console/src/core/components/SkTable/index.tsx
index c41529d..d74db1a 100644
--- a/components/console/src/core/components/SkTable/index.tsx
+++ b/components/console/src/core/components/SkTable/index.tsx
@@ -1,6 +1,6 @@
import { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useState, useMemo } from 'react';
-import { Card, CardBody, CardHeader, Flex, Text, TextContent, Title } from '@patternfly/react-core';
+import { Card, CardBody, CardHeader, Flex, Content, Title } from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
import {
InnerScrollContainer,
@@ -15,10 +15,9 @@ import {
Tr
} from '@patternfly/react-table';
-import { getValueFromNestedProperty } from '@core/utils/getValueFromNestedProperty';
-
import SkPagination from './SkPagination';
import { NonNullableValue, SKTableProps } from './SkTable.interfaces';
+import { getValueFromNestedProperty } from '../../utils/getValueFromNestedProperty';
import EmptyData from '../EmptyData';
const FIRST_PAGE_NUMBER = 1;
@@ -34,6 +33,8 @@ const SkTable = function ({
alwaysShowPagination = true,
paginationPageSize = PAGINATION_PAGE_SIZE,
paginationTotalRows = rows.length,
+ emptyStateMessage,
+ emptyStateDescription,
...props
}: SKTableProps) {
const [activeSortIndex, setActiveSortIndex] = useState();
@@ -146,14 +147,14 @@ const SkTable = function ({
{title && (
-
+
{title}
{!isPaginationEnabled && (
- {`${paginationTotalRows || rows.length} ${rows.length === 1 ? 'item' : 'items'}`}
+ {`${paginationTotalRows || rows.length} ${rows.length === 1 ? 'item' : 'items'}`}
)}
-
+
)}
@@ -165,7 +166,7 @@ const SkTable = function ({
{skColumns.map(({ name, prop, columnDescription, isStickyColumn, modifier }, index) => (
({
}
: undefined
}
+ screenReaderText={!name ? 'Actions' : undefined}
>
{name}
@@ -190,7 +192,7 @@ const SkTable = function ({
{skRows.length === 0 && (
-
)}
@@ -215,7 +217,7 @@ const SkTable = function ({
)}
{!Component && (
- {(format && format(value)) || value}
+ {String((format && format(value)) || value || '-')}
)}
diff --git a/components/console/src/core/components/SkUpdateButton/index.tsx b/components/console/src/core/components/SkUpdateButton/index.tsx
index dc7786e..2af5721 100644
--- a/components/console/src/core/components/SkUpdateButton/index.tsx
+++ b/components/console/src/core/components/SkUpdateButton/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo, MouseEvent as ReactMouseEvent, useState, useCallback, Ref, useRef } from 'react';
+import { FC, useMemo, MouseEvent as ReactMouseEvent, useState, useCallback, Ref, useRef, useEffect } from 'react';
import { Button, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
import { SyncIcon } from '@patternfly/react-icons';
@@ -17,6 +17,10 @@ export const refreshDataIntervalMap = [
key: 'Refresh off',
value: 0
},
+ {
+ key: '5s',
+ value: 5 * 1000
+ },
{
key: '15s',
value: 15 * 1000
@@ -48,7 +52,7 @@ const SkUpdateDataButton: FC = function ({
findRefreshDataIntervalLabelFromValue(refreshIntervalDefault)
);
- const refreshIntervalId = useRef();
+ const refreshIntervalId = useRef(undefined);
const refreshIntervalOptions = useMemo(
() =>
@@ -93,6 +97,12 @@ const SkUpdateDataButton: FC = function ({
[onRefreshIntervalSelected, revalidateLiveQueries]
);
+ useEffect(() => {
+ return () => {
+ clearInterval(refreshIntervalId.current);
+ };
+ }, []);
+
return (
<>
= function ({
= ({ title, resourceType, headingLevel = 'h1' }) => (
+
+ {resourceType && (
+
+
+ )}
+
+ {title}
+
+
+);
+
+export default TitleSection;
diff --git a/components/console/src/core/components/ToolbarActions/index.tsx b/components/console/src/core/components/ToolbarActions/index.tsx
new file mode 100644
index 0000000..8dec0f9
--- /dev/null
+++ b/components/console/src/core/components/ToolbarActions/index.tsx
@@ -0,0 +1,126 @@
+import { FC, ReactNode } from 'react';
+
+import { Toolbar, ToolbarContent, ToolbarItem, ToolbarGroup, Button, Title } from '@patternfly/react-core';
+import { PlusIcon } from '@patternfly/react-icons';
+
+export interface ToolbarAction {
+ label: string;
+ onClick: () => void;
+ icon?: ReactNode;
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
+ isDisabled?: boolean;
+}
+
+export interface ToolbarActionsProps {
+ /** Page/section title */
+ title?: string;
+ /** Page/section description */
+ description?: string;
+ /** Primary action (usually create/add) */
+ primaryAction?: ToolbarAction;
+ /** Secondary actions */
+ secondaryActions?: ToolbarAction[];
+ /** Custom content on the left side */
+ leftContent?: ReactNode;
+ /** Custom content on the right side */
+ rightContent?: ReactNode;
+ /** Whether to align secondary actions to the right */
+ alignSecondaryRight?: boolean;
+}
+
+/**
+ * Reusable toolbar component that provides consistent action patterns
+ * Handles common toolbar layouts with title, description, and actions
+ */
+export const ToolbarActions: FC = function ({
+ title,
+ description,
+ primaryAction,
+ secondaryActions = [],
+ leftContent,
+ rightContent,
+ alignSecondaryRight = true
+}) {
+ const renderAction = (action: ToolbarAction, key: string) => (
+
+ {action.label}
+
+ );
+
+ const primaryButton = primaryAction && renderAction(primaryAction, 'primary');
+ const secondaryButtons = secondaryActions.map((action, index) => renderAction(action, `secondary-${index}`));
+
+ return (
+
+
+ {/* Left side content */}
+ {leftContent && {leftContent} }
+
+ {/* Title */}
+ {title && (
+
+
+
{title}
+ {description &&
{description}
}
+
+ )}
+
+ {/* Secondary actions (left-aligned if not alignSecondaryRight) */}
+ {!alignSecondaryRight && secondaryButtons.length > 0 && (
+
+ {secondaryButtons.map((button) => (
+ {button}
+ ))}
+
+ )}
+
+ {/* Right-aligned actions */}
+
+ {/* Secondary actions (right-aligned) */}
+ {alignSecondaryRight &&
+ secondaryButtons.map((button) => {button} )}
+
+ {/* Primary action */}
+ {primaryButton && {primaryButton} }
+
+ {/* Custom right content */}
+ {rightContent && {rightContent} }
+
+
+
+ );
+};
+
+/**
+ * Quick helper for common "Create" button toolbar
+ */
+export const CreateToolbar: FC<{
+ title: string;
+ description?: string;
+ createLabel?: string;
+ onCreate: () => void;
+ customActions?: ToolbarAction[];
+}> = function ({ title, description, createLabel = 'Create', onCreate, customActions = [] }) {
+ return (
+
-
- {children}
-
-
- );
-};
-
-export default TransitionPage;
diff --git a/components/console/src/core/components/ViewDetailsCell/ViewDetailCell.interface.ts b/components/console/src/core/components/ViewDetailsCell/ViewDetailCell.interface.ts
deleted file mode 100644
index deef82a..0000000
--- a/components/console/src/core/components/ViewDetailsCell/ViewDetailCell.interface.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface ViewDetailCellProps {
- link?: string;
- value?: T;
- onClick?: Function;
-}
diff --git a/components/console/src/core/components/ViewDetailsCell/__tests__/ViewDetailCell.spec.tsx b/components/console/src/core/components/ViewDetailsCell/__tests__/ViewDetailCell.spec.tsx
deleted file mode 100644
index 134fd65..0000000
--- a/components/console/src/core/components/ViewDetailsCell/__tests__/ViewDetailCell.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { render, fireEvent } from '@testing-library/react';
-
-import ViewDetailCell from '../index';
-
-describe('ViewDetailCell', () => {
- it('should render a button with a search icon', () => {
- const { getByLabelText } = render(({ value, onClick }: ViewDetailCellProps) {
- const handleOnClick = useCallback(() => {
- if (onClick) {
- onClick(value);
- }
- }, [value, onClick]);
-
- return (
-
-
- );
-};
-
-export default ViewDetailCell;
diff --git a/components/console/src/core/components/Wrapper.tsx b/components/console/src/core/components/Wrapper.tsx
index 40fe325..4d6d1dd 100644
--- a/components/console/src/core/components/Wrapper.tsx
+++ b/components/console/src/core/components/Wrapper.tsx
@@ -3,7 +3,7 @@ import { ReactElement } from 'react';
import { QueryClient, QueryClientConfig, QueryClientProvider } from '@tanstack/react-query';
import { HashRouter } from 'react-router-dom';
-import { queryClientConfig } from '@config/reactQuery';
+import { queryClientConfig } from '../../config/reactQuery';
const QueryClientContext = function ({
config = {},
diff --git a/components/console/src/core/config/labels.json b/components/console/src/core/config/labels.json
new file mode 100644
index 0000000..edb47ee
--- /dev/null
+++ b/components/console/src/core/config/labels.json
@@ -0,0 +1,350 @@
+{
+ "buttons": {
+ "submit": "Submit",
+ "cancel": "Cancel",
+ "delete": "Delete",
+ "activate": "Activate",
+ "done": "Done",
+ "add": "Add",
+ "edit": "Edit",
+ "save": "Save",
+ "saveChanges": "Save Changes",
+ "reset": "Reset",
+ "newAttribute": "New attribute",
+ "editAttribute": "Edit attribute",
+ "tryAgain": "Try again",
+ "createBackboneTitle": "Create Backbone",
+ "createVansTitle": "Create Vans",
+ "createLibraryTitle": "Create Library",
+ "createSiteTitle": "Create Site",
+ "editSiteTitle": "Edit Site",
+ "createAccessPoint": "Create Access Point",
+ "addLinkTitle": "Add Link",
+ "addApTitle": "Add AP",
+ "addInvitation": "Add Invitation",
+ "addMember": "Add Member",
+ "deleting": "Deleting...",
+ "evict": "Evict",
+ "addInterface": "Add Interface",
+ "saveInterface": "Save Interface",
+ "addTemplate": "Add Template",
+ "saveTemplate": "Save Template",
+ "editTemplate": "Edit Template",
+ "createApplicationTitle": "Create Application",
+ "createDeploymentTitle": "Create Deployment",
+ "build": "Build",
+ "showLog": "Show Log",
+ "clear": "Clear",
+ "close": "Close",
+ "maximize": "Maximize",
+ "minimize": "Minimize",
+ "logs": "Logs",
+ "view": "View",
+ "fitView": "Fit View",
+ "center": "Center",
+ "resetLayout": "Reset Layout",
+ "saveTopology": "Save Layout",
+ "expire": "Expire"
+ },
+ "validation": {
+ "required": "is required",
+ "nameRequired": "Name is required",
+ "typeRequired": "Type is required",
+ "bodyStyleRequired": "Body type is required",
+ "backboneRequired": "Backbone is required",
+ "bothAccessPointsRequired": "Both claim and member access points are required",
+ "interfaceNameRequired": "Interface name is required",
+ "interfaceRoleRequired": "Interface role is required",
+ "interfaceNameExists": "Interface name already exists",
+ "failedToUpdateInterfaces": "Failed to update interfaces",
+ "descriptionRequired": "Description is required",
+ "templateContentRequired": "Template content is required",
+ "targetPlatformsRequired": "At least one target platform must be selected",
+ "validationError": "Validation Error",
+ "deploymentNameRequired": "Deployment name is required",
+ "applicationNameRequired": "Application name is required",
+ "vanNameRequired": "VAN name is required",
+ "failedToCreateDeployment": "Failed to create deployment"
+ },
+ "forms": {
+ "name": "Name",
+ "description": "Description",
+ "type": "Type",
+ "bodyStyle": "Body Type",
+ "provider": "Provider",
+ "revision": "Revision",
+ "claim": "Claim",
+ "peer": "Peer",
+ "member": "Member",
+ "manage": "Manage",
+ "startImmediately": "Start Immediately",
+ "endTime": "End Time",
+ "startTime": "Created At",
+ "noEndTime": "No End Time",
+ "claimAccessPoint": "Claim AP",
+ "selectClaimAccessPoint": "Select claim access point",
+ "deploymentName": "Deployment Name",
+ "applicationName": "Application Name",
+ "vanName": "VAN Name",
+ "lifecycle": "Lifecycle",
+ "enterDeploymentName": "Enter deployment name",
+ "enterApplicationName": "Enter application name",
+ "enterVanName": "Enter VAN name",
+ "active": "Active",
+ "inactive": "Inactive",
+ "pending": "Pending",
+ "failed": "Failed",
+ "noClaimAccessPoints": "No claim access points available",
+ "memberAccessPoint": "Member AP",
+ "selectMemberAccessPoint": "Select member access point",
+ "noMemberAccessPoints": "No member access points available",
+ "joinDeadline": "Join Deadline",
+ "oneHour": "1 hour",
+ "oneDay": "1 day",
+ "oneWeek": "1 week",
+ "oneYear": "1 year",
+ "memberClass": "Member Class",
+ "siteClass": "Site Class",
+ "memberNamePrefix": "Member Name Prefix (optional)",
+ "instanceLimit": "Instance Limit",
+ "unlimited": "Unlimited",
+ "interactive": "Interactive",
+ "interactiveDescription": "Allow interactive claiming of this invitation",
+ "attribute": "Attribute",
+ "default": "Default",
+ "defaultValue": "Default Value",
+ "actions": "Actions",
+ "addNewAttribute": "Add New Attribute",
+ "interfaceName": "Interface Name",
+ "enterInterfaceName": "Enter interface name",
+ "role": "Role",
+ "polarity": "Polarity",
+ "maxBindings": "Max Bindings",
+ "data": "Data",
+ "additionalData": "Additional Data",
+ "interfaceDetails": "Interface Details",
+ "editInterface": "Edit Interface",
+ "deleteInterface": "Delete",
+ "addNewInterface": "Add New Interface",
+ "libraryInterfacesTable": "Library interfaces table",
+ "noInterfacesDefined": "No interfaces defined. Add an interface to get started.",
+ "expand": "Expand",
+ "collapse": "Collapse",
+ "addNewTemplate": "Add New Template",
+ "editTemplate": "Edit Template",
+ "templateDetails": "Template Details",
+ "templateContent": "Template Content",
+ "noTemplatesDefined": "No templates defined. Add a template to get started.",
+ "compositeBlockEditorTitle": "Composite Block Editor",
+ "compositeBlockDefinition": "Composite Block Definition",
+ "compositeBlockEditorInfo": "The composite block editor will be available in a future release. This will provide:",
+ "compositeBlockEditorFeatures": [
+ "Visual block composition interface",
+ "Drag-and-drop block placement",
+ "Interface connection management",
+ "Real-time validation"
+ ],
+ "targetPlatforms": "Target Platforms",
+ "affinity": "Affinity",
+ "sourceCode": "Source Code",
+ "rootBlock": "Root Block",
+ "status": "Status"
+ },
+ "columns": {
+ "name": "Name",
+ "backbones": "Backbones",
+ "status": "TLS Status",
+ "deploymentStatus": "Deployment Status",
+ "startTime": "Created At",
+ "endTime": "End Time",
+ "provider": "Provider",
+ "type": "Type",
+ "revision": "Revision",
+ "bodyStyle": "Body Type",
+ "created": "Created",
+ "backboneId": "Backbone ID",
+ "multitenant": "Multitenant",
+ "targetPlatform": "Target Platform",
+ "tlsCertificateExpiration": "TLS Certificate Expiration",
+ "tlsCertificateRenewal": "TLS Certificate Renewal",
+ "failure": "Failure",
+ "cost": "Cost",
+ "classes": "Classes",
+ "instances": "Instances",
+ "fetches": "Fetches",
+ "joinDeadline": "Join deadline",
+ "interactive": "Interactive",
+ "targetPlatforms": "Target Platforms",
+ "affinity": "Affinity",
+ "description": "Description",
+ "date": "Date",
+ "author": "Author",
+ "message": "Message",
+ "changes": "Changes",
+ "actions": "Actions"
+ },
+ "navigation": {
+ "network": "Network",
+ "inventory": "Inventory",
+ "runtime": "Runtime",
+ "backbones": "Backbones",
+ "vans": "VANs",
+ "topology": "Topology",
+ "sites": "Sites",
+ "siteDetails": "Site Details",
+ "links": "Links",
+ "libraries": "Libraries",
+ "members": "Members",
+ "invitations": "Invitations",
+ "accessPoints": "Access Points",
+ "outgoingInterRouterLinks": "Outgoing Inter-Router Links",
+ "applications": "Applications",
+ "deployments": "Deployments",
+ "networkTopology": "Network Topology",
+ "topologyOverview": "Topology Overview",
+ "topologyDetails": "Details"
+ },
+ "emptyStates": {
+ "noBackbonesFound": "No Backbones found",
+ "noBackbonesDescription": "No backbones are currently available. Create a new backbone to get started.",
+ "noVansFound": "No VANs found for backbone",
+ "noSitesFound": "No sites found for backbone",
+ "noAccessPointsFound": "No access points found",
+ "noAccessPointsConfigured": "No access points are currently configured.",
+ "noLinksFound": "No links found",
+ "noLinksConfigured": "No links are currently configured.",
+ "noLibrariesFound": "No Libraries found",
+ "noInvitationsFound": "No invitations found for this VAN",
+ "noInvitationsDescription": "No invitations have been created for this VAN.",
+ "noApplicationsFound": "No Applications found",
+ "noHistoryAvailable": "No History Available",
+ "noHistoryDescription": "No revision history is available for this library block.",
+ "noTopologyData": "No topology to display",
+ "noTopologyDataDescription": "Create at least one backbone with a site to view the network topology",
+ "loadingTopology": "Loading topology data...",
+ "deploymentConfigurationNotAvailable": "Deployment Configuration Not Available",
+ "failedToLoadDeploymentLog": "Failed to Load Deployment Log",
+ "noDeploymentLogAvailable": "No Deployment Log Available"
+ },
+ "errors": {
+ "generic": "An error occurred",
+ "requiredField": "Fill out all required fields before continuing",
+ "deleteConstraint": "Cannot delete: It is still being used by other components.",
+ "noLibrariesFound": "No libraries found",
+ "noLibrariesDescription": "No libraries are currently available.",
+ "noDeploymentsFound": "No deployments found",
+ "noDeploymentsDescription": "No deployments are currently available.",
+ "noMembersFound": "No members found for this VAN",
+ "noMembersDescription": "No members are currently part of this VAN.",
+ "configurationError": "Configuration Error",
+ "failedToUpdateConfiguration": "Failed to update configuration",
+ "pageFoundTitle": "Page Not Found",
+ "httpErrorTitle": "An error occurred",
+ "httpErrorHelp": "To help us resolve the issue quickly, we recommend following these steps using the DevTool browser",
+ "httpErrorStepOpenDevTools": "Open the DevTool browser (F12)",
+ "httpErrorStepNetworkConsole": "Navigate to the \"Network\" and \"Console\" tab. Look for any error messages or red-highlighted lines. These will provide essential clues about what went wrong",
+ "httpErrorStepScreenshot": "Capture screenshots of the error and any relevant details displayed in the console. This will help our development team better understand the problem",
+ "consoleErrorTitle": "An unexpected error occurred",
+ "copy": "Copy",
+ "copied": "Copied",
+ "accessPointError": "Access Point Error",
+ "errorLoadingAccessPoints": "Error loading access points",
+ "unableToFetchAccessPoints": "Unable to fetch access points",
+ "linkError": "Link Error",
+ "linkDeletionConstraint": "Cannot delete: Link is still referenced.",
+ "linkDeletionGeneric": "Failed to delete link.",
+ "errorLoadingLinks": "Error loading links",
+ "unableToFetchLinks": "Unable to fetch links",
+ "linkCreationTooltip": "You need at least one peer access point to create a link.",
+ "linkCreationRequiresPeerAccessPoints": "Peer Access Point and destination Site Required",
+ "linkCreationDescription": "At least one peer access point is required to create a link.",
+ "evictNotImplemented": "Evict functionality is not yet available. This feature is currently under development.",
+ "errorLoadingTopology": "Error loading topology data",
+ "noPeerAccessPointsTitle": "No peer access points available for link creation",
+ "noPeerAccessPointsDescription": "To create links, you need peer access points in other sites within this backbone.",
+ "noPeerAccessPointsTooltip": "No peer access points available in other sites for creating links."
+ },
+ "descriptions": {
+ "backbones": "A backbone is the central core of a network, that connects sites",
+ "sites": "Sites are locations in the backbone network where a backbone router is deployed.",
+ "libraries": "Manage your application libraries and compositions",
+ "applications": "Manage and deploy your applications using library blocks",
+ "deployments": "Deploy and manage application instances across your network infrastructure",
+ "vans": "Virtual Application Networks (VANs) using this backbone for secure connectivity.",
+ "invitations": "Invitations allow you to add new members to this VAN. Each invitation can be used to join the network according to its configuration.",
+ "members": "Members are sites that have joined this VAN using an invitation. They participate in the application network.",
+ "configuration": "Manage configuration template attributes",
+ "interfaces": "Configure block interfaces and connections",
+ "bodySimple": "Simple block specification",
+ "bodyComposite": "Composite block definition",
+ "test": "Test composite block configuration",
+ "history": "View block revision history",
+ "revisionHistory": "Revision History",
+ "revisionDetails": "Revision Details",
+ "loading": "Loading log...",
+ "failedToLoad": "Failed to load log:",
+ "selectApplication": "Select an application to view its build log",
+ "noBuildLogAvailable": "No build log available for this application",
+ "loadingHistory": "Loading revision history..."
+ },
+ "generic": {
+ "id": "ID",
+ "name": "Name",
+ "status": "TLS Status",
+ "backbone": "Backbone",
+ "startTime": "Created At",
+ "endTime": "End Time",
+ "tlsExpiration": "CA Expiration",
+ "tlsRenewal": "CA Renewal Time",
+ "unknown": "Unknown",
+ "unnamed": "Unnamed",
+ "notAssigned": "Not assigned",
+ "notStarted": "Not started",
+ "notEnded": "Not ended",
+ "viaInvitation": "via invitation",
+ "lastHeartbeat": "Last heartbeat",
+ "never": "Never",
+ "firstActive": "First active",
+ "notActive": "Not active",
+ "evicting": "Evicting...",
+ "evict": "Evict",
+ "yes": "Yes",
+ "no": "No",
+ "enabled": "Enabled",
+ "disabled": "Disabled",
+ "notAvailable": "Not available",
+ "noHostBound": "No host bound",
+ "noAddress": "No address",
+ "configuration": "Configuration",
+ "interfaces": "Interfaces",
+ "body": "Body",
+ "test": "Test",
+ "history": "Revision History"
+ },
+
+ "placeholders": {
+ "attributeName": "Attribute name",
+ "defaultValue": "Default value",
+ "attributeDescription": "Attribute description",
+ "sourceCodePlaceholder": "Enter source code or configuration...",
+ "rootBlockPlaceholder": "Enter root block name..."
+ },
+ "status": {
+ "active": "Active",
+ "pending": "Pending",
+ "new": "New",
+ "expired": "Expired",
+ "failed": "Failed",
+ "initializing": "Initializing",
+ "creatingResources": "Creating resources",
+ "generatingCertificates": "Generating certificates",
+ "configuringIssuer": "Configuring issuer",
+ "deploying": "Deploying",
+ "status": "Status",
+ "terminating": "Terminating",
+ "unknown": "Unknown"
+ },
+ "config": {
+ "bodyStyles": ["simple", "composite"]
+ }
+}
diff --git a/components/console/src/core/config/labels.ts b/components/console/src/core/config/labels.ts
new file mode 100644
index 0000000..2351237
--- /dev/null
+++ b/components/console/src/core/config/labels.ts
@@ -0,0 +1,2 @@
+import labels from './labels.json';
+export default labels;
diff --git a/components/console/src/core/constants/ValidationMessages.enum.ts b/components/console/src/core/constants/ValidationMessages.enum.ts
new file mode 100644
index 0000000..e69de29
diff --git a/components/console/src/core/contexts/ModalContext.tsx b/components/console/src/core/contexts/ModalContext.tsx
new file mode 100644
index 0000000..799b40a
--- /dev/null
+++ b/components/console/src/core/contexts/ModalContext.tsx
@@ -0,0 +1,41 @@
+import { createContext, useContext, ReactNode, useState, useCallback } from 'react';
+
+interface ModalActionsType {
+ onSubmit?: () => void;
+ onCancel?: () => void;
+ isSubmitting?: boolean;
+ submitLabel?: string;
+ cancelLabel?: string;
+ isSubmitDisabled?: boolean;
+}
+
+interface ModalContextType {
+ actions: ModalActionsType;
+ setActions: (actions: ModalActionsType) => void;
+ updateActions: (updates: Partial) => void;
+}
+
+const ModalContext = createContext(null);
+
+export const useModalContext = () => {
+ const context = useContext(ModalContext);
+ if (!context) {
+ throw new Error('useModalContext must be used within a ModalContextProvider');
+ }
+
+ return context;
+};
+
+export const ModalContextProvider = function ({ children }: { children: ReactNode }) {
+ const [actions, setActionsState] = useState({});
+
+ const setActions = useCallback((newActions: ModalActionsType) => {
+ setActionsState(newActions);
+ }, []);
+
+ const updateActions = useCallback((updates: Partial) => {
+ setActionsState((prev) => ({ ...prev, ...updates }));
+ }, []);
+
+ return {children} ;
+};
diff --git a/components/console/src/core/utils/formatLatency.ts b/components/console/src/core/hooks/formatLatency.ts
similarity index 100%
rename from components/console/src/core/utils/formatLatency.ts
rename to components/console/src/core/hooks/formatLatency.ts
diff --git a/components/console/src/core/hooks/useModal.ts b/components/console/src/core/hooks/useModal.ts
new file mode 100644
index 0000000..3daa13c
--- /dev/null
+++ b/components/console/src/core/hooks/useModal.ts
@@ -0,0 +1,37 @@
+import { useCallback, useState } from 'react';
+
+/**
+ * Generic modal state management hook
+ * Provides consistent modal state management across the application
+ */
+export const useModal = () => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [editingItem, setEditingItem] = useState();
+
+ const openModal = useCallback(() => {
+ setIsOpen(true);
+ }, []);
+
+ const openEditModal = useCallback((item: T) => {
+ setEditingItem(item);
+ setIsOpen(true);
+ }, []);
+
+ const closeModal = useCallback(() => {
+ setIsOpen(false);
+ setEditingItem(undefined);
+ }, []);
+
+ const toggleModal = useCallback(() => {
+ setIsOpen((prev) => !prev);
+ }, []);
+
+ return {
+ isOpen,
+ editingItem,
+ openModal,
+ openEditModal,
+ closeModal,
+ toggleModal
+ };
+};
diff --git a/components/console/src/core/hooks/useModalActions.ts b/components/console/src/core/hooks/useModalActions.ts
new file mode 100644
index 0000000..74e74dd
--- /dev/null
+++ b/components/console/src/core/hooks/useModalActions.ts
@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+
+import { useModalContext } from '../contexts/ModalContext';
+
+interface UseModalActionsProps {
+ onSubmit?: () => void;
+ onCancel?: () => void;
+ isSubmitting?: boolean;
+ submitLabel?: string;
+ cancelLabel?: string;
+ isSubmitDisabled?: boolean;
+}
+
+export const useModalActions = ({
+ onSubmit,
+ onCancel,
+ isSubmitting = false,
+ submitLabel,
+ cancelLabel,
+ isSubmitDisabled = false
+}: UseModalActionsProps) => {
+ const { setActions } = useModalContext();
+
+ useEffect(() => {
+ setActions({
+ onSubmit,
+ onCancel,
+ isSubmitting,
+ submitLabel,
+ cancelLabel,
+ isSubmitDisabled
+ });
+ }, [onSubmit, onCancel, isSubmitting, submitLabel, cancelLabel, isSubmitDisabled, setActions]);
+
+ // Cleanup quando il componente viene smontato
+ useEffect(
+ () => () => {
+ setActions({});
+ },
+ [setActions]
+ );
+};
diff --git a/components/console/src/core/hooks/useMutationWithCacheInvalidation.ts b/components/console/src/core/hooks/useMutationWithCacheInvalidation.ts
new file mode 100644
index 0000000..311cb97
--- /dev/null
+++ b/components/console/src/core/hooks/useMutationWithCacheInvalidation.ts
@@ -0,0 +1,220 @@
+import { useMutation, useQueryClient, MutationFunction, UseMutationOptions } from '@tanstack/react-query';
+
+import { QueriesBackbones } from '../../pages/Backbones/Backbones.enum';
+import { QueriesTopology } from '../../pages/Topology/Topology.enum';
+import { QueriesVans } from '../../pages/Vans/Vans.enum';
+import { QueriesApplications } from '../../pages/Applications/Applications.enum';
+import { QueriesLibraries } from '../../pages/Libraries/Libraries.enum';
+
+/**
+ * Configuration for cache invalidation patterns
+ */
+export interface CacheInvalidationConfig {
+ /** Specific query keys to invalidate */
+ queryKeys?: string[][];
+ /** Invalidate all backbone-related queries */
+ invalidateBackbones?: boolean;
+ /** Invalidate topology data */
+ invalidateTopology?: boolean;
+ /** Invalidate VANs data */
+ invalidateVans?: boolean;
+ /** Invalidate applications data */
+ invalidateApplications?: boolean;
+ /** Invalidate libraries data */
+ invalidateLibraries?: boolean;
+ /** Invalidate specific backbone sites by backbone ID */
+ invalidateBackboneSites?: string[];
+ /** Custom invalidation function */
+ customInvalidation?: (queryClient: ReturnType) => void;
+}
+
+/**
+ * Hook that wraps useMutation with automatic cache invalidation
+ *
+ * @param mutationFn - The mutation function
+ * @param invalidationConfig - Configuration for which caches to invalidate
+ * @param options - Additional mutation options
+ * @returns Enhanced mutation with automatic cache invalidation
+ */
+export const useMutationWithCacheInvalidation = (
+ mutationFn: MutationFunction,
+ invalidationConfig: CacheInvalidationConfig,
+ options?: UseMutationOptions
+) => {
+ const queryClient = useQueryClient();
+
+ const invalidateQueries = async () => {
+ const promises: Promise[] = [];
+
+ // Invalidate specific query keys
+ if (invalidationConfig.queryKeys) {
+ for (const queryKey of invalidationConfig.queryKeys) {
+ promises.push(queryClient.invalidateQueries({ queryKey }));
+ }
+ }
+
+ // Invalidate backbone-related queries
+ if (invalidationConfig.invalidateBackbones) {
+ promises.push(
+ queryClient.invalidateQueries({ queryKey: [QueriesBackbones.GetBackbones] }),
+ queryClient.invalidateQueries({ queryKey: [QueriesBackbones.GetLinks] }),
+ queryClient.invalidateQueries({ queryKey: [QueriesBackbones.GetIncomingLinks] })
+ );
+ }
+
+ // Invalidate specific backbone sites
+ if (invalidationConfig.invalidateBackboneSites) {
+ for (const backboneId of invalidationConfig.invalidateBackboneSites) {
+ promises.push(
+ queryClient.invalidateQueries({ queryKey: [QueriesBackbones.GetSites, backboneId] })
+ );
+ }
+ }
+
+ // Invalidate topology data
+ if (invalidationConfig.invalidateTopology) {
+ promises.push(
+ queryClient.invalidateQueries({ queryKey: [QueriesTopology.GetTopologyData] }),
+ queryClient.invalidateQueries({ queryKey: [QueriesTopology.GetBackbones] }),
+ queryClient.invalidateQueries({ queryKey: [QueriesTopology.GetSites] })
+ );
+ }
+
+ // Invalidate VANs data
+ if (invalidationConfig.invalidateVans) {
+ promises.push(
+ queryClient.invalidateQueries({ queryKey: [QueriesVans.GetVans] }),
+ queryClient.invalidateQueries({ queryKey: [QueriesVans.GetVanMembers] }),
+ queryClient.invalidateQueries({ queryKey: [QueriesVans.GetVanInvitations] })
+ );
+ }
+
+ // Invalidate applications data
+ if (invalidationConfig.invalidateApplications) {
+ promises.push(
+ queryClient.invalidateQueries({ queryKey: [QueriesApplications.GetApplications] })
+ );
+ }
+
+ // Invalidate libraries data
+ if (invalidationConfig.invalidateLibraries) {
+ promises.push(
+ queryClient.invalidateQueries({ queryKey: [QueriesLibraries.GetLibraries] }),
+ queryClient.invalidateQueries({ queryKey: [QueriesLibraries.GetLibraryBlocks] })
+ );
+ }
+
+ // Custom invalidation
+ if (invalidationConfig.customInvalidation) {
+ invalidationConfig.customInvalidation(queryClient);
+ }
+
+ await Promise.all(promises);
+ };
+
+ return useMutation({
+ ...options,
+ mutationFn,
+ onSuccess: async (data, variables, context) => {
+ // Execute cache invalidation
+ await invalidateQueries();
+
+ // Call original onSuccess if provided
+ if (options?.onSuccess) {
+ await options.onSuccess(data, variables, context);
+ }
+ },
+ });
+};
+
+/**
+ * Predefined invalidation configurations for common operations
+ */
+export const CacheInvalidationPresets = {
+ // Backbone operations
+ createBackbone: {
+ invalidateBackbones: true,
+ invalidateTopology: true,
+ } as CacheInvalidationConfig,
+
+ deleteBackbone: {
+ invalidateBackbones: true,
+ invalidateTopology: true,
+ } as CacheInvalidationConfig,
+
+ activateBackbone: {
+ invalidateBackbones: true,
+ invalidateTopology: true,
+ } as CacheInvalidationConfig,
+
+ // Site operations
+ createSite: (backboneId: string) => ({
+ invalidateBackboneSites: [backboneId],
+ invalidateTopology: true,
+ }) as CacheInvalidationConfig,
+
+ deleteSite: (backboneId: string) => ({
+ invalidateBackboneSites: [backboneId],
+ invalidateTopology: true,
+ }) as CacheInvalidationConfig,
+
+ updateSite: (backboneId: string) => ({
+ invalidateBackboneSites: [backboneId],
+ invalidateTopology: true,
+ }) as CacheInvalidationConfig,
+
+ // Link operations
+ createLink: (backboneId: string) => ({
+ invalidateBackboneSites: [backboneId],
+ invalidateTopology: true,
+ queryKeys: [[QueriesBackbones.GetLinks]],
+ }) as CacheInvalidationConfig,
+
+ deleteLink: (backboneId: string) => ({
+ invalidateBackboneSites: [backboneId],
+ invalidateTopology: true,
+ queryKeys: [[QueriesBackbones.GetLinks]],
+ }) as CacheInvalidationConfig,
+
+ // Access Point operations
+ createAccessPoint: (backboneId: string) => ({
+ invalidateBackboneSites: [backboneId],
+ invalidateTopology: true,
+ }) as CacheInvalidationConfig,
+
+ deleteAccessPoint: (backboneId: string) => ({
+ invalidateBackboneSites: [backboneId],
+ invalidateTopology: true,
+ }) as CacheInvalidationConfig,
+
+ // VAN operations
+ createVan: {
+ invalidateVans: true,
+ } as CacheInvalidationConfig,
+
+ deleteVan: {
+ invalidateVans: true,
+ } as CacheInvalidationConfig,
+
+ // Application operations
+ createApplication: {
+ invalidateApplications: true,
+ } as CacheInvalidationConfig,
+
+ deleteApplication: {
+ invalidateApplications: true,
+ } as CacheInvalidationConfig,
+
+ buildApplication: {
+ invalidateApplications: true,
+ } as CacheInvalidationConfig,
+
+ // Library operations
+ createLibrary: {
+ invalidateLibraries: true,
+ } as CacheInvalidationConfig,
+
+ deleteLibrary: {
+ invalidateLibraries: true,
+ } as CacheInvalidationConfig,
+};
diff --git a/components/console/src/core/utils/convertToPercentage.spec.ts b/components/console/src/core/utils/convertToPercentage.spec.ts
deleted file mode 100644
index f7d9b74..0000000
--- a/components/console/src/core/utils/convertToPercentage.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { convertToPercentage } from './convertToPercentage';
-
-describe('convertToPercentage', () => {
- it('should return a percentage string removing the cents', () => {
- expect(convertToPercentage(3, 10)).toBe('30%');
- expect(convertToPercentage(2, 7)).toBe('29%');
- expect(convertToPercentage(0, 100)).toBe('0%');
- expect(convertToPercentage(10, 0)).toBe('Infinity%');
- expect(convertToPercentage(NaN, 100)).toBeNull();
- });
-
- it('should return null when the input is invalid', () => {
- expect(convertToPercentage(3, NaN)).toBeNull();
- expect(convertToPercentage(NaN, NaN)).toBeNull();
- });
-
- it('should handle values that are too large for Number.MAX_SAFE_INTEGER', () => {
- expect(convertToPercentage(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER)).toBe('100%');
- });
-
- it('should handle negative values', () => {
- expect(convertToPercentage(-5, 20)).toBe('-25%');
- expect(convertToPercentage(5, -20)).toBe('-25%');
- expect(convertToPercentage(-5, -20)).toBe('25%');
- });
-
- it('should handle decimal values', () => {
- expect(convertToPercentage(3.14, 10)).toBe('31%');
- expect(convertToPercentage(2, 7.5)).toBe('27%');
- expect(convertToPercentage(1, 3.33)).toBe('30%');
- expect(convertToPercentage(0.1, 10)).toBe('1%');
- expect(convertToPercentage(0.001, 100)).toBe('0%');
- });
-});
diff --git a/components/console/src/core/utils/dateFormatUtils.ts b/components/console/src/core/utils/dateFormatUtils.ts
new file mode 100644
index 0000000..b76b0a9
--- /dev/null
+++ b/components/console/src/core/utils/dateFormatUtils.ts
@@ -0,0 +1,156 @@
+/**
+ * Utility functions for date formatting with browser locale support
+ * Uses only native JavaScript APIs for simple, dependency-free date handling
+ */
+
+// Type declarations for global objects that might not be available in all environments
+declare const navigator: { language: string } | undefined;
+declare const console: { warn: (message?: any, ...optionalParams: any[]) => void } | undefined;
+
+/**
+ * Gets the browser locale or falls back to 'en-US'
+ */
+function getBrowserLocale(): string {
+ if (typeof navigator !== 'undefined' && navigator?.language) {
+ return navigator.language;
+ }
+ return 'en-US';
+}
+
+/**
+ * Formats a date using the browser's locale settings
+ */
+export function formatDateWithLocale(
+ date: Date,
+ options: {
+ showDate?: boolean;
+ showTime?: boolean;
+ dateStyle?: Intl.DateTimeFormatOptions['dateStyle'];
+ timeStyle?: Intl.DateTimeFormatOptions['timeStyle'];
+ locale?: string;
+ compact?: boolean;
+ } = {}
+): string {
+ const {
+ showDate = true,
+ showTime = true,
+ dateStyle = 'medium',
+ timeStyle = 'medium',
+ locale,
+ compact = false
+ } = options;
+
+ // Use browser locale if none specified
+ const formatLocale = locale || getBrowserLocale();
+
+ // For compact format, use shorter styles
+ const actualDateStyle = compact ? 'short' : dateStyle;
+ const actualTimeStyle = compact ? 'short' : timeStyle;
+
+ try {
+ if (showDate && showTime) {
+ return new Intl.DateTimeFormat(formatLocale, {
+ dateStyle: actualDateStyle,
+ timeStyle: actualTimeStyle
+ }).format(date);
+ } else if (showDate) {
+ return new Intl.DateTimeFormat(formatLocale, {
+ dateStyle: actualDateStyle
+ }).format(date);
+ } else if (showTime) {
+ return new Intl.DateTimeFormat(formatLocale, {
+ timeStyle: actualTimeStyle
+ }).format(date);
+ }
+ } catch (error) {
+ // Fallback to standard formatting if locale is not supported
+ if (typeof console !== 'undefined' && console?.warn) {
+ console.warn('Locale formatting failed, using fallback:', error);
+ }
+ return date.toLocaleString();
+ }
+
+ return date.toLocaleString();
+}
+
+/**
+ * Formats relative time (e.g., "2 hours ago", "in 3 days") using native JavaScript
+ */
+export function formatRelativeTime(date: Date): string {
+ const now = new Date();
+ const diffInMs = now.getTime() - date.getTime();
+ const diffInSeconds = Math.floor(diffInMs / 1000);
+ const diffInMinutes = Math.floor(diffInSeconds / 60);
+ const diffInHours = Math.floor(diffInMinutes / 60);
+ const diffInDays = Math.floor(diffInHours / 24);
+ const diffInWeeks = Math.floor(diffInDays / 7);
+ const diffInMonths = Math.floor(diffInDays / 30);
+ const diffInYears = Math.floor(diffInDays / 365);
+
+ const formatUnit = (value: number, unit: string) => {
+ const absValue = Math.abs(value);
+ const plural = absValue !== 1 ? 's' : '';
+ const direction = value < 0 ? 'in ' : '';
+ const suffix = value >= 0 ? ' ago' : '';
+ return `${direction}${absValue} ${unit}${plural}${suffix}`;
+ };
+
+ if (Math.abs(diffInYears) >= 1) {
+ return formatUnit(diffInYears, 'year');
+ } else if (Math.abs(diffInMonths) >= 1) {
+ return formatUnit(diffInMonths, 'month');
+ } else if (Math.abs(diffInWeeks) >= 1) {
+ return formatUnit(diffInWeeks, 'week');
+ } else if (Math.abs(diffInDays) >= 1) {
+ return formatUnit(diffInDays, 'day');
+ } else if (Math.abs(diffInHours) >= 1) {
+ return formatUnit(diffInHours, 'hour');
+ } else if (Math.abs(diffInMinutes) >= 1) {
+ return formatUnit(diffInMinutes, 'minute');
+ } else {
+ return formatUnit(diffInSeconds, 'second');
+ }
+}
+
+/**
+ * Converts various date inputs to a Date object
+ */
+export function parseDate(value: string | number | Date | null | undefined): Date | null {
+ if (!value) {
+ return null;
+ }
+
+ if (value instanceof Date) {
+ return isNaN(value.getTime()) ? null : value;
+ }
+
+ if (typeof value === 'number') {
+ // Handle both milliseconds and seconds timestamps
+ const timestamp = value < 1e12 ? value * 1000 : value;
+ const date = new Date(timestamp);
+ return isNaN(date.getTime()) ? null : date;
+ }
+
+ if (typeof value === 'string') {
+ const date = new Date(value);
+ return isNaN(date.getTime()) ? null : date;
+ }
+
+ return null;
+}
+
+/**
+ * Gets a comprehensive tooltip with full date/time information
+ */
+export function getDateTooltip(date: Date, locale?: string): string {
+ const formatLocale = locale || getBrowserLocale();
+
+ try {
+ return new Intl.DateTimeFormat(formatLocale, {
+ dateStyle: 'full',
+ timeStyle: 'long'
+ }).format(date);
+ } catch (error) {
+ return date.toString();
+ }
+}
diff --git a/components/console/src/core/utils/deepMergeWithJSONObjects.spec.ts b/components/console/src/core/utils/deepMergeWithJSONObjects.spec.ts
deleted file mode 100644
index 6084486..0000000
--- a/components/console/src/core/utils/deepMergeWithJSONObjects.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { deepMergeJSONObjects } from './deepMergeWithJSONObjects';
-
-describe('deepMergeJSONObjects', () => {
- it('should merge two objects with shallow properties', () => {
- const obj1 = { a: 1, b: 2 };
- const obj2 = { b: 3, c: 4 };
-
- const result = deepMergeJSONObjects(obj1, obj2);
-
- expect(result).toEqual({ a: 1, b: 3, c: 4 });
- });
-
- it('should merge two objects with nested properties', () => {
- const obj1 = {
- a: 1,
- b: { c: 2, d: 6 }
- };
- const obj2 = {
- a: 0,
- b: { c: 1 }
- };
-
- const result = deepMergeJSONObjects<{ a: number; b: { c: number; d?: number } }>(obj1, obj2);
-
- expect(result).toEqual({
- a: 0,
- b: { c: 1, d: 6 }
- });
- });
-
- it('should handle empty objects', () => {
- const obj1 = {};
- const obj2 = { a: 1, b: { c: 2 } };
-
- const result = deepMergeJSONObjects(obj1, obj2);
-
- expect(result).toEqual({ a: 1, b: { c: 2 } });
- });
-});
diff --git a/components/console/src/core/utils/formatBytes.spec.ts b/components/console/src/core/utils/formatBytes.spec.ts
deleted file mode 100644
index e8294c7..0000000
--- a/components/console/src/core/utils/formatBytes.spec.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { formatByteRate, formatBytes } from './formatBytes';
-
-describe('formatBytes', () => {
- it('should return an empty string if bytesSized is NaN', () => {
- const bytes = -1024;
- const result = formatBytes(bytes);
-
- expect(result).toBe('');
- });
-
- it('should return "1 B" for 1 byte', () => {
- const result = formatBytes(1);
- expect(result).toEqual('1 B');
- });
-
- it('should return "1 KB" for 1024 bytes', () => {
- const result = formatBytes(1024);
- expect(result).toEqual('1 KB');
- });
-
- it('should return "0 B" for 0 byte', () => {
- const result = formatBytes(0);
- expect(result).toEqual('0 B');
- });
-
- it('should return empty string for negative bytes', () => {
- const result = formatBytes(-1024);
- expect(result).toEqual('');
- });
-
- it('should return "1.12 MB" for 1171868 bytes with 2 decimal points', () => {
- const result = formatBytes(1171868, 2);
- expect(result).toEqual('1.12 MB');
- });
-
- it('should return "1023 B" for 1023 bytes', () => {
- const result = formatBytes(1023);
- expect(result).toEqual('1023 B');
- });
-
- it('should return "1023 B" for 1023 bytes with 2 decimal points', () => {
- const result = formatBytes(1023, 2);
- expect(result).toEqual('1023 B');
- });
-});
-
-describe('formatByteRate', () => {
- it('should format the byte rate correctly with default decimals', () => {
- const byteRate = 1024 * 5; // 5 KB/s
- const result = formatByteRate(byteRate);
- const expectedFormatted = '5 KB/s';
-
- expect(result).toBe(expectedFormatted);
- });
-
- it('should format the byte rate correctly removing 0 padding', () => {
- const byteRate = 1024 * 5;
- const decimals = 4;
- const result = formatByteRate(byteRate, decimals);
- const expectedFormatted = '5 KB/s';
-
- expect(result).toBe(expectedFormatted);
- });
-
- it('should format the byte rate correctly with custom decimals', () => {
- const byteRate = 1024 * 2.54321;
- const decimals = 3;
- const result = formatByteRate(byteRate, decimals);
- const expectedFormatted = '2.543 KB/s';
-
- expect(result).toBe(expectedFormatted);
- });
-
- it('should return an empty string for NaN input', () => {
- const result = formatByteRate(NaN);
- expect(result).toBe('');
- });
-
- it('should return an empty string for negative input', () => {
- const result = formatByteRate(-100);
- expect(result).toBe('');
- });
-
- it('should return "0 B/s" for input 0', () => {
- const result = formatByteRate(0);
- expect(result).toBe('0 B/s');
- });
-});
diff --git a/components/console/src/core/utils/formatChartDate.spec.ts b/components/console/src/core/utils/formatChartDate.spec.ts
deleted file mode 100644
index 4134f30..0000000
--- a/components/console/src/core/utils/formatChartDate.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { formatChartDate, getDayFromTimestamp, getMonthAndDay, getTimeFromTimestamp } from './formatChartDate';
-
-const fixedDate = new Date('2023-08-02T23:00:00');
-jest.spyOn(Date, 'now').mockImplementation(() => fixedDate.getTime());
-
-describe('formatChartDate', () => {
- const now = Date.now(); // Current time in milliseconds
- const oneMinuteAgo = now - 60 * 1000;
- const twoDaysAgo = now - 2 * 24 * 3600 * 1000;
- const twoWeeksAgo = now - 14 * 24 * 3600 * 1000;
-
- it('should format date with time (minutes and seconds) if start is more than one minute ago', () => {
- const timestamp = now / 1000; // Current timestamp in seconds
- const start = now / 1000;
- const result = formatChartDate(timestamp, start);
- const expectedFormatted = getTimeFromTimestamp(timestamp);
-
- expect(result).toBe(expectedFormatted);
- });
-
- it('should format date with time (minutes and seconds) if start is more than one minute ago', () => {
- const timestamp = now / 1000; // Current timestamp in seconds
- const start = oneMinuteAgo / 1000;
- const result = formatChartDate(timestamp, start);
- const expectedFormatted = getTimeFromTimestamp(timestamp, true);
-
- expect(result).toBe(expectedFormatted);
- });
-
- it('should format date with day of the week and time if start is more than two days ago', () => {
- const timestamp = twoDaysAgo / 1000;
- const start = twoDaysAgo / 1000;
- const result = formatChartDate(timestamp, start);
- const expectedFormatted = getDayFromTimestamp(timestamp);
-
- expect(result).toBe(expectedFormatted);
- });
-
- it('should format date with month abbreviation and day if start is more than two weeks ago', () => {
- const timestamp = twoWeeksAgo / 1000;
- const start = twoWeeksAgo / 1000;
- const result = formatChartDate(timestamp, start);
- const expectedFormatted = getMonthAndDay(timestamp);
-
- expect(result).toBe(expectedFormatted);
- });
-});
diff --git a/components/console/src/core/utils/formatLatency.spec.ts b/components/console/src/core/utils/formatLatency.spec.ts
deleted file mode 100644
index 6f79a23..0000000
--- a/components/console/src/core/utils/formatLatency.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { formatLatency } from './formatLatency';
-
-describe('formatLatency', () => {
- it('should format latency correctly with default options', () => {
- expect(formatLatency(100)).toEqual('100 µs');
- expect(formatLatency(5000)).toEqual('5 ms');
- expect(formatLatency(1500000)).toEqual('1.5 sec');
- });
-
- it('should format latency with custom start size', () => {
- expect(formatLatency(100, { startSize: 'ms' })).toEqual('100 ms');
- });
-
- it('should format latency with custom decimal places', () => {
- expect(formatLatency(1234567, { decimals: 4 })).toEqual('1.2346 sec');
- expect(formatLatency(1234567, { decimals: 0 })).toEqual('1 sec');
- });
-
- it('should handle time of 0', () => {
- expect(formatLatency(0)).toEqual('0 µs');
- });
-
- it('should handle NaN values', () => {
- expect(formatLatency(NaN)).toEqual('');
- expect(formatLatency(123, { decimals: NaN })).toEqual('123 µs');
- });
-});
diff --git a/components/console/src/core/utils/formatNumber.spec.ts b/components/console/src/core/utils/formatNumber.spec.ts
deleted file mode 100644
index 60f28f6..0000000
--- a/components/console/src/core/utils/formatNumber.spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { formatNumber } from './formatNumber';
-
-describe('formatNumber', () => {
- it('should format numbers less than 1000 correctly', () => {
- expect(formatNumber(123)).toBe('123');
- expect(formatNumber(456.78)).toBe('456.78');
- expect(formatNumber(999.999)).toBe('999.999');
- });
-
- it('should format numbers in thousands', () => {
- expect(formatNumber(1000)).toBe('1 K');
- expect(formatNumber(2450)).toBe('2.45 K');
- expect(formatNumber(999950)).toBe('999.95 K');
- });
-
- it('should format numbers in millions', () => {
- expect(formatNumber(1000000)).toBe('1 Mil.');
- expect(formatNumber(24500000)).toBe('24.5 Mil.');
- expect(formatNumber(999999999)).toBe('1000 Mil.');
- });
-
- it('should format numbers in billions', () => {
- expect(formatNumber(1000000000)).toBe('1 Bil.');
- expect(formatNumber(245000000000)).toBe('245 Bil.');
- expect(formatNumber(999999999999)).toBe('1000 Bil.');
- });
-
- it('should format numbers in trillions', () => {
- expect(formatNumber(1000000000000)).toBe('1 Tril.');
- expect(formatNumber(245000000000000)).toBe('245 Tril.');
- expect(formatNumber(999999999999999)).toBe('1000 Tril.');
- });
-
- it('should format numbers with custom decimal precision', () => {
- expect(formatNumber(1234567.89, 0)).toBe('1 Mil.');
- expect(formatNumber(1234567.89, 1)).toBe('1.2 Mil.');
- expect(formatNumber(1234567.89, 3)).toBe('1.235 Mil.');
- expect(formatNumber(1234567.89, 6)).toBe('1.234568 Mil.');
- });
-});
diff --git a/components/console/src/core/utils/formatTimeInterval.spec.ts b/components/console/src/core/utils/formatTimeInterval.spec.ts
deleted file mode 100644
index 0535b7e..0000000
--- a/components/console/src/core/utils/formatTimeInterval.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-// formatTimeInterval.test.ts
-
-import { formatTimeInterval } from './formatTimeInterval';
-
-describe('formatTimeInterval', () => {
- it('should format time interval correctly', () => {
- const startTime = 1627801200000000;
- const endTime = 1627804800000000;
- const expectedOutput = '1 hour';
-
- const result = formatTimeInterval(endTime, startTime);
- expect(result).toEqual(expectedOutput);
- });
-
- it('should handle a time interval with zero duration', () => {
- const startTime = 1627804800000000;
- const endTime = 1627804800000000;
- const expectedOutput = '';
-
- const result = formatTimeInterval(endTime, startTime);
- expect(result).toEqual(expectedOutput);
- });
-
- it('should handle a time interval with less than a second duration', () => {
- const startTime = 1627804800000000;
- const endTime = 1627804800000100;
- const expectedOutput = '';
-
- const result = formatTimeInterval(endTime, startTime);
- expect(result).toEqual(expectedOutput);
- });
-
- it('should handle a time interval with one-second duration', () => {
- const startTime = 1627804800000000;
- const endTime = 1627804801000000;
- const expectedOutput = '1 second';
-
- const result = formatTimeInterval(endTime, startTime);
- expect(result).toEqual(expectedOutput);
- });
-
- it('should handle a time interval with one-minute duration', () => {
- const startTime = 1627804800000000;
- const endTime = 1627804860000000;
- const expectedOutput = '1 minute';
-
- const result = formatTimeInterval(endTime, startTime);
- expect(result).toEqual(expectedOutput);
- });
-
- it('should handle a time interval with one-hour duration', () => {
- const startTime = 1627804800000000;
- const endTime = 1627808400000000;
- const expectedOutput = '1 hour';
-
- const result = formatTimeInterval(endTime, startTime);
- expect(result).toEqual(expectedOutput);
- });
-});
diff --git a/components/console/src/core/utils/formatTimeInterval.ts b/components/console/src/core/utils/formatTimeInterval.ts
deleted file mode 100644
index 69de091..0000000
--- a/components/console/src/core/utils/formatTimeInterval.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { formatDuration, intervalToDuration } from 'date-fns';
-
-/**
- * endTime and startTime are microseconds (because the Apis give us microseconds)
- */
-export function formatTimeInterval(endTime: number, startTime: number) {
- const interval = intervalToDuration({
- start: new Date((startTime as number) / 1000),
- end: new Date((endTime as number) / 1000)
- });
-
- return formatDuration(interval);
-}
diff --git a/components/console/src/core/utils/formatTrace.spec.ts b/components/console/src/core/utils/formatTrace.spec.ts
deleted file mode 100644
index 44e6383..0000000
--- a/components/console/src/core/utils/formatTrace.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { formatTraceBySites } from './formatTrace';
-
-describe('formatTraceBySites', () => {
- it('should return an empty string for empty input', () => {
- const result = formatTraceBySites('');
- expect(result).toBe('');
- });
-
- it('should return the site name for a single site trace', () => {
- const trace = 'private1-skupper-router-bcd8f5469-6z7k6@private1';
- const result = formatTraceBySites(trace);
- expect(result).toBe('private1');
- });
-
- it('should return the concatenated site names for a multi-site trace', () => {
- const trace = 'private1-skupper-router-bcd8f5469-6z7k6@private1|public1-skupper-router-7b45b6b8f4-52tjs@public1';
- const result = formatTraceBySites(trace);
- expect(result).toBe('private1 -> public1');
- });
-
- it('should return the site name for a single site trace with extra pipe', () => {
- const trace = 'private1-skupper-router-bcd8f5469-6z7k6@private1|';
- const result = formatTraceBySites(trace);
- expect(result).toBe('private1');
- });
-
- it('should return an empty string for a trace without site information', () => {
- const trace = 'private1-skupper-router-bcd8f5469-6z7k6';
- const result = formatTraceBySites(trace);
- expect(result).toBe('');
- });
-});
diff --git a/components/console/src/core/utils/getCurrentAndPastTimestamps.spec.ts b/components/console/src/core/utils/getCurrentAndPastTimestamps.spec.ts
deleted file mode 100644
index 0217b2b..0000000
--- a/components/console/src/core/utils/getCurrentAndPastTimestamps.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { getCurrentAndPastTimestamps } from './getCurrentAndPastTimestamps';
-
-describe('getCurrentAndPastTimestamps', () => {
- it('should returns an object with current and past Unix timestamps', () => {
- const intervalInSeconds = 3600; // 1 hour
- const result = getCurrentAndPastTimestamps(intervalInSeconds);
-
- expect(result.end - result.start).toBeCloseTo(intervalInSeconds);
- });
-
- it('should handles small intervals', () => {
- const intervalInSeconds = 0.001; // 1 millisecond
- const result = getCurrentAndPastTimestamps(intervalInSeconds);
-
- expect(result.end - result.start).toBeLessThan(1); // difference should be very small
- });
-
- it('should handles large intervals', () => {
- const intervalInSeconds = 86400 * 30; // 30 days
- const maxNumber = Number.MAX_SAFE_INTEGER; // maximum value of the Number type
- const result = getCurrentAndPastTimestamps(intervalInSeconds);
-
- expect(result.end - result.start).toBe(intervalInSeconds % maxNumber); // difference should be equal to the interval modulo the maximum value of the Number type
- });
-
- it('should handles negative intervals', () => {
- const intervalInSeconds = -3600; // negative 1 hour
- const result = getCurrentAndPastTimestamps(intervalInSeconds);
-
- expect(result.end - result.start).toBe(intervalInSeconds); // difference should be negative (because interval is negative) and equal to the interval
- });
-});
diff --git a/components/console/src/core/utils/getValueFromNestedProperty.spec.ts b/components/console/src/core/utils/getValueFromNestedProperty.spec.ts
deleted file mode 100644
index 1a6e696..0000000
--- a/components/console/src/core/utils/getValueFromNestedProperty.spec.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { expect } from '@jest/globals';
-
-import { getValueFromNestedProperty } from './getValueFromNestedProperty';
-
-type TestObject = {
- a: {
- b: {
- c: number;
- };
- };
- d?: {
- e: string;
- };
- f: string[];
-};
-
-describe('getNestedProperty', () => {
- const testObj = {
- a: {
- b: {
- c: 42
- }
- },
- d: {
- e: 'hello'
- },
- f: ['foo', 'bar', 'baz']
- };
-
- it('should return the nested property if it exists', () => {
- expect(getValueFromNestedProperty(testObj, ['a', 'b', 'c'] as (keyof TestObject)[])).toEqual(42);
- expect(getValueFromNestedProperty(testObj, ['d', 'e'] as (keyof TestObject)[])).toEqual('hello');
- expect(getValueFromNestedProperty(testObj, ['f', '0'] as (keyof TestObject)[])).toEqual('foo');
- });
-
- it('should return undefined if the nested property does not exist', () => {
- expect(getValueFromNestedProperty(testObj, ['a', 'b', 'd'] as (keyof TestObject)[])).toBeUndefined();
- expect(getValueFromNestedProperty(testObj, ['d', 'f'] as (keyof TestObject)[])).toBeUndefined();
- expect(getValueFromNestedProperty(testObj, ['f', '3'] as (keyof TestObject)[])).toBeUndefined();
- });
-
- it('should handle empty keys array', () => {
- expect(getValueFromNestedProperty(testObj, [])).toBeUndefined();
- });
-
- it('should handle non-existent keys', () => {
- const keys = ['g'];
- expect(getValueFromNestedProperty(testObj, keys as (keyof TestObject)[])).toBeUndefined();
- });
-});
diff --git a/components/console/src/core/utils/isDarkTheme.spec.ts b/components/console/src/core/utils/isDarkTheme.spec.ts
deleted file mode 100644
index c16e87f..0000000
--- a/components/console/src/core/utils/isDarkTheme.spec.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { DARK_THEME_CLASS } from '@config/config';
-
-import {
- THEME_PREFERENCE_CACHE_KEY,
- ThemePreference,
- getThemePreference,
- reflectThemePreference,
- removeThemePreference,
- setThemePreference
-} from './isDarkTheme';
-
-const localStorageMock = {
- getItem: jest.fn(),
- setItem: jest.fn(),
- removeItem: jest.fn()
-};
-
-Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-
-Object.defineProperty(document, 'documentElement', {
- writable: true,
- value: {
- classList: {
- toggle: jest.fn(),
- remove: jest.fn()
- },
- removeAttribute: jest.fn()
- }
-});
-
-describe('isDarkTheme', () => {
- afterEach(() => {
- (localStorageMock.getItem as jest.Mock).mockClear();
- (localStorageMock.setItem as jest.Mock).mockClear();
- (localStorageMock.removeItem as jest.Mock).mockClear();
- (document.documentElement.classList.toggle as jest.Mock).mockClear();
- (document.documentElement.removeAttribute as jest.Mock).mockClear();
- });
-
- describe('setThemePreference', () => {
- it('should set the theme preference to dark', () => {
- setThemePreference(ThemePreference.Dark);
- expect(localStorageMock.setItem).toHaveBeenCalledWith(THEME_PREFERENCE_CACHE_KEY, ThemePreference.Dark);
- expect(document.documentElement.classList.toggle).toHaveBeenCalledWith(DARK_THEME_CLASS);
- });
- });
-
- describe('removeThemePreference', () => {
- it('should remove the theme preference', () => {
- removeThemePreference();
- expect(localStorageMock.removeItem).toHaveBeenCalledWith(THEME_PREFERENCE_CACHE_KEY);
- });
- });
-
- describe('getThemePreference', () => {
- it('should get the theme preference', () => {
- localStorageMock.getItem.mockReturnValue(ThemePreference.Dark);
- const themePreference = getThemePreference();
- expect(localStorageMock.getItem).toHaveBeenCalledWith(THEME_PREFERENCE_CACHE_KEY);
- expect(themePreference).toBe(ThemePreference.Dark);
- });
-
- it('should get a null theme preference', () => {
- localStorageMock.getItem.mockReturnValue(null);
- const themePreference = getThemePreference();
- expect(localStorageMock.getItem).toHaveBeenCalledWith(THEME_PREFERENCE_CACHE_KEY);
- expect(themePreference).toBe(null);
- });
- });
-
- describe('reflectThemePreference', () => {
- it('should reflect the dark theme preference', () => {
- reflectThemePreference(ThemePreference.Dark);
- expect(document.documentElement.classList.toggle).toHaveBeenCalledWith(DARK_THEME_CLASS);
- });
-
- it('should reflect no theme preference', () => {
- reflectThemePreference(null);
- expect(document.documentElement.removeAttribute).toHaveBeenCalledWith('class');
- });
- });
-});
diff --git a/components/console/src/core/utils/isDarkTheme.ts b/components/console/src/core/utils/isDarkTheme.ts
deleted file mode 100644
index df53671..0000000
--- a/components/console/src/core/utils/isDarkTheme.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DARK_THEME_CLASS } from '@config/config';
-
-export enum ThemePreference {
- Dark = DARK_THEME_CLASS
-}
-export const THEME_PREFERENCE_CACHE_KEY = 'theme-preference';
-
-export function setThemePreference(theme: string) {
- localStorage.setItem(THEME_PREFERENCE_CACHE_KEY, theme);
- reflectThemePreference(theme);
-}
-
-export function removeThemePreference() {
- localStorage.removeItem(THEME_PREFERENCE_CACHE_KEY);
- reflectThemePreference(null);
-}
-
-export function getThemePreference() {
- return localStorage.getItem(THEME_PREFERENCE_CACHE_KEY) as ThemePreference.Dark | null;
-}
-
-export function reflectThemePreference(themeClassName: string | null) {
- const htmlElement = document.documentElement;
- themeClassName ? htmlElement.classList.toggle(themeClassName) : htmlElement.removeAttribute('class');
-}
diff --git a/components/console/src/core/utils/persistData.spec.ts b/components/console/src/core/utils/persistData.spec.ts
deleted file mode 100644
index 68816d1..0000000
--- a/components/console/src/core/utils/persistData.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// sessionStorageUtils.test.ts
-
-import { getDataFromSession, storeDataToSession } from './persistData';
-
-describe('sessionStorageUtils', () => {
- beforeEach(() => {
- sessionStorage.clear();
- });
-
- it('should store data to sessionStorage and retrieve it correctly', () => {
- const key = 'testData';
- const testData = { name: 'John', age: 30 };
- storeDataToSession(key, testData);
-
- const retrievedData = getDataFromSession(key);
- expect(retrievedData).toEqual(testData);
- });
-
- it('should return null for non-existent key', () => {
- const key = 'nonExistentKey';
- const retrievedData = getDataFromSession