Cp use outputsize (#537)

* fix(output): Use output size and query output closer to modal * fix(build): Build UI
spellshift · Feb 3, 2024 · b046288 · b046288
1 parent 27f8b4d
commit b046288
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 33 deletions.
diff --git a/tavern/internal/www/build/asset-manifest.json b/tavern/internal/www/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.4d921cd0.css",
-    "main.js": "/static/js/main.12503e69.js",
+    "main.js": "/static/js/main.11e06a01.js",
     "react-syntax-highlighter/refractor-core-import.js": "/static/js/react-syntax-highlighter/refractor-core-import.d0cd1e85.chunk.js",
     "react-syntax-highlighter_languages_refractor_abap.js": "/static/js/react-syntax-highlighter_languages_refractor_abap.a2bf84e3.chunk.js",
     "react-syntax-highlighter_languages_refractor_actionscript.js": "/static/js/react-syntax-highlighter_languages_refractor_actionscript.fff5a604.chunk.js",
@@ -158,7 +158,7 @@
     "static/media/eldrich.png": "/static/media/eldrich.a80c74e8249d2461e174.png",
     "index.html": "/index.html",
     "main.4d921cd0.css.map": "/static/css/main.4d921cd0.css.map",
-    "main.12503e69.js.map": "/static/js/main.12503e69.js.map",
+    "main.11e06a01.js.map": "/static/js/main.11e06a01.js.map",
     "refractor-core-import.d0cd1e85.chunk.js.map": "/static/js/react-syntax-highlighter/refractor-core-import.d0cd1e85.chunk.js.map",
     "react-syntax-highlighter_languages_refractor_abap.a2bf84e3.chunk.js.map": "/static/js/react-syntax-highlighter_languages_refractor_abap.a2bf84e3.chunk.js.map",
     "react-syntax-highlighter_languages_refractor_actionscript.fff5a604.chunk.js.map": "/static/js/react-syntax-highlighter_languages_refractor_actionscript.fff5a604.chunk.js.map",
@@ -315,6 +315,6 @@
   },
   "entrypoints": [
     "static/css/main.4d921cd0.css",
-    "static/js/main.12503e69.js"
+    "static/js/main.11e06a01.js"
   ]
 }
