Skip to content

Catalogathon Changes#249

Draft
shekhar316 wants to merge 1 commit into
kruize:mainfrom
shekhar316:modern-ui-redesign2
Draft

Catalogathon Changes#249
shekhar316 wants to merge 1 commit into
kruize:mainfrom
shekhar316:modern-ui-redesign2

Conversation

@shekhar316
Copy link
Copy Markdown
Contributor

@shekhar316 shekhar316 commented May 2, 2026

Summary by Sourcery

Modernize the UI around local monitoring and experiments by introducing a dashboard-style navigation, richer cluster exploration, and new views for recommendations and installed configurations, while updating experiment creation flows to support both container-level and namespace-level experiments.

New Features:

  • Add an interactive Explore Cluster page that imports datasource metadata, visualizes clusters/namespaces/workloads, and links directly to experiment creation or recommendation views.
  • Introduce a View Recommendations page that lists experiments with filtering, search, and navigation to detailed recommendations.
  • Add an Installed Configs page to inspect metadata profiles, metric profiles, and layers with expandable JSON detail and pagination.
  • Create a modern Dashboard landing page that surfaces basic datasource and workload counts and explains key workflows.
  • Enable namespace-scoped experiments and JSON generation alongside existing container-scoped experiments.

Enhancements:

  • Redesign the Local Monitoring page from a simple datasource table into a tabbed experience with interactive tree and tabular workload views, search, filters, and pagination.
  • Improve the experiment JSON editor to use Monaco with inline validation, better messaging, and redirect to the recommendations view after creation.
  • Allow deep-linking into experiment recommendations and automatic experiment selection via URL parameters.
  • Refine routing, navigation labels, and document title handling to align with the new dashboard-centric IA and modern pages.
  • Extend central configuration helpers and add client-side metadata fetches to support new profile and layer listing APIs.

Build:

  • Rename the package to kruize-ui-modern, bump the version to 2.0.0, and add dependencies for charts, trees, layout, and animation libraries used by the new UI components.

@sourcery-ai
Copy link
Copy Markdown

sourcery-ai Bot commented May 2, 2026

Reviewer's Guide

Modernizes the Kruize UI around a new dashboard and cluster exploration workflow, adds rich experiment/recommendation views and installed-configs pages, and enhances experiment creation and metadata import flows, including namespace-level experiments and interactive visualizations.

Sequence diagram for importing cluster metadata in Explore Cluster

sequenceDiagram
  actor User
  participant LocalMonitoringPage
  participant ReduxStore
  participant BackendAPI

  User->>LocalMonitoringPage: Load /explore-cluster
  LocalMonitoringPage->>ReduxStore: dispatch getListOfDataSources
  ReduxStore-->>LocalMonitoringPage: datasources
  LocalMonitoringPage->>ReduxStore: dispatch getListOfExperiments
  ReduxStore-->>LocalMonitoringPage: experiments

  User->>LocalMonitoringPage: Click Import_Metadata for datasource
  LocalMonitoringPage->>BackendAPI: GET dsmetadata?datasource=name&verbose=true
  BackendAPI-->>LocalMonitoringPage: JSON metadata
  LocalMonitoringPage->>LocalMonitoringPage: Transform response to ClusterData
  LocalMonitoringPage->>LocalMonitoringPage: createExperimentName per workload
  LocalMonitoringPage->>ReduxStore: Read experiments list
  LocalMonitoringPage->>LocalMonitoringPage: checkExperimentExists for each experiment_name
  LocalMonitoringPage-->>User: Render interactive cluster tree and table view with experiment status
Loading

Sequence diagram for navigating from workloads to recommendations or experiment creation

sequenceDiagram
  actor User
  participant LocalMonitoringPage
  participant ReactRouter
  participant CreateExperimentPage
  participant CodeEditorWithActions
  participant BackendAPI
  participant MonitoringPage
  participant ExperimentSelection
  participant ViewRecommendationsPage

  User->>LocalMonitoringPage: Click workload in Interactive_View or Table_View
  alt Workload_has_recommendations
    LocalMonitoringPage->>ReactRouter: push /listExperiments?experiment_name=enc_name
    ReactRouter-->>MonitoringPage: Render with experiment_name param
    MonitoringPage->>ExperimentSelection: initialExperimentName from URL
    ExperimentSelection->>BackendAPI: GET listExperiments
    BackendAPI-->>ExperimentSelection: experiment list
    ExperimentSelection->>ExperimentSelection: Auto select matching experiment
    ExperimentSelection-->>User: Show recommendations for selected experiment
  else No_recommendations_for_workload
    LocalMonitoringPage->>ReactRouter: push /createExperiment with state
    ReactRouter-->>CreateExperimentPage: Render with location.state
    CreateExperimentPage->>CodeEditorWithActions: Pass experimentType and workload or namespace data
    CodeEditorWithActions->>CodeEditorWithActions: Build JSON (namespace or container)
    User->>CodeEditorWithActions: Click Create_Experiment
    CodeEditorWithActions->>BackendAPI: POST importCreateExperimentJson
    BackendAPI-->>CodeEditorWithActions: 200 Created
    CodeEditorWithActions-->>User: Success alert with link
    User->>ViewRecommendationsPage: Navigate to /view-recommendations
    ViewRecommendationsPage->>BackendAPI: GET listExperiments
    BackendAPI-->>ViewRecommendationsPage: Experiments
    ViewRecommendationsPage-->>User: Filterable experiments table with View_Recommendations actions
  end
Loading

Flow diagram for experiment JSON generation in CodeEditorWithActions

