@odigos/ui-kit 0.0.5 → 0.0.7

package/lib/index-DUW6bkzG.js

@@ -0,0 +1,192 @@
+import { NOTIFICATION_TYPE, OTHER_STATUS, ENTITY_TYPES, PLATFORM_TYPE } from './types.js';
+import { a as getProgrammingLanguageIcon } from './index-4tCBQ2pl.js';
+import 'react';
+import './index-DRT_7tQl.js';
+import 'styled-components';
+import { R as RulesIcon, A as ActionsIcon, D as DestinationsIcon, S as SourcesIcon, V as VmLogo } from './index-BjJpYtF1.js';
+import { K as K8sLogo } from './index-BGlk5VhF.js';
+
+const compareCondition = (renderCondition, fields) => {
+    if (!renderCondition || !renderCondition.length)
+        return true;
+    if (renderCondition.length === 1)
+        return renderCondition[0] == 'true';
+    const [key, cond, val] = renderCondition;
+    const field = fields.find((field) => field.name === key);
+    if (!field) {
+        console.warn(`Field with name ${key} not found, condition will be skipped`);
+        return true;
+    }
+    switch (cond) {
+        case '===':
+        case '==':
+            return field.value === val;
+        case '!==':
+        case '!=':
+            return field.value !== val;
+        case '>':
+            return field.value > val;
+        case '<':
+            return field.value < val;
+        case '>=':
+            return field.value >= val;
+        case '<=':
+            return field.value <= val;
+        default:
+            console.warn(`Invalid condition ${cond}, condition will be skipped`);
+            return true;
+    }
+};
+
+const filterActions = (actions, filters) => {
+    let filtered = [...actions];
+    if (!!filters.monitors?.length)
+        filtered = filtered.filter((action) => !!filters.monitors?.find((metric) => action.spec.signals.find((str) => str.toLowerCase() === metric.id)));
+    return filtered;
+};
+
+const filterDestinations = (destinations, filters) => {
+    let filtered = [...destinations];
+    if (!!filters.monitors?.length)
+        filtered = filtered.filter((dest) => !!filters.monitors?.find((metr) => dest.exportedSignals[metr.id]));
+    return filtered;
+};
+
+const filterSources = (sources, filters) => {
+    let filtered = [...sources];
+    if (!!filters.namespaces?.length)
+        filtered = filtered.filter((source) => !!filters.namespaces?.find((ns) => ns.id === source.namespace));
+    if (!!filters.kinds?.length)
+        filtered = filtered.filter((source) => !!filters.kinds?.find((type) => type.id === source.kind));
+    if (!!filters.languages?.length)
+        filtered = filtered.filter((source) => !!filters.languages?.find((language) => !!source.containers?.find((cont) => cont.language === language.id)));
+    if (!!filters.onlyErrors)
+        filtered = filtered.filter((source) => !!source.conditions?.find((cond) => cond.status === NOTIFICATION_TYPE.ERROR));
+    if (!!filters.errors?.length)
+        filtered = filtered.filter((source) => !!filters.errors?.find((error) => !!source.conditions?.find((cond) => cond.message === error.id)));
+    return filtered;
+};
+
+const formatBytes = (bytes) => {
+    if (!bytes)
+        return '0 KB/s';
+    const sizes = ['Bytes/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    const value = bytes / Math.pow(1024, i);
+    return `${value.toFixed(i === 0 ? 0 : 1)} ${sizes[i]}`;
+};
+
+const getConditionsBooleans = (conditions) => {
+    const hasErrors = !!conditions?.find(({ status }) => status === NOTIFICATION_TYPE.ERROR);
+    const hasWarnings = !!conditions?.find(({ status }) => status === NOTIFICATION_TYPE.WARNING);
+    const hasDisableds = !!conditions?.find(({ status }) => status === OTHER_STATUS.DISABLED);
+    const hasLoadings = !!conditions?.find(({ status }) => status === OTHER_STATUS.LOADING);
+    const priorotizedStatus = hasErrors ? NOTIFICATION_TYPE.ERROR : hasWarnings ? NOTIFICATION_TYPE.WARNING : hasDisableds ? NOTIFICATION_TYPE.INFO : undefined;
+    return {
+        hasErrors,
+        hasWarnings,
+        hasDisableds,
+        hasLoadings,
+        priorotizedStatus,
+    };
+};
+
+const getContainersInstrumentedCount = (containers) => {
+    const instrumentedCount = containers?.reduce((prev, curr) => (curr.instrumented ? prev + 1 : prev), 0);
+    const totalCount = containers?.length || 0;
+    return `${instrumentedCount}/${totalCount} instrumented`;
+};
+
+const getContainersIcons = (containers) => {
+    const icons = containers?.map(({ language }) => getProgrammingLanguageIcon(language)) || [];
+    return icons;
+};
+
+const getEntityIcon = (type) => {
+    const LOGOS = {
+        [ENTITY_TYPES.SOURCE]: SourcesIcon,
+        [ENTITY_TYPES.DESTINATION]: DestinationsIcon,
+        [ENTITY_TYPES.ACTION]: ActionsIcon,
+        [ENTITY_TYPES.INSTRUMENTATION_RULE]: RulesIcon,
+    };
+    return LOGOS[type];
+};
+
+const getEntityLabel = (entity, entityType, options) => {
+    const { extended, prioritizeDisplayName } = options || {};
+    let type = '';
+    let name = '';
+    switch (entityType) {
+        case ENTITY_TYPES.INSTRUMENTATION_RULE:
+            const rule = entity;
+            type = rule.type;
+            name = rule.ruleName;
+            break;
+        case ENTITY_TYPES.SOURCE:
+            const source = entity;
+            type = source.name;
+            name = source.otelServiceName;
+            break;
+        case ENTITY_TYPES.ACTION:
+            const action = entity;
+            type = action.type;
+            name = action.spec.actionName;
+            break;
+        case ENTITY_TYPES.DESTINATION:
+            const destination = entity;
+            type = destination.destinationType.displayName;
+            name = destination.name;
+            break;
+    }
+    if (extended)
+        return type + (name && name !== type ? ` (${name})` : '');
+    else if (prioritizeDisplayName)
+        return name || type;
+    else
+        return type;
+};
+
+const getMetricForEntity = (metrics, entityType, entityId) => {
+    const metric = entityType === ENTITY_TYPES.SOURCE
+        ? metrics?.sources.find((m) => m.kind === entityId.kind && m.name === entityId.name && m.namespace === entityId.namespace)
+        : metrics?.destinations.find((m) => m.id === entityId);
+    return metric || { throughput: 0 };
+};
+
+const getPlatformIcon = (type) => {
+    const LOGOS = {
+        [PLATFORM_TYPE.K8S]: K8sLogo,
+        [PLATFORM_TYPE.VM]: VmLogo,
+    };
+    return LOGOS[type];
+};
+
+const getPlatformLabel = (type) => {
+    const LABELS = {
+        [PLATFORM_TYPE.K8S]: 'Kubernetes Cluster',
+        [PLATFORM_TYPE.VM]: 'Virtual Machine',
+    };
+    return LABELS[type];
+};
+
+const getValueForRange = (current, matrix) => {
+    // CURRENT: represents the current value (such as window width)
+    // MATRIX: represents the ranges (index[0] == min, index[1] == max, index[2] == value to get)
+    // EXAMPLE:
+    // getValueForRange(width, [
+    //   [0, 1000, 'small'], // ---> from 0 to 1000, return "small"
+    //   [1000, null, 'big'], // ---> from 1000 to infinite, return "big"
+    // ])
+    const found = matrix.find(([min, max]) => current >= min && (max === null || current <= max));
+    return found?.[2] || null;
+};
+
+const isOverTime = (originDate, difference = 0) => {
+    const now = new Date().getTime();
+    const compareWith = new Date(originDate).getTime();
+    return compareWith - now <= difference;
+};
+
+const sleep = async (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export { filterDestinations as a, filterSources as b, compareCondition as c, formatBytes as d, getContainersInstrumentedCount as e, filterActions as f, getConditionsBooleans as g, getContainersIcons as h, getEntityIcon as i, getEntityLabel as j, getMetricForEntity as k, getPlatformIcon as l, getPlatformLabel as m, getValueForRange as n, isOverTime as o, sleep as s };

package/lib/store/index.d.ts

@@ -8,4 +8,3 @@ export * from './useNotificationStore';
 export * from './usePendingStore';
 export * from './useSelectedStore';
 export * from './useSetupStore';
-//# sourceMappingURL=index.d.ts.map

package/lib/store/useDarkMode.d.ts

@@ -15,4 +15,3 @@ export declare const useDarkMode: import("zustand").UseBoundStore<Omit<import("z
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<DarkModeState & DarkModeStateSetters, unknown>>;
     };
 }>;
-//# sourceMappingURL=useDarkMode.d.ts.map

package/lib/store/useDrawerStore.d.ts

@@ -9,4 +9,3 @@ interface DrawerStoreStateSetters {
 }
 export declare const useDrawerStore: import("zustand").UseBoundStore<import("zustand").StoreApi<DrawerStoreState & DrawerStoreStateSetters>>;
 export {};
-//# sourceMappingURL=useDrawerStore.d.ts.map

package/lib/store/useEntityStore.d.ts

@@ -19,4 +19,3 @@ interface IEntityStateSetters {
 }
 export declare const useEntityStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IEntityState & IEntityStateSetters>>;
 export {};
-//# sourceMappingURL=useEntityStore.d.ts.map

package/lib/store/useFilterStore.d.ts

@@ -35,4 +35,3 @@ interface StoreState {
 }
 export declare const useFilterStore: import("zustand").UseBoundStore<import("zustand").StoreApi<StoreState>>;
 export {};
-//# sourceMappingURL=useFilterStore.d.ts.map

package/lib/store/useInstrumentStore.d.ts

@@ -11,4 +11,3 @@ interface StoreSetters {
 }
 export declare const useInstrumentStore: import("zustand").UseBoundStore<import("zustand").StoreApi<StoreValues & StoreSetters>>;
 export {};
-//# sourceMappingURL=useInstrumentStore.d.ts.map

package/lib/store/useModalStore.d.ts

@@ -4,4 +4,3 @@ interface ModalStoreState {
 }
 export declare const useModalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ModalStoreState>>;
 export {};
-//# sourceMappingURL=useModalStore.d.ts.map

package/lib/store/useNotificationStore.d.ts

@@ -10,4 +10,3 @@ interface StoreState {
 }
 export declare const useNotificationStore: import("zustand").UseBoundStore<import("zustand").StoreApi<StoreState>>;
 export {};
-//# sourceMappingURL=useNotificationStore.d.ts.map

package/lib/store/usePendingStore.d.ts

@@ -12,4 +12,3 @@ interface StoreState {
 }
 export declare const usePendingStore: import("zustand").UseBoundStore<import("zustand").StoreApi<StoreState>>;
 export {};
-//# sourceMappingURL=usePendingStore.d.ts.map

package/lib/store/useSelectedStore.d.ts

@@ -10,4 +10,3 @@ interface SelectedStateSetters {
 }
 export declare const useSelectedStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SelectedState & SelectedStateSetters>>;
 export {};
-//# sourceMappingURL=useSelectedStore.d.ts.map

package/lib/store/useSetupStore.d.ts

@@ -44,4 +44,3 @@ interface ISetupStateSetters {
 }
 export declare const useSetupStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ISetupState & ISetupStateSetters>>;
 export {};
-//# sourceMappingURL=useSetupStore.d.ts.map

package/lib/store.js

@@ -1,11 +1,4 @@
-export { useDarkMode } from './src/store/useDarkMode.js';
-export { useDrawerStore } from './src/store/useDrawerStore.js';
-export { useEntityStore } from './src/store/useEntityStore.js';
-export { useFilterStore } from './src/store/useFilterStore.js';
-export { useInstrumentStore } from './src/store/useInstrumentStore.js';
-export { useModalStore } from './src/store/useModalStore.js';
-export { useNotificationStore } from './src/store/useNotificationStore.js';
-export { usePendingStore } from './src/store/usePendingStore.js';
-export { useSelectedStore } from './src/store/useSelectedStore.js';
-export { useSetupStore } from './src/store/useSetupStore.js';
-//# sourceMappingURL=store.js.map
+export { u as useDarkMode, a as useDrawerStore, b as useEntityStore, c as useFilterStore, d as useInstrumentStore, e as useModalStore, f as useNotificationStore, g as usePendingStore, h as useSelectedStore, i as useSetupStore } from './index-DRT_7tQl.js';
+import './types.js';
+import 'react';
+import 'styled-components';

package/lib/theme/animations/index.d.ts

@@ -20,4 +20,3 @@ export declare const progress: {
 };
 export declare const ping: import("styled-components/dist/models/Keyframes").default;
 export declare const shimmer: import("styled-components/dist/models/Keyframes").default;
-//# sourceMappingURL=index.d.ts.map

package/lib/theme/index.d.ts

@@ -11,4 +11,3 @@ declare const Theme: {
     animations: typeof animations;
 };
 export default Theme;
-//# sourceMappingURL=index.d.ts.map

package/lib/theme/opacity/index.d.ts

@@ -101,4 +101,3 @@ export declare const hex: {
     '001': string;
     '000': string;
 };
-//# sourceMappingURL=index.d.ts.map

package/lib/theme/palletes/index.d.ts

@@ -103,4 +103,3 @@ declare const lightModeTheme: {
 export type ITheme = typeof darkModeTheme & typeof lightModeTheme;
 export declare const getTheme: (darkMode: boolean) => ITheme;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/theme/provider/index.d.ts

@@ -1,4 +1,3 @@
 import { type FC, type PropsWithChildren } from 'react';
 import './globals.css';
 export declare const Provider: FC<PropsWithChildren>;
-//# sourceMappingURL=index.d.ts.map

package/lib/theme.js

@@ -1,16 +1,240 @@
-import { Provider } from './src/theme/provider/index.js';
-import * as index from './src/theme/opacity/index.js';
-import * as index$2 from './src/theme/palletes/index.js';
-import * as index$1 from './src/theme/animations/index.js';
-import { useTheme } from 'styled-components';
+import React from 'react';
+import { u as useDarkMode, j as animations } from './index-DRT_7tQl.js';
+import { ThemeProvider, useTheme } from 'styled-components';
+import './types.js';
+
+const baseTheme = {
+    colors: {
+        // Custom Colors
+        majestic_blue: '#444AD9',
+        majestic_blue_soft: '#6C7AE8',
+        orange_og: '#FE9239',
+        orange_soft: '#FFB160',
+        dark_red: '#802828',
+        darker_red: '#611F1F',
+        darkest_red: '#281515',
+        darkest_red_hover: '#351515',
+        dark_green: '#2D4323',
+    },
+    font_family: {
+        primary: 'Inter, sans-serif',
+        secondary: 'Kode Mono, sans-serif',
+        code: 'IBM Plex Mono, monospace',
+    },
+};
+const darkModeTheme = {
+    darkMode: true,
+    colors: {
+        ...baseTheme.colors,
+        // Base Colors
+        primary: '#111111',
+        secondary: '#F9F9F9',
+        border: '#525252',
+        dark_grey: '#151515',
+        translucent_bg: '#1A1A1A',
+        dropdown_bg: '#242424',
+        dropdown_bg_2: '#333333',
+        // Notification Colors
+        warning: '#472300',
+        error: '#431919',
+        success: '#172013',
+        info: '#242424',
+        default: '#181944',
+    },
+    text: {
+        // Base Colors
+        white: '#FFFFFF',
+        primary: '#111111',
+        secondary: '#F9F9F9',
+        grey: '#B8B8B8',
+        dark_grey: '#8F8F8F',
+        darker_grey: '#7A7A7A',
+        light_grey: '#CCD0D2',
+        dark_button: '#0A1824',
+        // Notification Colors
+        warning: '#E9CF35',
+        warning_secondary: '#FFA349',
+        error: '#EF7676',
+        error_secondary: '#DB5151',
+        success: '#81AF65',
+        success_secondary: '#51DB51',
+        info: '#B8B8B8',
+        info_secondary: '#CCDDDD',
+        default: '#AABEF7',
+        default_secondary: '#8CBEFF',
+    },
+    font_family: baseTheme.font_family,
+};
+const lightModeTheme = {
+    darkMode: false,
+    colors: {
+        ...baseTheme.colors,
+        // Base Colors
+        primary: '#EEEEEE',
+        secondary: '#060606',
+        border: '#ADADAD',
+        dark_grey: '#EAEAEA',
+        translucent_bg: '#E5E5E5',
+        dropdown_bg: '#DBDBDB',
+        dropdown_bg_2: '#CCCCCC',
+        // Notification Colors
+        warning: '#F6F092',
+        error: '#FACECE',
+        success: '#C8DEB8',
+        info: '#E0E0E0',
+        default: '#CAD9FB',
+    },
+    text: {
+        // Base Colors
+        white: '#FFFFFF',
+        primary: '#EEEEEE',
+        secondary: '#060606',
+        grey: '#474747',
+        dark_grey: '#707070',
+        darker_grey: '#858585',
+        light_grey: '#332F2D',
+        dark_button: '#F5E7DB',
+        // Notification Colors
+        warning: '#A56F12',
+        warning_secondary: '#CA9416',
+        error: '#B63A3A',
+        error_secondary: '#DB5151',
+        success: '#4E763A',
+        success_secondary: '#67964C',
+        info: '#525252',
+        info_secondary: '#7A7A7A',
+        default: '#444AD9',
+        default_secondary: '#6C7AE8',
+    },
+    font_family: baseTheme.font_family,
+};
+const getTheme = (darkMode) => (darkMode ? darkModeTheme : lightModeTheme);
+
+var palletes = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getTheme: getTheme
+});
+
+const Provider = ({ children }) => {
+    const { darkMode } = useDarkMode();
+    return React.createElement(ThemeProvider, { theme: getTheme(darkMode) }, children);
+};
+
+const hex = {
+    '100': 'FF',
+    '099': 'FC',
+    '098': 'FA',
+    '097': 'F7',
+    '096': 'F5',
+    '095': 'F2',
+    '094': 'F0',
+    '093': 'ED',
+    '092': 'EB',
+    '091': 'E8',
+    '090': 'E6',
+    '089': 'E3',
+    '088': 'E0',
+    '087': 'DE',
+    '086': 'DB',
+    '085': 'D9',
+    '084': 'D6',
+    '083': 'D4',
+    '082': 'D1',
+    '081': 'CF',
+    '080': 'CC',
+    '079': 'C9',
+    '078': 'C7',
+    '077': 'C4',
+    '076': 'C2',
+    '075': 'BF',
+    '074': 'BD',
+    '073': 'BA',
+    '072': 'B8',
+    '071': 'B5',
+    '070': 'B3',
+    '069': 'B0',
+    '068': 'AD',
+    '067': 'AB',
+    '066': 'A8',
+    '065': 'A6',
+    '064': 'A3',
+    '063': 'A1',
+    '062': '9E',
+    '061': '9C',
+    '060': '99',
+    '059': '96',
+    '058': '94',
+    '057': '91',
+    '056': '8F',
+    '055': '8C',
+    '054': '8A',
+    '053': '87',
+    '052': '85',
+    '051': '82',
+    '050': '80',
+    '049': '7D',
+    '048': '7A',
+    '047': '78',
+    '046': '75',
+    '045': '73',
+    '044': '70',
+    '043': '6E',
+    '042': '6B',
+    '041': '69',
+    '040': '66',
+    '039': '63',
+    '038': '61',
+    '037': '5E',
+    '036': '5C',
+    '035': '59',
+    '034': '57',
+    '033': '54',
+    '032': '52',
+    '031': '4F',
+    '030': '4D',
+    '029': '4A',
+    '028': '47',
+    '027': '45',
+    '026': '42',
+    '025': '40',
+    '024': '3D',
+    '023': '3B',
+    '022': '38',
+    '021': '36',
+    '020': '33',
+    '019': '30',
+    '018': '2E',
+    '017': '2B',
+    '016': '29',
+    '015': '26',
+    '014': '24',
+    '013': '21',
+    '012': '1F',
+    '011': '1C',
+    '010': '1A',
+    '009': '17',
+    '008': '14',
+    '007': '12',
+    '006': '0F',
+    '005': '0D',
+    '004': '0A',
+    '003': '08',
+    '002': '05',
+    '001': '03',
+    '000': '00',
+};
+
+var opacity = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  hex: hex
+});
 
 const Theme = {
     Provider,
     useTheme: useTheme,
-    opacity: index,
-    palletes: index$2,
-    animations: index$1,
+    opacity,
+    palletes,
+    animations,
 };
 
 export { Theme as default };
