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

package/setupTests.js

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+import * as matchers from '@testing-library/jest-dom/matchers';
+import '@testing-library/jest-dom/vitest';
+import { configure } from '@testing-library/react';
+import { server } from '@cccsaurora/howler-ui/tests/server';
+// Extend vitest with the dom matchers from jest-dom.
+expect.extend(matchers);
+// tell React Testing Library to look for id as the testId.
+configure({ testIdAttribute: 'id' });
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());

package/tests/MockLocalStorage.d.ts

@@ -0,0 +1,5 @@
+export default class MockLocalStorage {
+    constructor();
+    get length(): number;
+    get __STORE__(): this;
+}

package/tests/MockLocalStorage.js

@@ -0,0 +1,44 @@
+export default class MockLocalStorage {
+    constructor() {
+        Object.defineProperty(this, 'getItem', {
+            enumerable: false,
+            value: vi.fn(key => (this[key] !== undefined ? this[key] : null))
+        });
+        Object.defineProperty(this, 'setItem', {
+            enumerable: false,
+            // not mentioned in the spec, but we must always coerce to a string
+            value: vi.fn((key, val) => {
+                this[key] = `${val}`;
+            })
+        });
+        Object.defineProperty(this, 'removeItem', {
+            enumerable: false,
+            value: vi.fn(key => {
+                delete this[key];
+            })
+        });
+        Object.defineProperty(this, 'clear', {
+            enumerable: false,
+            value: vi.fn(() => {
+                Object.keys(this).map(key => delete this[key]);
+            })
+        });
+        Object.defineProperty(this, 'toString', {
+            enumerable: false,
+            value: vi.fn(() => {
+                return '[object Storage]';
+            })
+        });
+        Object.defineProperty(this, 'key', {
+            enumerable: false,
+            value: vi.fn(idx => Object.keys(this)[idx] || null)
+        });
+    } // end constructor
+    get length() {
+        return Object.keys(this).length;
+    }
+    // for backwards compatibility
+    get __STORE__() {
+        return this;
+    }
+}

package/tests/server-handlers.d.ts

@@ -0,0 +1,5 @@
+export declare const MOCK_RESPONSES: {
+    [path: string]: any;
+};
+declare const handlers: import("msw").HttpHandler[];
+export { handlers };

package/tests/server-handlers.js

@@ -0,0 +1,97 @@
+import { http, HttpResponse } from 'msw';
+export const MOCK_RESPONSES = {
+    '/api/v1/view/example_view_id': {
+        owner: 'user',
+        settings: {
+            advance_on_triage: false
+        },
+        view_id: 'example_view_id',
+        query: 'howler.id:*',
+        sort: 'event.created desc',
+        title: 'Example View',
+        type: 'personal',
+        span: 'date.range.1.month'
+    },
+    '/api/v1/search/view': {
+        items: [
+            {
+                owner: 'user',
+                settings: {
+                    advance_on_triage: false
+                },
+                view_id: 'searched_view_id',
+                query: 'howler.id:searched',
+                sort: 'event.created desc',
+                title: 'Searched View',
+                type: 'personal',
+                span: 'date.range.1.month'
+            }
+        ],
+        total: 1,
+        rows: 1
+    },
+    '/api/v1/view/new_view_id': {
+        owner: 'user',
+        settings: {
+            advance_on_triage: false
+        },
+        view_id: 'new_view_id',
+        query: 'howler.id:new',
+        sort: 'event.created desc',
+        title: 'New View',
+        type: 'personal',
+        span: 'date.range.1.month'
+    },
+    '/api/v1/view/:view_id/favourite': { success: true }
+};
+const handlers = [
+    ...Object.entries(MOCK_RESPONSES).map(([path, data]) => http.all(path, async () => HttpResponse.json({ api_response: data }))),
+    http.post('/api/v1/view', async () => HttpResponse.json({
+        api_response: {
+            owner: 'user',
+            settings: {
+                advance_on_triage: false
+            },
+            view_id: 'example_created_view',
+            query: 'howler.id:*',
+            sort: 'event.created desc',
+            title: 'Example View',
+            type: 'personal',
+            span: 'date.range.1.month'
+        }
+    }, { status: 201 })),
+    http.delete('/api/v1/view/:view_id', async () => HttpResponse.json({
+        api_response: {
+            success: true
+        }
+    }, { status: 204 })),
+    http.get('/api/v1/view', async () => HttpResponse.json({
+        api_response: [
+            {
+                owner: 'user',
+                settings: {
+                    advance_on_triage: false
+                },
+                view_id: 'example_view_id',
+                query: 'howler.id:*',
+                sort: 'event.created desc',
+                title: 'Example View',
+                type: 'personal',
+                span: 'date.range.1.month'
+            },
+            {
+                owner: 'user',
+                settings: {
+                    advance_on_triage: true
+                },
+                view_id: 'another_view_id',
+                query: 'howler.status:open',
+                sort: 'event.created asc',
+                title: 'Another View',
+                type: 'global',
+                span: 'date.range.1.week'
+            }
+        ]
+    }))
+];
+export { handlers };

