fix: landing page / Home page revamp #6729

nikhilsaikethe · 2025-05-06T08:37:04Z

User description

This PR implements the latest UI of landing page / Home page with 2 charts for showing alerts and pipelines

PR Type

Enhancement

Description

Redesigned Home page layout and tiles
Added alerts and pipelines charts
Implemented theme-aware icons and styles
Added loading state for summary fetch

Diagram Walkthrough

flowchart LR
  HomeView["HomeView.vue"]
  SummaryAPI["Summary fetch & parsing"]
  Charts["CustomChartRenderer charts"]
  Tiles["Responsive metric tiles"]
  Theming["Dark/Light computed icons & styles"]
  Loading["Loading spinner state"]

  HomeView -- "fetches org summary" --> SummaryAPI
  SummaryAPI -- "sets metrics & statuses" --> Tiles
  SummaryAPI -- "feeds alert/pipeline data" --> Charts
  HomeView -- "applies theme classes" --> Theming
  HomeView -- "shows while fetching" --> Loading

File Walkthrough

Relevant files

Enhancement

HomeView.vue `Home page redesign with charts and theme-aware UI` web/src/views/HomeView.vue Rebuilt template with responsive sections and tiles. Added alerts pie and pipelines bar charts via CustomChartRenderer. Introduced loading state, improved summary parsing, and theme-aware icons. Added extensive SCSS for dark/light theming and layout.	+568/-229

greptile-apps

PR Summary

This PR implements a comprehensive redesign of the OpenObserve home page with new data visualization features and improved UI/UX.

Added new alert status pie chart and pipeline status bar chart in /web/src/views/HomeView.vue for better data visualization
Implemented responsive tile layout with dynamic sizing using Tailwind CSS classes (min-width: 240px, flex-grow: 1)
Added loading state handling with hourglass spinner and user feedback notifications
Enhanced theme support with dedicated dark/light mode styles and corresponding icon assets
Improved data metrics display with new tiles showing compressed size, ingested data, index size, doc count and streams

_{1 file(s) reviewed, 2 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-05-06T08:37:53Z

web/src/views/HomeView.vue

+                :key="panelDataKey"
+                :data="panelData2"


logic: Both charts are using the same panelDataKey, which could cause rendering issues if one chart needs to update independently

considered this

greptile-apps · 2025-05-06T08:37:54Z

web/src/views/HomeView.vue

+          },
+          axisLabel: {
+            fontSize: 12,
+            color: store.state.theme === 'dark' ? '#B7B7B&' : '#72777B'


syntax: Typo in color value '#B7B7B&' should be '#B7B7B7'

Suggested change

color: store.state.theme === 'dark' ? '#B7B7B&' : '#72777B'

color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B'

yes nice catch , updated the comit

github-actions · 2025-09-05T11:27:28Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Reactive Data Type The 'summary' ref is initialized as an array but later used as an object with properties (e.g., summary.value.healthy_alerts). Consider initializing it to an object to avoid type/runtime issues. const summary: any = ref([]); const $q = useQuasar(); const no_data_ingest = ref(false); const isCloud = config.isCloud; const { setStreams } = useStreams(); const alertsPanelDataKey = ref(0); const pipelinesPanelDataKey = ref(0); Notify Type The Quasar notify uses type 'negative-increase', which may not be a valid built-in type. Verify the intended style or replace with a supported type like 'negative' or a custom class. type: "negative-increase", message: "Error while pulling summary.", timeout: 2000, }); }) Chart Y-Axis Max The pipelines chart y-axis max is computed as ceil((sum/3)/10)10, which can be zero and hide bars when counts are low. Consider a safer fallback (e.g., max(Math.max(values)+1, 10)). type: "value", min: 0, max:Math.ceil((summary.value.healthy_pipelines + summary.value.failed_pipelines + summary.value.warning_pipelines) / 3 / 10) 10 , interval: 10, name: "Number of Pipelines", nameLocation: "middle", nameGap: 60,

