diff --git a/esp/src/src-react/components/Logs.tsx b/esp/src/src-react/components/Logs.tsx index a04b845f6db..675bfca7b9b 100644 --- a/esp/src/src-react/components/Logs.tsx +++ b/esp/src/src-react/components/Logs.tsx @@ -1,18 +1,20 @@ import * as React from "react"; import { CommandBar, ContextualMenuItemType, ICommandBarItemProps } from "@fluentui/react"; -import { useConst } from "@fluentui/react-hooks"; -import { GetLogsExRequest, TargetAudience, LogType } from "@hpcc-js/comms"; -import { Level } from "@hpcc-js/util"; -import { CreateLogsQueryStore } from "src/ESPLog"; +import { GetLogsExRequest, LogaccessService, TargetAudience, LogType } from "@hpcc-js/comms"; +import { Level, scopedLogger } from "@hpcc-js/util"; import nlsHPCC from "src/nlsHPCC"; import { logColor, wuidToDate, wuidToTime } from "src/Utility"; import { HolyGrail } from "../layouts/HolyGrail"; import { pushParams } from "../util/history"; -import { FluentPagedGrid, FluentPagedFooter, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid"; +import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid"; import { Filter } from "./forms/Filter"; import { Fields } from "./forms/Fields"; import { ShortVerticalDivider } from "./Common"; +export const service = new LogaccessService({ baseUrl: "" }); + +const logger = scopedLogger("src-react/components/Logs.tsx"); + const eightHours = 8 * 60 * 60 * 1000; const startTimeOffset = 1 * 60 * 60 * 1000; const endTimeOffset = 23 * 60 * 60 * 1000; @@ -42,6 +44,14 @@ const FilterFields: Fields = { processid: { type: "string", label: nlsHPCC.ProcessID }, threadid: { type: "string", label: nlsHPCC.ThreadID }, message: { type: "string", label: nlsHPCC.Message }, + LogLineLimit: { + type: "dropdown", label: nlsHPCC.LogLineLimit, options: [ + { key: 100, text: "100" }, + { key: 250, text: "250" }, + { key: 500, text: "500" }, + { key: 1000, text: "1000" }, + ] + }, StartDate: { type: "datetime", label: nlsHPCC.FromDate }, EndDate: { type: "datetime", label: nlsHPCC.ToDate }, }; @@ -91,17 +101,37 @@ export const Logs: React.FunctionComponent = ({ const hasFilter = React.useMemo(() => Object.keys(filter).length > 0, [filter]); const [showFilter, setShowFilter] = React.useState(false); + const [data, setData] = React.useState([]); const { selection, setSelection, - pageNum, setPageNum, - pageSize, setPageSize, - total, setTotal, + setTotal, refreshTable } = useFluentStoreState({ page }); const now = React.useMemo(() => new Date(), []); // Grid --- - const gridStore = useConst(() => CreateLogsQueryStore()); + const columns = React.useMemo((): FluentColumns => { + return { + timestamp: { label: nlsHPCC.TimeStamp, width: 140, sortable: false, }, + message: { label: nlsHPCC.Message, width: 600, sortable: false, }, + components: { label: nlsHPCC.ContainerName, width: 150, sortable: false }, + audience: { label: nlsHPCC.Audience, width: 60, sortable: false, }, + class: { + label: nlsHPCC.Class, width: 40, sortable: false, + formatter: level => { + const colors = logColor(levelMap(level)); + const styles = { backgroundColor: colors.background, padding: "2px 6px", color: colors.foreground }; + return {level}; + } + }, + workunits: { label: nlsHPCC.JobID, width: 50, sortable: false, hidden: wuid !== undefined, }, + processid: { label: nlsHPCC.ProcessID, width: 75, sortable: false, }, + logid: { label: nlsHPCC.Sequence, width: 70, sortable: false, }, + threadid: { label: nlsHPCC.ThreadID, width: 60, sortable: false, }, + }; + }, [wuid]); + + const copyButtons = useCopyButtons(columns, selection, "logaccess"); const query = React.useMemo(() => { if (wuid !== undefined) { @@ -119,6 +149,9 @@ export const Logs: React.FunctionComponent = ({ //assign a reasonable default start date if one isn't set filter.StartDate = new Date(now.getTime() - eightHours); } + if (typeof filter.EndDate === "string") { + filter.EndDate = new Date(filter.EndDate + ":00Z"); + } if (!filter.EndDate) { filter.EndDate = new Date(now.getTime() + endTimeOffset); } @@ -126,34 +159,17 @@ export const Logs: React.FunctionComponent = ({ return formatQuery(filter); }, [filter, now, wuid]); - const columns = React.useMemo((): FluentColumns => { - return { - timestamp: { label: nlsHPCC.TimeStamp, width: 140, sortable: false, }, - message: { label: nlsHPCC.Message, sortable: false, }, - components: { label: nlsHPCC.ContainerName, width: 150, sortable: false }, - audience: { label: nlsHPCC.Audience, width: 60, sortable: false, }, - class: { - label: nlsHPCC.Class, width: 40, sortable: false, - formatter: level => { - const colors = logColor(levelMap(level)); - const styles = { backgroundColor: colors.background, padding: "2px 6px", color: colors.foreground }; - return {level}; - } - }, - workunits: { label: nlsHPCC.JobID, width: 50, sortable: false, hidden: wuid !== undefined, }, - processid: { label: nlsHPCC.ProcessID, width: 75, sortable: false, }, - logid: { label: nlsHPCC.Sequence, width: 70, sortable: false, }, - threadid: { label: nlsHPCC.ThreadID, width: 60, sortable: false, }, - }; - }, [wuid]); - - const copyButtons = useCopyButtons(columns, selection, "logaccess"); + const refreshData = React.useCallback(() => { + service.GetLogsEx(query as any).then(response => { + setData(response.lines); + }).catch(err => logger.error(err)); + }, [query]); // Command Bar --- const buttons = React.useMemo((): ICommandBarItemProps[] => [ { key: "refresh", text: nlsHPCC.Refresh, iconProps: { iconName: "Refresh" }, - onClick: () => refreshTable.call() + onClick: () => refreshData() }, { key: "divider_1", itemType: ContextualMenuItemType.Divider, onRender: () => }, { @@ -162,7 +178,11 @@ export const Logs: React.FunctionComponent = ({ setShowFilter(true); } }, - ], [hasFilter, refreshTable]); + ], [hasFilter, refreshData]); + + React.useEffect(() => { + refreshData(); + }, [refreshData]); // Filter --- const filterFields: Fields = React.useMemo(() => { @@ -181,12 +201,9 @@ export const Logs: React.FunctionComponent = ({ header={} main={
- { @@ -196,18 +213,9 @@ export const Logs: React.FunctionComponent = ({ } }} refresh={refreshTable} - > + >
} - footer={} - footerStyles={{}} />; }; \ No newline at end of file