@platformatic/ui-components 0.17.4 → 0.17.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{index-DE70C3KG.css → index-C2gI5Mf9.css} +1 -1
- package/dist/assets/index-yMgV75tX.js +49 -0
- package/dist/index.html +2 -2
- package/dist/main.css +0 -44
- package/package.json +1 -1
- package/src/components/ArcMetric.jsx +2 -2
- package/src/components/ArcMetric.module.css +9 -1
- package/src/components/TrendLine.jsx +2 -1
- package/src/components/TrendLine.module.css +3 -0
- package/src/components/TrendMetric.module.css +1 -1
- package/src/components/icons/FlamegraphsIcon.jsx +76 -0
- package/src/components/icons/GearAlertIcon.jsx +76 -0
- package/src/components/icons/GearUserIcon.jsx +79 -0
- package/src/components/icons/PodSignalsIcon.jsx +76 -0
- package/src/components/icons/index.js +8 -0
- package/src/stories/TrendLine.stories.jsx +1 -1
- package/dist/assets/index-CebhuZ6r.js +0 -49
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-yMgV75tX.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-C2gI5Mf9.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/dist/main.css
CHANGED
|
@@ -600,26 +600,10 @@ video {
|
|
|
600
600
|
visibility: visible;
|
|
601
601
|
}
|
|
602
602
|
|
|
603
|
-
.absolute {
|
|
604
|
-
position: absolute;
|
|
605
|
-
}
|
|
606
|
-
|
|
607
603
|
.relative {
|
|
608
604
|
position: relative;
|
|
609
605
|
}
|
|
610
606
|
|
|
611
|
-
.bottom-0 {
|
|
612
|
-
bottom: 0px;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
.left-0 {
|
|
616
|
-
left: 0px;
|
|
617
|
-
}
|
|
618
|
-
|
|
619
|
-
.right-0 {
|
|
620
|
-
right: 0px;
|
|
621
|
-
}
|
|
622
|
-
|
|
623
607
|
.col-span-1 {
|
|
624
608
|
grid-column: span 1 / span 1;
|
|
625
609
|
}
|
|
@@ -666,10 +650,6 @@ video {
|
|
|
666
650
|
display: none;
|
|
667
651
|
}
|
|
668
652
|
|
|
669
|
-
.h-full {
|
|
670
|
-
height: 100%;
|
|
671
|
-
}
|
|
672
|
-
|
|
673
653
|
.h-screen {
|
|
674
654
|
height: 100vh;
|
|
675
655
|
}
|
|
@@ -678,10 +658,6 @@ video {
|
|
|
678
658
|
width: 25%;
|
|
679
659
|
}
|
|
680
660
|
|
|
681
|
-
.w-full {
|
|
682
|
-
width: 100%;
|
|
683
|
-
}
|
|
684
|
-
|
|
685
661
|
.grow {
|
|
686
662
|
flex-grow: 1;
|
|
687
663
|
}
|
|
@@ -710,10 +686,6 @@ video {
|
|
|
710
686
|
align-items: center;
|
|
711
687
|
}
|
|
712
688
|
|
|
713
|
-
.justify-center {
|
|
714
|
-
justify-content: center;
|
|
715
|
-
}
|
|
716
|
-
|
|
717
689
|
.gap-10 {
|
|
718
690
|
gap: 2.5rem;
|
|
719
691
|
}
|
|
@@ -783,14 +755,6 @@ video {
|
|
|
783
755
|
line-height: 1;
|
|
784
756
|
}
|
|
785
757
|
|
|
786
|
-
.text-\[1\.2rem\] {
|
|
787
|
-
font-size: 1.2rem;
|
|
788
|
-
}
|
|
789
|
-
|
|
790
|
-
.text-\[2\.3rem\] {
|
|
791
|
-
font-size: 2.3rem;
|
|
792
|
-
}
|
|
793
|
-
|
|
794
758
|
.text-sm {
|
|
795
759
|
font-size: 0.875rem;
|
|
796
760
|
line-height: 1.25rem;
|
|
@@ -800,10 +764,6 @@ video {
|
|
|
800
764
|
font-weight: 700;
|
|
801
765
|
}
|
|
802
766
|
|
|
803
|
-
.font-normal {
|
|
804
|
-
font-weight: 400;
|
|
805
|
-
}
|
|
806
|
-
|
|
807
767
|
.text-dark-green {
|
|
808
768
|
--tw-text-opacity: 1;
|
|
809
769
|
color: rgb(2 120 63 / var(--tw-text-opacity, 1));
|
|
@@ -824,10 +784,6 @@ video {
|
|
|
824
784
|
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
|
825
785
|
}
|
|
826
786
|
|
|
827
|
-
.text-white\/70 {
|
|
828
|
-
color: rgb(255 255 255 / 0.7);
|
|
829
|
-
}
|
|
830
|
-
|
|
831
787
|
.ring {
|
|
832
788
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
833
789
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
package/package.json
CHANGED
|
@@ -112,9 +112,9 @@ export function SemiCircleProgress ({
|
|
|
112
112
|
/>
|
|
113
113
|
</svg>
|
|
114
114
|
{showPercentValue && (
|
|
115
|
-
<div className=
|
|
115
|
+
<div className={styles.percentContainer}>
|
|
116
116
|
<span>{value}</span>
|
|
117
|
-
<span className=
|
|
117
|
+
<span className={styles.percentUnit}>{unit}</span>
|
|
118
118
|
</div>
|
|
119
119
|
|
|
120
120
|
)}
|
|
@@ -28,4 +28,12 @@
|
|
|
28
28
|
font-weight: 400;
|
|
29
29
|
min-width: 120px;
|
|
30
30
|
text-align: left;
|
|
31
|
-
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.percentContainer {
|
|
34
|
+
@apply flex items-center justify-center gap-2 absolute bottom-0 left-0 right-0 text-white text-[2.3rem] font-bold;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.percentUnit {
|
|
38
|
+
@apply text-white/70 text-[1.2rem] font-normal;
|
|
39
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useRef, useEffect, useState } from 'react'
|
|
2
2
|
import * as d3 from 'd3'
|
|
3
|
+
import styles from './TrendLine.module.css'
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* TrendLine component
|
|
@@ -132,7 +133,7 @@ function TrendLine ({ yValues }) {
|
|
|
132
133
|
}, [yValues, dimensions])
|
|
133
134
|
|
|
134
135
|
return (
|
|
135
|
-
<div className=
|
|
136
|
+
<div className={styles.line} ref={typedContainerRef} style={{ position: 'relative' }}>
|
|
136
137
|
<svg
|
|
137
138
|
ref={ref}
|
|
138
139
|
width='100%'
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import styles from './Icons.module.css'
|
|
3
|
+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
|
|
5
|
+
const FlamegraphsIcon = ({
|
|
6
|
+
color = MAIN_DARK_BLUE,
|
|
7
|
+
size = MEDIUM,
|
|
8
|
+
disabled = false,
|
|
9
|
+
inactive = false
|
|
10
|
+
}) => {
|
|
11
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
12
|
+
if (disabled) {
|
|
13
|
+
className += ` ${styles.iconDisabled}`
|
|
14
|
+
}
|
|
15
|
+
if (inactive) {
|
|
16
|
+
className += ` ${styles.iconInactive}`
|
|
17
|
+
}
|
|
18
|
+
let icon = <></>
|
|
19
|
+
|
|
20
|
+
switch (size) {
|
|
21
|
+
case SMALL:
|
|
22
|
+
icon = (
|
|
23
|
+
<svg
|
|
24
|
+
width={16}
|
|
25
|
+
height={16}
|
|
26
|
+
viewBox='0 0 16 16'
|
|
27
|
+
fill='none'
|
|
28
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
29
|
+
className={className}
|
|
30
|
+
>
|
|
31
|
+
<rect x='2' y='11' width='12' height='3' stroke='none' strokeLinejoin='round' />
|
|
32
|
+
<rect x='4' y='6' width='8' height='3' stroke='none' strokeLinejoin='round' />
|
|
33
|
+
<rect x='6' y='2' width='4' height='2' stroke='none' strokeLinejoin='round' />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<rect x='3' y='16.5' width='18' height='4.5' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
48
|
+
<rect x='6' y='9' width='12' height='4.5' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
49
|
+
<rect x='9' y='3' width='6' height='3' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
50
|
+
</svg>
|
|
51
|
+
)
|
|
52
|
+
break
|
|
53
|
+
case LARGE:
|
|
54
|
+
icon = (
|
|
55
|
+
<svg
|
|
56
|
+
width={40}
|
|
57
|
+
height={40}
|
|
58
|
+
viewBox='0 0 40 40'
|
|
59
|
+
fill='none'
|
|
60
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
61
|
+
className={className}
|
|
62
|
+
>
|
|
63
|
+
<rect x='5' y='27.5' width='30' height='7.5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
64
|
+
<rect x='10' y='15' width='20' height='7.5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
65
|
+
<rect x='15' y='5' width='10' height='5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
66
|
+
</svg>
|
|
67
|
+
)
|
|
68
|
+
break
|
|
69
|
+
|
|
70
|
+
default:
|
|
71
|
+
break
|
|
72
|
+
}
|
|
73
|
+
return icon
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export default FlamegraphsIcon
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import styles from './Icons.module.css'
|
|
3
|
+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
|
|
5
|
+
const GearAlertIcon = ({
|
|
6
|
+
color = MAIN_DARK_BLUE,
|
|
7
|
+
size = MEDIUM,
|
|
8
|
+
disabled = false,
|
|
9
|
+
inactive = false
|
|
10
|
+
}) => {
|
|
11
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
12
|
+
if (disabled) {
|
|
13
|
+
className += ` ${styles.iconDisabled}`
|
|
14
|
+
}
|
|
15
|
+
if (inactive) {
|
|
16
|
+
className += ` ${styles.iconInactive}`
|
|
17
|
+
}
|
|
18
|
+
let icon = <></>
|
|
19
|
+
|
|
20
|
+
switch (size) {
|
|
21
|
+
case SMALL:
|
|
22
|
+
icon = (
|
|
23
|
+
<svg
|
|
24
|
+
width={16}
|
|
25
|
+
height={16}
|
|
26
|
+
viewBox='0 0 16 16'
|
|
27
|
+
fill='none'
|
|
28
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
29
|
+
className={className}
|
|
30
|
+
>
|
|
31
|
+
<path d='M9.21956 2.34803V3.1061C9.21956 3.25037 9.31095 3.38072 9.44868 3.43134L10.4321 3.79709C10.5659 3.84645 10.7178 3.81228 10.8156 3.7085L11.288 3.20987C11.427 3.06307 11.6638 3.0618 11.8041 3.20861L12.9445 4.3957C13.072 4.52858 13.0733 4.73487 12.9484 4.86901L12.3409 5.52457C12.2443 5.62835 12.2212 5.77895 12.2817 5.9055L12.6936 6.77874C12.7515 6.9015 12.8776 6.98123 13.0153 6.98123H13.646C13.8417 6.98123 14 7.13689 14 7.32925V8.79477C14 8.98713 13.8417 9.1428 13.646 9.1428H12.9832C12.83 9.1428 12.6936 9.24024 12.6459 9.38325L12.3113 10.3919C12.2714 10.5109 12.2997 10.6412 12.3859 10.7336L12.9304 11.3246C13.063 11.4689 13.0501 11.6929 12.9008 11.8207L11.6458 12.9002C11.5017 13.0243 11.2828 13.0129 11.1528 12.8749L10.7152 12.4117C10.62 12.3105 10.472 12.2738 10.3394 12.3193L9.42551 12.6332C9.28263 12.6826 9.18739 12.8142 9.18739 12.9622V13.652C9.18739 13.8443 9.02907 14 8.83342 14H7.16529C6.96964 14 6.81133 13.8443 6.81133 13.652V12.9622C6.81133 12.8142 6.71608 12.6826 6.57321 12.6332L5.65934 12.3193C5.52676 12.2738 5.37874 12.3092 5.28349 12.4117L4.84587 12.8749C4.71586 13.0129 4.49705 13.0243 4.35289 12.9002L3.09793 11.8207C2.94862 11.6929 2.93575 11.4689 3.06833 11.3246L3.61279 10.7336C3.69774 10.6412 3.72605 10.5109 3.68744 10.3919L3.35278 9.38325C3.30516 9.24024 3.16872 9.1428 3.01555 9.1428H2.35396C2.15832 9.1428 2 8.98713 2 8.79477V7.32925C2 7.13689 2.15832 6.98123 2.35396 6.98123H2.98466C3.12239 6.98123 3.24853 6.90276 3.30645 6.77874L3.71833 5.9055C3.77883 5.77768 3.75437 5.62835 3.65912 5.52457L3.05159 4.86901C2.92674 4.73487 2.92803 4.52731 3.05545 4.3957L4.19586 3.20861C4.33616 3.06307 4.57299 3.06307 4.712 3.20987L5.18438 3.7085C5.28221 3.81228 5.43409 3.84645 5.56795 3.79709L6.55132 3.43134C6.68905 3.38072 6.78044 3.25037 6.78044 3.1061V2.34803C6.78044 2.15566 6.93875 2 7.1344 2H8.8656C9.06125 2 9.21956 2.15566 9.21956 2.34803Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
<path d='M8 6V9' stroke='none' strokeLinecap='round' />
|
|
33
|
+
<circle cx='8' cy='10.5' r='0.5' fill='white' />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<path d='M13.8293 3.52204V4.65914C13.8293 4.87555 13.9664 5.07108 14.173 5.14702L15.6481 5.69563C15.8489 5.76967 16.0767 5.71841 16.2234 5.56275L16.932 4.81481C17.1405 4.5946 17.4958 4.5927 17.7062 4.81291L19.4168 6.59355C19.608 6.79287 19.6099 7.1023 19.4226 7.30352L18.5113 8.28686C18.3665 8.44252 18.3318 8.66842 18.4225 8.85826L19.0403 10.1681C19.1272 10.3522 19.3164 10.4718 19.523 10.4718H20.4691C20.7625 10.4718 21 10.7053 21 10.9939V13.1922C21 13.4807 20.7625 13.7142 20.4691 13.7142H19.4747C19.245 13.7142 19.0403 13.8604 18.9689 14.0749L18.4669 15.5879C18.4071 15.7663 18.4495 15.9618 18.5789 16.1004L19.3956 16.9869C19.5944 17.2033 19.5751 17.5393 19.3512 17.7311L17.4687 19.3503C17.2525 19.5364 16.9243 19.5193 16.7293 19.3124L16.0728 18.6176C15.93 18.4657 15.7079 18.4107 15.5091 18.479L14.1383 18.9498C13.924 19.0238 13.7811 19.2213 13.7811 19.4434V20.478C13.7811 20.7665 13.5436 21 13.2501 21H10.7479C10.4545 21 10.217 20.7665 10.217 20.478V19.4434C10.217 19.2213 10.0741 19.0238 9.85981 18.9498L8.48901 18.479C8.29014 18.4107 8.06811 18.4638 7.92524 18.6176L7.2688 19.3124C7.0738 19.5193 6.74558 19.5364 6.52934 19.3503L4.64689 17.7311C4.42293 17.5393 4.40363 17.2033 4.60249 16.9869L5.41918 16.1004C5.54661 15.9618 5.58908 15.7663 5.53116 15.5879L5.02918 14.0749C4.95774 13.8604 4.75308 13.7142 4.52333 13.7142H3.53094C3.23748 13.7142 3 13.4807 3 13.1922V10.9939C3 10.7053 3.23748 10.4718 3.53094 10.4718H4.47699C4.68358 10.4718 4.87279 10.3541 4.95967 10.1681L5.5775 8.85826C5.66824 8.66653 5.63156 8.44252 5.48868 8.28686L4.57739 7.30352C4.39011 7.1023 4.39204 6.79097 4.58318 6.59355L6.29379 4.81291C6.50424 4.5946 6.85949 4.5946 7.068 4.81481L7.77657 5.56275C7.92331 5.71841 8.15113 5.76967 8.35192 5.69563L9.82699 5.14702C10.0336 5.07108 10.1707 4.87555 10.1707 4.65914V3.52204C10.1707 3.2335 10.4081 3 10.7016 3H13.2984C13.5919 3 13.8293 3.2335 13.8293 3.52204Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
<path d='M12 9V13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
|
|
49
|
+
<circle cx='12' cy='15.75' r='0.75' fill='white' />
|
|
50
|
+
</svg>
|
|
51
|
+
)
|
|
52
|
+
break
|
|
53
|
+
case LARGE:
|
|
54
|
+
icon = (
|
|
55
|
+
<svg
|
|
56
|
+
width={40}
|
|
57
|
+
height={40}
|
|
58
|
+
viewBox='0 0 40 40'
|
|
59
|
+
fill='none'
|
|
60
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
61
|
+
className={className}
|
|
62
|
+
>
|
|
63
|
+
<path d='M23.0489 5.87007V7.76524C23.0489 8.12592 23.2774 8.4518 23.6217 8.57836L26.0801 9.49272C26.4148 9.61612 26.7945 9.53069 27.039 9.27125L28.22 8.02468C28.5675 7.65767 29.1596 7.6545 29.5104 8.02151L32.3614 10.9892C32.6799 11.3215 32.6831 11.8372 32.371 12.1725L30.8522 13.8114C30.6109 14.0709 30.5529 14.4474 30.7042 14.7638L31.7339 16.9468C31.8787 17.2537 32.194 17.4531 32.5383 17.4531H34.1151C34.6042 17.4531 35 17.8422 35 18.3231V21.9869C35 22.4678 34.6042 22.857 34.1151 22.857H32.4579C32.075 22.857 31.7339 23.1006 31.6148 23.4581L30.7782 25.9798C30.6784 26.2772 30.7492 26.603 30.9648 26.834L32.326 28.3115C32.6574 28.6722 32.6252 29.2322 32.252 29.5518L29.1146 32.2506C28.7542 32.5606 28.2071 32.5322 27.8821 32.1873L26.788 31.0293C26.5499 30.7762 26.1799 30.6845 25.8484 30.7984L23.5638 31.583C23.2066 31.7064 22.9685 32.0354 22.9685 32.4056V34.1299C22.9685 34.6108 22.5727 35 22.0836 35H17.9132C17.4241 35 17.0283 34.6108 17.0283 34.1299V32.4056C17.0283 32.0354 16.7902 31.7064 16.433 31.583L14.1483 30.7984C13.8169 30.6845 13.4469 30.773 13.2087 31.0293L12.1147 32.1873C11.7897 32.5322 11.2426 32.5606 10.8822 32.2506L7.74482 29.5518C7.37155 29.2322 7.33938 28.6722 7.67081 28.3115L9.03196 26.834C9.24434 26.603 9.31513 26.2772 9.2186 25.9798L8.38196 23.4581C8.2629 23.1006 7.92181 22.857 7.53888 22.857H5.88491C5.3958 22.857 5 22.4678 5 21.9869V18.3231C5 17.8422 5.3958 17.4531 5.88491 17.4531H7.46165C7.80596 17.4531 8.12131 17.2569 8.26612 16.9468L9.29583 14.7638C9.44707 14.4442 9.38593 14.0709 9.14781 13.8114L7.62898 12.1725C7.31685 11.8372 7.32007 11.3183 7.63864 10.9892L10.4896 8.02151C10.8404 7.65767 11.4325 7.65767 11.78 8.02468L12.961 9.27125C13.2055 9.53069 13.5852 9.61612 13.9199 9.49272L16.3783 8.57836C16.7226 8.4518 16.9511 8.12592 16.9511 7.76524V5.87007C16.9511 5.38916 17.3469 5 17.836 5H22.164C22.6531 5 23.0489 5.38916 23.0489 5.87007Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
<path d='M20 15V22.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
|
|
65
|
+
<circle cx='20' cy='26.25' r='1.25' fill='white' />
|
|
66
|
+
</svg>
|
|
67
|
+
)
|
|
68
|
+
break
|
|
69
|
+
|
|
70
|
+
default:
|
|
71
|
+
break
|
|
72
|
+
}
|
|
73
|
+
return icon
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export default GearAlertIcon
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import styles from './Icons.module.css'
|
|
3
|
+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
|
|
5
|
+
const GearUserIcon = ({
|
|
6
|
+
color = MAIN_DARK_BLUE,
|
|
7
|
+
size = MEDIUM,
|
|
8
|
+
disabled = false,
|
|
9
|
+
inactive = false
|
|
10
|
+
}) => {
|
|
11
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
12
|
+
if (disabled) {
|
|
13
|
+
className += ` ${styles.iconDisabled}`
|
|
14
|
+
}
|
|
15
|
+
if (inactive) {
|
|
16
|
+
className += ` ${styles.iconInactive}`
|
|
17
|
+
}
|
|
18
|
+
let icon = <></>
|
|
19
|
+
|
|
20
|
+
switch (size) {
|
|
21
|
+
case SMALL:
|
|
22
|
+
icon = (
|
|
23
|
+
<svg
|
|
24
|
+
width={16}
|
|
25
|
+
height={16}
|
|
26
|
+
viewBox='0 0 16 16'
|
|
27
|
+
fill='none'
|
|
28
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
29
|
+
className={className}
|
|
30
|
+
>
|
|
31
|
+
<path d='M8.00073 10.3287C9.25541 10.3287 10.2725 9.32868 10.2725 8.09503C10.2725 6.86139 9.25541 5.86133 8.00073 5.86133' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
32
|
+
<path d='M10.3395 12.3193C10.472 12.2738 10.62 12.3105 10.7153 12.4117L11.1529 12.8749C11.2829 13.0129 11.5017 13.0243 11.6459 12.9002L12.9009 11.8207C13.0502 11.6929 13.063 11.4689 12.9305 11.3246L12.386 10.7336C12.2998 10.6412 12.2714 10.5109 12.3113 10.3919L12.646 9.38325C12.6936 9.24024 12.8301 9.1428 12.9832 9.1428H13.6461C13.8418 9.1428 14.0001 8.98713 14.0001 8.79477V7.32926C14.0001 7.13689 13.8418 6.98123 13.6461 6.98123H13.0154C12.8777 6.98123 12.7515 6.9015 12.6936 6.77874L12.2817 5.9055C12.2212 5.77895 12.2444 5.62835 12.341 5.52457L12.9485 4.86901C13.0733 4.73487 13.072 4.52858 12.9446 4.3957L11.8042 3.20861C11.6639 3.0618 11.4271 3.06307 11.2881 3.20987L10.8157 3.7085C10.7179 3.81228 10.566 3.84645 10.4321 3.79709L9.44875 3.43134C9.31103 3.38072 9.21964 3.25037 9.21964 3.1061V2.34803C9.21964 2.15566 9.06132 2 8.86568 2H7.13447C6.93883 2 6.78051 2.15566 6.78051 2.34803V3.1061C6.78051 3.25037 6.68912 3.38072 6.5514 3.43134L5.56803 3.79709C5.43416 3.84645 5.28228 3.81228 5.18446 3.7085L4.71208 3.20987C4.57307 3.06307 4.33623 3.06307 4.19594 3.20861L3.05553 4.3957C2.9281 4.52731 2.92682 4.73487 3.05167 4.86901' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M5.5 11.3999C3.567 11.3999 2 12.6535 2 14.1999H9C9 12.6535 7.433 11.3999 5.5 11.3999Z' stroke='none' strokeLinejoin='round' />
|
|
34
|
+
<circle cx='5.50015' cy='7.90005' r='2.1' stroke='none' />
|
|
35
|
+
</svg>
|
|
36
|
+
)
|
|
37
|
+
break
|
|
38
|
+
case MEDIUM:
|
|
39
|
+
icon = (
|
|
40
|
+
<svg
|
|
41
|
+
width={24}
|
|
42
|
+
height={24}
|
|
43
|
+
viewBox='0 0 24 24'
|
|
44
|
+
fill='none'
|
|
45
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
46
|
+
className={className}
|
|
47
|
+
>
|
|
48
|
+
<path d='M12.001 15.4929C13.883 15.4929 15.4087 13.9928 15.4087 12.1423C15.4087 10.2918 13.883 8.79175 12.001 8.79175' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
<path d='M15.5092 18.479C15.708 18.4107 15.9301 18.4657 16.0729 18.6176L16.7294 19.3124C16.9244 19.5193 17.2526 19.5364 17.4688 19.3503L19.3513 17.7311C19.5752 17.5393 19.5946 17.2033 19.3957 16.9869L18.579 16.1004C18.4496 15.9618 18.4072 15.7663 18.467 15.5879L18.969 14.0749C19.0404 13.8604 19.2451 13.7142 19.4749 13.7142H20.4692C20.7626 13.7142 21.0001 13.4807 21.0001 13.1922V10.9939C21.0001 10.7053 20.7626 10.4718 20.4692 10.4718H19.5231C19.3165 10.4718 19.1273 10.3522 19.0404 10.1681L18.4226 8.85826C18.3319 8.66842 18.3666 8.44252 18.5114 8.28686L19.4227 7.30352C19.61 7.1023 19.6081 6.79287 19.4169 6.59355L17.7063 4.81291C17.4959 4.5927 17.1406 4.5946 16.9321 4.81481L16.2235 5.56275C16.0768 5.71841 15.849 5.76967 15.6482 5.69563L14.1731 5.14702C13.9665 5.07108 13.8295 4.87555 13.8295 4.65914V3.52204C13.8295 3.23349 13.592 3 13.2985 3H10.7017C10.4082 3 10.1708 3.23349 10.1708 3.52204V4.65914C10.1708 4.87555 10.0337 5.07108 9.8271 5.14702L8.35204 5.69563C8.15124 5.76967 7.92342 5.71841 7.77669 5.56275L7.06812 4.81481C6.8596 4.5946 6.50435 4.5946 6.2939 4.81291L4.58329 6.59355C4.39215 6.79097 4.39022 7.1023 4.5775 7.30352' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
<path d='M8.25 17.1001C5.35051 17.1001 3 18.9805 3 21.3001H13.5C13.5 18.9805 11.1495 17.1001 8.25 17.1001Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
51
|
+
<circle cx='8.2501' cy='11.8502' r='3.15' stroke='none' strokeWidth={1.5} />
|
|
52
|
+
</svg>
|
|
53
|
+
)
|
|
54
|
+
break
|
|
55
|
+
case LARGE:
|
|
56
|
+
icon = (
|
|
57
|
+
<svg
|
|
58
|
+
width={40}
|
|
59
|
+
height={40}
|
|
60
|
+
viewBox='0 0 40 40'
|
|
61
|
+
fill='none'
|
|
62
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
63
|
+
className={className}
|
|
64
|
+
>
|
|
65
|
+
<path d='M20.002 25.8216C23.1387 25.8216 25.6815 23.3214 25.6815 20.2373C25.6815 17.1532 23.1387 14.6531 20.002 14.6531' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
<path d='M25.8486 30.7984C26.1801 30.6845 26.5501 30.7762 26.7882 31.0293L27.8823 32.1873C28.2073 32.5322 28.7543 32.5606 29.1147 32.2506L32.2521 29.5518C32.6254 29.2322 32.6576 28.6722 32.3262 28.3115L30.965 26.834C30.7494 26.603 30.6786 26.2772 30.7784 25.9798L31.615 23.4581C31.7341 23.1006 32.0752 22.857 32.4581 22.857H34.1153C34.6044 22.857 35.0002 22.4678 35.0002 21.9869V18.3231C35.0002 17.8422 34.6044 17.4531 34.1153 17.4531H32.5385C32.1942 17.4531 31.8789 17.2537 31.7341 16.9468L30.7044 14.7638C30.5531 14.4474 30.611 14.0709 30.8524 13.8114L32.3712 12.1725C32.6833 11.8372 32.6801 11.3215 32.3615 10.9892L29.5105 8.02151C29.1598 7.6545 28.5677 7.65767 28.2202 8.02468L27.0392 9.27125C26.7947 9.53069 26.415 9.61611 26.0803 9.49272L23.6219 8.57836C23.2776 8.4518 23.0491 8.12592 23.0491 7.76524V5.87007C23.0491 5.38916 22.6533 5 22.1642 5H17.8362C17.3471 5 16.9513 5.38916 16.9513 5.87007V7.76524C16.9513 8.12592 16.7228 8.4518 16.3785 8.57836L13.9201 9.49272C13.5854 9.61611 13.2057 9.53069 12.9611 9.27125L11.7802 8.02468C11.4327 7.65767 10.8406 7.65767 10.4898 8.02151L7.63882 10.9892C7.32026 11.3183 7.31704 11.8372 7.62917 12.1725' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
67
|
+
<path d='M13.75 28.5C8.91751 28.5 5 31.634 5 35.5H22.5C22.5 31.634 18.5825 28.5 13.75 28.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
68
|
+
<circle cx='13.7505' cy='19.7505' r='5.25' stroke='none' strokeWidth={2} />
|
|
69
|
+
</svg>
|
|
70
|
+
)
|
|
71
|
+
break
|
|
72
|
+
|
|
73
|
+
default:
|
|
74
|
+
break
|
|
75
|
+
}
|
|
76
|
+
return icon
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export default GearUserIcon
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import styles from './Icons.module.css'
|
|
3
|
+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
|
|
5
|
+
const PodSignalsIcon = ({
|
|
6
|
+
color = MAIN_DARK_BLUE,
|
|
7
|
+
size = MEDIUM,
|
|
8
|
+
disabled = false,
|
|
9
|
+
inactive = false
|
|
10
|
+
}) => {
|
|
11
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
12
|
+
if (disabled) {
|
|
13
|
+
className += ` ${styles.iconDisabled}`
|
|
14
|
+
}
|
|
15
|
+
if (inactive) {
|
|
16
|
+
className += ` ${styles.iconInactive}`
|
|
17
|
+
}
|
|
18
|
+
let icon = <></>
|
|
19
|
+
|
|
20
|
+
switch (size) {
|
|
21
|
+
case SMALL:
|
|
22
|
+
icon = (
|
|
23
|
+
<svg
|
|
24
|
+
width={16}
|
|
25
|
+
height={16}
|
|
26
|
+
viewBox='0 0 16 16'
|
|
27
|
+
fill='none'
|
|
28
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
29
|
+
className={className}
|
|
30
|
+
>
|
|
31
|
+
<path d='M8.01795 6.35413L6.2859 7.35413V9.35413L8.01795 10.3541L9.75 9.35413V7.35413L8.01795 6.35413Z' stroke='none' strokeLinejoin='round' />
|
|
32
|
+
<path d='M12.1169 4.11709C13.2763 5.11966 14 6.54093 14 8.11709C14 9.69326 13.2763 11.1145 12.1169 12.1171M3.88308 12.1171C2.72365 11.1145 2 9.69326 2 8.11709C2 6.47853 2.78208 5.00736 4.02282 4' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M10.3519 5.15155C11.3508 5.81802 12 6.89802 12 8.11699C12 9.33596 11.3508 10.416 10.3519 11.0824M5.6481 11.0824C4.64924 10.416 4 9.33596 4 8.11699C4 6.86433 4.68563 5.75841 5.73174 5.09723' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<path d='M12.0269 9.35413L9.42885 10.8541V13.8541L12.0269 15.3541L14.625 13.8541V10.8541L12.0269 9.35413Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
48
|
+
<path d='M18.1754 6.17564C19.9145 7.67949 21 9.8114 21 12.1756C21 14.5399 19.9145 16.6718 18.1754 18.1756M5.82463 18.1756C4.08548 16.6718 3 14.5399 3 12.1756C3 9.71779 4.17313 7.51105 6.03424 6' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
<path d='M15.5278 7.72735C17.0261 8.72706 18 10.3471 18 12.1755C18 14.004 17.0261 15.624 15.5278 16.6237M8.47216 16.6237C6.97385 15.624 6 14.004 6 12.1755C6 10.2965 7.02844 8.63765 8.59761 7.64587' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
50
|
+
</svg>
|
|
51
|
+
)
|
|
52
|
+
break
|
|
53
|
+
case LARGE:
|
|
54
|
+
icon = (
|
|
55
|
+
<svg
|
|
56
|
+
width={40}
|
|
57
|
+
height={40}
|
|
58
|
+
viewBox='0 0 40 40'
|
|
59
|
+
fill='none'
|
|
60
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
61
|
+
className={className}
|
|
62
|
+
>
|
|
63
|
+
<path d='M20.0449 15.3541L15.7147 17.8541V22.8541L20.0449 25.3541L24.375 22.8541V17.8541L20.0449 15.3541Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
64
|
+
<path d='M30.2923 10.2927C33.1909 12.7992 35 16.3523 35 20.2927C35 24.2331 33.1909 27.7863 30.2923 30.2927M9.70771 30.2927C6.80913 27.7863 5 24.2331 5 20.2927C5 16.1963 6.95521 12.5184 10.0571 10' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
65
|
+
<path d='M25.8797 12.8788C28.3769 14.545 30 17.245 30 20.2925C30 23.3399 28.3769 26.0399 25.8797 27.7061M14.1203 27.7061C11.6231 26.0399 10 23.3399 10 20.2925C10 17.1608 11.7141 14.396 14.3293 12.743' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
66
|
+
</svg>
|
|
67
|
+
)
|
|
68
|
+
break
|
|
69
|
+
|
|
70
|
+
default:
|
|
71
|
+
break
|
|
72
|
+
}
|
|
73
|
+
return icon
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export default PodSignalsIcon
|
|
@@ -101,7 +101,10 @@ import EyeOpenedIcon from './EyeOpenedIcon'
|
|
|
101
101
|
import FailureRateIcon from './FailureRateIcon'
|
|
102
102
|
import FolderIcon from './FolderIcon'
|
|
103
103
|
import FoldersIcon from './FoldersIcon'
|
|
104
|
+
import FlamegraphsIcon from './FlamegraphsIcon'
|
|
105
|
+
import GearAlertIcon from './GearAlertIcon'
|
|
104
106
|
import GearIcon from './GearIcon'
|
|
107
|
+
import GearUserIcon from './GearUserIcon'
|
|
105
108
|
import GenerationLoadingIcon from './GenerationLoadingIcon'
|
|
106
109
|
import GitHubRepo2Icon from './GitHubRepo2Icon'
|
|
107
110
|
import GitHubRepoIcon from './GitHubRepoIcon'
|
|
@@ -159,6 +162,7 @@ import PodMetricsIcon from './PodMetricsIcon'
|
|
|
159
162
|
import PodPerformanceIcon from './PodPerformanceIcon'
|
|
160
163
|
import PodSettingsIcon from './PodSettingsIcon'
|
|
161
164
|
import PodServicesIcon from './PodServicesIcon'
|
|
165
|
+
import PodSignalsIcon from './PodSignalsIcon'
|
|
162
166
|
import PreviewPRIcon from './PreviewPRIcon'
|
|
163
167
|
import PullRequestIcon from './PullRequestIcon'
|
|
164
168
|
import PullRequestLoadingIcon from './PullRequestLoadingIcon'
|
|
@@ -334,7 +338,10 @@ export default {
|
|
|
334
338
|
FailureRateIcon,
|
|
335
339
|
FolderIcon,
|
|
336
340
|
FoldersIcon,
|
|
341
|
+
FlamegraphsIcon,
|
|
342
|
+
GearAlertIcon,
|
|
337
343
|
GearIcon,
|
|
344
|
+
GearUserIcon,
|
|
338
345
|
GenerationLoadingIcon,
|
|
339
346
|
GitHubRepo2Icon,
|
|
340
347
|
GitHubRepoIcon,
|
|
@@ -392,6 +399,7 @@ export default {
|
|
|
392
399
|
PodPerformanceIcon,
|
|
393
400
|
PodSettingsIcon,
|
|
394
401
|
PodServicesIcon,
|
|
402
|
+
PodSignalsIcon,
|
|
395
403
|
PreviewPRIcon,
|
|
396
404
|
PullRequestIcon,
|
|
397
405
|
PullRequestLoadingIcon,
|