feat: dashboard widget edit page design revamp (#4946)

* feat: dashboard edit page base setup * feat: right container design revamp * feat: alerts and thresholds changes right container * feat: right container * feat: fix graph styles * fix: some edits for dashboard edit page
SigNoz · May 15, 2024 · c32cf7a · c32cf7a
1 parent 2e5266a
commit c32cf7a
Show file tree

Hide file tree

Showing 28 changed files with 1,018 additions and 435 deletions.
diff --git a/frontend/src/components/TimePreferenceDropDown/TimePreference.styles.scss b/frontend/src/components/TimePreferenceDropDown/TimePreference.styles.scss
@@ -0,0 +1,31 @@
+.time-selection-menu {
+}
+
+.time-selection-target {
+ display: flex;
+ height: 32px;
+ padding: 6px 6px 6px 8px;
+ justify-content: space-between;
+ align-items: center;
+ gap: 4px;
+ align-self: stretch;
+ border-radius: 2px;
+ border: 1px solid var(--Slate-400, #1d212d);
+ background: var(--Ink-300, #16181d);
+ box-shadow: none;
+
+ .button-selected-text {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .selected-value {
+ color: var(--Vanilla-100, #fff);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 16px; /* 133.333% */
+ }
+}
diff --git a/frontend/src/components/TimePreferenceDropDown/index.tsx b/frontend/src/components/TimePreferenceDropDown/index.tsx
@@ -1,13 +1,15 @@
+import './TimePreference.styles.scss';
+
 import { DownOutlined } from '@ant-design/icons';
-import { Button, Dropdown } from 'antd';
+import { Button, Dropdown, Typography } from 'antd';
 import TimeItems, {
  timePreferance,
  timePreferenceType,
 } from 'container/NewWidget/RightContainer/timeItems';
+import { Globe } from 'lucide-react';
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 
 import { menuItems } from './config';
-import { TextContainer } from './styles';
 
 function TimePreference({
  setSelectedTime,
@@ -32,13 +34,21 @@ function TimePreference({
  );
 
  return (
- <TextContainer noButtonMargin>
- <Dropdown menu={menu}>
- <Button>
- {selectedTime.name} <DownOutlined />
- </Button>
- </Dropdown>
- </TextContainer>
+ <Dropdown
+ menu={menu}
+ rootClassName="time-selection-menu"
+ className="time-selection-target"
+ >
+ <Button>
+ <div className="button-selected-text">
+ <Globe size={14} />
+ <Typography.Text className="selected-value">
+ {selectedTime.name}
+ </Typography.Text>
+ </div>
+ <DownOutlined />
+ </Button>
+ </Dropdown>
  );
 }
 

diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
@@ -273,7 +273,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
  * routes with id
  */
  const regex = /^\/dashboard\/[a-zA-Z0-9_-]+$/;
- console.log(regex.test(pathname));
+ return regex.test(pathname);
+ };
+
+ const isDashboardWidgetView = (): boolean => {
+ const regex = /^\/dashboard\/[a-zA-Z0-9_-]+\/new$/;
  return regex.test(pathname);
  };
 
@@ -342,7 +346,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
  <ChildrenContainer
  style={{
  margin:
- isLogsView() || isTracesView() || isDashboardView() ? 0 : ' 0 1rem',
+ isLogsView() ||
+ isTracesView() ||
+ isDashboardView() ||
+ isDashboardWidgetView()
+ ? 0
+ : ' 0 1rem',
  }}
  >
  {isToDisplayLayout && !renderFullScreen && <TopNav />}

diff --git a/frontend/src/container/NewWidget/LeftContainer/LeftContainer.styles.scss b/frontend/src/container/NewWidget/LeftContainer/LeftContainer.styles.scss
@@ -0,0 +1,9 @@
+.query-section-left-container {
+ border: none;
+ border-top: 1px solid var(--Slate-400, #1d212d);
+ background: var(--Ink-500, #0b0c0e);
+
+ .ant-card-body {
+ padding: 0px;
+ }
+}
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss
@@ -8,6 +8,15 @@
  display: flex;
  align-items: center;
  justify-content: center;
+ gap: 4px;
+ color: #fff;
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ letter-spacing: -0.06px;
+ padding: 7px 23px;
 
  .prom-ql-icon {
  height: 14px;
@@ -16,6 +25,7 @@
  }
  .ant-btn-default {
  border-color: transparent;
+ box-shadow: none;
  }
  }
  .ant-tabs-tab-active {
@@ -26,16 +36,26 @@
 
  .ant-tabs-nav {
  margin: 0px;
- margin-bottom: 0.5rem;
+
+ .ant-tabs-nav-wrap {
+ padding: 8px 16px;
+ }
+
+ .ant-tabs-extra-content {
+ padding-right: 8px;
+ }
  }
  .ant-tabs-nav::before {
  border-bottom: none !important;
  }
  .ant-tabs-nav-list {
- border: 1px solid var(--bg-slate-200);
+ border-radius: 2px;
+ border: 1px solid var(--Slate-400, #1d212d);
+ background: var(--Ink-400, #121317);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  }
  .ant-tabs-tab + .ant-tabs-tab {
- border-left: 1px solid var(--bg-slate-200) !important;
+ border-left: 1px solid var(--Slate-400, #1d212d) !important;
  }
  .stage-run-query {
  display: flex;

diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -1,6 +1,6 @@
 import './QuerySection.styles.scss';
 
-import { Button, Tabs, Tooltip, Typography } from 'antd';
+import { Button, Tabs, Typography } from 'antd';
 import TextToolTip from 'components/TextToolTip';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
@@ -142,11 +142,10 @@ function QuerySection({
  {
  key: EQueryType.QUERY_BUILDER,
  label: (
- <Tooltip title="Query Builder">
- <Button className="nav-btns">
- <Atom size={14} />
- </Button>
- </Tooltip>
+ <Button className="nav-btns">
+ <Atom size={14} />
+ <Typography>Query Builder</Typography>
+ </Button>
  ),
  tab: <Typography>Query Builder</Typography>,
  children: (
@@ -164,11 +163,10 @@ function QuerySection({
  {
  key: EQueryType.QUERY_BUILDER,
  label: (
- <Tooltip title="Query Builder">
- <Button className="nav-btns">
- <Atom size={14} />
- </Button>
- </Tooltip>
+ <Button className="nav-btns">
+ <Atom size={14} />
+ <Typography>Query Builder</Typography>
+ </Button>
  ),
  tab: <Typography>Query Builder</Typography>,
  children: (
@@ -182,23 +180,21 @@ function QuerySection({
  {
  key: EQueryType.CLICKHOUSE,
  label: (
- <Tooltip title="ClickHouse">
- <Button className="nav-btns">
- <Terminal size={14} />
- </Button>
- </Tooltip>
+ <Button className="nav-btns">
+ <Terminal size={14} />
+ <Typography>ClickHouse Query</Typography>
+ </Button>
  ),
  tab: <Typography>ClickHouse Query</Typography>,
  children: <ClickHouseQueryContainer />,
  },
  {
  key: EQueryType.PROM,
  label: (
- <Tooltip title="PromQL">
- <Button className="nav-btns">
- <img src="/Icons/promQL.svg" alt="Prom Ql" className="prom-ql-icon" />
- </Button>
- </Tooltip>
+ <Button className="nav-btns">
+ <img src="/Icons/promQL.svg" alt="Prom Ql" className="prom-ql-icon" />
+ <Typography>PromQL</Typography>
+ </Button>
  ),
  tab: <Typography>PromQL</Typography>,
  children: <PromQLQueryContainer />,

diff --git a/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx b/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx
@@ -1,28 +1,14 @@
 import { EQueryType } from 'types/common/dashboard';
 
-import { Tag } from '../styles';
-
 function QueryTypeTag({ queryType }: IQueryTypeTagProps): JSX.Element {
  switch (queryType) {
  case EQueryType.QUERY_BUILDER:
- return (
- <span>
- <Tag color="geekblue">Query Builder</Tag>
- </span>
- );
+ return <span>Query Builder</span>;
 
  case EQueryType.CLICKHOUSE:
- return (
- <span>
- <Tag color="orange">ClickHouse Query</Tag>
- </span>
- );
+ return <span>ClickHouse Query</span>;
  case EQueryType.PROM:
- return (
- <span>
- <Tag color="green">PromQL</Tag>
- </span>
- );
+ return <span>PromQL</span>;
  default:
  return <span />;
  }

diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx
@@ -2,7 +2,6 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
 import QueryTypeTag from '../QueryTypeTag';
-import { PlotTagWrapperStyled } from './styles';
 
 interface IPlotTagProps {
  queryType: EQueryType;
@@ -15,9 +14,9 @@ function PlotTag({ queryType, panelType }: IPlotTagProps): JSX.Element | null {
  }
 
  return (
- <PlotTagWrapperStyled $panelType={panelType}>
- Plotted using <QueryTypeTag queryType={queryType} />
- </PlotTagWrapperStyled>
+ <div className="plot-tag">
+ Plotted with <QueryTypeTag queryType={queryType} />
+ </div>
  );
 }
 

diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.styles.scss b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.styles.scss
@@ -0,0 +1,24 @@
+.widget-graph {
+ border: none;
+ background-color: unset;
+ background-image: radial-gradient(var(--bg-slate-400) 1px, transparent 0);
+ background-size: 20px 20px;
+ padding: 16px;
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .plot-tag {
+ display: inline-flex;
+ padding: 4px 4px 4px 6px;
+ align-items: center;
+ gap: 4px;
+ border-radius: 4px;
+ background: var(--Slate-400, #1d212d);
+ backdrop-filter: blur(6px);
+ width: fit-content;
+ }
+ }
+}
diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
@@ -85,7 +85,18 @@ function WidgetGraph({
  }, []);
 
  return (
- <div ref={graphRef} style={{ height: '100%' }}>
+ <div
+ ref={graphRef}
+ style={{
+ height: '80%',
+ width: '80%',
+ margin: 'auto auto',
+ borderRadius: '3px',
+ border: '1px solid var(--Slate-500, #161922)',
+ background:
+ 'linear-gradient(0deg, rgba(171, 189, 255, 0.00) 0%, rgba(171, 189, 255, 0.00) 100%), #0B0C0E',
+ }}
+ >
  <PanelWrapper
  widget={selectedWidget}
  queryResponse={queryResponse}

diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@@ -1,5 +1,8 @@
+import './WidgetGraph.styles.scss';
+
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Card } from 'container/GridCardLayout/styles';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { memo } from 'react';
 
@@ -21,8 +24,11 @@ function WidgetGraph({
  }
 
  return (
- <Container $panelType={selectedGraph}>
- <PlotTag queryType={currentQuery.queryType} panelType={selectedGraph} />
+ <Container $panelType={selectedGraph} className="widget-graph">
+ <div className="header">
+ <PlotTag queryType={currentQuery.queryType} panelType={selectedGraph} />
+ <DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
+ </div>
  {queryResponse.error && (
  <AlertIconContainer color="red" title={queryResponse.error.message}>
  <InfoCircleOutlined />

diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts
@@ -12,13 +12,10 @@ export const Container = styled(Card)<Props>`
  }
 
  .ant-card-body {
- padding: ${({ $panelType }): string =>
- $panelType === PANEL_TYPES.TABLE || $panelType === PANEL_TYPES.LIST
- ? '0 0'
- : '1.5rem 0'};
  height: 60vh;
  display: flex;
  flex-direction: column;
+ padding: 0px;
  }
 `;
 

diff --git a/frontend/src/container/NewWidget/LeftContainer/index.tsx b/frontend/src/container/NewWidget/LeftContainer/index.tsx
@@ -1,3 +1,5 @@
+import './LeftContainer.styles.scss';
+
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -97,7 +99,7 @@ function LeftContainer({
  setRequestData={setRequestData}
  selectedWidget={selectedWidget}
  />
- <QueryContainer>
+ <QueryContainer className="query-section-left-container">
  <QuerySection selectedGraph={selectedGraph} queryResponse={queryResponse} />
  {selectedGraph === PANEL_TYPES.LIST && (
  <ExplorerColumnsRenderer