Skip to content

feat(part-info): add part info page #491

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

Merged
merged 1 commit into from
Apr 10, 2025
Merged

feat(part-info): add part info page #491

merged 1 commit into from
Apr 10, 2025

Conversation

duyet
Copy link
Owner

@duyet duyet commented Apr 10, 2025

Summary by Sourcery

Add a new Part Info page to provide detailed information about active table parts and levels

New Features:

  • Introduce a new '/part-info' route that allows users to explore partition and level details for database tables
  • Add dynamic selectors for databases and tables to navigate part information
  • Implement part count and level count views with interactive selection

Enhancements:

  • Modify tables overview to add a link to part info page for parts count
  • Create reusable selectors for database and table navigation

@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Apr 10, 2025
Copy link
Contributor

sourcery-ai bot commented Apr 10, 2025

Reviewer's Guide by Sourcery

This pull request introduces a new 'Part Info' page that provides insights into table partitions and levels. It includes database and table selectors, displays partition and level counts in tables, and integrates with the existing menu and tables overview page.

No diagrams generated as the changes look simple and do not need a visual representation.

File-Level Changes

Change Details Files
Added a new 'Part Info' page to the main menu.
  • Added a new entry to the menuItemsConfig array.
  • The new menu item links to the /part-info route.
  • The new menu item has a description and an icon.
menu.ts
Made the parts_count column in the tables overview page link to the new Part Info page.
  • Modified the tablesOverviewConfig to include a link on the parts_count column.
  • The link points to /[ctx.hostId]/part-info/[_database]/[_table].
app/[host]/[query]/tables/tables-overview.ts
Implemented database and table selectors for the Part Info page.
  • Created DatabaseSelector and TableSelector components.
  • These components allow users to select a database and table to view part information for.
  • The selectors use next/navigation to redirect the user to the appropriate page when a selection is made.
  • Added getDatabases, getTables, getDefaultDatabase, getDefaultTable, and getDatabaseTables functions to fetch database and table information from ClickHouse.
  • Created a layout component to house the selectors.
app/[host]/part-info/selectors.tsx
app/[host]/part-info/get-database-tables.ts
app/[host]/part-info/layout.tsx
Implemented the Part Info page to display partition and level counts.
  • Created partitionCountConfig and levelCountConfig to define the queries for fetching partition and level counts.
  • The page displays two tables, one for partition counts and one for level counts.
  • The tables use the Table component to display the data.
  • Added loading states for the tables.
app/[host]/part-info/part-info-configs.ts
app/[host]/part-info/[database]/[table]/page.tsx
app/[host]/part-info/[database]/[table]/loading.tsx
Added redirect pages for the part-info route.
  • Added a page at app/[host]/part-info/page.tsx that redirects to the part-info page for the default database.
  • Added a page at app/[host]/part-info/[database]/page.tsx that redirects to the part-info page for the default table in the selected database.
app/[host]/part-info/page.tsx
app/[host]/part-info/[database]/page.tsx

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!
  • Generate a plan of action for an issue: Comment @sourcery-ai plan on
    an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link

vercel bot commented Apr 10, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
clickhouse-monitoring ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 10, 2025 7:32am

Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey @duyet - I've reviewed your changes - here's some feedback:

Overall Comments:

  • Consider adding a loading state for the database and table selectors in app/[host]/part-info/layout.tsx.
  • The revalidate time is set to 300 seconds, but the query cache is enabled; consider if both are needed.