-//# sourceMappingURL=theme.js.map

package/lib/types/actions/index.d.ts

@@ -78,4 +78,3 @@ export interface ActionFormData {
     samplingPercentage: Action['spec']['samplingPercentage'];
     endpointsFilters: Action['spec']['endpointsFilters'];
 }
-//# sourceMappingURL=index.d.ts.map

package/lib/types/common/index.d.ts

@@ -124,4 +124,3 @@ export type CustomFieldProps<T = Record<string, any>> = {
     setValue: (key: keyof T, value: any) => void;
     formErrors: Record<string, string>;
 };
-//# sourceMappingURL=index.d.ts.map

package/lib/types/compute-platform/index.d.ts

@@ -5,4 +5,3 @@ export interface Platform {
     type: PLATFORM_TYPE;
     connectionStatus: NOTIFICATION_TYPE;
 }
-//# sourceMappingURL=index.d.ts.map

package/lib/types/data-flow/index.d.ts

@@ -16,4 +16,3 @@ export declare enum ADD_NODE_TYPES {
     ADD_ACTION = "addAction",
     ADD_DESTINATION = "addDestination"
 }
-//# sourceMappingURL=index.d.ts.map

package/lib/types/describe/index.d.ts

@@ -96,4 +96,3 @@ export interface DescribeSource {
     pods: PodAnalyze[];
 }
 export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/types/destinations/index.d.ts

