Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: add missing filters for workload insights and active execution pages #94002

Merged
merged 1 commit into from Jan 19, 2023

Conversation

gtr
Copy link
Contributor

@gtr gtr commented Dec 20, 2022

Fixes #87741, #87783.

Previously, the workload insights page was missing a filter for insights
type for both the statement and transaction tabs. Furthermore, the
active execution pages for statement and transactions was also missing a
status filter.

This commit adds the ability to filter by insights type for the workload
insights page and the ability to filter by execution status for the
active execution pages.

DB Console video demos:

  • Demo for workload insights page.
  • Demo for active execution page.
  • Demo for selecting more than one option.

CC Console video demos

  • Demo for filtering by execution status on statements tab
  • Demo for filtering by execution status on transactions tab
  • Demo for filtering by workload insight type

Release note (ui change): added an insights type filter for the workload
insights page, added a execution status filter for the active execution
pages. Updated the tooltip for execution status to include the definition
for the "Waiting" status.

@cockroach-teamcity
Copy link
Member

This change is Reviewable

@gtr gtr linked an issue Dec 20, 2022 that may be closed by this pull request
@gtr gtr marked this pull request as ready for review December 20, 2022 23:13
@gtr gtr requested a review from a team as a code owner December 20, 2022 23:13
@gtr gtr requested review from a team and removed request for a team December 20, 2022 23:13
Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! Would you mind checking if you select more than one value, if it's also working?

Reviewed 19 of 21 files at r1, all commit messages.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr)


