@boarteam/boar-pack-users-frontend 2.0.2

package/src/components/EventLogs/eventLogsSearchableColumns.ts

@@ -0,0 +1,87 @@
+import { Operators, TSearchableColumn } from "@boarteam/boar-pack-common-frontend";
+
+export const eventLogsSearchableColumns: TSearchableColumn[] = [
+  {
+    field: 'logType',
+    searchField: null,
+    operator: Operators.equals,
+    filterOperator: Operators.in,
+  },
+  {
+    field: 'serviceId',
+    operator: Operators.containsLow,
+  },
+  {
+    field: 'userRole',
+    searchField: null,
+    operator: Operators.equals,
+    filterOperator: Operators.in,
+  },
+  {
+    field: 'method',
+    operator: Operators.containsLow,
+    filterOperator: Operators.in,
+  },
+  {
+    field: 'logLevel',
+    searchField: null,
+    operator: Operators.equals,
+    filterOperator: Operators.in,
+  },
+  {
+    field: 'service',
+    operator: Operators.containsLow,
+    filterOperator: Operators.in,
+  },
+  {
+    field: 'user',
+    searchField: 'user.name',
+    filterField: 'user.id',
+    operator: Operators.containsLow,
+    filterOperator: Operators.in,
+  },
+  {
+    field: 'externalUserId',
+    operator: Operators.containsLow,
+  },
+  {
+    field: 'action',
+    operator: Operators.containsLow,
+  },
+  {
+    field: 'entity',
+    operator: Operators.containsLow,
+  },
+  {
+    field: 'entityId',
+    operator: Operators.equals,
+  },
+  {
+    field: 'url',
+    operator: Operators.containsLow,
+  },
+  {
+    field: 'ipAddress',
+    operator: Operators.containsLow,
+  },
+  {
+    field: 'userAgent',
+    operator: Operators.containsLow,
+  },
+  {
+    field: 'duration',
+    operator: Operators.equals,
+    numeric: true,
+  },
+  {
+    field: 'statusCode',
+    operator: Operators.equals,
+    numeric: true,
+  },
+  {
+    field: 'createdAt',
+    searchField: null,
+    operator: Operators.equals,
+    filterOperator: Operators.between,
+  }
+];

package/src/components/EventLogs/getBrowserIcon.ts

@@ -0,0 +1,27 @@
+import Bowser from 'bowser';
+import { library, dom } from '@fortawesome/fontawesome-svg-core';
+import { faChrome, faFirefox, faSafari, faEdge, faOpera } from '@fortawesome/free-brands-svg-icons';
+
+// Add icons to the library
+library.add(faChrome, faFirefox, faSafari, faEdge, faOpera);
+dom.watch();
+
+export function getBrowserIcon(userAgent: string): string {
+  const browser = Bowser.getParser(userAgent);
+  const browserName = browser.getBrowserName();
+
+  switch (browserName) {
+    case 'Chrome':
+      return 'fab fa-chrome';
+    case 'Firefox':
+      return 'fab fa-firefox';
+    case 'Safari':
+      return 'fab fa-safari';
+    case 'Microsoft Edge':
+      return 'fab fa-edge';
+    case 'Opera':
+      return 'fab fa-opera';
+    default:
+      return 'fas fa-question-circle'; // Default icon for unknown browsers
+  }
+}

package/src/components/EventLogs/useEventLogsColumns.tsx