diff --git a/tavern/internal/www/build/index.html b/tavern/internal/www/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Tavern - Red Team Engagement Platform</title><script defer="defer" src="/static/js/main.12503e69.js"></script><link href="/static/css/main.4d921cd0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Tavern - Red Team Engagement Platform</title><script defer="defer" src="/static/js/main.11e06a01.js"></script><link href="/static/css/main.4d921cd0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/...rnal/www/build/static/js/main.12503e69.js → ...rnal/www/build/static/js/main.11e06a01.js b/...rnal/www/build/static/js/main.12503e69.js → ...rnal/www/build/static/js/main.11e06a01.js
diff --git a/...ld/static/js/main.12503e69.js.LICENSE.txt → ...ld/static/js/main.11e06a01.js.LICENSE.txt b/...ld/static/js/main.12503e69.js.LICENSE.txt → ...ld/static/js/main.11e06a01.js.LICENSE.txt
diff --git a/.../www/build/static/js/main.12503e69.js.map → .../www/build/static/js/main.11e06a01.js.map b/.../www/build/static/js/main.12503e69.js.map → .../www/build/static/js/main.11e06a01.js.map
diff --git a/tavern/internal/www/src/components/TaskTable.tsx b/tavern/internal/www/src/components/TaskTable.tsx
@@ -62,9 +62,9 @@ const TaskTable = (props: Props) => {
             cell: (cellData: any) => {
                 const taskData = cellData.getValue();
                 const statusTime = new Date(taskData?.lastModifiedAt)
-                const hasOutput = taskData?.output.length > 0;
+                const hasOutput = taskData?.outputSize > 0;
                 return (
-                    <Tooltip label={taskData?.output.length > 500 ? "Click to see output" : taskData?.output} aria-label='Task output'>
+                    <Tooltip label="Click to see output" aria-label='Task output'>
                         <div className="flex flex-col gap-1">
                             <div className="flex flex-row gap-2 flex-wrap">
                                 <TaskStatusBadge task={taskData} />

diff --git a/tavern/internal/www/src/features/task-output/OutputWrapper.tsx b/tavern/internal/www/src/features/task-output/OutputWrapper.tsx
@@ -0,0 +1,37 @@
+import { useQuery } from "@apollo/client";
+import { CopyBlock, tomorrow } from "react-code-blocks";
+import { EmptyState, EmptyStateType } from "../../components/tavern-base-ui/EmptyState";
+import { GET_TASK_OUTPUT_QUERY } from "../../utils/queries";
+
+const OutputWrapper = ({ id }: { id: string }) => {
+    const PARAMS = {
+        variables: {
+            "where": {
+                "id": id
+            }
+        }
+    }
+    const { loading, error, data } = useQuery(GET_TASK_OUTPUT_QUERY, PARAMS);
+    const output = (data?.tasks?.edges?.length > 0 && data?.tasks?.edges[0]?.node?.output) ? data?.tasks?.edges[0]?.node?.output : "No output available";
+    return (
+        <div className="flex flex-col gap-2">
+            <h3 className="text-2xl text-gray-800">Output</h3>
+            {loading ? (
+                <EmptyState type={EmptyStateType.loading} label="Loading tasks..." />
+            ) : error ? (
+                <EmptyState type={EmptyStateType.error} label="Error loading tasks..." />
+            ) : (
+                <div className="bg-gray-200 rounded-md p-0.5 ">
+                    <CopyBlock
+                        text={output}
+                        language={""}
+                        showLineNumbers={false}
+                        theme={tomorrow}
+                        codeBlock
+                    />
+                </div>
+            )}
+        </div>
+    );
+}
+export default OutputWrapper;
diff --git a/...src/components/task-output/TaskOutput.tsx → ...w/src/features/task-output/TaskOutput.tsx b/...src/components/task-output/TaskOutput.tsx → ...w/src/features/task-output/TaskOutput.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { XMarkIcon } from '@heroicons/react/24/outline'
-import { CopyBlock, tomorrow } from "react-code-blocks";
-import TaskStatusBadge from "../TaskStatusBadge";
-import BeaconTile from "../BeaconTile";
-import TomeAccordion from "../TomeAccordion";
+import TaskStatusBadge from "../../components/TaskStatusBadge";
+import BeaconTile from "../../components/BeaconTile";
+import TomeAccordion from "../../components/TomeAccordion";
 import { Image } from "@chakra-ui/react";
+import OutputWrapper from "./OutputWrapper";
 
 type Props = {
   isOpen: boolean,
@@ -16,6 +16,7 @@ type Props = {
 
 export const TaskOutput = (props: Props) => {
   const { isOpen, setOpen, selectedTask } = props;
+  console.log(selectedTask);
   const createdTime = new Date(selectedTask?.createdAt || "");
   const finishTime = new Date(selectedTask?.execFinishedAt || "");
   const startTime = new Date(selectedTask?.execStartedAt || "");
@@ -113,18 +114,7 @@ export const TaskOutput = (props: Props) => {
                           </div>
                         </div>
                       )}
-                      <div className="flex flex-col gap-2">
-                        <h3 className="text-2xl text-gray-800">Output</h3>
-                        <div className="bg-gray-200 rounded-md p-0.5 ">
-                          <CopyBlock
-                            text={selectedTask?.output ? selectedTask?.output : "No output available"}
-                            language={""}
-                            showLineNumbers={false}
-                            theme={tomorrow}
-                            codeBlock
-                          />
-                        </div>
-                      </div>
+                      {selectedTask && selectedTask?.id && <OutputWrapper id={selectedTask.id} />}
                     </div>
                   </div>
                 </Dialog.Panel>

diff --git a/.../www/src/components/task-output/index.tsx → ...al/www/src/features/task-output/index.tsx b/.../www/src/components/task-output/index.tsx → ...al/www/src/features/task-output/index.tsx
diff --git a/tavern/internal/www/src/index.tsx b/tavern/internal/www/src/index.tsx
@@ -11,14 +11,14 @@ import { relayStylePagination } from "@apollo/client/utilities";
 const container = document.getElementById("root")
 if (!container) throw new Error('Failed to find the root element');
 const root = ReactDOM.createRoot(container);
-const REACT_APP_API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT ;
+const REACT_APP_API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;
 
 
 const cache = new InMemoryCache({
   typePolicies: {
     Query: {
       fields: {
-        tasks: relayStylePagination(),
+        tasks: relayStylePagination(["where"]),
       },
     },
   },
@@ -47,4 +47,3 @@ serviceWorker.unregister()
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals()
-
diff --git a/tavern/internal/www/src/pages/host-details/components/HostTasks.tsx b/tavern/internal/www/src/pages/host-details/components/HostTasks.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { TaskOutput } from "../../../components/task-output";
+import { TaskOutput } from "../../../features/task-output";
 import TaskTable from "../../../components/TaskTable";
 import { EmptyState, EmptyStateType } from "../../../components/tavern-base-ui/EmptyState";
 import TablePagination from "../../../components/tavern-base-ui/TablePagination";
@@ -15,7 +15,6 @@ const HostTasks = () => {
         loading: taskLoading,
         error: taskError,
         page,
-        filtersSelected,
         setPage,
         setSearch,
         updateTaskList

diff --git a/tavern/internal/www/src/pages/tasks/Tasks.tsx b/tavern/internal/www/src/pages/tasks/Tasks.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { PageWrapper } from "../../components/page-wrapper";
-import { TaskOutput } from "../../components/task-output";
+import { TaskOutput } from "../../features/task-output";
 import TaskTable from "../../components/TaskTable";
 import { EmptyState, EmptyStateType } from "../../components/tavern-base-ui/EmptyState";
 import TablePagination from "../../components/tavern-base-ui/TablePagination";

diff --git a/tavern/internal/www/src/utils/queries.ts b/tavern/internal/www/src/utils/queries.ts
@@ -79,7 +79,7 @@ export const GET_TASK_QUERY = gql`
                     node{
                         id
                         lastModifiedAt
-                        output
+                        outputSize
                         execStartedAt
                         execFinishedAt
                         createdAt
@@ -123,6 +123,18 @@ export const GET_TASK_QUERY = gql`
     }
 `;
 
+export const GET_TASK_OUTPUT_QUERY = gql`
+    query GetOutputForTask($where: TaskWhereInput) {
+            tasks(where: $where, ){
+    				edges{
+                        node{
+                            id
+                            output
+                        }
+            }
+    }
+}`
+
 export const GET_SEARCH_FILTERS = gql`
     query GetSearchFilters($groupTag: TagWhereInput, $serviceTag: TagWhereInput){
         groupTags:tags(where: $groupTag) {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Tavern - Red Team Engagement Platform</title><script defer="defer" src="/static/js/main.12503e69.js"></script><link href="/static/css/main.4d921cd0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Tavern - Red Team Engagement Platform</title><script defer="defer" src="/static/js/main.11e06a01.js"></script><link href="/static/css/main.4d921cd0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>