@odigos/ui-kit 0.0.5 → 0.0.7

package/lib/useSourceSelectionFormData-ClorQ_WP.js

@@ -0,0 +1,560 @@
+import { ACTION_TYPE, NOTIFICATION_TYPE, ADD_NODE_TYPES, ENTITY_TYPES, FIELD_TYPES } from './types.js';
+import { useState, useEffect, useCallback } from 'react';
+import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, i as useSetupStore } from './index-DRT_7tQl.js';
+import 'styled-components';
+import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
+import './index-Byh3BO6S.js';
+import { F as FORM_ALERTS } from './index-Cu2uHOuh.js';
+import { b as useGenericForm } from './useTransition-5w3VnEhL.js';
+import { g as getIdFromSseTarget } from './index-BFct3S32.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 === ACTION_TYPE.ADD_CLUSTER_INFO && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'renames':
+                    if (formData.type === ACTION_TYPE.RENAME_ATTRIBUTES && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'attributeNamesToDelete':
+                    if (formData.type === ACTION_TYPE.DELETE_ATTRIBUTES && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'piiCategories':
+                    if (formData.type === ACTION_TYPE.PII_MASKING && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'fallbackSamplingRatio':
+                    if (formData.type === ACTION_TYPE.ERROR_SAMPLER && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'samplingPercentage':
+                    if (formData.type === ACTION_TYPE.PROBABILISTIC_SAMPLER && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'endpointsFilters':
+                    if (formData.type === ACTION_TYPE.LATENCY_SAMPLER) {
+                        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: NOTIFICATION_TYPE.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 ENTITY_TYPES.SOURCE:
+            case ENTITY_TYPES.DESTINATION:
+            case ENTITY_TYPES.ACTION:
+            case ENTITY_TYPES.INSTRUMENTATION_RULE:
+                setDrawerType(type);
+                setDrawerEntityId(id);
+                break;
+            case ADD_NODE_TYPES.ADD_SOURCE:
+                setCurrentModal(ENTITY_TYPES.SOURCE);
+                break;
+            case ADD_NODE_TYPES.ADD_DESTINATION:
+                setCurrentModal(ENTITY_TYPES.DESTINATION);
+                break;
+            case ADD_NODE_TYPES.ADD_ACTION:
+                setCurrentModal(ENTITY_TYPES.ACTION);
+                break;
+            case ADD_NODE_TYPES.ADD_RULE:
+                setCurrentModal(ENTITY_TYPES.INSTRUMENTATION_RULE);
+                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 ENTITY_TYPES.INSTRUMENTATION_RULE:
+                    setDrawerType(ENTITY_TYPES.INSTRUMENTATION_RULE);
+                    setDrawerEntityId(getIdFromSseTarget(target, ENTITY_TYPES.INSTRUMENTATION_RULE));
+                    break;
+                case ENTITY_TYPES.SOURCE:
+                case 'InstrumentationConfig':
+                case 'InstrumentationInstance':
+                    setDrawerType(ENTITY_TYPES.SOURCE);
+                    setDrawerEntityId(getIdFromSseTarget(target, ENTITY_TYPES.SOURCE));
+                    break;
+                case ENTITY_TYPES.ACTION:
+                    setDrawerType(ENTITY_TYPES.ACTION);
+                    setDrawerEntityId(getIdFromSseTarget(target, ENTITY_TYPES.ACTION));
+                    break;
+                case ENTITY_TYPES.DESTINATION:
+                case 'Destination':
+                    setDrawerType(ENTITY_TYPES.DESTINATION);
+                    setDrawerEntityId(getIdFromSseTarget(target, ENTITY_TYPES.DESTINATION));
+                    break;
+                default:
+                    console.warn('notif click not handled for:', { crdType, target });
+                    break;
+            }
+        }
+        markAsSeen(id);
+        if (dismissToast)
+            markAsDismissed(id);
+    };
+    return { onClickNotification };
+};
+
+const INITIAL$1 = {
+    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 FIELD_TYPES.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: NOTIFICATION_TYPE.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, namespace, selectedNamespace, onSelectNamespace } = 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 }) => ({
+                        name,
+                        kind,
+                        selected,
+                    })),
+            }));
+        }
+    }, [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 };