@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

package/api/search/index.ts

@@ -0,0 +1,63 @@
+import { joinUri, uri as parentUri } from 'api';
+import * as action from 'api/search/action';
+import * as analytic from 'api/search/analytic';
+import * as count from 'api/search/count';
+import * as dossier from 'api/search/dossier';
+import * as facet from 'api/search/facet';
+import * as fields from 'api/search/fields';
+import * as grouped from 'api/search/grouped';
+import * as histogram from 'api/search/histogram';
+import * as hit from 'api/search/hit';
+import * as overview from 'api/search/overview';
+import * as template from 'api/search/template';
+import * as user from 'api/search/user';
+import * as view from 'api/search/view';
+
+export const uri = () => {
+  return joinUri(parentUri(), 'search');
+};
+
+export type HowlerSearchRequest = {
+  query: string;
+  rows?: number;
+  offset?: number;
+  sort?: string;
+  track_total_hits?: boolean;
+  fl?: string;
+  timeout?: number;
+  filters?: string[];
+  metadata?: string[];
+};
+
+export type HowlerSearchResponse<T> = {
+  items: T[];
+  offset: number;
+  rows: number;
+  total: number;
+};
+
+export type HowlerEQLSearchResponse<T> = {
+  items: T[];
+  sequences: T[][];
+  offset: number;
+  rows: number;
+  total: number;
+};
+
+export type HowlerEQLSearchRequest = {
+  eql_query: string;
+  rows?: number;
+  fl?: string;
+  timeout?: number;
+  filters?: string[];
+};
+
+export type HowlerSigmaSearchRequest = {
+  sigma: string;
+  rows?: number;
+  fl?: string;
+  timeout?: number;
+  filters?: string[];
+};
+
+export { action, analytic, count, dossier, facet, fields, grouped, histogram, hit, overview, template, user, view };

package/api/search/overview.ts

@@ -0,0 +1,12 @@
+import { hpost, joinUri } from 'api';
+import type { HowlerSearchRequest, HowlerSearchResponse } from 'api/search';
+import { uri as parentUri } from 'api/search';
+import type { Template } from 'models/entities/generated/Template';
+
+export const uri = () => {
+  return joinUri(parentUri(), 'overview');
+};
+
+export const post = (request?: HowlerSearchRequest): Promise<HowlerSearchResponse<Template>> => {
+  return hpost(uri(), { ...(request || {}), query: request?.query || 'overview_id:*' });
+};

package/api/search/sigma/hit.ts

@@ -0,0 +1,12 @@
+import { hpost, joinAllUri } from 'api';
+import type { HowlerSearchResponse, HowlerSigmaSearchRequest } from 'api/search';
+import { uri as parentUri } from 'api/search';
+import type { Hit } from 'models/entities/generated/Hit';
+
+export const uri = () => {
+  return joinAllUri(parentUri(), 'hit', 'sigma');
+};
+
+export const post = (request?: HowlerSigmaSearchRequest): Promise<HowlerSearchResponse<Hit>> => {
+  return hpost(uri(), { ...(request || {}), sigma: request?.sigma || '' });
+};

package/api/search/template.ts

@@ -0,0 +1,12 @@
+import { hpost, joinUri } from 'api';
+import type { HowlerSearchRequest, HowlerSearchResponse } from 'api/search';
+import { uri as parentUri } from 'api/search';
+import type { Template } from 'models/entities/generated/Template';
+
+export const uri = () => {
+  return joinUri(parentUri(), 'template');
+};
+
+export const post = (request?: HowlerSearchRequest): Promise<HowlerSearchResponse<Template>> => {
+  return hpost(uri(), { ...(request || {}), query: request?.query || 'template_id:*' });
+};

package/api/search/user.ts

@@ -0,0 +1,21 @@
+import { hpost, joinUri } from 'api';
+import type { HowlerSearchRequest, HowlerSearchResponse } from 'api/search';
+import { uri as parentUri } from 'api/search';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+
+export type HowlerApiUser = Omit<HowlerUser, 'username'> & { uname: string };
+
+export const uri = () => {
+  return joinUri(parentUri(), 'user');
+};
+
+export const post = async (request?: HowlerSearchRequest): Promise<HowlerSearchResponse<HowlerUser>> => {
+  const response = await hpost<HowlerSearchResponse<HowlerApiUser>>(uri(), {
+    ...(request || {}),
+    query: request?.query || 'name:*'
+  });
+  return {
+    ...response,
+    items: response.items.map((i: HowlerApiUser) => ({ ...i, username: i.uname }))
+  };
+};

