From 072686bb66f3fb1e7cd9cd70b08555b862e1e175 Mon Sep 17 00:00:00 2001 From: Bobby Wang Date: Wed, 28 Dec 2022 17:01:48 +0930 Subject: [PATCH] expand rowy logging into tabs: extension, webhook, column(derivative/action/default value/connector) --- src/atoms/tableScope/ui.ts | 2 +- src/components/ColumnMenu/ColumnMenu.tsx | 45 +- .../CloudLogsModal/CloudLogsModal.tsx | 590 ++++++++---------- .../CloudLogsModal/TimeRangeSelect.tsx | 4 +- .../TableModals/CloudLogsModal/utils.ts | 83 +-- .../ExtensionsModal/ExtensionList.tsx | 3 +- .../TableModals/WebhooksModal/WebhookList.tsx | 3 +- 7 files changed, 314 insertions(+), 416 deletions(-) diff --git a/src/atoms/tableScope/ui.ts b/src/atoms/tableScope/ui.ts index 44afee10..177ae9b2 100644 --- a/src/atoms/tableScope/ui.ts +++ b/src/atoms/tableScope/ui.ts @@ -142,7 +142,7 @@ export const selectedCellAtom = atom(null); export const contextMenuTargetAtom = atom(null); export type CloudLogFilters = { - type: "rowy" | "audit" | "build"; + type: "extension" | "webhook" | "column" | "audit" | "build"; timeRange: | { type: "seconds" | "minutes" | "hours" | "days"; value: number } | { type: "range"; start: Date; end: Date }; diff --git a/src/components/ColumnMenu/ColumnMenu.tsx b/src/components/ColumnMenu/ColumnMenu.tsx index a5f76a67..99b168aa 100644 --- a/src/components/ColumnMenu/ColumnMenu.tsx +++ b/src/components/ColumnMenu/ColumnMenu.tsx @@ -25,7 +25,6 @@ import { import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward"; import EditIcon from "@mui/icons-material/EditOutlined"; -// import ReorderIcon from "@mui/icons-material/Reorder"; import SettingsIcon from "@mui/icons-material/SettingsOutlined"; import EvalIcon from "@mui/icons-material/PlayCircleOutline"; @@ -319,24 +318,19 @@ export default function ColumnMenu({ }, disabled: !isConfigurable, }, - // { - // label: "Re-order", - // icon: , - // onClick: () => alert("REORDER"), - // }, - - // { - // label: "Hide for everyone", - // activeLabel: "Show", - // icon: , - // activeIcon: , - // onClick: () => { - // actions.update(column.key, { hidden: !column.hidden }); - // handleClose(); - // }, - // active: column.hidden, - // color: "error" as "error", - // }, + { + key: "logs", + label: altPress ? "Logs" : "Logs…", + icon: , + onClick: () => { + setModal("cloudLogs"); + setCloudLogFilters({ + type: "column", + timeRange: { type: "days", value: 7 }, + column: [column.key], + }); + }, + }, ]; // TODO: Generalize @@ -388,19 +382,6 @@ export default function ColumnMenu({ confirm: "Evaluate", }), }, - { - key: "logs", - label: altPress ? "Logs" : "Logs…", - icon: , - onClick: () => { - setModal("cloudLogs"); - setCloudLogFilters({ - type: "rowy", - timeRange: { type: "days", value: 7 }, - column: [column.key], - }); - }, - }, ]; const columnActions: IMenuContentsProps["menuItems"] = [ diff --git a/src/components/TableModals/CloudLogsModal/CloudLogsModal.tsx b/src/components/TableModals/CloudLogsModal/CloudLogsModal.tsx index 95af37f1..93c2a8af 100644 --- a/src/components/TableModals/CloudLogsModal/CloudLogsModal.tsx +++ b/src/components/TableModals/CloudLogsModal/CloudLogsModal.tsx @@ -13,6 +13,7 @@ import { InputAdornment, Button, Box, + CircularProgress, } from "@mui/material"; import RefreshIcon from "@mui/icons-material/Refresh"; import { CloudLogs as LogsIcon } from "@src/assets/icons"; @@ -96,7 +97,7 @@ export default function CloudLogsModal({ onClose }: ITableModalProps) { "&, & .MuiTab-root": { minHeight: { md: "var(--dialog-title-height)" }, }, - ml: { md: 18 }, + ml: { md: 20 }, mr: { md: 40 / 8 + 3 }, minHeight: 32, @@ -114,15 +115,17 @@ export default function CloudLogsModal({ onClose }: ITableModalProps) { + onChange={(_, v) => { setCloudLogFilters((c) => ({ type: v, timeRange: c.timeRange, - })) - } + })); + }} aria-label="Filter by log type" > - Rowy Logging + Extension + Webhook + Column Audit Build @@ -142,154 +145,18 @@ export default function CloudLogsModal({ onClose }: ITableModalProps) { )} - {cloudLogFilters.type === "rowy" && <>} - {cloudLogFilters.type === "audit" && ( - - setCloudLogFilters((prev) => ({ - ...prev, - auditRowId: e.target.value, - })) - } - InputProps={{ - startAdornment: ( - - {tableSettings.collection}/ - - ), - }} - className="labelHorizontal" - sx={{ - "& .MuiInputBase-root, & .MuiInputBase-input": { - typography: "body2", - fontFamily: "mono", - }, - "& .MuiInputAdornment-positionStart": { - m: "0 !important", - pointerEvents: "none", - }, - "& .MuiInputBase-input": { pl: 0 }, - }} - /> - )} -
{cloudLogFilters.type !== "build" && ( <> - {!isValidating && Array.isArray(data) && ( - - {data.length} entries - - )} - - {cloudLogFilters.type !== "rowy" && ( - - setCloudLogFilters((prev) => ({ ...prev, severity })) - } - TextFieldProps={{ - style: { width: 130 }, - placeholder: "Severity", - SelectProps: { - renderValue: () => { - if ( - !Array.isArray(cloudLogFilters.severity) || - cloudLogFilters.severity.length === 0 - ) - return `Severity`; - - if (cloudLogFilters.severity.length === 1) - return ( - <> - Severity{" "} - - - ); - - return `Severity (${cloudLogFilters.severity.length})`; - }, - }, - }} - itemRenderer={(option) => ( - <> - - {startCase(option.value.toLowerCase())} - - )} - /> - )} - - setCloudLogFilters((c) => ({ ...c, timeRange: value })) - } - /> - mutate()} - title="Refresh" - icon={} - disabled={isValidating} - /> - - )} - - - {isValidating && ( - - )} - - } - > - {cloudLogFilters.type === "build" ? ( - - ) : ( - - - {cloudLogFilters.type === "rowy" ? ( - + + {isValidating ? "Loading" : `${data?.length ?? 0} entries`} + - { - setCloudLogFilters((prev) => ({ - ...prev, - functionType: v, - })); - }} - TextFieldProps={{ - id: "functionType", - className: "labelHorizontal", - sx: { "& .MuiInputBase-root": { width: 200 } }, - fullWidth: false, - SelectProps: { - renderValue: () => { - if (cloudLogFilters?.functionType?.length === 1) { - return `Type (${cloudLogFilters.functionType[0]})`; - } else if (cloudLogFilters?.functionType?.length) { - return `Type (${cloudLogFilters.functionType.length})`; - } else { - return `Type`; - } - }, - }, - }} - itemRenderer={(option) => <>{upperCase(option.value)}} + + mutate()} + title="Refresh" + icon={ + isValidating ? ( + + ) : ( + + ) + } + disabled={isValidating} /> - { - setCloudLogFilters((prev) => ({ - ...prev, - loggingSource: v, - })); - }} - TextFieldProps={{ - id: "loggingSource", - className: "labelHorizontal", - sx: { "& .MuiInputBase-root": { width: 200 } }, - fullWidth: false, - SelectProps: { - renderValue: () => { - if (cloudLogFilters?.loggingSource?.length === 1) { - return `Source (${cloudLogFilters.loggingSource[0]})`; - } else if (cloudLogFilters?.loggingSource?.length) { - return `Source (${cloudLogFilters.loggingSource.length})`; - } else { - return `Source`; - } + + )} + + + } + > + {cloudLogFilters.type === "build" ? ( + + ) : ( + + {["extension", "webhook", "column", "audit"].includes( + cloudLogFilters.type + ) ? ( + + {cloudLogFilters.type === "extension" ? ( + <> + ({ + label: x.name, + value: x.name, + type: x.type, + })) + : [] + } + value={cloudLogFilters.extension ?? []} + onChange={(v) => + setCloudLogFilters((prev) => ({ ...prev, extension: v })) + } + TextFieldProps={{ + id: "extension", + className: "labelHorizontal", + sx: { + width: "100%", + "& .MuiInputBase-root": { width: "100%" }, }, - }, - }} - itemRenderer={(option) => <>{upperCase(option.value)}} - /> + fullWidth: false, + placeholder: "Extension", + SelectProps: { + renderValue: () => { + if (cloudLogFilters?.extension?.length === 1) { + return `Extension (${cloudLogFilters.extension[0]})`; + } else if (cloudLogFilters?.extension?.length) { + return `Extension (${cloudLogFilters.extension.length})`; + } else { + return `Extension`; + } + }, + }, + }} + itemRenderer={(option) => ( + <> + {option.label} {option.type} + + )} + /> + + ) : null} + {cloudLogFilters.type === "webhook" ? ( { @@ -412,133 +306,145 @@ export default function CloudLogsModal({ onClose }: ITableModalProps) { )} /> - ({ - label: x.name, - value: x.name, - type: x.type, - })) - : [] - } - value={cloudLogFilters.extension ?? []} - onChange={(v) => - setCloudLogFilters((prev) => ({ ...prev, extension: v })) - } - TextFieldProps={{ - id: "extension", - className: "labelHorizontal", - sx: { "& .MuiInputBase-root": { width: 180 } }, - fullWidth: false, - placeholder: "Extension", - SelectProps: { - renderValue: () => { - if (cloudLogFilters?.extension?.length === 1) { - return `Extension (${cloudLogFilters.extension[0]})`; - } else if (cloudLogFilters?.extension?.length) { - return `Extension (${cloudLogFilters.extension.length})`; - } else { - return `Extension`; - } + ) : null} + {cloudLogFilters.type === "column" ? ( + <> + ({ + label: config.name, + value: key, + type: config.type, + }) + )} + value={cloudLogFilters.column ?? []} + onChange={(v) => + setCloudLogFilters((prev) => ({ ...prev, column: v })) + } + TextFieldProps={{ + id: "column", + className: "labelHorizontal", + sx: { + width: "100%", + "& .MuiInputBase-root": { width: "100%" }, }, - }, - }} - itemRenderer={(option) => ( - <> - {option.label} {option.type} - - )} - /> - ({ - label: config.name, - value: key, - type: config.type, - }) - )} - value={cloudLogFilters.column ?? []} - onChange={(v) => - setCloudLogFilters((prev) => ({ ...prev, column: v })) - } - TextFieldProps={{ - id: "column", - className: "labelHorizontal", - sx: { "& .MuiInputBase-root": { width: 200 } }, - fullWidth: false, - placeholder: "Column", - SelectProps: { - renderValue: () => { - if (cloudLogFilters?.column?.length === 1) { - return `Column (${cloudLogFilters.column[0]})`; - } else if (cloudLogFilters?.column?.length) { - return `Column (${cloudLogFilters.column.length})`; - } else { - return `Column`; - } + fullWidth: false, + placeholder: "Column", + SelectProps: { + renderValue: () => { + if (cloudLogFilters?.column?.length === 1) { + return `Column (${cloudLogFilters.column[0]})`; + } else if (cloudLogFilters?.column?.length) { + return `Column (${cloudLogFilters.column.length})`; + } else { + return `Column`; + } + }, }, - }, - }} - itemRenderer={(option) => ( - <> - {option.label} {option.value}  - {option.type} - - )} - /> - - setCloudLogFilters((prev) => ({ ...prev, severity })) - } - TextFieldProps={{ - style: { width: 130 }, - placeholder: "Severity", - SelectProps: { - renderValue: () => { - if ( - !Array.isArray(cloudLogFilters.severity) || - cloudLogFilters.severity.length === 0 - ) - return `Severity`; + }} + itemRenderer={(option) => ( + <> + {option.label} {option.value}  + {option.type} + + )} + /> + + ) : null} + {cloudLogFilters.type === "audit" ? ( + <> + + setCloudLogFilters((prev) => ({ + ...prev, + auditRowId: e.target.value, + })) + } + InputProps={{ + startAdornment: ( + + {tableSettings.collection}/ + + ), + }} + className="labelHorizontal" + sx={{ + width: "100%", + "& .MuiInputBase-root, & .MuiInputBase-input": { + width: "100%", + typography: "body2", + fontFamily: "mono", + }, + "& .MuiInputAdornment-positionStart": { + m: "0 !important", + pointerEvents: "none", + }, + "& .MuiInputBase-input": { pl: 0 }, + "& .MuiFormLabel-root": { + whiteSpace: "nowrap", + }, + }} + /> + + ) : null} + + setCloudLogFilters((prev) => ({ ...prev, severity })) + } + TextFieldProps={{ + style: { width: 200 }, + placeholder: "Severity", + SelectProps: { + renderValue: () => { + if ( + !Array.isArray(cloudLogFilters.severity) || + cloudLogFilters.severity.length === 0 + ) + return `Severity`; - if (cloudLogFilters.severity.length === 1) - return ( - <> - Severity{" "} - - - ); + if (cloudLogFilters.severity.length === 1) + return ( + <> + Severity{" "} + + + ); - return `Severity (${cloudLogFilters.severity.length})`; - }, + return `Severity (${cloudLogFilters.severity.length})`; }, - }} - itemRenderer={(option) => ( - <> - - {startCase(option.value.toLowerCase())} - - )} - /> - - ) : null} - + }, + }} + itemRenderer={(option) => ( + <> + + {startCase(option.value.toLowerCase())} + + )} + /> + + setCloudLogFilters((c) => ({ ...c, timeRange: value })) + } + /> + + ) : null} +
{value && value.type !== "range" && ( { + return `jsonPayload.loggingSource = "${loggingSource}"`; + }) + .join(encodeURIComponent(" OR ")) + ); + } + switch (cloudLogFilters.type) { - case "rowy": + case "extension": logQuery.push(`logName = "projects/${projectId}/logs/rowy-logging"`); - if (cloudLogFilters?.functionType?.length) - logQuery.push( - cloudLogFilters.functionType - .map((functionType) => { - return `jsonPayload.functionType = "${functionType}"`; - }) - .join(encodeURIComponent(" OR ")) - ); - if (cloudLogFilters?.loggingSource?.length) { - logQuery.push( - cloudLogFilters.loggingSource - .map((loggingSource) => { - return `jsonPayload.loggingSource = "${loggingSource}"`; - }) - .join(encodeURIComponent(" OR ")) - ); - } else { - // mandatory filter to remove unwanted gcp diagnostic logs - logQuery.push( - ["backend-scripts", "backend-function", "hooks"] - .map((loggingSource) => { - return `jsonPayload.loggingSource = "${loggingSource}"`; - }) - .join(encodeURIComponent(" OR ")) - ); - } - if (cloudLogFilters?.webhook?.length) { - logQuery.push( - cloudLogFilters.webhook - .map((id) => `jsonPayload.url : "${id}"`) - .join(encodeURIComponent(" OR ")) - ); - } - if (cloudLogFilters?.extension?.length) + if (cloudLogFilters?.extension?.length) { logQuery.push( cloudLogFilters.extension .map((extensionName) => { @@ -56,7 +34,25 @@ export const cloudLogFetcher = ( }) .join(encodeURIComponent(" OR ")) ); - if (cloudLogFilters?.column?.length) + } else { + logQuery.push(`jsonPayload.functionType = "extension"`); + } + break; + + case "webhook": + if (cloudLogFilters?.webhook?.length) { + logQuery.push( + cloudLogFilters.webhook + .map((id) => `jsonPayload.url : "${id}"`) + .join(encodeURIComponent(" OR ")) + ); + } else { + logQuery.push(`jsonPayload.functionType = "hooks"`); + } + break; + + case "column": + if (cloudLogFilters?.column?.length) { logQuery.push( cloudLogFilters.column .map((column) => { @@ -64,6 +60,21 @@ export const cloudLogFetcher = ( }) .join(encodeURIComponent(" OR ")) ); + } else { + logQuery.push( + [ + "connector", + "derivative-script", + "action", + "derivative-function", + "defaultValue", + ] + .map((functionType) => { + return `jsonPayload.functionType = "${functionType}"`; + }) + .join(encodeURIComponent(" OR ")) + ); + } break; case "audit": diff --git a/src/components/TableModals/ExtensionsModal/ExtensionList.tsx b/src/components/TableModals/ExtensionsModal/ExtensionList.tsx index 7ed8e6c6..a0d5b82f 100644 --- a/src/components/TableModals/ExtensionsModal/ExtensionList.tsx +++ b/src/components/TableModals/ExtensionsModal/ExtensionList.tsx @@ -107,8 +107,7 @@ export default function ExtensionList({ onClick={() => { setModal("cloudLogs"); setCloudLogFilters({ - type: "rowy", - functionType: ["extension"], + type: "extension", timeRange: { type: "days", value: 7 }, extension: [extensionObject.name], }); diff --git a/src/components/TableModals/WebhooksModal/WebhookList.tsx b/src/components/TableModals/WebhooksModal/WebhookList.tsx index 01b67d07..d2f6b670 100644 --- a/src/components/TableModals/WebhooksModal/WebhookList.tsx +++ b/src/components/TableModals/WebhooksModal/WebhookList.tsx @@ -126,8 +126,7 @@ export default function WebhookList({ onClick={() => { setModal("cloudLogs"); setCloudLogFilters({ - type: "rowy", - functionType: ["hooks"], + type: "webhook", timeRange: { type: "days", value: 7 }, webhook: [webhook.endpoint], });