@@ -0,0 +1,375 @@
+import { ProColumns } from "@ant-design/pro-components";
+import { Badge, Collapse, CollapseProps, Space, Tooltip, Typography } from "antd";
+import { EventLog, EventLogTimelineQueryDto } from "@@api/generated";
+import {
+  AppstoreOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleTwoTone,
+  SettingOutlined,
+  UserOutlined,
+  WarningOutlined
+} from "@ant-design/icons";
+import { useEffect, useState } from "react";
+import UserAgentDisplay from "./UserAgentDisplay";
+import apiClient from "@@api/apiClient";
+import { getUserRoleIcon } from "./EventLogExplanation";
+
+import { DateRange } from "@boarteam/boar-pack-common-frontend";
+
+const { Text } = Typography;
+
+const serviceNameToAbbreviation: Record<string, string> = {
+  'TID Main App': 'TID',
+  'Liquidity Manager': 'LM',
+  'Quotes Monitor': 'QM',
+  'Admin Panel - Main': 'ADM',
+  'Manager Panel - Main': 'MNG',
+  'Admin RealTimeData': 'ARTD',
+  'Manager RealTimeData': 'MRTD',
+} as const;
+
+const logTypes = {
+  [EventLog.logType.AUDIT]: {
+    text: 'Audit',
+    icon: <UserOutlined />,
+  },
+  [EventLog.logType.OPERATIONAL]: {
+    text: 'Operational',
+    icon: <SettingOutlined />,
+  },
+  [EventLog.logType.APPLICATION]: {
+    text: 'Application',
+    icon: <AppstoreOutlined />,
+  },
+};
+
+const logLevels = {
+  [EventLog.logLevel.INFO]: {
+    text: 'Info',
+    icon: <InfoCircleTwoTone />,
+    type: undefined as undefined,
+  },
+  [EventLog.logLevel.WARNING]: {
+    text: 'Warning',
+    icon: <WarningOutlined />,
+    type: 'warning',
+  },
+  [EventLog.logLevel.ERROR]: {
+    text: 'Error',
+    icon: <ExclamationCircleOutlined />,
+    type: 'danger',
+  },
+} as const;
+
+export const useEventLogsColumns = ({
+  startTime,
+  endTime,
+  onDateRangeChange,
+}: EventLogTimelineQueryDto & {
+  onDateRangeChange: (start: string | undefined, end: string | undefined) => void;
+}): ProColumns<EventLog>[] => {
+  const [users, setUsers] = useState<{ text: string, value: string }[]>([]);
+
+  useEffect(() => {
+    apiClient.users.getManyBaseUsersControllerUser({
+      sort: ['name,ASC'],
+    }).then((users) => {
+      setUsers(users.data.map((item) => ({ text: item.name, value: item.id })));
+    });
+  }, []);
+
+  return [
+    {
+      title: 'Type',
+      dataIndex: 'logType',
+      valueType: 'select',
+      width: 50,
+      valueEnum: Object.fromEntries(
+        Object.entries(logTypes).map(([key, value]) => [
+          key,
+          {
+            text: value.text,
+          }
+        ])
+      ),
+      render(dom, record) {
+        return <Tooltip title={logTypes[record.logType].text}>{logTypes[record.logType].icon}</Tooltip>;
+      },
+      filters: true,
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: 'Service',
+      dataIndex: 'service',
+      render(dom, record) {
+        return serviceNameToAbbreviation[record.service]
+          ? <Tooltip title={record.service}>{serviceNameToAbbreviation[record.service]}</Tooltip>
+          : record.service;
+      },
+      width: 10,
+      valueEnum: Object.fromEntries(
+        Object.entries(serviceNameToAbbreviation).map(([key, value]) => [
+          key,
+          {
+            text: key,
+          }
+        ])
+      ),
+      filters: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'Service Id',
+      dataIndex: 'serviceId',
+      copyable: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'Time',
+      dataIndex: 'createdAt',
+      valueType: 'dateTime',
+      sorter: true,
+      renderFormItem: () => <DateRange
+        value={startTime && endTime ? [startTime, endTime] : null}
+        onChange={(value) => onDateRangeChange(value?.[0] || undefined, value?.[1] || undefined)}
+      />,
+    },
+    {
+      title: 'User',
+      dataIndex: 'user',
+      render: (text, record) => {
+        return <Space>
+          {getUserRoleIcon(record.userRole)}
+          {
+            record.userName
+            || record.user?.name
+            || record.userId
+            || record.externalUserId
+            || <Text type={'secondary'}>role: {record.userRole}</Text>
+          }
+        </Space>;
+      },
+      filters: users,
+      filterSearch: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'User Role',
+      dataIndex: 'userRole',
+      valueEnum: {
+        [EventLog.userRole.ADMIN]: {
+          text: 'Admin',
+        },
+        [EventLog.userRole.USER]: {
+          text: 'User',
+        },
+        [EventLog.userRole.GUEST]: {
+          text: 'Guest',
+        },
+        [EventLog.userRole.SYSTEM]: {
+          text: 'System',
+        },
+      },
+      filters: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'User Name',
+      dataIndex: 'userName',
+      hideInSearch: true,
+    },
+    {
+      title: 'User Inst ID',
+      dataIndex: 'externalUserId',
+      copyable: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'Action',
+      dataIndex: 'action',
+      render(dom, record) {
+        // getManyBase -> Get Many
+        const action = record.action
+          .replace('Base', '')
+          .replace(/([a-z])([A-Z])/g, '$1 $2');
+        return action[0].toUpperCase() + action.slice(1);
+      },
+      hideInSearch: true,
+    },
+    {
+      title: 'Entity',
+      dataIndex: 'entity',
+      render(dom, record) {
+        // EventLogsController -> Event Logs
+        return record.entity
+          .replace('Controller', '')
+          .replace(/([a-z])([A-Z])/g, '$1 $2');
+      },
+      hideInSearch: true,
+    },
+    {
+      title: 'Entity ID',
+      dataIndex: 'entityId',
+      copyable: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'Method',
+      dataIndex: 'method',
+      valueEnum: {
+        GET: {
+          text: 'GET',
+        },
+        POST: {
+          text: 'POST',
+        },
+        PUT: {
+          text: 'PUT',
+        },
+        PATCH: {
+          text: 'PATCH',
+        },
+        DELETE: {
+          text: 'DELETE',
+        },
+        OPTIONS: {
+          text: 'OPTIONS',
+        },
+        HEAD: {
+          text: 'HEAD',
+        },
+      },
+      filters: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'URL',
+      dataIndex: 'url',
+      width: 600,
+      render(dom, record) {
+        return <Typography.Paragraph
+          style={{
+            width: 600,
+            margin: 0,
+          }}
+          ellipsis={{
+            rows: 1,
+            expandable: true,
+          }}
+          copyable={true}
+        >{record.url}</Typography.Paragraph>;
+      },
+      hideInSearch: true,
+    },
+    {
+      title: 'Payload',
+      dataIndex: 'payload',
+      render(dom, record) {
+        if (record.payload === null) {
+          return 'N/A';
+        }
+
+        if ('message' in record.payload) {
+          const items: CollapseProps['items'] = [
+            {
+              key: '1',
+              label: <pre style={{ margin: 0 }}>{record.payload.message}</pre>,
+              children: <pre
+                style={{ margin: 0 }}
+              >{
+                JSON.stringify(record.payload, null, 2).replace(/\n/g, '\n')
+              }</pre>,
+            },
+          ];
+
+          return <Collapse items={items} ghost />;
+        }
+
+        return <pre style={{ margin: 0 }}>{JSON.stringify(record.payload)}</pre>;
+      },
+      hideInSearch: true,
+    },
+    {
+      title: 'IP Address',
+      dataIndex: 'ipAddress',
+      copyable: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'User Agent',
+      dataIndex: 'userAgent',
+      render(dom, record) {
+        if (record.userAgent === null) {
+          return 'N/A';
+        }
+
+        return <UserAgentDisplay userAgent={record.userAgent} />;
+      },
+      hideInSearch: true,
+
+    },
+    {
+      title: 'Duration',
+      dataIndex: 'duration',
+      render(dom, record) {
+        const text = record.duration + ' ms';
+
+        if (record.duration === null) {
+          return 'N/A';
+        }
+
+        if (record.duration >= 1000) {
+          return <Typography.Text type='danger'>{text}</Typography.Text>;
+        }
+
+        if (record.duration >= 200) {
+          return <Typography.Text type='warning'>{text}</Typography.Text>;
+        }
+
+        return text;
+      },
+      valueType: 'digit',
+      sorter: true,
+      hideInSearch: true,
+    },
+    {
+      title: 'Status Code',
+      dataIndex: 'statusCode',
+      render(dom, record) {
+        if (record.statusCode === null) {
+          return 'N/A';
+        }
+
+        if (record.statusCode >= 500) {
+          return <Badge color={'red'} text={record.statusCode} />;
+        }
+
+        if (record.statusCode >= 300) {
+          return <Badge color={'orange'} text={record.statusCode} />;
+        }
+
+        return <Badge color={'green'} text={record.statusCode} />;
+      },
+      hideInSearch: true,
+    },
+    {
+      title: 'Log Level',
+      dataIndex: 'logLevel',
+      render(dom, record) {
+        return <Text
+          type={logLevels[record.logLevel].type}>{logLevels[record.logLevel].icon} {logLevels[record.logLevel].text}</Text>;
+      },
+      valueEnum: Object.fromEntries(
+        Object.entries(logLevels).map(([key, value]) => [
+          key,
+          {
+            text: <Text type={value.type}>{value.icon} {value.text}</Text>,
+          }
+        ])
+      ),
+      filters: true,
+      hideInSearch: true,
+    }
+  ];
+};

