Devtools statistics - new style, multi-select, & multi-delete #21813

karwosts · 2024-08-28T00:41:09Z

Proposed change

Following from the discussions of #20389 I tried to implement multi-select & bulk-issue fixing for developer tools/statistics.

The existing table was getting a bit rough and buggy, not working gracefully in narrow mode, so also decided to try to pickup some of the new data tables enhancements. It seems to work well, though I had to do an ugly amount of copy-pasting, given that there was no way I could see to leverage the existing code in hass-tabs-subpage-data-table. Tried looking to see if developer tools could use a hass-tabs style setup instead of paper tabs, but hass-tabs-subpage can't cleanly fit all of our devtools tabs, so just kept with the existing paper tabs and tried to hack in the table features.

Now table supports sorting, grouping, customizing columns, multi-select, and bulk issue fixing (for all types except units_changed which I haven't decided what to do with yet). But those are probably less common type of issues so I don't think it's a big loss.

Looked at getting filters as well, but the existing multi-pane structure was too complex to replicate and not worth the effort so I punted on that. I don't think it's needed yet.

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

Summary by CodeRabbit

New Features
- Enhanced statistics panel with improved sorting and grouping functionalities.
- Added new icons for better visual representation of actions.
- Introduced selection mode for bulk actions on statistics.
- New UI components, including a search input and assist chips for enhanced interactivity.
Bug Fixes
- Improved handling of issues related to statistics with new categorization constants.
Documentation
- Updated translations to provide better user guidance on fixing issues.

coderabbitai · 2024-08-28T00:41:19Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The changes involve substantial updates to the HaPanelDevStatistics class and the associated translations file. Enhancements include the addition of new icons, improved state management for sorting and grouping statistics, and new methods for selection handling. The user interface has been upgraded with components for better interactivity. Additionally, the translations file has been updated with new keys providing detailed user prompts related to fixing issues.

Changes

Files	Change Summary
`src/panels/developer-tools/statistics/...`	Updates to `HaPanelDevStatistics` class including new icons, state variables for sorting/grouping, new methods for selection, and UI enhancements.
`src/translations/en.json`	New entries added under "fix_issue" section to enhance user interaction regarding the fixing of statistics issues.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 1

coderabbitai · 2024-08-28T00:54:32Z

src/panels/developer-tools/statistics/developer-tools-statistics.ts

@@ -54,10 +91,42 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {

  @state() private _data: StatisticData[] = [] as StatisticsMetaData[];

+  @state() private filter = "";
+
+  @state() private _selected?;


Consider specifying a more specific type for _selected.

Using any[] bypasses type checking. If possible, specify a more precise type for better type safety.

- @state() private _selected?: any[]; + @state() private _selected?: StatisticData[];

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

@state() private _selected?;

@state() private _selected?: StatisticData[];

bramkragten · 2024-08-28T06:48:57Z

src/panels/developer-tools/statistics/developer-tools-statistics.ts

+    const localize = this.hass.localize;
+    const columns = this._columns(this.hass.localize);
+
+    const selectModeBtn = !this._selectMode


We should not duplicate all the logic from hass-tabs-subpage-data-table we should either use that element if possible and other wise extract it to another element so it can be reused in multiple elements.

Any thought which way I should try to go? I had the same thought but couldn't really figure out how to make it work.

I would say a new element that can be used by both hass-tabs-subpage-data-table and other places like here.

That's probably going to be more difficult than I can tackle. Guess I'll drop this as I don't see a way forward.

bramkragten · 2024-10-02T10:03:04Z

I re-opened and fixed this one (without the refactor for now) as it can be nice to have with the issues as repair issues now.

I did change 1 thing, instead of multi fix, I made it a multi delete feature instead of a multi fix one.

home-assistant bot added the cla-signed label Aug 28, 2024

coderabbitai bot reviewed Aug 28, 2024

View reviewed changes

bramkragten reviewed Aug 28, 2024

View reviewed changes

karwosts closed this Aug 28, 2024

bramkragten reopened this Sep 25, 2024

bramkragten self-assigned this Sep 25, 2024

mukaschultze and others added 4 commits October 2, 2024 10:24

feat: auto-fix statistics

07efd91

statistics multi-select and multi-fix

6c402ac

unused css

fba419f

Change multi action to clear, fixes

6b6482f

bramkragten force-pushed the devtools-stats-multiselect branch from 974ea95 to 6b6482f Compare October 2, 2024 08:41

bramkragten added 2 commits October 2, 2024 10:53

Update developer-tools-statistics.ts

b738181

update translations

f700c9b

bramkragten changed the title ~~Devtools statistics - new style, multi-select, & multi-fix~~ Devtools statistics - new style, multi-select, & multi-delete Oct 2, 2024

Add select all issues option

09b5332

bramkragten added this to the 2024.10 milestone Oct 2, 2024

bramkragten added 2 commits October 2, 2024 12:41

Update en.json

1b85111

Update developer-tools-statistics.ts

1de3a9d

bramkragten approved these changes Oct 2, 2024

View reviewed changes

bramkragten merged commit f7532f3 into home-assistant:dev Oct 2, 2024
14 checks passed

karwosts deleted the devtools-stats-multiselect branch October 2, 2024 11:45

bramkragten added the cherry-picked label Oct 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Devtools statistics - new style, multi-select, & multi-delete #21813

Devtools statistics - new style, multi-select, & multi-delete #21813

karwosts commented Aug 28, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Aug 28, 2024 •

edited

Loading

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

coderabbitai bot Aug 28, 2024

bramkragten Aug 28, 2024

karwosts Aug 28, 2024

bramkragten Aug 28, 2024

karwosts Aug 28, 2024

bramkragten commented Oct 2, 2024

	@state() private _selected?;
	@state() private _selected?: StatisticData[];

Devtools statistics - new style, multi-select, & multi-delete #21813

Devtools statistics - new style, multi-select, & multi-delete #21813

Conversation

karwosts commented Aug 28, 2024 • edited by coderabbitai bot Loading

Proposed change

Type of change

Example configuration

Additional information

Checklist

Summary by CodeRabbit

coderabbitai bot commented Aug 28, 2024 • edited Loading

Review skipped

Walkthrough

Changes

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot Aug 28, 2024

Choose a reason for hiding this comment

bramkragten Aug 28, 2024

Choose a reason for hiding this comment

karwosts Aug 28, 2024

Choose a reason for hiding this comment

bramkragten Aug 28, 2024

Choose a reason for hiding this comment

karwosts Aug 28, 2024

Choose a reason for hiding this comment

bramkragten commented Oct 2, 2024

karwosts commented Aug 28, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Aug 28, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)