From 2c87bd094130d101417f126dc43b712b358bc651 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Sat, 12 Jun 2021 15:18:26 +0200
Subject: [PATCH] feat(ui/fluxtask): compute and show friendly run ID

---
 ui/src/kapacitor/apis/index.js                  | 13 ++++++++++++-
 ui/src/kapacitor/components/LogItemFluxTask.tsx |  5 ++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/src/kapacitor/apis/index.js b/ui/src/kapacitor/apis/index.js
index ded04e5cf..658f77d2b 100644
--- a/ui/src/kapacitor/apis/index.js
+++ b/ui/src/kapacitor/apis/index.js
@@ -105,6 +105,12 @@ export const getFluxTask = async (kapacitor, taskID) => {
   return data
 }
 
+function friendlyID(id) {
+  if (id > 25) {
+    return friendlyID(Math.trunc(id / 25)) + String.fromCharCode(id % 25)
+  }
+  return String.fromCharCode(65 + id)
+}
 export const getFluxTaskLogs = async (kapacitor, taskID, maxItems) => {
   const {data} = await AJAX({
     method: 'GET',
@@ -113,14 +119,19 @@ export const getFluxTaskLogs = async (kapacitor, taskID, maxItems) => {
   })
   const logs = _.get(data, ['events'], [])
   logs.sort((a, b) => b.time.localeCompare(a.time))
+  let nextClusterId = 0
+  const runIdToClusterId = {}
   return logs.slice(0, maxItems).map(x => ({
     id: `${x.runID}-${x.time}`,
     key: `${x.runID}-${x.time}`,
     service: 'flux_task',
-    lvl: 'info',
+    lvl: 'error',
     ts: x.time,
     msg: x.message,
     tags: x.runID,
+    cluster:
+      runIdToClusterId[x.runID] ||
+      (runIdToClusterId[x.runID] = friendlyID(nextClusterId++)),
   }))
 }
 
diff --git a/ui/src/kapacitor/components/LogItemFluxTask.tsx b/ui/src/kapacitor/components/LogItemFluxTask.tsx
index 1d9a5c00e..b4ddd1044 100644
--- a/ui/src/kapacitor/components/LogItemFluxTask.tsx
+++ b/ui/src/kapacitor/components/LogItemFluxTask.tsx
@@ -11,7 +11,10 @@ const LogItemSession: FunctionComponent<Props> = ({logItem}) => (
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
       <div className="logs-table--timestamp">
-        {logItem.ts} (runID: {logItem.tags})
+        {logItem.ts} /{' '}
+        <i title={`friendly ID of a run name, full runID is: ${logItem.tags}`}>
+          {logItem.cluster || logItem.tags}
+        </i>
       </div>
     </div>
     <div className="logs-table--details">