package/api/search/view.ts

@@ -0,0 +1,12 @@
+import { hpost, joinUri } from 'api';
+import type { HowlerSearchRequest, HowlerSearchResponse } from 'api/search';
+import { uri as parentUri } from 'api/search';
+import type { View } from 'models/entities/generated/View';
+
+export const uri = () => {
+  return joinUri(parentUri(), 'view');
+};
+
+export const post = (request?: HowlerSearchRequest): Promise<HowlerSearchResponse<View>> => {
+  return hpost(uri(), { ...(request || {}), query: request?.query || 'title:*' });
+};

package/api/template/index.ts

@@ -0,0 +1,22 @@
+import { hdelete, hget, hpost, hput, joinAllUri, joinUri, uri as parentUri } from 'api';
+import type { Template } from 'models/entities/generated/Template';
+
+export const uri = (id?: string) => {
+  return id ? joinAllUri(parentUri(), 'template', id) : joinUri(parentUri(), 'template');
+};
+
+export const get = (): Promise<Template[]> => {
+  return hget(uri());
+};
+
+export const post = (newData: Partial<Template>): Promise<Template> => {
+  return hpost(uri(), newData);
+};
+
+export const put = (id: string, newFields: string[]): Promise<Template> => {
+  return hput(uri(id), newFields);
+};
+
+export const del = (id: string): Promise<void> => {
+  return hdelete(uri(id));
+};

package/api/user/avatar/index.ts

@@ -0,0 +1,10 @@
+import { hget, joinUri } from 'api';
+import { uri as parentUri } from 'api/user';
+
+export const uri = (username: string) => {
+  return joinUri(joinUri(parentUri(), 'avatar'), username);
+};
+
+export const get = (username: string): Promise<string> => {
+  return hget(uri(username));
+};

package/api/user/groups.ts

@@ -0,0 +1,12 @@
+import { hget, joinUri } from 'api';
+import { uri as parentUri } from 'api/user';
+
+export type GroupDetailsResponse = { id: string; name: string }[];
+
+export const uri = () => {
+  return joinUri(parentUri(), 'groups');
+};
+
+export const get = (): Promise<GroupDetailsResponse> => {
+  return hget(uri());
+};

package/api/user/index.ts

@@ -0,0 +1,20 @@
+import { hget, hput, joinUri, uri as parentUri } from 'api';
+import * as avatar from 'api/user/avatar';
+import * as groups from 'api/user/groups';
+import * as whoami from 'api/user/whoami';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+
+export const uri = (username?: string) => {
+  const _uri = joinUri(parentUri(), 'user');
+  return username ? joinUri(_uri, username) : _uri;
+};
+
+export const get = (username: string): Promise<HowlerUser> => {
+  return hget(uri(username));
+};
+
+export const put = (username: string, newData: Partial<HowlerUser> | { new_pass: string }) => {
+  return hput(uri(username), newData);
+};
+
+export { avatar, groups, whoami };

package/api/user/whoami.ts

@@ -0,0 +1,11 @@
+import { hget, joinUri } from 'api';
+import { uri as parentUri } from 'api/user';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+
+export const uri = () => {
+  return joinUri(parentUri(), 'whoami');
+};
+
+export const get = (): Promise<HowlerUser> => {
+  return hget(uri());
+};

package/api/view/favourite.ts

@@ -0,0 +1,14 @@
+import { hdelete, hpost, joinAllUri } from 'api';
+import { uri as parentUri } from 'api/view';
+
+export const uri = (id: string) => {
+  return joinAllUri(parentUri(), id, 'favourite');
+};
+
+export const del = (id: string): Promise<{ success: boolean }> => {
+  return hdelete(uri(id));
+};
+
+export const post = (id: string): Promise<{ success: boolean }> => {
+  return hpost(uri(id), {});
+};

package/api/view/index.ts

