Merge pull request #522 from metrico/feat/faro-logs

fix: default timerange to five minutes

Author: jacovinus

Diff for: README.md

@@ -151,6 +151,12 @@ _JSON stringifyed and URL encoded_
 
 ------------
 
+### Local Proxy for headeless qryn-view (for experimentation purposes only): 
+
+Add to you .env file: 
+
+`VITE_API_BASE_URL= { your local qryn api }`
+should we with same protocol as your qryn-view instance 
 
 ### About qryn
 

Diff for: packages/main/helpers/stateFromQueryParams.ts

@@ -3,6 +3,7 @@ import setDebug from "./setDebug";
 import moment from "moment";
 import { nanoid } from "nanoid";
 import DOMPurify from "isomorphic-dompurify";
+import addMinutes from "date-fns/addMinutes";
 const BOOLEAN_VALUES = ["isSubmit", "isSplit", "autoTheme", "isEmbed"];
 export const initialUrlState: any = {
     query: "",
@@ -35,7 +36,7 @@ export const initialUrlState: any = {
             values: [], // label name selected
             response: {}, // the target should be just the last one
             open: true,
-            start: new Date(Date.now() - 5 * 60000),
+            start: addMinutes(new Date(Date.now()), -5),
             time: "", // for instant queries
             stop: new Date(Date.now()),
             label: "",
@@ -66,7 +67,7 @@ export const initialUrlState: any = {
             values: [], // label name selected
             response: {}, // the target should be just the last one
             open: false,
-            start: new Date(Date.now() - 5 * 60000),
+            start: addMinutes(new Date(Date.now()), -5),
             time: "", // for instant queries
             stop: new Date(Date.now()),
             label: "",

Diff for: packages/main/package.json

@@ -14,6 +14,7 @@
     "@emotion/is-prop-valid": "^1.3.0",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.11.5",
+    "@fingerprintjs/fingerprintjs": "^4.5.0",
     "@microlink/react-json-view": "latest",
     "@mui/base": "5.0.0-beta.5",
     "@mui/icons-material": "^5.15.20",
@@ -30,6 +31,7 @@
     "dayjs": "^1.11.12",
     "deep-freeze": "^0.0.1",
     "dnd-core": "^16.0.1",
+    "echarts": "^5.5.1",
     "fuzzy": "^0.1.3",
     "immutability-helper": "^3.1.1",
     "isomorphic-dompurify": "^1.13.0",
@@ -62,19 +64,23 @@
     "slate-history": "^0.100.0",
     "slate-react": "^0.105.0",
     "tss-react": "^4.9.10",
+    "uuid": "^10.0.0",
+    "web-vitals": "^4.2.3",
     "zod": "^3.23.8",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0",
     "@testing-library/react": "^14.3.1",
+    "@types/fingerprintjs": "^0.5.28",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "dayjs-plugin-utc": "^0.1.2",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",

Diff for: packages/main/plugins/PluginCards.tsx

@@ -68,7 +68,7 @@ export const PluginCards: React.FC<{
     const theme = useTheme();
 
     return (
-        <div>
+        <div style={{ display: "flex", gap: ".5em" }}>
             {filteredComponentList?.length > 0 &&
                 filteredComponentList?.map((component: any, k: number) => (
                     <PluginCard

Diff for: packages/main/plugins/PluginStyles.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/css'
+import { css } from "@emotion/css";
 import { QrynTheme } from "@ui/theme/types";
 
 export const PluginPageStyles = (theme: QrynTheme) => css`
@@ -15,6 +15,7 @@ export const PluginPageStyles = (theme: QrynTheme) => css`
     flex: 1;
     overflow-x: hidden;
     display: flex;
+    flex-direction: column;
     flex: 1;
     height: 100%;
     overflow: hidden;
@@ -25,6 +26,28 @@ export const PluginPageStyles = (theme: QrynTheme) => css`
         font-size: 14px;
         color: ${theme.contrast};
     }
+    .page-header {
+        border-bottom: 1px solid ${theme.shadow};
+        margin-bottom: 0.5em;
+        padding: 1em 0.25em;
+        display: flex;
+        gap: 0.25em;
+        align-items: baseline;
+        h1 {
+            font-size: 1.5em;
+            color: ${theme.contrast};
+        }
+        h3 {
+            font-size: 1.25em;
+            color: ${theme.contrastNeutral};
+        }
+    }
+    .cards-container {
+        display: flex;
+        flex-direction: row;
+        flex: 1;
+        gap: 1em;
+    }
 `;
 
 export const PluginCardStyles = (theme: QrynTheme) => css`
@@ -77,4 +100,4 @@ export const InlineSwitch = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-`;
+`;

Diff for: packages/main/plugins/Plugins.tsx

@@ -4,9 +4,12 @@ import useTheme from "@ui/theme/useTheme";
 import { LocalPluginsManagement } from "./PluginManagerFactory";
 import { PluginPageStyles } from "./PluginStyles";
 import { PluginCards } from "./PluginCards";
+import { useWebVitals } from "@ui/plugins/WebVitals/useWebVitals";
 
 export default function Plugins() {
     const theme = useTheme();
+     // check web vitals 
+    useWebVitals({ page: "Plugins" });
     const pl = LocalPluginsManagement();
     const [local] = useState(pl.getAll());
     const plugins: any = useMemo(() => {
@@ -18,15 +21,22 @@ export default function Plugins() {
 
     return (
         <div className={cx(PluginPageStyles(theme))}>
-            {plugins?.length > 0 &&
-                plugins?.map(([section, components]: any, index: number) => (
-                    <div style={{ marginTop: "4px" }} key={index}>
-                        <PluginCards
-                            components={components}
-                            section={section}
-                        />
-                    </div>
-                ))}
+            <div className="page-header">
+                <h1>Plugins</h1>
+                <h3>(need to reload page to activate)</h3>
+            </div>
+            <div className="cards-container">
+                {plugins?.length > 0 &&
+                    plugins?.map(
+                        ([section, components]: any, index: number) => (
+                            <PluginCards
+                                key={index}
+                                components={components}
+                                section={section}
+                            />
+                        )
+                    )}
+            </div>
         </div>
     );
 }

Diff for: packages/main/plugins/PluginsRenderer.tsx

@@ -8,11 +8,18 @@ interface PluginRendererProps {
 
 const PluginRenderer: React.FC<PluginRendererProps> = (props) => {
     const { section, localProps } = props;
-    return ( 
-        <div className="renderer-content">
+    return (
+        <div
+            style={{
+                display: "flex",
+                gap: ".5em",
+                alignItems: "center",
+                padding: ".5em",
+            }}
+        >
             {PluginManager.getPlugins(section)?.length > 0 &&
                 PluginManager.getPlugins(section)?.map(
-                    ( 
+                    (
                         {
                             name,
                             Component,

Diff for: packages/main/plugins/QueryTest/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { WebVitalsStore } from "./store";
+import CustomSwitch from "@ui/qrynui/CustomSwitch/CustomSwitch";
+import { css, cx } from "@emotion/css";
+import useTheme from "@ui/theme/useTheme";
+import { QrynTheme } from "@ui/theme/types";
+import Tooltip from "@mui/material/Tooltip";
+const WebVitalStyles = (theme: QrynTheme) => css`
+    display: flex;
+    align-items: center;
+    p {
+        font-size: 0.75em;
+        color: ${theme.contrast};
+    }
+`;
+
+export const WebVitals: React.FC = () => {
+    const { 
+        webVitalsActive, 
+        httpPerformanceActive,
+        setWebVitalsActive,
+        setHttpPerformanceActive,
+        qrynInstance
+    } = WebVitalsStore();
+    
+    const theme = useTheme();
+    const onWebVitalsActivate = () => {
+        setWebVitalsActive(webVitalsActive);
+    };
+    const onHttpPerformanceRequestActivate = () => {
+        setHttpPerformanceActive(httpPerformanceActive)
+    }
+
+    return (
+        <div className={cx(WebVitalStyles(theme))}>
+            <Tooltip title="Monitor Web vitals sending data to Qryn">
+                <p>Monitor WebVitals</p>
+            </Tooltip>
+            <CustomSwitch
+                onChange={onWebVitalsActivate}
+                defaultActive={webVitalsActive}
+            />
+                      <Tooltip title="Monitor HTTP Requests sending data to Qryn">
+                <p>Monitor HTTP Requests</p>
+            </Tooltip>
+            <CustomSwitch
+                onChange={onHttpPerformanceRequestActivate}
+                defaultActive={httpPerformanceActive}
+            />
+            <Tooltip title="Your qryn-view instance tag to monitor statistics">
+            <p>Instance: {qrynInstance ?? ""}</p>
+            </Tooltip>
+        </div>
+    );
+};