diff --git a/web-console/src/views/query-view/query-output/query-output.tsx b/web-console/src/views/query-view/query-output/query-output.tsx
index 47d45e90b08..8e7c356bc74 100644
--- a/web-console/src/views/query-view/query-output/query-output.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.tsx
@@ -26,11 +26,18 @@ import {
 import React from 'react';
 import ReactTable from 'react-table';
 
+import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
 import { copyAndAlert } from '../../../utils';
 import { BasicAction, basicActionsToMenu } from '../../../utils/basic-action';
 
 import './query-output.scss';
 
+function trimValue(str: any): string {
+  str = String(str);
+  if (str.length < 102) return str;
+  return str.substr(0, 100) + '...';
+}
+
 export interface QueryOutputProps {
   loading: boolean;
   queryResult?: HeaderRows;
@@ -40,7 +47,25 @@ export interface QueryOutputProps {
   runeMode: boolean;
 }
 
-export class QueryOutput extends React.PureComponent<QueryOutputProps> {
+export interface QueryOutputState {
+  showValue?: string;
+}
+
+export class QueryOutput extends React.PureComponent<QueryOutputProps, QueryOutputState> {
+  constructor(props: QueryOutputProps) {
+    super(props);
+    this.state = {};
+  }
+
+  renderShowValueDialog(): JSX.Element | undefined {
+    const { showValue } = this.state;
+    if (!showValue) return;
+
+    return (
+      <ShowValueDialog onClose={() => this.setState({ showValue: undefined })} str={showValue} />
+    );
+  }
+
   render(): JSX.Element {
     const { queryResult, parsedQuery, loading, error } = this.props;
 
@@ -87,6 +112,7 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
             };
           })}
         />
+        {this.renderShowValueDialog()}
       </div>
     );
   }