flowchart TD
  A[Start_handle_CodeEditorWithActions] --> B{experimentType_is_namespace?}
  B -- Yes --> C["Build_namespace_experiment_name<br/>datasource|cluster|namespace"]
  C --> D[Construct_namespace_experiment_JSON_literal]
  D --> G[Set_codeEditorData_to_JSON_string]

  B -- No --> E["Build_container_experiment_name<br/>datasource|cluster|namespace|workload(type)|container"]
  E --> F[Load_template_expyaml_and_create_substitution_object]
  F --> H[Replace_placeholder_tokens_in_template]
  H --> G[Set_codeEditorData_to_JSON_string]

  G --> I[User_edits_JSON_in_MonacoEditor]
  I --> J[On_Create_Experiment_click]
  J --> K[Try_parse_codeEditorData_as_JSON]
  K --> L{JSON_valid?}
  L -- No --> M[Set_validationError_Invalid_JSON]
  L -- Yes --> N[POST_importCreateExperimentJson]
  N --> O[On_success_show_success_alert_and_link_to_View_Recommendations]
  M --> P[End]
  O --> P[End]
Loading

File-Level Changes

Change Details Files
Replace the old Local Monitoring datasources table with a full Explore Cluster experience that imports metadata per datasource, builds a cluster/namespace/workload tree, and offers both interactive and tabular workload views with navigation into experiment creation/recommendations.
  • Refactors LocalMonitoring.tsx from a simple datasources table into a stateful React component with loading/error handling, datasource selection, and metadata import via the /dsmetadata API.
  • Transforms metadata responses into a ClusterData/NamespaceData/WorkloadData model, including Kruize-style experiment name generation and existence checks against the experiments list.
  • Implements an interactive collapsible tree view (cluster → namespace → workload) with PatternFly icons/badges and click-through to either listExperiments or createExperiment (pre-filled via route state).
  • Adds a table view that flattens workloads, supports search, cluster/namespace filters, pagination, and row click navigation to experiment flows.
  • Introduces LocalMonitoring.css to style the new page, tree, filters, and interactive states.
src/app/Analytics/LocalMonitoring/LocalMonitoring.tsx
src/app/Analytics/LocalMonitoring/LocalMonitoring.css
Enhance experiment creation JSON editor to support namespace experiments, inline editing with Monaco, JSON validation, and redirect to a centralized recommendations view after creation.
  • Updates CreateExperiment.tsx to accept richer location state, detect namespace experiments, and construct appropriate seed data for JSON generation.
  • Extends CodeEditorWithActions.tsx to generate two JSON shapes: namespace-level experiments (namespace-only kubernetes_objects) and container-level experiments using the stricter Kruize naming convention.
  • Replaces the static ReusableCodeBlock with a MonacoEditor instance, tracks editable JSON in component state, validates JSON before POSTing to importCreateExperimentJsonURL, and surfaces validation errors via PatternFly Alerts.
  • Changes the success alert CTA to navigate to /view-recommendations instead of the legacy experiments route.
src/app/Analytics/LocalMonitoring/CreateExperiment.tsx
src/app/Analytics/LocalMonitoring/GenerateJSON/CodeEditorWithActions.tsx
Rework routing and shell UX around a new modern dashboard, explore-cluster, view-recommendations, and installed-configs pages, while simplifying accessibility/title management.
  • Replaces the old About-root and grouped nav configuration with flat routes for Dashboard (/), Explore Cluster (/explore-cluster), View Recommendations (/view-recommendations), Installed Configs (/installed-configs), Create Experiment, and Experiment Recommendations (/listExperiments).
  • Adds new modern pages: Dashboard (summary metrics and quick-start guidance), ViewRecommendations (filterable/paginated experiment listing with link into Monitoring), InstalledConfigs (tabbed metadata/metric profile/layer inspectors), and ImportMetadata (tree visualization of clusters/namespaces/experiments using react-d3-tree).
  • Integrates useDocumentTitle and a simplified useA11yRouteChange hook that focuses the primary app container on route changes, removing the older isAsync-based logic.
  • Updates Monitoring and ExperimentSelection to accept an experiment_name query param and auto-select the corresponding experiment in the dropdown when present.
src/app/routes.tsx
src/app/modern/Dashboard/Dashboard.tsx
src/app/modern/Dashboard/Dashboard.css
src/app/modern/Dashboard/components/ClusterHealth.tsx
src/app/modern/ViewRecommendations/ViewRecommendations.tsx
src/app/modern/ViewRecommendations/ViewRecommendations.css
src/app/modern/InstalledConfigs/InstalledConfigs.tsx
src/app/modern/InstalledConfigs/InstalledConfigs.css
src/app/modern/ImportMetadata/ImportMetadata.tsx
src/app/modern/ImportMetadata/ImportMetadata.css
src/app/Analytics/LocalMonitoring/RecommendationsForLocalMonitoring/RemoteMonitoring/Monitoring.tsx
src/app/Analytics/LocalMonitoring/RecommendationsForLocalMonitoring/RemoteMonitoring/ExperimentSelection.tsx
Extend central configuration and dependencies to support new metadata APIs and visualization libraries.
  • Adds CentralConfig helpers for listMetadataProfiles, listMetricProfiles, and listLayers, and ensures getBaseUrl is exported for broader use.
  • Updates InstalledConfigs and ImportMetadata to call the new endpoints (/listMetadataProfiles?verbose=true, /listMetricProfiles?verbose=true, /listLayers) and render results in expandable tables/tree views.
  • Introduces new UI dependencies (recharts, react-d3-tree, react-flow-renderer, react-grid-layout, framer-motion, react-query, clsx, lucide-react, date-fns, etc.) and bumps the package name/version to kruize-ui-modern 2.0.0.
src/app/CentralConfig.tsx
package.json
package-lock.json

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!

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant