ui: general fixes on transaction insights page

This commit fixes a few bugs on the Workload Insights page - transactions: - Proper selection of the message when empty results - Adjust some styling Release justification: bug fixes Release note: None
cockroachdb · Aug 21, 2022 · f60ece7 · f60ece7
1 parent 8ed07d1
commit f60ece7
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/insightDetailsTables.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/insightDetailsTables.tsx
@@ -22,7 +22,7 @@ interface InsightDetailsTableProps {
 export function makeInsightDetailsColumns(
   execType: InsightExecEnum,
 ): ColumnDescriptor<EventExecution>[] {
-  const columns: ColumnDescriptor<EventExecution>[] = [
+  return [
     {
       name: "executionID",
       title: insightsTableTitles.executionID(execType),
@@ -55,7 +55,6 @@ export function makeInsightDetailsColumns(
       sort: (item: EventExecution) => item.elapsedTime,
     },
   ];
-  return columns;
 }
 
 export const WaitTimeDetailsTable: React.FC<

diff --git a/...i/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx b/...i/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
@@ -180,12 +180,12 @@ export class InsightDetails extends React.Component<InsightDetailsProps> {
             <Col>
               <Row>
                 <Heading type="h5">
-                  {WaitTimeInsightsLabels.WAITING_TXNS_TABLE_TITLE(
+                  {WaitTimeInsightsLabels.BLOCKING_TXNS_TABLE_TITLE(
                     insightDetails.executionID,
                     insightDetails.execType,
                   )}
                 </Heading>
-                <div>
+                <div className={tableCx("margin-bottom-large")}>
                   <WaitTimeDetailsTable
                     data={waitingExecutions}
                     execType={insightDetails.execType}
@@ -214,7 +214,9 @@ export class InsightDetails extends React.Component<InsightDetailsProps> {
           >
             Insights
           </Button>
-          <h3>{`Transaction Execution ID: ${String(
+          <h3
+            className={commonStyles("base-heading", "no-margin-bottom")}
+          >{`Transaction Execution ID: ${String(
             getMatchParamByName(this.props.match, "id"),
           )}`}</h3>
         </div>

diff --git a/.../cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsView.tsx b/.../cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsView.tsx
@@ -238,7 +238,7 @@ export const TransactionInsightsView: React.FC<
                 renderNoResult={
                   <EmptyInsightsTablePlaceholder
                     isEmptySearchResults={
-                      search?.length > 0 && filteredTransactions?.length > 0
+                      search?.length > 0 && filteredTransactions?.length == 0
                     }
                   />
                 }

diff --git a/...orkspaces/cluster-ui/src/insights/workloadInsights/util/emptyInsightsTablePlaceholder.tsx b/...orkspaces/cluster-ui/src/insights/workloadInsights/util/emptyInsightsTablePlaceholder.tsx
@@ -29,8 +29,8 @@ const emptySearchResults = {
 
 export const EmptyInsightsTablePlaceholder: React.FC<{
   isEmptySearchResults: boolean;
-}> = isEmptySearchResults => {
-  const emptyPlaceholderProps: EmptyTableProps = isEmptySearchResults
+}> = props => {
+  const emptyPlaceholderProps: EmptyTableProps = props.isEmptySearchResults
     ? emptySearchResults
     : {
         title: "No insight events since this page was last refreshed.",

diff --git a/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.module.scss b/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.module.scss
@@ -19,3 +19,7 @@
 .margin-bottom {
   margin-bottom: 20px;
 }
+
+.margin-bottom-large {
+  margin-bottom: 30px;
+}