Improvement/migrate to rspack

.github/workflows/build-push-tests.yml

@@ -66,7 +66,7 @@ jobs:
         run: npm config set unsafe-perm true && npm ci
 
       - name: build assets
-        run: npm run build
+        run: npm run rsbuild
 
       - name: Build and push zenko ui
         uses: docker/[email protected]

.github/workflows/security.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: install dependencies
         run: npm config set unsafe-perm true && npm ci
       - name: build assets
-        run: npm run build
+        run: npm run rsbuild
       - name: Login to GitHub Registry
         uses: docker/login-action@v2
         with:

@mf-types/index.d.ts

@@ -0,0 +1,23 @@
+import type { PackageType as PackageType_0,RemoteKeys as RemoteKeys_0 } from './shell/apis.d.ts';
+    declare module "@module-federation/runtime" {
+      type RemoteKeys = RemoteKeys_0;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+declare module "@module-federation/enhanced/runtime" {
+      type RemoteKeys = RemoteKeys_0;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+declare module "@module-federation/runtime-tools" {
+      type RemoteKeys = RemoteKeys_0;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+

@mf-types/shell/App.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/FederatedApp';
+export { default } from './compiled-types/src/FederatedApp';

@mf-types/shell/alerts/AlertProvider.d.ts

@@ -0,0 +1,2 @@
+export * from './../compiled-types/src/alerts/AlertProvider';
+export { default } from './../compiled-types/src/alerts/AlertProvider';

@mf-types/shell/alerts/alertHooks.d.ts

@@ -0,0 +1,2 @@
+export * from './../compiled-types/src/alerts/alertHooks';
+export { default } from './../compiled-types/src/alerts/alertHooks';

@mf-types/shell/apis.d.ts

@@ -0,0 +1,3 @@
+
+    export type RemoteKeys = 'shell/App' | 'shell/lang' | 'shell/auth/AuthProvider' | 'shell/alerts/AlertProvider' | 'shell/alerts/alertHooks' | 'shell/navbar/navbarHooks' | 'shell/moduleFederation/ConfigurationProvider' | 'shell/moduleFederation/ShellConfigurationProvider' | 'shell/moduleFederation/UIListProvider' | 'shell/useNotificationCenter';
+    type PackageType<T> = T extends 'shell/useNotificationCenter' ? typeof import('shell/useNotificationCenter') :T extends 'shell/moduleFederation/UIListProvider' ? typeof import('shell/moduleFederation/UIListProvider') :T extends 'shell/moduleFederation/ShellConfigurationProvider' ? typeof import('shell/moduleFederation/ShellConfigurationProvider') :T extends 'shell/moduleFederation/ConfigurationProvider' ? typeof import('shell/moduleFederation/ConfigurationProvider') :T extends 'shell/navbar/navbarHooks' ? typeof import('shell/navbar/navbarHooks') :T extends 'shell/alerts/alertHooks' ? typeof import('shell/alerts/alertHooks') :T extends 'shell/alerts/AlertProvider' ? typeof import('shell/alerts/AlertProvider') :T extends 'shell/auth/AuthProvider' ? typeof import('shell/auth/AuthProvider') :T extends 'shell/lang' ? typeof import('shell/lang') :T extends 'shell/App' ? typeof import('shell/App') :any;

@mf-types/shell/auth/AuthProvider.d.ts

@@ -0,0 +1,2 @@
+export * from './../compiled-types/src/auth/AuthProvider';
+export { default } from './../compiled-types/src/auth/AuthProvider';

@mf-types/shell/compiled-types/src/FederatedApp.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { QueryClient } from 'react-query';
+import { NotificationCenterContextType } from './NotificationCenterProvider';
+import { useAuthConfig } from './auth/AuthConfigProvider';
+import { useAuth } from './auth/AuthProvider';
+import './index.css';
+import { useConfigRetriever, useConfig, useDiscoveredViews, useLinkOpener, BuildtimeWebFinger, RuntimeWebFinger } from './initFederation/ConfigurationProviders';
+import { useShellConfig } from './initFederation/ShellConfigProvider';
+import { useShellThemeSelector } from './initFederation/ShellThemeSelectorProvider';
+import { useDeployedApps } from './initFederation/UIListProvider';
+import { useLanguage } from './navbar/lang';
+import AlertProvider from './alerts/AlertProvider';
+import { getAlertingAlertSelectors, getAuthenticationAlertSelectors, getBootstrapAlertSelectors, getDashboardingAlertSelectors, getIngressControllerAlertSelectors, getK8SMasterAlertSelectors, getLoggingAlertSelectors, getMonitoringAlertSelectors, getNetworksAlertSelectors, getNodesAlertSelectors, getPlatformAlertSelectors, getServicesAlertSelectors, getVolumesAlertSelectors, useAlerts, useHighestSeverityAlerts } from './alerts';
+import { useHistory } from 'react-router';
+import { UseQueryResult } from 'react-query';
+export declare const queryClient: QueryClient;
+export type ShellTypes = {
+    shellHooks: {
+        useAuthConfig: typeof useAuthConfig;
+        useAuth: typeof useAuth;
+        useConfigRetriever: typeof useConfigRetriever;
+        useDiscoveredViews: typeof useDiscoveredViews;
+        useShellConfig: typeof useShellConfig;
+        useLanguage: typeof useLanguage;
+        useConfig: typeof useConfig;
+        useLinkOpener: typeof useLinkOpener;
+        useDeployedApps: typeof useDeployedApps;
+        useShellThemeSelector: typeof useShellThemeSelector;
+    };
+    shellAlerts: {
+        AlertsProvider: typeof AlertProvider;
+        hooks: {
+            useAlerts: typeof useAlerts;
+            useHighestSeverityAlerts: typeof useHighestSeverityAlerts;
+        };
+        alertSelectors: {
+            getPlatformAlertSelectors: typeof getPlatformAlertSelectors;
+            getNodesAlertSelectors: typeof getNodesAlertSelectors;
+            getVolumesAlertSelectors: typeof getVolumesAlertSelectors;
+            getNetworksAlertSelectors: typeof getNetworksAlertSelectors;
+            getServicesAlertSelectors: typeof getServicesAlertSelectors;
+            getK8SMasterAlertSelectors: typeof getK8SMasterAlertSelectors;
+            getBootstrapAlertSelectors: typeof getBootstrapAlertSelectors;
+            getMonitoringAlertSelectors: typeof getMonitoringAlertSelectors;
+            getAlertingAlertSelectors: typeof getAlertingAlertSelectors;
+            getLoggingAlertSelectors: typeof getLoggingAlertSelectors;
+            getDashboardingAlertSelectors: typeof getDashboardingAlertSelectors;
+            getIngressControllerAlertSelectors: typeof getIngressControllerAlertSelectors;
+            getAuthenticationAlertSelectors: typeof getAuthenticationAlertSelectors;
+        };
+    };
+};
+declare global {
+    interface Window {
+        shellContexts: {
+            ShellHistoryContext: React.Context<ReturnType<typeof useHistory> | null>;
+            NotificationContext: React.Context<null | NotificationCenterContextType>;
+            WebFingersContext: React.Context<null | UseQueryResult<BuildtimeWebFinger | RuntimeWebFinger<Record<string, unknown>>, unknown>[]>;
+        };
+        shellHooks: ShellTypes['shellHooks'];
+        shellAlerts: ShellTypes['shellAlerts'];
+    }
+}
+export declare function WithInitFederationProviders({ children, }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export default function App(): JSX.Element;

@mf-types/shell/compiled-types/src/NotificationCenterProvider.d.ts

@@ -0,0 +1,35 @@
+import React, { Dispatch } from 'react';
+export type Notification = {
+    id: string;
+    title: string;
+    description: string;
+    severity: 'critical' | 'warning' | 'info';
+    redirectUrl: string;
+    createdOn: Date;
+};
+export type InternalNotification = Notification & {
+    readOn?: Date;
+};
+export type NotificationCenterContextType = {
+    notifications: InternalNotification[];
+    dispatch: Dispatch<NotificationCenterActions>;
+};
+export declare const NotificationCenterContext: React.Context<NotificationCenterContextType>;
+export declare enum NotificationActionType {
+    PUBLISH = 0,
+    UNPUBLISH = 1,
+    READ_ALL = 2
+}
+export type NotificationCenterActions = {
+    type: NotificationActionType.PUBLISH;
+    notification: Notification;
+} | {
+    type: NotificationActionType.UNPUBLISH;
+    id: string;
+} | {
+    type: NotificationActionType.READ_ALL;
+};
+declare const NotificationCenterProvider: ({ children }: {
+    children: any;
+}) => JSX.Element;
+export default NotificationCenterProvider;

@mf-types/shell/compiled-types/src/alerts/AlertProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * A wrapper fetching alerts and ensuring their accuracy via a polling refresh strategy.
+ *
+ * @param string alert manager url
+ * @param React.ReactNode children react node
+ * @returns
+ */
+export default function AlertProvider({ alertManagerUrl, children, }: {
+    alertManagerUrl: string;
+    children: React.ReactNode;
+}): JSX.Element;

@mf-types/shell/compiled-types/src/alerts/alertContext.d.ts

@@ -0,0 +1 @@
+export declare const AlertContext: any;

@mf-types/shell/compiled-types/src/alerts/alertHooks.d.ts

@@ -0,0 +1,26 @@
+import type { FilterLabels, Alert } from './services/alertUtils';
+export declare const getPlatformAlertSelectors: () => FilterLabels;
+export declare const getNodesAlertSelectors: () => FilterLabels;
+export declare const getVolumesAlertSelectors: () => FilterLabels;
+export declare const getNetworksAlertSelectors: () => FilterLabels;
+export declare const getServicesAlertSelectors: () => FilterLabels;
+export declare const getK8SMasterAlertSelectors: () => FilterLabels;
+export declare const getBootstrapAlertSelectors: () => FilterLabels;
+export declare const getMonitoringAlertSelectors: () => FilterLabels;
+export declare const getAlertingAlertSelectors: () => FilterLabels;
+export declare const getLoggingAlertSelectors: () => FilterLabels;
+export declare const getDashboardingAlertSelectors: () => FilterLabels;
+export declare const getIngressControllerAlertSelectors: () => FilterLabels;
+export declare const getAuthenticationAlertSelectors: () => FilterLabels;
+/**
+ *
+ * @param {FilterLabels} filters
+ * @returns An array of alerts with the highest severity
+ */
+export declare const useHighestSeverityAlerts: (filters: FilterLabels) => Alert[];
+/**
+ * Hook that enables retrieval of alerts fetched by <AlertProvider />
+ *
+ * @returns react query result
+ */
+export declare function useAlerts(filters: FilterLabels): any;

@mf-types/shell/compiled-types/src/alerts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AlertProvider';
+export * from './alertHooks';

@mf-types/shell/compiled-types/src/alerts/services/alertManager.d.ts

@@ -0,0 +1,26 @@
+export type PrometheusAlert = {
+    annotations: Record<string, string>;
+    receivers: {
+        name: string;
+    }[];
+    fingerprint: string;
+    startsAt: string;
+    updatedAt: string;
+    endsAt: string;
+    status: {
+        state: 'unprocessed' | 'active' | 'suppressed';
+        silencedBy: string[];
+        inhibitedBy: string[];
+    };
+    labels: Record<string, string>;
+    generatorURL: string;
+};
+export type AlertLabels = {
+    parents?: string[];
+    selectors?: string[];
+    [labelName: string]: string;
+};
+export declare function getAlerts(alertManagerUrl: string): Promise<import("./alertUtils").Alert[]>;
+export declare const checkActiveAlertProvider: () => Promise<{
+    status: 'healthy' | 'critical';
+}>;

@mf-types/shell/compiled-types/src/alerts/services/alertUtils.d.ts

@@ -0,0 +1,34 @@
+import type { PrometheusAlert, AlertLabels } from './alertManager';
+import type { StreamValue } from './loki';
+export declare const STATUS_WARNING = "warning";
+export declare const STATUS_CRITICAL = "critical";
+export declare const STATUS_SUCCESS = "success";
+export declare const STATUS_NONE = "none";
+export declare const STATUS_HEALTH = "healthy";
+export declare const STATUS_INFO = "info";
+export type Health = 'healthy' | 'warning' | 'critical' | 'none' | 'info';
+export type FilterLabels = {
+    selectors?: string[];
+    [labelName: string]: string | string[];
+};
+export type Alert = {
+    id: string;
+    description: string;
+    startsAt: string;
+    endsAt: string;
+    severity: string;
+    labels: AlertLabels;
+    originalAlert: PrometheusAlert;
+    status: string;
+    summary?: string;
+    documentationUrl?: string;
+};
+export declare const compareHealth: (status1: any, status2: any) => number;
+export declare const removeWarningAlerts: (alerts: Alert[]) => Alert[];
+export declare const sortAlerts: (alerts: Alert[]) => Alert[];
+export declare const formatActiveAlerts: (alerts: Array<PrometheusAlert>) => Alert[];
+export declare const isAlertSelected: (labels: AlertLabels, filters: FilterLabels) => boolean;
+export declare const filterAlerts: (alerts: Alert[], filters?: FilterLabels) => Alert[];
+export declare const dateIsBetween: (start: string, end: string, date: string) => boolean;
+export declare const getHealthStatus: (alerts: Alert[], activeOn?: string) => Health;
+export declare const formatHistoryAlerts: (streamValues: StreamValue) => Alert[];

@mf-types/shell/compiled-types/src/alerts/services/loki.d.ts

@@ -0,0 +1,8 @@
+import type { Alert } from './alertUtils';
+export type StreamValue = {
+    stream: Record<string, string>;
+    values: [string, string][];
+}[];
+export declare function getLast7DaysAlerts(lokiUrl: string): Promise<Alert[]>;
+export declare function getAlertsLoki(lokiUrl: string, start: string, end: string): Promise<Alert[]>;
+export declare function isLokiReady(lokiUrl: string): Promise<boolean>;

@mf-types/shell/compiled-types/src/auth/AuthConfigProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { OIDCConfig, OAuth2ProxyConfig } from '../initFederation/ConfigurationProviders';
+export declare const useAuthConfig: () => {
+    authConfig: OAuth2ProxyConfig | OIDCConfig | undefined;
+    setAuthConfig: (authConfig: OAuth2ProxyConfig | OIDCConfig) => void;
+};
+export declare function AuthConfigProvider({ children, }: {
+    children: React.ReactNode;
+}): JSX.Element;

@mf-types/shell/compiled-types/src/auth/AuthProvider.d.ts

@@ -0,0 +1,20 @@
+import { User } from 'oidc-client';
+import React from 'react';
+export declare function AuthProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export type UserData = {
+    token: string;
+    username: string;
+    groups: string[];
+    email: string;
+    id: string;
+    original: User;
+};
+export declare function useAuth(): {
+    userData?: UserData;
+    getToken: () => Promise<string | null>;
+};
+export declare function useLogOut(): {
+    logOut: () => void;
+};

@mf-types/shell/compiled-types/src/auth/FirstTimeLoginProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const useFirstTimeLogin: () => {
+    firstTimeLogin: boolean | null;
+};
+export declare function FirstTimeLoginProvider({ children, }: {
+    children: React.ReactNode;
+}): JSX.Element;