Here's what I looked at during the review
  • 🟡 General issues: 1 issue found
  • 🟢 Security: all looks good
  • 🟢 Review instructions: all looks good
  • 🟢 Testing: all looks good
  • 🟡 Complexity: 2 issues found
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment on lines +23 to +24
const handleSelect = (newDatabase: string) => {
redirect(`/${host}/part-info/${newDatabase}`)
Copy link
Contributor

Choose a reason for hiding this comment

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

suggestion: Revisit use of redirect in a client component.

Since this component is marked with 'use client', consider using Next.js' useRouter hook and its push() method for client-side navigation instead of calling redirect from next/navigation, which is typically used in server components.

Suggested implementation:

+  import { useRouter } from 'next/navigation'
  const currentDatabase = params.database as string
  const router = useRouter()

  const handleSelect = (newDatabase: string) => {
    router.push(`/${host}/part-info/${newDatabase}`)
  }

@@ -0,0 +1,77 @@
'use client'
Copy link
Contributor

Choose a reason for hiding this comment

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

issue (complexity): Consider creating a custom hook to handle URL parameters to avoid code duplication in the DatabaseSelector and TableSelector components, which simplifies the filter logic by using a conditional check instead of a redundant one, and improves code maintainability and readability by centralizing the parameter extraction logic..

Consider abstracting URL parameter handling into a custom hook to eliminate duplication. For example, you could create:

// hooks/usePartInfoParams.ts
import { useParams } from 'next/navigation';

export function usePartInfoParams() {
  const params = useParams();
  return {
    database: params.database as string,
    table: params.table as string,
  };
}

Then update your selectors as follows:

// DatabaseSelector.tsx
import { redirect } from 'next/navigation';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { usePartInfoParams } from '@/hooks/usePartInfoParams';

export function DatabaseSelector({ host, databases }: { host: string; databases: string[] }) {
  const { database: currentDatabase } = usePartInfoParams();

  const handleSelect = (newDatabase: string) => {
    redirect(`/${host}/part-info/${newDatabase}`);
  };

  return (
    <Select value={currentDatabase} onValueChange={handleSelect}>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select Database" />
      </SelectTrigger>
      <SelectContent>
        {databases.map((db) => (
          <SelectItem key={db} value={db}>
            {db}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
// TableSelector.tsx
import { redirect } from 'next/navigation';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { usePartInfoParams } from '@/hooks/usePartInfoParams';

export function TableSelector({ host, databaseTables }: { host: string; databaseTables: { database: string; table: string }[] }) {
  const { database: currentDatabase, table: currentTable } = usePartInfoParams();

  const handleSelect = (newTable: string) => {
    redirect(`/${host}/part-info/${currentDatabase}/${newTable}`);
  };

  return (
    <Select value={currentTable} onValueChange={handleSelect}>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select Table" />
      </SelectTrigger>
      <SelectContent>
        {databaseTables
          .filter((item) => currentDatabase ? item.database === currentDatabase : true)
          .map((tbl) => (
            <SelectItem key={tbl.table} value={tbl.table}>
              {tbl.table}
            </SelectItem>
          ))}
      </SelectContent>
    </Select>
  );
}

This approach reduces duplication and simplifies the filter logic by replacing the redundant check with a clear conditional.

return tables?.[0] || ''
}

export const getDatabases = async (host: string): Promise<string[]> => {
Copy link
Contributor

Choose a reason for hiding this comment

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

issue (complexity): Consider using a Set to improve the efficiency and readability of the getDatabases function by simplifying the process of collecting unique database names.

Try replacing the `map` and `reduce` combination in `getDatabases` with a `Set` to simplify uniqueness handling. For example:

```ts
export const getDatabases = async (host: string): Promise<string[]> => {
  const items = await getDatabaseTables(host)
  return Array.from(new Set(items.map(item => item.database)))
}

This change reduces complexity while keeping the functionality intact.

@codecov-commenter
Copy link

codecov-commenter commented Apr 10, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 76.82%. Comparing base (c34e51a) to head (3a5b245).

✅ All tests successful. No failed tests found.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #491   +/-   ##
=======================================
  Coverage   76.82%   76.82%           
=======================================
  Files           5        5           
  Lines         164      164           
  Branches       59       60    +1     
=======================================
  Hits          126      126           
+ Misses         38       35    -3     
- Partials        0        3    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@dosubot dosubot bot added the enhancement New feature or request label Apr 10, 2025
@duyet duyet merged commit 1f57fb4 into main Apr 10, 2025
40 checks passed
@duyet duyet deleted the chore/part-count branch April 10, 2025 07:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request size:L This PR changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants