feat: dashboard empty state (#5005)

SigNoz · May 14, 2024 · 85492ba · 85492ba
1 parent 4dae3f4
commit 85492ba
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 38 deletions.
diff --git a/frontend/public/Icons/dashboards.svg b/frontend/public/Icons/dashboards.svg
diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -190,10 +190,95 @@
  margin: 16px 0;
  }
 
+ .dashboard-empty-state {
+ display: flex;
+ flex-direction: column;
+ height: 320px;
+ padding: 105px 141px;
+ margin-top: 16px;
+ justify-content: center;
+ align-items: flex-start;
+ border-radius: 6px;
+ border: 1px dashed var(--Slate-500, #161922);
+
+ .dashboard-img {
+ width: 32px;
+ height: 32px;
+ }
+
+ .text {
+ margin-top: 4px;
+ .no-dashboard {
+ color: var(--Vanilla-100, #fff);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 128.571% */
+ letter-spacing: -0.07px;
+ }
+ .info {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 128.571% */
+ letter-spacing: -0.07px;
+ }
+ }
+
+ .actions {
+ display: flex;
+ gap: 24px;
+ align-items: center;
+ margin-top: 24px;
+
+ .new-dashboard {
+ display: flex;
+ width: 153px;
+ align-items: center;
+ height: 32px;
+ padding: 5.937px 11.875px;
+ justify-content: center;
+ gap: 5.937px;
+ border-radius: 1.484px;
+ background: var(--Robin-500, #4e74f8);
+ color: var(--Vanilla-100, #fff);
+
+ .ant-btn-icon {
+ margin-inline-end: 0px;
+ }
+ }
+ .learn-more {
+ color: var(--Robin-400, #7190f9);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 128.571% */
+ letter-spacing: -0.07px;
+ padding: 0px;
+ }
+
+ .learn-more:hover {
+ &.ant-btn-text {
+ background-color: unset;
+ }
+ }
+ .learn-more-arrow {
+ margin-left: -20px;
+ color: var(--Robin-400, #7190f9);
+ cursor: pointer;
+ }
+ }
+ }
+
  .loading-dashboard-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
+ margin-top: 16px;
 
  .skeleton-1 {
  height: 125px;

diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable jsx-a11y/img-redundant-alt */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -33,6 +34,7 @@ import history from 'lib/history';
 import { get, isEmpty } from 'lodash-es';
 import {
  ArrowDownWideNarrow,
+ ArrowUpRight,
  CalendarClock,
  CalendarClockIcon,
  Check,
@@ -586,53 +588,85 @@ function DashboardsList(): JSX.Element {
  </Typography.Text>
  </div>
 
- <div className="dashboards-list-header-container">
- <Dropdown
- overlayClassName="new-dashboard-menu"
- menu={{ items: filterMenuItems }}
- placement="bottomLeft"
- >
- <Button
- type="default"
- className="periscope-btn"
- icon={<SortDesc size={14} />}
- >
- Filter
- </Button>
- </Dropdown>
-
- <Input
- placeholder="Search by name, description, or tags..."
- prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
- value={searchValue}
- onChange={handleSearch}
- />
-
- <Dropdown
- overlayClassName="new-dashboard-menu"
- menu={{ items: getCreateDashboardItems }}
- placement="bottomRight"
- trigger={['click']}
- >
- <Button
- type="primary"
- className="periscope-btn primary"
- icon={<Plus size={14} />}
- >
- New dashboard
- </Button>
- </Dropdown>
- </div>
-
  {isDashboardListLoading || isFilteringDashboards ? (
  <div className="loading-dashboard-details">
  <Skeleton.Input active size="large" className="skeleton-1" />
  <Skeleton.Input active size="large" className="skeleton-1" />
  <Skeleton.Input active size="large" className="skeleton-1" />
  <Skeleton.Input active size="large" className="skeleton-1" />
  </div>
+ ) : dashboards?.length === 0 ? (
+ <div className="dashboard-empty-state">
+ <img
+ src="/Icons/dashboards.svg"
+ alt="dashboards"
+ className="dashboard-img"
+ />
+ <section className="text">
+ <Typography.Text className="no-dashboard">
+ No dashboards yet.{' '}
+ </Typography.Text>
+ <Typography.Text className="info">
+ Create a dashboard to start visualizing your data
+ </Typography.Text>
+ </section>
+
+ <section className="actions">
+ <Dropdown
+ overlayClassName="new-dashboard-menu"
+ menu={{ items: getCreateDashboardItems }}
+ placement="bottomRight"
+ trigger={['click']}
+ >
+ <Button type="text" className="new-dashboard" icon={<Plus size={14} />}>
+ New Dashboard
+ </Button>
+ </Dropdown>
+ <Button type="text" className="learn-more">
+ Learn more
+ </Button>
+ <ArrowUpRight size={16} className="learn-more-arrow" />
+ </section>
+ </div>
  ) : (
  <>
+ <div className="dashboards-list-header-container">
+ <Dropdown
+ overlayClassName="new-dashboard-menu"
+ menu={{ items: filterMenuItems }}
+ placement="bottomLeft"
+ >
+ <Button
+ type="default"
+ className="periscope-btn"
+ icon={<SortDesc size={14} />}
+ >
+ Filter
+ </Button>
+ </Dropdown>
+
+ <Input
+ placeholder="Search by name, description, or tags..."
+ prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+ value={searchValue}
+ onChange={handleSearch}
+ />
+
+ <Dropdown
+ overlayClassName="new-dashboard-menu"
+ menu={{ items: getCreateDashboardItems }}
+ placement="bottomRight"
+ trigger={['click']}
+ >
+ <Button
+ type="primary"
+ className="periscope-btn primary"
+ icon={<Plus size={14} />}
+ >
+ New dashboard
+ </Button>
+ </Dropdown>
+ </div>
  <div className="all-dashboards-header">
  <Typography.Text className="typography">All Dashboards</Typography.Text>
  <section className="right-actions">