[Terminal Output] tty toggle now shows number of bytes in tooltip, if no output we disa… (#141174)

* tty toggle now shows number of bytes in tooltip, if no output we disable button (instead of hide)

* fixed tests

Co-authored-by: Karl Godard <karlgodard@elastic.co>

package.json

@@ -416,6 +416,7 @@
     "@turf/distance": "6.0.1",
     "@turf/helpers": "6.0.1",
     "@turf/length": "^6.0.2",
+    "@types/byte-size": "^8.1.0",
     "JSONStream": "1.3.5",
     "abort-controller": "^3.0.0",
     "antlr4ts": "^0.5.0-alpha.3",
@@ -424,6 +425,7 @@
     "base64-js": "^1.3.1",
     "bitmap-sdf": "^1.0.3",
     "brace": "0.11.1",
+    "byte-size": "^8.1.0",
     "canvg": "^3.0.9",
     "cbor-x": "^1.3.3",
     "chalk": "^4.1.0",
@@ -635,7 +637,6 @@
     "whatwg-fetch": "^3.0.0",
     "xml2js": "^0.4.22",
     "xterm": "^4.18.0",
-    "xterm-addon-fit": "^0.5.0",
     "yauzl": "^2.10.0",
     "yazl": "^2.5.1"
   },

packages/kbn-test/jest-preset.js

@@ -127,7 +127,7 @@ module.exports = {
   transformIgnorePatterns: [
     // ignore all node_modules except monaco-editor and react-monaco-editor which requires babel transforms to handle dynamic import()
     // since ESM modules are not natively supported in Jest yet (https://github.com/facebook/jest/issues/4842)
-    '[/\\\\]node_modules(?![\\/\\\\](monaco-editor|react-monaco-editor|d3-interpolate|d3-color))[/\\\\].+\\.js$',
+    '[/\\\\]node_modules(?![\\/\\\\](byte-size|monaco-editor|react-monaco-editor|d3-interpolate|d3-color))[/\\\\].+\\.js$',
     'packages/kbn-pm/dist/index.js',
   ],
 

renovate.json

@@ -216,6 +216,15 @@
       "labels": ["release_note:skip", "backport:skip"],
       "enabled": true,
       "prCreation": "immediate"
+    },
+    {
+      "groupName": "TTY Output",
+      "matchPackageNames": ["xterm", "byte-size", "@types/byte-size"],
+      "reviewers": ["team:awp-viz"],
+      "matchBaseBranches": ["main"],
+      "labels": ["Team: AWP: Visualization", "release_note:skip", "backport:skip"],
+      "enabled": true,
+      "prCreation": "immediate"
     }
   ]
 }

x-pack/plugins/session_view/public/components/session_view/index.test.tsx

@@ -189,7 +189,7 @@ describe('SessionView component', () => {
         });
       });
 
-      it('should NOT show tty player button, if session has no output', async () => {
+      it('should show tty player button as disabled, if session has no output', async () => {
         mockedApi.mockImplementation(async (options) => {
           // for some reason the typescript interface for options says its an object with a field called path.
           // in reality options is a string (which equals the path...)
@@ -207,7 +207,9 @@ describe('SessionView component', () => {
         render();
 
         await waitFor(() => {
-          expect(renderResult.queryByTestId('sessionView:TTYPlayerToggle')).toBeFalsy();
+          expect(renderResult.queryByTestId('sessionView:TTYPlayerToggle')).toHaveClass(
+            'euiButtonIcon-isDisabled'
+          );
         });
       });
     });

x-pack/plugins/session_view/public/components/session_view/index.tsx

@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
+import byteSize from 'byte-size';
 import { SectionLoading } from '../../shared_imports';
 import { ProcessTree } from '../process_tree';
 import {
@@ -141,6 +142,11 @@ export const SessionView = ({
   const { data: totalTTYOutputBytes, refetch: refetchTotalTTYOutput } =
     useFetchGetTotalIOBytes(sessionEntityId);
   const hasTTYOutput = !!totalTTYOutputBytes?.total;
+  const bytesOfOutput = useMemo(() => {
+    const { unit, value } = byteSize(totalTTYOutputBytes?.total || 0);
+
+    return { unit, value };
+  }, [totalTTYOutputBytes?.total]);
 
   const handleRefresh = useCallback(() => {
     refetch({ refetchPage: (_page, index, allPages) => allPages.length - 1 === index });
@@ -268,31 +274,30 @@ export const SessionView = ({
             />
           </EuiFlexItem>
 
-          {hasTTYOutput && (
-            <EuiFlexItem grow={false}>
-              <EuiToolTip
-                title={
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              title={
+                <>
+                  {bytesOfOutput.value} {bytesOfOutput.unit}
                   <FormattedMessage
-                    id="xpack.sessionView.ttyToggle"
-                    defaultMessage="{kb}Kb of tty output"
-                    values={{
-                      kb: Math.round(totalTTYOutputBytes.total / 1024),
-                    }}
+                    id="xpack.sessionView.ttyToggleTip"
+                    defaultMessage=" of TTY output"
                   />
-                }
-              >
-                <EuiButtonIcon
-                  isSelected={showTTY}
-                  display={showTTY ? 'fill' : 'empty'}
-                  iconType="apmTrace"
-                  onClick={onToggleTTY}
-                  size="m"
-                  aria-label={TOGGLE_TTY_PLAYER}
-                  data-test-subj="sessionView:TTYPlayerToggle"
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
-          )}
+                </>
+              }
+            >
+              <EuiButtonIcon
+                disabled={!hasTTYOutput}
+                isSelected={showTTY}
+                display={showTTY ? 'fill' : 'empty'}
+                iconType="apmTrace"
+                onClick={onToggleTTY}
+                size="m"
+                aria-label={TOGGLE_TTY_PLAYER}
+                data-test-subj="sessionView:TTYPlayerToggle"
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
             <EuiButtonIcon

x-pack/plugins/session_view/public/components/tty_player/styles.ts

@@ -38,6 +38,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => {
     };
 
     const header: CSSObject = {
+      display: show ? 'block' : 'none',
       backgroundColor: `${euiVars.euiFormBackgroundDisabledColor}`,
       padding: `${size.m} ${size.base}`,
     };
@@ -73,7 +74,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => {
     const scrollPane: CSSObject = {
       position: 'relative',
       transform: `translateY(${show ? 0 : '100%'})`,
-      transition: 'transform .2s',
+      transition: 'transform .2s ease-in-out',
       width: '100%',
       height: 'calc(100% - 112px)',
       overflow: 'auto',

yarn.lock

@@ -6044,6 +6044,11 @@
   resolved "https://registry.yarnpkg.com/@types/braces/-/braces-3.0.0.tgz#7da1c0d44ff1c7eb660a36ec078ea61ba7eb42cb"
   integrity sha512-TbH79tcyi9FHwbyboOKeRachRq63mSuWYXOflsNO9ZyE5ClQ/JaozNKl+aWUq87qPNsXasXxi2AbgfwIJ+8GQw==
 
+"@types/byte-size@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@types/byte-size/-/byte-size-8.1.0.tgz#013a3995d1ff2d85ad27da0801029f13328bd91b"
+  integrity sha512-LCIlZh8vyx+I2fgRycE1D34c33QDppYY6quBYYoaOpQ1nGhJ/avSP2VlrAefVotjJxgSk6WkKo0rTcCJwGG7vA==
+
 "@types/cacheable-request@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.1.tgz#5d22f3dded1fd3a84c0bbeb5039a7419c2c91976"
@@ -10713,6 +10718,11 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
+byte-size@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/byte-size/-/byte-size-8.1.0.tgz#6353d0bc14ab7a69abcefbf11f8db0145a862cb5"
+  integrity sha512-FkgMTAg44I0JtEaUAvuZTtU2a2YDmBRbQxdsQNSMtLCjhG0hMcF5b1IMN9UjSCJaU4nvlj/GER7B9sI4nKdCgA==
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -28522,11 +28532,6 @@ xpath@0.0.32:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-xterm-addon-fit@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
-  integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
-
 xterm@^4.18.0:
   version "4.18.0"
   resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.18.0.tgz#a1f6ab2c330c3918fb094ae5f4c2562987398ea1"