This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git

commit 1689fb5e222e4b5c7935bedc1356f74463346e1f
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Tue May 2 16:21:27 2023 -0400

    Project logs redesign
---
 karavan-app/src/main/webui/package-lock.json       | 371 ++++++++++++++-------
 karavan-app/src/main/webui/package.json            |  20 +-
 karavan-app/src/main/webui/src/index.css           |  15 +-
 .../src/main/webui/src/projects/ProjectEventBus.ts |  16 +-
 .../src/main/webui/src/projects/ProjectLog.tsx     |  67 +++-
 .../src/main/webui/src/projects/ProjectPage.tsx    |   6 +-
 6 files changed, 347 insertions(+), 148 deletions(-)

diff --git a/karavan-app/src/main/webui/package-lock.json 
b/karavan-app/src/main/webui/package-lock.json
index e4742afc..cefbe60a 100644
--- a/karavan-app/src/main/webui/package-lock.json
+++ b/karavan-app/src/main/webui/package-lock.json
@@ -8,16 +8,16 @@
       "name": "karavan",
       "version": "3.20.2-SNAPSHOT",
       "dependencies": {
-        "@monaco-editor/react": "4.4.6",
+        "@monaco-editor/react": "4.5.0",
         "@patternfly/patternfly": "4.224.2",
-        "@patternfly/react-charts": "6.94.18",
-        "@patternfly/react-core": "4.276.6",
-        "@patternfly/react-log-viewer": "^4.87.100",
-        "@patternfly/react-table": "4.112.39",
+        "@patternfly/react-charts": "6.94.19",
+        "@patternfly/react-core": "4.276.8",
+        "@patternfly/react-log-viewer": "5.0.0-alpha.1",
+        "@patternfly/react-table": "4.113.0",
         "@types/js-yaml": "4.0.5",
-        "@types/node": "18.11.18",
+        "@types/node": "18.16.3",
         "@types/uuid": "9.0.1",
-        "axios": "1.3.4",
+        "axios": "1.4.0",
         "buffer": "^6.0.3",
         "dagre": "0.8.5",
         "file-saver": "^2.0.5",
@@ -26,8 +26,8 @@
         "keycloak-js": "^19.0.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "react-scripts": "5.0.0",
-        "rxjs": "7.8.0",
+        "react-scripts": "5.0.1",
+        "rxjs": "7.8.1",
         "uuid": "9.0.0"
       },
       "devDependencies": {
@@ -39,7 +39,7 @@
         "@typescript-eslint/eslint-plugin": "^5.51.0",
         "@typescript-eslint/parser": "^5.51.0",
         "eslint": "^8.33.0",
-        "monaco-editor": "0.36.1",
+        "monaco-editor": "0.38.0",
         "typescript": "^4.9.5"
       }
     },
@@ -2751,9 +2751,9 @@
       "integrity": 
"sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@monaco-editor/loader": {
-      "version": "1.3.2",
-      "resolved": 
"https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz";,
-      "integrity": 
"sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
+      "version": "1.3.3",
+      "resolved": 
"https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz";,
+      "integrity": 
"sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
       "dependencies": {
         "state-local": "^1.0.6"
       },
@@ -2762,12 +2762,11 @@
       }
     },
     "node_modules/@monaco-editor/react": {
-      "version": "4.4.6",
-      "resolved": 
"https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.6.tgz";,
-      "integrity": 
"sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==",
+      "version": "4.5.0",
+      "resolved": 
"https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.0.tgz";,
+      "integrity": 
"sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ==",
       "dependencies": {
-        "@monaco-editor/loader": "^1.3.2",
-        "prop-types": "^15.7.2"
+        "@monaco-editor/loader": "^1.3.3"
       },
       "peerDependencies": {
         "monaco-editor": ">= 0.25.0 < 1",
@@ -2813,9 +2812,9 @@
       "integrity": 
"sha512-HGNV26uyHSIECuhjPg/WGn0mXbAotcs6ODfhAOkfYjIgGylddgiwElxUe1rpEHV5mQJJ2rMn4OdeJIIpzRX61g=="
     },
     "node_modules/@patternfly/react-charts": {
-      "version": "6.94.18",
-      "resolved": 
"https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-6.94.18.tgz";,
-      "integrity": 
"sha512-56WxnZYC3blRX41mW67JaPxJ3YhXViLvwGpEsZrYCccla/rTV8JgKK0gjHnqtzPQiVBfpn+3ewOyNCOR5uRoSw==",
+      "version": "6.94.19",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-6.94.19.tgz";,
+      "integrity": 
"sha512-+yYwXAy/GBH2bTHFzMpdVKc8LUJCCNEqqS7bqovNkNLd0m3FP3q9fKJ22QxNnP9NeFHK6UFa4KfouQAb2fInfQ==",
       "dependencies": {
         "@patternfly/react-styles": "^4.92.6",
         "@patternfly/react-tokens": "^4.94.6",
@@ -2845,9 +2844,9 @@
       }
     },
     "node_modules/@patternfly/react-core": {
-      "version": "4.276.6",
-      "resolved": 
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.276.6.tgz";,
-      "integrity": 
"sha512-G0K+378jf9jw9g+hCAoKnsAe/UGTRspqPeuAYypF2FgNr+dC7dUpc7/VkNhZBVqSJzUWVEK8NyXcqkfi0IemIg==",
+      "version": "4.276.8",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.276.8.tgz";,
+      "integrity": 
"sha512-dn322rEzBeiVztZEuCZMUUittNb8l1hk30h9ZN31FLZLLVtXGlThFNV9ieqOJYA9zrYxYZrHMkTnOxSWVacMZg==",
       "dependencies": {
         "@patternfly/react-icons": "^4.93.6",
         "@patternfly/react-styles": "^4.92.6",
@@ -2872,33 +2871,121 @@
       }
     },
     "node_modules/@patternfly/react-log-viewer": {
-      "version": "4.87.100",
-      "resolved": 
"https://registry.npmjs.org/@patternfly/react-log-viewer/-/react-log-viewer-4.87.100.tgz";,
-      "integrity": 
"sha512-FG+oZDnymvtWNTSSNSQ573NCikpCKr1Iq0Fz5FOSeqW/rLxvuJPqBnlK+A4nUORvxvYc3DhBri2ycCaZMoZfPg==",
+      "version": "5.0.0-alpha.1",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-log-viewer/-/react-log-viewer-5.0.0-alpha.1.tgz";,
+      "integrity": 
"sha512-QHJCqD4muCrYuJsIf9Zs3xAlsUJk5lyyjU9aNE1e+RIFIAlJeagL9MF/bfs50/EwPnZYZtXBsFiyox+kbccW7Q==",
       "dependencies": {
-        "@patternfly/react-core": "^4.273.1",
-        "@patternfly/react-icons": "^4.93.4",
-        "@patternfly/react-styles": "^4.92.4",
+        "@patternfly/react-core": "^5.0.0-alpha.50",
+        "@patternfly/react-icons": "^5.0.0-alpha.7",
+        "@patternfly/react-styles": "^5.0.0-alpha.5",
         "memoize-one": "^5.1.0",
-        "resize-observer-polyfill": "^1.5.1",
-        "tslib": "^2.0.0"
+        "monaco-editor": "^0.33.0"
       },
       "peerDependencies": {
         "react": "^16.8 || ^17 || ^18",
         "react-dom": "^16.8 || ^17 || ^18"
       }
     },
+    
"node_modules/@patternfly/react-log-viewer/node_modules/@patternfly/react-core":
 {
+      "version": "5.0.0-alpha.85",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.0.0-alpha.85.tgz";,
+      "integrity": 
"sha512-wK/NvwLxFYIMyMSNDwFiUARoIPgrE8t0Rs2Fyx9zDnyMMUijSMxZ3s0qb/YcxOyaOdUamMSWxVQtaPbYc7+V9A==",
+      "dependencies": {
+        "@patternfly/react-icons": "^5.0.0-alpha.12",
+        "@patternfly/react-styles": "^5.0.0-alpha.8",
+        "@patternfly/react-tokens": "^5.0.0-alpha.7",
+        "focus-trap": "7.4.0",
+        "react-dropzone": "^14.2.3",
+        "tslib": "^2.5.0"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
+      }
+    },
+    
"node_modules/@patternfly/react-log-viewer/node_modules/@patternfly/react-icons":
 {
+      "version": "5.0.0-alpha.12",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.0.0-alpha.12.tgz";,
+      "integrity": 
"sha512-VwCGlB+JtpsjHJtqCcfy+CpaE+rAY2si7cd4ufJouybkoBPve/6wuTPA3K3eGtgn5cAIr18IF1Pkfkp2lR18sg==",
+      "peerDependencies": {
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
+      }
+    },
+    
"node_modules/@patternfly/react-log-viewer/node_modules/@patternfly/react-styles":
 {
+      "version": "5.0.0-alpha.8",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.0.0-alpha.8.tgz";,
+      "integrity": 
"sha512-V/jhoKp6pz3c+2N1Yi/Ez/EJIHKEHe4SSCzF5ocGpOfaYlQpDGdttKIF0GSWksXlShYZJ5heKfARuESK9XjqRA=="
+    },
+    
"node_modules/@patternfly/react-log-viewer/node_modules/@patternfly/react-tokens":
 {
+      "version": "5.0.0-alpha.7",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.0.0-alpha.7.tgz";,
+      "integrity": 
"sha512-w22cIlzzD7U40Ut8VDqjU1RyOmdwn9Z10qiUSZCzEJY/D5Vwo9bDXbHX23bBUr2rCJUkAwWNaAhWquHFBiSK4w=="
+    },
+    "node_modules/@patternfly/react-log-viewer/node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": 
"https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz";,
+      "integrity": 
"sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@patternfly/react-log-viewer/node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": 
"https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz";,
+      "integrity": 
"sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@patternfly/react-log-viewer/node_modules/focus-trap": {
+      "version": "7.4.0",
+      "resolved": 
"https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.0.tgz";,
+      "integrity": 
"sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg==",
+      "dependencies": {
+        "tabbable": "^6.1.1"
+      }
+    },
+    "node_modules/@patternfly/react-log-viewer/node_modules/monaco-editor": {
+      "version": "0.33.0",
+      "resolved": 
"https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz";,
+      "integrity": 
"sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+    },
+    "node_modules/@patternfly/react-log-viewer/node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": 
"https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz";,
+      "integrity": 
"sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
+    "node_modules/@patternfly/react-log-viewer/node_modules/tabbable": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz";,
+      "integrity": 
"sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg=="
+    },
     "node_modules/@patternfly/react-styles": {
       "version": "4.92.6",
       "resolved": 
"https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.6.tgz";,
       "integrity": 
"sha512-b8uQdEReMyeoMzjpMri845QxqtupY/tIFFYfVeKoB2neno8gkcW1RvDdDe62LF88q45OktCwAe/8A99ker10Iw=="
     },
     "node_modules/@patternfly/react-table": {
-      "version": "4.112.39",
-      "resolved": 
"https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.112.39.tgz";,
-      "integrity": 
"sha512-U+hOMgYlbghGH4M5MX+qt0GkVi/ocrGnxDnm11YiS3CtEGsd6Rr0NeqMmk0uoR46Od4Pr5tKuXxZhPP32sCL/w==",
+      "version": "4.113.0",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.113.0.tgz";,
+      "integrity": 
"sha512-qxa3NWCdYasqQQL1rqEd8DyNa8oWr6HNveNW5YJRakE7imWZhUPG2Nd6Op60+KYX8kbCSl7gwSmgAZAYMBMZkQ==",
       "dependencies": {
-        "@patternfly/react-core": "^4.276.6",
+        "@patternfly/react-core": "^4.276.8",
         "@patternfly/react-icons": "^4.93.6",
         "@patternfly/react-styles": "^4.92.6",
         "@patternfly/react-tokens": "^4.94.6",
@@ -3555,9 +3642,9 @@
       "integrity": 
"sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
     "node_modules/@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz";,
-      "integrity": 
"sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
+      "version": "18.16.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz";,
+      "integrity": 
"sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -4748,9 +4835,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz";,
-      "integrity": 
"sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz";,
+      "integrity": 
"sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -11673,9 +11760,9 @@
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.36.1",
-      "resolved": 
"https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.36.1.tgz";,
-      "integrity": 
"sha512-/CaclMHKQ3A6rnzBzOADfwdSJ25BFoFT0Emxsc4zYVyav5SkK9iA6lEtIeuN/oRYbwPgviJT+t3l+sjFa28jYg=="
+      "version": "0.38.0",
+      "resolved": 
"https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.38.0.tgz";,
+      "integrity": 
"sha512-11Fkh6yzEmwx7O0YoLxeae0qEGFwmyPRlVxpg7oF9czOOCB/iCjdJrG5I67da5WiXK3YJCxoz9TJFE8Tfq/v9A=="
     },
     "node_modules/ms": {
       "version": "2.1.2",
@@ -13823,9 +13910,9 @@
       }
     },
     "node_modules/react-scripts": {
-      "version": "5.0.0",
-      "resolved": 
"https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz";,
-      "integrity": 
"sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==",
+      "version": "5.0.1",
+      "resolved": 
"https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz";,
+      "integrity": 
"sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -13843,7 +13930,7 @@
         "dotenv": "^10.0.0",
         "dotenv-expand": "^5.1.0",
         "eslint": "^8.3.0",
-        "eslint-config-react-app": "^7.0.0",
+        "eslint-config-react-app": "^7.0.1",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
@@ -13860,7 +13947,7 @@
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
         "react-app-polyfill": "^3.0.0",
-        "react-dev-utils": "^12.0.0",
+        "react-dev-utils": "^12.0.1",
         "react-refresh": "^0.11.0",
         "resolve": "^1.20.0",
         "resolve-url-loader": "^4.0.0",
@@ -14070,11 +14157,6 @@
       "resolved": 
"https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz";,
       "integrity": 
"sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": 
"https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz";,
-      "integrity": 
"sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "node_modules/resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz";,
@@ -14296,9 +14378,9 @@
       }
     },
     "node_modules/rxjs": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz";,
