@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.271

package/components/routes/views/Views.js

@@ -0,0 +1,182 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clear, Edit, SavedSearch, Star, StarBorder } from '@mui/icons-material';
+import { Autocomplete, Card, Checkbox, IconButton, Skeleton, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
+import { ViewTitle } from '@cccsaurora/howler-ui/components/elements/view/ViewTitle';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { isNull, omitBy, size } from 'lodash-es';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+const FIELDS_TO_SEARCH = ['title', 'query', 'sort', 'type', 'owner'];
+const ViewsBase = () => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const navigate = useNavigate();
+    const { dispatchApi } = useMyApi();
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
+    const removeFavourite = useContextSelector(ViewContext, ctx => ctx.removeFavourite);
+    const removeView = useContextSelector(ViewContext, ctx => ctx.removeView);
+    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const defaultView = useContextSelector(ViewContext, ctx => ctx.defaultView);
+    const setDefaultView = useContextSelector(ViewContext, ctx => ctx.setDefaultView);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [response, setResponse] = useState(null);
+    const [type, setType] = useState(searchParams.get('type') || null);
+    const [hasError, setHasError] = useState(false);
+    const [searching, setSearching] = useState(false);
+    const [favouritesOnly, setFavouritesOnly] = useState(false);
+    const [defaultViewOpen, setDefaultViewOpen] = useState(false);
+    const [defaultViewLoading, setDefaultViewLoading] = useState(false);
+    const onSearch = useCallback(async () => {
+        try {
+            setSearching(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            const searchTerm = phrase ? `*${sanitizeLuceneQuery(phrase)}*` : '*';
+            const phraseQuery = FIELDS_TO_SEARCH.map(_field => `${_field}:${searchTerm}`).join(' OR ');
+            const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${type ?? '*'}${type === 'personal' ? ' OR readonly' : ''})`;
+            const favouritesQuery = favouritesOnly && user.favourite_views.length > 0 ? ` AND view_id:(${user.favourite_views.join(' OR ')})` : '';
+            setResponse(await dispatchApi(api.search.view.post({
+                query: `(${phraseQuery}) AND ${typeQuery}${favouritesQuery}`,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [
+        phrase,
+        setSearchParams,
+        searchParams,
+        user.username,
+        user.favourite_views,
+        type,
+        favouritesOnly,
+        dispatchApi,
+        pageCount,
+        offset
+    ]);
+    // Load the items into list when response changes.
+    // This hook should only trigger when the 'response' changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map(item => ({
+                id: item.view_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    const onDelete = useCallback(async (event, id) => {
+        event.preventDefault();
+        event.stopPropagation();
+        await removeView(id);
+        onSearch();
+    }, [onSearch, removeView]);
+    const onFavourite = useCallback(async (event, id) => {
+        event.preventDefault();
+        if (user.favourite_views?.includes(id)) {
+            await removeFavourite(id);
+            if (user.favourite_views?.length < 2) {
+                setFavouritesOnly(false);
+            }
+        }
+        else {
+            await addFavourite(id);
+        }
+    }, [addFavourite, removeFavourite, user.favourite_views]);
+    const onDefaultViewOpen = useCallback(async () => {
+        setDefaultViewOpen(true);
+        setDefaultViewLoading(true);
+        try {
+            await fetchViews();
+        }
+        finally {
+            setDefaultViewLoading(false);
+        }
+    }, [fetchViews]);
+    const onTypeChange = useCallback(async (_type) => {
+        setType(_type);
+        if (_type) {
+            searchParams.delete('type');
+            searchParams.set('type', _type);
+            setSearchParams(searchParams, { replace: true });
+        }
+        else if (searchParams.has('type')) {
+            searchParams.delete('type');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [searchParams, setSearchParams]);
+    useEffect(() => {
+        let changed = false;
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            changed = true;
+        }
+        if (searchParams.has('type') && !['personal', 'global'].includes(searchParams.get('type'))) {
+            searchParams.delete('type');
+            changed = true;
+        }
+        if (changed) {
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [searchParams, setSearchParams]);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!searching) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset, favouritesOnly, type]);
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", value: type, exclusive: true, onChange: (__, _type) => onTypeChange(_type), children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: size(views) > 0 ? (_jsx(Autocomplete, { open: defaultViewOpen, loading: defaultViewLoading, onOpen: onDefaultViewOpen, onClose: () => setDefaultViewOpen(false), options: Object.values(omitBy(views, isNull)), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
+                _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: o.query }) })] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('route.views.manager.default'), sx: { minWidth: '300px' } })), filterOptions: (_views, { inputValue }) => _views.filter(v => t(v.title).toLowerCase().includes(inputValue.toLowerCase()) ||
+                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views[defaultView] ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: `/views/${item.item.view_id}`, children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
+                        (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), item.item.type === 'global' && item.item.owner !== user.username && (_jsx(Tooltip, { title: item.item.owner, children: _jsx("div", { children: _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: item.item.owner }) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
+};
+const Views = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(ViewsBase, {}) }));
+};
+export default Views;

package/i18n.d.ts

@@ -0,0 +1,3 @@
+import { type i18n } from 'i18next';
+declare const i18nInstance: i18n;
+export default i18nInstance;

package/i18n.js

@@ -0,0 +1,43 @@
+import { createInstance } from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import helpMainEN from '@cccsaurora/howler-ui/locales/en/help/main.json';
+import helpSearchEN from '@cccsaurora/howler-ui/locales/en/help/search.json';
+import translationEN from '@cccsaurora/howler-ui/locales/en/translation.json';
+import helpMainFR from '@cccsaurora/howler-ui/locales/fr/help/main.json';
+import helpSearchFR from '@cccsaurora/howler-ui/locales/fr/help/search.json';
+import translationFR from '@cccsaurora/howler-ui/locales/fr/translation.json';
+import { initReactI18next } from 'react-i18next';
+const resources = {
+    en: {
+        translation: translationEN,
+        helpSearch: helpSearchEN,
+        helpMain: helpMainEN
+    },
+    fr: {
+        translation: translationFR,
+        helpSearch: helpSearchFR,
+        helpMain: helpMainFR
+    },
+    woof: {
+        translation: Object.keys(translationEN).reduce((acc, key) => {
+            acc[key] = 'woof';
+            return acc;
+        }, {})
+    }
+};
+const i18nInstance = createInstance();
+i18nInstance
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+    fallbackLng: 'en',
+    keySeparator: false,
+    interpolation: {
+        escapeValue: false
+    },
+    detection: {
+        order: ['localStorage', 'cookie']
+    },
+    resources
+});
+export default i18nInstance;

package/index.d.ts

@@ -0,0 +1,3 @@
+import '@fontsource/roboto';
+import '@cccsaurora/howler-ui/i18n';
+import 'index.css';

package/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@fontsource/roboto';
+import App from '@cccsaurora/howler-ui/components/app/App';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
+import '@cccsaurora/howler-ui/i18n';
+import 'index.css';
+// import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import * as ReactDOM from 'react-dom/client';
+dayjs.extend(utc);
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+// This is where you can inject UI plugins to modify Howler's interface.
+// howlerPluginStore.install(new ExamplePlugin());
+ReactDOM.createRoot(document.getElementById('root')).render(_jsx(App, {}));

package/locales/en/help/main.json

@@ -1,13 +1,13 @@
 {
-  "route.help.client.description": "This documentation will outline how to interact with the howler API using the howler client in both Java and python development environments. We will outline the basic process of creating a new hit in each environment as well as searching howler for hits matching your query.",
-  "route.help.hit.description": "This documentation details several parts of ingesting, displaying and interacting with hits.",
-  "route.help.search.description": "Explanations and help for when you are searching for hits in Howler, including syntax and examples.",
-  "route.help.views.description": "Views are a feature in Howler that allows users to create custom, default queries through which they can organize and triage hits. In this document, we will outline how to create, update, interact with and delete views.",
-  "route.help.templates.description": "An explanation of using Howler Templates to display customized data about hits from a given analytic.",
-  "route.help.auth.description": "Howler's API supports a number of authentication approaches when accessing the API. This document will outline the different approaches, and explain how to use each of them.",
-  "route.help.actions.description": "Actions are a feature in Howler that allow users to perform particular tasks on a large number of hits, through automating the execution of a task on each hit. This document explains for to use actions in Howler.",
-  "route.help.api.description": "An overview of the Howler API and its components.",
-  "route.help.notebook.description": "Howler provides the option to add notebooks to analytics to aid in triaging hits and alerts. This document explains how to use notebooks in Howler.",
-  "route.help.overviews.description": "Howler provides the option to customize the presentation of data associated with an alert using overviews. This article explains the basics of creating and using overviews.",
-  "route.help.retention.description": "In order to comply with organizational policies, Howler is configured to purge stale alerts after a specific amount of time. This article explains how this retention mechanism works."
+    "route.help.client.description": "This documentation will outline how to interact with the howler API using the howler client in both Java and python development environments. We will outline the basic process of creating a new hit in each environment as well as searching howler for hits matching your query.",
+    "route.help.hit.description": "This documentation details several parts of ingesting, displaying and interacting with hits.",
+    "route.help.search.description": "Explanations and help for when you are searching for hits in Howler, including syntax and examples.",
+    "route.help.views.description": "Views are a feature in Howler that allows users to create custom, default queries through which they can organize and triage hits. In this document, we will outline how to create, update, interact with and delete views.",
+    "route.help.templates.description": "An explanation of using Howler Templates to display customized data about hits from a given analytic.",
+    "route.help.auth.description": "Howler's API supports a number of authentication approaches when accessing the API. This document will outline the different approaches, and explain how to use each of them.",
+    "route.help.actions.description": "Actions are a feature in Howler that allow users to perform particular tasks on a large number of hits, through automating the execution of a task on each hit. This document explains for to use actions in Howler.",
+    "route.help.api.description": "An overview of the Howler API and its components.",
+    "route.help.notebook.description": "Howler provides the option to add notebooks to analytics to aid in triaging hits and alerts. This document explains how to use notebooks in Howler.",
+    "route.help.overviews.description": "Howler provides the option to customize the presentation of data associated with an alert using overviews. This article explains the basics of creating and using overviews.",
+    "route.help.retention.description": "In order to comply with organizational policies, Howler is configured to purge stale alerts after a specific amount of time. This article explains how this retention mechanism works."
 }