@boarteam/boar-pack-users-frontend 2.0.2

package/src/.umi/typings.d.ts

@@ -0,0 +1,136 @@
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+type CSSModuleClasses = { readonly [key: string]: string }
+declare module '*.css' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.scss' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.sass' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.less' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.styl' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.stylus' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+
+// images
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+declare module '*.png' {
+  const src: string
+  export default src
+}
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+declare module '*.svg' {
+  import * as React from 'react';
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+  SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string
+  export default src
+}
+declare module '*.ico' {
+  const src: string
+  export default src
+}
+declare module '*.webp' {
+  const src: string
+  export default src
+}
+declare module '*.avif' {
+  const src: string
+  export default src
+}
+
+// media
+declare module '*.mp4' {
+  const src: string
+  export default src
+}
+declare module '*.webm' {
+  const src: string
+  export default src
+}
+declare module '*.ogg' {
+  const src: string
+  export default src
+}
+declare module '*.mp3' {
+  const src: string
+  export default src
+}
+declare module '*.wav' {
+  const src: string
+  export default src
+}
+declare module '*.flac' {
+  const src: string
+  export default src
+}
+declare module '*.aac' {
+  const src: string
+  export default src
+}
+
+// fonts
+declare module '*.woff' {
+  const src: string
+  export default src
+}
+declare module '*.woff2' {
+  const src: string
+  export default src
+}
+declare module '*.eot' {
+  const src: string
+  export default src
+}
+declare module '*.ttf' {
+  const src: string
+  export default src
+}
+declare module '*.otf' {
+  const src: string
+  export default src
+}
+
+// other
+declare module '*.wasm' {
+  const initWasm: (options: WebAssembly.Imports) => Promise<WebAssembly.Exports>
+  export default initWasm
+}
+declare module '*.webmanifest' {
+  const src: string
+  export default src
+}
+declare module '*.pdf' {
+  const src: string
+  export default src
+}
+declare module '*.txt' {
+  const src: string
+  export default src
+}

package/src/.umi/umi.ts

@@ -0,0 +1,76 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+import './core/polyfill';
+
+import { renderClient } from '/Users/boarteam/.config/yarn/global/node_modules/@umijs/renderer-react';
+import { getRoutes } from './core/route';
+import { createPluginManager } from './core/plugin';
+import { createHistory } from './core/history';
+import { ApplyPluginsType } from 'umi';
+
+
+const publicPath = "/";
+const runtimePublicPath = false;
+
+async function render() {
+  const pluginManager = createPluginManager();
+  const { routes, routeComponents } = await getRoutes(pluginManager);
+
+  // allow user to extend routes
+  await pluginManager.applyPlugins({
+    key: 'patchRoutes',
+    type: ApplyPluginsType.event,
+    args: {
+      routes,
+      routeComponents,
+    },
+  });
+
+  const contextOpts = pluginManager.applyPlugins({
+    key: 'modifyContextOpts',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+  });
+
+  const basename = contextOpts.basename || '/';
+  const historyType = contextOpts.historyType || 'browser';
+
+  const history = createHistory({
+    type: historyType,
+    basename,
+    ...contextOpts.historyOpts,
+  });
+
+  return (pluginManager.applyPlugins({
+    key: 'render',
+    type: ApplyPluginsType.compose,
+    initialValue() {
+      const context = {
+        routes,
+        routeComponents,
+        pluginManager,
+        rootElement: contextOpts.rootElement || document.getElementById('root'),
+        publicPath,
+        runtimePublicPath,
+        history,
+        historyType,
+        basename,
+        callback: contextOpts.callback,
+      };
+      const modifiedContext = pluginManager.applyPlugins({
+        key: 'modifyClientRenderOpts',
+        type: ApplyPluginsType.modify,
+        initialValue: context,
+      });
+      return renderClient(modifiedContext);
+    },
+  }))();
+}
+
+
+render();
+
+window.g_umi = {
+  version: '4.1.10',
+};

package/src/access.ts

@@ -0,0 +1,5 @@
+export default function () {
+  return {
+    canViewEventLogs: true,
+  };
+}