@@ -78,4 +78,3 @@ export interface DestinationDynamicField {
     options?: DropdownProps['options'];
 }
 export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts

@@ -10,4 +10,3 @@ export * from './namespaces';
 export * from './signals';
 export * from './sources';
 export * from './tokens';
-//# sourceMappingURL=index.d.ts.map

package/lib/types/instrumentation-rules/index.d.ts

@@ -72,4 +72,3 @@ export interface InstrumentationRuleOption {
 }
 export type InstrumentationRuleFormData = Omit<InstrumentationRule, 'ruleId' | 'type' | 'mutable' | 'profileName'>;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/types/metrics/index.d.ts

@@ -8,4 +8,3 @@ export interface Metrics {
         id: string;
     })[];
 }
-//# sourceMappingURL=index.d.ts.map

package/lib/types/namespaces/index.d.ts

@@ -4,4 +4,3 @@ export interface Namespace {
     selected: boolean;
     sources?: Source[];
 }
-//# sourceMappingURL=index.d.ts.map

package/lib/types/signals/index.d.ts

@@ -7,4 +7,3 @@ export interface MonitorsOption {
     id: SIGNAL_TYPE;
     value: string;
 }
-//# sourceMappingURL=index.d.ts.map

package/lib/types/sources/index.d.ts

@@ -31,4 +31,3 @@ export type PersistSources = (selectAppsList: {
 }, futureSelectAppsList: {
     [namespace: string]: boolean;
 }) => void;
-//# sourceMappingURL=index.d.ts.map

package/lib/types/tokens/index.d.ts

@@ -4,4 +4,3 @@ export interface TokenPayload {
     issuedAt: number;
     expiresAt: number;
 }
-//# sourceMappingURL=index.d.ts.map