ezekiel-cli 5.8.2

package/gui/v2/src/app/logs/components/JsonTree.js

@@ -0,0 +1,31 @@
+'use client';
+import { lazy } from 'react';
+import { useTheme } from '@/hooks/theme';
+// import ReactJson from '@microlink/react-json-view';
+const DynamicReactJson = lazy(() => import('@microlink/react-json-view'));
+import CodeEditor from '@/components/CodeEditor/CodeEditor';
+
+export default function JsonTree({ data, maxMessageLength = 100, collapsed = 2 }) {
+  const { theme } = useTheme();
+  try {
+    const source = JSON.parse(data);
+    if (Array.isArray(source) || (source && typeof source === 'object' && source.constructor === Object)) {
+      const viewerTheme = theme === 'dark' ? 'twilight' : 'solarized-light';
+      return (
+        <DynamicReactJson
+          name={false}
+          src={source}
+          enableClipboard={true}
+          collapsed={collapsed}
+          collapseStringsAfterLength={maxMessageLength}
+          groupArraysAfterLength={5}
+          theme={viewerTheme}
+          style={{
+            backgroundColor: 'transparent',
+          }}
+        />
+      );
+    }
+  } catch (error) {}
+  return <CodeEditor data={data} readOnly={true} />;
+}

package/gui/v2/src/app/logs/components/LogMetadata/LogMetadata.js

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import JsonTree from '../JsonTree';
+
+function isObject(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function renderValue(key, value) {
+  const renderUrl = (url) => (
+    <a
+      className="text-blue-500 overflow-x-hidden whitespace-nowrap text-ellipsis w-full"
+      target="_blank"
+      href={`https://${url}`}
+    >
+      https://{url}
+    </a>
+  );
+
+  const renderId = (id) => (
+    <a className="text-blue-500" href={`/users/${id}`}>
+      {id}
+    </a>
+  );
+
+  switch (key) {
+    case 'url':
+      return renderUrl(value);
+    case 'id':
+      return renderId(value);
+    default:
+      return <span>{value}</span>;
+  }
+}
+
+export default function LogMetadata({ data, parent }) {
+  if (!isObject(data)) return null;
+
+  const listItemStyle = {
+    fontSize: '11px',
+    paddingLeft: parent ? '5px' : '0',
+    paddingTop: parent ? '0' : '3px',
+  };
+  return (
+    <div className="background-ui-4 py-1 rounded mt-2 mx-0" style={listItemStyle}>
+      {Object.entries(data).map(([key, value], index) => (
+        <div className="w-full flex gap-2 px-2 max-w-lg" key={key + index}>
+          <span className="font-medium shrink-0">{key}: </span>
+          {isObject(value) ? (
+            <div className="float-left">
+              <JsonTree data={JSON.stringify(value)} collapsed={0} />
+            </div>
+          ) : (
+            renderValue(key, value)
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/gui/v2/src/app/logs/components/LogRow.js

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import JsonTree from './JsonTree';
+import LogMetadata from './LogMetadata/LogMetadata';
+import { useLogs } from '../context';
+
+export default function LogRow({ log }) {
+  const { showMetadata, showPinned, setPinnedLog } = useLogs();
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(log.message));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 3000); // Reset copied state after 3 seconds
+    } catch (error) {
+      console.error('Failed to copy log to clipboard:', error);
+    }
+  };
+
+  return (
+    <tr className="border-b border-color-ui-3">
+      <td className="py-3 px-3 w-1/5 md:w-52">
+        <time dateTime={log.created_at}>
+          {new Date(log.created_at).toLocaleDateString(undefined, {})}
+          {new Date(log.created_at).toLocaleTimeString(undefined, {})}
+        </time>
+      </td>
+      <td className="py-3 px-3 w-1/5 md:w-48">
+        <span
+          className={` break-words ${
+            log.error_type && log.error_type.match(/error/i) ? 'color-alert-negative' : 'color-3'
+          }`}
+        >
+          {log.error_type}
+        </span>
+      </td>
+      <td>
+        <div className="flex gap-8 justify-between shrink flex-wrap sm:flex-nowrap">
+          <div className="w-full">
+            <JsonTree data={log.message} />
+            {showMetadata && <LogMetadata className={`${showPinned ? 'float-left' : ''}`} data={log.data} />}
+          </div>
+          <div className={`py-3 px-3 flex gap-2 items-start w-auto shrink ${showPinned ? 'flex-col' : ''}`}>
+            <button
+              className="rounded border-main px-3 color-main pt-2 pb-0.5 hover:bg-blue-500 hover:text-white"
+              onClick={copyToClipboard}
+              disabled={copied}
+            >
+              <span className="material-symbols-outlined">{copied ? 'check' : 'content_copy'}</span>
+            </button>
+            <button
+              className="rounded border-main px-3 color-main pt-2 pb-0.5 hover:bg-blue-500 hover:text-white"
+              onClick={() => setPinnedLog(log)}
+            >
+              <span className="material-symbols-outlined">push_pin</span>
+            </button>
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+}

package/gui/v2/src/app/logs/components/PinnedPanel/PinnedPanel.js

@@ -0,0 +1,46 @@
+import { useLogs } from '../../context';
+import JsonTree from '../JsonTree';
+
+export default function PinnedPanel({}) {
+  const { showPinned, pinned, clearPinnedLogs, removePinnedLog } = useLogs(); // TODO: usePinned
+
+  const formatDatetime = (datetimeString) => {
+    return new Date(datetimeString).toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: true,
+    });
+  };
+
+  return (
+    <div
+      className={`${
+        showPinned ? 'translate-x-0' : 'translate-x-full'
+      } transition-transform duration-300 ease-in background-ui-5 fixed top-[81px] right-0 w-[360px] h-full border-l border-color-ui-3 z-20`}
+    >
+      <div className="flex py-7 px-4 justify-end background-ui-3">
+        <button
+          className="color-1 text-xs py-3 px-4 rounded-lg hover:ring-1 hover:ring-neutral-500"
+          onClick={clearPinnedLogs}
+        >
+          Clear pinned logs
+        </button>
+      </div>
+      <div className="h-full px-4 text-sm">
+        {pinned.map((log, key) => (
+          <div className="flex flex-col gap-2 border-b py-4 border-color-ui-3" key={key}>
+            <div className="flex justify-between items-center text-xs">
+              <label>{formatDatetime(log.updated_at)}</label>
+              <button onClick={() => removePinnedLog(log)}><span className="material-icons md-14 color-main">delete</span></button>
+            </div>
+            <JsonTree data={log.message} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/gui/v2/src/app/logs/components/Toolbar/ClearButton.js

@@ -0,0 +1,10 @@
+export default function ClearButton({ onClick }) {
+  return (
+    <button
+      className="rounded background-main px-3 color-button-label py-2.5 hover:bg-blue-500 uppercase text-sm font-semibold"
+      onClick={onClick}
+    >
+      Clear Screen
+    </button>
+  );
+}

package/gui/v2/src/app/logs/components/Toolbar/Filter.js

@@ -0,0 +1,13 @@
+export default function Filter({}) {
+  return (
+    <div className="flex justify-center items-center gap-2 my-1">
+      <label>Filter by</label>
+      <input className="background-ui-5 p-2.5 rounded shrink" type="text" />
+      <button
+        className="rounded background-main px-3 color-button-label pt-2 pb-0.5 hover:bg-blue-500"
+      >
+        <span className="material-symbols-outlined">search</span>
+      </button>
+    </div>
+  );
+}

package/gui/v2/src/app/logs/components/Toolbar/MetaDataCheckbox.js

@@ -0,0 +1,11 @@
+export default function MetaDataCheckbox({ value, onChange }) {
+  return (
+    <div className="flex gap-2 text-xs items-center mr-4">
+      <label className="inline-flex items-center cursor-pointer">
+        <input className="sr-only peer" type="checkbox" checked={value} onChange={onChange} />
+        <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+        <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Show Metadata</span>
+      </label>
+    </div>
+  );
+}

package/gui/v2/src/app/logs/components/Toolbar/ShowPinnedButton.js

@@ -0,0 +1,8 @@
+export default function ShowPinnedButton({ onClick }) {
+    return (
+      <button className="rounded background-main px-3 color-button-label pt-2 pb-0.5 hover:bg-blue-500" onClick={onClick}>
+        <span className="material-symbols-outlined">push_pin</span>
+      </button>
+    );
+  }
+  

package/gui/v2/src/app/logs/components/Toolbar/Toolbar.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useLogs } from '../../context';
+import Filter from './Filter';
+import MetaDataCheckbox from './MetaDataCheckbox';
+import ClearButton from './ClearButton';
+import ShowPinnedButton from './ShowPinnedButton';
+import PinnedPanel from '../PinnedPanel/PinnedPanel';
+
+export default function Toolbar() {
+  const { showPinned, setShowPinned, showMetadata, setShowMetadata, setLogs, setPinned } = useLogs();
+
+  const handleClear = () => {
+    setLogs([]);
+    setPinned([]);
+  };
+
+  const toggleMetadata = () => {
+    setShowMetadata(!showMetadata);
+  };
+
+  return (
+    <>
+      <div className="background-ui-4 sticky top-[81px] left-0 z-10">
+        <div className={`flex flex-wrap justify-between py-2 px-4 border-b border-color-ui-3 transition-all duration-300 ease-in ${showPinned && "mr-[360px]"}`}>
+          {/* <Filter /> */}
+          <div className={`flex items-center flex-1 gap-2 my-1 justify-end`}>
+            <MetaDataCheckbox value={showMetadata} onChange={toggleMetadata} />
+            <ClearButton onClick={handleClear} />
+            <ShowPinnedButton onClick={() => setShowPinned(!showPinned)} />
+          </div>
+        </div>
+        <table className="w-full table-fixed table">
+          <thead className="background-ui-4 border-b border-color-ui-3">
+            <tr className="text-left">
+              <th className="py-5 px-3 w-1/5 md:w-52">Timestamp</th>
+              <th className="py-5 px-3 w-1/5 md:w-48">Type</th>
+              <th className="py-5 px-3">Message</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+      <PinnedPanel />
+    </>
+  );
+}

package/gui/v2/src/app/logs/context.js

@@ -0,0 +1,66 @@
+'use client';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+export const LogsContext = createContext();
+
+export function LogsProvider({ children }) {
+  const [logs, setLogs] = useState([]);
+  const [pinned, setPinned] = useState([]);
+
+  const [filter, setFilter] = useState('');
+  const [showMetadata, setShowMetadata] = useState(false);
+  const [showPinned, setShowPinned] = useState(false);
+
+  useEffect(() => {
+    const pinnedLogs = JSON.parse(localStorage.getItem('pinnedLogs')) || [];
+    setPinned(pinnedLogs);
+  }, []);
+
+  const setPinnedLog = (log) => {
+    console.log(log);
+    const pinnedLogs = JSON.parse(localStorage.getItem('pinnedLogs')) || [];
+    if (!pinnedLogs.some(({ id }) => id === log.id)) {
+      pinnedLogs.push(log);
+      localStorage.setItem('pinnedLogs', JSON.stringify(pinnedLogs));
+      setPinned(pinnedLogs);
+    }
+  };
+
+  const removePinnedLog = (log) => {
+    const pinnedLogs = JSON.parse(localStorage.getItem('pinnedLogs')) || [];
+    const newPinnedLogs = pinnedLogs.filter(({ id }) => id !== log.id);
+    localStorage.setItem('pinnedLogs', JSON.stringify(newPinnedLogs));
+    console.log(newPinnedLogs)
+    setPinned(newPinnedLogs);
+  }
+
+  const clearPinnedLogs = () => {
+    localStorage.removeItem('pinnedLogs');
+    setPinned([]);
+  };
+
+  return (
+    <LogsContext.Provider
+      value={{
+        logs,
+        setLogs,
+        pinned,
+        clearPinnedLogs,
+        filter,
+        setFilter,
+        showMetadata,
+        setShowMetadata,
+        showPinned,
+        setShowPinned,
+        setPinnedLog,
+        removePinnedLog,
+      }}
+    >
+      {children}
+    </LogsContext.Provider>
+  );
+}
+
+export function useLogs() {
+  return useContext(LogsContext);
+}

package/gui/v2/src/app/logs/layout.js

@@ -0,0 +1,10 @@
+'use client';
+import { LogsProvider } from './context';
+
+export default function LogsLayout({ children }) {
+  return (
+    <LogsProvider>
+      {children}
+    </LogsProvider>
+  );
+}

package/gui/v2/src/app/logs/page.js

@@ -0,0 +1,73 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { getLogs } from '@/services/LogService';
+
+import LogRow from './components/LogRow';
+import Toolbar from './components/Toolbar/Toolbar';
+import { useLogs } from './context';
+
+export default function Logs() {
+  const { logs, setLogs, showPinned } = useLogs();
+  const autoScrollRef = useRef(true);
+  const prevScrollY = useRef(0);
+  const lastId = useRef(null);
+
+  const loadLogs = async () => {
+    const response = await getLogs(lastId.current);
+
+    setLogs((prev) => {
+      const uniqueLogs = response.logs.filter(({ id }) => !prev.some((log) => log.id === id));
+      return uniqueLogs.length ? [...prev, ...uniqueLogs] : prev;
+    });
+    lastId.current = response.logs?.at(-1)?.id ?? null;
+
+    if (autoScrollRef.current) {
+      try {
+        document.body.querySelector('footer').scrollIntoView({ behavior: 'smooth', block: 'end' });
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      if (currentScrollY < prevScrollY.current) autoScrollRef.current = false;
+
+      prevScrollY.current = currentScrollY;
+    };
+    document.addEventListener('scroll', handleScroll);
+
+    loadLogs();
+
+    const onlineCheckInterval = setInterval(loadLogs, 3000);
+
+    return () => {
+      clearInterval(onlineCheckInterval);
+      document.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <>
+      <Toolbar />
+      <div className="overflow-x-hidden">
+        <table className={`w-full table-fixed table transition-all duration-300 ease-in ${showPinned && 'w-[calc(100vw-375px)]'}`}>
+          <tbody className="background-ui-5 z-0">
+            {logs.map((log, key) => (
+              <LogRow key={key} log={log} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <footer className={`flex justify-center items-center py-8 transition-all duration-300 ease-in ${showPinned && 'w-[calc(100vw-375px)]'}`}>
+        <p>
+          No newer logs to show <br />
+          Checking every 3 seconds
+        </p>
+      </footer>
+    </>
+  );
+}

package/gui/v2/src/app/not-found.js

@@ -0,0 +1,11 @@
+import Link from 'next/link'
+ 
+export default function NotFound() {
+  return (
+    <div className='flex flex-col justify-center items-center h-full min-h-[80vh]'>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  )
+}

package/gui/v2/src/app/page.js

@@ -0,0 +1,103 @@
+"use client";
+import Link from "next/link";
+import { useMenu } from "@/hooks/menu";
+
+const Card = ({
+    title,
+    icon,
+    path = "#",
+    theme = "light",
+    children,
+    showDescription = false,
+    pin = true,
+}) => {
+    const { expandDescription, pinMenu } = useMenu();
+    return (
+        <div className="flex background-card rounded overflow-hidden shadow mb-0 p-6 self-stretch transition-all flex-auto basis-full md:basis-auto lg:w-1/5 md:w-1/4">
+            <div className="flex flex-col items-start justify-between gap-4 self-stretch flex-1">
+                {title !== "Support" && (
+                    <div className="flex items-start justify-end self-stretch gap-2">
+                        <button onClick={() => expandDescription(title)}>
+                            <img
+                                width={16}
+                                src={
+                                    showDescription
+                                        ? `/assets/icons/home-info-fill-${theme}.png`
+                                        : `/assets/icons/home-info-${theme}.png`
+                                }
+                                alt="Info"
+                            />
+                        </button>
+                        <img
+                            width={16}
+                            src={
+                                pin
+                                    ? `/assets/icons/home-pin-fill-${theme}.png`
+                                    : `/assets/icons/home-pin-${theme}.png`
+                            }
+                            alt="Pin"
+                            onClick={() => pinMenu(title)}
+                        />
+                    </div>
+                )}
+                <Link
+                    href={path}
+                    title={title}
+                    className="flex flex-col items-start justify-end gap-4 self-stretch flex-1"
+                >
+                    <img
+                        width={32}
+                        src={`/assets/icons/home-${icon}.png`}
+                        alt={title}
+                    />
+                    <div className="flex flex-col justify-start items-start self-stretch">
+                        <p className="self-stretch font-semibold text-lg text-left">
+                            {title}
+                        </p>
+                    </div>
+                    {showDescription && <ul className="description">{children}</ul>}
+                </Link>
+            </div>
+        </div>
+    );
+};
+export default function Home() {
+    const { menus } = useMenu();
+    return (
+        <main className="flex flex-col items-center px-6">
+            <div className="flex flex-col items-center py-24">
+                <h1 className="text-[64px] font-semibold leading-[72px] tracking-[-1px] mb-6 text-center">
+                    Welcome to the Insites CLI Tool
+                </h1>
+                <p className="text-1 text-base mb-10 text-center">
+                    The Insites CLI Tool is a command line interface that helps
+                    you deploy configuration files and assets to your Insites
+                    instance. It expects you to follow a certain file structure
+                    to communicate correctly with Insites API's.
+                </p>
+                <div className="flex items-center gap-10 self-stretch justify-center flex-wrap text-center">
+                    {menus.map((menu, key) => {
+                        return (
+                            <Card
+                                key={key}
+                                path={menu.path}
+                                title={menu.title}
+                                icon={menu.icon}
+                                showDescription={menu.showDescription}
+                                pin={menu.pin}
+                            >
+                                {menu.descriptions.map((description) => {
+                                    return (
+                                        <li className="text-left" key={description}>
+                                            &rsaquo;&emsp;{description}
+                                        </li>
+                                    );
+                                })}
+                            </Card>
+                        );
+                    })}
+                </div>
+            </div>
+        </main>
+    );
+}

package/gui/v2/src/app/providers.js

@@ -0,0 +1,18 @@
+"use client";
+
+import { ConfigProvider } from "@/context/config";
+import { FiltersProvider } from "@/context/filters";
+import { MenuProvider } from "@/context/menu";
+import { ThemeProvider } from "@/context/theme";
+
+export function Providers({ children }) {
+    return (
+        <ConfigProvider>
+            <ThemeProvider>
+                <MenuProvider>
+                    <FiltersProvider>{children}</FiltersProvider>
+                </MenuProvider>
+            </ThemeProvider>
+        </ConfigProvider>
+    );
+}

package/gui/v2/src/app/users/components/UserDetails.js

@@ -0,0 +1,38 @@
+export function UserDetails({ user, state, setState }) {
+    return (
+        <div
+            className={`${
+                state ? "translate-x-0" : "translate-x-full"
+            } transition-transform duration-300 ease-in background-ui-5 absolute top-0 right-0 flex flex-col gap-6 w-[360px] h-full border-l border-color-ui-3 p-4`}
+        >
+            <div className="relative">
+                <label className="color-1 text-lg underline">
+                    {user.email}
+                </label>
+                <div className="flex gap-2">
+                    <label className="text-xs">ID: 000</label>
+                    <label className="text-xs color-3">{user.created_at}</label>
+                </div>
+                <button className="absolute top-0 right-0" onClick={() => setState(false)}>
+                    <span className="material-symbols-outlined text-xs">
+                        close
+                    </span>
+                </button>
+            </div>
+            <div className="flex flex-col gap-2">
+                <label>External ID</label>
+                <input className="background-ui-5 px-2.5 py-[9px] rounded border border-color-ui-3" readOnly value={user.external_id} />
+                <label>JWT</label>
+                <textarea className="background-ui-5 px-2.5 py-[9px] rounded border border-color-ui-3 resize-y" rows={3}  readOnly value={user.jwt_token}></textarea>
+            </div>
+            <hr />
+            <div className="flex flex-col gap-2">
+                <label>Full Name: {user.name}</label>
+                <label>First Name: {user.first_name}</label>
+                <label>Last Name: {user.last_name}</label>
+                <label>Slug: {user.slug}</label>
+                <label>Language: {user.language}</label>
+            </div>
+        </div>
+    );
+}