package/src/components/EventLogs/EventLogExplanation.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+import { EventLog } from "@@api/generated";
+import { Card, Descriptions, Tag, Typography } from "antd";
+import {
+  ClockCircleOutlined,
+  CrownOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+  QuestionCircleOutlined,
+  SettingOutlined,
+  UserOutlined,
+  WarningOutlined
+} from "@ant-design/icons";
+import UserAgentDisplay from "./UserAgentDisplay";
+
+const { Paragraph, Text, Title } = Typography;
+
+function formatJson(s: string): string {
+  try {
+    return JSON.stringify(JSON.parse(s), null, 2);
+  } catch (e) {
+    return s;
+  }
+}
+
+export function getUserRoleIcon(role: string): React.ReactNode {
+  switch (role) {
+    case EventLog.userRole.ADMIN:
+      return <CrownOutlined />;
+    case EventLog.userRole.USER:
+      return <UserOutlined />;
+    case EventLog.userRole.GUEST:
+      return <QuestionCircleOutlined />;
+    case EventLog.userRole.SYSTEM:
+      return <SettingOutlined />;
+    default:
+      return <QuestionCircleOutlined />;
+  }
+}
+
+function getLogTypeTag(logType: string): React.ReactNode {
+  switch (logType) {
+    case EventLog.logType.AUDIT:
+      return <Tag icon={<UserOutlined />}>Audit Log</Tag>;
+    case EventLog.logType.OPERATIONAL:
+      return <Tag icon={<SettingOutlined />}>Operational Log</Tag>;
+    case EventLog.logType.APPLICATION:
+      return <Tag>Application Log</Tag>;
+    default:
+      return <Tag>Unknown</Tag>;
+  }
+}
+
+function renderUserAgentText(userAgent: string | null): React.ReactNode {
+  return userAgent
+    ? <>using <UserAgentDisplay userAgent={userAgent} /> with User-Agent header:
+      <pre>{userAgent}</pre>
+    </>
+    : 'without User-Agent header';
+
+}
+
+export const EventLogExplanation: React.FC<{ record: EventLog }> = ({ record }) => {
+  const duration = record.duration !== null ? <Tag icon={<ClockCircleOutlined />}>{record.duration} ms</Tag> : 'unknown time ';
+
+  let statusCode: React.ReactNode;
+  if (record.statusCode === null) {
+    statusCode = <Tag>Unknown</Tag>;
+  } else if (record.statusCode >= 500) {
+    statusCode = <Tag color='red'>{record.statusCode}</Tag>;
+  } else if (record.statusCode >= 300) {
+    statusCode = <Tag color='orange'>{record.statusCode}</Tag>;
+  } else if (record.statusCode >= 200) {
+    statusCode = <Tag color='green'>{record.statusCode}</Tag>;
+  }
+
+  // get query params form url
+  let queryParamsEl: React.ReactNode = <>N/A<br /></>;
+  if (record.url) {
+    let url: URL;
+    try {
+      url = new URL(window.location.origin + record.url);
+    } catch (e) {
+      console.error(e);
+      url = new URL(window.location.origin);
+    }
+    const queryParams = Array.from(url.searchParams.entries());
+    if (queryParams.length) {
+      queryParamsEl = <Descriptions column={1} size='small' bordered={true} items={
+        queryParams.map(([key, value], i) => {
+          return {
+            key: i,
+            label: key,
+            children: key !== 's' ? <Text code>{value}</Text> : <pre style={{
+              fontSize: '0.8em',
+            }}>{formatJson(value)}</pre>
+          };
+        })
+      } />
+    }
+  }
+  const query = <Paragraph>
+    <Title level={5}>Query Parameters</Title>
+    {queryParamsEl}
+  </Paragraph>;
+
+  let payloadEl: React.ReactNode = <>N/A<br /></>;
+  if (record.payload) {
+    payloadEl = <pre>{JSON.stringify(record.payload, null, 2).replace(/\n/g, '\n')}</pre>;
+  }
+  const payload = <Paragraph>
+    <Title level={5}>Action Payload</Title>
+    {payloadEl}
+  </Paragraph>;
+
+  let userEl = record.user
+    ? <>User <Tag>{record.user.name}</Tag>which had role <Tag
+      icon={getUserRoleIcon(record.userRole)}>{record.userRole}</Tag></>
+    : <>A <Tag icon={<QuestionCircleOutlined />}>Guest</Tag></>;
+
+  if (record.userRole === EventLog.userRole.SYSTEM) {
+    userEl = <Tag icon={<SettingOutlined />}>System</Tag>;
+  }
+
+  const actionEl = record.action === 'Access'
+    ? <>tried to access <Tag>{record.entity}</Tag>controller</>
+    : <>performed <Tag>{record.entity}.{record.action}</Tag>action</>;
+
+  let logLevelEl = <Tag color={'warning'} icon={<WarningOutlined />}>{record.logLevel}</Tag>;
+  if (record.logLevel === EventLog.logLevel.INFO) {
+    logLevelEl = <Tag color={'blue'} icon={<InfoCircleOutlined />}>{record.logLevel}</Tag>;
+  } else if (record.logLevel === EventLog.logLevel.ERROR) {
+    logLevelEl = <Tag color={'red'} icon={<ExclamationCircleOutlined />}>{record.logLevel}</Tag>;
+  }
+
+  return <Card
+    title={<>
+      {getLogTypeTag(record.logType)}captured at <Tag icon={<ClockCircleOutlined />}>{record.createdAt}</Tag>with log
+      level {logLevelEl}
+    </>}
+  >
+    {record.logType === EventLog.logType.AUDIT && <Paragraph>
+      {userEl}{actionEl} as result of the HTTP request<br />
+      <pre>
+        {record.method} {record.url}<br />
+      </pre>
+      {query}
+      {payload}
+      <Title level={5}>Client</Title>
+      Request was done from IP address <Tag>{record.ipAddress}</Tag><br />
+      {renderUserAgentText(record.userAgent)}
+    </Paragraph> || null}
+    {record.logType !== EventLog.logType.AUDIT && <><Paragraph>
+      {userEl}{actionEl}
+    </Paragraph>{payload}</>}
+    <Paragraph>
+      <Title level={5}>Service</Title>
+      The action was handled by service <Tag>{record.service}</Tag>{record.serviceId ? <>with ID <Text code
+                                                                                                        copyable>{record.serviceId}</Text></> : ''}
+    </Paragraph>
+    {(record.duration || record.statusCode) ? <Paragraph>
+      <Title level={5}>Response</Title>
+      The request took {duration}and returned status code {statusCode}<br />
+    </Paragraph> : null}
+  </Card>;
+}

