@odigos/ui-kit 0.0.16 → 0.0.17

package/lib/useSourceSelectionFormData-R_uK7F7W.js

@@ -1,563 +0,0 @@
-import { ActionType, StatusType, AddNodeTypes, EntityTypes, FieldTypes } from './types.js';
-import { useState, useEffect, useCallback } from 'react';
-import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, b as useEntityStore, i as useSetupStore } from './index-IvGLauAo.js';
-import 'styled-components';
-import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import './index-lL1o2K_5.js';
-import { F as FORM_ALERTS } from './index-C_0J5P9M.js';
-import { b as useGenericForm } from './useTransition-hWYVBuSi.js';
-import { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
-
-const INITIAL$2 = {
-    // @ts-ignore (TS complains about empty string because we expect an "ActionsType", but it's fine)
-    type: '',
-    name: '',
-    notes: '',
-    signals: [],
-    disabled: false,
-    clusterAttributes: null,
-    renames: null,
-    attributeNamesToDelete: null,
-    piiCategories: null,
-    fallbackSamplingRatio: null,
-    samplingPercentage: null,
-    endpointsFilters: null,
-};
-const useActionFormData = () => {
-    const { addNotification } = useNotificationStore();
-    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$2);
-    const validateForm = (params) => {
-        const errors = {};
-        let ok = true;
-        Object.entries(formData).forEach(([k, v]) => {
-            switch (k) {
-                case 'type':
-                case 'signals':
-                    if (isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'clusterAttributes':
-                    if (formData.type === ActionType.AddClusterInfo && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'renames':
-                    if (formData.type === ActionType.RenameAttributes && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'attributeNamesToDelete':
-                    if (formData.type === ActionType.DeleteAttributes && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'piiCategories':
-                    if (formData.type === ActionType.PiiMasking && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'fallbackSamplingRatio':
-                    if (formData.type === ActionType.ErrorSampler && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'samplingPercentage':
-                    if (formData.type === ActionType.ProbabilisticSampler && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'endpointsFilters':
-                    if (formData.type === ActionType.LatencySampler) {
-                        if (isEmpty(v))
-                            errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                        v?.forEach((endpoint) => {
-                            if (endpoint.httpRoute.charAt(0) !== '/')
-                                errors[k] = FORM_ALERTS.LATENCY_HTTP_ROUTE;
-                        });
-                    }
-                    break;
-            }
-        });
-        ok = !Object.values(errors).length;
-        if (!ok && params?.withAlert) {
-            addNotification({
-                type: StatusType.Warning,
-                title: params.alertTitle,
-                message: FORM_ALERTS.REQUIRED_FIELDS,
-                hideFromHistory: true,
-            });
-        }
-        handleErrorChange(undefined, undefined, errors);
-        return ok;
-    };
-    const loadFormWithDrawerItem = ({ type, spec }) => {
-        const updatedData = {
-            ...INITIAL$2,
-            type,
-        };
-        Object.entries(spec).forEach(([k, v]) => {
-            if (!!v) {
-                switch (k) {
-                    case 'actionName': {
-                        updatedData['name'] = v;
-                        break;
-                    }
-                    case 'type':
-                    case 'notes':
-                    case 'signals':
-                    case 'disabled':
-                    case 'collectContainerAttributes':
-                    case 'collectWorkloadId':
-                    case 'collectClusterId':
-                    case 'labelsAttributes':
-                    case 'annotationsAttributes':
-                    case 'clusterAttributes':
-                    case 'attributeNamesToDelete':
-                    case 'renames':
-                    case 'piiCategories':
-                    case 'fallbackSamplingRatio':
-                    case 'samplingPercentage':
-                    case 'endpointsFilters': {
-                        // @ts-ignore
-                        updatedData[k] = v;
-                        break;
-                    }
-                }
-            }
-        });
-        handleFormChange(undefined, undefined, updatedData);
-    };
-    return {
-        formData,
-        formErrors,
-        handleFormChange,
-        resetFormData,
-        validateForm,
-        loadFormWithDrawerItem,
-    };
-};
-
-const useClickNode = () => {
-    const { setCurrentModal } = useModalStore();
-    const { setDrawerType, setDrawerEntityId } = useDrawerStore();
-    const onClickNode = (_, object) => {
-        const { data: { id, type }, } = object;
-        switch (type) {
-            case EntityTypes.Source:
-            case EntityTypes.Destination:
-            case EntityTypes.Action:
-            case EntityTypes.InstrumentationRule:
-                setDrawerType(type);
-                setDrawerEntityId(id);
-                break;
-            case AddNodeTypes.AddSource:
-                setCurrentModal(EntityTypes.Source);
-                break;
-            case AddNodeTypes.AddDestination:
-                setCurrentModal(EntityTypes.Destination);
-                break;
-            case AddNodeTypes.AddAction:
-                setCurrentModal(EntityTypes.Action);
-                break;
-            case AddNodeTypes.AddRule:
-                setCurrentModal(EntityTypes.InstrumentationRule);
-                break;
-            default:
-                console.warn('Unhandled node click', object);
-                break;
-        }
-    };
-    return { onClickNode };
-};
-
-const useClickNotification = () => {
-    const { setDrawerType, setDrawerEntityId } = useDrawerStore();
-    const { markAsDismissed, markAsSeen } = useNotificationStore();
-    const onClickNotification = (notif, options) => {
-        const { id, crdType, target } = notif;
-        const { dismissToast } = options || {};
-        if (crdType && target) {
-            switch (crdType) {
-                case EntityTypes.InstrumentationRule:
-                    setDrawerType(EntityTypes.InstrumentationRule);
-                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.InstrumentationRule));
-                    break;
-                case EntityTypes.Source:
-                case 'InstrumentationConfig':
-                case 'InstrumentationInstance':
-                    setDrawerType(EntityTypes.Source);
-                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Source));
-                    break;
-                case EntityTypes.Action:
-                    setDrawerType(EntityTypes.Action);
-                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Action));
-                    break;
-                case EntityTypes.Destination:
-                case 'Destination':
-                    setDrawerType(EntityTypes.Destination);
-                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Destination));
-                    break;
-                default:
-                    console.warn('notif click not handled for:', { crdType, target });
-                    break;
-            }
-        }
-        markAsSeen(id);
-        if (dismissToast)
-            markAsDismissed(id);
-    };
-    return { onClickNotification };
-};
-
-const INITIAL$1 = {
-    // @ts-ignore form should be initialized with empty values
-    type: '',
-    name: '',
-    exportedSignals: {
-        logs: false,
-        metrics: false,
-        traces: false,
-    },
-    fields: [],
-};
-const buildFormDynamicFields = (fields) => {
-    return fields
-        .filter((f) => !!f)
-        .map((f) => {
-        const { name, componentType, componentProperties, displayName, initialValue, renderCondition } = f;
-        switch (componentType) {
-            case FieldTypes.Dropdown: {
-                const componentPropertiesJson = safeJsonParse(componentProperties, {});
-                const options = Array.isArray(componentPropertiesJson.values)
-                    ? componentPropertiesJson.values.map((value) => ({
-                        id: value,
-                        value,
-                    }))
-                    : Object.entries(componentPropertiesJson.values).map(([key, value]) => ({
-                        id: key,
-                        value,
-                    }));
-                return {
-                    name,
-                    componentType: componentType,
-                    title: displayName,
-                    value: initialValue,
-                    placeholder: componentPropertiesJson.placeholder || 'Select an option',
-                    options,
-                    renderCondition,
-                    ...componentPropertiesJson,
-                };
-            }
-            default: {
-                const componentPropertiesJson = safeJsonParse(componentProperties, {});
-                return {
-                    name,
-                    componentType,
-                    title: displayName,
-                    value: initialValue,
-                    renderCondition,
-                    ...componentPropertiesJson,
-                };
-            }
-        }
-    });
-};
-const useDestinationFormData = (params) => {
-    const { supportedSignals, preLoadedFields } = params || {};
-    const { addNotification } = useNotificationStore();
-    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$1);
-    const [yamlFields, setYamlFields] = useState([]);
-    const [dynamicFields, setDynamicFields] = useState([]);
-    useEffect(() => {
-        if (yamlFields) {
-            setDynamicFields(buildFormDynamicFields(yamlFields).map((field) => {
-                // if we have preloaded fields, we need to set the value of the field
-                // (this can be from an odigos-detected-destination during create, or from an existing destination during edit/update)
-                if (!!preLoadedFields) {
-                    const parsedFields = typeof preLoadedFields === 'string' ? safeJsonParse(preLoadedFields, {}) : preLoadedFields;
-                    if (field.name in parsedFields) {
-                        return {
-                            ...field,
-                            // @ts-ignore
-                            value: parsedFields[field.name],
-                        };
-                    }
-                }
-                return field;
-            }));
-        }
-        else {
-            setDynamicFields([]);
-        }
-    }, [yamlFields, preLoadedFields]);
-    useEffect(() => {
-        handleFormChange('fields', dynamicFields.map((field) => ({
-            key: field.name,
-            value: field.value,
-        })));
-    }, [dynamicFields]);
-    useEffect(() => {
-        const { logs, metrics, traces } = supportedSignals || {};
-        handleFormChange('exportedSignals', {
-            logs: logs?.supported || false,
-            metrics: metrics?.supported || false,
-            traces: traces?.supported || false,
-        });
-    }, [supportedSignals]);
-    const validateForm = (params) => {
-        const errors = {};
-        let ok = true;
-        dynamicFields.forEach(({ name, value, required }) => {
-            if (required && !value) {
-                ok = false;
-                errors[name] = FORM_ALERTS.FIELD_IS_REQUIRED;
-            }
-        });
-        if (!ok && params?.withAlert) {
-            addNotification({
-                type: StatusType.Warning,
-                title: params.alertTitle,
-                message: FORM_ALERTS.REQUIRED_FIELDS,
-                hideFromHistory: true,
-            });
-        }
-        handleErrorChange(undefined, undefined, errors);
-        return ok;
-    };
-    const loadFormWithDrawerItem = ({ destinationType: { type }, name, exportedSignals, fields }) => {
-        const updatedData = {
-            ...INITIAL$1,
-            type,
-            name,
-            exportedSignals,
-            fields: Object.entries(safeJsonParse(fields, {})).map(([key, value]) => ({ key, value })),
-        };
-        handleFormChange(undefined, undefined, updatedData);
-    };
-    return {
-        formData,
-        formErrors,
-        handleFormChange,
-        resetFormData,
-        validateForm,
-        loadFormWithDrawerItem,
-        yamlFields,
-        setYamlFields,
-        dynamicFields,
-        setDynamicFields,
-    };
-};
-
-const INITIAL = {
-    otelServiceName: '',
-};
-const useSourceFormData = () => {
-    const { addNotification } = useNotificationStore();
-    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL);
-    const validateForm = (params) => {
-        const errors = {};
-        let ok = true;
-        handleErrorChange(undefined, undefined, errors);
-        return ok;
-    };
-    const loadFormWithDrawerItem = ({ otelServiceName, name }) => {
-        const updatedData = {
-            ...INITIAL,
-            otelServiceName: otelServiceName || name || '',
-        };
-        handleFormChange(undefined, undefined, updatedData);
-    };
-    return {
-        formData,
-        formErrors,
-        handleFormChange,
-        resetFormData,
-        validateForm,
-        loadFormWithDrawerItem,
-    };
-};
-
-const useSourceSelectionFormData = (params) => {
-    const { namespaces } = useEntityStore();
-    const { selectedNamespace, onSelectNamespace, namespace } = params || {};
-    // only for "onboarding" - get unsaved values and set to state
-    // (this is to persist the values when user navigates back to this page)
-    const { configuredSources, configuredFutureApps, availableSources } = useSetupStore();
-    // Keeps intial values fetched from API, so we can later filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist sources".
-    const [recordedInitialSources, setRecordedInitialSources] = useState(availableSources);
-    const [selectAllForNamespace, setSelectAllForNamespace] = useState('');
-    const [selectedSources, setSelectedSources] = useState(configuredSources);
-    const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
-    useEffect(() => {
-        if (!!namespaces?.length) {
-            // initialize all states (to avoid undefined errors)
-            setRecordedInitialSources((prev) => {
-                const payload = { ...prev };
-                namespaces.forEach(({ name }) => (payload[name] = payload[name] || []));
-                return payload;
-            });
-            setSelectedSources((prev) => {
-                const payload = { ...prev };
-                namespaces.forEach(({ name }) => (payload[name] = payload[name] || []));
-                return payload;
-            });
-            setSelectedFutureApps((prev) => {
-                const payload = { ...prev };
-                namespaces.forEach(({ name, selected }) => (payload[name] = payload[name] || selected || false));
-                return payload;
-            });
-        }
-    }, [namespaces]);
-    useEffect(() => {
-        if (!!namespace) {
-            // initialize sources for this namespace
-            const { name, sources = [] } = namespace;
-            setRecordedInitialSources((prev) => ({
-                ...prev,
-                [name]: sources.map(({ name, kind, selected, numberOfInstances }) => ({
-                    name,
-                    kind,
-                    selected,
-                    numberOfInstances,
-                })),
-            }));
-            setSelectedSources((prev) => ({
-                ...prev,
-                [name]: !!prev[name].length
-                    ? prev[name]
-                    : sources.map(({ name, kind, selected, numberOfInstances }) => ({
-                        name,
-                        kind,
-                        selected,
-                        numberOfInstances,
-                    })),
-            }));
-        }
-    }, [namespace]);
-    // form filters
-    const [searchText, setSearchText] = useState('');
-    const [showSelectedOnly, setShowSelectedOnly] = useState(false);
-    const onSelectAll = useCallback((selected, ns, selectionsByNamespace) => {
-        // When clicking "select all" on a single namespace
-        if (!!ns) {
-            if (!selectionsByNamespace) {
-                // If the sources are not loaded yet, call the onSelectNamespace to load the sources
-                onSelectNamespace?.(selected ? ns : '');
-                // Set the state, so the interval would be able to use the namespace
-                setSelectAllForNamespace(selected ? ns : '');
-            }
-            else if (!!selectionsByNamespace?.[ns]?.length) {
-                // Clear the state, so the interval would stop
-                setSelectAllForNamespace('');
-            }
-            // Set the selected sources
-            setSelectedSources((prev) => ({
-                ...prev,
-                [ns]: selectionsByNamespace?.[ns]?.map((source) => ({
-                    ...source,
-                    selected,
-                })) || [],
-            }));
-            // setSelectedFutureApps((prev) => ({
-            //   ...prev,
-            //   [ns]: !!selectionsByNamespace?.[ns]?.length ? selected : false,
-            // }))
-        }
-        // When clicking "select all" on all namespaces
-        else {
-            setSelectedSources((prev) => {
-                const payload = { ...prev };
-                Object.entries(payload).forEach(([key, sources]) => {
-                    payload[key] = sources.map((source) => ({ ...source, selected }));
-                });
-                return payload;
-            });
-        }
-    }, [selectedSources]);
-    // This is to keep trying "select all" per namespace, until the sources are loaded (allows for 1-click, better UX).
-    useEffect(() => {
-        if (!!selectAllForNamespace) {
-            const interval = setInterval(() => onSelectAll(true, selectAllForNamespace, selectedSources), 100);
-            return () => clearInterval(interval);
-        }
-    }, [selectAllForNamespace, onSelectAll]);
-    const onSelectSource = (source, namespace) => {
-        const id = namespace || selectedNamespace;
-        if (!id)
-            return;
-        const arr = [...(selectedSources[id] || [])];
-        const foundIdx = arr.findIndex(({ name, kind }) => name === source.name && kind === source.kind);
-        if (foundIdx !== -1) {
-            // Replace the item with a new object to avoid mutating a possibly read-only object
-            const updatedItem = { ...arr[foundIdx], selected: !arr[foundIdx].selected };
-            arr[foundIdx] = updatedItem;
-        }
-        else {
-            arr.push({ ...source, selected: true });
-        }
-        setSelectedSources((prev) => ({ ...prev, [id]: arr }));
-    };
-    const onSelectFutureApps = (bool, namespace) => {
-        const id = namespace || selectedNamespace;
-        if (!id)
-            return;
-        setSelectedFutureApps((prev) => ({ ...prev, [id]: bool }));
-    };
-    const filterNamespaces = (options) => {
-        const { cancelSearch } = options || {};
-        const namespaces = Object.entries(selectedSources);
-        const isSearchOk = (targetText) => cancelSearch || !searchText || targetText.toLowerCase().includes(searchText);
-        return namespaces.filter(([namespace]) => isSearchOk(namespace));
-    };
-    const filterSources = (namespace, options) => {
-        const { cancelSearch, cancelSelected } = options || {};
-        const id = namespace || selectedNamespace;
-        if (!id)
-            return [];
-        const isSearchOk = (targetText) => cancelSearch || !searchText || targetText.toLowerCase().includes(searchText);
-        const isOnlySelectedOk = (sources, compareKey, target) => cancelSelected || !showSelectedOnly || !!sources.find((item) => item[compareKey] === target && item.selected);
-        return selectedSources[id].filter((source) => isSearchOk(source.name) && isOnlySelectedOk(selectedSources[id], 'name', source.name));
-    };
-    // This is to filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist sources".
-    const getApiSourcesPayload = () => {
-        const payload = {};
-        Object.entries(selectedSources).forEach(([namespace, sources]) => {
-            sources.forEach((source) => {
-                const foundInitial = recordedInitialSources[namespace]?.find((initialSource) => initialSource.name === source.name && initialSource.kind === source.kind);
-                if (foundInitial?.selected !== source.selected) {
-                    if (!payload[namespace])
-                        payload[namespace] = [];
-                    payload[namespace].push({
-                        name: source.name,
-                        kind: source.kind,
-                        selected: source.selected,
-                    });
-                }
-            });
-        });
-        return payload;
-    };
-    // This is to filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist namespaces".
-    const getApiFutureAppsPayload = () => {
-        const payload = {};
-        Object.entries(selectedFutureApps).forEach(([namespace, selected]) => {
-            const foundInitial = namespaces?.find((ns) => ns.name === namespace);
-            if (foundInitial?.selected !== selected) {
-                payload[namespace] = selected;
-            }
-        });
-        return payload;
-    };
-    return {
-        recordedInitialSources,
-        filterNamespaces,
-        filterSources,
-        getApiSourcesPayload,
-        getApiFutureAppsPayload,
-        selectedSources,
-        onSelectSource,
-        selectedFutureApps,
-        onSelectFutureApps,
-        onSelectAll,
-        searchText,
-        setSearchText,
-        showSelectedOnly,
-        setShowSelectedOnly,
-    };
-};
-
-export { useClickNode as a, useClickNotification as b, useDestinationFormData as c, useSourceFormData as d, useSourceSelectionFormData as e, useActionFormData as u };