@@ -104,7 +130,7 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
           if (sorted.id === h) {
             basicActions.push({
               icon: sorted.desc ? IconNames.SORT_ASC : IconNames.SORT_DESC,
-              title: `Order by: ${h} ${sorted.desc ? 'ASC' : 'DESC'}`,
+              title: `Order by: ${trimValue(h)} ${sorted.desc ? 'ASC' : 'DESC'}`,
               onAction: () => {
                 onQueryChange(parsedQuery.orderBy(h, sorted.desc ? 'ASC' : 'DESC'), true);
               },
@@ -116,14 +142,14 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
         basicActions.push(
           {
             icon: IconNames.SORT_DESC,
-            title: `Order by: ${h} DESC`,
+            title: `Order by: ${trimValue(h)} DESC`,
             onAction: () => {
               onQueryChange(parsedQuery.orderBy(h, 'DESC'), true);
             },
           },
           {
             icon: IconNames.SORT_ASC,
-            title: `Order by: ${h} ASC`,
+            title: `Order by: ${trimValue(h)} ASC`,
             onAction: () => {
               onQueryChange(parsedQuery.orderBy(h, 'ASC'), true);
             },
@@ -132,7 +158,7 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
       }
       basicActions.push({
         icon: IconNames.CROSS,
-        title: `Remove: ${h}`,
+        title: `Remove: ${trimValue(h)}`,
         onAction: () => {
           onQueryChange(parsedQuery.excludeColumn(h), true);
         },
@@ -143,34 +169,34 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
         <Menu>
           <MenuItem
             icon={IconNames.CLIPBOARD}
-            text={`Copy: ${h}`}
+            text={`Copy: ${trimValue(h)}`}
             onClick={() => {
               copyAndAlert(h, `${h}' copied to clipboard`);
             }}
           />
-          {runeMode && (
-            <MenuItem
-              icon={IconNames.CLIPBOARD}
-              text={`Copy: ORDER BY ${basicIdentifierEscape(h)} ASC`}
-              onClick={() =>
-                copyAndAlert(
-                  `ORDER BY ${basicIdentifierEscape(h)} ASC`,
-                  `ORDER BY ${basicIdentifierEscape(h)} ASC' copied to clipboard`,
-                )
-              }
-            />
-          )}
-          {runeMode && (
-            <MenuItem
-              icon={IconNames.CLIPBOARD}
-              text={`Copy: 'ORDER BY ${basicIdentifierEscape(h)} DESC'`}
-              onClick={() =>
-                copyAndAlert(
-                  `ORDER BY ${basicIdentifierEscape(h)} DESC`,
-                  `ORDER BY ${basicIdentifierEscape(h)} DESC' copied to clipboard`,
-                )
-              }
-            />
+          {!runeMode && (
+            <>
+              <MenuItem
+                icon={IconNames.CLIPBOARD}
+                text={`Copy: ORDER BY ${basicIdentifierEscape(h)} ASC`}
+                onClick={() =>
+                  copyAndAlert(
+                    `ORDER BY ${basicIdentifierEscape(h)} ASC`,
+                    `ORDER BY ${basicIdentifierEscape(h)} ASC' copied to clipboard`,
+                  )
+                }
+              />
+              <MenuItem
+                icon={IconNames.CLIPBOARD}
+                text={`Copy: 'ORDER BY ${basicIdentifierEscape(h)} DESC'`}
+                onClick={() =>
+                  copyAndAlert(
+                    `ORDER BY ${basicIdentifierEscape(h)} DESC`,
+                    `ORDER BY ${basicIdentifierEscape(h)} DESC' copied to clipboard`,
+                  )
+                }
+              />
+            </>
           )}
         </Menu>
       );
@@ -178,23 +204,36 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
     return actionsMenu ? actionsMenu : undefined;
   }
 
-  getRowActions(row: string, header: string) {
+  getRowActions(row: any, header: string) {
     const { parsedQuery, onQueryChange, runeMode } = this.props;
 
+    const showFullValueMenuItem =
+      typeof row === 'string' ? (
+        <MenuItem
+          icon={IconNames.EYE_OPEN}
+          text={`Show full value`}
+          onClick={() => {
+            this.setState({ showValue: row });
+          }}
+        />
+      ) : (
+        undefined
+      );
+
     let actionsMenu;
     if (parsedQuery) {
       actionsMenu = (
         <Menu>
           <MenuItem
             icon={IconNames.FILTER_KEEP}
-            text={`Filter by: ${header} = ${row}`}
+            text={`Filter by: ${trimValue(header)} = ${trimValue(row)}`}
             onClick={() => {
               onQueryChange(parsedQuery.filterRow(header, row, '='), true);
             }}
           />
           <MenuItem
             icon={IconNames.FILTER_REMOVE}
-            text={`Filter by: ${header} != ${row}`}
+            text={`Filter by: ${trimValue(header)} != ${trimValue(row)}`}
             onClick={() => {
               onQueryChange(parsedQuery.filterRow(header, row, '!='), true);
             }}
@@ -203,20 +242,21 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
             <>
               <MenuItem
                 icon={IconNames.FILTER_KEEP}
-                text={`Filter by: ${header} >= ${row}`}
+                text={`Filter by: ${trimValue(header)} >= ${trimValue(row)}`}
                 onClick={() => {
                   onQueryChange(parsedQuery.filterRow(header, row, '>='), true);
                 }}
               />
               <MenuItem
                 icon={IconNames.FILTER_KEEP}
-                text={`Filter by: ${header} <= ${row}`}
+                text={`Filter by: ${trimValue(header)} <= ${trimValue(row)}`}
                 onClick={() => {
                   onQueryChange(parsedQuery.filterRow(header, row, '<='), true);
                 }}
               />
             </>
           )}
+          {showFullValueMenuItem}
         </Menu>
       );
     } else {
@@ -224,37 +264,38 @@ export class QueryOutput extends React.PureComponent<QueryOutputProps> {
         <Menu>
           <MenuItem
             icon={IconNames.CLIPBOARD}
-            text={`Copy: ${row}`}
+            text={`Copy: ${trimValue(row)}`}
             onClick={() => copyAndAlert(row, `${row} copied to clipboard`)}
           />
-          {runeMode && (
-            <MenuItem
-              icon={IconNames.CLIPBOARD}
-              text={`Copy: ${basicIdentifierEscape(header)} = ${basicLiteralEscape(row)}`}
-              onClick={() =>
-                copyAndAlert(
-                  `${basicIdentifierEscape(header)} = ${basicLiteralEscape(row)}`,
-                  `${basicIdentifierEscape(header)} = ${basicLiteralEscape(
-                    row,
-                  )} copied to clipboard`,
-                )
-              }
-            />
-          )}
-          {runeMode && (
-            <MenuItem
-              icon={IconNames.CLIPBOARD}
-              text={`Copy: ${basicIdentifierEscape(header)} != ${basicLiteralEscape(row)}`}
-              onClick={() =>
-                copyAndAlert(
-                  `${basicIdentifierEscape(header)} != ${basicLiteralEscape(row)}`,
-                  `${basicIdentifierEscape(header)} != ${basicLiteralEscape(
-                    row,
-                  )} copied to clipboard`,
-                )
-              }
-            />
+          {!runeMode && (
+            <>
+              <MenuItem
+                icon={IconNames.CLIPBOARD}
+                text={`Copy: ${basicIdentifierEscape(header)} = ${basicLiteralEscape(row)}`}
+                onClick={() =>
+                  copyAndAlert(
+                    `${basicIdentifierEscape(header)} = ${basicLiteralEscape(row)}`,
+                    `${basicIdentifierEscape(header)} = ${basicLiteralEscape(
+                      row,
+                    )} copied to clipboard`,
+                  )
+                }
+              />
+              <MenuItem
+                icon={IconNames.CLIPBOARD}
+                text={`Copy: ${basicIdentifierEscape(header)} != ${basicLiteralEscape(row)}`}
+                onClick={() =>
+                  copyAndAlert(
+                    `${basicIdentifierEscape(header)} != ${basicLiteralEscape(row)}`,
+                    `${basicIdentifierEscape(header)} != ${basicLiteralEscape(
+                      row,
+                    )} copied to clipboard`,
+                  )
+                }
+              />
+            </>
           )}
+          {showFullValueMenuItem}
         </Menu>
       );
     }