mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-12 17:29:03 +08:00
fix: dashboards listing and details page css fixes (#5672)
* fix: dashboards listing and details page css fixes * chore: remove commented code
This commit is contained in:
Yunus M
GitHub
parent
e2e965bc7f
commit
e85b405396
@ -51,6 +51,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
min-height: 24px;
|
||||
|
||||
@ -59,6 +60,14 @@
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
line-height: 20px;
|
||||
width: 60%;
|
||||
|
||||
.dashboard-icon {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
margin-right: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
min-height: 6px;
|
||||
@ -66,6 +75,20 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
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;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-typography {
|
||||
color: var(--bg-vanilla-100);
|
||||
font-size: var(--font-size-sm);
|
||||
@ -86,6 +109,45 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-with-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 40%;
|
||||
justify-content: flex-end;
|
||||
|
||||
.dashboard-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
|
||||
.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;
|
||||
margin-inline-end: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-action-icon {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.dashboard-details {
|
||||
@ -525,35 +587,6 @@
|
||||
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 {
|
||||
@ -681,13 +714,13 @@
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
padding: 14px;
|
||||
padding: 8px;
|
||||
height: unset;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--bg-vanilla-400);
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
@ -706,12 +739,12 @@
|
||||
|
||||
.ant-typography {
|
||||
display: flex;
|
||||
padding: 14px;
|
||||
padding: 12px 8px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--bg-cherry-400) !important;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
@ -1321,3 +1354,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-toolip {
|
||||
.ant-tooltip-content {
|
||||
.ant-tooltip-inner {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -449,79 +449,94 @@ function DashboardsList(): JSX.Element {
|
||||
<div className="dashboard-list-item" onClick={onClickHandler}>
|
||||
<div className="title-with-action">
|
||||
<div className="dashboard-title">
|
||||
<img
|
||||
src={dashboard?.image || Base64Icons[0]}
|
||||
style={{ height: '14px', width: '14px' }}
|
||||
alt="dashboard-image"
|
||||
/>
|
||||
<Typography.Text data-testid={`dashboard-title-${index}`}>
|
||||
<Link to={getLink()} className="dashboard-title">
|
||||
{dashboard.name}
|
||||
</Link>
|
||||
</Typography.Text>
|
||||
<Tooltip
|
||||
title={dashboard?.name?.length > 50 ? dashboard?.name : ''}
|
||||
placement="left"
|
||||
overlayClassName="title-toolip"
|
||||
>
|
||||
<Typography.Text data-testid={`dashboard-title-${index}`}>
|
||||
<Link to={getLink()} className="title">
|
||||
<img
|
||||
src={dashboard?.image || Base64Icons[0]}
|
||||
style={{ height: '14px', width: '14px' }}
|
||||
alt="dashboard-image"
|
||||
className="dashboard-icon"
|
||||
/>
|
||||
{dashboard.name}
|
||||
</Link>
|
||||
</Typography.Text>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="tags-with-actions">
|
||||
{dashboard?.tags && dashboard.tags.length > 0 && (
|
||||
<div className="dashboard-tags">
|
||||
{dashboard.tags.map((tag) => (
|
||||
{dashboard.tags.slice(0, 3).map((tag) => (
|
||||
<Tag className="tag" key={tag}>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
|
||||
{dashboard.tags.length > 3 && (
|
||||
<Tag className="tag" key={dashboard.tags[3]}>
|
||||
+ <span> {dashboard.tags.length - 3} </span>
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{action && (
|
||||
<Popover
|
||||
trigger="click"
|
||||
content={
|
||||
<div className="dashboard-action-content">
|
||||
<section className="section-1">
|
||||
<Button
|
||||
type="text"
|
||||
className="action-btn"
|
||||
icon={<Expand size={14} />}
|
||||
onClick={onClickHandler}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
className="action-btn"
|
||||
icon={<Link2 size={14} />}
|
||||
onClick={(e): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setCopy(`${window.location.origin}${getLink()}`);
|
||||
}}
|
||||
>
|
||||
Copy Link
|
||||
</Button>
|
||||
</section>
|
||||
<section className="section-2">
|
||||
<DeleteButton
|
||||
name={dashboard.name}
|
||||
id={dashboard.id}
|
||||
isLocked={dashboard.isLocked}
|
||||
createdBy={dashboard.createdBy}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
placement="bottomRight"
|
||||
arrow={false}
|
||||
rootClassName="dashboard-actions"
|
||||
>
|
||||
<EllipsisVertical
|
||||
size={14}
|
||||
onClick={(e): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{action && (
|
||||
<Popover
|
||||
trigger="click"
|
||||
content={
|
||||
<div className="dashboard-action-content">
|
||||
<section className="section-1">
|
||||
<Button
|
||||
type="text"
|
||||
className="action-btn"
|
||||
icon={<Expand size={12} />}
|
||||
onClick={onClickHandler}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
className="action-btn"
|
||||
icon={<Link2 size={12} />}
|
||||
onClick={(e): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setCopy(`${window.location.origin}${getLink()}`);
|
||||
}}
|
||||
>
|
||||
Copy Link
|
||||
</Button>
|
||||
</section>
|
||||
<section className="section-2">
|
||||
<DeleteButton
|
||||
name={dashboard.name}
|
||||
id={dashboard.id}
|
||||
isLocked={dashboard.isLocked}
|
||||
createdBy={dashboard.createdBy}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
placement="bottomRight"
|
||||
arrow={false}
|
||||
rootClassName="dashboard-actions"
|
||||
>
|
||||
<EllipsisVertical
|
||||
className="dashboard-action-icon"
|
||||
size={14}
|
||||
onClick={(e): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
<div className="dashboard-details">
|
||||
<div className="dashboard-created-at">
|
||||
|
||||
@ -59,13 +59,16 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-right: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.dashboard-breadcrumbs {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
|
||||
.dashboard-btn {
|
||||
display: flex;
|
||||
@ -99,6 +102,14 @@
|
||||
line-height: 20px; /* 142.857% */
|
||||
height: 20px;
|
||||
|
||||
max-width: calc(100% - 120px);
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ant-btn-icon {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
@ -110,14 +121,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dashbord-details {
|
||||
.dashboard-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 16px 16px 0px 16px;
|
||||
align-items: flex-start;
|
||||
|
||||
.left-section {
|
||||
display: flex;
|
||||
padding: 10px 0px 0px 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 45%;
|
||||
|
||||
.dashboard-title {
|
||||
color: #fff;
|
||||
@ -128,13 +145,23 @@
|
||||
line-height: 24px; /* 150% */
|
||||
letter-spacing: -0.08px;
|
||||
flex-shrink: 0;
|
||||
|
||||
flex: 1;
|
||||
min-width: fit-content;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.right-section {
|
||||
display: flex;
|
||||
width: 55%;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 10px 16px 0px 0px;
|
||||
gap: 14px;
|
||||
|
||||
.icons {
|
||||
@ -199,6 +226,8 @@
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 16px 16px 0px 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
padding: 4px 8px;
|
||||
@ -219,7 +248,6 @@
|
||||
}
|
||||
}
|
||||
.dashboard-description-section {
|
||||
max-width: 957px;
|
||||
color: var(--bg-vanilla-400);
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
@ -578,7 +606,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dashbord-details {
|
||||
.dashboard-details {
|
||||
.left-section {
|
||||
.dashboard-title {
|
||||
color: var(--bg-ink-300);
|
||||
|
||||
@ -294,32 +294,31 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
|
||||
>
|
||||
Dashboard /
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
className="id-btn"
|
||||
icon={
|
||||
// eslint-disable-next-line jsx-a11y/img-redundant-alt
|
||||
<img
|
||||
src={image}
|
||||
alt="dashboard-image"
|
||||
style={{ height: '14px', width: '14px' }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button type="text" className="id-btn dashboard-name-btn">
|
||||
<img
|
||||
src={image}
|
||||
alt="dashboard-icon"
|
||||
style={{ height: '14px', width: '14px' }}
|
||||
/>
|
||||
{title}
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
<section className="dashbord-details">
|
||||
<section className="dashboard-details">
|
||||
<div className="left-section">
|
||||
<img
|
||||
src={image}
|
||||
alt="dashboard-img"
|
||||
style={{ width: '16px', height: '16px' }}
|
||||
/>
|
||||
<Typography.Text className="dashboard-title" data-testid="dashboard-title">
|
||||
{title}
|
||||
</Typography.Text>
|
||||
<Tooltip title={title.length > 30 ? title : ''}>
|
||||
<Typography.Text
|
||||
className="dashboard-title"
|
||||
data-testid="dashboard-title"
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt="dashboard-img"
|
||||
style={{ width: '16px', height: '16px' }}
|
||||
/>{' '}
|
||||
{title}
|
||||
</Typography.Text>
|
||||
</Tooltip>
|
||||
{isDashboardLocked && <LockKeyhole size={14} />}
|
||||
</div>
|
||||
<div className="right-section">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user