@@ -0,0 +1,25 @@
+import { hdelete, hget, hpost, hput, joinAllUri, joinUri, uri as parentUri } from 'api';
+import * as favourite from 'api/view/favourite';
+import type { View } from 'models/entities/generated/View';
+
+export const uri = (id?: string) => {
+  return id ? joinAllUri(parentUri(), 'view', id) : joinUri(parentUri(), 'view');
+};
+
+export const get = (): Promise<View[]> => {
+  return hget(uri());
+};
+
+export const post = (newData: Partial<View>): Promise<View> => {
+  return hpost(uri(), newData);
+};
+
+export const put = (id: string, partialView: Partial<Omit<View, 'view_id'>>): Promise<View> => {
+  return hput(uri(id), partialView);
+};
+
+export const del = (id: string): Promise<void> => {
+  return hdelete(uri(id));
+};
+
+export { favourite };

package/branding/AppBrand.tsx

@@ -0,0 +1,161 @@
+import { Stack, useTheme } from '@mui/material';
+import { useMemo } from 'react';
+
+export const SIZES = {
+  app: {
+    divider: {
+      margin: 12
+    },
+    name: {
+      height: 24
+    },
+    icon: {
+      width: 38,
+      height: 38
+    }
+  },
+  xlarge: {
+    divider: {
+      margin: 10
+    },
+    name: {
+      height: 94
+    },
+    icon: {
+      width: 150,
+      height: 150
+    }
+  },
+  large: {
+    divider: {
+      margin: 8
+    },
+    name: {
+      height: 63
+    },
+    icon: {
+      width: 100,
+      height: 100
+    }
+  },
+  medium: {
+    divider: {
+      margin: 6
+    },
+    name: {
+      height: 37
+    },
+    icon: {
+      width: 60,
+      height: 60
+    }
+  },
+  small: {
+    divider: {
+      margin: 4
+    },
+    name: {
+      height: 24
+    },
+    icon: {
+      width: 38,
+      height: 38
+    }
+  },
+  xsmall: {
+    divider: {
+      margin: 2
+    },
+    name: {
+      height: 15
+    },
+    icon: {
+      width: 24,
+      height: 24
+    }
+  }
+};
+
+export const BRAND_APPLICATIONS = ['analyticalplatform', 'assemblyline', 'howler'] as const;
+
+export const BRAND_SIZES = Object.keys(SIZES).filter(s => s !== 'app');
+
+export const BRAND_VARIANTS = ['app', 'logo', 'banner-vertical', 'banner-horizontal'] as const;
+
+export type BrandApplication = (typeof BRAND_APPLICATIONS)[number];
+
+export type BrandVariant = (typeof BRAND_VARIANTS)[number];
+
+export type BrandSize = (typeof BRAND_SIZES)[number];
+
+const AppLogo = ({
+  src,
+  application,
+  variant,
+  size = 'small'
+}: {
+  src: string;
+  application: BrandApplication;
+  variant: BrandVariant;
+  size?: BrandSize;
+}) => {
+  return (
+    <img src={src} alt={`${application} logo`} style={{ ...SIZES[size].icon, marginLeft: variant === 'app' && -7 }} />
+  );
+};
+
+const AppName = ({
+  src,
+  application,
+  size = 'small'
+}: {
+  src: string;
+  application: BrandApplication;
+  size?: BrandSize;
+}) => {
+  return <img src={src} alt={application} style={{ ...SIZES[size].name }} />;
+};
+
+export const AppBrand = ({
+  application,
+  variant,
+  size = 'small'
+}: {
+  application: BrandApplication;
+  variant: BrandVariant;
+  size?: BrandSize;
+}) => {
+  const muiTheme = useTheme();
+  const theme = muiTheme.palette.mode;
+
+  const { logoSrc, nameSrc } = useMemo(() => {
+    return {
+      logoSrc: `/branding/${application}/noswoosh-${theme}.svg`,
+      nameSrc: `/branding/${application}/name-${theme}.svg`
+    };
+  }, [theme, application]);
+
+  if (variant === 'logo') {
+    return (
+      <Stack direction="row" alignItems="center">
+        <AppLogo application={application} src={logoSrc} variant={variant} size={size} />
+      </Stack>
+    );
+  }
+
+  if (variant === 'app') {
+    size = 'app';
+  }
+
+  return (
+    <Stack
+      direction={variant.endsWith('horizontal') || variant === 'app' ? 'row' : 'column'}
+      alignItems="center"
+      style={{ width: 'fit-content' }}
+    >
+      <AppLogo application={application} src={logoSrc} variant={variant} size={size} />
+      <div style={SIZES[size].divider} />
+      <AppName application={application} src={nameSrc} size={size} />
+    </Stack>
+  );
+};

