ui: fix filter for database

A recent change made the format of the databases change
on the UI and the filter no longer work.
This commit changes the display, to use the format:
`db1, db2, db3`, instead of `["db1", "db2", "db3"]`.
It also fixes the filter for database, now checking
for both cases (database as a single value in a string
and when is an array in a string form).

Epic: None
Release note: None

pkg/ui/workspaces/cluster-ui/src/sqlActivity/util.tsx

@@ -43,10 +43,18 @@ export function filteredStatementsData(
   // Current filters: search text, database, fullScan, service latency,
   // SQL Type, nodes and regions.
   return statements
-    .filter(
-      statement =>
-        databases.length == 0 || databases.includes(statement.database),
-    )
+    .filter(statement => {
+      try {
+        // Case where the database is returned as an array in a string form.
+        const dbList = JSON.parse(statement.database);
+        return (
+          databases.length === 0 || databases.some(d => dbList.includes(d))
+        );
+      } catch (e) {
+        // Case where the database is a single value as a string.
+        return databases.length === 0 || databases.includes(statement.database);
+      }
+    })
     .filter(statement => (filters.fullScan ? statement.fullScan : true))
     .filter(
       statement =>

pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTable.tsx

@@ -101,6 +101,16 @@ export function shortStatement(
   }
 }
 
+function formatStringArray(databases: string): string {
+  try {
+    // Case where the database is returned as an array in a string form.
+    return JSON.parse(databases).join(", ");
+  } catch (e) {
+    // Case where the database is a single value as a string.
+    return databases;
+  }
+}
+
 export function makeStatementsColumns(
   statements: AggregateStatistics[],
   selectedApps: string[],
@@ -173,7 +183,7 @@ export function makeStatementsColumns(
       name: "database",
       title: statisticsTableTitles.database(statType),
       className: cx("statements-table__col-database"),
-      cell: (stmt: AggregateStatistics) => stmt.database,
+      cell: (stmt: AggregateStatistics) => formatStringArray(stmt.database),
       sort: (stmt: AggregateStatistics) => stmt.database,
       showByDefault: false,
     },