package/tests/server.d.ts

@@ -0,0 +1,3 @@
+import { http } from 'msw';
+declare const server: import("msw/node").SetupServerApi;
+export { http, server };

package/tests/server.js

@@ -0,0 +1,5 @@
+import { http } from 'msw';
+import { setupServer } from 'msw/node';
+import { handlers } from './server-handlers';
+const server = setupServer(...handlers);
+export { http, server };

package/utils/Throttler.d.ts

@@ -0,0 +1,9 @@
+export default class Throttler {
+    private throttleId;
+    private delayId;
+    private msec;
+    constructor(msec: number);
+    throttle(fn: () => void): void;
+    debounce(fn: () => void): void;
+    delayAsync(fn: (...args: any[]) => Promise<any>, ...args: any[]): Promise<any>;
+}

package/utils/Throttler.js

@@ -0,0 +1,38 @@
+export default class Throttler {
+    throttleId = null;
+    delayId = null;
+    msec = null;
+    constructor(msec) {
+        this.msec = msec;
+        this.debounce = this.debounce.bind(this);
+    }
+    throttle(fn) {
+        if (!this.throttleId) {
+            fn();
+            this.throttleId = setTimeout(() => {
+                this.throttleId = null;
+            }, this.msec);
+        }
+    }
+    debounce(fn) {
+        if (this.delayId) {
+            clearTimeout(this.delayId);
+        }
+        this.delayId = setTimeout(fn, this.msec);
+    }
+    delayAsync(fn, ...args) {
+        if (this.delayId) {
+            clearTimeout(this.delayId);
+        }
+        return new Promise((resolve, reject) => {
+            this.delayId = setTimeout(async () => {
+                try {
+                    resolve(await fn?.(...args));
+                }
+                catch (error) {
+                    reject(error);
+                }
+            }, this.msec);
+        });
+    }
+}

package/utils/actionUtils.d.ts

@@ -0,0 +1,31 @@
+import type { ActionOperation, ActionOperationStep } from '@cccsaurora/howler-ui/models/ActionTypes';
+import type { Operation } from '@cccsaurora/howler-ui/models/entities/generated/Operation';
+/**
+ * A simple validation function to ensure we have all the necessary arguments filled out.
+ * @param step The step to validate
+ * @param values The context to validate on
+ * @returns whether all the necessary arguments have been filled in the given step
+ */
+export declare const checkArgsAreFilled: (step: ActionOperationStep, values: string) => boolean;
+/**
+ * Take the raw options object as specified by the server and get a list of usable options, filtered using the current values suppled for the action entry.
+ * @param options The raw list of options from the server
+ * @param arg The argument for which we are parsing options
+ * @param context The values provided so far by the user
+ * @returns a list of options matching the current context
+ */
+export declare const getOptionsByContext: (options: ActionOperationStep["options"], arg: string, context: string) => string[];
+/**
+ * Get a list of arguments to display based on the current context, using the current values supplied for the action entry.
+ * @param args a complete list of all arguments in the action
+ * @param values the current list of values provided by the user
+ * @returns A list of arguments to display
+ */
+export declare const getArgsByContext: (args: ActionOperationStep["args"], values: string) => string[];
+/**
+ * Check to see if a given action has all the data necessary to execute successfully
+ * @param data The user-provided data
+ * @param action The action to validate
+ * @returns whether the action is ready to execute
+ */
+export declare const operationReady: (data: Operation["data_json"], action: ActionOperation) => boolean;

package/utils/actionUtils.js

@@ -0,0 +1,88 @@
+/**
+ * A simple validation function to ensure we have all the necessary arguments filled out.
+ * @param step The step to validate
+ * @param values The context to validate on
+ * @returns whether all the necessary arguments have been filled in the given step
+ */
+export const checkArgsAreFilled = (step, values) => {
+    if (!values) {
+        return false;
+    }
+    const parsedValues = JSON.parse(values);
+    return Object.keys(step.args).every(arg => !!parsedValues[arg]);
+};
+/**
+ * Convert a raw list of keyt value pairs into a context object used in other util functions. Converts it into a list like so:
+ *
+ * {
+ *  "key": "value"
+ * }
+ * is converted to:
+ * ["key:value"]
+ *
+ * Which is the format used for conditionals throughout the action specification.
+ *
+ * @param values The raw values object to convert
+ * @returns a list representing the current context
+ */
+const buildContext = (values = '{}') => Object.entries(JSON.parse(values)).map(tuple => tuple.join(':'));
+/**
+ * Take the raw options object as specified by the server and get a list of usable options, filtered using the current values suppled for the action entry.
+ * @param options The raw list of options from the server
+ * @param arg The argument for which we are parsing options
+ * @param context The values provided so far by the user
+ * @returns a list of options matching the current context
+ */
+export const getOptionsByContext = (options, arg, context) => {
+    if (!options[arg]) {
+        return [];
+    }
+    // If it's just an array, there's no special conditional logic to deal with - we just return the array
+    if (Array.isArray(options[arg])) {
+        return options[arg];
+    }
+    // Build the context up from the raw values, and check to see if any of the context values matches the conditionals provided in the options.
+    // i.e.
+    //
+    // options = {
+    //  "status:open": [] // would match if values["status"] === "open"
+    // }
+    //
+    // Note that this restricts the options to a single key:value pair.
+    // For more complex cases down the road (if those end up existing), we'll need to improve this
+    const matchingKey = buildContext(context).find(key => !!options[arg][key]);
+    return options[arg][matchingKey] ?? [];
+};
+/**
+ * Get a list of arguments to display based on the current context, using the current values supplied for the action entry.
+ * @param args a complete list of all arguments in the action
+ * @param values the current list of values provided by the user
+ * @returns A list of arguments to display
+ */
+export const getArgsByContext = (args, values) => Object.entries(args)
+    .filter(([_, conditions]) => {
+    // If the array is empty, we always want to show this argument
+    if (conditions.length < 1) {
+        return true;
+    }
+    const context = buildContext(values);
+    // Note that the .some(...) here means the arguments are ORed together, not ANDed. So:
+    // "arg_to_show": ["status:open", "assignment:goose"]
+    // Will show if only one of these two conditions is valid.
+    return conditions.some(c => context.includes(c));
+})
+    .map(([arg, _]) => arg);
+/**
+ * Check to see if a given action has all the data necessary to execute successfully
+ * @param data The user-provided data
+ * @param action The action to validate
+ * @returns whether the action is ready to execute
+ */
+export const operationReady = (data, action) => {
+    if (!data) {
+        return false;
+    }
+    const parsedData = JSON.parse(data);
+    return (action &&
+        getArgsByContext(action.steps.reduce((acc, _step) => ({ ...acc, ..._step.args }), {}), data).every(v => !!parsedData[v]));
+};

package/utils/constants.d.ts

