signoz/frontend/src/container/ListOfDashboard/DashboardList.styles.scss

1324 lines
27 KiB
SCSS
Raw Normal View History

feat: dashboard revamp according to the latest designs (#4868) * feat: dashboard list view * feat: update sort menu items * feat: wire up add / import dashboard functionss * feat: update import json styles * feat: new dashboard templates modal * feat: add template filter logic * feat: revamp the overview settings modal (#4894) * feat: revamp the overview settings modal * feat: dashboard settings variable landing page * feat: dashboard add variable button settings * feat: add variable modal changes * feat: handle the unsaved changes for general settings * feat: follow ups for side panel section for dashboards (#4906) * feat: changes for tags input * feat: side panel header styles * feat: changes for textbox variable * feat: handle changes for custom type variable * feat: overflow preview vales * feat: overflow preview vales * feat: setup for new dashboard landing page (#4921) * feat: setup for new dashboard landing page * feat: added empty state widgets * feat: added functionality to the configure and the add panel button * feat: tag variables changes * feat: dashboard revamp changes follow ups (#4929) * feat: changes for new panel type modal * fix: added missing / in the breadcrumbs * feat: added dashboard settings menu items * feat: added dashboard rename modal * feat: move full screen handle a few components up * feat: handle rename and copy export changes * feat: minor cleanup * feat: delete button changes * 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 * feat: threshold preview changes (#4990) * feat: threshold preview changes * feat: threshold preview changes * feat: threshold discard handler * fix: remove the horizontal scroll from the dashboards landing page * fix: added margin to dashboard widgets (#4991) * fix: rebase conflicts * feat: dashboard panel grouping change for new designs (#4992) * feat: dashboard panel groping base cleanups * feat: move add panel code from inner component to parent component * feat: new dashboard section panel naming modal * feat: dashboard panel groping base cleanups * feat: grip changes * feat: dashboard list page revamp and functionality additions (#4994) * feat: fix types and code structure for list page * feat: dashboard actions * feat: design changes for tags * feat: design changes for tags * feat: update import json styles * feat: added all dashboards row * feat: added configure metadata linking * feat: added local storage changes for dynamic columns * feat: added user metadata display for metadata modal * feat: configure metadata final changes * feat: handle dashboard list loading state * feat: sort and pagination changes for dashboard list view designs (#4996) * feat: minor list view css changes * feat: added sort functionality to the dashboards list * feat: added sort functionality to the dashboards list * feat: added name dropdown in the settings drawer and image as base64 format (#5000) * feat: added name input in settings drawer * feat: discard handler * feat: implemented the name dropdown * feat: added dashboard list page header * fix: margin of dashboard list container * feat: dashboard empty state (#5005) * feat: light mode changes for new dashboard revamp (#5006) * feat: light mode changes for dahsboards list page * feat: dashboard description landing page changes * feat: variable panels landing page light theme changes * feat: dashboard edit panel light mode * feat: added dashboard list error state (#5011) * feat: added missing light mode designs * fix: usability / customer issues (#5014) * fix: [GH-4986]: preview values not getting updated when the query result is empty * fix: [GH-4985]: fix the usability of dahsboards variables drawer * fix: light mode design for component slider * fix: code cleanup * fix: 0 being added in case of no tags * fix: minor styling fixes * fix: handle silent error for dashboard edit mutation (#5022) * fix: handle silent error for dashboard edit mutation * fix: handle silent error for dashboard edit mutation * fix: rbac changes * fix: grip icon color * fix: new dashboards feedback from testing (#5030) * fix: hide create new dashboards from viewer roles * fix: move the elipsis button right of date time picker and make it a button * fix: remove duplicate button from actions for now * fix: last updated by and created by difference * fix: hide intercom for modals * fix: actions popover not closing * fix: temp remove templates modal from normal flow * fix: delete button event propagation * fix: minor UI fixes (#5032) * fix: update dashboards landing page icons * fix: added lock icon for locked dashboards * fix: updated dashboards list page styles * fix: comment out filters code for phase 2 (#5034) * fix: dashboard revamp ui fixes (#5037) * fix: increase the width of the graph section * fix: remove select and next from component slider * Dashboard vqa 1 (#5090) * fix: dashboard VQA pt 1 * fix: dashboard VQA pt 2 * fix: dashboard VQA pt 3 * fix: dashboard VQA pt 4 * fix: dashboard VQA pt 5 * fix: dashboard VQA pt 6 * fix: dashboard VQA pt 7 * fix: added dashboard locked footer and base64 icons (#5091) * fix: added dashboard locked footer * fix: update base64 images * fix: dashboard delete hover and row actions refactor * fix: dashboard vqa pt 2 (#5098) * fix: review comments * fix: alerts plot tag spacing * fix: css variables update --------- Co-authored-by: Vikrant Gupta <vikrant.thomso@gmail.com>
2024-05-28 19:09:04 +05:30
.dashboards-list-container {
margin-top: 30px;
margin-bottom: 30px;
display: flex;
justify-content: center;
width: 100%;
.dashboards-list-view-content {
width: calc(100% - 30px);
max-width: 836px;
.dashboards-list-title-container {
.title {
color: var(--bg-vanilla-100);
font-size: var(--font-size-lg);
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: 28px; /* 155.556% */
letter-spacing: -0.09px;
}
.subtitle {
color: var(--bg-vanilla-400);
font-size: var(--font-size-sm);
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: 20px; /* 142.857% */
letter-spacing: -0.07px;
}
}
.ant-table-row {
.ant-table-cell {
padding: 0;
border: none;
background: var(--bg-ink-500);
}
.dashboard-list-item {
padding: 12px 16px 16px 16px;
border: 1px solid var(--bg-slate-500);
border-top: none;
background: var(--bg-ink-400);
cursor: pointer;
.dashboard-title {
color: var(--bg-vanilla-100);
}
feat: dashboard revamp according to the latest designs (#4868) * feat: dashboard list view * feat: update sort menu items * feat: wire up add / import dashboard functionss * feat: update import json styles * feat: new dashboard templates modal * feat: add template filter logic * feat: revamp the overview settings modal (#4894) * feat: revamp the overview settings modal * feat: dashboard settings variable landing page * feat: dashboard add variable button settings * feat: add variable modal changes * feat: handle the unsaved changes for general settings * feat: follow ups for side panel section for dashboards (#4906) * feat: changes for tags input * feat: side panel header styles * feat: changes for textbox variable * feat: handle changes for custom type variable * feat: overflow preview vales * feat: overflow preview vales * feat: setup for new dashboard landing page (#4921) * feat: setup for new dashboard landing page * feat: added empty state widgets * feat: added functionality to the configure and the add panel button * feat: tag variables changes * feat: dashboard revamp changes follow ups (#4929) * feat: changes for new panel type modal * fix: added missing / in the breadcrumbs * feat: added dashboard settings menu items * feat: added dashboard rename modal * feat: move full screen handle a few components up * feat: handle rename and copy export changes * feat: minor cleanup * feat: delete button changes * 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 * feat: threshold preview changes (#4990) * feat: threshold preview changes * feat: threshold preview changes * feat: threshold discard handler * fix: remove the horizontal scroll from the dashboards landing page * fix: added margin to dashboard widgets (#4991) * fix: rebase conflicts * feat: dashboard panel grouping change for new designs (#4992) * feat: dashboard panel groping base cleanups * feat: move add panel code from inner component to parent component * feat: new dashboard section panel naming modal * feat: dashboard panel groping base cleanups * feat: grip changes * feat: dashboard list page revamp and functionality additions (#4994) * feat: fix types and code structure for list page * feat: dashboard actions * feat: design changes for tags * feat: design changes for tags * feat: update import json styles * feat: added all dashboards row * feat: added configure metadata linking * feat: added local storage changes for dynamic columns * feat: added user metadata display for metadata modal * feat: configure metadata final changes * feat: handle dashboard list loading state * feat: sort and pagination changes for dashboard list view designs (#4996) * feat: minor list view css changes * feat: added sort functionality to the dashboards list * feat: added sort functionality to the dashboards list * feat: added name dropdown in the settings drawer and image as base64 format (#5000) * feat: added name input in settings drawer * feat: discard handler * feat: implemented the name dropdown * feat: added dashboard list page header * fix: margin of dashboard list container * feat: dashboard empty state (#5005) * feat: light mode changes for new dashboard revamp (#5006) * feat: light mode changes for dahsboards list page * feat: dashboard description landing page changes * feat: variable panels landing page light theme changes * feat: dashboard edit panel light mode * feat: added dashboard list error state (#5011) * feat: added missing light mode designs * fix: usability / customer issues (#5014) * fix: [GH-4986]: preview values not getting updated when the query result is empty * fix: [GH-4985]: fix the usability of dahsboards variables drawer * fix: light mode design for component slider * fix: code cleanup * fix: 0 being added in case of no tags * fix: minor styling fixes * fix: handle silent error for dashboard edit mutation (#5022) * fix: handle silent error for dashboard edit mutation * fix: handle silent error for dashboard edit mutation * fix: rbac changes * fix: grip icon color * fix: new dashboards feedback from testing (#5030) * fix: hide create new dashboards from viewer roles * fix: move the elipsis button right of date time picker and make it a button * fix: remove duplicate button from actions for now * fix: last updated by and created by difference * fix: hide intercom for modals * fix: actions popover not closing * fix: temp remove templates modal from normal flow * fix: delete button event propagation * fix: minor UI fixes (#5032) * fix: update dashboards landing page icons * fix: added lock icon for locked dashboards * fix: updated dashboards list page styles * fix: comment out filters code for phase 2 (#5034) * fix: dashboard revamp ui fixes (#5037) * fix: increase the width of the graph section * fix: remove select and next from component slider * Dashboard vqa 1 (#5090) * fix: dashboard VQA pt 1 * fix: dashboard VQA pt 2 * fix: dashboard VQA pt 3 * fix: dashboard VQA pt 4 * fix: dashboard VQA pt 5 * fix: dashboard VQA pt 6 * fix: dashboard VQA pt 7 * fix: added dashboard locked footer and base64 icons (#5091) * fix: added dashboard locked footer * fix: update base64 images * fix: dashboard delete hover and row actions refactor * fix: dashboard vqa pt 2 (#5098) * fix: review comments * fix: alerts plot tag spacing * fix: css variables update --------- Co-authored-by: Vikrant Gupta <vikrant.thomso@gmail.com>
2024-05-28 19:09:04 +05:30
.title-with-action {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 24px;
.dashboard-title {
display: flex;
align-items: center;
gap: 6px;
line-height: 20px;
.dot {
min-height: 6px;
min-width: 6px;
border-radius: 50%;
}
.ant-typography {
color: var(--bg-vanilla-100);
font-size: var(--font-size-sm);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: 20px;
letter-spacing: -0.07px;
}
}
.action-btn {
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
.hidden {
display: none;
}
}
}
.dashboard-details {
margin-top: 12px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 24px;
.dashboard-tag {
width: 14px;
height: 14px;
border-radius: 50px;
background: var(--bg-slate-300);
display: flex;
justify-content: center;
align-items: center;
.tag-text {
color: var(--bg-vanilla-400);
leading-trim: both;
text-edge: cap;
font-size: 8px;
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: normal;
letter-spacing: -0.05px;
}
}
.created-by {
display: flex;
align-items: center;
.dashboard-tag {
width: 14px;
height: 14px;
border-radius: 50px;
background: var(--bg-slate-300);
display: flex;
justify-content: center;
align-items: center;
.tag-text {
color: var(--bg-vanilla-400);
leading-trim: both;
text-edge: cap;
font-size: 8px;
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: normal;
letter-spacing: -0.05px;
}
}
.dashboard-created-by {
margin-left: 8px;
color: var(--Vanilla-400, #c0c1c3);
font-variant-numeric: lining-nums tabular-nums stacked-fractions
slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
font-family: Inter;
font-size: 12px;
feat: dashboard revamp according to the latest designs (#4868) * feat: dashboard list view * feat: update sort menu items * feat: wire up add / import dashboard functionss * feat: update import json styles * feat: new dashboard templates modal * feat: add template filter logic * feat: revamp the overview settings modal (#4894) * feat: revamp the overview settings modal * feat: dashboard settings variable landing page * feat: dashboard add variable button settings * feat: add variable modal changes * feat: handle the unsaved changes for general settings * feat: follow ups for side panel section for dashboards (#4906) * feat: changes for tags input * feat: side panel header styles * feat: changes for textbox variable * feat: handle changes for custom type variable * feat: overflow preview vales * feat: overflow preview vales * feat: setup for new dashboard landing page (#4921) * feat: setup for new dashboard landing page * feat: added empty state widgets * feat: added functionality to the configure and the add panel button * feat: tag variables changes * feat: dashboard revamp changes follow ups (#4929) * feat: changes for new panel type modal * fix: added missing / in the breadcrumbs * feat: added dashboard settings menu items * feat: added dashboard rename modal * feat: move full screen handle a few components up * feat: handle rename and copy export changes * feat: minor cleanup * feat: delete button changes * 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 * feat: threshold preview changes (#4990) * feat: threshold preview changes * feat: threshold preview changes * feat: threshold discard handler * fix: remove the horizontal scroll from the dashboards landing page * fix: added margin to dashboard widgets (#4991) * fix: rebase conflicts * feat: dashboard panel grouping change for new designs (#4992) * feat: dashboard panel groping base cleanups * feat: move add panel code from inner component to parent component * feat: new dashboard section panel naming modal * feat: dashboard panel groping base cleanups * feat: grip changes * feat: dashboard list page revamp and functionality additions (#4994) * feat: fix types and code structure for list page * feat: dashboard actions * feat: design changes for tags * feat: design changes for tags * feat: update import json styles * feat: added all dashboards row * feat: added configure metadata linking * feat: added local storage changes for dynamic columns * feat: added user metadata display for metadata modal * feat: configure metadata final changes * feat: handle dashboard list loading state * feat: sort and pagination changes for dashboard list view designs (#4996) * feat: minor list view css changes * feat: added sort functionality to the dashboards list * feat: added sort functionality to the dashboards list * feat: added name dropdown in the settings drawer and image as base64 format (#5000) * feat: added name input in settings drawer * feat: discard handler * feat: implemented the name dropdown * feat: added dashboard list page header * fix: margin of dashboard list container * feat: dashboard empty state (#5005) * feat: light mode changes for new dashboard revamp (#5006) * feat: light mode changes for dahsboards list page * feat: dashboard description landing page changes * feat: variable panels landing page light theme changes * feat: dashboard edit panel light mode * feat: added dashboard list error state (#5011) * feat: added missing light mode designs * fix: usability / customer issues (#5014) * fix: [GH-4986]: preview values not getting updated when the query result is empty * fix: [GH-4985]: fix the usability of dahsboards variables drawer * fix: light mode design for component slider * fix: code cleanup * fix: 0 being added in case of no tags * fix: minor styling fixes * fix: handle silent error for dashboard edit mutation (#5022) * fix: handle silent error for dashboard edit mutation * fix: handle silent error for dashboard edit mutation * fix: rbac changes * fix: grip icon color * fix: new dashboards feedback from testing (#5030) * fix: hide create new dashboards from viewer roles * fix: move the elipsis button right of date time picker and make it a button * fix: remove duplicate button from actions for now * fix: last updated by and created by difference * fix: hide intercom for modals * fix: actions popover not closing * fix: temp remove templates modal from normal flow * fix: delete button event propagation * fix: minor UI fixes (#5032) * fix: update dashboards landing page icons * fix: added lock icon for locked dashboards * fix: updated dashboards list page styles * fix: comment out filters code for phase 2 (#5034) * fix: dashboard revamp ui fixes (#5037) * fix: increase the width of the graph section * fix: remove select and next from component slider * Dashboard vqa 1 (#5090) * fix: dashboard VQA pt 1 * fix: dashboard VQA pt 2 * fix: dashboard VQA pt 3 * fix: dashboard VQA pt 4 * fix: dashboard VQA pt 5 * fix: dashboard VQA pt 6 * fix: dashboard VQA pt 7 * fix: added dashboard locked footer and base64 icons (#5091) * fix: added dashboard locked footer * fix: update base64 images * fix: dashboard delete hover and row actions refactor * fix: dashboard vqa pt 2 (#5098) * fix: review comments * fix: alerts plot tag spacing * fix: css variables update --------- Co-authored-by: Vikrant Gupta <vikrant.thomso@gmail.com>
2024-05-28 19:09:04 +05:30
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
}
}
.dashboard-created-at {
display: flex;
align-items: center;
.ant-typography {
margin-left: 6px;
color: var(--bg-vanilla-400);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
color: var(--Vanilla-400, #c0c1c3);
font-variant-numeric: lining-nums tabular-nums stacked-fractions
slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
font-family: Inter;
font-size: 12px;
feat: dashboard revamp according to the latest designs (#4868) * feat: dashboard list view * feat: update sort menu items * feat: wire up add / import dashboard functionss * feat: update import json styles * feat: new dashboard templates modal * feat: add template filter logic * feat: revamp the overview settings modal (#4894) * feat: revamp the overview settings modal * feat: dashboard settings variable landing page * feat: dashboard add variable button settings * feat: add variable modal changes * feat: handle the unsaved changes for general settings * feat: follow ups for side panel section for dashboards (#4906) * feat: changes for tags input * feat: side panel header styles * feat: changes for textbox variable * feat: handle changes for custom type variable * feat: overflow preview vales * feat: overflow preview vales * feat: setup for new dashboard landing page (#4921) * feat: setup for new dashboard landing page * feat: added empty state widgets * feat: added functionality to the configure and the add panel button * feat: tag variables changes * feat: dashboard revamp changes follow ups (#4929) * feat: changes for new panel type modal * fix: added missing / in the breadcrumbs * feat: added dashboard settings menu items * feat: added dashboard rename modal * feat: move full screen handle a few components up * feat: handle rename and copy export changes * feat: minor cleanup * feat: delete button changes * 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 * feat: threshold preview changes (#4990) * feat: threshold preview changes * feat: threshold preview changes * feat: threshold discard handler * fix: remove the horizontal scroll from the dashboards landing page * fix: added margin to dashboard widgets (#4991) * fix: rebase conflicts * feat: dashboard panel grouping change for new designs (#4992) * feat: dashboard panel groping base cleanups * feat: move add panel code from inner component to parent component * feat: new dashboard section panel naming modal * feat: dashboard panel groping base cleanups * feat: grip changes * feat: dashboard list page revamp and functionality additions (#4994) * feat: fix types and code structure for list page * feat: dashboard actions * feat: design changes for tags * feat: design changes for tags * feat: update import json styles * feat: added all dashboards row * feat: added configure metadata linking * feat: added local storage changes for dynamic columns * feat: added user metadata display for metadata modal * feat: configure metadata final changes * feat: handle dashboard list loading state * feat: sort and pagination changes for dashboard list view designs (#4996) * feat: minor list view css changes * feat: added sort functionality to the dashboards list * feat: added sort functionality to the dashboards list * feat: added name dropdown in the settings drawer and image as base64 format (#5000) * feat: added name input in settings drawer * feat: discard handler * feat: implemented the name dropdown * feat: added dashboard list page header * fix: margin of dashboard list container * feat: dashboard empty state (#5005) * feat: light mode changes for new dashboard revamp (#5006) * feat: light mode changes for dahsboards list page * feat: dashboard description landing page changes * feat: variable panels landing page light theme changes * feat: dashboard edit panel light mode * feat: added dashboard list error state (#5011) * feat: added missing light mode designs * fix: usability / customer issues (#5014) * fix: [GH-4986]: preview values not getting updated when the query result is empty * fix: [GH-4985]: fix the usability of dahsboards variables drawer * fix: light mode design for component slider * fix: code cleanup * fix: 0 being added in case of no tags * fix: minor styling fixes * fix: handle silent error for dashboard edit mutation (#5022) * fix: handle silent error for dashboard edit mutation * fix: handle silent error for dashboard edit mutation * fix: rbac changes * fix: grip icon color * fix: new dashboards feedback from testing (#5030) * fix: hide create new dashboards from viewer roles * fix: move the elipsis button right of date time picker and make it a button * fix: remove duplicate button from actions for now * fix: last updated by and created by difference * fix: hide intercom for modals * fix: actions popover not closing * fix: temp remove templates modal from normal flow * fix: delete button event propagation * fix: minor UI fixes (#5032) * fix: update dashboards landing page icons * fix: added lock icon for locked dashboards * fix: updated dashboards list page styles * fix: comment out filters code for phase 2 (#5034) * fix: dashboard revamp ui fixes (#5037) * fix: increase the width of the graph section * fix: remove select and next from component slider * Dashboard vqa 1 (#5090) * fix: dashboard VQA pt 1 * fix: dashboard VQA pt 2 * fix: dashboard VQA pt 3 * fix: dashboard VQA pt 4 * fix: dashboard VQA pt 5 * fix: dashboard VQA pt 6 * fix: dashboard VQA pt 7 * fix: added dashboard locked footer and base64 icons (#5091) * fix: added dashboard locked footer * fix: update base64 images * fix: dashboard delete hover and row actions refactor * fix: dashboard vqa pt 2 (#5098) * fix: review comments * fix: alerts plot tag spacing * fix: css variables update --------- Co-authored-by: Vikrant Gupta <vikrant.thomso@gmail.com>
2024-05-28 19:09:04 +05:30
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
}
}
.updated-by {
display: flex;
align-items: center;
.text {
color: var(--bg-vanilla-400);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
color: var(--Vanilla-400, #c0c1c3);
font-variant-numeric: lining-nums tabular-nums stacked-fractions
slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
font-family: Inter;
font-size: 12px;
feat: dashboard revamp according to the latest designs (#4868) * feat: dashboard list view * feat: update sort menu items * feat: wire up add / import dashboard functionss * feat: update import json styles * feat: new dashboard templates modal * feat: add template filter logic * feat: revamp the overview settings modal (#4894) * feat: revamp the overview settings modal * feat: dashboard settings variable landing page * feat: dashboard add variable button settings * feat: add variable modal changes * feat: handle the unsaved changes for general settings * feat: follow ups for side panel section for dashboards (#4906) * feat: changes for tags input * feat: side panel header styles * feat: changes for textbox variable * feat: handle changes for custom type variable * feat: overflow preview vales * feat: overflow preview vales * feat: setup for new dashboard landing page (#4921) * feat: setup for new dashboard landing page * feat: added empty state widgets * feat: added functionality to the configure and the add panel button * feat: tag variables changes * feat: dashboard revamp changes follow ups (#4929) * feat: changes for new panel type modal * fix: added missing / in the breadcrumbs * feat: added dashboard settings menu items * feat: added dashboard rename modal * feat: move full screen handle a few components up * feat: handle rename and copy export changes * feat: minor cleanup * feat: delete button changes * 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 * feat: threshold preview changes (#4990) * feat: threshold preview changes * feat: threshold preview changes * feat: threshold discard handler * fix: remove the horizontal scroll from the dashboards landing page * fix: added margin to dashboard widgets (#4991) * fix: rebase conflicts * feat: dashboard panel grouping change for new designs (#4992) * feat: dashboard panel groping base cleanups * feat: move add panel code from inner component to parent component * feat: new dashboard section panel naming modal * feat: dashboard panel groping base cleanups * feat: grip changes * feat: dashboard list page revamp and functionality additions (#4994) * feat: fix types and code structure for list page * feat: dashboard actions * feat: design changes for tags * feat: design changes for tags * feat: update import json styles * feat: added all dashboards row * feat: added configure metadata linking * feat: added local storage changes for dynamic columns * feat: added user metadata display for metadata modal * feat: configure metadata final changes * feat: handle dashboard list loading state * feat: sort and pagination changes for dashboard list view designs (#4996) * feat: minor list view css changes * feat: added sort functionality to the dashboards list * feat: added sort functionality to the dashboards list * feat: added name dropdown in the settings drawer and image as base64 format (#5000) * feat: added name input in settings drawer * feat: discard handler * feat: implemented the name dropdown * feat: added dashboard list page header * fix: margin of dashboard list container * feat: dashboard empty state (#5005) * feat: light mode changes for new dashboard revamp (#5006) * feat: light mode changes for dahsboards list page * feat: dashboard description landing page changes * feat: variable panels landing page light theme changes * feat: dashboard edit panel light mode * feat: added dashboard list error state (#5011) * feat: added missing light mode designs * fix: usability / customer issues (#5014) * fix: [GH-4986]: preview values not getting updated when the query result is empty * fix: [GH-4985]: fix the usability of dahsboards variables drawer * fix: light mode design for component slider * fix: code cleanup * fix: 0 being added in case of no tags * fix: minor styling fixes * fix: handle silent error for dashboard edit mutation (#5022) * fix: handle silent error for dashboard edit mutation * fix: handle silent error for dashboard edit mutation * fix: rbac changes * fix: grip icon color * fix: new dashboards feedback from testing (#5030) * fix: hide create new dashboards from viewer roles * fix: move the elipsis button right of date time picker and make it a button * fix: remove duplicate button from actions for now * fix: last updated by and created by difference * fix: hide intercom for modals * fix: actions popover not closing * fix: temp remove templates modal from normal flow * fix: delete button event propagation * fix: minor UI fixes (#5032) * fix: update dashboards landing page icons * fix: added lock icon for locked dashboards * fix: updated dashboards list page styles * fix: comment out filters code for phase 2 (#5034) * fix: dashboard revamp ui fixes (#5037) * fix: increase the width of the graph section * fix: remove select and next from component slider * Dashboard vqa 1 (#5090) * fix: dashboard VQA pt 1 * fix: dashboard VQA pt 2 * fix: dashboard VQA pt 3 * fix: dashboard VQA pt 4 * fix: dashboard VQA pt 5 * fix: dashboard VQA pt 6 * fix: dashboard VQA pt 7 * fix: added dashboard locked footer and base64 icons (#5091) * fix: added dashboard locked footer * fix: update base64 images * fix: dashboard delete hover and row actions refactor * fix: dashboard vqa pt 2 (#5098) * fix: review comments * fix: alerts plot tag spacing * fix: css variables update --------- Co-authored-by: Vikrant Gupta <vikrant.thomso@gmail.com>
2024-05-28 19:09:04 +05:30
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
}
.dashboard-tag {
width: 14px;
height: 14px;
border-radius: 50px;
background: var(--bg-slate-300);
display: flex;
justify-content: center;
align-items: center;
.tag-text {
color: var(--bg-vanilla-400);
leading-trim: both;
text-edge: cap;
font-size: 8px;
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: normal;
letter-spacing: -0.05px;
}
}
.dashboard-created-by {
margin-left: 8px;
color: var(--Vanilla-400, #c0c1c3);
font-variant-numeric: lining-nums tabular-nums stacked-fractions
slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
font-family: Inter;
font-size: 12px;
feat: dashboard revamp according to the latest designs (#4868) * feat: dashboard list view * feat: update sort menu items * feat: wire up add / import dashboard functionss * feat: update import json styles * feat: new dashboard templates modal * feat: add template filter logic * feat: revamp the overview settings modal (#4894) * feat: revamp the overview settings modal * feat: dashboard settings variable landing page * feat: dashboard add variable button settings * feat: add variable modal changes * feat: handle the unsaved changes for general settings * feat: follow ups for side panel section for dashboards (#4906) * feat: changes for tags input * feat: side panel header styles * feat: changes for textbox variable * feat: handle changes for custom type variable * feat: overflow preview vales * feat: overflow preview vales * feat: setup for new dashboard landing page (#4921) * feat: setup for new dashboard landing page * feat: added empty state widgets * feat: added functionality to the configure and the add panel button * feat: tag variables changes * feat: dashboard revamp changes follow ups (#4929) * feat: changes for new panel type modal * fix: added missing / in the breadcrumbs * feat: added dashboard settings menu items * feat: added dashboard rename modal * feat: move full screen handle a few components up * feat: handle rename and copy export changes * feat: minor cleanup * feat: delete button changes * 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 * feat: threshold preview changes (#4990) * feat: threshold preview changes * feat: threshold preview changes * feat: threshold discard handler * fix: remove the horizontal scroll from the dashboards landing page * fix: added margin to dashboard widgets (#4991) * fix: rebase conflicts * feat: dashboard panel grouping change for new designs (#4992) * feat: dashboard panel groping base cleanups * feat: move add panel code from inner component to parent component * feat: new dashboard section panel naming modal * feat: dashboard panel groping base cleanups * feat: grip changes * feat: dashboard list page revamp and functionality additions (#4994) * feat: fix types and code structure for list page * feat: dashboard actions * feat: design changes for tags * feat: design changes for tags * feat: update import json styles * feat: added all dashboards row * feat: added configure metadata linking * feat: added local storage changes for dynamic columns * feat: added user metadata display for metadata modal * feat: configure metadata final changes * feat: handle dashboard list loading state * feat: sort and pagination changes for dashboard list view designs (#4996) * feat: minor list view css changes * feat: added sort functionality to the dashboards list * feat: added sort functionality to the dashboards list * feat: added name dropdown in the settings drawer and image as base64 format (#5000) * feat: added name input in settings drawer * feat: discard handler * feat: implemented the name dropdown * feat: added dashboard list page header * fix: margin of dashboard list container * feat: dashboard empty state (#5005) * feat: light mode changes for new dashboard revamp (#5006) * feat: light mode changes for dahsboards list page * feat: dashboard description landing page changes * feat: variable panels landing page light theme changes * feat: dashboard edit panel light mode * feat: added dashboard list error state (#5011) * feat: added missing light mode designs * fix: usability / customer issues (#5014) * fix: [GH-4986]: preview values not getting updated when the query result is empty * fix: [GH-4985]: fix the usability of dahsboards variables drawer * fix: light mode design for component slider * fix: code cleanup * fix: 0 being added in case of no tags * fix: minor styling fixes * fix: handle silent error for dashboard edit mutation (#5022) * fix: handle silent error for dashboard edit mutation * fix: handle silent error for dashboard edit mutation * fix: rbac changes * fix: grip icon color * fix: new dashboards feedback from testing (#5030) * fix: hide create new dashboards from viewer roles * fix: move the elipsis button right of date time picker and make it a button * fix: remove duplicate button from actions for now * fix: last updated by and created by difference * fix: hide intercom for modals * fix: actions popover not closing * fix: temp remove templates modal from normal flow * fix: delete button event propagation * fix: minor UI fixes (#5032) * fix: update dashboards landing page icons * fix: added lock icon for locked dashboards * fix: updated dashboards list page styles * fix: comment out filters code for phase 2 (#5034) * fix: dashboard revamp ui fixes (#5037) * fix: increase the width of the graph section * fix: remove select and next from component slider * Dashboard vqa 1 (#5090) * fix: dashboard VQA pt 1 * fix: dashboard VQA pt 2 * fix: dashboard VQA pt 3 * fix: dashboard VQA pt 4 * fix: dashboard VQA pt 5 * fix: dashboard VQA pt 6 * fix: dashboard VQA pt 7 * fix: added dashboard locked footer and base64 icons (#5091) * fix: added dashboard locked footer * fix: update base64 images * fix: dashboard delete hover and row actions refactor * fix: dashboard vqa pt 2 (#5098) * fix: review comments * fix: alerts plot tag spacing * fix: css variables update --------- Co-authored-by: Vikrant Gupta <vikrant.thomso@gmail.com>
2024-05-28 19:09:04 +05:30
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
}
}
}
}
}
.ant-pagination-item {
display: flex;
justify-content: center;
align-items: center;
> a {
color: var(--bg-vanilla-400);
font-variant-numeric: lining-nums tabular-nums slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on;
font-size: var(--font-size-sm);
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: 20px; /* 142.857% */
}
}
.ant-pagination-item-active {
background-color: var(--bg-robin-500);
> a {
color: var(--bg-ink-500) !important;
font-size: var(--font-size-sm);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: 20px;
}
}
.ant-table-tbody {
.ant-table-row:last-child {
.dashboard-list-item {
border-radius: 0px 0px 6px 6px;
}
}
}
}
.dashboards-list-header-container {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 0;
.btn {
padding: 5.937px 11.875px;
}
}
.ant-pagination-total-text {
display: flex;
gap: 4px;
align-items: center;
.numbers {
font-family: 'Space Mono';
}
.total {
font-family: 'Space Mono';
color: var(--bg-vanilla-300);
}
}
.dashboard-error-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(--bg-slate-500);
gap: 4px;
.error-text {
color: var(--bg-vanilla-100);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
}
.action-btns {
display: flex;
gap: 24px;
align-items: center;
margin-top: 20px;
.retry-btn {
display: flex;
align-items: center;
height: 32px;
padding: 5.937px 11.875px;
justify-content: center;
gap: 5.937px;
border-radius: 1.484px;
background: var(--bg-slate-500);
color: var(--bg-vanilla-100);
.ant-btn-icon {
margin-inline-end: 0px;
}
}
.learn-more {
color: var(--bg-robin-400);
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(--bg-robin-400);
cursor: pointer;
}
}
}
.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(--bg-slate-500);
.dashboard-img {
width: 32px;
height: 32px;
}
.text {
margin-top: 4px;
.no-dashboard {
color: var(--bg-vanilla-100);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
}
.info {
color: var(--bg-vanilla-400);
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(--bg-robin-500);
color: var(--bg-vanilla-100);
.ant-btn-icon {
margin-inline-end: 0px;
}
}
.learn-more {
color: var(--bg-robin-400);
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(--bg-robin-400);
cursor: pointer;
}
}
}
.loading-dashboard-details {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
.skeleton-1 {
height: 125px;
width: 100%;
}
}
.no-search {
display: flex;
flex-direction: column;
height: 320px;
gap: 8px;
padding: 105px 190px;
margin-top: 16px;
justify-content: center;
align-items: flex-start;
border-radius: 6px;
border: 1px dashed var(--bg-slate-500);
.img {
width: 32px;
height: 32px;
}
.text {
color: var(--bg-vanilla-100);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
}
}
.all-dashboards-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
height: 44px;
flex-shrink: 0;
border-radius: 6px 6px 0px 0px;
border: 1px solid var(--bg-slate-500);
background: var(--bg-ink-400);
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
.typography {
color: var(--bg-vanilla-400);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: -0.07px;
}
.right-actions {
display: flex;
gap: 12px;
color: white;
cursor: pointer;
}
}
.tags-with-actions {
display: flex;
align-items: center;
.dashboard-tags {
display: flex;
.tag {
display: flex;
padding: 4px 8px;
justify-content: center;
align-items: center;
gap: 4px;
height: 28px;
border-radius: 20px;
border: 1px solid rgba(173, 127, 88, 0.2);
background: rgba(173, 127, 88, 0.1);
color: var(--bg-sienna-400);
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: -0.07px;
}
}
}
}
.new-dashboard-menu {
.create-dashboard-menu-item {
display: flex;
align-items: center;
gap: 8px;
}
}
.delete-view-modal {
width: calc(100% - 30px) !important; /* Adjust the 20px as needed */
max-width: 384px;
.ant-modal-content {
padding: 0;
border-radius: 4px;
border: 1px solid var(--bg-slate-500);
background: var(--bg-ink-400);
box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
.ant-modal-header {
padding: 16px;
background: var(--bg-ink-400);
}
.ant-modal-body {
padding: 0px 16px 28px 16px;
.ant-typography {
color: var(--bg-vanilla-400);
font-size: var(--font-size-sm);
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: 20px;
letter-spacing: -0.07px;
}
.save-view-input {
margin-top: 8px;
display: flex;
gap: 8px;
}
.ant-color-picker-trigger {
padding: 6px;
border-radius: 2px;
border: 1px solid var(--bg-slate-400);
background: var(--bg-ink-300);
width: 32px;
height: 32px;
.ant-color-picker-color-block {
border-radius: 50px;
width: 16px;
height: 16px;
flex-shrink: 0;
.ant-color-picker-color-block-inner {
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
.ant-modal-footer {
display: flex;
justify-content: flex-end;
padding: 16px 16px;
margin: 0;
.cancel-btn {
display: flex;
align-items: center;
border: none;
border-radius: 2px;
background: var(--bg-slate-500);
}
.delete-btn {
display: flex;
align-items: center;
border: none;
border-radius: 2px;
background: var(--bg-cherry-500);
margin-left: 12px;
}
.delete-btn:hover {
color: var(--bg-vanilla-100);
background: var(--bg-cherry-600);
}
}
}
.title {
color: var(--bg-vanilla-100);
font-size: var(--font-size-sm);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: 20px; /* 142.857% */
}
}
.dashboard-actions {
.ant-popover-inner {
width: 187px;
height: auto;
flex-shrink: 0;
border-radius: 4px;
border: 1px solid var(--bg-slate-400);
background: linear-gradient(
139deg,
rgba(18, 19, 23, 0.8) 0%,
rgba(18, 19, 23, 0.9) 98.68%
);
box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(20px);
padding: 0px;
.dashboard-action-content {
.section-1 {
display: flex;
flex-direction: column;
.action-btn {
display: flex;
padding: 14px;
height: unset;
align-items: center;
gap: 6px;
color: var(--bg-vanilla-400);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.14px;
.ant-icon-btn {
margin-inline-end: 0px;
}
}
}
.section-2 {
display: flex;
flex-direction: column;
border-top: 1px solid var(--bg-slate-400);
.ant-typography {
display: flex;
padding: 14px;
align-items: center;
gap: 6px;
color: var(--bg-cherry-400) !important;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.14px;
}
}
}
}
}
.sort-dashboards {
.ant-popover-inner {
display: flex;
padding: 0px;
align-items: center;
border-radius: 4px;
border: 1px solid var(--bg-slate-400);
background: linear-gradient(
139deg,
rgba(18, 19, 23, 0.8) 0%,
rgba(18, 19, 23, 0.9) 98.68%
);
box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(20px);
gap: 16px;
.sort-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 140px;
.sort-heading {
color: var(--bg-slate-200);
font-family: Inter;
font-size: 11px;
font-style: normal;
font-weight: 600;
line-height: 18px; /* 163.636% */
letter-spacing: 0.88px;
text-transform: uppercase;
padding: 12px 18px 6px 14px;
}
.sort-btns {
text-align: start;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
color: var(--bg-vanilla-400);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.14px;
padding: 12px 18px 12px 14px;
height: auto;
}
}
}
}
.configure-group {
.ant-popover-inner {
display: flex;
align-items: center;
border-radius: 4px;
padding: 0px;
border: 1px solid var(--Slate-400, #1d212d);
background: linear-gradient(
139deg,
rgba(18, 19, 23, 0.8) 0%,
rgba(18, 19, 23, 0.9) 98.68%
);
box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(20px);
gap: 16px;
.configure-content {
display: flex;
flex-direction: column;
align-items: flex-start;
.configure-btn {
display: flex;
text-align: start;
align-items: center;
width: 100%;
color: var(--Vanilla-400, #c0c1c3);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.14px;
padding: 12px;
}
}
}
}
.configure-metadata-root {
.ant-modal-content {
width: 400px;
flex-shrink: 0;
border-radius: 4px;
border: 1px solid var(--Slate-500, #161922);
background: var(--Ink-400, #121317);
box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
padding: 0px;
.ant-modal-header {
background: var(--Ink-400, #121317);
padding: 16px;
border-bottom: 1px solid var(--bg-slate-500);
margin-bottom: 0px;
}
.ant-modal-body {
padding: 14px 16px;
.configure-content {
display: flex;
flex-direction: column;
gap: 14px;
.configure-preview {
display: flex;
padding: 12px 14.634px;
flex-direction: column;
align-items: flex-start;
gap: 7.317px;
border-radius: 4px;
border: 0.915px solid var(--Slate-500, #161922);
background: var(--Ink-300, #16181d);
.header {
display: flex;
gap: 4px;
.title {
color: var(--Vanilla-100, #fff);
font-family: Inter;
font-size: 12.805px;
font-style: normal;
font-weight: 500;
line-height: 18.293px; /* 142.857% */
letter-spacing: -0.064px;
}
}
.details {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
.createdAt {
display: flex;
justify-content: space-between;
align-items: center;
.formatted-time {
display: flex;
gap: 4px;
color: var(--Vanilla-400, #c0c1c3);
font-variant-numeric: lining-nums tabular-nums stacked-fractions
slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
font-family: Inter;
font-size: 12.805px;
font-style: normal;
font-weight: 400;
line-height: 16.463px; /* 128.571% */
letter-spacing: -0.064px;
}
.user {
display: flex;
align-items: center;
gap: 4px;
.user-tag {
width: 12px;
height: 12px;
display: flex;
justify-content: center;
align-items: center;
color: var(--bg-vanilla-400);
font-size: 8px;
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: normal;
letter-spacing: -0.05px;
border-radius: 12.805px;
background-color: var(--bg-ink-500);
}
.dashboard-created-by {
color: var(--Vanilla-400, #c0c1c3);
font-variant-numeric: lining-nums tabular-nums stacked-fractions
slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
font-family: Inter;
font-size: 12.805px;
font-style: normal;
font-weight: 400;
line-height: 16.463px; /* 128.571% */
letter-spacing: -0.064px;
}
}
}
.updatedAt {
display: flex;
justify-content: space-between;
align-items: center;
.formatted-time {
display: flex;
gap: 4px;
color: var(--Vanilla-400, #c0c1c3);
font-variant-numeric: lining-nums tabular-nums stacked-fractions
slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
font-family: Inter;
font-size: 12.805px;
font-style: normal;
font-weight: 400;
line-height: 16.463px; /* 128.571% */
letter-spacing: -0.064px;
}
.user {
display: flex;
align-items: center;
gap: 4px;
.user-tag {
width: 12px;
height: 12px;
display: flex;
justify-content: center;
align-items: center;
color: var(--bg-vanilla-400);
font-size: 8px;
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: normal;
letter-spacing: -0.05px;
border-radius: 12.805px;
background-color: var(--bg-ink-500);
}
.dashboard-created-by {
color: var(--Vanilla-400, #c0c1c3);
font-variant-numeric: lining-nums tabular-nums stacked-fractions
slashed-zero;
font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
font-family: Inter;
font-size: 12.805px;
font-style: normal;
font-weight: 400;
line-height: 16.463px; /* 128.571% */
letter-spacing: -0.064px;
}
}
}
}
}
.metadata-action {
display: flex;
justify-content: space-between;
align-items: center;
width: 336px;
padding: 0px 0px 0px 14.634px;
.left {
display: flex;
gap: 6px;
align-items: center;
}
.connection-line {
border: 1px dashed var(--bg-slate-400);
min-width: 20px;
height: 0px;
flex-grow: 1;
margin: 0px 8px;
}
}
}
}
.ant-modal-footer {
margin-top: 0px;
padding: 4px 16px 16px 16px;
.save-changes {
display: flex;
width: 100%;
height: 32px;
padding: 8px 16px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 2px;
border: 1px solid var(--Slate-300, #242834);
background: var(--Slate-400, #1d212d);
}
}
}
}
.lightMode {
.dashboards-list-container {
.dashboards-list-view-content {
.title {
color: var(--bg-ink-500);
}
.subtitle {
color: var(--bg-vanilla-400);
}
.ant-table-row {
.ant-table-cell {
background: var(--bg-vanilla-200);
}
&:hover {
.ant-table-cell {
background: var(--bg-vanilla-200) !important;
}
}
.dashboard-list-item {
border: 1px solid var(--bg-vanilla-200);
background: var(--bg-vanilla-100);
.dashboard-title {
color: var(--bg-slate-300);
}
feat: dashboard revamp according to the latest designs (#4868) * feat: dashboard list view * feat: update sort menu items * feat: wire up add / import dashboard functionss * feat: update import json styles * feat: new dashboard templates modal * feat: add template filter logic * feat: revamp the overview settings modal (#4894) * feat: revamp the overview settings modal * feat: dashboard settings variable landing page * feat: dashboard add variable button settings * feat: add variable modal changes * feat: handle the unsaved changes for general settings * feat: follow ups for side panel section for dashboards (#4906) * feat: changes for tags input * feat: side panel header styles * feat: changes for textbox variable * feat: handle changes for custom type variable * feat: overflow preview vales * feat: overflow preview vales * feat: setup for new dashboard landing page (#4921) * feat: setup for new dashboard landing page * feat: added empty state widgets * feat: added functionality to the configure and the add panel button * feat: tag variables changes * feat: dashboard revamp changes follow ups (#4929) * feat: changes for new panel type modal * fix: added missing / in the breadcrumbs * feat: added dashboard settings menu items * feat: added dashboard rename modal * feat: move full screen handle a few components up * feat: handle rename and copy export changes * feat: minor cleanup * feat: delete button changes * 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 * feat: threshold preview changes (#4990) * feat: threshold preview changes * feat: threshold preview changes * feat: threshold discard handler * fix: remove the horizontal scroll from the dashboards landing page * fix: added margin to dashboard widgets (#4991) * fix: rebase conflicts * feat: dashboard panel grouping change for new designs (#4992) * feat: dashboard panel groping base cleanups * feat: move add panel code from inner component to parent component * feat: new dashboard section panel naming modal * feat: dashboard panel groping base cleanups * feat: grip changes * feat: dashboard list page revamp and functionality additions (#4994) * feat: fix types and code structure for list page * feat: dashboard actions * feat: design changes for tags * feat: design changes for tags * feat: update import json styles * feat: added all dashboards row * feat: added configure metadata linking * feat: added local storage changes for dynamic columns * feat: added user metadata display for metadata modal * feat: configure metadata final changes * feat: handle dashboard list loading state * feat: sort and pagination changes for dashboard list view designs (#4996) * feat: minor list view css changes * feat: added sort functionality to the dashboards list * feat: added sort functionality to the dashboards list * feat: added name dropdown in the settings drawer and image as base64 format (#5000) * feat: added name input in settings drawer * feat: discard handler * feat: implemented the name dropdown * feat: added dashboard list page header * fix: margin of dashboard list container * feat: dashboard empty state (#5005) * feat: light mode changes for new dashboard revamp (#5006) * feat: light mode changes for dahsboards list page * feat: dashboard description landing page changes * feat: variable panels landing page light theme changes * feat: dashboard edit panel light mode * feat: added dashboard list error state (#5011) * feat: added missing light mode designs * fix: usability / customer issues (#5014) * fix: [GH-4986]: preview values not getting updated when the query result is empty * fix: [GH-4985]: fix the usability of dahsboards variables drawer * fix: light mode design for component slider * fix: code cleanup * fix: 0 being added in case of no tags * fix: minor styling fixes * fix: handle silent error for dashboard edit mutation (#5022) * fix: handle silent error for dashboard edit mutation * fix: handle silent error for dashboard edit mutation * fix: rbac changes * fix: grip icon color * fix: new dashboards feedback from testing (#5030) * fix: hide create new dashboards from viewer roles * fix: move the elipsis button right of date time picker and make it a button * fix: remove duplicate button from actions for now * fix: last updated by and created by difference * fix: hide intercom for modals * fix: actions popover not closing * fix: temp remove templates modal from normal flow * fix: delete button event propagation * fix: minor UI fixes (#5032) * fix: update dashboards landing page icons * fix: added lock icon for locked dashboards * fix: updated dashboards list page styles * fix: comment out filters code for phase 2 (#5034) * fix: dashboard revamp ui fixes (#5037) * fix: increase the width of the graph section * fix: remove select and next from component slider * Dashboard vqa 1 (#5090) * fix: dashboard VQA pt 1 * fix: dashboard VQA pt 2 * fix: dashboard VQA pt 3 * fix: dashboard VQA pt 4 * fix: dashboard VQA pt 5 * fix: dashboard VQA pt 6 * fix: dashboard VQA pt 7 * fix: added dashboard locked footer and base64 icons (#5091) * fix: added dashboard locked footer * fix: update base64 images * fix: dashboard delete hover and row actions refactor * fix: dashboard vqa pt 2 (#5098) * fix: review comments * fix: alerts plot tag spacing * fix: css variables update --------- Co-authored-by: Vikrant Gupta <vikrant.thomso@gmail.com>
2024-05-28 19:09:04 +05:30
.title-with-action {
.dashboard-title {
.ant-typography {
color: var(--bg-ink-500);
}
}
.action-btn {
.ant-typography {
color: var(--bg-ink-500);
}
}
}
.dashboard-details {
.dashboard-tag {
background: var(--bg-vanilla-200);
.tag-text {
color: var(--bg-ink-500);
}
}
.created-by {
.dashboard-tag {
background: var(--bg-vanilla-200);
.tag-text {
color: var(--bg-ink-500);
}
}
.dashboard-created-by {
color: var(--bg-ink-400);
}
}
.updated-by {
.text {
color: var(--bg-ink-400);
}
.dashboard-tag {
background: var(--bg-vanilla-200);
.tag-text {
color: var(--bg-ink-500);
}
}
.dashboard-created-by {
color: var(--bg-ink-400);
}
}
.dashboard-created-by {
color: var(--bg-ink-500);
}
.dashboard-created-at {
.ant-typography {
color: var(--bg-ink-500);
}
}
}
}
}
}
.no-search {
.text {
color: var(--bg-ink-300);
}
}
.all-dashboards-header {
border: 1px solid var(--bg-vanilla-300);
background: var(--bg-vanilla-100);
.typography {
color: var(--bg-ink-400);
}
.right-actions {
color: var(--bg-ink-100);
}
}
.dashboard-empty-state {
.text {
.no-dashboard {
color: var(--bg-ink-100);
}
.info {
color: var(--bg-vanilla-400);
}
}
}
.dashboard-error-state {
.error-text {
color: var(--bg-ink-300);
}
.action-btns {
.retry-btn {
background: var(--bg-vanilla-300);
color: var(--bg-ink-300);
}
}
}
}
.delete-view-modal {
.ant-modal-content {
border: 1px solid var(--bg-vanilla-200);
background: var(--bg-vanilla-100);
.ant-modal-header {
background: var(--bg-vanilla-100);
.title {
color: var(--bg-ink-500);
}
}
.ant-modal-body {
.ant-typography {
color: var(--bg-ink-500);
}
.save-view-input {
.ant-input {
background: var(--bg-vanilla-200);
color: var(--bg-ink-500);
}
}
}
.ant-modal-footer {
.cancel-btn {
background: var(--bg-vanilla-300);
color: var(--bg-ink-400);
}
}
}
}
.dashboard-actions {
.ant-popover-inner {
border: 1px solid var(--bg-vanilla-300);
background: var(--bg-vanilla-100);
.dashboard-action-content {
.section-1 {
.action-btn {
color: var(--bg-ink-400);
}
}
.section-2 {
border-top: 1px solid var(--bg-vanilla-300);
}
}
}
}
.sort-dashboards {
.ant-popover-inner {
border: 1px solid var(--bg-vanilla-300);
background: var(--bg-vanilla-100);
.sort-content {
.sort-heading {
color: var(--bg-vanilla-400);
}
.sort-btns {
color: var(--bg-ink-400);
}
}
}
}
.configure-group {
.ant-popover-inner {
border: 1px solid var(--bg-vanilla-300);
background: var(--bg-vanilla-100);
.configure-content {
.configure-btn {
color: var(--bg-ink-400);
}
}
}
}
.configure-metadata-root {
.ant-modal-content {
border: 1px solid var(--bg-vanilla-300);
background: var(--bg-vanilla-100);
.ant-modal-header {
background: var(--bg-vanilla-100);
border-bottom: 1px solid var(--bg-vanilla-300);
}
.ant-modal-body {
.configure-content {
.configure-preview {
border: 0.915px solid var(--bg-vanilla-300);
background: var(--bg-vanilla-100);
.header {
.title {
color: var(--bg-ink-400);
}
}
.details {
.createdAt {
.formatted-time {
color: var(--bg-ink-400);
}
.user {
.user-tag {
color: var(--bg-ink-400);
background-color: var(--bg-vanilla-300);
}
.dashboard-created-by {
color: var(--bg-ink-400);
}
}
}
.updatedAt {
.formatted-time {
color: var(--bg-ink-400);
}
.user {
.user-tag {
color: var(--bg-ink-400);
background-color: var(--bg-vanilla-300);
}
.dashboard-created-by {
color: var(--bg-ink-400);
}
}
}
}
}
.metadata-action {
.connection-line {
border: 1px dashed var(--bg-vanilla-300);
}
}
}
}
.ant-modal-footer {
.save-changes {
border: 1px solid var(--bg-vanilla-300);
background: var(--bg-vanilla-200);
}
}
}
}
}