Add table row view. Closes #636.

ui/dashboard/package.json

@@ -46,6 +46,7 @@
     "react-router-dom": "6.28.0",
     "react-router-hash-link": "2.4.3",
     "react-select": "5.8.3",
+    "react-split-pane": "0.1.92",
     "react-syntax-highlighter": "15.6.1",
     "react-time-picker": "7.0.0",
     "react-use-websocket": "4.11.1",

ui/dashboard/src/components/CodeBlock/index.tsx

@@ -2,6 +2,7 @@ import CopyToClipboard, { CopyToClipboardProvider } from "../CopyToClipboard";
 import hcl from "react-syntax-highlighter/dist/esm/languages/prism/hcl";
 import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
 import sql from "react-syntax-highlighter/dist/esm/languages/prism/sql";
+import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
 import { classNames } from "@powerpipe/utils/styles";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import { ThemeNames } from "@powerpipe/hooks/useTheme";
@@ -15,11 +16,12 @@ import {
 SyntaxHighlighter.registerLanguage("hcl", hcl);
 SyntaxHighlighter.registerLanguage("json", json);
 SyntaxHighlighter.registerLanguage("sql", sql);
+SyntaxHighlighter.registerLanguage("yaml", yaml);
 
 type CodeBlockProps = {
   children: string;
   copyToClipboard?: boolean;
-  language?: "hcl" | "json" | "sql";
+  language?: "hcl" | "json" | "sql" | "yaml";
   style?: any;
 };
 

ui/dashboard/src/components/CopyToClipboard/index.tsx

@@ -1,16 +1,13 @@
 import copy from "copy-to-clipboard";
 import { classNames } from "@powerpipe/utils/styles";
-import {
-  CopyToClipboardIcon,
-  CopyToClipboardSuccessIcon,
-} from "@powerpipe/constants/icons";
 import {
   createContext,
   useCallback,
   useContext,
   useEffect,
   useState,
 } from "react";
+import Icon from "@powerpipe/components/Icon";
 
 type ICopyToClipboardContext = {
   doCopy: boolean;
@@ -78,13 +75,17 @@ const CopyToClipboard = ({
   return (
     <>
       {!copySuccess && (
-        <CopyToClipboardIcon
-          className={classNames("h-6 w-6 cursor-pointer", className)}
-          onClick={handleCopy}
+        <Icon
+          icon="content_copy"
+          className={classNames("h-5 w-5 cursor-pointer", className)}
+          onClick={(e) => handleCopy(e)}
         />
       )}
       {copySuccess && (
-        <CopyToClipboardSuccessIcon className="h-6 w-6 text-ok" />
+        <Icon
+          icon="materialsymbols-solid:content_copy"
+          className={classNames("h-5 w-5 text-ok", className)}
+        />
       )}
     </>
   );

ui/dashboard/src/components/Icon/index.tsx

@@ -4,7 +4,7 @@ import useDashboardIcons from "@powerpipe/hooks/useDashboardIcons";
 type IconProps = {
   className?: string;
   icon: string;
-  onClick?: () => void;
+  onClick?: (e: any) => void;
   style?: any;
   title?: string;
 };