pkg/ui/workspaces/cluster-ui/src/insights/utils.ts line 64 at r1 (raw file):

  if (filters.workloadInsightType) {
    const workloadInsightTypes = filters.workloadInsightType.toString().split(",");
    if (workloadInsightTypes.includes(unset)) {

you don't need this. This is used on app name, when no app name was set, so we want to all the "unset"value there. This is not the case for insights type


pkg/ui/workspaces/cluster-ui/src/insights/utils.ts line 219 at r1 (raw file):

  if (filters.workloadInsightType) {
    const workloadInsightTypes = filters.workloadInsightType.toString().split(",");
    if (workloadInsightTypes.includes(unset)) {

same comment as above


pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementUtils.ts line 71 at r1 (raw file):

    filteredStatements = filteredStatements.filter((statement: RecentStatement) => {
      const executionStatuses = filters.executionStatus.toString().split(",");
      if (executionStatuses.includes(unset)) {

ditto


pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementUtils.ts line 223 at r1 (raw file):

    filteredTxns = filteredTxns.filter((txn: RecentTransaction) => {
      const executionStatuses = filters.executionStatus.toString().split(",");
      if (executionStatuses.includes(unset)) {

ditto


pkg/ui/workspaces/cluster-ui/src/selectors/recentExecutions.selectors.ts line 49 at r1 (raw file):

  selectRecentStatements,
  (statements: RecentStatement[]) => 
    Array.from(new Set(statements.map(statement => statement.status))),

should we list only options that have results or all options available? wdyt @kevin-v-ngo (same comment for the recent executions and for the insights types)

Copy link
Contributor Author

@gtr gtr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No problem, I updated the README with an additional demo showing multiple selections for both pages.

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @kevin-v-ngo and @maryliag)


pkg/ui/workspaces/cluster-ui/src/insights/utils.ts line 64 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

you don't need this. This is used on app name, when no app name was set, so we want to all the "unset"value there. This is not the case for insights type

Done.


pkg/ui/workspaces/cluster-ui/src/insights/utils.ts line 219 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

same comment as above

Done.


pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementUtils.ts line 71 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

ditto

Done.


pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementUtils.ts line 223 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

ditto

Done.


pkg/ui/workspaces/cluster-ui/src/selectors/recentExecutions.selectors.ts line 49 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

should we list only options that have results or all options available? wdyt @kevin-v-ngo (same comment for the recent executions and for the insights types)

It looks like there are only three possible states for the execution status.

export type ExecutionStatus = "Waiting" | "Executing" | "Preparing";

We could easily import this type into the Filter component. We could also display a message when the user selects a status for which there are no recent statements.

Same thing with the insight types, only six possible states:

export enum InsightNameEnum {
  failedExecution = "FailedExecution",
  highContention = "HighContention",
  highRetryCount = "HighRetryCount",
  planRegression = "PlanRegression",
  suboptimalPlan = "SuboptimalPlan",
  slowExecution = "SlowExecution",
} 

A lot of the other options for the filter components (such as app name) only list options for which we have results but since the options for execution status and insight types are pre-determined from the types, I think it makes sense to list all options.

@gtr gtr force-pushed the missing-filters branch 2 times, most recently from a509ee1 to 7ba4110 Compare December 28, 2022 21:06
@kevin-v-ngo
Copy link

No problem, I updated the README with an additional demo showing multiple selections for both pages.

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @kevin-v-ngo and @maryliag)

pkg/ui/workspaces/cluster-ui/src/insights/utils.ts line 64 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…
Done.

pkg/ui/workspaces/cluster-ui/src/insights/utils.ts line 219 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…
Done.

pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementUtils.ts line 71 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…
Done.

pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementUtils.ts line 223 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…
Done.

pkg/ui/workspaces/cluster-ui/src/selectors/recentExecutions.selectors.ts line 49 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…
It looks like there are only three possible states for the execution status.

export type ExecutionStatus = "Waiting" | "Executing" | "Preparing";

We could easily import this type into the Filter component. We could also display a message when the user selects a status for which there are no recent statements.

Same thing with the insight types, only six possible states:

export enum InsightNameEnum {
  failedExecution = "FailedExecution",
  highContention = "HighContention",
  highRetryCount = "HighRetryCount",
  planRegression = "PlanRegression",
  suboptimalPlan = "SuboptimalPlan",
  slowExecution = "SlowExecution",
} 

A lot of the other options for the filter components (such as app name) only list options for which we have results but since the options for execution status and insight types are pre-determined from the types, I think it makes sense to list all options.

It would be great if we can list all the options (even if there aren't results). For instance, for troubleshooting a slow active workload, it's a more explicit/clear experience that tells user that they currently have no "Waiting" executions with contention. They don't need to infer based on the lack of the option.

FYI @dongniwang to review this PR as well if she has any feedback

@j82w
Copy link
Contributor

j82w commented Jan 3, 2023

pkg/ui/workspaces/cluster-ui/src/insights/utils.ts line 225 at r2 (raw file):

        workloadInsightTypes.includes(
          statementInsight.insights.map(insight => insight.label).toString(),
        ),

This can be optimized by moving the length check up to the top with the initial if. This avoids the overhead of iterating the list when there is nothing to filter.

if (filters.workloadInsightType && filters.workloadInsightType.Length > 0) {
....

This can be optimized further by doing the following.

    filteredStatements = filteredStatements.filter(
      statementInsight =>
         // avoid the map and includes if there are no insights for this statement. 
         if (statementInsight.insights.Length === 0){
              return false;
          }
         // Move generating the string outside of the includes to avoid recomputing for each workloadInsightType. 
        const stmtInsights = statementInsight.insights.map(insight => insight.label).toString();
        workloadInsightTypes.includes(stmtInsights),

Why are we doing includes to find the string instead of just comparing the array values?

filteredStatements = filteredStatements.filter(statementInsight =>
    statementInsight.insights.some(stmtInsight =>
      workloadInsightTypes.some(
        workloadType => workloadType === stmtInsight.label,
      ),
    ),
  );

@j82w
Copy link
Contributor

j82w commented Jan 3, 2023

pkg/ui/workspaces/cluster-ui/src/selectors/recentExecutions.selectors.ts line 49 at r1 (raw file):

Previously, kevin-v-ngo wrote…

It would be great if we can list all the options (even if there aren't results). For instance, for troubleshooting a slow active workload, it's a more explicit/clear experience that tells user that they currently have no "Waiting" executions with contention. They don't need to infer based on the lack of the option.

FYI @dongniwang to review this PR as well if she has any feedback

+1 to always listing all options.

Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 4 of 7 files at r2, all commit messages.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @dongniwang, @gtr, @j82w, and @kevin-v-ngo)


pkg/ui/workspaces/cluster-ui/src/store/insights/transactionInsights/transactionInsights.selectors.ts line 28 at r2 (raw file):

  state.adminUI.transactionInsights?.lastError;

export const selectTransactionInsightTypes = createSelector(

same comment here as the recent executions, list all existing types, not just the ones that have results for

Copy link
Contributor Author

@gtr gtr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @dongniwang, @j82w, @kevin-v-ngo, and @maryliag)


pkg/ui/workspaces/cluster-ui/src/insights/utils.ts line 225 at r2 (raw file):

Previously, j82w (Jake) wrote…

This can be optimized by moving the length check up to the top with the initial if. This avoids the overhead of iterating the list when there is nothing to filter.

if (filters.workloadInsightType && filters.workloadInsightType.Length > 0) {
....

This can be optimized further by doing the following.

    filteredStatements = filteredStatements.filter(
      statementInsight =>
         // avoid the map and includes if there are no insights for this statement. 
         if (statementInsight.insights.Length === 0){
              return false;
          }
         // Move generating the string outside of the includes to avoid recomputing for each workloadInsightType. 
        const stmtInsights = statementInsight.insights.map(insight => insight.label).toString();
        workloadInsightTypes.includes(stmtInsights),

Why are we doing includes to find the string instead of just comparing the array values?

filteredStatements = filteredStatements.filter(statementInsight =>
    statementInsight.insights.some(stmtInsight =>
      workloadInsightTypes.some(
        workloadType => workloadType === stmtInsight.label,
      ),
    ),
  );

Good catch, I updated this part of the filtering. TFTR!


pkg/ui/workspaces/cluster-ui/src/selectors/recentExecutions.selectors.ts line 49 at r1 (raw file):

Previously, j82w (Jake) wrote…

+1 to always listing all options.

Done. I also updated the conditions so that we get a "No transactions/statements match your search." message when we pick a status/insight type for which we don't have entries.


pkg/ui/workspaces/cluster-ui/src/store/insights/transactionInsights/transactionInsights.selectors.ts line 28 at r2 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

same comment here as the recent executions, list all existing types, not just the ones that have results for

Done! FYI for ExecutionStatus, I made it an enum so that it would be easier to turn into an array and adjusted the usages accordingly.

Code quote (from pkg/ui/workspaces/cluster-ui/src/insights/utils.ts):

 if (filters.workloadInsightType)

@dongniwang
Copy link

Thanks @gtr ! Looks good to me. Just a nit picking - would it be possible to bring the dropdown selection menu on top of the filter dropdown? See attached screenshot. The menu for selecting "Insights" is one layer above the "Filter" dropdown per initial design. Let me know if you have any questions. Thanks again!
image

@gtr
Copy link
Contributor Author

gtr commented Jan 5, 2023

Updated to fix CI build errors.


Thanks @gtr ! Looks good to me. Just a nit picking - would it be possible to bring the dropdown selection menu on top of the filter dropdown? See attached screenshot. The menu for selecting "Insights" is one layer above the "Filter" dropdown per initial design. Let me know if you have any questions. Thanks again! image

Good catch, I think we might need to open a new PR for this since we'd have to change the behavior of all dropdown menus in the UI but I'll look into it, thanks!

@gtr
Copy link
Contributor Author

gtr commented Jan 5, 2023

Updated to add the definition for the "waiting" execution status in the active executions pages' status tooltip:

If "Waiting", the ${execType} is currently experiencing contention.

Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Can you just add a demo with this changes working on CC Console?

Reviewed 10 of 20 files at r3, 5 of 7 files at r4, 6 of 6 files at r5, 1 of 1 files at r6, all commit messages.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @j82w, and @kevin-v-ngo)


-- commits line 13 at r6:
nit: in the future try keeping separate changes (specially on different pages) to different PRs, which makes it easier to review. You can keep this one as is


pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementsSection.tsx line 104 at r6 (raw file):

        renderNoResult={
          <EmptyStatementsPlaceholder
            isEmptySearchResults={search?.length > 0 || activeFilters > 0}

you still need the check of statements.length, but the correct is statements.length === 0. What this is doing is checking if you have no results because there is a search/filter, so you need to check if there is a search or if there are active filters, and you also need to check if indeed there is no results


pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentTransactionsSection.tsx line 103 at r6 (raw file):

        renderNoResult={
          <EmptyTransactionsPlaceholder
            isEmptySearchResults={search?.length > 0 || activeFilters > 0}

same thing as the other comment

Copy link
Contributor Author

@gtr gtr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated description to add demos for CC console.

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @j82w, @kevin-v-ngo, and @maryliag)


pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentStatementsSection.tsx line 104 at r6 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

you still need the check of statements.length, but the correct is statements.length === 0. What this is doing is checking if you have no results because there is a search/filter, so you need to check if there is a search or if there are active filters, and you also need to check if indeed there is no results

Thanks for catching this. Updated.


pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentTransactionsSection.tsx line 103 at r6 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

same thing as the other comment

Done.

@kevin-v-ngo
Copy link

kevin-v-ngo commented Jan 13, 2023

This is looking great! @gtr, we don't have "PlanRegression" yet?

And nit: "High Waiting Time" - > High Contention. It should match with the Insights column values. And where is Suboptimal plan? We don't have Full Scan as an insight either.

CC @dongniwang for another set of eyes

@gtr
Copy link
Contributor Author

gtr commented Jan 13, 2023

This is looking great! @gtr, we don't have "PlanRegression" yet?

And nit: "High Waiting Time" - > High Contention. It should match with the Insights column values. And where is Suboptimal plan? We don't have Full Scan as an insight either.

CC @dongniwang for another set of eyes

Thanks! I updated the demo video link in the description (here again for convenience).

@gtr gtr force-pushed the missing-filters branch 4 times, most recently from 4e49fea to 631cea4 Compare January 17, 2023 15:46
Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a small nit from me.
Also the link for the demo on filtering by execution status on transactions tab is giving 404.
Assuming this test is also working and the small nit: :lgtm:

Reviewed 10 of 13 files at r7, 1 of 2 files at r8, 3 of 3 files at r9, all commit messages.
Reviewable status: :shipit: complete! 1 of 0 LGTMs obtained (waiting on @gtr and @j82w)


pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx line 306 at r9 (raw file):

                        filteredStatements?.length === 0) ||
                      (countActiveFilters > 0 &&
                        filteredStatements?.length === 0)

nit you can update to

(search?.length > 0 || countActiveFilters > 0 ) && filteredStatements?.length === 0

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsView.tsx line 277 at r9 (raw file):

                        filteredTransactions?.length === 0) ||
                      (countActiveFilters > 0 &&
                        filteredTransactions?.length === 0)

nit you can update to

(search?.length > 0 || countActiveFilters > 0 ) && filteredStatements?.length === 0

Copy link
Contributor Author

@gtr gtr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (and 1 stale) (waiting on @j82w and @maryliag)


pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx line 306 at r9 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

nit you can update to

(search?.length > 0 || countActiveFilters > 0 ) && filteredStatements?.length === 0

Done.


pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsView.tsx line 277 at r9 (raw file):

search?.length > 0 || countActiveFilters > 0
Done.

Fixes cockroachdb#87741, cockroachdb#87783.

Previously, the workload insights page was missing a filter for insights
type for both the statement and transaction tabs. Furthermore, the
active execution pages for statement and transactions was also missing a
status filter.

This commit adds the ability to filter by insights type for the workload
insights page and the ability to filter by execution status for the
active execution pages.

Release note (ui change): added an insights type filter for the workload
insights page, added a execution status filter for the active execution
pages.
@gtr
Copy link
Contributor Author

gtr commented Jan 19, 2023

bors r+

@craig
Copy link
Contributor

craig bot commented Jan 19, 2023

Build succeeded:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
6 participants