Merge pull request #1749 from benphelps/charts-widget
Glances Charts Widget
This commit is contained in:
commit
9c4d1cf108
25 changed files with 1231 additions and 10 deletions
|
@ -30,6 +30,7 @@
|
|||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^11.18.6",
|
||||
"react-icons": "^4.4.0",
|
||||
"recharts": "^2.7.2",
|
||||
"shvl": "^3.0.0",
|
||||
"swr": "^1.3.0",
|
||||
"systeminformation": "^5.17.12",
|
||||
|
|
260
pnpm-lock.yaml
generated
260
pnpm-lock.yaml
generated
|
@ -1,5 +1,9 @@
|
|||
lockfileVersion: '6.0'
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
'@headlessui/react':
|
||||
specifier: ^1.7.2
|
||||
|
@ -61,6 +65,9 @@ dependencies:
|
|||
react-icons:
|
||||
specifier: ^4.4.0
|
||||
version: 4.8.0(react@18.2.0)
|
||||
recharts:
|
||||
specifier: ^2.7.2
|
||||
version: 2.7.2(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
|
||||
shvl:
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.0
|
||||
|
@ -435,6 +442,48 @@ packages:
|
|||
tailwindcss: 3.3.0(postcss@8.4.21)
|
||||
dev: true
|
||||
|
||||
/@types/d3-array@3.0.5:
|
||||
resolution: {integrity: sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A==}
|
||||
dev: false
|
||||
|
||||
/@types/d3-color@3.1.0:
|
||||
resolution: {integrity: sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==}
|
||||
dev: false
|
||||
|
||||
/@types/d3-ease@3.0.0:
|
||||
resolution: {integrity: sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==}
|
||||
dev: false
|
||||
|
||||
/@types/d3-interpolate@3.0.1:
|
||||
resolution: {integrity: sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==}
|
||||
dependencies:
|
||||
'@types/d3-color': 3.1.0
|
||||
dev: false
|
||||
|
||||
/@types/d3-path@3.0.0:
|
||||
resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
|
||||
dev: false
|
||||
|
||||
/@types/d3-scale@4.0.3:
|
||||
resolution: {integrity: sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==}
|
||||
dependencies:
|
||||
'@types/d3-time': 3.0.0
|
||||
dev: false
|
||||
|
||||
/@types/d3-shape@3.1.1:
|
||||
resolution: {integrity: sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==}
|
||||
dependencies:
|
||||
'@types/d3-path': 3.0.0
|
||||
dev: false
|
||||
|
||||
/@types/d3-time@3.0.0:
|
||||
resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==}
|
||||
dev: false
|
||||
|
||||
/@types/d3-timer@3.0.0:
|
||||
resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==}
|
||||
dev: false
|
||||
|
||||
/@types/hoist-non-react-statics@3.3.1:
|
||||
resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
|
||||
dependencies:
|
||||
|
@ -785,6 +834,7 @@ packages:
|
|||
/buildcheck@0.0.3:
|
||||
resolution: {integrity: sha512-pziaA+p/wdVImfcbsZLNF32EiWyujlQLwolMqUQE8xpKNOH7KmZQaY8sXN7DGOEzPAElo9QTaeNRfGnf3iOJbA==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
|
@ -1020,6 +1070,10 @@ packages:
|
|||
nth-check: 2.1.1
|
||||
dev: false
|
||||
|
||||
/css-unit-converter@1.1.2:
|
||||
resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
|
||||
dev: false
|
||||
|
||||
/css-what@6.1.0:
|
||||
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
|
||||
engines: {node: '>= 6'}
|
||||
|
@ -1034,6 +1088,77 @@ packages:
|
|||
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
|
||||
dev: false
|
||||
|
||||
/d3-array@3.2.4:
|
||||
resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
internmap: 2.0.3
|
||||
dev: false
|
||||
|
||||
/d3-color@3.1.0:
|
||||
resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-ease@3.0.1:
|
||||
resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-format@3.1.0:
|
||||
resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-interpolate@3.0.1:
|
||||
resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-color: 3.1.0
|
||||
dev: false
|
||||
|
||||
/d3-path@3.1.0:
|
||||
resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/d3-scale@4.0.2:
|
||||
resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-array: 3.2.4
|
||||
d3-format: 3.1.0
|
||||
d3-interpolate: 3.0.1
|
||||
d3-time: 3.1.0
|
||||
d3-time-format: 4.1.0
|
||||
dev: false
|
||||
|
||||
/d3-shape@3.2.0:
|
||||
resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-path: 3.1.0
|
||||
dev: false
|
||||
|
||||
/d3-time-format@4.1.0:
|
||||
resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-time: 3.1.0
|
||||
dev: false
|
||||
|
||||
/d3-time@3.1.0:
|
||||
resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
d3-array: 3.2.4
|
||||
dev: false
|
||||
|
||||
/d3-timer@3.0.1:
|
||||
resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/damerau-levenshtein@1.0.8:
|
||||
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
|
||||
dev: true
|
||||
|
@ -1067,6 +1192,10 @@ packages:
|
|||
dependencies:
|
||||
ms: 2.1.2
|
||||
|
||||
/decimal.js-light@2.5.1:
|
||||
resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
|
||||
dev: false
|
||||
|
||||
/decompress-response@6.0.0:
|
||||
resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
|
||||
engines: {node: '>=10'}
|
||||
|
@ -1175,6 +1304,12 @@ packages:
|
|||
esutils: 2.0.3
|
||||
dev: true
|
||||
|
||||
/dom-helpers@3.4.0:
|
||||
resolution: {integrity: sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.21.0
|
||||
dev: false
|
||||
|
||||
/dom-serializer@2.0.0:
|
||||
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
|
||||
dependencies:
|
||||
|
@ -1654,6 +1789,10 @@ packages:
|
|||
deprecated: Use promise-toolbox/fromEvent instead
|
||||
dev: false
|
||||
|
||||
/eventemitter3@4.0.7:
|
||||
resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
|
||||
dev: false
|
||||
|
||||
/execa@5.0.0:
|
||||
resolution: {integrity: sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==}
|
||||
engines: {node: '>=10'}
|
||||
|
@ -1685,6 +1824,11 @@ packages:
|
|||
resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
|
||||
dev: true
|
||||
|
||||
/fast-equals@5.0.1:
|
||||
resolution: {integrity: sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
dev: false
|
||||
|
||||
/fast-glob@3.2.12:
|
||||
resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
|
||||
engines: {node: '>=8.6.0'}
|
||||
|
@ -2158,6 +2302,11 @@ packages:
|
|||
side-channel: 1.0.4
|
||||
dev: true
|
||||
|
||||
/internmap@2.0.3:
|
||||
resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/interpret@1.4.0:
|
||||
resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
|
||||
engines: {node: '>= 0.10'}
|
||||
|
@ -2361,6 +2510,7 @@ packages:
|
|||
|
||||
/jose@4.13.1:
|
||||
resolution: {integrity: sha512-MSJQC5vXco5Br38mzaQKiq9mwt7lwj2eXpgpRyQYNHYt2lq1PjkWa7DLXX0WVcQLE9HhMh3jPiufS7fhJf+CLQ==}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
|
@ -2480,6 +2630,10 @@ packages:
|
|||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
dev: true
|
||||
|
||||
/lodash@4.17.21:
|
||||
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
|
||||
dev: false
|
||||
|
||||
/logform@2.5.1:
|
||||
resolution: {integrity: sha512-9FyqAm9o9NKKfiAKfZoYo9bGXXuwMkxQiQttkT4YjjVtQVIQtK6LmVtlxmCaFswo6N4AfEkHqZTV0taDtPotNg==}
|
||||
dependencies:
|
||||
|
@ -2623,6 +2777,7 @@ packages:
|
|||
|
||||
/nan@2.17.0:
|
||||
resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
|
@ -2755,11 +2910,11 @@ packages:
|
|||
/object-assign@4.1.1:
|
||||
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/object-hash@2.2.0:
|
||||
resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
|
||||
engines: {node: '>= 6'}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
|
@ -2832,6 +2987,7 @@ packages:
|
|||
/oidc-token-hash@5.0.1:
|
||||
resolution: {integrity: sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==}
|
||||
engines: {node: ^10.13.0 || >=12.0.0}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
|
@ -3023,6 +3179,10 @@ packages:
|
|||
util-deprecate: 1.0.2
|
||||
dev: true
|
||||
|
||||
/postcss-value-parser@3.3.1:
|
||||
resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
|
||||
dev: false
|
||||
|
||||
/postcss-value-parser@4.2.0:
|
||||
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
|
||||
dev: true
|
||||
|
@ -3077,7 +3237,6 @@ packages:
|
|||
loose-envify: 1.4.0
|
||||
object-assign: 4.1.1
|
||||
react-is: 16.13.1
|
||||
dev: true
|
||||
|
||||
/psl@1.9.0:
|
||||
resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
|
||||
|
@ -3162,6 +3321,49 @@ packages:
|
|||
/react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
|
||||
/react-lifecycles-compat@3.0.4:
|
||||
resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
|
||||
dev: false
|
||||
|
||||
/react-resize-detector@8.1.0(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==}
|
||||
peerDependencies:
|
||||
react: ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
lodash: 4.17.21
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react-smooth@2.0.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-yl4y3XiMorss7ayF5QnBiSprig0+qFHui8uh7Hgg46QX5O+aRMRKlfGGNGLHno35JkQSvSYY8eCWkBfHfrSHfg==}
|
||||
peerDependencies:
|
||||
prop-types: ^15.6.0
|
||||
react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
fast-equals: 5.0.1
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
react-transition-group: 2.9.0(react-dom@18.2.0)(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react-transition-group@2.9.0(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==}
|
||||
peerDependencies:
|
||||
react: '>=15.0.0'
|
||||
react-dom: '>=15.0.0'
|
||||
dependencies:
|
||||
dom-helpers: 3.4.0
|
||||
loose-envify: 1.4.0
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
react-lifecycles-compat: 3.0.4
|
||||
dev: false
|
||||
|
||||
/react@18.2.0:
|
||||
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
@ -3212,6 +3414,34 @@ packages:
|
|||
picomatch: 2.3.1
|
||||
dev: true
|
||||
|
||||
/recharts-scale@0.4.5:
|
||||
resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
|
||||
dependencies:
|
||||
decimal.js-light: 2.5.1
|
||||
dev: false
|
||||
|
||||
/recharts@2.7.2(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-HMKRBkGoOXHW+7JcRa6+MukPSifNtJlqbc+JreGVNA407VLE/vOP+8n3YYjprDVVIF9E2ZgwWnL3D7K/LUFzBg==}
|
||||
engines: {node: '>=12'}
|
||||
peerDependencies:
|
||||
prop-types: ^15.6.0
|
||||
react: ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
classnames: 2.3.2
|
||||
eventemitter3: 4.0.7
|
||||
lodash: 4.17.21
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
react-is: 16.13.1
|
||||
react-resize-detector: 8.1.0(react-dom@18.2.0)(react@18.2.0)
|
||||
react-smooth: 2.0.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
|
||||
recharts-scale: 0.4.5
|
||||
reduce-css-calc: 2.1.8
|
||||
victory-vendor: 36.6.11
|
||||
dev: false
|
||||
|
||||
/rechoir@0.6.2:
|
||||
resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
|
||||
engines: {node: '>= 0.10'}
|
||||
|
@ -3219,6 +3449,13 @@ packages:
|
|||
resolve: 1.22.1
|
||||
dev: false
|
||||
|
||||
/reduce-css-calc@2.1.8:
|
||||
resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==}
|
||||
dependencies:
|
||||
css-unit-converter: 1.1.2
|
||||
postcss-value-parser: 3.3.1
|
||||
dev: false
|
||||
|
||||
/regenerator-runtime@0.13.11:
|
||||
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
|
||||
|
||||
|
@ -3896,6 +4133,25 @@ packages:
|
|||
extsprintf: 1.3.0
|
||||
dev: false
|
||||
|
||||
/victory-vendor@36.6.11:
|
||||
resolution: {integrity: sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg==}
|
||||
dependencies:
|
||||
'@types/d3-array': 3.0.5
|
||||
'@types/d3-ease': 3.0.0
|
||||
'@types/d3-interpolate': 3.0.1
|
||||
'@types/d3-scale': 4.0.3
|
||||
'@types/d3-shape': 3.1.1
|
||||
'@types/d3-time': 3.0.0
|
||||
'@types/d3-timer': 3.0.0
|
||||
d3-array: 3.2.4
|
||||
d3-ease: 3.0.1
|
||||
d3-interpolate: 3.0.1
|
||||
d3-scale: 4.0.2
|
||||
d3-shape: 3.2.0
|
||||
d3-time: 3.1.0
|
||||
d3-timer: 3.0.1
|
||||
dev: false
|
||||
|
||||
/void-elements@3.1.0:
|
||||
resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
|
|
@ -371,7 +371,13 @@
|
|||
"free": "Free",
|
||||
"used": "Used",
|
||||
"days": "d",
|
||||
"hours": "h"
|
||||
"hours": "h",
|
||||
"crit": "Crit",
|
||||
"read": "Read",
|
||||
"write": "Write",
|
||||
"gpu": "GPU",
|
||||
"mem": "Mem",
|
||||
"swap": "Swap"
|
||||
},
|
||||
"quicklaunch": {
|
||||
"bookmark": "Bookmark",
|
||||
|
|
|
@ -145,7 +145,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
|
|||
|
||||
return (
|
||||
<div className={classNames(
|
||||
"relative z-20 ease-in-out duration-300 transition-opacity",
|
||||
"relative z-40 ease-in-out duration-300 transition-opacity",
|
||||
hidden && !isOpen && "hidden",
|
||||
!hidden && isOpen && "opacity-100",
|
||||
!isOpen && "opacity-0",
|
||||
|
|
|
@ -34,9 +34,9 @@ export default function Item({ service, group }) {
|
|||
<div
|
||||
className={`${
|
||||
hasLink ? "cursor-pointer " : " "
|
||||
}transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative`}
|
||||
}transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip`}
|
||||
>
|
||||
<div className="flex select-none">
|
||||
<div className="flex select-none z-0">
|
||||
{service.icon &&
|
||||
(hasLink ? (
|
||||
<a
|
||||
|
@ -60,21 +60,21 @@ export default function Item({ service, group }) {
|
|||
rel="noreferrer"
|
||||
className="flex-1 flex items-center justify-between rounded-r-md "
|
||||
>
|
||||
<div className="flex-1 px-2 py-2 text-sm text-left">
|
||||
<div className="flex-1 px-2 py-2 text-sm text-left z-10">
|
||||
{service.name}
|
||||
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-between rounded-r-md ">
|
||||
<div className="flex-1 px-2 py-2 text-sm text-left">
|
||||
<div className="flex-1 px-2 py-2 text-sm text-left z-10">
|
||||
{service.name}
|
||||
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2">
|
||||
<div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2 z-30">
|
||||
{service.ping && (
|
||||
<div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
|
||||
<Ping group={group} service={service.name} />
|
||||
|
|
|
@ -294,7 +294,8 @@ export function cleanServiceGroups(groups) {
|
|||
snapshotHost, // kopia
|
||||
snapshotPath,
|
||||
userEmail, // azuredevops
|
||||
repositoryId
|
||||
repositoryId,
|
||||
metric, // glances
|
||||
} = cleanedService.widget;
|
||||
|
||||
let fieldsList = fields;
|
||||
|
@ -358,6 +359,9 @@ export function cleanServiceGroups(groups) {
|
|||
if (snapshotHost) cleanedService.widget.snapshotHost = snapshotHost;
|
||||
if (snapshotPath) cleanedService.widget.snapshotPath = snapshotPath;
|
||||
}
|
||||
if (type === "glances") {
|
||||
if (metric) cleanedService.widget.metric = metric;
|
||||
}
|
||||
}
|
||||
|
||||
return cleanedService;
|
||||
|
|
|
@ -64,6 +64,8 @@ export default async function credentialedProxyHandler(req, res, map) {
|
|||
}
|
||||
else if (widget.type === "azuredevops") {
|
||||
headers.Authorization = `Basic ${Buffer.from(`$:${widget.key}`).toString("base64")}`;
|
||||
} else if (widget.type === "glances") {
|
||||
headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
|
||||
} else {
|
||||
headers["X-API-Key"] = `${widget.key}`;
|
||||
}
|
||||
|
|
|
@ -24,6 +24,7 @@ const components = {
|
|||
freshrss: dynamic(() => import("./freshrss/component")),
|
||||
gamedig: dynamic(() => import("./gamedig/component")),
|
||||
ghostfolio: dynamic(() => import("./ghostfolio/component")),
|
||||
glances: dynamic(() => import("./glances/component")),
|
||||
gluetun: dynamic(() => import("./gluetun/component")),
|
||||
gotify: dynamic(() => import("./gotify/component")),
|
||||
grafana: dynamic(() => import("./grafana/component")),
|
||||
|
|
44
src/widgets/glances/component.jsx
Normal file
44
src/widgets/glances/component.jsx
Normal file
|
@ -0,0 +1,44 @@
|
|||
import Memory from "./metrics/memory";
|
||||
import Cpu from "./metrics/cpu";
|
||||
import Sensor from "./metrics/sensor";
|
||||
import Net from "./metrics/net";
|
||||
import Process from "./metrics/process";
|
||||
import Disk from "./metrics/disk";
|
||||
import GPU from "./metrics/gpu";
|
||||
import Info from "./metrics/info";
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { widget } = service;
|
||||
|
||||
if (widget.metric === "info") {
|
||||
return <Info service={service} />;
|
||||
}
|
||||
|
||||
if (widget.metric === "memory") {
|
||||
return <Memory service={service} />;
|
||||
}
|
||||
|
||||
if (widget.metric === "process") {
|
||||
return <Process service={service} />;
|
||||
}
|
||||
|
||||
if (widget.metric.match(/^network:/)) {
|
||||
return <Net service={service} />;
|
||||
}
|
||||
|
||||
if (widget.metric.match(/^sensor:/)) {
|
||||
return <Sensor service={service} />;
|
||||
}
|
||||
|
||||
if (widget.metric.match(/^disk:/)) {
|
||||
return <Disk service={service} />;
|
||||
}
|
||||
|
||||
if (widget.metric.match(/^gpu:/)) {
|
||||
return <GPU service={service} />;
|
||||
}
|
||||
|
||||
if (widget.metric === "cpu") {
|
||||
return <Cpu service={service} />;
|
||||
}
|
||||
}
|
7
src/widgets/glances/components/block.jsx
Normal file
7
src/widgets/glances/components/block.jsx
Normal file
|
@ -0,0 +1,7 @@
|
|||
export default function Block({ position, children }) {
|
||||
return (
|
||||
<div className={`absolute ${position} z-20 text-sm pointer-events-none`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
48
src/widgets/glances/components/chart.jsx
Normal file
48
src/widgets/glances/components/chart.jsx
Normal file
|
@ -0,0 +1,48 @@
|
|||
import { PureComponent } from "react";
|
||||
import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
|
||||
|
||||
import CustomTooltip from "./custom_tooltip";
|
||||
|
||||
class Chart extends PureComponent {
|
||||
render() {
|
||||
const { dataPoints, formatter, label } = this.props;
|
||||
|
||||
return (
|
||||
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
|
||||
<div className="overflow-clip z-10 w-full h-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={dataPoints}>
|
||||
<defs>
|
||||
<linearGradient id="color" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4}/>
|
||||
<stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
name={label[0]}
|
||||
isAnimationActive={false}
|
||||
type="monotoneX"
|
||||
dataKey="value"
|
||||
stroke="rgb(var(--color-500))"
|
||||
fillOpacity={1} fill="url(#color)"
|
||||
baseLine={0}
|
||||
/>
|
||||
<Tooltip
|
||||
allowEscapeViewBox={{ x: false, y: false }}
|
||||
formatter={formatter}
|
||||
content={<CustomTooltip formatter={formatter} />}
|
||||
classNames="rounded-md text-xs p-0.5"
|
||||
contentStyle={{
|
||||
backgroundColor: "rgb(var(--color-800))",
|
||||
color: "rgb(var(--color-100))"
|
||||
}}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart;
|
63
src/widgets/glances/components/chart_dual.jsx
Normal file
63
src/widgets/glances/components/chart_dual.jsx
Normal file
|
@ -0,0 +1,63 @@
|
|||
import { PureComponent } from "react";
|
||||
import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
|
||||
|
||||
import CustomTooltip from "./custom_tooltip";
|
||||
|
||||
class ChartDual extends PureComponent {
|
||||
render() {
|
||||
const { dataPoints, formatter, stack, label, stackOffset } = this.props;
|
||||
|
||||
return (
|
||||
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
|
||||
<div className="overflow-clip z-10 w-full h-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={dataPoints} stackOffset={stackOffset ?? "none"}>
|
||||
<defs>
|
||||
<linearGradient id="colorA" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="rgb(var(--color-800))" stopOpacity={0.8}/>
|
||||
<stop offset="95%" stopColor="rgb(var(--color-800))" stopOpacity={0.5}/>
|
||||
</linearGradient>
|
||||
<linearGradient id="colorB" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4}/>
|
||||
<stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<Area
|
||||
name={label[0]}
|
||||
stackId={(stack && stack[0]) ?? "1"}
|
||||
isAnimationActive={false}
|
||||
type="monotoneX"
|
||||
dataKey="a"
|
||||
stroke="rgb(var(--color-700))"
|
||||
fillOpacity={1} fill="url(#colorA)"
|
||||
/>
|
||||
<Area
|
||||
name={label[1]}
|
||||
stackId={(stack && stack[1]) ?? "1"}
|
||||
isAnimationActive={false}
|
||||
type="monotoneX"
|
||||
dataKey="b"
|
||||
stroke="rgb(var(--color-500))"
|
||||
fillOpacity={1} fill="url(#colorB)"
|
||||
/>
|
||||
<Tooltip
|
||||
allowEscapeViewBox={{ x: false, y: false }}
|
||||
formatter={formatter}
|
||||
content={<CustomTooltip formatter={formatter} />}
|
||||
classNames="rounded-md text-xs p-0.5"
|
||||
contentStyle={{
|
||||
backgroundColor: "rgb(var(--color-800))",
|
||||
color: "rgb(var(--color-100))"
|
||||
}}
|
||||
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ChartDual;
|
9
src/widgets/glances/components/container.jsx
Normal file
9
src/widgets/glances/components/container.jsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
export default function Container({ children, className = "" }) {
|
||||
return (
|
||||
<div>
|
||||
{children}
|
||||
<div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
|
||||
<div className="h-[68px] overflow-clip" />
|
||||
</div>
|
||||
);
|
||||
}
|
15
src/widgets/glances/components/custom_tooltip.jsx
Normal file
15
src/widgets/glances/components/custom_tooltip.jsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
export default function Tooltip({ active, payload, formatter }) {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-theme-800/80 rounded-md text-theme-200 px-2 py-0">
|
||||
{payload.map((pld, id) => (
|
||||
<div key={Math.random()} className="first-of-type:pt-0 pt-0.5">
|
||||
<div>{formatter(pld.value)} {payload[id].name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
9
src/widgets/glances/components/error.jsx
Normal file
9
src/widgets/glances/components/error.jsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function Error() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">
|
||||
{t("widget.api_error")}
|
||||
</div>;
|
||||
}
|
91
src/widgets/glances/metrics/cpu.jsx
Normal file
91
src/widgets/glances/metrics/cpu.jsx
Normal file
|
@ -0,0 +1,91 @@
|
|||
import dynamic from "next/dynamic";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Error from "../components/error";
|
||||
import Container from "../components/container";
|
||||
import Block from "../components/block";
|
||||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
const Chart = dynamic(() => import("../components/chart"), { ssr: false });
|
||||
|
||||
const pointsLimit = 15;
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'cpu', {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
const { data: systemData, error: systemError } = useWidgetAPI(service.widget, 'system');
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { value: data.total }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
if (error) {
|
||||
return <Container><Error error={error} /></Container>;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Chart
|
||||
dataPoints={dataPoints}
|
||||
label={[t("resources.used")]}
|
||||
formatter={(value) => t("common.number", {
|
||||
value,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/>
|
||||
|
||||
{systemData && !systemError && (
|
||||
<Block position="bottom-3 left-3">
|
||||
{systemData.linux_distro && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.linux_distro}
|
||||
</div>
|
||||
)}
|
||||
{systemData.os_version && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.os_version}
|
||||
</div>
|
||||
)}
|
||||
{systemData.hostname && (
|
||||
<div className="text-xs opacity-75">
|
||||
{systemData.hostname}
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
)}
|
||||
|
||||
<Block position="bottom-3 right-3">
|
||||
<div className="text-xs font-bold opacity-75">
|
||||
{t("common.number", {
|
||||
value: data.total,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("resources.used")}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
102
src/widgets/glances/metrics/disk.jsx
Normal file
102
src/widgets/glances/metrics/disk.jsx
Normal file
|
@ -0,0 +1,102 @@
|
|||
import dynamic from "next/dynamic";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Error from "../components/error";
|
||||
import Container from "../components/container";
|
||||
import Block from "../components/block";
|
||||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false });
|
||||
|
||||
const pointsLimit = 15;
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const [, diskName] = widget.metric.split(':');
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit));
|
||||
const [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'diskio', {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
const calculateRates = (d) => d.map(item => ({
|
||||
a: item.read_bytes / item.time_since_update,
|
||||
b: item.write_bytes / item.time_since_update
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const diskData = data.find((item) => item.disk_name === diskName);
|
||||
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, diskData];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}, [data, diskName]);
|
||||
|
||||
useEffect(() => {
|
||||
setRatePoints(calculateRates(dataPoints));
|
||||
}, [dataPoints]);
|
||||
|
||||
if (error) {
|
||||
return <Container><Error error={error} /></Container>;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
const diskData = data.find((item) => item.disk_name === diskName);
|
||||
|
||||
if (!diskData) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
const diskRates = calculateRates(dataPoints);
|
||||
const currentRate = diskRates[diskRates.length - 1];
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ChartDual
|
||||
dataPoints={ratePoints}
|
||||
label={[t("glances.read"), t("glances.write")]}
|
||||
max={diskData.critical}
|
||||
formatter={(value) => t("common.bitrate", {
|
||||
value,
|
||||
})}
|
||||
/>
|
||||
|
||||
{currentRate && !error && (
|
||||
<Block position="bottom-3 left-3">
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.bitrate", {
|
||||
value: currentRate.a,
|
||||
})} {t("glances.read")}
|
||||
</div>
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.bitrate", {
|
||||
value: currentRate.b,
|
||||
})} {t("glances.write")}
|
||||
</div>
|
||||
</Block>
|
||||
)}
|
||||
|
||||
<Block position="bottom-3 right-3">
|
||||
<div className="text-xs opacity-75">
|
||||
{t("common.bitrate", {
|
||||
value: currentRate.a + currentRate.b,
|
||||
})}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
104
src/widgets/glances/metrics/gpu.jsx
Normal file
104
src/widgets/glances/metrics/gpu.jsx
Normal file
|
@ -0,0 +1,104 @@
|
|||
import dynamic from "next/dynamic";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Error from "../components/error";
|
||||
import Container from "../components/container";
|
||||
import Block from "../components/block";
|
||||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false });
|
||||
|
||||
const pointsLimit = 15;
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const [, gpuName] = widget.metric.split(':');
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(widget, 'gpu', {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const gpuData = data.find((item) => item[item.key] == gpuName);
|
||||
|
||||
if (gpuData) {
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [data, gpuName]);
|
||||
|
||||
if (error) {
|
||||
return <Container><Error error={error} /></Container>;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const gpuData = data.find((item) => item[item.key] == gpuName);
|
||||
|
||||
if (!gpuData) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ChartDual
|
||||
dataPoints={dataPoints}
|
||||
label={[t("glances.mem"), t("glances.gpu")]}
|
||||
stack={['mem', 'proc']}
|
||||
formatter={(value) => t("common.percent", {
|
||||
value,
|
||||
maximumFractionDigits: 1,
|
||||
})}
|
||||
/>
|
||||
|
||||
<Block position="bottom-3 left-3">
|
||||
{gpuData && gpuData.name && (
|
||||
<div className="text-xs opacity-50">
|
||||
{gpuData.name}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-xs opacity-75">
|
||||
{t("common.number", {
|
||||
value: gpuData.mem,
|
||||
maximumFractionDigits: 1,
|
||||
})}% {t("glances.mem")} {t("resources.used")}
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<Block position="bottom-3 right-3">
|
||||
<div className="text-xs opacity-75">
|
||||
{t("common.number", {
|
||||
value: gpuData.proc,
|
||||
maximumFractionDigits: 1,
|
||||
})}% {t("glances.gpu")}
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<Block position="top-3 right-3">
|
||||
<div className="text-xs opacity-75">
|
||||
{t("common.number", {
|
||||
value: gpuData.temperature,
|
||||
maximumFractionDigits: 1,
|
||||
})}°
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
115
src/widgets/glances/metrics/info.jsx
Normal file
115
src/widgets/glances/metrics/info.jsx
Normal file
|
@ -0,0 +1,115 @@
|
|||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Error from "../components/error";
|
||||
import Container from "../components/container";
|
||||
import Block from "../components/block";
|
||||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, 'quicklook', {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
const { data: systemData, errorL: systemError } = useWidgetAPI(service.widget, 'system', {
|
||||
refreshInterval: 30000,
|
||||
});
|
||||
|
||||
if (quicklookError) {
|
||||
return <Container><Error error={quicklookError} /></Container>;
|
||||
}
|
||||
|
||||
if (systemError) {
|
||||
return <Container><Error error={systemError} /></Container>;
|
||||
}
|
||||
|
||||
const dataCharts = [];
|
||||
|
||||
if (quicklookData) {
|
||||
quicklookData.percpu.forEach((cpu, index) => {
|
||||
dataCharts.push({
|
||||
name: `CPU ${index}`,
|
||||
cpu: cpu.total,
|
||||
mem: quicklookData.mem,
|
||||
swap: quicklookData.swap,
|
||||
proc: quicklookData.cpu,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Container className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
|
||||
<Block position="top-3 right-3">
|
||||
{quicklookData && quicklookData.cpu_name && (
|
||||
<div className="text-[0.6rem] opacity-50">
|
||||
{quicklookData.cpu_name}
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
<Block position="bottom-3 left-3">
|
||||
{systemData && systemData.linux_distro && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.linux_distro}
|
||||
</div>
|
||||
)}
|
||||
{systemData && systemData.os_version && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.os_version}
|
||||
</div>
|
||||
)}
|
||||
{systemData && systemData.hostname && (
|
||||
<div className="text-xs opacity-75">
|
||||
{systemData.hostname}
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
|
||||
<Block position="bottom-3 right-3 w-[4rem]">
|
||||
{quicklookData && quicklookData.cpu && (
|
||||
<div className="text-xs opacity-25 flex place-content-between">
|
||||
<div>{t("glances.cpu")}</div>
|
||||
<div className="opacity-75">
|
||||
{t("common.number", {
|
||||
value: quicklookData.cpu,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{quicklookData && quicklookData.mem && (
|
||||
<div className="text-xs opacity-25 flex place-content-between">
|
||||
<div>{t("glances.mem")}</div>
|
||||
<div className="opacity-75">
|
||||
{t("common.number", {
|
||||
value: quicklookData.mem,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{quicklookData && quicklookData.swap && (
|
||||
<div className="text-xs opacity-25 flex place-content-between">
|
||||
<div>{t("glances.swap")}</div>
|
||||
<div className="opacity-75">
|
||||
{t("common.number", {
|
||||
value: quicklookData.swap,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
88
src/widgets/glances/metrics/memory.jsx
Normal file
88
src/widgets/glances/metrics/memory.jsx
Normal file
|
@ -0,0 +1,88 @@
|
|||
import dynamic from "next/dynamic";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Error from "../components/error";
|
||||
import Container from "../components/container";
|
||||
import Block from "../components/block";
|
||||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false });
|
||||
|
||||
const pointsLimit = 15;
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'mem', {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { a: data.used, b: data.free }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
if (error) {
|
||||
return <Container><Error error={error} /></Container>;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ChartDual
|
||||
dataPoints={dataPoints}
|
||||
max={data.total}
|
||||
label={[t("resources.used"), t("resources.free")]}
|
||||
formatter={(value) => t("common.bytes", {
|
||||
value,
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/>
|
||||
|
||||
{data && !error && (
|
||||
<Block position="bottom-3 left-3">
|
||||
{data.free && (
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.bytes", {
|
||||
value: data.free,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("resources.free")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.total && (
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.bytes", {
|
||||
value: data.total,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("resources.total")}
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
)}
|
||||
|
||||
<Block position="bottom-3 right-3">
|
||||
<div className="text-xs font-bold opacity-75">
|
||||
{t("common.bytes", {
|
||||
value: data.used,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("resources.used")}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
92
src/widgets/glances/metrics/net.jsx
Normal file
92
src/widgets/glances/metrics/net.jsx
Normal file
|
@ -0,0 +1,92 @@
|
|||
import dynamic from "next/dynamic";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Error from "../components/error";
|
||||
import Container from "../components/container";
|
||||
import Block from "../components/block";
|
||||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false });
|
||||
|
||||
const pointsLimit = 15;
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const [, interfaceName] = widget.metric.split(':');
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(widget, 'network', {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const interfaceData = data.find((item) => item[item.key] === interfaceName);
|
||||
|
||||
if (interfaceData) {
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { a: interfaceData.tx, b: interfaceData.rx }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [data, interfaceName]);
|
||||
|
||||
if (error) {
|
||||
return <Container><Error error={error} /></Container>;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
const interfaceData = data.find((item) => item[item.key] === interfaceName);
|
||||
|
||||
if (!interfaceData) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ChartDual
|
||||
dataPoints={dataPoints}
|
||||
label={[t("docker.tx"), t("docker.rx")]}
|
||||
formatter={(value) => t("common.byterate", {
|
||||
value,
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
/>
|
||||
|
||||
<Block position="bottom-3 left-3">
|
||||
{interfaceData && interfaceData.interface_name && (
|
||||
<div className="text-xs opacity-50">
|
||||
{interfaceData.interface_name}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-xs opacity-75">
|
||||
{t("common.bitrate", {
|
||||
value: interfaceData.tx,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("docker.tx")}
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<Block position="bottom-3 right-3">
|
||||
<div className="text-xs opacity-75">
|
||||
{t("common.bitrate", {
|
||||
value: interfaceData.rx,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("docker.rx")}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
66
src/widgets/glances/metrics/process.jsx
Normal file
66
src/widgets/glances/metrics/process.jsx
Normal file
|
@ -0,0 +1,66 @@
|
|||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Error from "../components/error";
|
||||
import Container from "../components/container";
|
||||
import Block from "../components/block";
|
||||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
import ResolvedIcon from "components/resolvedicon";
|
||||
|
||||
const statusMap = {
|
||||
"R": <ResolvedIcon icon="mdi-circle" width={32} height={32} />, // running
|
||||
"S": <ResolvedIcon icon="mdi-circle-outline" width={32} height={32} />, // sleeping
|
||||
"D": <ResolvedIcon icon="mdi-circle-double" width={32} height={32} />, // disk sleep
|
||||
"Z": <ResolvedIcon icon="mdi-circle-opacity" width={32} height={32} />, // zombie
|
||||
"T": <ResolvedIcon icon="mdi-decagram-outline" width={32} height={32} />, // traced
|
||||
"t": <ResolvedIcon icon="mdi-hexagon-outline" width={32} height={32} />, // traced
|
||||
"X": <ResolvedIcon icon="mdi-rhombus-outline" width={32} height={32} />, // dead
|
||||
};
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'processlist', {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return <Container><Error error={error} /></Container>;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
data.splice(5);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Block position="top-4 right-3 left-3">
|
||||
<div className="flex items-center text-xs">
|
||||
<div className="grow" />
|
||||
<div className="w-14 text-right italic">{t("resources.cpu")}</div>
|
||||
<div className="w-14 text-right">{t("resources.mem")}</div>
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<Block position="bottom-4 right-3 left-3">
|
||||
<div className="pointer-events-none text-theme-900 dark:text-theme-200">
|
||||
{ data.map((item) => <div key={item.pid} className="text-[0.75rem] h-[0.8rem]">
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 mr-1.5 opacity-50">
|
||||
{statusMap[item.status]}
|
||||
</div>
|
||||
<div className="opacity-75 grow">{item.name}</div>
|
||||
<div className="opacity-25 w-14 text-right">{item.cpu_percent.toFixed(1)}%</div>
|
||||
<div className="opacity-25 w-14 text-right">{t("common.bytes", {
|
||||
value: item.memory_info[0],
|
||||
maximumFractionDigits: 0,
|
||||
})}</div>
|
||||
</div>
|
||||
</div>) }
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
88
src/widgets/glances/metrics/sensor.jsx
Normal file
88
src/widgets/glances/metrics/sensor.jsx
Normal file
|
@ -0,0 +1,88 @@
|
|||
import dynamic from "next/dynamic";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Error from "../components/error";
|
||||
import Container from "../components/container";
|
||||
import Block from "../components/block";
|
||||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
const Chart = dynamic(() => import("../components/chart"), { ssr: false });
|
||||
|
||||
const pointsLimit = 15;
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const [, sensorName] = widget.metric.split(':');
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'sensors', {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const sensorData = data.find((item) => item.label === sensorName);
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}, [data, sensorName]);
|
||||
|
||||
if (error) {
|
||||
return <Container><Error error={error} /></Container>;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
const sensorData = data.find((item) => item.label === sensorName);
|
||||
|
||||
if (!sensorData) {
|
||||
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Chart
|
||||
dataPoints={dataPoints}
|
||||
label={[sensorData.unit]}
|
||||
max={sensorData.critical}
|
||||
formatter={(value) => t("common.number", {
|
||||
value,
|
||||
})}
|
||||
/>
|
||||
|
||||
{sensorData && !error && (
|
||||
<Block position="bottom-3 left-3">
|
||||
{sensorData.warning && (
|
||||
<div className="text-xs opacity-50">
|
||||
{sensorData.warning}{sensorData.unit} {t("glances.warn")}
|
||||
</div>
|
||||
)}
|
||||
{sensorData.critical && (
|
||||
<div className="text-xs opacity-50">
|
||||
{sensorData.critical} {sensorData.unit} {t("glances.crit")}
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
)}
|
||||
|
||||
<Block position="bottom-3 right-3">
|
||||
<div className="text-xs opacity-75">
|
||||
{t("common.number", {
|
||||
value: sensorData.value,
|
||||
})} {sensorData.unit}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
8
src/widgets/glances/widget.js
Normal file
8
src/widgets/glances/widget.js
Normal file
|
@ -0,0 +1,8 @@
|
|||
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
|
||||
|
||||
const widget = {
|
||||
api: "{url}/api/3/{endpoint}",
|
||||
proxyHandler: credentialedProxyHandler,
|
||||
};
|
||||
|
||||
export default widget;
|
|
@ -19,6 +19,7 @@ import flood from "./flood/widget";
|
|||
import freshrss from "./freshrss/widget";
|
||||
import gamedig from "./gamedig/widget";
|
||||
import ghostfolio from "./ghostfolio/widget";
|
||||
import glances from "./glances/widget";
|
||||
import gluetun from "./gluetun/widget";
|
||||
import gotify from "./gotify/widget";
|
||||
import grafana from "./grafana/widget";
|
||||
|
@ -111,6 +112,7 @@ const widgets = {
|
|||
freshrss,
|
||||
gamedig,
|
||||
ghostfolio,
|
||||
glances,
|
||||
gluetun,
|
||||
gotify,
|
||||
grafana,
|
||||
|
|
Loading…
Add table
Reference in a new issue