package/commons/components/app/AppConfigs.ts

@@ -0,0 +1,179 @@
+import type { Components, PaletteMode, PaletteOptions, Theme } from '@mui/material';
+import type { AppUserValidatedProp } from 'commons/components/app/AppUserService';
+import type { GravatarD } from 'commons/components/display/AppAvatar';
+import type { ReactElement, ReactNode } from 'react';
+import type { To } from 'react-router-dom';
+
+// Specification interface for the 'useAppConfigs' hook.
+export type AppConfigs = {
+  preferences?: AppPreferenceConfigs; // The app's preferences config.
+  theme?: AppThemeConfigs; // The app's theme config.
+  sitemap?: AppSiteMapConfigs; // The apps's sitemap configs.
+};
+
+// Specification interface for the AppProvider's 'preferences' attribute.
+export type AppPreferenceConfigs = {
+  appName: string; // Name of your app, it will show up in the drawer and the top nav bar
+  appLink?: To; // Route to navigate to when the icon on the left nav bar is pressed
+  appIconDark: ReactElement<any>; // Small dark mode logo of your app used in drawer and top nav bar
+  appIconLight: ReactElement<any>; // Small light mode logo of your app used in drawer and top nav bar
+  bannerDark?: ReactElement<any>; // Your dark mode app banner, will be use in the loading screen, login and logout pages
+  bannerLight?: ReactElement<any>; // Your dark mode app banner, will be use in the loading screen, login and logout pages
+  allowAutoHideTopbar?: boolean; // Allow the user to toggle on/off the topbar autohide feature
+  allowBreadcrumbs?: boolean; // Allow the user to toggle on/off the breadcrumb
+  allowGravatar?: boolean; // Will use gravatar to populate the UserProfile avatar picture (using the user's email).
+  allowQuickSearch?: boolean; // Allow the user toggle on/off the quick search
+  allowReset?: boolean; // Allow the user to reset preferences to the default values
+  allowLayoutSelection?: boolean; // Allow the user to switch between "top" and "side" layout
+  allowThemeSelection?: boolean; // Allow the user to toggle between 'dark' and 'light' mode
+  allowTranslate?: boolean; // Allow the user to switch language
+  defaultLayout?: AppLayoutMode; // Either "top" (sticky topbar) or "side" (invisible top bar)
+  defaultTheme?: PaletteMode; // The default theme of the application.  'dark' or 'light'.
+  defaultDrawerOpen?: boolean; // Should the lef nav drawer be opened by default
+  defaultShowQuickSearch?: boolean; // Should the quick search be shown by default
+  defaultAutoHideAppbar?: boolean; // Should the top bar autohide (applies only to "side" layout)
+  defaultShowBreadcrumbs?: boolean; // Indicate whether breadcrumbs should be shown by default.
+  topnav?: AppTopNavConfigs; // top nav appbar specific configurations.
+  leftnav?: AppLeftNavConfigs; // left nav drawer specific configurations.
+  avatarD?: GravatarD; // The gravatar api uses this parameter to generate a themed image unique to an email address.
+  notificationURLs?: string[]; // The list of notification URLs.  If no item is provided, the top nav icon is hidden.
+};
+
+// Specification interface for the AppProvider's 'theme' attribute.
+export type AppThemeConfigs = {
+  components?: Components<Omit<Theme, 'components'>>; // Override MaterialUI components styles.
+  palette?: AppPaletteConfigs; // MaterialUI theme.palette configuration object.
+  appbar?: AppBarThemeConfigs; // Appbar theme/style configuration.
+};
+
+// Specification interface for the AppProvider's 'sitemap' attribute.
+export type AppSiteMapConfigs = {
+  routes: AppSiteMapRoute[]; // The list of application routes.  This is used to match the current route when rendering building and rendering breadcrumbs.
+  itemsBefore?: number; // The number of items to show before the ellipsis when breadcrumbs collapses.
+  itemsAfter?: number; // The number of itmes to show after the ellipsis when breadcrumbs collapses.
+};
+
+// Specification inteface for 'topnav' configurations.
+// These configurations apply to the top navigation appbar.
+export type AppTopNavConfigs = {
+  themeSelectionMode?: AppThemeSelectionMode; // Where does the theme selection menu shows up either. In separate icon ("icon") or under user profile ("profile").
+  apps?: AppSwitcherItem[]; // The list of appliations to display in the app-switcher.
+  userMenu?: AppBarUserMenuElement[]; // The list of userprofile menu elements.  If no item is provided, the menu is hidden.
+  userMenuI18nKey?: string; // (RECOMMENDED) The i18nKey to use to resolve the user menu title.
+  userMenuTitle?: string; // Title displayed for the user menu if not using 'userMenuI18nKey' for some reason.
+  adminMenu?: AppBarUserMenuElement[]; // The list of userprofile admin menu elements.  If no item is provided, the menu is hidden.
+  adminMenuI18nKey?: string; // (RECOMMENDED) The i18nKey to use to resolve the admin menu title.
+  adminMenuTitle?: string; // Title displayed for the admin menu
+  quickSearchURI?: string; // Uri to redirect to for the appbar quick search.
+  quickSearchParam?: string; // Request parameter used to set the quick search query.
+  left?: ReactNode; // Top navbar left insertion point for any given component. Component will be inserted at far left (after app title).
+  leftAfterBreadcrumbs?: ReactNode; // Top navbar insertion point for any given component.  Component will be inserted after the breadcrumbs.
+  rightBeforeSearch?: ReactNode; // Top navbar right insertion point. Component will be inserted before the app search input component.
+  right?: ReactNode; // Top navbar insertion point on the right side.  Component will be inserted directly after the app search input comonent.
+  hideUserAvatar?: boolean; // Do not show the user profile avatar and menu.
+};
+
+// Specification inteface for 'leftnav' configurations.
+// These configurations apply to the left navigation drawer.
+export type AppLeftNavConfigs = {
+  elements: AppLeftNavElement[]; // The list of menu elements in the left navigation drawer
+  width?: number; // The the width of the left nav drawer when open.
+  hideNestedIcons?: boolean; // Hide the icons for menu items nested within a group
+};
+
+// Specification interface to customize default material-ui 'light' and 'dark' themes.
+export type AppPaletteConfigs = {
+  light?: PaletteOptions; // MaterialUI light theme configuration object.
+  dark?: PaletteOptions; // MaterialUI dark theme configuration object
+};
+
+export type AppBarThemeConfigs = {
+  elevation?: number; // Appbar elevation. Only applies when layout is 'top'.
+  light?: AppBarStyles; // Appbar light theme style configuration.
+  dark?: AppBarStyles; // Appbar dark theme style configuration.
+};
+
+// Specification interface of describing which appbar styles are configurable.
+export type AppBarStyles = {
+  color?: any; // Configure appbar css color style.
+  backgroundColor?: any; // Configure appbar css background color style.
+};
+
+// Specification interface describing a sitemap route rendered within breadcrumbs.
+export type AppSiteMapRoute = {
+  path: string; // The react router path.
+  title: string; // The title/label to display when rendering breadcrumb.
+  textWidth?: number; // The max width of the text when rendering the breadcrumb.
+  icon?: ReactNode; // The icon component to show beside the title/label in breadcrumb.
+  isRoot?: boolean; // When true, breadcrumbs will reset to this one path each time it is encountered
+  isLeaf?: boolean; // When true, indicates that this path does not aggregate in breadcrumbs.
+  exclude?: boolean; // When true, indicates to breadcrumbs component to not render this route.
+  breadcrumbs?: string[]; // When specified, the breadcrumbs component will disregard the aggregated list and will use this list of routes instead.
+};
+
+// Specification interface for elements of user and admin menus withing the appbar's user profile.
+export type AppBarUserMenuElement = {
+  i18nKey?: string; // (RECOMMENDED) i18n key used to resolved the elements lable/title.
+  title?: string; // The title/label to display when rendering the menu element.
+  route?: string; // The route to use when rendering the link component of this menu element.
+  icon?: ReactElement<any>; // The icon to render to the left of the title.
+  element?: ReactElement<any>; // If specified, will be used to render a profile menu element (takes precedence over [i18nKey, title, route, icon]).
+};
+
+// Specification interface describing the type of leftnav menu items to render.
+export type AppLeftNavElement =
+  | {
+      type: 'item';
+      element: AppLeftNavItem;
+    }
+  | {
+      type: 'group';
+      element: AppLeftNavGroup;
+    }
+  | {
+      type: 'divider';
+      element: null;
+    };
+
+// Specification interface of a single leftnav menu item.
+export type AppLeftNavItem = {
+  id: number | string; // A unique identifer for the item.
+  i18nKey?: string; // (RECOMMENDED) i18n key used to resolve item label/text. (Use this if you are dynamically updating the leftnav menu)
+  text?: string; // The text/label to use when rendering the item if not using i18nKey (for some reason).
+  userPropValidators?: AppUserValidatedProp[]; // The list of user props to assert before rendering the item.
+  icon?: ReactElement<any>; // The icon to render to the left of the 'text'.
+  route?: string; // If specified, the leftnav item will render a Link component to this route.
+  nested?: boolean; // If the item is within a group and rendered as a nested item. (defaults to true)
+  render?: (open: boolean) => ReactElement; // If specified, will be used to render the left nav element (takes precendence over [i18nKey, text, icon, route])
+};
+
+// Specification interface of a leftnav menu group of items.
+export type AppLeftNavGroup = {
+  id: number | string; // A unique identifier for the leftnav group.
+  open?: boolean; // Indicates whether the leftnav group is open or closed.
+  i18nKey?: string; // (RECOMMENDED over 'title') i18n key used to resolve item label/text. (Use this if you are dynamically updating the leftnav menu)
+  title?: string; // The text/label to use when rendering the group header if not using i18nKey (for some reason).
+  userPropValidators?: AppUserValidatedProp[]; // The list of user props to assert before rendering the item.
+  icon?: React.ReactElement<any>; // The icon to render on the left of the group header's 'text'
+  items: AppLeftNavItem[]; // A list of items to render for this group.
+};
+
+// Specification interface for an item provided to the app switcher.
+export type AppSwitcherItem = {
+  alt: string;
+  name: string;
+  img_d: React.ReactElement<any> | string;
+  img_l: React.ReactElement<any> | string;
+  route: string;
+  newWindow?: boolean;
+};
+
+// Specification type describing the layout supported by the applications.
+// 'side' will anchor the leftnav drawer at the same elevation as the appbar and content area (entire height of winddow).
+// 'top' will anchor the leftnav drawer under the appbar (which will stick to the top).
+export type AppLayoutMode = 'side' | 'top';
+
+// Specification type describing the where to render the theming/preferences options.
+// 'profile' will render them under the userprofile menu.
+// 'icon' will render a separate icon within which the theming/preferences options will be rendered.
+export type AppThemeSelectionMode = 'profile' | 'icon';

package/commons/components/app/AppConstants.ts

@@ -0,0 +1,11 @@
+export const APP_STORAGE_PREFIX = 'templateui.core';
+
+export const AppStorageKeys = {
+  LS_KEY_DARK_MODE: `${APP_STORAGE_PREFIX}.darkMode`,
+  LS_KEY_LAYOUT_MODE: `${APP_STORAGE_PREFIX}.navLayout`,
+  LS_KEY_LEFTNAV_OPEN: `${APP_STORAGE_PREFIX}.drawerOpen`,
+  LS_KEY_SHOW_QUICK_SEARCH: `${APP_STORAGE_PREFIX}.showQuickSearch`,
+  LS_KEY_AUTOHIDE_APPBAR: `${APP_STORAGE_PREFIX}.autoHideAppbar`,
+  LS_KEY_BREADCRUMBS_ENABLED: `${APP_STORAGE_PREFIX}.breadcrumbsEnabled`,
+  LS_KEY_BREADCRUMBS_OPEN: `${APP_STORAGE_PREFIX}.breadcrumbsState`
+};