@@ -0,0 +1,79 @@
+import type { ReactElement } from 'react';
+export declare const HOWLER_API: any;
+export declare const LOCAL: boolean;
+export declare const VERSION: any;
+export declare const MY_LOCAL_STORAGE_PREFIX = "howler.ui";
+export declare const MY_SESSION_STORAGE_PREFIX = "howler.ui.cache";
+export declare const ESCALATION_COLORS: {
+    alert: string;
+    evidence: string;
+    hit: string;
+};
+export declare const STATUS_COLORS: {
+    open: string;
+    'in-progress': string;
+    resolved: string;
+};
+export declare const PROVIDER_COLORS: {
+    HBS: "#303f9f";
+    NBS: "#ff4081";
+    CBS: "#00796b";
+    howler: string;
+    unknown: "#616161";
+};
+export declare enum StorageKey {
+    DISABLE_FEATURE_WARNING = "disable.feature.warning",
+    DEFAULT_VIEW = "default.view",
+    PROVIDER = "provider",
+    REFRESH_TOKEN = "refresh_token",
+    USERNAME = "username",
+    APP_TOKEN = "app_token",
+    TOKEN_EXPIRY = "token_expiry",
+    NEXT_LOCATION = "next.location",
+    NEXT_SEARCH = "next.search",
+    LAYOUT_TYPE = "layout.type",
+    SHOW_DETAILS = "hit.panel.details",
+    TIMEZONE = "timezone",
+    DEV_MODE = "dev_mode",
+    DASHBOARD_LAYOUT = "dashboard_layout",
+    DEFAULT_FIELDS = "default_fields",
+    HIT_LAYOUT = "hit_layout",
+    HIT_SHORTCUTS = "hit_shortcuts",
+    FORCE_DROPDOWN = "force_dropdown",
+    VIEWER_ORIENTATION = "viewer_orientation",
+    ETAG = "etag",
+    AXIOS_CACHE = "axios.cache",
+    LAST_SEEN = "hit_last_seen",
+    MOCK_SEARCH_QUERY_STORE = "mock_search_query_store",
+    MOCK_FAVOURITES_STORE = "mock_favourite_store",
+    COMPACT_JSON = "compact_json_view",
+    FLATTEN_JSON = "flatten_json_view",
+    FORCE_DRAWER = "force_drawer",
+    LAST_VIEW = "last_view",
+    ONLY_RULES = "only_rules",
+    PAGE_COUNT = "page_count",
+    SEARCH_PANE_WIDTH = "search_pane_width",
+    GRID_COLLAPSE_COLUMN = "grid_collapse_column",
+    QUERY_HISTORY = "query_history",
+    LOGIN_NONCE = "login_nonce",
+    DISPLAY_TYPE = "display_type"
+}
+export declare const MOCK_SEARCH_QUERY_STORE = "howler.ui.mock_search_query_store";
+export declare const MOCK_FAVOURITES_STORE = "howler.ui.mock_favourite_store";
+export declare const VALID_ACTION_TRIGGERS: string[];
+export declare const minutes: number[];
+export declare const hours: number[];
+/**
+ * Precomputed crontabs for the intervals. This will introduce some natural load-balancing as jobs run at completely different minutes/hours.
+ */
+export declare const RULE_INTERVALS: {
+    key: string;
+    crontab: string;
+}[];
+export declare const DATE_RANGES: string[];
+interface LabelData {
+    icon?: ReactElement;
+    color?: string;
+}
+export declare const LABEL_TYPES: Record<string, LabelData>;
+export {};

