Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hotfix/astro 1458 monitor icon fix #134

Merged
merged 4 commits into from
Jun 1, 2021
Merged

Hotfix/astro 1458 monitor icon fix #134

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd6c6ad
Merge pull request #128 from RocketCommunicationsInc/next
dmcalester May 13, 2021
a9fa1d5
fix: missing progress svg
markacianfrani May 28, 2021
17d796a
fix: bug when threshold is set to 100
markacianfrani May 28, 2021
fb092e0
Update rux-monitoring-progress-icon.js
markacianfrani May 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 42 additions & 2 deletions src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class RuxMonitoringProgressIcon extends RuxMonitoringIcon {
status: 'serious',
},
{
threshold: 100,
threshold: 101,
status: 'critical',
},
];
Expand All @@ -84,7 +84,12 @@ export class RuxMonitoringProgressIcon extends RuxMonitoringIcon {

get iconTemplate() {
return html`
<rux-icon icon="progress" class="rux-status--${this.status}"></rux-icon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" style="" class="rux-status--${this.status}">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are you resorting to using the svg instad of the rux-icon component ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is because we need a variable stroke length for the SVG depending on progress %.

Passing all of these svg attributes down through the icon component for this single edge case doesn't make sense.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

5.1 removed the progress icon entirely. Because it's a one off, I just inlined the svg.

<g id="progress">
<circle cx="60" cy="60" r="56" fill="transparent" stroke="rgba(40, 63, 88, 1)" stroke-width="10" transform="rotate(-90 61 60)"/>
<circle cx="60" cy="60" r="56" fill="transparent" stroke-dasharray="351.8583772 351.8583772" stroke-dashoffset="var(--monitoring-progress, 1)" stroke-linecap="round" stroke-width="10" class="progress-ring__circle" transform="rotate(-90 61 60)"/>
</g>
</svg>
<div class="rux-advanced-status__progress">
${Math.ceil((this.progress / this.max) * 100)}%
</div>
Expand All @@ -95,6 +100,41 @@ export class RuxMonitoringProgressIcon extends RuxMonitoringIcon {
return [
super.styles,
css`
svg {
margin: 0 auto;
width: 3rem;
height: 3rem;
}
svg.rux-status--off {
stroke: var(--colorOff, rgb(158, 167, 173));
fill: var(--colorOff, rgb(158, 167, 173));
}

svg.rux-status--standby {
stroke: var(--colorStandby, rgb(45, 204, 255));
fill: var(--colorStandby, rgb(45, 204, 255));
}

svg.rux-status--normal {
stroke: var(--colorNormal, rgb(86, 240, 0));
fill: var(--colorNormal, rgb(86, 240, 0));
}

svg.rux-status--caution {
stroke: var(--colorCaution, rgb(252, 232, 58));
fill: var(--colorCaution, rgb(252, 232, 58));
}

svg.rux-status--serious {
stroke: var(--colorSerious, rgb(255, 179, 0));
fill: var(--colorSerious, rgb(255, 179, 0));
}

svg.rux-status--critical {
stroke: var(--colorCritical, rgb(255, 56, 56));
fill: var(--colorCritical, rgb(255, 56, 56));
}

[data-progress] rux-icon {
transition: stroke-dashoffset 0.367s, stroke 0.367s;
transform-origin: 50% 50%;
Expand Down