query messages

packages/web/src/query/MessagesView.js

@@ -1,29 +1,95 @@
 import React from 'react';
 import styled from 'styled-components';
+import moment from 'moment';
+
+const MainContainer = styled.div`
+  flex:1
+  display:flex
+  overflow-y: scroll
+`;
 
 const StyledTable = styled.table`
   flex: 1;
+  border-spacing: 0;
+  border-collapse: collapse;
 `;
 
-export default function MessagesView({ items }) {
+const StyledHeader = styled.th`
+  text-align: left;
+  border-bottom: 2px solid #ddd;
+  padding: 5px;
+`;
+
+const StyledCell = styled.td`
+  border-top: 1px solid #ddd;
+  padding: 5px;
+`;
+
+const StyledRow = styled.tr`
+  color: ${(props) =>
+    // @ts-ignore
+    props.severity == 'error' ? 'red' : 'black'};
+
+  ${(props) =>
+    // @ts-ignore
+    props.line != null &&
+    `
+  &:hover {
+    background-color: #ccc;
+  }
+  `}
+`;
+
+function formatDuration(duration) {
+  if (duration == 0) return '0';
+  if (duration < 1000) {
+    return `${Math.round(duration)} ms`;
+  }
+  if (duration < 10000) {
+    return `${Math.round(duration / 100) / 10} s`;
+  }
+  return `${Math.round(duration / 1000)} s`;
+}
+
+export default function MessagesView({ items, onMessageClick }) {
+  const handleClick = (row) => {
+    if (onMessageClick) onMessageClick(row);
+  };
+
+  const mainDiv = React.useRef(null);
+
+  React.useEffect(() => {
+    const element = mainDiv.current;
+    if (element) {
+      element.scrollTop = element.scrollHeight;
+    }
+  }, [items]);
+
+  const time0 = items[0] && new Date(items[0].time).getTime();
+
   return (
-    <StyledTable>
-      <tr>
-        <th>Number</th>
-        <th>Message</th>
-        <th>Time</th>
-        <th>Procedure</th>
-        <th>Line</th>
-      </tr>
-      {items.map((row, index) => (
-        <tr key={index}>
-          <td>{index + 1}</td>
-          <td>{row.message}</td>
-          <td>{row.time}</td>
-          <td>{row.procedure}</td>
-          <td>{row.line}</td>
+    <MainContainer ref={mainDiv}>
+      <StyledTable>
+        <tr>
+          <StyledHeader>Number</StyledHeader>
+          <StyledHeader>Message</StyledHeader>
+          <StyledHeader>Time</StyledHeader>
+          <StyledHeader>Delta</StyledHeader>
+          <StyledHeader>Procedure</StyledHeader>
+          <StyledHeader>Line</StyledHeader>
         </tr>
-      ))}
-    </StyledTable>
+        {items.map((row, index) => (
+          // @ts-ignore
+          <StyledRow key={index} severity={row.severity} line={row.line} onClick={() => handleClick(row)}>
+            <StyledCell>{index + 1}</StyledCell>
+            <StyledCell>{row.message}</StyledCell>
+            <StyledCell>{moment(row.time).format('HH:mm:ss')}</StyledCell>
+            <StyledCell>{formatDuration(new Date(row.time).getTime() - time0)}</StyledCell>
+            <StyledCell>{row.procedure}</StyledCell>
+            <StyledCell>{row.line}</StyledCell>
+          </StyledRow>
+        ))}
+      </StyledTable>
+    </MainContainer>
   );
 }

packages/web/src/query/SessionMessagesView.js

@@ -2,7 +2,7 @@ import React from 'react';
 import MessagesView from './MessagesView';
 import useSocket from '../utility/SocketProvider';
 
-export default function SessionMessagesView({ sessionId }) {
+export default function SessionMessagesView({ sessionId, onMessageClick }) {
   const [messages, setMessages] = React.useState([]);
   const socket = useSocket();
 
@@ -17,5 +17,5 @@ export default function SessionMessagesView({ sessionId }) {
     }
   }, [sessionId, socket]);
 
-  return <MessagesView items={messages} />;
+  return <MessagesView items={messages} onMessageClick={onMessageClick} />;
 }

packages/web/src/sqleditor/SqlEditor.js

@@ -29,27 +29,30 @@ export default function SqlEditor({
   onChange = undefined,
   tabVisible = false,
   onKeyDown = undefined,
+  editorRef = undefined,
 }) {
   const [containerRef, { height, width }] = useDimensions();
-  const editorRef = React.useRef(null);
+  const ownEditorRef = React.useRef(null);
+
+  const currentEditorRef = editorRef || ownEditorRef;
 
   React.useEffect(() => {
-    if (tabVisible && editorRef.current && editorRef.current.editor) editorRef.current.editor.focus();
+    if (tabVisible && currentEditorRef.current && currentEditorRef.current.editor) currentEditorRef.current.editor.focus();
   }, [tabVisible]);
 
   React.useEffect(() => {
-    if (onKeyDown && editorRef.current) {
-      editorRef.current.editor.keyBinding.addKeyboardHandler(onKeyDown);
+    if (onKeyDown && currentEditorRef.current) {
+      currentEditorRef.current.editor.keyBinding.addKeyboardHandler(onKeyDown);
     }
     return () => {
-      editorRef.current.editor.keyBinding.removeKeyboardHandler(onKeyDown);
+      currentEditorRef.current.editor.keyBinding.removeKeyboardHandler(onKeyDown);
     };
   }, [onKeyDown]);
 
   return (
     <Wrapper ref={containerRef}>
       <AceEditor
-        ref={editorRef}
+        ref={currentEditorRef}
         mode={engineToMode[engine] || 'sql'}
         theme="github"
         onChange={onChange}

packages/web/src/tabs/QueryTab.js

@@ -46,6 +46,8 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
     };
   }, []);
 
+  const editorRef = React.useRef(null);
+
   useUpdateDatabaseForTab(tabVisible, conid, database);
   const connection = useConnectionInfo(conid);
 
@@ -73,6 +75,13 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
 
   const handleKeyDown = (e) => {};
 
+  const handleMesageClick = (message) => {
+    // console.log('EDITOR', editorRef.current.editor);
+    if (editorRef.current && editorRef.current.editor) {
+      editorRef.current.editor.gotoLine(message.line);
+    }
+  };
+
   return (
     <>
       <VerticalSplitter>
@@ -82,10 +91,11 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
           tabVisible={tabVisible}
           engine={connection && connection.engine}
           onKeyDown={handleKeyDown}
+          editorRef={editorRef}
         />
         <ResultTabs sessionId={sessionId}>
           <TabPage label="Messages" key="messages">
-            <SessionMessagesView sessionId={sessionId} />
+            <SessionMessagesView sessionId={sessionId} onMessageClick={handleMesageClick} />
           </TabPage>
         </ResultTabs>
       </VerticalSplitter>