github-actions · 2025-09-05T11:27:55Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix invalid notify type The Quasar notify 'type' value appears invalid and will not render the intended negative style. Use a valid Quasar type like 'negative' to ensure proper error feedback. This prevents silent styling failures. web/src/views/HomeView.vue [416-421] $q.notify({ - type: "negative-increase", + type: "negative", message: "Error while pulling summary.", timeout: 2000, }); Suggestion importance[1-10]: 7 __ Why: The PR changes the notify `type` from `negative` to `negative-increase`, which is not a standard Quasar type and may not style correctly. Reverting to `negative` is accurate and improves reliability of error feedback.	Medium
Possible issue	Guard chart axis for zero data When all counts are zero, the computed 'max' becomes 0, which can break bar rendering. Ensure 'yAxis.max' is at least 10 and that 'interval' divides the range to avoid empty or malformed charts. web/src/views/HomeView.vue [519-566] const pipelinesPanelData = computed(() => { - - return { - chartType: "custom_chart", - xAxis: { - type: "category", - data: ["Healthy", "Failed", "Warning"], - name: "Last 15 minutes", - ... + const healthy = Number(summary.value.healthy_pipelines) \|\| 0; + const failed = Number(summary.value.failed_pipelines) \|\| 0; + const warning = Number(summary.value.warning_pipelines) \|\| 0; + const maxVal = Math.max(10, Math.ceil((healthy + failed + warning) / 3 / 10) * 10); + const interval = Math.max(1, Math.floor(maxVal / 5)); + return { + chartType: "custom_chart", + xAxis: { + type: "category", + data: ["Healthy", "Failed", "Warning"], + name: "Last 15 minutes", + nameLocation: "middle", + nameGap: 30, + nameTextStyle: { + fontSize: 16, + fontWeight: "normal", + color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B' }, - yAxis: { - type: "value", - min: 0, - max:Math.ceil((summary.value.healthy_pipelines + summary.value.failed_pipelines + summary.value.warning_pipelines) / 3 / 10) * 10 , - interval: 10, - ... + axisLabel: { + fontSize: 14, + color: store.state.theme === 'dark' ? '#CCCFD1' : '#2E3133' + } + }, + yAxis: { + type: "value", + min: 0, + max: maxVal, + interval, + name: "Number of Pipelines", + nameLocation: "middle", + nameGap: 60, + nameRotate: 90, + nameTextStyle: { + fontSize: 16, + fontWeight: "normal", + color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B' }, - series: [ - { - data: [summary.value.healthy_pipelines, summary.value.failed_pipelines, summary.value.warning_pipelines], - type: "bar", - ... + axisLabel: { + fontSize: 12, + color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B' + }, + splitLine: { + lineStyle: { + color: store.state.theme === 'dark' ? '#444' : '#e0e0e0' } - ] - }; + } + }, + series: [ + { + data: [healthy, failed, warning], + type: "bar", + barWidth: "50%", + label: { + show: true, + position: "top", + fontSize: 14, + fontWeight: "bold", + color: store.state.theme === 'dark' ? '#CCCFD1' : '#2E3133' + }, + itemStyle: { + color: function (params) { + const colors = ['#16b26a', '#db373b', '#ffc328']; + return colors[params.dataIndex]; + } + } + } + ] + }; }); Suggestion importance[1-10]: 6 __ Why: Ensuring a minimum `yAxis.max` and reasonable interval avoids an empty or malformed chart when all counts are zero. The change is contextually correct and moderately improves robustness.	Low
General	Use q-btn router navigation Nesting a full-size 'router-link' inside 'q-btn' can create overlapping interactive elements and accessibility issues. Use the 'to' prop on 'q-btn' (router mode) instead to make the whole button a link safely. web/src/views/HomeView.vue [26-33] -<q-btn no-caps flat :class="store.state.theme === 'dark' ? 'view-button-dark' : 'view-button-light'" - >View - <router-link - exact - :to="{ name: 'logstreams' }" - class="absolute full-width full-height" - ></router-link> -</q-btn> +<q-btn + no-caps + flat + :class="store.state.theme === 'dark' ? 'view-button-dark' : 'view-button-light'" + :to="{ name: 'logstreams' }" + label="View" +/> Suggestion importance[1-10]: 5 __ Why: Using the `to` prop on `q-btn` avoids nested interactive elements and is a best practice. It’s a minor but valid improvement to accessibility and maintainability.	Low

greptile-apps

Greptile Summary

This PR completely redesigns the HomeView component, transforming it from a simple card-based statistics display into a modern dashboard-style interface with enhanced visual elements and interactivity. The changes include:

Layout Overhaul: The existing card layout has been replaced with a responsive tile-based design featuring stream statistics with descriptive icons and improved visual hierarchy using Tailwind CSS classes alongside Quasar components.

Chart Integration: Two new interactive charts have been added using the CustomChartRenderer component - a pie chart displaying alert status distribution (healthy vs failed alerts) and a bar chart showing pipeline status over time. These charts are configured through comprehensive computed properties that define chart schemas, themes, and data transformations.

Enhanced State Management: The component now handles additional summary data fields including failed_pipelines, healthy_pipelines, failed_alerts, and healthy_alerts to power the new chart visualizations. The data fetching logic has been updated to accommodate these new fields.

Theming Improvements: Comprehensive dark/light theme support has been implemented throughout the redesign, with proper color schemes for both the tiles and charts that adapt to the current theme setting.

Responsive Design: The new layout includes responsive breakpoints and flexible grid systems that adapt to different screen sizes, improving the user experience across devices.

This change represents a significant UI/UX enhancement aimed at providing operations teams with better visual insights into system health through actionable charts rather than just raw numerical statistics.

Confidence score: 3/5

This PR introduces significant UI changes with potential issues around chart data handling and notification types that could affect functionality
Score reflects concerns about chart key management, error notification changes, and complex computed property logic that may need testing
Pay close attention to the chart configuration logic in computed properties and data key handling for the CustomChartRenderer components

_{1 file reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

first draft done with landing page made landing page responsive fix: dark mode home view added added view button functionality fix: made bottom section responsive container width made responsive bottom section made it responsive made chart renderer responsive made title to center fix streams icon fix: height also made resposinve fix: made dark and light mode icons reduced min height to fit for smaller screens min height still reduced to 200 added dynamic data to the chart config dashboard and fn icon changed hide performace text as not supported from BE

Signed-off-by: Yashodhan Joshi <[email protected]>

github-actions bot added the ☢️ Bug Something isn't working label May 6, 2025

greptile-apps bot reviewed May 6, 2025

View reviewed changes

nikhilsaikethe force-pushed the landing-page-redesign branch 3 times, most recently from acd2528 to 5fb1421 Compare May 7, 2025 08:50

taimingl force-pushed the landing-page-redesign branch from 5fb1421 to 8d5f9c6 Compare May 20, 2025 18:37

nikhilsaikethe marked this pull request as draft August 18, 2025 08:02

nikhilsaikethe force-pushed the landing-page-redesign branch 2 times, most recently from 2a96a6c to 699f979 Compare September 5, 2025 11:25

nikhilsaikethe marked this pull request as ready for review September 5, 2025 11:26

github-actions bot changed the title ~~fix: landing page / Home page revamp~~ fix: landing page / Home page revamp Sep 5, 2025

github-actions bot added the Review effort 3/5 label Sep 5, 2025

greptile-apps bot reviewed Sep 5, 2025

View reviewed changes

nikhilsaikethe force-pushed the landing-page-redesign branch 4 times, most recently from 4aab89d to 76642f8 Compare September 11, 2025 08:58

nikhilsaikethe added 10 commits September 11, 2025 15:29

fix: add trail period expire at home page

35ca88c

fix: overflow height of entire page fixed

a58d47f

fix: added view button for dashboards and functions

2da930f

fix: when ai chat enabled the home page should adjust to overflow

6127adf

fix: add spacing for trail period inside home page

e199877

add md padding at bottom

ebb9155

fix: less spacing

9ff4cec

fix: introduce pipelines , alerts icon

0088fe1

fix: remove old unit test cases

b7ac6c5

nikhilsaikethe force-pushed the landing-page-redesign branch from 70e0923 to b7ac6c5 Compare September 11, 2025 09:59

bjp232004 approved these changes Sep 11, 2025

View reviewed changes

taimingl and others added 4 commits September 11, 2025 15:57

feat: additional metrics for homepage summary api

30ebc3e

fix: rebase fixes

7ee8dca

Signed-off-by: Yashodhan Joshi <[email protected]>

fix: add missing clone derive

4b591ee

Signed-off-by: Yashodhan Joshi <[email protected]>

fix: compile issues, bogus UTs, clippy

0eef23d

nikhilsaikethe mentioned this pull request Sep 11, 2025

feat: homepage summary #8379

Closed

skip failing e2e test cases

2227567

nikhilsaikethe merged commit 0730d5f into main Sep 11, 2025
28 of 29 checks passed

nikhilsaikethe deleted the landing-page-redesign branch September 11, 2025 11:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: landing page / Home page revamp #6729

fix: landing page / Home page revamp #6729

Uh oh!

nikhilsaikethe commented May 6, 2025 •

edited by github-actions bot

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot May 6, 2025

Uh oh!

nikhilsaikethe May 7, 2025

Uh oh!

greptile-apps bot May 6, 2025

Uh oh!

nikhilsaikethe May 7, 2025

Uh oh!

github-actions bot commented Sep 5, 2025

Uh oh!

github-actions bot commented Sep 5, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

	color: store.state.theme === 'dark' ? '#B7B7B&' : '#72777B'
	color: store.state.theme === 'dark' ? '#B7B7B7' : '#72777B'

fix: landing page / Home page revamp #6729

fix: landing page / Home page revamp #6729

Uh oh!

Conversation

nikhilsaikethe commented May 6, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot May 6, 2025

Choose a reason for hiding this comment

Uh oh!

nikhilsaikethe May 7, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 6, 2025

Choose a reason for hiding this comment

Uh oh!

nikhilsaikethe May 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 5, 2025

PR Reviewer Guide 🔍

Uh oh!

github-actions bot commented Sep 5, 2025

PR Code Suggestions ✨

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 3/5

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

nikhilsaikethe commented May 6, 2025 •

edited by github-actions bot

Loading