package/src/components/index.tsx

@@ -0,0 +1,7 @@
+export * from './EventLogs/EventLogExplanation';
+export * from './EventLogs/eventLogsSearchableColumns';
+export * from './EventLogs/EventLogsTable';
+export * from './EventLogs/EventLogsTimeline';
+export * from './EventLogs/getBrowserIcon';
+export * from './EventLogs/useEventLogsColumns';
+export {default as UserAgentDisplay} from './EventLogs/UserAgentDisplay';

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './components'

package/src/pages/EventLogs/index.tsx

@@ -0,0 +1,26 @@
+import { PageContainer } from "@ant-design/pro-components";
+import React, { useState } from "react";
+import EventLogsTable from "../../components/EventLogs/EventLogsTable";
+import { EventLogsTimeline } from "../../components/EventLogs/EventLogsTimeline";
+import { Card } from "antd";
+
+const EventLogs: React.FC = () => {
+  const [startTime, setStartTime] = useState<string | undefined>(undefined);
+  const [endTime, setEndTime] = useState<string | undefined>(undefined);
+
+  const handleDateRangeChange = (start: string | undefined, end: string | undefined) => {
+    setStartTime(start);
+    setEndTime(end);
+  };
+
+  return (
+    <PageContainer>
+      <Card>
+        <EventLogsTimeline startTime={startTime} endTime={endTime} onDateRangeChange={handleDateRangeChange} />
+        <EventLogsTable startTime={startTime} endTime={endTime} onDateRangeChange={handleDateRangeChange} />
+      </Card>
+    </PageContainer>
+  )
+}
+
+export default EventLogs;