-      "integrity": 
"sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz";,
+      "integrity": 
"sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -15483,9 +15565,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz";,
-      "integrity": 
"sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz";,
+      "integrity": 
"sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -18809,20 +18891,19 @@
       "integrity": 
"sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "@monaco-editor/loader": {
-      "version": "1.3.2",
-      "resolved": 
"https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz";,
-      "integrity": 
"sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
+      "version": "1.3.3",
+      "resolved": 
"https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz";,
+      "integrity": 
"sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
       "requires": {
         "state-local": "^1.0.6"
       }
     },
     "@monaco-editor/react": {
-      "version": "4.4.6",
-      "resolved": 
"https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.6.tgz";,
-      "integrity": 
"sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==",
+      "version": "4.5.0",
+      "resolved": 
"https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.0.tgz";,
+      "integrity": 
"sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ==",
       "requires": {
-        "@monaco-editor/loader": "^1.3.2",
-        "prop-types": "^15.7.2"
+        "@monaco-editor/loader": "^1.3.3"
       }
     },
     "@nodelib/fs.scandir": {
@@ -18854,9 +18935,9 @@
       "integrity": 
"sha512-HGNV26uyHSIECuhjPg/WGn0mXbAotcs6ODfhAOkfYjIgGylddgiwElxUe1rpEHV5mQJJ2rMn4OdeJIIpzRX61g=="
     },
     "@patternfly/react-charts": {
-      "version": "6.94.18",
-      "resolved": 
"https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-6.94.18.tgz";,
-      "integrity": 
"sha512-56WxnZYC3blRX41mW67JaPxJ3YhXViLvwGpEsZrYCccla/rTV8JgKK0gjHnqtzPQiVBfpn+3ewOyNCOR5uRoSw==",
+      "version": "6.94.19",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-6.94.19.tgz";,
+      "integrity": 
"sha512-+yYwXAy/GBH2bTHFzMpdVKc8LUJCCNEqqS7bqovNkNLd0m3FP3q9fKJ22QxNnP9NeFHK6UFa4KfouQAb2fInfQ==",
       "requires": {
         "@patternfly/react-styles": "^4.92.6",
         "@patternfly/react-tokens": "^4.94.6",
@@ -18882,9 +18963,9 @@
       }
     },
     "@patternfly/react-core": {
-      "version": "4.276.6",
-      "resolved": 
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.276.6.tgz";,
-      "integrity": 
"sha512-G0K+378jf9jw9g+hCAoKnsAe/UGTRspqPeuAYypF2FgNr+dC7dUpc7/VkNhZBVqSJzUWVEK8NyXcqkfi0IemIg==",
+      "version": "4.276.8",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.276.8.tgz";,
+      "integrity": 
"sha512-dn322rEzBeiVztZEuCZMUUittNb8l1hk30h9ZN31FLZLLVtXGlThFNV9ieqOJYA9zrYxYZrHMkTnOxSWVacMZg==",
       "requires": {
         "@patternfly/react-icons": "^4.93.6",
         "@patternfly/react-styles": "^4.92.6",
@@ -18902,16 +18983,87 @@
       "requires": {}
     },
     "@patternfly/react-log-viewer": {
-      "version": "4.87.100",
-      "resolved": 
"https://registry.npmjs.org/@patternfly/react-log-viewer/-/react-log-viewer-4.87.100.tgz";,
-      "integrity": 
"sha512-FG+oZDnymvtWNTSSNSQ573NCikpCKr1Iq0Fz5FOSeqW/rLxvuJPqBnlK+A4nUORvxvYc3DhBri2ycCaZMoZfPg==",
+      "version": "5.0.0-alpha.1",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-log-viewer/-/react-log-viewer-5.0.0-alpha.1.tgz";,
+      "integrity": 
"sha512-QHJCqD4muCrYuJsIf9Zs3xAlsUJk5lyyjU9aNE1e+RIFIAlJeagL9MF/bfs50/EwPnZYZtXBsFiyox+kbccW7Q==",
       "requires": {
-        "@patternfly/react-core": "^4.273.1",
-        "@patternfly/react-icons": "^4.93.4",
-        "@patternfly/react-styles": "^4.92.4",
+        "@patternfly/react-core": "^5.0.0-alpha.50",
+        "@patternfly/react-icons": "^5.0.0-alpha.7",
+        "@patternfly/react-styles": "^5.0.0-alpha.5",
         "memoize-one": "^5.1.0",
-        "resize-observer-polyfill": "^1.5.1",
-        "tslib": "^2.0.0"
+        "monaco-editor": "^0.33.0"
+      },
+      "dependencies": {
+        "@patternfly/react-core": {
+          "version": "5.0.0-alpha.85",
+          "resolved": 
"https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.0.0-alpha.85.tgz";,
+          "integrity": 
"sha512-wK/NvwLxFYIMyMSNDwFiUARoIPgrE8t0Rs2Fyx9zDnyMMUijSMxZ3s0qb/YcxOyaOdUamMSWxVQtaPbYc7+V9A==",
+          "requires": {
+            "@patternfly/react-icons": "^5.0.0-alpha.12",
+            "@patternfly/react-styles": "^5.0.0-alpha.8",
+            "@patternfly/react-tokens": "^5.0.0-alpha.7",
+            "focus-trap": "7.4.0",
+            "react-dropzone": "^14.2.3",
+            "tslib": "^2.5.0"
+          }
+        },
+        "@patternfly/react-icons": {
+          "version": "5.0.0-alpha.12",
+          "resolved": 
"https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.0.0-alpha.12.tgz";,
+          "integrity": 
"sha512-VwCGlB+JtpsjHJtqCcfy+CpaE+rAY2si7cd4ufJouybkoBPve/6wuTPA3K3eGtgn5cAIr18IF1Pkfkp2lR18sg==",
+          "requires": {}
+        },
+        "@patternfly/react-styles": {
+          "version": "5.0.0-alpha.8",
+          "resolved": 
"https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.0.0-alpha.8.tgz";,
+          "integrity": 
"sha512-V/jhoKp6pz3c+2N1Yi/Ez/EJIHKEHe4SSCzF5ocGpOfaYlQpDGdttKIF0GSWksXlShYZJ5heKfARuESK9XjqRA=="
+        },
+        "@patternfly/react-tokens": {
+          "version": "5.0.0-alpha.7",
+          "resolved": 
"https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.0.0-alpha.7.tgz";,
+          "integrity": 
"sha512-w22cIlzzD7U40Ut8VDqjU1RyOmdwn9Z10qiUSZCzEJY/D5Vwo9bDXbHX23bBUr2rCJUkAwWNaAhWquHFBiSK4w=="
+        },
+        "attr-accept": {
+          "version": "2.2.2",
+          "resolved": 
"https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz";,
+          "integrity": 
"sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+        },
+        "file-selector": {
+          "version": "0.6.0",
+          "resolved": 
"https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz";,
+          "integrity": 
"sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+          "requires": {
+            "tslib": "^2.4.0"
+          }
+        },
+        "focus-trap": {
+          "version": "7.4.0",
+          "resolved": 
"https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.0.tgz";,
+          "integrity": 
"sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg==",
+          "requires": {
+            "tabbable": "^6.1.1"
+          }
+        },
+        "monaco-editor": {
+          "version": "0.33.0",
+          "resolved": 
"https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz";,
+          "integrity": 
"sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
+        },
+        "react-dropzone": {
+          "version": "14.2.3",
+          "resolved": 
"https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz";,
+          "integrity": 
"sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+          "requires": {
+            "attr-accept": "^2.2.2",
+            "file-selector": "^0.6.0",
+            "prop-types": "^15.8.1"
+          }
+        },
+        "tabbable": {
+          "version": "6.1.1",
+          "resolved": 
"https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz";,
+          "integrity": 
"sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg=="
+        }
       }
     },
     "@patternfly/react-styles": {
@@ -18920,11 +19072,11 @@
       "integrity": 
"sha512-b8uQdEReMyeoMzjpMri845QxqtupY/tIFFYfVeKoB2neno8gkcW1RvDdDe62LF88q45OktCwAe/8A99ker10Iw=="
     },
     "@patternfly/react-table": {
-      "version": "4.112.39",
-      "resolved": 
"https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.112.39.tgz";,
-      "integrity": 
"sha512-U+hOMgYlbghGH4M5MX+qt0GkVi/ocrGnxDnm11YiS3CtEGsd6Rr0NeqMmk0uoR46Od4Pr5tKuXxZhPP32sCL/w==",
+      "version": "4.113.0",
+      "resolved": 
"https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.113.0.tgz";,
+      "integrity": 
"sha512-qxa3NWCdYasqQQL1rqEd8DyNa8oWr6HNveNW5YJRakE7imWZhUPG2Nd6Op60+KYX8kbCSl7gwSmgAZAYMBMZkQ==",
       "requires": {
-        "@patternfly/react-core": "^4.276.6",
+        "@patternfly/react-core": "^4.276.8",
         "@patternfly/react-icons": "^4.93.6",
         "@patternfly/react-styles": "^4.92.6",
         "@patternfly/react-tokens": "^4.94.6",
@@ -19412,9 +19564,9 @@
       "integrity": 
"sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
     "@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz";,
-      "integrity": 
"sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
+      "version": "18.16.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz";,
+      "integrity": 
"sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -20261,9 +20413,9 @@
       "integrity": 
"sha512-btWy2rze3NnxSSxb7LtNhPYYFrRoFBfjiGzmSc/5Hu47wApO2KNXjP/w7Nv2Uz/Fyr/pfEiwOkcXhDxu0jz5FA=="
     },
     "axios": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz";,
-      "integrity": 
"sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz";,
+      "integrity": 
"sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "requires": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -25293,9 +25445,9 @@
       }
     },
     "monaco-editor": {
-      "version": "0.36.1",
-      "resolved": 
"https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.36.1.tgz";,
-      "integrity": 
"sha512-/CaclMHKQ3A6rnzBzOADfwdSJ25BFoFT0Emxsc4zYVyav5SkK9iA6lEtIeuN/oRYbwPgviJT+t3l+sjFa28jYg=="
+      "version": "0.38.0",
+      "resolved": 
"https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.38.0.tgz";,
+      "integrity": 
"sha512-11Fkh6yzEmwx7O0YoLxeae0qEGFwmyPRlVxpg7oF9czOOCB/iCjdJrG5I67da5WiXK3YJCxoz9TJFE8Tfq/v9A=="
     },
     "ms": {
       "version": "2.1.2",
@@ -26720,9 +26872,9 @@
       "integrity": 
"sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-scripts": {
-      "version": "5.0.0",
-      "resolved": 
"https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz";,
-      "integrity": 
"sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==",
+      "version": "5.0.1",
+      "resolved": 
"https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz";,
+      "integrity": 
"sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
       "requires": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -26740,7 +26892,7 @@
         "dotenv": "^10.0.0",
         "dotenv-expand": "^5.1.0",
         "eslint": "^8.3.0",
-        "eslint-config-react-app": "^7.0.0",
+        "eslint-config-react-app": "^7.0.1",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
@@ -26758,7 +26910,7 @@
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
         "react-app-polyfill": "^3.0.0",
-        "react-dev-utils": "^12.0.0",
+        "react-dev-utils": "^12.0.1",
         "react-refresh": "^0.11.0",
         "resolve": "^1.20.0",
         "resolve-url-loader": "^4.0.0",
@@ -26910,11 +27062,6 @@
       "resolved": 
"https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz";,
       "integrity": 
"sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": 
"https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz";,
-      "integrity": 
"sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz";,
@@ -27055,9 +27202,9 @@
       }
     },
     "rxjs": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz";,
