feat(core-app): CB-868 add log viewer info panel

webapp/packages/core-app/src/AppScreen/RightArea.tsx

@@ -12,13 +12,13 @@ import styled, { css } from 'reshadow';
 import {
   Pane, ResizerControls, SlideBox, SlideElement, slideBoxStyles, Split, splitHorizontalStyles, splitStyles, SlideOverlay
 } from '@cloudbeaver/core-blocks';
-import { useController, useService } from '@cloudbeaver/core-di';
+import { useService } from '@cloudbeaver/core-di';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 import { OptionsPanelService } from '@cloudbeaver/core-ui';
 
 import { NavigationTabsBar } from '../shared/NavigationTabs/NavigationTabsBar';
-import { LogViewTab } from '../shared/ToolsPanel/LogViewTab/LogViewTab';
-import { LogViewTabController } from '../shared/ToolsPanel/LogViewTab/LogViewTabController';
+import { LogViewer } from '../shared/ToolsPanel/LogViewer/LogViewer';
+import { useLogViewer } from '../shared/ToolsPanel/LogViewer/useLogViewer';
 
 const styles = composes(
   css`
@@ -45,7 +45,7 @@ const styles = composes(
 );
 
 export const RightArea = observer(function RightArea() {
-  const controller = useController(LogViewTabController);
+  const logViewerState = useLogViewer();
   const optionsPanelService = useService(OptionsPanelService);
   const OptionsPanel = optionsPanelService.getPanelComponent();
 
@@ -55,13 +55,13 @@ export const RightArea = observer(function RightArea() {
         <OptionsPanel />
       </SlideElement>
       <SlideElement>
-        <Split sticky={30} split="horizontal" mode={controller.isActive ? undefined : 'minimize'} keepRatio>
+        <Split sticky={30} split="horizontal" mode={logViewerState.isActive ? undefined : 'minimize'} keepRatio>
           <Pane>
             <NavigationTabsBar />
           </Pane>
-          {controller.isActive && <ResizerControls />}
+          {logViewerState.isActive && <ResizerControls />}
           <Pane main>
-            <LogViewTab />
+            <LogViewer />
           </Pane>
         </Split>
         <SlideOverlay onClick={() => optionsPanelService.close()} />

webapp/packages/core-app/src/index.ts

@@ -19,8 +19,9 @@ export * from './shared/NodesManager/NavNodeExtensionsService';
 export * from './shared/NodesManager/NodeManagerUtils';
 export * from './shared/NavigationTabs/NavigationTabsService';
 export * from './shared/NavigationTabs/TabNavigationContext';
-export * from './shared/ToolsPanel/LogViewTab/LogViewerMenuService';
-export * from './shared/ToolsPanel/LogViewTab/LogViewerService';
+export * from './shared/ToolsPanel/LogViewer/LogViewerMenuService';
+export * from './shared/ToolsPanel/LogViewer/LogViewerService';
+
 export * from './shared/SessionExpireDialog/SessionExpiredDialogService';
 export * from './NavigationTree/ElementsTree';
 export * from './NavigationTree/TreeContext';

webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntry.tsx → webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogEntry.tsx

@@ -7,17 +7,18 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
+import styled, { css, use } from 'reshadow';
 
 import { Link } from '@cloudbeaver/core-blocks';
-import { useController } from '@cloudbeaver/core-di';
 import { useStyles } from '@cloudbeaver/core-theming';
 
-import type { ILogEntry } from '../ILogEntry';
-import { LogEntryController } from './LogEntryController';
+import type { ILogEntry } from './ILogEntry';
 
 export interface LogEntryProps {
   item: ILogEntry;
+  onItemSelect: (error: ILogEntry | null) => void;
+  selected?: boolean;
+  className?: string;
 }
 
 const style = css`
@@ -39,23 +40,24 @@ const style = css`
   Link:hover {
     cursor: pointer;
   }
-
-  tr:hover Icon {
-    fill: #338fcc;
+  tr[|selected] {
+    font-weight: 500;
   }
 `;
 
-export const LogEntry = observer(function LogEntry({ item }: LogEntryProps) {
-  const controller = useController(LogEntryController, item);
-
+export const LogEntry = observer(function LogEntry({ item, onItemSelect, selected = false, className }: LogEntryProps) {
   return styled(useStyles(style))(
-    <tr>
+    <tr className={className} {...use({ selected, expanded: selected })}>
       <td>{item.type}</td>
       <td>{item.time}</td>
       <td>
         <message-cell as="div">
           <message as="div" title={item.message}>
-            {item.stackTrace ? <Link onClick={controller.showDetails}>{item.message}</Link> : item.message}
+            {item.stackTrace ? (
+              <Link onClick={() => onItemSelect(selected ? null : item)}>
+                {item.message}
+              </Link>
+            ) : item.message}
           </message>
         </message-cell>
       </td>

webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewer.tsx

@@ -0,0 +1,72 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { Pane, ResizerControls, Split, splitStyles } from '@cloudbeaver/core-blocks';
+import { composes, useStyles } from '@cloudbeaver/core-theming';
+
+import { LogViewerInfoPanel } from './LogViewerInfoPanel';
+import { LogViewerTable } from './LogViewerTable';
+import { useLogViewer } from './useLogViewer';
+
+const styles = composes(
+  css`
+    pane-content {
+      composes: theme-background-surface theme-text-on-surface from global;
+    }
+  `,
+  css`
+    log-view-wrapper, Pane, pane-content {
+      position: relative;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      overflow: hidden;
+    }
+`);
+
+export const LogViewer = observer(function LogViewer() {
+  const style = useStyles(styles, splitStyles);
+  const logViewerState = useLogViewer();
+
+  if (!logViewerState.isActive) {
+    return null;
+  }
+
+  return styled(style)(
+    <log-view-wrapper as='div'>
+      <Split mode={logViewerState.selectedItem ? undefined : 'maximize'} keepRatio>
+        <Pane main>
+          <pane-content as='div'>
+            <LogViewerTable
+              items={logViewerState.logItems}
+              selectedItem={logViewerState.selectedItem}
+              onClearTable={logViewerState.clearLog}
+              onItemSelect={logViewerState.selectItem}
+            />
+          </pane-content>
+        </Pane>
+        {logViewerState.selectedItem && (
+          <>
+            <ResizerControls />
+            <Pane>
+              <pane-content as='div'>
+                <LogViewerInfoPanel
+                  selectedItem={logViewerState.selectedItem}
+                  onClose={logViewerState.closeInfoPanel}
+                />
+              </pane-content>
+            </Pane>
+          </>
+        )}
+      </Split>
+    </log-view-wrapper>
+  );
+});