ui: fixes on sql activity filter

This commit fixes the label of Transaction filter and add the proper color for the filter styles (previously was being loaded as a different color on the Sessions page because it was being inherit from another component) Fixes #91206 Release note (ui change): Fix Transaction filter label on SQL Activity page.
cockroachdb · Nov 3, 2022 · abbea27 · abbea27
1 parent d860e15
commit abbea27
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 8 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.module.scss b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.module.scss
@@ -52,6 +52,7 @@ $dropdown-hover-color: darken($colors--background, 2.5%);
       letter-spacing: 0.3px;
       font-style: normal;
       margin-bottom: 8px;
+      color: $colors--neutral-7;
 
       &__transaction-type {
         margin-top: 25px;

diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
@@ -58,11 +58,6 @@ interface FilterState {
   filters: Filters;
 }
 
-export interface SelectOptions {
-  label: string;
-  value: string;
-}
-
 export interface Filters extends Record<string, string | boolean> {
   app?: string;
   timeNumber?: string;
@@ -681,7 +676,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
               <>
                 <div className={filterLabel.margin}>
                   {timeLabel
-                    ? timeLabel
+                    ? `${timeLabel} runs longer than`
                     : "Statement fingerprint runs longer than"}
                 </div>
                 <section className={timePair.wrapper}>

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -389,7 +389,6 @@ export class SessionsPage extends React.Component<
         }),
       );
 
-    const timeLabel = "Session duration runs longer than";
     const displayColumns = columns.filter(c => isColumnSelected(c));
 
     return (
@@ -404,7 +403,7 @@ export class SessionsPage extends React.Component<
             sessionStatuses={sessionStatuses}
             activeFilters={activeFilters}
             filters={filters}
-            timeLabel={timeLabel}
+            timeLabel={"Session duration"}
           />
         </div>
         <section>

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
@@ -461,6 +461,7 @@ export class TransactionsPage extends React.Component<
               onSubmitFilters={this.onSubmitFilters}
               appNames={appNames}
               regions={regions}
+              timeLabel={"Transaction fingerprint"}
               nodes={nodes.map(n => "n" + n)}
               activeFilters={activeFilters}
               filters={filters}