mirror of
https://github.com/karl0ss/homepage.git
synced 2025-11-04 00:10:57 +00:00
Merge pull request #1749 from benphelps/charts-widget
Glances Charts Widget
This commit is contained in:
Ben Phelps
GitHub
commit
9c4d1cf108
@ -30,6 +30,7 @@
|
|||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-i18next": "^11.18.6",
|
"react-i18next": "^11.18.6",
|
||||||
"react-icons": "^4.4.0",
|
"react-icons": "^4.4.0",
|
||||||
|
"recharts": "^2.7.2",
|
||||||
"shvl": "^3.0.0",
|
"shvl": "^3.0.0",
|
||||||
"swr": "^1.3.0",
|
"swr": "^1.3.0",
|
||||||
"systeminformation": "^5.17.12",
|
"systeminformation": "^5.17.12",
|
||||||
|
|||||||
260
pnpm-lock.yaml
generated
260
pnpm-lock.yaml
generated
@ -1,5 +1,9 @@
|
|||||||
lockfileVersion: '6.0'
|
lockfileVersion: '6.0'
|
||||||
|
|
||||||
|
settings:
|
||||||
|
autoInstallPeers: true
|
||||||
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
'@headlessui/react':
|
'@headlessui/react':
|
||||||
specifier: ^1.7.2
|
specifier: ^1.7.2
|
||||||
@ -61,6 +65,9 @@ dependencies:
|
|||||||
react-icons:
|
react-icons:
|
||||||
specifier: ^4.4.0
|
specifier: ^4.4.0
|
||||||
version: 4.8.0(react@18.2.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:
|
shvl:
|
||||||
specifier: ^3.0.0
|
specifier: ^3.0.0
|
||||||
version: 3.0.0
|
version: 3.0.0
|
||||||
@ -435,6 +442,48 @@ packages:
|
|||||||
tailwindcss: 3.3.0(postcss@8.4.21)
|
tailwindcss: 3.3.0(postcss@8.4.21)
|
||||||
dev: true
|
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:
|
/@types/hoist-non-react-statics@3.3.1:
|
||||||
resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
|
resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -785,6 +834,7 @@ packages:
|
|||||||
/buildcheck@0.0.3:
|
/buildcheck@0.0.3:
|
||||||
resolution: {integrity: sha512-pziaA+p/wdVImfcbsZLNF32EiWyujlQLwolMqUQE8xpKNOH7KmZQaY8sXN7DGOEzPAElo9QTaeNRfGnf3iOJbA==}
|
resolution: {integrity: sha512-pziaA+p/wdVImfcbsZLNF32EiWyujlQLwolMqUQE8xpKNOH7KmZQaY8sXN7DGOEzPAElo9QTaeNRfGnf3iOJbA==}
|
||||||
engines: {node: '>=10.0.0'}
|
engines: {node: '>=10.0.0'}
|
||||||
|
requiresBuild: true
|
||||||
dev: false
|
dev: false
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
@ -1020,6 +1070,10 @@ packages:
|
|||||||
nth-check: 2.1.1
|
nth-check: 2.1.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/css-unit-converter@1.1.2:
|
||||||
|
resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/css-what@6.1.0:
|
/css-what@6.1.0:
|
||||||
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
|
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
|
||||||
engines: {node: '>= 6'}
|
engines: {node: '>= 6'}
|
||||||
@ -1034,6 +1088,77 @@ packages:
|
|||||||
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
|
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
|
||||||
dev: false
|
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:
|
/damerau-levenshtein@1.0.8:
|
||||||
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
|
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
|
||||||
dev: true
|
dev: true
|
||||||
@ -1067,6 +1192,10 @@ packages:
|
|||||||
dependencies:
|
dependencies:
|
||||||
ms: 2.1.2
|
ms: 2.1.2
|
||||||
|
|
||||||
|
/decimal.js-light@2.5.1:
|
||||||
|
resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/decompress-response@6.0.0:
|
/decompress-response@6.0.0:
|
||||||
resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
|
resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
@ -1175,6 +1304,12 @@ packages:
|
|||||||
esutils: 2.0.3
|
esutils: 2.0.3
|
||||||
dev: true
|
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:
|
/dom-serializer@2.0.0:
|
||||||
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
|
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -1654,6 +1789,10 @@ packages:
|
|||||||
deprecated: Use promise-toolbox/fromEvent instead
|
deprecated: Use promise-toolbox/fromEvent instead
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/eventemitter3@4.0.7:
|
||||||
|
resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/execa@5.0.0:
|
/execa@5.0.0:
|
||||||
resolution: {integrity: sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==}
|
resolution: {integrity: sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
@ -1685,6 +1824,11 @@ packages:
|
|||||||
resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
|
resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/fast-equals@5.0.1:
|
||||||
|
resolution: {integrity: sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==}
|
||||||
|
engines: {node: '>=6.0.0'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/fast-glob@3.2.12:
|
/fast-glob@3.2.12:
|
||||||
resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
|
resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
|
||||||
engines: {node: '>=8.6.0'}
|
engines: {node: '>=8.6.0'}
|
||||||
@ -2158,6 +2302,11 @@ packages:
|
|||||||
side-channel: 1.0.4
|
side-channel: 1.0.4
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/internmap@2.0.3:
|
||||||
|
resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/interpret@1.4.0:
|
/interpret@1.4.0:
|
||||||
resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
|
resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
|
||||||
engines: {node: '>= 0.10'}
|
engines: {node: '>= 0.10'}
|
||||||
@ -2361,6 +2510,7 @@ packages:
|
|||||||
|
|
||||||
/jose@4.13.1:
|
/jose@4.13.1:
|
||||||
resolution: {integrity: sha512-MSJQC5vXco5Br38mzaQKiq9mwt7lwj2eXpgpRyQYNHYt2lq1PjkWa7DLXX0WVcQLE9HhMh3jPiufS7fhJf+CLQ==}
|
resolution: {integrity: sha512-MSJQC5vXco5Br38mzaQKiq9mwt7lwj2eXpgpRyQYNHYt2lq1PjkWa7DLXX0WVcQLE9HhMh3jPiufS7fhJf+CLQ==}
|
||||||
|
requiresBuild: true
|
||||||
dev: false
|
dev: false
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
@ -2480,6 +2630,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/lodash@4.17.21:
|
||||||
|
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/logform@2.5.1:
|
/logform@2.5.1:
|
||||||
resolution: {integrity: sha512-9FyqAm9o9NKKfiAKfZoYo9bGXXuwMkxQiQttkT4YjjVtQVIQtK6LmVtlxmCaFswo6N4AfEkHqZTV0taDtPotNg==}
|
resolution: {integrity: sha512-9FyqAm9o9NKKfiAKfZoYo9bGXXuwMkxQiQttkT4YjjVtQVIQtK6LmVtlxmCaFswo6N4AfEkHqZTV0taDtPotNg==}
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -2623,6 +2777,7 @@ packages:
|
|||||||
|
|
||||||
/nan@2.17.0:
|
/nan@2.17.0:
|
||||||
resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==}
|
resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==}
|
||||||
|
requiresBuild: true
|
||||||
dev: false
|
dev: false
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
@ -2755,11 +2910,11 @@ packages:
|
|||||||
/object-assign@4.1.1:
|
/object-assign@4.1.1:
|
||||||
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
|
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
dev: true
|
|
||||||
|
|
||||||
/object-hash@2.2.0:
|
/object-hash@2.2.0:
|
||||||
resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
|
resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
|
||||||
engines: {node: '>= 6'}
|
engines: {node: '>= 6'}
|
||||||
|
requiresBuild: true
|
||||||
dev: false
|
dev: false
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
@ -2832,6 +2987,7 @@ packages:
|
|||||||
/oidc-token-hash@5.0.1:
|
/oidc-token-hash@5.0.1:
|
||||||
resolution: {integrity: sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==}
|
resolution: {integrity: sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==}
|
||||||
engines: {node: ^10.13.0 || >=12.0.0}
|
engines: {node: ^10.13.0 || >=12.0.0}
|
||||||
|
requiresBuild: true
|
||||||
dev: false
|
dev: false
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
@ -3023,6 +3179,10 @@ packages:
|
|||||||
util-deprecate: 1.0.2
|
util-deprecate: 1.0.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/postcss-value-parser@3.3.1:
|
||||||
|
resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/postcss-value-parser@4.2.0:
|
/postcss-value-parser@4.2.0:
|
||||||
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
|
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
|
||||||
dev: true
|
dev: true
|
||||||
@ -3077,7 +3237,6 @@ packages:
|
|||||||
loose-envify: 1.4.0
|
loose-envify: 1.4.0
|
||||||
object-assign: 4.1.1
|
object-assign: 4.1.1
|
||||||
react-is: 16.13.1
|
react-is: 16.13.1
|
||||||
dev: true
|
|
||||||
|
|
||||||
/psl@1.9.0:
|
/psl@1.9.0:
|
||||||
resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
|
resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
|
||||||
@ -3162,6 +3321,49 @@ packages:
|
|||||||
/react-is@16.13.1:
|
/react-is@16.13.1:
|
||||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
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:
|
/react@18.2.0:
|
||||||
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
@ -3212,6 +3414,34 @@ packages:
|
|||||||
picomatch: 2.3.1
|
picomatch: 2.3.1
|
||||||
dev: true
|
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:
|
/rechoir@0.6.2:
|
||||||
resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
|
resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
|
||||||
engines: {node: '>= 0.10'}
|
engines: {node: '>= 0.10'}
|
||||||
@ -3219,6 +3449,13 @@ packages:
|
|||||||
resolve: 1.22.1
|
resolve: 1.22.1
|
||||||
dev: false
|
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:
|
/regenerator-runtime@0.13.11:
|
||||||
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
|
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
|
||||||
|
|
||||||
@ -3896,6 +4133,25 @@ packages:
|
|||||||
extsprintf: 1.3.0
|
extsprintf: 1.3.0
|
||||||
dev: false
|
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:
|
/void-elements@3.1.0:
|
||||||
resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
|
resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
|||||||
@ -371,7 +371,13 @@
|
|||||||
"free": "Free",
|
"free": "Free",
|
||||||
"used": "Used",
|
"used": "Used",
|
||||||
"days": "d",
|
"days": "d",
|
||||||
"hours": "h"
|
"hours": "h",
|
||||||
|
"crit": "Crit",
|
||||||
|
"read": "Read",
|
||||||
|
"write": "Write",
|
||||||
|
"gpu": "GPU",
|
||||||
|
"mem": "Mem",
|
||||||
|
"swap": "Swap"
|
||||||
},
|
},
|
||||||
"quicklaunch": {
|
"quicklaunch": {
|
||||||
"bookmark": "Bookmark",
|
"bookmark": "Bookmark",
|
||||||
|
|||||||
@ -145,7 +145,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(
|
<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 && "hidden",
|
||||||
!hidden && isOpen && "opacity-100",
|
!hidden && isOpen && "opacity-100",
|
||||||
!isOpen && "opacity-0",
|
!isOpen && "opacity-0",
|
||||||
|
|||||||
@ -34,9 +34,9 @@ export default function Item({ service, group }) {
|
|||||||
<div
|
<div
|
||||||
className={`${
|
className={`${
|
||||||
hasLink ? "cursor-pointer " : " "
|
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 &&
|
{service.icon &&
|
||||||
(hasLink ? (
|
(hasLink ? (
|
||||||
<a
|
<a
|
||||||
@ -60,21 +60,21 @@ export default function Item({ service, group }) {
|
|||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="flex-1 flex items-center justify-between rounded-r-md "
|
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}
|
{service.name}
|
||||||
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
|
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex-1 flex items-center justify-between rounded-r-md ">
|
<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}
|
{service.name}
|
||||||
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
|
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</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 && (
|
{service.ping && (
|
||||||
<div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
|
<div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
|
||||||
<Ping group={group} service={service.name} />
|
<Ping group={group} service={service.name} />
|
||||||
|
|||||||
@ -294,7 +294,8 @@ export function cleanServiceGroups(groups) {
|
|||||||
snapshotHost, // kopia
|
snapshotHost, // kopia
|
||||||
snapshotPath,
|
snapshotPath,
|
||||||
userEmail, // azuredevops
|
userEmail, // azuredevops
|
||||||
repositoryId
|
repositoryId,
|
||||||
|
metric, // glances
|
||||||
} = cleanedService.widget;
|
} = cleanedService.widget;
|
||||||
|
|
||||||
let fieldsList = fields;
|
let fieldsList = fields;
|
||||||
@ -358,6 +359,9 @@ export function cleanServiceGroups(groups) {
|
|||||||
if (snapshotHost) cleanedService.widget.snapshotHost = snapshotHost;
|
if (snapshotHost) cleanedService.widget.snapshotHost = snapshotHost;
|
||||||
if (snapshotPath) cleanedService.widget.snapshotPath = snapshotPath;
|
if (snapshotPath) cleanedService.widget.snapshotPath = snapshotPath;
|
||||||
}
|
}
|
||||||
|
if (type === "glances") {
|
||||||
|
if (metric) cleanedService.widget.metric = metric;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return cleanedService;
|
return cleanedService;
|
||||||
|
|||||||
@ -64,6 +64,8 @@ export default async function credentialedProxyHandler(req, res, map) {
|
|||||||
}
|
}
|
||||||
else if (widget.type === "azuredevops") {
|
else if (widget.type === "azuredevops") {
|
||||||
headers.Authorization = `Basic ${Buffer.from(`$:${widget.key}`).toString("base64")}`;
|
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 {
|
} else {
|
||||||
headers["X-API-Key"] = `${widget.key}`;
|
headers["X-API-Key"] = `${widget.key}`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,6 +24,7 @@ const components = {
|
|||||||
freshrss: dynamic(() => import("./freshrss/component")),
|
freshrss: dynamic(() => import("./freshrss/component")),
|
||||||
gamedig: dynamic(() => import("./gamedig/component")),
|
gamedig: dynamic(() => import("./gamedig/component")),
|
||||||
ghostfolio: dynamic(() => import("./ghostfolio/component")),
|
ghostfolio: dynamic(() => import("./ghostfolio/component")),
|
||||||
|
glances: dynamic(() => import("./glances/component")),
|
||||||
gluetun: dynamic(() => import("./gluetun/component")),
|
gluetun: dynamic(() => import("./gluetun/component")),
|
||||||
gotify: dynamic(() => import("./gotify/component")),
|
gotify: dynamic(() => import("./gotify/component")),
|
||||||
grafana: dynamic(() => import("./grafana/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 freshrss from "./freshrss/widget";
|
||||||
import gamedig from "./gamedig/widget";
|
import gamedig from "./gamedig/widget";
|
||||||
import ghostfolio from "./ghostfolio/widget";
|
import ghostfolio from "./ghostfolio/widget";
|
||||||
|
import glances from "./glances/widget";
|
||||||
import gluetun from "./gluetun/widget";
|
import gluetun from "./gluetun/widget";
|
||||||
import gotify from "./gotify/widget";
|
import gotify from "./gotify/widget";
|
||||||
import grafana from "./grafana/widget";
|
import grafana from "./grafana/widget";
|
||||||
@ -111,6 +112,7 @@ const widgets = {
|
|||||||
freshrss,
|
freshrss,
|
||||||
gamedig,
|
gamedig,
|
||||||
ghostfolio,
|
ghostfolio,
|
||||||
|
glances,
|
||||||
gluetun,
|
gluetun,
|
||||||
gotify,
|
gotify,
|
||||||
grafana,
|
grafana,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user