package/src/components/EventLogs/EventLogsTable.tsx

@@ -0,0 +1,146 @@
+import apiClient from "@@api/apiClient";
+import { EventLog, EventLogCreateDto, EventLogTimelineQueryDto, EventLogUpdateDto } from "@@api/generated";
+import { useEventLogsColumns } from "./useEventLogsColumns";
+import { Table, TColumnsSet } from "@boarteam/boar-pack-common-frontend";
+import { eventLogsSearchableColumns } from "./eventLogsSearchableColumns";
+import { EventLogExplanation } from "./EventLogExplanation";
+import { createStyles } from "antd-style";
+import { ConfigProvider } from "antd";
+
+type TEventLogFilterParams = {}
+
+const columnsSets: TColumnsSet<EventLog>[] = [
+  {
+    name: 'Audit',
+    columns: [
+      'createdAt',
+      'logType',
+      'entity',
+      'action',
+      'entityId',
+      'user',
+      'logLevel',
+    ],
+  },
+  {
+    name: 'Operational',
+    columns: [
+      'createdAt',
+      'logType',
+      'entity',
+      'entityId',
+      'service',
+      'serviceId',
+      'action',
+      'userRole',
+      'logLevel',
+    ],
+  },
+  {
+    name: 'Application',
+    columns: [
+      'createdAt',
+      'logType',
+      'service',
+      'serviceId',
+      'logLevel',
+      'payload',
+    ],
+  },
+  {
+    name: 'Requests',
+    columns: [
+      'service',
+      'createdAt',
+      'user',
+      'method',
+      'url',
+      'duration',
+      'statusCode',
+    ],
+  },
+  {
+    name: 'HTTP',
+    columns: [
+      'createdAt',
+      'method',
+      'url',
+      'ipAddress',
+      'userAgent',
+    ],
+  }
+];
+
+const useStyles = createStyles(({ token }) => {
+  return {
+    table: {
+      '.ant-pro-table-list-toolbar-left': {
+        flex: '0 0 auto',
+      },
+    },
+  };
+});
+
+const EventLogsTable = ({
+  startTime,
+  endTime,
+  onDateRangeChange,
+}: EventLogTimelineQueryDto & {
+  onDateRangeChange: (start: string | undefined, end: string | undefined) => void;
+}) => {
+  const columns = useEventLogsColumns({
+    startTime,
+    endTime,
+    onDateRangeChange,
+  });
+  const { styles } = useStyles();
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Collapse: {
+            contentPadding: '0',
+            headerPadding: '0',
+          },
+        }
+      }}
+    >
+      <Table<EventLog, EventLogCreateDto, EventLogUpdateDto, TEventLogFilterParams>
+        className={styles.table}
+        getAll={params => apiClient.eventLogs.getManyBaseEventLogsControllerEventLog(params)}
+        columns={columns}
+        idColumnName='id'
+        pathParams={{}}
+        defaultSort={['createdAt', 'DESC']}
+        columnsSets={columnsSets}
+        params={{
+          join: [{
+            field: 'user',
+            select: ['id', 'name'],
+          }],
+          baseFilters: {
+            ...startTime && endTime && { createdAt: [startTime, endTime] },
+          }
+        }}
+        expandable={{
+          expandedRowRender: record => {
+            return <EventLogExplanation record={record} />;
+          },
+          fixed: 'left',
+        }}
+        viewOnly={true}
+        scroll={{
+          x: 'max-content',
+        }}
+        searchableColumns={eventLogsSearchableColumns}
+        search={{
+          filterType: 'light',
+        }}
+        ghost={true}
+      ></Table>
+    </ConfigProvider>
+  );
+}
+
+export default EventLogsTable;

