hertzbeat icon indicating copy to clipboard operation
hertzbeat copied to clipboard

[Question] On the homepage, can a div be removed when there is no related app available? When it's empty, display a div similar to "Click to add a monitor".

Open LL-LIN opened this issue 10 months ago • 3 comments

Question

首页是否可以在未存在相关APP时,移除div。当全空时展示一个类似“点击添加一个监控”的div On the homepage, can a div be removed when there is no related app available? When it's empty, display a div similar to "Click to add a monitor".

目前我仅有操作系统monitor,但是首页却在轮询滚动其他,感觉不直观 Currently, I only have the operating system monitor, but the homepage is polling and scrolling others, which feels non-intuitive.

Image

LL-LIN avatar Feb 18 '25 08:02 LL-LIN

seem good idea. But when there has no monitors eg: new user in system, how to display here? The "Click to add a monitor" seem not pretty

tomsun28 avatar Feb 18 '25 16:02 tomsun28

solution: 1.conditional display logic

  • Remove empty category sections entirely when no monitors exist for that type.
  • Show a unified "empty state" UI when no monitors exist at all (for new users).

2.Empty State Design

<div class="empty-monitor-state">
  <img src="" alt="Add monitor">
  <h3>No monitors configured yet</h3>
  <button class="primary-button" @click="goToAddMonitor">
    + Add Your First Monitor
  </button>
</div>

3.Visual Treatment

  • Centered layout with friendly illustration
  • Primary action button (60-80px larger than regular buttons)
  • Subtle animation on hover

harshita2626 avatar Mar 28 '25 02:03 harshita2626

solution: 1.conditional display logic

  • Remove empty category sections entirely when no monitors exist for that type.
  • Show a unified "empty state" UI when no monitors exist at all (for new users).

2.Empty State Design

<div class="empty-monitor-state">
  <img src="" alt="Add monitor">
  <h3>No monitors configured yet</h3>
  <button class="primary-button" @click="goToAddMonitor">
    + Add Your First Monitor
  </button>
</div>

3.Visual Treatment

  • Centered layout with friendly illustration
  • Primary action button (60-80px larger than regular buttons)
  • Subtle animation on hover

I agree

LL-LIN avatar Mar 28 '25 02:03 LL-LIN