package/src/pages/getInitialState.tsx

@@ -0,0 +1,114 @@
+import { PageLoading } from "@ant-design/pro-layout";
+import { PureAbility } from "@casl/ability";
+import { unpackRules } from "@casl/ability/extra";
+import { stringify } from "querystring";
+import { history } from '@umijs/max';
+import { Action } from "@/tools/action.enum";
+import defaultSettings, { appSettings } from "@/../config/defaultSettings";
+import { CancelablePromise } from "@@api/generated";
+
+export const loginPath = appSettings.loginPath;
+const resetPasswordPath = appSettings.resetPasswordPath;
+
+export function goToLogin(forceSearch?: string) {
+  const { search, pathname } = history.location;
+  if (pathname !== loginPath) {
+    console.log(`Redirect to ${loginPath}`);
+    let searchParam = '';
+    if (typeof forceSearch === 'string') {
+      searchParam = forceSearch;
+    } else if (pathname !== '/') {
+      searchParam = stringify({
+        redirect: pathname + search,
+      });
+    }
+    history.replace({
+      pathname: loginPath,
+      search: searchParam,
+    });
+  } else {
+    console.log('Staying on login page, redirect is not necessary');
+  }
+}
+
+export function goToMain() {
+  if (!history) return;
+  // @ts-ignore
+  const { query = {} } = history.location;
+  const { redirect } = query as { redirect: string };
+  const url = redirect || '/';
+  history.push(url);
+}
+
+export async function fetchUserInfo<TUser>(fetchUserInfoCallback: () => CancelablePromise<TUser>) {
+  try {
+    return fetchUserInfoCallback();
+  } catch (error) {
+    console.error('Error while fetching user info, redirecting to login');
+    console.error(error);
+    goToLogin();
+  }
+  return undefined;
+}
+
+export async function logout(logoutCallback: () => CancelablePromise<void>) {
+  await logoutCallback();
+  goToLogin();
+}
+
+export const initialStateConfig = {
+  loading: <PageLoading />,
+};
+
+export type TInitialState<TUser> = {
+  settings?: typeof defaultSettings;
+  currentUser?: TUser;
+  currentCompany?: string;
+  loading?: boolean;
+  ability?: PureAbility<[Action, string]>,
+}
+
+export function onPageChange<TUser>(initialState?: TInitialState<TUser>) {
+  const currentUser = initialState?.currentUser;
+
+  if (!currentUser) {
+    console.log('There is no current user in the state, going to login');
+    goToLogin();
+    return;
+  }
+}
+
+/**
+ * @see https://umijs.org/zh-CN/plugins/plugin-initial-state
+ */
+export async function getInitialState<TUser>(
+    afterLogin = false,
+    projectSettings: typeof defaultSettings = {},
+    fetchUserInfoCallback: () => CancelablePromise<TUser>
+): Promise<TInitialState<TUser>> {
+  const ability = new PureAbility<[Action, string]>();
+  const pathname = history.location.pathname;
+
+  const state: TInitialState<TUser> = {
+    settings: {
+      ...defaultSettings,
+      ...projectSettings
+    },
+    ability,
+  };
+
+  if (![loginPath, resetPasswordPath].some(path => pathname.startsWith(path)) || afterLogin) {
+    const currentUser = await fetchUserInfo(fetchUserInfoCallback);
+
+    if (!currentUser) {
+      console.log('User is not authenticated');
+      throw new Error('User is not authenticated');
+    }
+
+    console.log('User is authenticated and ready to work with the system');
+    ability.update(unpackRules(currentUser.policies));
+    state.currentUser = currentUser;
+  }
+
+  return state;
+}

