ui: upgrade typescript from v4 to v5

Upgrade Typescript from v4 to v5, that have a smaller
size, is faster and adds new features.

This commit make some updates that were causing errors
on the new Typescript version, such as type mismatch error.

Epic: none

Release note: None

Author: maryliag

pkg/ui/pnpm-lock.yaml

@@ -155,7 +155,7 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.1.3",
     "ts-jest": "^27.1.3",
-    "typescript": "4.2.4",
+    "typescript": "5.1.6",
     "uplot": "^1.6.19",
     "url-loader": "^4.1.0",
     "webpack": "^4.41.5",

pkg/ui/workspaces/cluster-ui/package.json

@@ -17,7 +17,7 @@ import { JOB_STATUS_SUCCEEDED, isRunning } from "./jobOptions";
 type Job = cockroach.server.serverpb.IJobResponse;
 
 export const formatDuration = (d: moment.Duration): string =>
-  [Math.floor(d.asHours()).toFixed(0), d.minutes(), d.seconds()]
+  [Number(Math.floor(d.asHours()).toFixed(0)), d.minutes(), d.seconds()]
     .map(c => (c < 10 ? ("0" + c).slice(-2) : c))
     .join(":");
 

pkg/ui/workspaces/cluster-ui/src/jobs/util/duration.tsx

@@ -321,7 +321,7 @@ export class SessionsPage extends React.Component<
           TimestampToMoment(s.session.start),
           "seconds",
         );
-        return sessionTime >= timeValue || timeValue === "empty";
+        return timeValue === "empty" || sessionTime >= Number(timeValue);
       })
       .filter((s: SessionInfo) => {
         if (filters.username && filters.username != "All") {

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx

@@ -100,7 +100,8 @@ export function filterStatementsData(
     .filter(statement => (filters.fullScan ? statement.fullScan : true))
     .filter(
       statement =>
-        statement.stats.service_lat.mean >= timeValue || timeValue === "empty",
+        timeValue === "empty" ||
+        statement.stats.service_lat.mean >= Number(timeValue),
     )
     .filter(
       statement =>

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

@@ -199,8 +199,8 @@ export const filterTransactions = (
     })
     .filter(
       (t: Transaction) =>
-        t.stats_data.stats.service_lat.mean >= timeValue ||
-        timeValue === "empty",
+        timeValue === "empty" ||
+        t.stats_data.stats.service_lat.mean >= Number(timeValue),
     )
     .filter((t: Transaction) => {
       // The transaction must contain at least one value of the regions list

pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts

@@ -173,7 +173,7 @@
     "topojson": "^3.0.2",
     "ts-jest": "27.1.3",
     "ts-loader": "^6.2.1",
-    "typescript": "4.2.4",
+    "typescript": "5.1.6",
     "uglify-js": "^2.8.15",
     "uplot": "^1.6.8",
     "url-loader": "4.1.1",

pkg/ui/workspaces/db-console/package.json

@@ -588,11 +588,11 @@ export const partitionedStatuses = createSelector(
   nodesSummarySelector,
   summary => {
     return _.groupBy(summary.nodeStatuses, ns => {
-      switch (summary.livenessByNodeID[ns.desc.node_id]) {
-        case MembershipStatus.ACTIVE:
-        case MembershipStatus.DECOMMISSIONING:
+      switch (summary.livenessStatusByNodeID[ns.desc.node_id]) {
+        case LivenessStatus.NODE_STATUS_LIVE:
+        case LivenessStatus.NODE_STATUS_DECOMMISSIONING:
           return "live";
-        case MembershipStatus.DECOMMISSIONED:
+        case LivenessStatus.NODE_STATUS_DECOMMISSIONED:
           return "decommissioned";
         default:
           // TODO (koorosh): "live" has to be renamed to some partition which

pkg/ui/workspaces/db-console/src/redux/nodes.ts

@@ -24,7 +24,7 @@
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "prettier": "2.6.2",
-    "typescript": "^4.6.3"
+    "typescript": "5.1.6"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "4.29.1"

pkg/ui/workspaces/e2e-tests/package.json

@@ -19,7 +19,7 @@
     "eslint": "^8.16.0",
     "jest": "^28.1.0",
     "ts-jest": "^28.0.3",
-    "typescript": "^4.7.2"
+    "typescript": "5.1.6"
   },
   "peerDependencies": {
     "@typescript-eslint/parser": "^5.0.0",