package/utils/constants.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LocalPolice, MoodBad, NewReleases, PsychologyAlt, Star, Timeline } from '@mui/icons-material';
+import { blue, grey, indigo, orange, pink, red, teal, yellow } from '@mui/material/colors';
+import dayjs from 'dayjs';
+export const HOWLER_API = import.meta.env.VITE_API;
+export const LOCAL = HOWLER_API === 'MOCK';
+export const VERSION = import.meta.env.VITE_VERSION;
+// A constant that will be used as prefix of all local storage keys.
+export const MY_LOCAL_STORAGE_PREFIX = 'howler.ui';
+export const MY_SESSION_STORAGE_PREFIX = `${MY_LOCAL_STORAGE_PREFIX}.cache`;
+export const ESCALATION_COLORS = {
+    alert: 'warning',
+    evidence: 'error',
+    hit: 'primary'
+};
+export const STATUS_COLORS = {
+    open: 'primary',
+    'in-progress': 'warning',
+    resolved: 'success'
+};
+export const PROVIDER_COLORS = {
+    HBS: indigo[700],
+    NBS: pink.A200,
+    CBS: teal[700],
+    howler: '#1769bb',
+    unknown: grey[700]
+};
+export var StorageKey;
+(function (StorageKey) {
+    StorageKey["DISABLE_FEATURE_WARNING"] = "disable.feature.warning";
+    StorageKey["DEFAULT_VIEW"] = "default.view";
+    StorageKey["PROVIDER"] = "provider";
+    StorageKey["REFRESH_TOKEN"] = "refresh_token";
+    StorageKey["USERNAME"] = "username";
+    StorageKey["APP_TOKEN"] = "app_token";
+    StorageKey["TOKEN_EXPIRY"] = "token_expiry";
+    StorageKey["NEXT_LOCATION"] = "next.location";
+    StorageKey["NEXT_SEARCH"] = "next.search";
+    StorageKey["LAYOUT_TYPE"] = "layout.type";
+    StorageKey["SHOW_DETAILS"] = "hit.panel.details";
+    StorageKey["TIMEZONE"] = "timezone";
+    StorageKey["DEV_MODE"] = "dev_mode";
+    StorageKey["DASHBOARD_LAYOUT"] = "dashboard_layout";
+    StorageKey["DEFAULT_FIELDS"] = "default_fields";
+    StorageKey["HIT_LAYOUT"] = "hit_layout";
+    StorageKey["HIT_SHORTCUTS"] = "hit_shortcuts";
+    StorageKey["FORCE_DROPDOWN"] = "force_dropdown";
+    StorageKey["VIEWER_ORIENTATION"] = "viewer_orientation";
+    StorageKey["ETAG"] = "etag";
+    StorageKey["AXIOS_CACHE"] = "axios.cache";
+    StorageKey["LAST_SEEN"] = "hit_last_seen";
+    StorageKey["MOCK_SEARCH_QUERY_STORE"] = "mock_search_query_store";
+    StorageKey["MOCK_FAVOURITES_STORE"] = "mock_favourite_store";
+    StorageKey["COMPACT_JSON"] = "compact_json_view";
+    StorageKey["FLATTEN_JSON"] = "flatten_json_view";
+    StorageKey["FORCE_DRAWER"] = "force_drawer";
+    StorageKey["LAST_VIEW"] = "last_view";
+    StorageKey["ONLY_RULES"] = "only_rules";
+    StorageKey["PAGE_COUNT"] = "page_count";
+    StorageKey["SEARCH_PANE_WIDTH"] = "search_pane_width";
+    StorageKey["GRID_COLLAPSE_COLUMN"] = "grid_collapse_column";
+    StorageKey["QUERY_HISTORY"] = "query_history";
+    StorageKey["LOGIN_NONCE"] = "login_nonce";
+    StorageKey["DISPLAY_TYPE"] = "display_type";
+})(StorageKey || (StorageKey = {}));
+export const MOCK_SEARCH_QUERY_STORE = `${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.MOCK_SEARCH_QUERY_STORE}`;
+export const MOCK_FAVOURITES_STORE = `${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.MOCK_FAVOURITES_STORE}`;
+export const VALID_ACTION_TRIGGERS = ['create', 'promote', 'demote'];
+const CURRENT_TIME = dayjs();
+export const minutes = [CURRENT_TIME.get('minute'), CURRENT_TIME.add(30, 'minute').get('minute')].sort();
+export const hours = [
+    CURRENT_TIME.get('hour'),
+    CURRENT_TIME.add(3, 'hour').get('hour'),
+    CURRENT_TIME.add(6, 'hour').get('hour'),
+    CURRENT_TIME.add(9, 'hour').get('hour'),
+    CURRENT_TIME.add(12, 'hour').get('hour'),
+    CURRENT_TIME.add(15, 'hour').get('hour'),
+    CURRENT_TIME.add(18, 'hour').get('hour'),
+    CURRENT_TIME.add(21, 'hour').get('hour')
+].sort((a, b) => a - b);
+/**
+ * Precomputed crontabs for the intervals. This will introduce some natural load-balancing as jobs run at completely different minutes/hours.
+ */
+export const RULE_INTERVALS = [
+    { key: 'rule.interval.thirty.minutes', crontab: `${minutes.join(',')} * * * *` },
+    { key: 'rule.interval.one.hour', crontab: `${CURRENT_TIME.get('minute')} * * * *` },
+    { key: 'rule.interval.three.hours', crontab: `${CURRENT_TIME.get('minute')} ${hours.join(',')} * * *` },
+    {
+        key: 'rule.interval.six.hours',
+        crontab: `${CURRENT_TIME.get('minute')} ${hours
+            .filter((_, index) => index % 2 === hours.indexOf(CURRENT_TIME.get('hour')) % 2)
+            .join(',')} * * *`
+    },
+    { key: 'rule.interval.one.day', crontab: `${CURRENT_TIME.get('minute')} ${CURRENT_TIME.get('hour')} * * *` }
+];
+export const DATE_RANGES = [
+    'date.range.1.day',
+    'date.range.3.day',
+    'date.range.1.week',
+    'date.range.1.month',
+    'date.range.all',
+    'date.range.custom'
+];
+export const LABEL_TYPES = {
+    insight: { icon: _jsx(PsychologyAlt, { fontSize: "small" }), color: '#FFFFFF' }, //brain icon
+    mitigation: { icon: _jsx(LocalPolice, { fontSize: "small" }), color: blue[600] }, //police badge
+    victim: { icon: _jsx(MoodBad, { fontSize: "small" }), color: pink[400] }, //crime outline
+    campaign: { icon: _jsx(Timeline, { fontSize: "small" }), color: orange[900] }, //net graph?
+    threat: { icon: _jsx(NewReleases, { fontSize: "small" }), color: red[400] },
+    operation: { icon: _jsx(Star, { fontSize: "small" }), color: yellow[600] },
+    generic: {},
+    assignments: {},
+    tuning: {}
+};