package/src/components/EventLogs/EventLogsTimeline.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Column } from '@ant-design/plots';
+import { ColumnConfig } from "@ant-design/plots/es/components/column";
+import { EventLogTimelineDto, EventLogTimelineQueryDto } from "@@api/generated";
+import apiClient from "@@api/apiClient";
+import { Button } from "antd";
+import { PageLoading } from "@ant-design/pro-layout";
+import { useModel } from "umi";
+
+type TEventLogsTimelineProps = EventLogTimelineQueryDto & {
+  onDateRangeChange: (start: string | undefined, end: string | undefined) => void;
+}
+
+export const EventLogsTimeline: React.FC<TEventLogsTimelineProps> = ({
+  startTime,
+  endTime,
+  onDateRangeChange,
+}) => {
+    // @ts-ignore
+    const { initialState } = useModel('@@initialState');
+    // @ts-ignore
+    const { navTheme } = initialState?.settings || {};
+
+    const [data, setData] = useState<EventLogTimelineDto[] | null>(null);
+    const sliderPosition = useMemo(() => [0, 1], []);
+    const [showFilterButton, setShowFilterButton] = useState(false);
+
+    const chartRef = React.useRef(null);
+
+    useEffect(() => {
+        apiClient.eventLogs.getTimeline({
+            startTime,
+            endTime,
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        }).then(setData).then(() => {
+            sliderPosition[0] = 0;
+            sliderPosition[1] = 1;
+            setShowFilterButton(false);
+        });
+    }, [startTime, endTime]);
+
+    if (!data) {
+        return <PageLoading/>;
+    }
+
+    const applySliderDates = () => {
+        const [start, end] = sliderPosition;
+        const startDate = data?.[Math.floor(start * (data.length - 1))]?.startTime;
+        const endDate = data?.[Math.floor(end * (data.length - 1))]?.endTime;
+        onDateRangeChange(startDate, endDate);
+    }
+
+    const domain = ['Info', 'Warning', 'Error'];
+
+    const config: ColumnConfig = {
+        data,
+        xField: 'startTime',
+        yField: 'records',
+        colorField: 'logLevel',
+        stack: true,
+        height: 300,
+        theme: navTheme === 'realDark' ? 'dark' : 'light',
+        legend: {},
+        // slider: {
+        //   x: {
+        //     values: sliderPosition,
+        //     onChange(values: [number, number]) {
+        //       sliderPosition[0] = values[0];
+        //       sliderPosition[1] = values[1];
+        //       if (!showFilterButton) {
+        //         setShowFilterButton(true);
+        //       }
+        //     }
+        //   },
+        // },
+        axis: {
+            x: {
+                labelFormatter: (v: string, i: number) => {
+                    return data[i * domain.length]?.time
+                },
+            },
+            y: {
+                gridLineWidth: 1,
+            }
+        },
+        scale: {
+            color: {
+                domain,
+                range: ['#1890ff', 'orange', 'red'],
+            },
+        },
+        onReady: ({chart}) => {
+            chart.on('interval:click', (event: any) => {
+                const {data} = event?.data || {};
+                onDateRangeChange(data?.startTime, data?.endTime);
+            });
+        }
+    };
+
+    return <>
+        <Column
+            {...config}
+            ref={chartRef}
+        />
+        {
+            showFilterButton && <Button onClick={applySliderDates}>Filter dates</Button> || null
+        }
+    </>
+}

package/src/components/EventLogs/UserAgentDisplay.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Bowser from 'bowser';
+import { getBrowserIcon } from './getBrowserIcon';
+
+type UserAgentProps = {
+  userAgent: string;
+};
+
+const UserAgentDisplay: React.FC<UserAgentProps> = ({ userAgent }) => {
+  const browserIconClass = getBrowserIcon(userAgent);
+  const browser = Bowser.getParser(userAgent).getBrowser();
+
+  return (
+    <span>
+      <i className={browserIconClass} style={{ fontSize: '14px', marginRight: '4px' }}/>
+      <span>{`${browser.name} ${browser.version}`}</span>
+    </span>
+  );
+};
+
+export default UserAgentDisplay;