Truncate appname in log viewer to prevent wrapping

ui/src/logs/utils/index.ts

@@ -17,7 +17,7 @@ import {HistogramData} from 'src/types/histogram'
 import {executeQueryAsync} from 'src/logs/api'
 
 const BIN_COUNT = 30
-const LOOK_BACK_LIMIT = 2592000
+const SECONDS_AWAY_LIMIT = 2592000
 
 const histogramFields = [
   {
@@ -176,7 +176,7 @@ export function buildGeneralLogQuery(
   return `${select}${condition}${dimensions}${fillClause}`
 }
 
-export async function findCount(
+export async function queryCount(
   lower,
   upper,
   config,
@@ -218,12 +218,12 @@ export async function findBackwardLower(
   let currentLower = parsedUpper.subtract(secondsBack, 'seconds')
 
   while (true) {
-    if (secondsBack > LOOK_BACK_LIMIT) {
+    if (secondsBack > SECONDS_AWAY_LIMIT) {
       // One day
       break
     }
 
-    const count = await findCount(
+    const count = await queryCount(
       currentLower.toISOString(),
       upper,
       config,
@@ -254,16 +254,15 @@ export async function findForwardUpper(
 ): Promise<string> {
   const parsedLower = moment(lower)
 
-  let secondsBack = 30
-  let currentUpper = parsedLower.add(secondsBack, 'seconds')
+  let secondsForward = 30
+  let currentUpper = parsedLower.add(secondsForward, 'seconds')
 
   while (true) {
-    if (secondsBack > LOOK_BACK_LIMIT) {
-      // One day
+    if (secondsForward > SECONDS_AWAY_LIMIT) {
       break
     }
 
-    const count = await findCount(
+    const count = await queryCount(
       lower,
       currentUpper.toISOString(),
       config,
@@ -277,8 +276,8 @@ export async function findForwardUpper(
       break
     }
 
-    secondsBack *= secondsBack
-    currentUpper = parsedLower.add(secondsBack, 'seconds')
+    secondsForward *= secondsForward
+    currentUpper = parsedLower.add(secondsForward, 'seconds')
   }
 
   return currentUpper.toISOString()

ui/src/logs/utils/table.ts

@@ -10,6 +10,7 @@ import {
 
 export const ROW_HEIGHT = 18
 const CHAR_WIDTH = 9
+const DEFAULT_COLUMN_WIDTH = 200
 
 export const getValuesFromData = (data: TableData): string[][] =>
   getDeep(data, 'values', [])
@@ -37,6 +38,9 @@ export const formatColumnValue = (
   switch (column) {
     case 'timestamp':
       return moment(+value / 1000000).format('YYYY/MM/DD HH:mm:ss')
+    case 'appname':
+      const length = Math.floor(DEFAULT_COLUMN_WIDTH / CHAR_WIDTH) - 2
+      return _.truncate(value || '', {length})
     case 'message':
       value = (value || 'No Message Provided').replace('\\n', '')
       if (value.indexOf(' ') > charLimit - 5) {
@@ -70,7 +74,7 @@ export const getColumnWidth = (column: string): number => {
       host: 300,
     },
     column,
-    200
+    DEFAULT_COLUMN_WIDTH
   )
 }