-      "integrity": 
"sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz";,
+      "integrity": 
"sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
       "requires": {
         "tslib": "^2.1.0"
       }
@@ -27960,9 +28107,9 @@
       }
     },
     "tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz";,
-      "integrity": 
"sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz";,
+      "integrity": 
"sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "tsutils": {
       "version": "3.21.0",
diff --git a/karavan-app/src/main/webui/package.json 
b/karavan-app/src/main/webui/package.json
index 5e9c238c..638c27ba 100644
--- a/karavan-app/src/main/webui/package.json
+++ b/karavan-app/src/main/webui/package.json
@@ -26,16 +26,16 @@
     ]
   },
   "dependencies": {
-    "@monaco-editor/react": "4.4.6",
+    "@monaco-editor/react": "4.5.0",
     "@patternfly/patternfly": "4.224.2",
-    "@patternfly/react-charts": "6.94.18",
-    "@patternfly/react-core": "4.276.6",
-    "@patternfly/react-log-viewer": "^4.87.100",
-    "@patternfly/react-table": "4.112.39",
+    "@patternfly/react-charts": "6.94.19",
+    "@patternfly/react-core": "4.276.8",
+    "@patternfly/react-log-viewer": "5.0.0-alpha.1",
+    "@patternfly/react-table": "4.113.0",
     "@types/js-yaml": "4.0.5",
-    "@types/node": "18.11.18",
+    "@types/node": "18.16.3",
     "@types/uuid": "9.0.1",
-    "axios": "1.3.4",
+    "axios": "1.4.0",
     "buffer": "^6.0.3",
     "dagre": "0.8.5",
     "file-saver": "^2.0.5",
@@ -44,8 +44,8 @@
     "keycloak-js": "^19.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-scripts": "5.0.0",
-    "rxjs": "7.8.0",
+    "react-scripts": "5.0.1",
+    "rxjs": "7.8.1",
     "uuid": "9.0.0"
   },
   "devDependencies": {
@@ -57,7 +57,7 @@
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
     "eslint": "^8.33.0",
-    "monaco-editor": "0.36.1",
+    "monaco-editor": "0.38.0",
     "typescript": "^4.9.5"
   }
 }
diff --git a/karavan-app/src/main/webui/src/index.css 
b/karavan-app/src/main/webui/src/index.css
index 55de584e..f947f243 100644
--- a/karavan-app/src/main/webui/src/index.css
+++ b/karavan-app/src/main/webui/src/index.css
@@ -156,6 +156,7 @@
   bottom: 0;
   right: 0;
   width: 100%;
+  z-index: 200;
 }
 
 .karavan .project-page .project-log .buttons {
@@ -166,10 +167,22 @@
   padding-right: 6px;
 }
 
-.karavan .project-page .project-log .buttons button {
+.karavan .project-page .project-log .buttons button,
+.karavan .project-page .project-log .buttons .pf-c-check {
   padding: 8px;
 }
 
+.karavan .project-page .project-log .buttons .pf-c-check .pf-c-check__label{
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0;
+}
+
+.karavan .project-page .project-log .pf-c-log-viewer__scroll-container {
+  height: 100% !important;
+}
+
+
 .karavan .project-page .project-log .pf-c-log-viewer__text {
   font-size: 11px;
 }
diff --git a/karavan-app/src/main/webui/src/projects/ProjectEventBus.ts 
b/karavan-app/src/main/webui/src/projects/ProjectEventBus.ts
index e36a0d5e..8f6399c3 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectEventBus.ts
+++ b/karavan-app/src/main/webui/src/projects/ProjectEventBus.ts
@@ -19,7 +19,19 @@ import {Project} from "./ProjectModels";
 
 const currentProject = new Subject<Project>();
 const currentFile = new Subject<string>();
-const showLog = new Subject<string>();
+const showLog = new Subject<ShowLogCommand>();
+
+export class ShowLogCommand {
+    type: 'container' | 'pipeline'
+    name: string
+    environment: string
+
+    constructor(type: "container" | "pipeline", name: string, environment: 
string) {
+        this.type = type;
+        this.name = name;
+        this.environment = environment;
+    }
+}
 
 
 export const ProjectEventBus = {
@@ -30,6 +42,6 @@ export const ProjectEventBus = {
     selectProjectFile: (fileName: string) => currentFile.next(fileName),
     onSelectProjectFile: () => currentFile.asObservable(),
 
-    showLog: (type: 'container' | 'pipeline', name: string, environment: 
string) => showLog.next(name),
+    showLog: (type: 'container' | 'pipeline', name: string, environment: 
string) => showLog.next(new ShowLogCommand(type, name, environment)),
     onShowLog: () => showLog.asObservable(),
 }
diff --git a/karavan-app/src/main/webui/src/projects/ProjectLog.tsx 
b/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
index c96f676e..1646663d 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
-import {
-    CodeBlockAction, CodeBlockCode, CodeBlock, Button, Skeleton, Banner, 
Divider
-} from '@patternfly/react-core';
+import {Button, Checkbox, PageSection, Tooltip, TooltipPosition} from 
'@patternfly/react-core';
 import '../designer/karavan.css';
 import CloseIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
+import ScrollIcon from '@patternfly/react-icons/dist/esm/icons/scroll-icon';
+import CollapseIcon from 
'@patternfly/react-icons/dist/esm/icons/compress-icon';
 import {LogViewer} from '@patternfly/react-log-viewer';
 import {Subscription} from "rxjs";
-import {ProjectEventBus} from "./ProjectEventBus";
-import {Project} from "./ProjectModels";
-import {KaravanApi} from "../api/KaravanApi";
-import {SsoApi} from "../api/SsoApi";
+import {ProjectEventBus, ShowLogCommand} from "./ProjectEventBus";
+import {findDOMNode} from "react-dom";
 
 interface Props {
 
@@ -18,18 +16,24 @@ interface Props {
 
 interface State {
     showLog: boolean,
+    height?: number | string,
+    logViewerRef: any,
+    isTextWrapped: boolean
 }
 
 export class ProjectLog extends React.Component<Props, State> {
 
     public state: State = {
-        showLog: false
+        showLog: false,
+        height: "30%",
+        logViewerRef: React.createRef(),
+        isTextWrapped: false
     }
 
     sub?: Subscription;
 
     componentDidMount() {
-        this.sub = ProjectEventBus.onShowLog()?.subscribe((logName: String) => 
{
+        this.sub = ProjectEventBus.onShowLog()?.subscribe((log: 
ShowLogCommand) => {
             this.setState({showLog: true});
         });
     }
@@ -38,6 +42,14 @@ export class ProjectLog extends React.Component<Props, 
State> {
         this.sub?.unsubscribe();
     }
 
+    componentDidUpdate = (prevProps: Readonly<Props>, prevState: 
Readonly<State>, snapshot?: any) => {
+        if (this.state.height === "100%" && prevState.height !== "100%") {
+            const element = findDOMNode(this.state.logViewerRef.current)
+            console.log("change", element)
+            console.log("change", this.state.logViewerRef.current)
+        }
+    }
+
     code = "apiVersion: helm.openshift.io/v1beta1/\n" +
         "kind: HelmChartRepository\n" +
         "metadata:\n" +
@@ -113,19 +125,38 @@ export class ProjectLog extends React.Component<Props, 
State> {
         "url: 
https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs";
 
     getButtons() {
+        const {height, isTextWrapped, logViewerRef} = this.state;
         return (<div className="buttons">
-            <Button variant="plain" onClick={event => {
-            }} icon={<ExpandIcon/>}/>
-            <Button variant="plain" onClick={() =>this.setState({showLog: 
false})} icon={<CloseIcon/>}/>
+            <Checkbox label="Wrap text" aria-label="wrap text checkbox" 
isChecked={isTextWrapped} id="wrap-text-checkbox"
+                      onChange={checked => this.setState({isTextWrapped: 
checked})} />
+            <Tooltip content={"Scroll to bottom"} 
position={TooltipPosition.bottom}>
+                <Button variant="plain" onClick={() => 
logViewerRef.current.scrollToBottom()} icon={<ScrollIcon/>}/>
+            </Tooltip>
+            <Tooltip content={height === "100%" ? "Collapse": "Expand"} 
position={TooltipPosition.bottom}>
+                <Button variant="plain" onClick={() => {
+                    const h = height === "100%" ? "30%" : "100%";
+                    this.setState({height: h, showLog: true});
+                }} icon={height === "100%" ? <CollapseIcon/> : <ExpandIcon/>}/>
+            </Tooltip>
+            <Button variant="plain" onClick={() => this.setState({height: 
"30%", showLog: false})} icon={<CloseIcon/>}/>
         </div>);
     }
 
     render() {
-        const {showLog} = this.state;
-        return (showLog ? <LogViewer hasLineNumbers={false}
-                           header={this.getButtons()}
-                           height={300}
-                           data={this.code}
-                           theme={'dark'}/> : <></>);
+        const {showLog, height, logViewerRef, isTextWrapped} = this.state;
+        console.log(this.state)
+        return (showLog ?
+            <PageSection className="project-log" padding={{default: 
"noPadding"}} style={{height: height}}>
+                <LogViewer
+                    isTextWrapped={isTextWrapped}
+                    innerRef={logViewerRef}
+                    hasLineNumbers={false}
+                    loadingContent={"Loading..."}
+                    header={this.getButtons()}
+                    height={"100vh"}
+                    
data={this.code.concat(this.code).concat(this.code).concat(this.code)}
+                    theme={'dark'}/>
+            </PageSection>
+            : <></>);
     }
 }
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx 
b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
index 199233c0..bc376c72 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
@@ -435,11 +435,7 @@ export class ProjectPage extends React.Component<Props, 
State> {
         const {tab, files} = this.state;
         const {project} = this.props;
         const isBuildIn = this.isBuildIn();
-        return (
-            <PageSection className="project-log" padding={{default: 
"noPadding"}}>
-                <ProjectLog/>
-            </PageSection>
-        )
+        return (<ProjectLog/>)
     }
 
     getFilePanel() {


Reply via email to