#RI-4139 - Update visualizations when there is no data to visualize

redisinsight/ui/src/components/query-card/QueryCardCliPlugin/QueryCardCliPlugin.spec.tsx

@@ -4,23 +4,24 @@ import { instance, mock } from 'ts-mockito'
 import { PluginEvents } from 'uiSrc/plugins/pluginEvents'
 import { pluginApi } from 'uiSrc/services/PluginAPI'
 import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import { formatToText } from 'uiSrc/utils'
+import { sendPluginCommandAction, getPluginStateAction, setPluginStateAction } from 'uiSrc/slices/app/plugins'
 import QueryCardCliPlugin, { Props } from './QueryCardCliPlugin'
 
 const mockedProps = mock<Props>()
 
-let store: typeof mockedStore
-beforeEach(() => {
-  cleanup()
-  store = cloneDeep(mockedStore)
-  store.clearActions()
-})
-
 jest.mock('uiSrc/services/PluginAPI', () => ({
   pluginApi: {
-    onEvent: jest.fn()
+    onEvent: jest.fn(),
+    sendEvent: jest.fn(),
   }
 }))
 
+jest.mock('uiSrc/utils', () => ({
+  ...jest.requireActual('uiSrc/utils'),
+  formatToText: jest.fn()
+}))
+
 jest.mock('uiSrc/slices/app/plugins', () => ({
   ...jest.requireActual('uiSrc/slices/app/plugins'),
   appPluginsSelector: jest.fn().mockReturnValue({
@@ -35,6 +36,9 @@ jest.mock('uiSrc/slices/app/plugins', () => ({
       }
     ]
   }),
+  sendPluginCommandAction: jest.fn(),
+  getPluginStateAction: jest.fn(),
+  setPluginStateAction: jest.fn(),
 }))
 
 jest.mock('uiSrc/services', () => ({
@@ -45,6 +49,13 @@ jest.mock('uiSrc/services', () => ({
   },
 }))
 
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
 describe('QueryCardCliPlugin', () => {
   it('should render', () => {
     expect(render(<QueryCardCliPlugin {...instance(mockedProps)} />)).toBeTruthy()
@@ -64,5 +75,101 @@ describe('QueryCardCliPlugin', () => {
     expect(onEventMock).toBeCalledWith(expect.any(String), PluginEvents.executeRedisCommand, expect.any(Function))
     expect(onEventMock).toBeCalledWith(expect.any(String), PluginEvents.getState, expect.any(Function))
     expect(onEventMock).toBeCalledWith(expect.any(String), PluginEvents.setState, expect.any(Function))
+    expect(onEventMock).toBeCalledWith(expect.any(String), PluginEvents.formatRedisReply, expect.any(Function))
+  })
+
+  it('should subscribes and call sendPluginCommandAction', () => {
+    const mockedSendPluginCommandAction = jest.fn().mockImplementation(() => jest.fn());
+    (sendPluginCommandAction as jest.Mock).mockImplementation(mockedSendPluginCommandAction)
+
+    const onEventMock = jest.fn().mockImplementation(
+      (_iframeId: string, event: string, callback: (data: any) => void) => {
+        if (event === PluginEvents.executeRedisCommand) {
+          callback({ command: 'info' })
+        }
+      }
+    );
+
+    (pluginApi.onEvent as jest.Mock).mockImplementation(onEventMock)
+
+    render(<QueryCardCliPlugin {...instance(mockedProps)} id="1" />)
+
+    expect(mockedSendPluginCommandAction).toBeCalledWith(
+      {
+        command: 'info',
+        onSuccessAction: expect.any(Function),
+        onFailAction: expect.any(Function)
+      }
+    )
+  })
+
+  it('should subscribes and call getPluginStateAction with proper data', () => {
+    const mockedGetPluginStateAction = jest.fn().mockImplementation(() => jest.fn());
+    (getPluginStateAction as jest.Mock).mockImplementation(mockedGetPluginStateAction)
+
+    const onEventMock = jest.fn().mockImplementation(
+      (_iframeId: string, event: string, callback: (data: any) => void) => {
+        if (event === PluginEvents.getState) {
+          callback({ requestId: 5 })
+        }
+      }
+    );
+
+    (pluginApi.onEvent as jest.Mock).mockImplementation(onEventMock)
+
+    render(<QueryCardCliPlugin {...instance(mockedProps)} id="1" commandId="100" />)
+
+    expect(mockedGetPluginStateAction).toBeCalledWith(
+      {
+        commandId: '100',
+        onSuccessAction: expect.any(Function),
+        onFailAction: expect.any(Function),
+        visualizationId: '1'
+      }
+    )
+  })
+
+  it('should subscribes and call setPluginStateAction with proper data', () => {
+    const mockedSetPluginStateAction = jest.fn().mockImplementation(() => jest.fn());
+    (setPluginStateAction as jest.Mock).mockImplementation(mockedSetPluginStateAction)
+
+    const onEventMock = jest.fn().mockImplementation(
+      (_iframeId: string, event: string, callback: (data: any) => void) => {
+        if (event === PluginEvents.setState) {
+          callback({ requestId: 5 })
+        }
+      }
+    );
+
+    (pluginApi.onEvent as jest.Mock).mockImplementation(onEventMock)
+
+    render(<QueryCardCliPlugin {...instance(mockedProps)} id="1" commandId="200" />)
+
+    expect(mockedSetPluginStateAction).toBeCalledWith(
+      {
+        commandId: '200',
+        onSuccessAction: expect.any(Function),
+        onFailAction: expect.any(Function),
+        visualizationId: '1'
+      }
+    )
+  })
+
+  it('should subscribes and call formatToText', () => {
+    const formatToTextMock = jest.fn();
+    (formatToText as jest.Mock).mockImplementation(formatToTextMock)
+    const onEventMock = jest.fn().mockImplementation(
+      (_iframeId: string, event: string, callback: (dat: any) => void) => {
+        if (event === PluginEvents.formatRedisReply) {
+          callback({ requestId: '1', data: { response: [], command: 'info' } })
+        }
+      }
+    );
+
+    (pluginApi.onEvent as jest.Mock).mockImplementation(onEventMock)
+
+    render(<QueryCardCliPlugin {...instance(mockedProps)} id="1" />)
+
+    expect(formatToTextMock).toBeCalledWith([], 'info')
   })
 })

redisinsight/ui/src/components/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { EuiFlexItem, EuiIcon, EuiLoadingContent, EuiTextColor } from '@elastic/eui'
 import { pluginApi } from 'uiSrc/services/PluginAPI'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
-import { getBaseApiUrl, Nullable } from 'uiSrc/utils'
+import { getBaseApiUrl, Nullable, formatToText } from 'uiSrc/utils'
 import { Theme } from 'uiSrc/constants'
 import { CommandExecutionResult, IPluginVisualization } from 'uiSrc/slices/interfaces'
 import { PluginEvents } from 'uiSrc/plugins/pluginEvents'
@@ -156,6 +156,28 @@ const QueryCardCliPlugin = (props: Props) => {
     )
   }
 
+  const formatRedisResponse = (
+    { requestId, data }: { requestId: string, data: { response: any, command: string } }
+  ) => {
+    try {
+      const reply = formatToText(data?.response || '(nil)', data.command)
+
+      sendMessageToPlugin({
+        event: PluginEvents.formatRedisReply,
+        requestId,
+        actionType: ActionTypes.Resolve,
+        data: reply
+      })
+    } catch (e) {
+      sendMessageToPlugin({
+        event: PluginEvents.formatRedisReply,
+        requestId,
+        actionType: ActionTypes.Reject,
+        data: e
+      })
+    }
+  }
+
   useEffect(() => {
     if (currentView === null) return
     pluginApi.onEvent(generatedIframeNameRef.current, PluginEvents.heightChanged, (height: string) => {
@@ -183,6 +205,7 @@ const QueryCardCliPlugin = (props: Props) => {
     pluginApi.onEvent(generatedIframeNameRef.current, PluginEvents.executeRedisCommand, sendRedisCommand)
     pluginApi.onEvent(generatedIframeNameRef.current, PluginEvents.getState, getPluginState)
     pluginApi.onEvent(generatedIframeNameRef.current, PluginEvents.setState, setPluginState)
+    pluginApi.onEvent(generatedIframeNameRef.current, PluginEvents.formatRedisReply, formatRedisResponse)
   }, [currentView])
 
   const renderPluginIframe = (config: any) => {

redisinsight/ui/src/packages/redisgraph/package.json

@@ -61,6 +61,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-json-tree": "^0.16.1",
-    "redisinsight-plugin-sdk": "^1.0.0"
+    "redisinsight-plugin-sdk": "^1.1.0"
   }
 }

redisinsight/ui/src/packages/redisgraph/src/App.tsx

@@ -8,28 +8,27 @@ import { COMPACT_FLAG } from './constants'
 const isDarkTheme = document.body.classList.contains('theme_DARK')
 
 const json_tree_theme = {
-    scheme: 'solarized',
-    author: 'ethan schoonover (http://ethanschoonover.com/solarized)',
-    base00: '#002b36',
-    base01: '#073642',
-    base02: '#586e75',
-    base03: '#657b83',
-    base04: '#839496',
-    base05: '#93a1a1',
-    base06: '#eee8d5',
-    base07: '#fdf6e3',
-    base08: '#dc322f',
-    base09: '#098658',
-    base0A: '#b58900',
-    base0B: '#A31515',
-    base0C: '#2aa198',
-    base0D: '#0451A5',
-    base0E: '#6c71c4',
-    base0F: '#d33682',
+  scheme: 'solarized',
+  author: 'ethan schoonover (http://ethanschoonover.com/solarized)',
+  base00: '#002b36',
+  base01: '#073642',
+  base02: '#586e75',
+  base03: '#657b83',
+  base04: '#839496',
+  base05: '#93a1a1',
+  base06: '#eee8d5',
+  base07: '#fdf6e3',
+  base08: '#dc322f',
+  base09: '#098658',
+  base0A: '#b58900',
+  base0B: '#A31515',
+  base0C: '#2aa198',
+  base0D: '#0451A5',
+  base0E: '#6c71c4',
+  base0F: '#d33682',
 }
 
 export function TableApp(props: { command?: string, data: any }) {
-
   const ErrorResponse = HandleError(props)
 
   if (ErrorResponse !== null) return ErrorResponse
@@ -40,10 +39,10 @@ export function TableApp(props: { command?: string, data: any }) {
     <div className="table-view">
       <Table
         data={tableData.results}
-        columns={tableData.headers.map(h => ({
+        columns={tableData.headers.map((h) => ({
           field: h,
           name: h,
-          render: d => (
+          render: (d) => (
             <JSONTree
               invertTheme={isDarkTheme}
               theme={{
@@ -52,7 +51,7 @@ export function TableApp(props: { command?: string, data: any }) {
                   style: { ...style, backgroundColor: undefined }, // removing default background color from styles
                 }),
               }}
-              labelRenderer={(key) => key ? key : null}
+              labelRenderer={(key) => (key || null)}
               hideRoot
               data={d}
             />
@@ -63,16 +62,15 @@ export function TableApp(props: { command?: string, data: any }) {
   )
 }
 
-
 export function GraphApp(props: { command?: string, data: any }) {
-
+  const { data, command = '' } = props
   const ErrorResponse = HandleError(props)
 
   if (ErrorResponse !== null) return ErrorResponse
 
   return (
-    <div style={{ height: "100%" }}>
-      <Graph graphKey={props.command.split(' ')[1]} data={props.data[0].response} />
+    <div style={{ height: '100%' }}>
+      <Graph graphKey={command.split(' ')[1]} data={data[0].response} command={command} />
     </div>
   )
 }
@@ -84,7 +82,7 @@ function HandleError(props: { command?: string, data: any }): JSX.Element {
     return <div className="responseFail">{JSON.stringify(response)}</div>
   }
 
-  if (status === 'success' && typeof(response) === 'string') {
+  if (status === 'success' && typeof (response) === 'string') {
     return <div className="responseFail">{JSON.stringify(response)}</div>
   }