package/src/tools/action.enum.ts

@@ -0,0 +1,7 @@
+export enum Action {
+  Manage = 'manage',
+  Create = 'create',
+  Read = 'read',
+  Update = 'update',
+  Delete = 'delete',
+}

package/src/tools/api-client/apiClient.ts

@@ -0,0 +1,6 @@
+import { ApiClient } from "./generated";
+
+export default new ApiClient({
+  BASE: '/api',
+  ENCODE_PATH: encodeURIComponent,
+});

package/src/tools/api-client/generated/ApiClient.ts

@@ -0,0 +1,38 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { BaseHttpRequest } from './core/BaseHttpRequest';
+import type { OpenAPIConfig } from './core/OpenAPI';
+import { NodeHttpRequest } from './core/NodeHttpRequest';
+
+import { EventLogsService } from './services/EventLogsService';
+import { UsersService } from './services/UsersService';
+
+type HttpRequestConstructor = new (config: OpenAPIConfig) => BaseHttpRequest;
+
+export class ApiClient {
+
+    public readonly eventLogs: EventLogsService;
+    public readonly users: UsersService;
+
+    public readonly request: BaseHttpRequest;
+
+    constructor(config?: Partial<OpenAPIConfig>, HttpRequest: HttpRequestConstructor = NodeHttpRequest) {
+        this.request = new HttpRequest({
+            BASE: config?.BASE ?? '',
+            VERSION: config?.VERSION ?? '1.0',
+            WITH_CREDENTIALS: config?.WITH_CREDENTIALS ?? false,
+            CREDENTIALS: config?.CREDENTIALS ?? 'include',
+            TOKEN: config?.TOKEN,
+            USERNAME: config?.USERNAME,
+            PASSWORD: config?.PASSWORD,
+            HEADERS: config?.HEADERS,
+            ENCODE_PATH: config?.ENCODE_PATH,
+        });
+
+        this.eventLogs = new EventLogsService(this.request);
+        this.users = new UsersService(this.request);
+    }
+}
+