mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
WIP Extract or duplicate more functionalities of Cluster Overview from the monolith to a Feature
Co-authored-by: Juho Heikka <juho.heikka@gmail.com> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
This commit is contained in:
Iku-turso
parent
a6ef3ef80e
commit
89aa83a918
55
package-lock.json
generated
55
package-lock.json
generated
@ -8503,7 +8503,6 @@
|
|||||||
"version": "1.8.2",
|
"version": "1.8.2",
|
||||||
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
|
||||||
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
|
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"acorn": "^7.0.0",
|
"acorn": "^7.0.0",
|
||||||
"acorn-walk": "^7.0.0",
|
"acorn-walk": "^7.0.0",
|
||||||
@ -8514,7 +8513,6 @@
|
|||||||
"version": "7.4.1",
|
"version": "7.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||||
"dev": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"acorn": "bin/acorn"
|
"acorn": "bin/acorn"
|
||||||
},
|
},
|
||||||
@ -8526,7 +8524,6 @@
|
|||||||
"version": "7.2.0",
|
"version": "7.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
||||||
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
|
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.4.0"
|
"node": ">=0.4.0"
|
||||||
}
|
}
|
||||||
@ -9614,7 +9611,6 @@
|
|||||||
"version": "5.2.2",
|
"version": "5.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "*"
|
"node": "*"
|
||||||
}
|
}
|
||||||
@ -10374,7 +10370,6 @@
|
|||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
|
||||||
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
@ -10457,7 +10452,6 @@
|
|||||||
"version": "2.9.4",
|
"version": "2.9.4",
|
||||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
|
||||||
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
|
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chartjs-color": "^2.1.0",
|
"chartjs-color": "^2.1.0",
|
||||||
"moment": "^2.10.2"
|
"moment": "^2.10.2"
|
||||||
@ -10467,7 +10461,6 @@
|
|||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
|
||||||
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
|
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chartjs-color-string": "^0.6.0",
|
"chartjs-color-string": "^0.6.0",
|
||||||
"color-convert": "^1.9.3"
|
"color-convert": "^1.9.3"
|
||||||
@ -10477,7 +10470,6 @@
|
|||||||
"version": "0.6.0",
|
"version": "0.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
||||||
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"color-name": "^1.0.0"
|
"color-name": "^1.0.0"
|
||||||
}
|
}
|
||||||
@ -10486,7 +10478,6 @@
|
|||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"color-name": "1.1.3"
|
"color-name": "1.1.3"
|
||||||
}
|
}
|
||||||
@ -10494,8 +10485,7 @@
|
|||||||
"node_modules/chartjs-color/node_modules/color-name": {
|
"node_modules/chartjs-color/node_modules/color-name": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||||
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
|
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"node_modules/chokidar": {
|
"node_modules/chokidar": {
|
||||||
"version": "3.5.3",
|
"version": "3.5.3",
|
||||||
@ -12187,7 +12177,6 @@
|
|||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
|
||||||
"integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
|
"integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
|
||||||
"dev": true,
|
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
@ -12301,7 +12290,6 @@
|
|||||||
"version": "5.2.1",
|
"version": "5.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
|
||||||
"integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
|
"integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"acorn-node": "^1.8.2",
|
"acorn-node": "^1.8.2",
|
||||||
"defined": "^1.0.0",
|
"defined": "^1.0.0",
|
||||||
@ -12336,8 +12324,7 @@
|
|||||||
"node_modules/didyoumean": {
|
"node_modules/didyoumean": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||||
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
|
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"node_modules/diff": {
|
"node_modules/diff": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
@ -12418,8 +12405,7 @@
|
|||||||
"node_modules/dlv": {
|
"node_modules/dlv": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
|
||||||
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
|
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"node_modules/dmg-builder": {
|
"node_modules/dmg-builder": {
|
||||||
"version": "23.6.0",
|
"version": "23.6.0",
|
||||||
@ -13040,7 +13026,6 @@
|
|||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 4"
|
"node": ">= 4"
|
||||||
}
|
}
|
||||||
@ -22054,7 +22039,6 @@
|
|||||||
"version": "2.0.4",
|
"version": "2.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"big.js": "^5.2.2",
|
"big.js": "^5.2.2",
|
||||||
"emojis-list": "^3.0.0",
|
"emojis-list": "^3.0.0",
|
||||||
@ -23472,14 +23456,12 @@
|
|||||||
"node_modules/monaco-editor": {
|
"node_modules/monaco-editor": {
|
||||||
"version": "0.29.1",
|
"version": "0.29.1",
|
||||||
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz",
|
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz",
|
||||||
"integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw==",
|
"integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"node_modules/monaco-editor-webpack-plugin": {
|
"node_modules/monaco-editor-webpack-plugin": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-5.0.0.tgz",
|
||||||
"integrity": "sha512-KrUUTmMO3lDCNK4honZ6rrrKjOI7FFLeyCktPetIo5HlRqr5dfE6ewaA9qNLH96XY7CekE3Z+v/+I6ufAs3ObA==",
|
"integrity": "sha512-KrUUTmMO3lDCNK4honZ6rrrKjOI7FFLeyCktPetIo5HlRqr5dfE6ewaA9qNLH96XY7CekE3Z+v/+I6ufAs3ObA==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"loader-utils": "^2.0.0"
|
"loader-utils": "^2.0.0"
|
||||||
},
|
},
|
||||||
@ -27802,7 +27784,6 @@
|
|||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||||
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
|
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@ -28320,7 +28301,6 @@
|
|||||||
"version": "14.1.0",
|
"version": "14.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
|
||||||
"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
|
"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"postcss-value-parser": "^4.0.0",
|
"postcss-value-parser": "^4.0.0",
|
||||||
"read-cache": "^1.0.0",
|
"read-cache": "^1.0.0",
|
||||||
@ -28337,7 +28317,6 @@
|
|||||||
"version": "4.0.1",
|
"version": "4.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
|
||||||
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
|
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"camelcase-css": "^2.0.1"
|
"camelcase-css": "^2.0.1"
|
||||||
},
|
},
|
||||||
@ -28461,7 +28440,6 @@
|
|||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
|
||||||
"integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
|
"integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"postcss-selector-parser": "^6.0.10"
|
"postcss-selector-parser": "^6.0.10"
|
||||||
},
|
},
|
||||||
@ -29330,7 +29308,6 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||||
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
|
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"pify": "^2.3.0"
|
"pify": "^2.3.0"
|
||||||
}
|
}
|
||||||
@ -31874,7 +31851,6 @@
|
|||||||
"version": "3.2.7",
|
"version": "3.2.7",
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
|
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
|
||||||
"integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
|
"integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"arg": "^5.0.2",
|
"arg": "^5.0.2",
|
||||||
"chokidar": "^3.5.3",
|
"chokidar": "^3.5.3",
|
||||||
@ -31915,7 +31891,6 @@
|
|||||||
"version": "6.0.2",
|
"version": "6.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
||||||
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
|
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"is-glob": "^4.0.3"
|
"is-glob": "^4.0.3"
|
||||||
},
|
},
|
||||||
@ -31927,7 +31902,6 @@
|
|||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
|
||||||
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
|
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
@ -34993,7 +34967,7 @@
|
|||||||
"@swc/core": "^1.3.38",
|
"@swc/core": "^1.3.38",
|
||||||
"@swc/jest": "^0.2.23",
|
"@swc/jest": "^0.2.23",
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^12.1.5",
|
||||||
"@types/jest": "^29.2.2",
|
"@types/jest": "^29.2.2",
|
||||||
"identity-obj-proxy": "^3.0.0",
|
"identity-obj-proxy": "^3.0.0",
|
||||||
"jest": "^29.5.0",
|
"jest": "^29.5.0",
|
||||||
@ -36326,8 +36300,10 @@
|
|||||||
"css-loader": "^6.7.2",
|
"css-loader": "^6.7.2",
|
||||||
"fork-ts-checker-webpack-plugin": "^7.3.0",
|
"fork-ts-checker-webpack-plugin": "^7.3.0",
|
||||||
"mini-css-extract-plugin": "^2.7.3",
|
"mini-css-extract-plugin": "^2.7.3",
|
||||||
|
"sass": "^1.58.2",
|
||||||
"sass-loader": "^13.2.0",
|
"sass-loader": "^13.2.0",
|
||||||
"style-loader": "^3.3.1",
|
"style-loader": "^3.3.1",
|
||||||
|
"tailwindcss": "^3.2.4",
|
||||||
"ts-loader": "^9.4.1",
|
"ts-loader": "^9.4.1",
|
||||||
"webpack": "^5.76.0",
|
"webpack": "^5.76.0",
|
||||||
"webpack-cli": "^4.10.0",
|
"webpack-cli": "^4.10.0",
|
||||||
@ -37077,11 +37053,24 @@
|
|||||||
"version": "6.5.0-alpha.1",
|
"version": "6.5.0-alpha.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@k8slens/eslint-config": "6.5.0-alpha.1"
|
"@k8slens/eslint-config": "6.5.0-alpha.1",
|
||||||
|
"@testing-library/react": "^12.1.5",
|
||||||
|
"@testing-library/user-event": "^13.5.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||||
"@ogre-tools/injectable": "^15.1.2"
|
"@k8slens/utilities": "^1.0.0-alpha.1",
|
||||||
|
"@ogre-tools/injectable": "^15.1.2",
|
||||||
|
"@ogre-tools/injectable-react": "^15.1.2",
|
||||||
|
"auto-bind": "^4.0.0",
|
||||||
|
"chart.js": "^2.9.4",
|
||||||
|
"js-yaml": "^4.1.0",
|
||||||
|
"mobx": "^6.8.0",
|
||||||
|
"mobx-react": "^7.6.0",
|
||||||
|
"moment": "^2.29.4",
|
||||||
|
"monaco-editor": "^0.29.1",
|
||||||
|
"monaco-editor-webpack-plugin": "^5.0.0",
|
||||||
|
"react": "^17.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"packages/utility-features/run-many": {
|
"packages/utility-features/run-many": {
|
||||||
|
|||||||
@ -6,15 +6,13 @@ import { getInjectable } from "@ogre-tools/injectable";
|
|||||||
import { createLogger, format } from "winston";
|
import { createLogger, format } from "winston";
|
||||||
import type { Logger } from "./logger";
|
import type { Logger } from "./logger";
|
||||||
import { loggerTransportInjectionToken } from "./logger/transports";
|
import { loggerTransportInjectionToken } from "./logger/transports";
|
||||||
|
import { loggerInjectionToken } from "@k8slens/metrics";
|
||||||
|
|
||||||
const loggerInjectable = getInjectable({
|
const loggerInjectable = getInjectable({
|
||||||
id: "logger",
|
id: "logger",
|
||||||
instantiate: (di): Logger => {
|
instantiate: (di): Logger => {
|
||||||
const baseLogger = createLogger({
|
const baseLogger = createLogger({
|
||||||
format: format.combine(
|
format: format.combine(format.splat(), format.simple()),
|
||||||
format.splat(),
|
|
||||||
format.simple(),
|
|
||||||
),
|
|
||||||
transports: di.injectMany(loggerTransportInjectionToken),
|
transports: di.injectMany(loggerTransportInjectionToken),
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -28,6 +26,8 @@ const loggerInjectable = getInjectable({
|
|||||||
},
|
},
|
||||||
|
|
||||||
decorable: false,
|
decorable: false,
|
||||||
|
|
||||||
|
injectionToken: loggerInjectionToken,
|
||||||
});
|
});
|
||||||
|
|
||||||
export default loggerInjectable;
|
export default loggerInjectable;
|
||||||
|
|||||||
@ -3,11 +3,6 @@
|
|||||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import type { Logger } from "@k8slens/metrics";
|
||||||
|
|
||||||
export interface Logger {
|
export { Logger };
|
||||||
info: (message: string, ...args: any) => void;
|
|
||||||
error: (message: string, ...args: any) => void;
|
|
||||||
debug: (message: string, ...args: any) => void;
|
|
||||||
warn: (message: string, ...args: any) => void;
|
|
||||||
silly: (message: string, ...args: any) => void;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -18,6 +18,7 @@ import { persistStateToConfigInjectionToken } from "../base-store/save-to-file";
|
|||||||
import getBasenameOfPathInjectable from "../path/get-basename.injectable";
|
import getBasenameOfPathInjectable from "../path/get-basename.injectable";
|
||||||
import { enlistMessageChannelListenerInjectionToken } from "../utils/channel/enlist-message-channel-listener-injection-token";
|
import { enlistMessageChannelListenerInjectionToken } from "../utils/channel/enlist-message-channel-listener-injection-token";
|
||||||
import userStorePreferenceDescriptorsInjectable from "./preference-descriptors.injectable";
|
import userStorePreferenceDescriptorsInjectable from "./preference-descriptors.injectable";
|
||||||
|
import { userStoreInjectionToken } from "@k8slens/metrics";
|
||||||
|
|
||||||
const userStoreInjectable = getInjectable({
|
const userStoreInjectable = getInjectable({
|
||||||
id: "user-store",
|
id: "user-store",
|
||||||
@ -37,6 +38,8 @@ const userStoreInjectable = getInjectable({
|
|||||||
shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
|
shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
|
||||||
preferenceDescriptors: di.inject(userStorePreferenceDescriptorsInjectable),
|
preferenceDescriptors: di.inject(userStorePreferenceDescriptorsInjectable),
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
injectionToken: userStoreInjectionToken
|
||||||
});
|
});
|
||||||
|
|
||||||
export default userStoreInjectable;
|
export default userStoreInjectable;
|
||||||
|
|||||||
@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
|
import clusterOverviewStoreInjectable from "./cluster-overview-store.injectable";
|
||||||
|
import { clusterOverviewStoreInjectionToken } from "@k8slens/metrics";
|
||||||
|
|
||||||
|
const clusterOverviewStoreIndirectionInjectable = getInjectable({
|
||||||
|
id: "cluster-overview-store-indirection",
|
||||||
|
instantiate: (di) => di.inject(clusterOverviewStoreInjectable),
|
||||||
|
injectionToken: clusterOverviewStoreInjectionToken
|
||||||
|
});
|
||||||
|
|
||||||
|
export default clusterOverviewStoreIndirectionInjectable;
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
|
import navigateToEntitySettingsInjectable from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
|
||||||
|
import hostedClusterInjectable from "../../cluster-frame-context/hosted-cluster.injectable";
|
||||||
|
import { navigateToPreferencesOfMetricsInjectionToken } from "@k8slens/metrics";
|
||||||
|
|
||||||
|
const navigateToPreferencesOfMetricsInjectable = getInjectable({
|
||||||
|
id: "navigate-to-preferences-of-metrics",
|
||||||
|
|
||||||
|
instantiate: (di) => {
|
||||||
|
const cluster = di.inject(hostedClusterInjectable);
|
||||||
|
|
||||||
|
const navigateToEntitySettings = di.inject(
|
||||||
|
navigateToEntitySettingsInjectable
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!cluster?.id) {
|
||||||
|
throw new Error(
|
||||||
|
"Tried to inject way to navigate to preferences, but unnaturally no related cluster was available."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => navigateToEntitySettings(cluster.id, "metrics");
|
||||||
|
},
|
||||||
|
|
||||||
|
injectionToken: navigateToPreferencesOfMetricsInjectionToken,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default navigateToPreferencesOfMetricsInjectable;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
|
import nodeStoreInjectable from "./store.injectable";
|
||||||
|
import { nodeStoreInjectionToken } from "@k8slens/metrics";
|
||||||
|
|
||||||
|
const nodeStoreIndirectionInjectable = getInjectable({
|
||||||
|
id: "node-store-indirection",
|
||||||
|
instantiate: (di) => di.inject(nodeStoreInjectable),
|
||||||
|
injectionToken: nodeStoreInjectionToken
|
||||||
|
});
|
||||||
|
|
||||||
|
export default nodeStoreIndirectionInjectable;
|
||||||
@ -10,6 +10,7 @@ import { lensThemeDeclarationInjectionToken } from "./declaration";
|
|||||||
import defaultLensThemeInjectable from "./default-theme.injectable";
|
import defaultLensThemeInjectable from "./default-theme.injectable";
|
||||||
import systemThemeConfigurationInjectable from "./system-theme.injectable";
|
import systemThemeConfigurationInjectable from "./system-theme.injectable";
|
||||||
import lensThemesInjectable from "./themes.injectable";
|
import lensThemesInjectable from "./themes.injectable";
|
||||||
|
import { activeThemeInjectionToken } from "@k8slens/metrics";
|
||||||
|
|
||||||
const activeThemeInjectable = getInjectable({
|
const activeThemeInjectable = getInjectable({
|
||||||
id: "active-theme",
|
id: "active-theme",
|
||||||
@ -35,6 +36,8 @@ const activeThemeInjectable = getInjectable({
|
|||||||
return lensThemes.get(pref.lensThemeId) ?? defaultLensTheme;
|
return lensThemes.get(pref.lensThemeId) ?? defaultLensTheme;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
injectionToken: activeThemeInjectionToken
|
||||||
});
|
});
|
||||||
|
|
||||||
export default activeThemeInjectable;
|
export default activeThemeInjectable;
|
||||||
|
|||||||
@ -23,7 +23,7 @@
|
|||||||
"@swc/core": "^1.3.38",
|
"@swc/core": "^1.3.38",
|
||||||
"@swc/jest": "^0.2.23",
|
"@swc/jest": "^0.2.23",
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^12.1.5",
|
||||||
"@types/jest": "^29.2.2",
|
"@types/jest": "^29.2.2",
|
||||||
"identity-obj-proxy": "^3.0.0",
|
"identity-obj-proxy": "^3.0.0",
|
||||||
"jest": "^29.5.0",
|
"jest": "^29.5.0",
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
const getNodeConfig = require("./get-node-config");
|
const getNodeConfig = require("./get-node-config");
|
||||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
|
|
||||||
// hack: hard-coded
|
// hack: hard-coded
|
||||||
const sassCommonVars = "/Users/maspiala/work/lens/packages/core/src/renderer";
|
const sassCommonVars =
|
||||||
|
"/Users/maspiala/work/lens/packages/core/src/renderer/components/vars.scss";
|
||||||
|
|
||||||
module.exports =
|
module.exports =
|
||||||
({ miniCssExtractPluginLoader = MiniCssExtractPlugin.loader } = {}) =>
|
({ miniCssExtractPluginLoader = MiniCssExtractPlugin.loader } = {}) =>
|
||||||
@ -22,6 +24,13 @@ module.exports =
|
|||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: "[name].css",
|
filename: "[name].css",
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
// see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
|
||||||
|
new MonacoWebpackPlugin({
|
||||||
|
languages: ["json", "yaml"],
|
||||||
|
// Hack: should be true only for development.
|
||||||
|
globalAPI: true
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
|
|
||||||
module: {
|
module: {
|
||||||
@ -55,7 +64,8 @@ module.exports =
|
|||||||
options: {
|
options: {
|
||||||
sourceMap: false,
|
sourceMap: false,
|
||||||
postcssOptions: {
|
postcssOptions: {
|
||||||
plugins: ["tailwindcss"],
|
// hack: commented
|
||||||
|
// plugins: ["tailwindcss"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -4,5 +4,17 @@
|
|||||||
*/
|
*/
|
||||||
export { metricsFeature } from "./src/feature";
|
export { metricsFeature } from "./src/feature";
|
||||||
|
|
||||||
export type { ClusterOverviewUIBlock } from "./src/cluster-overview/cluster-overview-ui-block";
|
export type { ClusterOverviewUIBlock, MetricType } from "./src/cluster-overview/injection-tokens";
|
||||||
export { clusterOverviewUIBlockInjectionToken } from "./src/cluster-overview/cluster-overview-ui-block";
|
|
||||||
|
export {
|
||||||
|
activeThemeInjectionToken,
|
||||||
|
clusterOverviewStoreInjectionToken,
|
||||||
|
clusterOverviewUIBlockInjectionToken,
|
||||||
|
loggerInjectionToken,
|
||||||
|
navigateToPreferencesOfMetricsInjectionToken,
|
||||||
|
nodeStoreInjectionToken,
|
||||||
|
userStoreInjectionToken,
|
||||||
|
} from "./src/cluster-overview/injection-tokens";
|
||||||
|
|
||||||
|
export type { Logger } from "./src/cluster-overview/injection-tokens";
|
||||||
|
|
||||||
|
|||||||
@ -33,11 +33,22 @@
|
|||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||||
|
"@k8slens/utilities": "^1.0.0-alpha.1",
|
||||||
"@ogre-tools/injectable": "^15.1.2",
|
"@ogre-tools/injectable": "^15.1.2",
|
||||||
"@ogre-tools/injectable-react": "^15.1.2",
|
"@ogre-tools/injectable-react": "^15.1.2",
|
||||||
"chart.js": "^2.9.4"
|
"auto-bind": "^4.0.0",
|
||||||
|
"chart.js": "^2.9.4",
|
||||||
|
"js-yaml": "^4.1.0",
|
||||||
|
"mobx": "^6.8.0",
|
||||||
|
"mobx-react": "^7.6.0",
|
||||||
|
"moment": "^2.29.4",
|
||||||
|
"monaco-editor": "^0.29.1",
|
||||||
|
"monaco-editor-webpack-plugin": "^5.0.0",
|
||||||
|
"react": "^17.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@testing-library/react": "^12.1.5",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"@k8slens/eslint-config": "6.5.0-alpha.1"
|
"@k8slens/eslint-config": "6.5.0-alpha.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
|
||||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
|
||||||
*/
|
|
||||||
import { getInjectionToken } from "@ogre-tools/injectable";
|
|
||||||
|
|
||||||
export type ClusterOverviewUIBlock = {
|
|
||||||
id: string;
|
|
||||||
Component: React.ElementType
|
|
||||||
};
|
|
||||||
|
|
||||||
export const clusterOverviewUIBlockInjectionToken = getInjectionToken<ClusterOverviewUIBlock>({
|
|
||||||
id: "cluster-overview-ui-block-injection-token",
|
|
||||||
});
|
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
|
import type { ClusterOverviewStore, NodeStore } from "../injection-tokens";
|
||||||
|
import { Radio, RadioGroup } from "../components/radio";
|
||||||
|
import {
|
||||||
|
MetricType,
|
||||||
|
MetricNodeRole,
|
||||||
|
clusterOverviewStoreInjectionToken, nodeStoreInjectionToken
|
||||||
|
} from "../injection-tokens";
|
||||||
|
import { normalizeMetrics } from "../metrics.api";
|
||||||
|
|
||||||
|
interface Dependencies {
|
||||||
|
clusterOverviewStore: ClusterOverviewStore;
|
||||||
|
nodeStore: NodeStore;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NonInjectedClusterMetricSwitchers = observer(({
|
||||||
|
clusterOverviewStore,
|
||||||
|
nodeStore,
|
||||||
|
}: Dependencies) => {
|
||||||
|
const { masterNodes, workerNodes } = nodeStore;
|
||||||
|
const { cpuUsage, memoryUsage } = clusterOverviewStore.metrics ?? {};
|
||||||
|
const hasMasterNodes = masterNodes.length > 0;
|
||||||
|
const hasWorkerNodes = workerNodes.length > 0;
|
||||||
|
const hasCpuMetrics = normalizeMetrics(cpuUsage).data.result[0].values.length > 0;
|
||||||
|
const hasMemoryMetrics = normalizeMetrics(memoryUsage).data.result[0].values.length > 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex gaps" style={{ marginBottom: "calc(var(--margin) * 2)" }}>
|
||||||
|
<div className="box grow">
|
||||||
|
<RadioGroup
|
||||||
|
asButtons
|
||||||
|
className="RadioGroup flex gaps"
|
||||||
|
value={clusterOverviewStore.metricNodeRole}
|
||||||
|
onChange={metric => clusterOverviewStore.metricNodeRole = metric}
|
||||||
|
>
|
||||||
|
<Radio
|
||||||
|
label="Master"
|
||||||
|
value={MetricNodeRole.MASTER}
|
||||||
|
disabled={!hasMasterNodes}
|
||||||
|
/>
|
||||||
|
<Radio
|
||||||
|
label="Worker"
|
||||||
|
value={MetricNodeRole.WORKER}
|
||||||
|
disabled={!hasWorkerNodes}
|
||||||
|
/>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
<div className="box grow" style={{ textAlign: "right" }}>
|
||||||
|
<RadioGroup
|
||||||
|
asButtons
|
||||||
|
className="RadioGroup flex gaps"
|
||||||
|
value={clusterOverviewStore.metricType}
|
||||||
|
onChange={value => clusterOverviewStore.metricType = value}
|
||||||
|
>
|
||||||
|
<Radio
|
||||||
|
label="CPU"
|
||||||
|
value={MetricType.CPU}
|
||||||
|
disabled={!hasCpuMetrics}
|
||||||
|
/>
|
||||||
|
<Radio
|
||||||
|
label="Memory"
|
||||||
|
value={MetricType.MEMORY}
|
||||||
|
disabled={!hasMemoryMetrics}
|
||||||
|
/>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export const ClusterMetricSwitchers = withInjectables<Dependencies>(NonInjectedClusterMetricSwitchers, {
|
||||||
|
getProps: (di) => ({
|
||||||
|
clusterOverviewStore: di.inject(clusterOverviewStoreInjectionToken),
|
||||||
|
nodeStore: di.inject(nodeStoreInjectionToken),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
@ -3,152 +3,169 @@
|
|||||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import styles from "./cluster-metrics.module.scss";
|
||||||
// import styles from "./cluster-metrics.module.scss";
|
|
||||||
//
|
import React, { useState } from "react";
|
||||||
// import React, { useState } from "react";
|
import { observer } from "mobx-react";
|
||||||
// import { observer } from "mobx-react";
|
|
||||||
// import type { ChartOptions, ChartPoint } from "chart.js";
|
// import type { ChartOptions, ChartPoint } from "chart.js";
|
||||||
// import type { ClusterOverviewStore } from "../cluster-overview-store/cluster-overview-store";
|
// import type { ClusterOverviewStore } from "../cluster-overview-store/cluster-overview-store";
|
||||||
// import { MetricType } from "../cluster-overview-store/cluster-overview-store";
|
// import { MetricType } from "../cluster-overview-store/cluster-overview-store";
|
||||||
// import { BarChart } from "../../chart";
|
// import { BarChart } from "../../chart";
|
||||||
// import { bytesToUnits, cssNames } from "@k8slens/utilities";
|
import { bytesToUnits, cssNames } from "@k8slens/utilities";
|
||||||
// import { Spinner } from "../../spinner";
|
// import { Spinner } from "../../spinner";
|
||||||
// import { ZebraStripesPlugin } from "../../chart/zebra-stripes.plugin";
|
|
||||||
// import { ClusterNoMetrics } from "../cluster-no-metrics";
|
// import { ClusterNoMetrics } from "../cluster-no-metrics";
|
||||||
// import { ClusterMetricSwitchers } from "../cluster-metric-switchers";
|
// import { ClusterMetricSwitchers } from "../cluster-metric-switchers";
|
||||||
// import { getMetricLastPoints } from "../../../../common/k8s-api/endpoints/metrics.api";
|
// import { getMetricLastPoints } from "../../../../common/k8s-api/endpoints/metrics.api";
|
||||||
// import { withInjectables } from "@ogre-tools/injectable-react";
|
// import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
// import clusterOverviewStoreInjectable from "../cluster-overview-store/cluster-overview-store.injectable";
|
// import clusterOverviewStoreInjectable from "../cluster-overview-store/cluster-overview-store.injectable";
|
||||||
import { getInjectable } from "@ogre-tools/injectable";
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
import { clusterOverviewUIBlockInjectionToken } from "../cluster-overview-ui-block";
|
import {
|
||||||
|
clusterOverviewStoreInjectionToken,
|
||||||
|
clusterOverviewUIBlockInjectionToken,
|
||||||
|
MetricType,
|
||||||
|
} from "../injection-tokens";
|
||||||
|
import { ZebraStripesPlugin } from "../components/chart/zebra-stripes.plugin";
|
||||||
|
import { getMetricLastPoints } from "../metrics.api";
|
||||||
|
import type { ChartOptions, ChartPoint } from "chart.js";
|
||||||
|
import { Spinner } from "../components/spinner";
|
||||||
|
import { ClusterNoMetrics } from "../components/cluster-no-metrics";
|
||||||
|
import { BarChart } from "../components/chart";
|
||||||
|
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
|
import { ClusterMetricSwitchers } from "./cluster-metric-switchers";
|
||||||
|
|
||||||
// interface Dependencies {
|
interface Dependencies {
|
||||||
// clusterOverviewStore: ClusterOverviewStore;
|
// hack
|
||||||
// }
|
clusterOverviewStore: any;
|
||||||
|
}
|
||||||
|
|
||||||
// const NonInjectedClusterMetrics = observer(
|
const NonInjectedClusterMetrics = observer(
|
||||||
// ({
|
({
|
||||||
// clusterOverviewStore: {
|
clusterOverviewStore: {
|
||||||
// metricType,
|
metricType,
|
||||||
// metricNodeRole,
|
metricNodeRole,
|
||||||
// getMetricsValues,
|
getMetricsValues,
|
||||||
// metricsLoaded,
|
metricsLoaded,
|
||||||
// metrics,
|
metrics,
|
||||||
// },
|
},
|
||||||
// }: Dependencies) => {
|
}: Dependencies) => {
|
||||||
// const [plugins] = useState([new ZebraStripesPlugin()]);
|
const [plugins] = useState([new ZebraStripesPlugin()]);
|
||||||
// const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics ?? {});
|
const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics ?? {});
|
||||||
// const metricValues = getMetricsValues(metrics ?? {});
|
const metricValues = getMetricsValues(metrics ?? {});
|
||||||
// const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
|
const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
|
||||||
// const data = metricValues.map((value) => ({
|
|
||||||
// x: value[0],
|
|
||||||
// y: parseFloat(value[1]).toFixed(3),
|
|
||||||
// }));
|
|
||||||
//
|
|
||||||
// const datasets = [
|
|
||||||
// {
|
|
||||||
// id: metricType + metricNodeRole,
|
|
||||||
// label: `${metricType.toUpperCase()} usage`,
|
|
||||||
// borderColor: colors[metricType],
|
|
||||||
// data,
|
|
||||||
// },
|
|
||||||
// ];
|
|
||||||
// const cpuOptions: ChartOptions = {
|
|
||||||
// scales: {
|
|
||||||
// yAxes: [
|
|
||||||
// {
|
|
||||||
// ticks: {
|
|
||||||
// suggestedMax: cpuCapacity,
|
|
||||||
// callback: (value) => value,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// tooltips: {
|
|
||||||
// callbacks: {
|
|
||||||
// label: ({ index }, data) => {
|
|
||||||
// if (!index) {
|
|
||||||
// return "<unknown>";
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// const value = data.datasets?.[0].data?.[index] as ChartPoint;
|
|
||||||
//
|
|
||||||
// return value.y?.toString() ?? "<unknown>";
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
// const memoryOptions: ChartOptions = {
|
|
||||||
// scales: {
|
|
||||||
// yAxes: [
|
|
||||||
// {
|
|
||||||
// ticks: {
|
|
||||||
// suggestedMax: memoryCapacity,
|
|
||||||
// callback: (value: string) =>
|
|
||||||
// !value ? 0 : bytesToUnits(parseInt(value)),
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// tooltips: {
|
|
||||||
// callbacks: {
|
|
||||||
// label: ({ index }, data) => {
|
|
||||||
// if (!index) {
|
|
||||||
// return "<unknown>";
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// const value = data.datasets?.[0].data?.[index] as ChartPoint;
|
|
||||||
//
|
|
||||||
// return bytesToUnits(parseInt(value.y as string), { precision: 3 });
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
// const options = metricType === MetricType.CPU ? cpuOptions : memoryOptions;
|
|
||||||
//
|
|
||||||
// const renderMetrics = () => {
|
|
||||||
// if (!metricValues.length && !metricsLoaded) {
|
|
||||||
// return <Spinner center />;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// if (!memoryCapacity || !cpuCapacity) {
|
|
||||||
// return <ClusterNoMetrics className={styles.empty} />;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// return (
|
|
||||||
// <BarChart
|
|
||||||
// name={`${metricNodeRole}-${metricType}`}
|
|
||||||
// options={options}
|
|
||||||
// data={{ datasets }}
|
|
||||||
// timeLabelStep={5}
|
|
||||||
// showLegend={false}
|
|
||||||
// plugins={plugins}
|
|
||||||
// className={styles.chart}
|
|
||||||
// />
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
// return (
|
|
||||||
// <div className={cssNames(styles.ClusterMetrics, "flex column")}>
|
|
||||||
// <ClusterMetricSwitchers />
|
|
||||||
// {renderMetrics()}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
|
|
||||||
// const ClusterMetrics = withInjectables<Dependencies>(
|
// hack: any being used
|
||||||
// NonInjectedClusterMetrics,
|
// @ts-ignore
|
||||||
//
|
const data = metricValues.map((value) => ({
|
||||||
// {
|
x: value[0],
|
||||||
// getProps: (di) => ({
|
y: parseFloat(value[1]).toFixed(3),
|
||||||
// clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
|
}));
|
||||||
// }),
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
|
|
||||||
const ClusterMetrics = () => <div>cluster-metrics.injectable</div>;
|
const datasets = [
|
||||||
|
{
|
||||||
|
id: metricType + metricNodeRole,
|
||||||
|
label: `${metricType.toUpperCase()} usage`,
|
||||||
|
// hack: ignore
|
||||||
|
// @ts-ignore
|
||||||
|
borderColor: colors[metricType],
|
||||||
|
data,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const cpuOptions: ChartOptions = {
|
||||||
|
scales: {
|
||||||
|
yAxes: [
|
||||||
|
{
|
||||||
|
ticks: {
|
||||||
|
suggestedMax: cpuCapacity,
|
||||||
|
|
||||||
|
// hack: any
|
||||||
|
callback: (value: any) => value,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: ({ index }, data) => {
|
||||||
|
if (!index) {
|
||||||
|
return "<unknown>";
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = data.datasets?.[0].data?.[index] as ChartPoint;
|
||||||
|
|
||||||
|
return value.y?.toString() ?? "<unknown>";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const memoryOptions: ChartOptions = {
|
||||||
|
scales: {
|
||||||
|
yAxes: [
|
||||||
|
{
|
||||||
|
ticks: {
|
||||||
|
suggestedMax: memoryCapacity,
|
||||||
|
callback: (value: string) =>
|
||||||
|
!value ? 0 : bytesToUnits(parseInt(value)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: ({ index }, data) => {
|
||||||
|
if (!index) {
|
||||||
|
return "<unknown>";
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = data.datasets?.[0].data?.[index] as ChartPoint;
|
||||||
|
|
||||||
|
return bytesToUnits(parseInt(value.y as string), { precision: 3 });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const options = metricType === MetricType.CPU ? cpuOptions : memoryOptions;
|
||||||
|
|
||||||
|
const renderMetrics = () => {
|
||||||
|
if (!metricValues.length && !metricsLoaded) {
|
||||||
|
return <Spinner center />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!memoryCapacity || !cpuCapacity) {
|
||||||
|
return <ClusterNoMetrics className={styles.empty} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BarChart
|
||||||
|
name={`${metricNodeRole}-${metricType}`}
|
||||||
|
options={options}
|
||||||
|
data={{ datasets }}
|
||||||
|
timeLabelStep={5}
|
||||||
|
showLegend={false}
|
||||||
|
plugins={plugins}
|
||||||
|
className={styles.chart}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cssNames(styles.ClusterMetrics, "flex column")}>
|
||||||
|
<ClusterMetricSwitchers />
|
||||||
|
{renderMetrics()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const ClusterMetrics = withInjectables<Dependencies>(
|
||||||
|
NonInjectedClusterMetrics,
|
||||||
|
|
||||||
|
{
|
||||||
|
getProps: (di) => ({
|
||||||
|
clusterOverviewStore: di.inject(clusterOverviewStoreInjectionToken),
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const clusterMetricsOverviewBlockInjectable = getInjectable({
|
const clusterMetricsOverviewBlockInjectable = getInjectable({
|
||||||
id: "cluster-metrics-overview-block",
|
id: "cluster-metrics-overview-block",
|
||||||
|
|||||||
@ -25,7 +25,7 @@ import React from "react";
|
|||||||
// import activeThemeInjectable from "../../../themes/active.injectable";
|
// import activeThemeInjectable from "../../../themes/active.injectable";
|
||||||
// import type { ClusterMetricData } from "../../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable";
|
// import type { ClusterMetricData } from "../../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable";
|
||||||
import { getInjectable } from "@ogre-tools/injectable";
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
import { clusterOverviewUIBlockInjectionToken } from "../cluster-overview-ui-block";
|
import { clusterOverviewUIBlockInjectionToken } from "../injection-tokens";
|
||||||
|
|
||||||
// function createLabels(rawLabelData: [string, number | undefined][]): string[] {
|
// function createLabels(rawLabelData: [string, number | undefined][]): string[] {
|
||||||
// return rawLabelData.map(
|
// return rawLabelData.map(
|
||||||
|
|||||||
@ -0,0 +1,50 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// might be used in a scrollable area with {overflow: auto}
|
||||||
|
.badge.scrollable {
|
||||||
|
max-width: unset;
|
||||||
|
|
||||||
|
&:not(.isExpanded) {
|
||||||
|
white-space: unset;
|
||||||
|
text-overflow: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.badge.interactive:hover {
|
||||||
|
background-color: var(--mainBackground);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge:not(.scrollable):not(.isExpanded) {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge:not(.flat) {
|
||||||
|
background: var(--colorVague);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: .2em .4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
font-size: var(--font-size-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import styles from "./badge.module.scss";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
|
import { action, observable } from "mobx";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import { cssNames } from "@k8slens/utilities";
|
||||||
|
import { withTooltip } from "../tooltip";
|
||||||
|
|
||||||
|
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
|
small?: boolean;
|
||||||
|
flat?: boolean;
|
||||||
|
label?: React.ReactNode;
|
||||||
|
expandable?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
scrollable?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Common handler for all Badge instances
|
||||||
|
document.addEventListener("selectionchange", () => {
|
||||||
|
badgeMeta.hasTextSelected ||= (window.getSelection()?.toString().trim().length ?? 0) > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const badgeMeta = observable({
|
||||||
|
hasTextSelected: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Badge = withTooltip(observer(({
|
||||||
|
small,
|
||||||
|
flat,
|
||||||
|
label,
|
||||||
|
expandable = true,
|
||||||
|
disabled,
|
||||||
|
scrollable,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...elemProps
|
||||||
|
}: BadgeProps) => {
|
||||||
|
const elem = useRef<HTMLDivElement>(null);
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
const [isExpandable, setIsExpandable] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const { clientWidth = 0, scrollWidth = 0 } = elem.current ?? {};
|
||||||
|
|
||||||
|
setIsExpandable(expandable && (clientWidth < scrollWidth));
|
||||||
|
}, [expandable, elem.current]);
|
||||||
|
|
||||||
|
const onMouseUp = action(() => {
|
||||||
|
if (!isExpandable || badgeMeta.hasTextSelected) {
|
||||||
|
badgeMeta.hasTextSelected = false;
|
||||||
|
} else {
|
||||||
|
setIsExpanded(!isExpanded);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
{...elemProps}
|
||||||
|
className={cssNames(styles.badge, className, {
|
||||||
|
[styles.small]: small,
|
||||||
|
[styles.flat]: flat,
|
||||||
|
[styles.clickable]: Boolean(elemProps.onClick) || isExpandable,
|
||||||
|
[styles.interactive]: isExpandable,
|
||||||
|
[styles.isExpanded]: isExpanded,
|
||||||
|
[styles.disabled]: disabled,
|
||||||
|
[styles.scrollable]: scrollable,
|
||||||
|
})}
|
||||||
|
onMouseUp={onMouseUp}
|
||||||
|
ref={elem}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}));
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
|
import { observable } from "mobx";
|
||||||
|
|
||||||
|
const badgeHasTextSelectedStateInjectable = getInjectable({
|
||||||
|
id: "badge-has-text-selected-state",
|
||||||
|
instantiate: () => observable.box(false),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default badgeHasTextSelectedStateInjectable;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./badge";
|
||||||
@ -0,0 +1,247 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import merge from "lodash/merge";
|
||||||
|
import moment from "moment";
|
||||||
|
import Color from "color";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import type { ChartOptions, ChartTooltipCallback, ChartTooltipItem, Scriptable } from "chart.js";
|
||||||
|
import type { ChartProps } from "./chart";
|
||||||
|
import { Chart, ChartKind } from "./chart";
|
||||||
|
import { bytesToUnits, cssNames, isObject } from "@k8slens/utilities";
|
||||||
|
import { ZebraStripesPlugin } from "./zebra-stripes.plugin";
|
||||||
|
import type { LensTheme } from "./lens-theme";
|
||||||
|
import assert from "assert";
|
||||||
|
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
|
import type { IComputedValue } from "mobx";
|
||||||
|
import { NoMetrics } from "./no-metrics";
|
||||||
|
import { activeThemeInjectionToken } from "../../injection-tokens";
|
||||||
|
|
||||||
|
export interface BarChartProps extends ChartProps {
|
||||||
|
name?: string;
|
||||||
|
timeLabelStep?: number; // Minute labels appearance step
|
||||||
|
}
|
||||||
|
|
||||||
|
const getBarColor: Scriptable<string> = ({ dataset }) => Color(dataset?.borderColor).alpha(0.2).string();
|
||||||
|
|
||||||
|
interface Dependencies {
|
||||||
|
activeTheme: IComputedValue<LensTheme>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NonInjectedBarChart = observer(({
|
||||||
|
activeTheme,
|
||||||
|
name,
|
||||||
|
data,
|
||||||
|
className,
|
||||||
|
timeLabelStep = 10,
|
||||||
|
plugins,
|
||||||
|
options: customOptions,
|
||||||
|
...settings
|
||||||
|
}: Dependencies & BarChartProps) => {
|
||||||
|
const { textColorPrimary, borderFaintColor, chartStripesColor } = activeTheme.get().colors;
|
||||||
|
const { datasets: rawDatasets = [], ...rest } = data;
|
||||||
|
const datasets = rawDatasets
|
||||||
|
.filter(set => set.data?.length)
|
||||||
|
.map(item => ({
|
||||||
|
type: ChartKind.BAR,
|
||||||
|
borderWidth: { top: 3 },
|
||||||
|
barPercentage: 1,
|
||||||
|
categoryPercentage: 1,
|
||||||
|
...item,
|
||||||
|
}));
|
||||||
|
|
||||||
|
plugins ??= [new ZebraStripesPlugin({
|
||||||
|
stripeColor: chartStripesColor,
|
||||||
|
interval: datasets[0]?.data?.length,
|
||||||
|
})];
|
||||||
|
|
||||||
|
if (datasets.length === 0) {
|
||||||
|
return <NoMetrics/>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTimeLabels = (timestamp: string, index: number) => {
|
||||||
|
const label = moment(parseInt(timestamp)).format("HH:mm");
|
||||||
|
const offset = " ";
|
||||||
|
|
||||||
|
if (index == 0) return offset + label;
|
||||||
|
if (index == 60) return label + offset;
|
||||||
|
|
||||||
|
return index % timeLabelStep == 0 ? label : "";
|
||||||
|
};
|
||||||
|
|
||||||
|
const barOptions: ChartOptions = {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
type: "time",
|
||||||
|
offset: true,
|
||||||
|
gridLines: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
stacked: true,
|
||||||
|
ticks: {
|
||||||
|
callback: formatTimeLabels,
|
||||||
|
autoSkip: false,
|
||||||
|
source: "data",
|
||||||
|
backdropColor: "white",
|
||||||
|
fontColor: textColorPrimary,
|
||||||
|
fontSize: 11,
|
||||||
|
maxRotation: 0,
|
||||||
|
minRotation: 0,
|
||||||
|
},
|
||||||
|
bounds: "data",
|
||||||
|
time: {
|
||||||
|
unit: "minute",
|
||||||
|
displayFormats: {
|
||||||
|
minute: "x",
|
||||||
|
},
|
||||||
|
parser: timestamp => moment.unix(parseInt(timestamp)),
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
position: "right",
|
||||||
|
gridLines: {
|
||||||
|
color: borderFaintColor,
|
||||||
|
drawBorder: false,
|
||||||
|
tickMarkLength: 0,
|
||||||
|
zeroLineWidth: 0,
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
maxTicksLimit: 6,
|
||||||
|
fontColor: textColorPrimary,
|
||||||
|
fontSize: 11,
|
||||||
|
padding: 8,
|
||||||
|
min: 0,
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
mode: "index",
|
||||||
|
position: "cursor",
|
||||||
|
callbacks: {
|
||||||
|
title([tooltip]: ChartTooltipItem[]) {
|
||||||
|
const xLabel = tooltip?.xLabel;
|
||||||
|
const skipLabel = xLabel == null || new Date(xLabel).getTime() > Date.now();
|
||||||
|
|
||||||
|
if (skipLabel) return "";
|
||||||
|
|
||||||
|
return String(xLabel);
|
||||||
|
},
|
||||||
|
labelColor: ({ datasetIndex }) => (
|
||||||
|
typeof datasetIndex === "number"
|
||||||
|
? {
|
||||||
|
borderColor: "darkgray",
|
||||||
|
backgroundColor: datasets[datasetIndex].borderColor as string,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
borderColor: "darkgray",
|
||||||
|
backgroundColor: "gray",
|
||||||
|
}
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
duration: 0,
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
rectangle: {
|
||||||
|
backgroundColor: getBarColor.bind(null),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Chart
|
||||||
|
className={cssNames("BarChart flex box grow column", className)}
|
||||||
|
type={ChartKind.BAR}
|
||||||
|
data={{ datasets, ...rest }}
|
||||||
|
options={merge(barOptions, customOptions)}
|
||||||
|
plugins={plugins}
|
||||||
|
{...settings}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export const BarChart = withInjectables<Dependencies, BarChartProps>(NonInjectedBarChart, {
|
||||||
|
getProps: (di, props) => ({
|
||||||
|
...props,
|
||||||
|
activeTheme: di.inject(activeThemeInjectionToken),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const tooltipCallbackWith = (precision: number): ChartTooltipCallback["label"] => (
|
||||||
|
({ datasetIndex, index }, { datasets = [] }) => {
|
||||||
|
if (typeof datasetIndex !== "number" || typeof index !== "number") {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, data } = datasets[datasetIndex];
|
||||||
|
|
||||||
|
if (!label || !data) {
|
||||||
|
return "<unknown>";
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = data[index];
|
||||||
|
|
||||||
|
assert(isObject(value) && !Array.isArray(value) && typeof value.y === "number");
|
||||||
|
|
||||||
|
return `${label}: ${bytesToUnits(parseInt(value.y.toString()), { precision })}`;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Default options for all charts containing memory units (network, disk, memory, etc)
|
||||||
|
export const memoryOptions: ChartOptions = {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
callback: (value) => {
|
||||||
|
if (typeof value == "string") {
|
||||||
|
const float = parseFloat(value);
|
||||||
|
|
||||||
|
if (float < 1) {
|
||||||
|
return float.toFixed(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
return bytesToUnits(parseInt(value));
|
||||||
|
}
|
||||||
|
|
||||||
|
return bytesToUnits(value);
|
||||||
|
},
|
||||||
|
stepSize: 1,
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: tooltipCallbackWith(3),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Default options for all charts with cpu units or other decimal numbers
|
||||||
|
export const cpuOptions: ChartOptions = {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
callback: (value) => {
|
||||||
|
const float = parseFloat(`${value}`);
|
||||||
|
|
||||||
|
if (float == 0) return "0";
|
||||||
|
if (float < 10) return float.toFixed(3);
|
||||||
|
if (float < 100) return float.toFixed(2);
|
||||||
|
|
||||||
|
return float.toFixed(1);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: tooltipCallbackWith(2),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.Chart {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.BarChart {
|
||||||
|
margin-left: -$margin * 2.2;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
.LegendBadge {
|
||||||
|
background: transparent;
|
||||||
|
transition: background-color 250ms;
|
||||||
|
white-space: normal;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--colorVague);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zebra-cover {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,238 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./chart.scss";
|
||||||
|
import type { CSSProperties } from "react";
|
||||||
|
import React from "react";
|
||||||
|
import type { PluginServiceRegistrationOptions } from "chart.js";
|
||||||
|
import ChartJS from "chart.js";
|
||||||
|
import { remove } from "lodash";
|
||||||
|
import { cssNames } from "@k8slens/utilities";
|
||||||
|
import { Badge } from "../badge";
|
||||||
|
import { StatusBrick } from "../status-brick";
|
||||||
|
|
||||||
|
export interface ChartData extends ChartJS.ChartData {
|
||||||
|
datasets?: ChartDataSets[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ChartDataSets extends ChartJS.ChartDataSets {
|
||||||
|
id?: string;
|
||||||
|
tooltip?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ChartProps {
|
||||||
|
data: ChartData;
|
||||||
|
options?: ChartJS.ChartOptions; // Passed to ChartJS instance
|
||||||
|
width?: number | string;
|
||||||
|
height?: number | string;
|
||||||
|
type?: ChartKind;
|
||||||
|
showChart?: boolean; // Possible to show legend only if false
|
||||||
|
showLegend?: boolean;
|
||||||
|
legendPosition?: "bottom";
|
||||||
|
legendColors?: string[]; // Hex colors for each of the labels in data object
|
||||||
|
plugins?: PluginServiceRegistrationOptions[];
|
||||||
|
redraw?: boolean; // If true - recreate chart instance with no animation
|
||||||
|
title?: string;
|
||||||
|
className?: string;
|
||||||
|
"data-testid"?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ChartKind {
|
||||||
|
PIE = "pie",
|
||||||
|
BAR = "bar",
|
||||||
|
LINE = "line",
|
||||||
|
DOUGHNUT = "doughnut",
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultProps: Partial<ChartProps> = {
|
||||||
|
type: ChartKind.DOUGHNUT,
|
||||||
|
options: {},
|
||||||
|
showChart: true,
|
||||||
|
showLegend: true,
|
||||||
|
legendPosition: "bottom",
|
||||||
|
plugins: [],
|
||||||
|
redraw: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
export class Chart extends React.Component<ChartProps> {
|
||||||
|
static defaultProps = defaultProps as object;
|
||||||
|
|
||||||
|
private canvas = React.createRef<HTMLCanvasElement>();
|
||||||
|
private chart: ChartJS | null = null;
|
||||||
|
// ChartJS adds _meta field to any data object passed to it.
|
||||||
|
// We clone new data prop into currentChartData to compare props and prevProps
|
||||||
|
private currentChartData?: ChartData;
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { showChart } = this.props;
|
||||||
|
|
||||||
|
if (showChart) {
|
||||||
|
this.renderChart();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
const { showChart, redraw } = this.props;
|
||||||
|
|
||||||
|
if (redraw) {
|
||||||
|
this.chart?.destroy();
|
||||||
|
this.renderChart();
|
||||||
|
} else if (showChart) {
|
||||||
|
if (!this.chart) {
|
||||||
|
this.renderChart();
|
||||||
|
} else {
|
||||||
|
this.updateChart();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
memoizeDataProps() {
|
||||||
|
const { data } = this.props;
|
||||||
|
|
||||||
|
this.currentChartData = {
|
||||||
|
...data,
|
||||||
|
datasets: data.datasets && data.datasets.map(set => {
|
||||||
|
return {
|
||||||
|
...set,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
updateChart() {
|
||||||
|
const { options } = this.props;
|
||||||
|
|
||||||
|
if (!this.chart) return;
|
||||||
|
|
||||||
|
this.chart.options = ChartJS.helpers.configMerge(this.chart.options, options);
|
||||||
|
|
||||||
|
this.memoizeDataProps();
|
||||||
|
|
||||||
|
const datasets: ChartDataSets[] = (this.chart.config.data ??= {}).datasets ??= [];
|
||||||
|
const nextDatasets: ChartDataSets[] = (this.currentChartData ??= {}).datasets ??= [];
|
||||||
|
|
||||||
|
// Remove stale datasets if they're not available in nextDatasets
|
||||||
|
if (datasets.length > nextDatasets.length) {
|
||||||
|
const sets = [...datasets];
|
||||||
|
|
||||||
|
sets.forEach(set => {
|
||||||
|
if (!nextDatasets.find(next => next.id === set.id)) {
|
||||||
|
remove(datasets, (item => item.id === set.id));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mutating inner chart datasets to enable seamless transitions
|
||||||
|
nextDatasets.forEach((next, datasetIndex) => {
|
||||||
|
const index = datasets.findIndex(set => set.id === next.id);
|
||||||
|
|
||||||
|
if (index !== -1) {
|
||||||
|
const data = datasets[index].data = (datasets[index].data ?? []).slice(); // "Clean" mobx observables data to use in ChartJS
|
||||||
|
const nextData = next.data ??= [];
|
||||||
|
|
||||||
|
data.splice(next.data.length);
|
||||||
|
|
||||||
|
for (let dataIndex = 0; dataIndex < nextData.length; dataIndex += 1) {
|
||||||
|
data[dataIndex] = nextData[dataIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Merge other fields
|
||||||
|
const { data: _data, ...props } = next;
|
||||||
|
|
||||||
|
datasets[index] = {
|
||||||
|
...datasets[index],
|
||||||
|
...props,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
datasets[datasetIndex] = next;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.chart.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
renderLegend() {
|
||||||
|
if (!this.props.showLegend) return null;
|
||||||
|
const { data, legendColors } = this.props;
|
||||||
|
const { labels, datasets } = data;
|
||||||
|
const labelElem = (title: string | undefined, color: string | CSSProperties["backgroundColor"], tooltip?: string) => (
|
||||||
|
<Badge
|
||||||
|
key={title}
|
||||||
|
className="LegendBadge flex gaps align-center"
|
||||||
|
label={(
|
||||||
|
<div className="flex items-center">
|
||||||
|
<StatusBrick style={{ backgroundColor: color }} className="flex-shrink-0"/>
|
||||||
|
<span>{title}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
tooltip={tooltip}
|
||||||
|
expandable={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="legend flex wrap">
|
||||||
|
{
|
||||||
|
labels
|
||||||
|
? labels.map((label, index) => {
|
||||||
|
const { backgroundColor = [] } = datasets?.[0] ?? {};
|
||||||
|
const color = legendColors ? legendColors[index] : (backgroundColor as string[])[index];
|
||||||
|
|
||||||
|
return labelElem(label as string, color);
|
||||||
|
})
|
||||||
|
: datasets?.map(({ borderColor, label, tooltip }) =>
|
||||||
|
labelElem(label, borderColor as string, tooltip),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderChart() {
|
||||||
|
const { type, options, plugins } = this.props;
|
||||||
|
const canvas = this.canvas.current;
|
||||||
|
|
||||||
|
if (!canvas) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.memoizeDataProps();
|
||||||
|
|
||||||
|
this.chart = new ChartJS(canvas, {
|
||||||
|
type,
|
||||||
|
plugins,
|
||||||
|
options: {
|
||||||
|
...options,
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.currentChartData,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { width, height, showChart, title, className, "data-testid": dataTestId } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cssNames("Chart", className)}
|
||||||
|
data-testid={dataTestId}
|
||||||
|
>
|
||||||
|
{title && <div className="chart-title">{title}</div>}
|
||||||
|
{showChart && (
|
||||||
|
<div className="chart-container">
|
||||||
|
<canvas
|
||||||
|
ref={this.canvas}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
/>
|
||||||
|
<div className="chartjs-tooltip flex column"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{this.renderLegend()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./chart";
|
||||||
|
export * from "./pie-chart";
|
||||||
|
export * from "./bar-chart";
|
||||||
@ -0,0 +1,154 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import type { MonacoTheme } from "../monaco-editor";
|
||||||
|
|
||||||
|
// hack for being a duplication.
|
||||||
|
export type ThemeId = string;
|
||||||
|
export type LensThemeType = "dark" | "light";
|
||||||
|
export interface LensTheme {
|
||||||
|
name: string;
|
||||||
|
type: LensThemeType;
|
||||||
|
colors: Record<LensColorName, string>;
|
||||||
|
terminalColors: Partial<Record<TerminalColorName, string>>;
|
||||||
|
description: string;
|
||||||
|
author: string;
|
||||||
|
monacoTheme: MonacoTheme;
|
||||||
|
isDefault?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TerminalColorName =
|
||||||
|
| "foreground"
|
||||||
|
| "background"
|
||||||
|
| "cursor"
|
||||||
|
| "cursorAccent"
|
||||||
|
| "selection"
|
||||||
|
| "selectionForeground"
|
||||||
|
| "black"
|
||||||
|
| "red"
|
||||||
|
| "green"
|
||||||
|
| "yellow"
|
||||||
|
| "blue"
|
||||||
|
| "magenta"
|
||||||
|
| "cyan"
|
||||||
|
| "white"
|
||||||
|
| "brightBlack"
|
||||||
|
| "brightRed"
|
||||||
|
| "brightGreen"
|
||||||
|
| "brightYellow"
|
||||||
|
| "brightBlue"
|
||||||
|
| "brightMagenta"
|
||||||
|
| "brightCyan"
|
||||||
|
| "brightWhite";
|
||||||
|
|
||||||
|
export type LensColorName =
|
||||||
|
| "blue"
|
||||||
|
| "magenta"
|
||||||
|
| "golden"
|
||||||
|
| "halfGray"
|
||||||
|
| "primary"
|
||||||
|
| "textColorPrimary"
|
||||||
|
| "textColorSecondary"
|
||||||
|
| "textColorTertiary"
|
||||||
|
| "textColorAccent"
|
||||||
|
| "textColorDimmed"
|
||||||
|
| "borderColor"
|
||||||
|
| "borderFaintColor"
|
||||||
|
| "mainBackground"
|
||||||
|
| "secondaryBackground"
|
||||||
|
| "contentColor"
|
||||||
|
| "layoutBackground"
|
||||||
|
| "layoutTabsBackground"
|
||||||
|
| "layoutTabsActiveColor"
|
||||||
|
| "layoutTabsLineColor"
|
||||||
|
| "sidebarLogoBackground"
|
||||||
|
| "sidebarActiveColor"
|
||||||
|
| "sidebarSubmenuActiveColor"
|
||||||
|
| "sidebarBackground"
|
||||||
|
| "sidebarItemHoverBackground"
|
||||||
|
| "badgeBackgroundColor"
|
||||||
|
| "buttonPrimaryBackground"
|
||||||
|
| "buttonDefaultBackground"
|
||||||
|
| "buttonLightBackground"
|
||||||
|
| "buttonAccentBackground"
|
||||||
|
| "buttonDisabledBackground"
|
||||||
|
| "tableBgcStripe"
|
||||||
|
| "tableBgcSelected"
|
||||||
|
| "tableHeaderBackground"
|
||||||
|
| "tableHeaderColor"
|
||||||
|
| "tableSelectedRowColor"
|
||||||
|
| "helmLogoBackground"
|
||||||
|
| "helmStableRepo"
|
||||||
|
| "helmIncubatorRepo"
|
||||||
|
| "helmDescriptionHr"
|
||||||
|
| "helmDescriptionBlockquoteColor"
|
||||||
|
| "helmDescriptionBlockquoteBorder"
|
||||||
|
| "helmDescriptionBlockquoteBackground"
|
||||||
|
| "helmDescriptionHeaders"
|
||||||
|
| "helmDescriptionH6"
|
||||||
|
| "helmDescriptionTdBorder"
|
||||||
|
| "helmDescriptionTrBackground"
|
||||||
|
| "helmDescriptionCodeBackground"
|
||||||
|
| "helmDescriptionPreBackground"
|
||||||
|
| "helmDescriptionPreColor"
|
||||||
|
| "colorSuccess"
|
||||||
|
| "colorOk"
|
||||||
|
| "colorInfo"
|
||||||
|
| "colorError"
|
||||||
|
| "colorSoftError"
|
||||||
|
| "colorWarning"
|
||||||
|
| "colorVague"
|
||||||
|
| "colorTerminated"
|
||||||
|
| "dockHeadBackground"
|
||||||
|
| "dockInfoBackground"
|
||||||
|
| "dockInfoBorderColor"
|
||||||
|
| "dockEditorBackground"
|
||||||
|
| "dockEditorTag"
|
||||||
|
| "dockEditorKeyword"
|
||||||
|
| "dockEditorComment"
|
||||||
|
| "dockEditorActiveLineBackground"
|
||||||
|
| "dockBadgeBackground"
|
||||||
|
| "dockTabBorderColor"
|
||||||
|
| "dockTabActiveBackground"
|
||||||
|
| "logsBackground"
|
||||||
|
| "logsForeground"
|
||||||
|
| "logRowHoverBackground"
|
||||||
|
| "dialogTextColor"
|
||||||
|
| "dialogBackground"
|
||||||
|
| "dialogHeaderBackground"
|
||||||
|
| "dialogFooterBackground"
|
||||||
|
| "drawerTogglerBackground"
|
||||||
|
| "drawerTitleText"
|
||||||
|
| "drawerSubtitleBackground"
|
||||||
|
| "drawerItemNameColor"
|
||||||
|
| "drawerItemValueColor"
|
||||||
|
| "clusterMenuBackground"
|
||||||
|
| "clusterMenuBorderColor"
|
||||||
|
| "clusterMenuCellBackground"
|
||||||
|
| "clusterSettingsBackground"
|
||||||
|
| "addClusterIconColor"
|
||||||
|
| "boxShadow"
|
||||||
|
| "iconActiveColor"
|
||||||
|
| "iconActiveBackground"
|
||||||
|
| "filterAreaBackground"
|
||||||
|
| "chartLiveBarBackground"
|
||||||
|
| "chartStripesColor"
|
||||||
|
| "chartCapacityColor"
|
||||||
|
| "pieChartDefaultColor"
|
||||||
|
| "inputOptionHoverColor"
|
||||||
|
| "inputControlBackground"
|
||||||
|
| "inputControlBorder"
|
||||||
|
| "inputControlHoverBorder"
|
||||||
|
| "lineProgressBackground"
|
||||||
|
| "radioActiveBackground"
|
||||||
|
| "menuActiveBackground"
|
||||||
|
| "menuSelectedOptionBgc"
|
||||||
|
| "canvasBackground"
|
||||||
|
| "scrollBarColor"
|
||||||
|
| "settingsBackground"
|
||||||
|
| "settingsColor"
|
||||||
|
| "navSelectedBackground"
|
||||||
|
| "navHoverColor"
|
||||||
|
| "hrColor"
|
||||||
|
| "tooltipBackground";
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { Icon } from "../icon";
|
||||||
|
|
||||||
|
export function NoMetrics() {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center align-center">
|
||||||
|
<Icon material="info"/>
|
||||||
|
Metrics not available at the moment
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,150 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { ChartOptions, ChartPoint } from "chart.js";
|
||||||
|
import { bytesToUnits, isDefined } from "@k8slens/utilities";
|
||||||
|
|
||||||
|
export type MetricsTab = "CPU" | "Memory" | "Disk" | "Pods" | "Network" | "Filesystem" | "Duration";
|
||||||
|
|
||||||
|
const memoryLikeOptions: ChartOptions = {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
callback: (value: number | string): string => {
|
||||||
|
if (typeof value == "string") {
|
||||||
|
const float = parseFloat(value);
|
||||||
|
|
||||||
|
if (float < 1) {
|
||||||
|
return float.toFixed(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
return bytesToUnits(parseInt(value));
|
||||||
|
}
|
||||||
|
|
||||||
|
return bytesToUnits(value);
|
||||||
|
},
|
||||||
|
stepSize: 1,
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: ({ datasetIndex, index }, { datasets }) => {
|
||||||
|
if (!isDefined(datasetIndex) || !isDefined(index) || !isDefined(datasets)) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, data } = datasets[datasetIndex];
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
return label ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = data[index] as { y: number };
|
||||||
|
|
||||||
|
return `${label}: ${bytesToUnits(parseInt(value.y.toString()), { precision: 3 })}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const metricTabOptions: Record<MetricsTab, ChartOptions> = {
|
||||||
|
Memory: memoryLikeOptions,
|
||||||
|
Disk: memoryLikeOptions,
|
||||||
|
Network: memoryLikeOptions,
|
||||||
|
Filesystem: memoryLikeOptions,
|
||||||
|
CPU: {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
callback: (value: number | string): string => {
|
||||||
|
const float = parseFloat(`${value}`);
|
||||||
|
|
||||||
|
if (float == 0) return "0";
|
||||||
|
if (float < 10) return float.toFixed(3);
|
||||||
|
if (float < 100) return float.toFixed(2);
|
||||||
|
|
||||||
|
return float.toFixed(1);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: ({ datasetIndex, index }, { datasets }) => {
|
||||||
|
if (!isDefined(datasetIndex) || !isDefined(index) || !isDefined(datasets)) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, data } = datasets[datasetIndex];
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
return label ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = data[index] as ChartPoint;
|
||||||
|
|
||||||
|
return `${label}: ${parseFloat(value.y as string).toPrecision(2)}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Pods: {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
callback: value => value,
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: ({ datasetIndex, index }, { datasets }) => {
|
||||||
|
if (!isDefined(datasetIndex) || !isDefined(index) || !isDefined(datasets)) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, data } = datasets[datasetIndex];
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
return label ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = data[index] as ChartPoint;
|
||||||
|
|
||||||
|
return `${label}: ${value.y}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
Duration: {
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
callback: value => value,
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: ({ datasetIndex, index }, { datasets }) => {
|
||||||
|
if (!isDefined(datasetIndex) || !isDefined(index) || !isDefined(datasets)) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, data } = datasets[datasetIndex];
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
return label ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = data[index] as { y: string };
|
||||||
|
|
||||||
|
return `${label}: ${parseFloat(value.y).toFixed(3)} sec`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.PieChart {
|
||||||
|
.chart-container {
|
||||||
|
width: 120px;
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
margin-top: $margin;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
&.LegendBadge:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-bottom: $margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./pie-chart.scss";
|
||||||
|
import React from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import type { ChartOptions } from "chart.js";
|
||||||
|
import ChartJS from "chart.js";
|
||||||
|
import type { ChartProps } from "./chart";
|
||||||
|
import { Chart } from "./chart";
|
||||||
|
import { cssNames } from "@k8slens/utilities";
|
||||||
|
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
|
import type { IComputedValue } from "mobx";
|
||||||
|
import type { LensTheme } from "./lens-theme";
|
||||||
|
import { activeThemeInjectionToken } from "../../injection-tokens";
|
||||||
|
|
||||||
|
export interface PieChartProps extends ChartProps {
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PieChartData extends ChartJS.ChartData {
|
||||||
|
datasets?: PieChartDataSets[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type DatasetTooltipLabel = (percent: string) => string | string;
|
||||||
|
|
||||||
|
interface PieChartDataSets extends ChartJS.ChartDataSets {
|
||||||
|
id?: string;
|
||||||
|
tooltipLabels?: DatasetTooltipLabel[];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCutout(length: number | undefined): number {
|
||||||
|
switch (length) {
|
||||||
|
case 0:
|
||||||
|
case 1:
|
||||||
|
return 88;
|
||||||
|
case 2:
|
||||||
|
return 76;
|
||||||
|
case 3:
|
||||||
|
return 63;
|
||||||
|
default:
|
||||||
|
return 50;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Dependencies {
|
||||||
|
activeTheme: IComputedValue<LensTheme>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NonInjectedPieChart = observer(({
|
||||||
|
activeTheme,
|
||||||
|
data,
|
||||||
|
className,
|
||||||
|
options,
|
||||||
|
showChart,
|
||||||
|
...chartProps
|
||||||
|
}: Dependencies & PieChartProps) => {
|
||||||
|
const { contentColor } = activeTheme.get().colors;
|
||||||
|
const opts: ChartOptions = {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
tooltips: {
|
||||||
|
mode: "index",
|
||||||
|
callbacks: {
|
||||||
|
title: () => "",
|
||||||
|
label: (tooltipItem: { datasetIndex: number; index: number }, data: PieChartData) => {
|
||||||
|
const dataset = data.datasets?.[tooltipItem.datasetIndex] ?? {};
|
||||||
|
const datasetData = (dataset.data ?? []) as number[];
|
||||||
|
const total = datasetData.reduce((acc, cur) => acc + cur, 0);
|
||||||
|
const percent = Math.round((datasetData[tooltipItem.index] as number / total) * 100);
|
||||||
|
const percentLabel = isNaN(percent) ? "N/A" : `${percent}%`;
|
||||||
|
const tooltipLabelCustomizer = dataset.tooltipLabels?.[tooltipItem.index];
|
||||||
|
|
||||||
|
return tooltipLabelCustomizer
|
||||||
|
? tooltipLabelCustomizer(percentLabel)
|
||||||
|
: `${dataset.label}: ${percentLabel}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filter: ({ datasetIndex, index }, { datasets = [] }) => {
|
||||||
|
if (datasetIndex === undefined) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data = [] } = datasets[datasetIndex];
|
||||||
|
|
||||||
|
if (datasets.length === 1) return true;
|
||||||
|
|
||||||
|
return index !== data.length - 1;
|
||||||
|
},
|
||||||
|
position: "cursor",
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
arc: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: contentColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cutoutPercentage: getCutout(data.datasets?.length),
|
||||||
|
responsive: true,
|
||||||
|
...options,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Chart
|
||||||
|
className={cssNames("PieChart flex column align-center", className)}
|
||||||
|
data={data}
|
||||||
|
options={showChart ? {} : opts}
|
||||||
|
showChart={showChart}
|
||||||
|
{...chartProps}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export const PieChart = withInjectables<Dependencies, PieChartProps>(NonInjectedPieChart, {
|
||||||
|
getProps: (di, props) => ({
|
||||||
|
...props,
|
||||||
|
activeTheme: di.inject(activeThemeInjectionToken),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
ChartJS.Tooltip.positioners.cursor = function (elements: any, position: { x: number; y: number }) {
|
||||||
|
return position;
|
||||||
|
};
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Plugin for drawing stripe bars on top of any timeseries barchart
|
||||||
|
// Based on cover DIV element with repeating-linear-gradient style
|
||||||
|
|
||||||
|
import type ChartJS from "chart.js";
|
||||||
|
import type { Moment } from "moment";
|
||||||
|
import moment from "moment";
|
||||||
|
import type { PluginServiceRegistrationOptions } from "chart.js";
|
||||||
|
|
||||||
|
const defaultOptions = {
|
||||||
|
stripeColor: "#ffffff08",
|
||||||
|
interval: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface ZebraStripesOptions {
|
||||||
|
stripeColor: string;
|
||||||
|
interval: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ZebraStripesPlugin implements PluginServiceRegistrationOptions {
|
||||||
|
updated: Moment | null = null;
|
||||||
|
options: ZebraStripesOptions;
|
||||||
|
|
||||||
|
constructor(options?: Partial<ZebraStripesOptions>) {
|
||||||
|
this.options = Object.assign({}, defaultOptions, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
getOptions(chart: ChartJS): ZebraStripesOptions | undefined {
|
||||||
|
return chart.options.plugins?.ZebraStripes;
|
||||||
|
}
|
||||||
|
|
||||||
|
getLastUpdate(chart: ChartJS) {
|
||||||
|
const data = chart.data.datasets?.[0]?.data?.[0] as ChartJS.ChartPoint;
|
||||||
|
|
||||||
|
return moment.unix(parseInt(data.x as string));
|
||||||
|
}
|
||||||
|
|
||||||
|
getStripesElem(chart: ChartJS) {
|
||||||
|
return chart.canvas?.parentElement?.querySelector<HTMLElement>(".zebra-cover");
|
||||||
|
}
|
||||||
|
|
||||||
|
removeStripesElem(chart: ChartJS) {
|
||||||
|
const elem = this.getStripesElem(chart);
|
||||||
|
|
||||||
|
if (elem) {
|
||||||
|
chart.canvas?.parentElement?.removeChild(elem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateOptions(chart: ChartJS) {
|
||||||
|
this.options = {
|
||||||
|
...defaultOptions,
|
||||||
|
...this.getOptions(chart),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getStripeMinutes() {
|
||||||
|
return this.options.interval < 10 ? 0 : 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderStripes(chart: ChartJS) {
|
||||||
|
if (!chart.data.datasets?.length) return;
|
||||||
|
const { interval, stripeColor } = this.options;
|
||||||
|
const { top, left, bottom, right } = chart.chartArea;
|
||||||
|
const step = (right - left) / interval;
|
||||||
|
const stripeWidth = step * this.getStripeMinutes();
|
||||||
|
const cover = document.createElement("div");
|
||||||
|
const styles = cover.style;
|
||||||
|
|
||||||
|
if (this.getStripesElem(chart)) return;
|
||||||
|
|
||||||
|
cover.className = "zebra-cover";
|
||||||
|
styles.width = `${right - left}px`;
|
||||||
|
styles.left = `${left}px`;
|
||||||
|
styles.top = `${top}px`;
|
||||||
|
styles.height = `${bottom - top}px`;
|
||||||
|
styles.backgroundImage = `
|
||||||
|
repeating-linear-gradient(to right, ${stripeColor} 0px, ${stripeColor} ${stripeWidth}px,
|
||||||
|
transparent ${stripeWidth}px, transparent ${stripeWidth * 2 + step}px)
|
||||||
|
`;
|
||||||
|
chart.canvas?.parentElement?.appendChild(cover);
|
||||||
|
}
|
||||||
|
|
||||||
|
afterInit(chart: ChartJS) {
|
||||||
|
if (!chart.data.datasets?.length) return;
|
||||||
|
this.updateOptions(chart);
|
||||||
|
this.updated = this.getLastUpdate(chart);
|
||||||
|
}
|
||||||
|
|
||||||
|
afterUpdate(chart: ChartJS) {
|
||||||
|
this.updateOptions(chart);
|
||||||
|
this.renderStripes(chart);
|
||||||
|
}
|
||||||
|
|
||||||
|
resize(chart: ChartJS) {
|
||||||
|
this.removeStripesElem(chart);
|
||||||
|
}
|
||||||
|
|
||||||
|
afterDatasetUpdate(chart: ChartJS): void {
|
||||||
|
this.updated ??= this.getLastUpdate(chart);
|
||||||
|
|
||||||
|
const { interval } = this.options;
|
||||||
|
const { left, right } = chart.chartArea;
|
||||||
|
const step = (right - left) / interval;
|
||||||
|
const diff = moment(this.updated).diff(this.getLastUpdate(chart), "minutes");
|
||||||
|
const minutes = Math.abs(diff);
|
||||||
|
|
||||||
|
this.removeStripesElem(chart);
|
||||||
|
this.renderStripes(chart);
|
||||||
|
|
||||||
|
if (minutes > 0) {
|
||||||
|
// Move position regarding to difference in time
|
||||||
|
const cover = this.getStripesElem(chart);
|
||||||
|
|
||||||
|
if (cover) {
|
||||||
|
cover.style.backgroundPositionX = `${-step * minutes}px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.ClusterNoMetrics {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1.7;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: var(--blue);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import styles from "./cluster-no-metrics.module.scss";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { cssNames } from "@k8slens/utilities";
|
||||||
|
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
|
import { Icon } from "./icon";
|
||||||
|
import { navigateToPreferencesOfMetricsInjectionToken } from "../injection-tokens";
|
||||||
|
|
||||||
|
export interface ClusterNoMetricsProps {
|
||||||
|
className: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Dependencies {
|
||||||
|
navigateToPreferencesOfMetrics: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NonInjectedClusterNoMetrics({ className, navigateToPreferencesOfMetrics }: Dependencies & ClusterNoMetricsProps) {
|
||||||
|
return (
|
||||||
|
<div className={cssNames(styles.ClusterNoMetrics, className)} data-testid="no-metrics-message">
|
||||||
|
<Icon material="info"/>
|
||||||
|
<p>Metrics are not available due to missing or invalid Prometheus configuration.</p>
|
||||||
|
<p><span className={styles.link} onClick={navigateToPreferencesOfMetrics}>Open cluster settings</span></p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ClusterNoMetrics = withInjectables<Dependencies, ClusterNoMetricsProps>(
|
||||||
|
NonInjectedClusterNoMetrics,
|
||||||
|
|
||||||
|
{
|
||||||
|
getProps: (di, props) => ({
|
||||||
|
navigateToPreferencesOfMetrics: di.inject(navigateToPreferencesOfMetricsInjectionToken),
|
||||||
|
...props,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
);
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<svg version="1.1" id="Layer_1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000">
|
||||||
|
<path id="arrow" class="st0" d="M760,291.25L520.160841,258.873994l63.74222-72.777055C530.714286,132.984694,460.153061,103.75,385,103.75s-145.714286,29.234694-198.903061,82.346939C132.984694,239.285714,103.75,309.846939,103.75,385s29.234694,145.714286,82.346939,198.903061C239.209184,637.015306,309.846939,666.25,385,666.25s145.714286-29.234694,198.903061-82.346939c4.438776-4.438776,8.72449-9.030612,12.780612-13.69898l70.561224,61.760204C598.443878,710.408163,497.5,760,385,760C177.908163,760,10,592.091837,10,385s167.908163-375,375-375c103.545918,0,197.295918,42.015306,265.178571,109.821429l72.331514-70.086922L760,291.25Z" transform="translate(115 115)"/>
|
||||||
|
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="3s" additive="sum" repeatCount="indefinite" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 966 B |
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.1 9.3c.1.4.3.7.4 1.1l-.5.6c-.2.2-.2.5 0 .7l1 1c.2.2.5.2.7 0l.7-.5c.3.2.7.4 1.1.5l.1.9c0 .3.3.5.6.5h1.3c.2-.1.5-.3.5-.6l.1-.8c.4-.1.8-.3 1.2-.5l.7.5c.2.2.5.2.7 0l.9-.9c.2-.2.2-.5 0-.7l-.5-.6c.2-.4.4-.8.5-1.2l.8-.1c.3 0 .5-.3.5-.6v-1.4c0-.3-.2-.5-.5-.6l-.8-.1c-.1-.4-.3-.8-.5-1.1l.5-.6c.2-.2.2-.5 0-.7l-.9-.9c-.2-.2-.5-.2-.7 0l-.6.5c-.4-.3-.8-.5-1.3-.6v-.7c0-.3-.3-.5-.6-.5h-1.3c-.3 0-.5.2-.6.5v.7c-.5.1-.9.3-1.3.5l-.6-.4c-.2-.2-.5-.2-.7 0l-.9.9c-.2.2-.3.5-.1.8l.5.6c-.2.4-.3.8-.4 1.2h-.9c-.2.1-.4.3-.4.6v1.3c0 .3.2.5.5.6zm4.8-3.6c1.2 0 2.2 1 2.2 2.2s-1 2.2-2.2 2.2-2.2-1-2.2-2.2 1-2.2 2.2-2.2z"/><path d="m20.8 9.6-.7-.6c-.2-.2-.5-.2-.7 0l-.4.4c-.3-.2-.7-.3-1-.3l-.1-.5c-.1-.3-.3-.5-.6-.4l-.9.1c-.3 0-.5.3-.5.5v.5c-.3.1-.7.3-1 .5l-.5-.3c-.2-.2-.5-.1-.7.1l-.6.7c-.2.2-.2.5 0 .7l.4.4c-.1.3-.2.6-.3 1l-.6.1c-.3.1-.5.3-.4.6l.1.9c0 .3.3.5.5.5h.6c.1.3.3.6.4.8l-.3.5c-.2.2-.1.5.1.7l.7.6c.2.2.5.2.7 0l.5-.4.9.3.1.6c.1.3.3.5.6.4l.9-.1c.3 0 .5-.3.5-.5v-.6c.3-.1.6-.3.9-.5l.5.3c.2.2.5.1.7-.1l.6-.7c.2-.2.2-.5 0-.7l-.4-.4c.1-.3.3-.6.3-1l.5-.1c.3-.1.5-.3.4-.6l-.1-.9c0-.3-.3-.5-.5-.5h-.6c-.1-.3-.3-.6-.5-.9l.3-.5c.5-.1.4-.4.2-.6zm-3.4 5.2c-1 .1-1.8-.6-1.9-1.6s.6-1.8 1.6-1.9 1.8.6 1.9 1.6-.6 1.8-1.6 1.9z"/><path d="m6.3 17.2c-.3 0-.5.3-.5.5v.6c0 .3.2.5.5.6l.4.1c.1.2.2.5.3.7l-.3.3c-.2.2-.2.5 0 .7l.4.4c.2.2.5.2.7.1l.3-.3c.2.1.5.2.7.3v.4c0 .3.3.5.5.5h.6c.3 0 .5-.2.6-.5l.1-.4c.3-.1.5-.2.8-.3l.3.2c.2.2.5.2.7 0l.4-.4c.2-.2.2-.5.1-.7l-.2-.3c.1-.2.3-.5.3-.8h.4c.3 0 .5-.3.5-.5v-.6c0-.3-.2-.5-.5-.6h-.4c-.1-.3-.2-.5-.3-.8l.2-.3c.2-.2.2-.5 0-.7l-.4-.4c-.2-.2-.5-.2-.7-.1l-.3.2c-.3-.2-.5-.3-.8-.3v-.3c0-.3-.3-.5-.5-.5h-.6c-.3 0-.5.2-.6.5v.3c-.3.1-.6.2-.8.3l-.3-.1c-.2-.2-.5-.2-.7 0l-.4.4c-.2.2-.2.5-.1.7l.3.3c-.1.2-.2.5-.3.8zm3.6-.6c.8 0 1.4.7 1.4 1.5s-.7 1.4-1.5 1.4-1.4-.7-1.4-1.5.7-1.4 1.5-1.4z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,182 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1303.8 737.4" style="enable-background:new 0 0 1303.8 737.4;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{clip-path:url(#SVGID_2_);}
|
||||||
|
.st1{fill:#393C40;}
|
||||||
|
.st2{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9.54,9.54;}
|
||||||
|
.st3{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10.35,10.35;}
|
||||||
|
.st4{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9.06,9.06;}
|
||||||
|
.st5{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12.67,12.67;}
|
||||||
|
.st6{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12.81,12.81;}
|
||||||
|
.st7{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10.4,10.4;}
|
||||||
|
.st8{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9.25,9.25;}
|
||||||
|
.st9{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9.55,9.55;}
|
||||||
|
.st10{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9.66,9.66;}
|
||||||
|
.st11{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10.37,10.37;}
|
||||||
|
.st12{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10,10;}
|
||||||
|
.st13{fill:none;stroke:#393C40;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:11.37,11.37;}
|
||||||
|
.st14{clip-path:url(#SVGID_4_);}
|
||||||
|
.st15{fill:#2E3136;}
|
||||||
|
.st16{clip-path:url(#SVGID_6_);}
|
||||||
|
.st17{clip-path:url(#SVGID_8_);}
|
||||||
|
</style>
|
||||||
|
<title>Artboard 1</title>
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<rect id="SVGID_1_" width="1303.8" height="737.4"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_2_">
|
||||||
|
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
||||||
|
</clipPath>
|
||||||
|
<g class="st0">
|
||||||
|
<path class="st1" d="M715.5,222.6c0.2-6.2-4-12.2-9.6-15V190c-2.1,1.9-4.9,3-7.8,3c-1.8,0-3.6-0.5-5.2-1.4v15.9
|
||||||
|
c-5.6,2.6-9.3,8.2-9.6,14.4c-0.1,2.7,0.6,5.5,1.8,7.9c-0.1-0.8-0.2-1.7-0.2-2.5c0.2-7.8,7.1-14.5,14.7-14.2s14.4,7.4,14.2,14.9
|
||||||
|
c0,0.4,0,0.8-0.1,1.2C714.8,227.2,715.4,225,715.5,222.6"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<line class="st2" x1="870.3" y1="376.4" x2="870.3" y2="519.5"/>
|
||||||
|
<line class="st3" x1="936.8" y1="407.1" x2="936.8" y2="562.4"/>
|
||||||
|
<line class="st4" x1="1034.7" y1="581.8" x2="1034.7" y2="627.1"/>
|
||||||
|
<line class="st5" x1="967.1" y1="547" x2="967.1" y2="585"/>
|
||||||
|
<line class="st6" x1="1104.2" y1="542.4" x2="1104.2" y2="580.8"/>
|
||||||
|
<line class="st7" x1="1036.7" y1="279.6" x2="1036.7" y2="435.6"/>
|
||||||
|
<line class="st8" x1="1106.2" y1="240.8" x2="1106.2" y2="361"/>
|
||||||
|
<line class="st9" x1="1204" y1="436.5" x2="1204" y2="522.4"/>
|
||||||
|
<line class="st10" x1="1134.5" y1="475.5" x2="1134.5" y2="562.4"/>
|
||||||
|
<line class="st11" x1="1064.9" y1="436.5" x2="1064.9" y2="467.6"/>
|
||||||
|
<line class="st12" x1="1006.4" y1="370.6" x2="1006.4" y2="460.6"/>
|
||||||
|
<line class="st13" x1="965.1" y1="240.8" x2="965.1" y2="297.6"/>
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<rect id="SVGID_3_" width="1303.8" height="737.4"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_4_">
|
||||||
|
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
|
||||||
|
</clipPath>
|
||||||
|
<g class="st14">
|
||||||
|
<path class="st15" d="M773.7,590.9c-8.2-4.8-8.2-12.5,0-17.3L823,545c8.2-4.8,21.7-4.8,30,0l49.4,28.6c8.2,4.8,8.2,12.5,0,17.3
|
||||||
|
L853,619.5c-8.2,4.8-21.7,4.8-30,0L773.7,590.9z"/>
|
||||||
|
<path class="st15" d="M921.8,676.7c8.2,4.8,21.7,4.8,30,0l49.4-28.6c8.2-4.8,8.2-12.5,0-17.3l-49.4-28.6c-8.2-4.8-21.7-4.8-30,0
|
||||||
|
l-49.4,28.6c-8.2,4.8-8.2,12.5,0,17.3L921.8,676.7z"/>
|
||||||
|
<path class="st15" d="M1020.7,733.8c8.2,4.8,21.7,4.8,30,0l49.3-28.6c8.2-4.8,8.2-12.5,0-17.3l-49.4-28.6c-8.2-4.8-21.7-4.8-30,0
|
||||||
|
l-49.4,28.6c-8.2,4.8-8.2,12.5,0,17.3L1020.7,733.8z"/>
|
||||||
|
<path class="st15" d="M1119.5,676.7c8.2,4.8,21.7,4.8,30,0l49.4-28.6c8.2-4.8,8.2-12.5,0-17.3l-49.4-28.6c-8.2-4.8-21.7-4.8-30,0
|
||||||
|
l-49.4,28.6c-8.2,4.8-8.2,12.5,0,17.3L1119.5,676.7z"/>
|
||||||
|
<path class="st15" d="M1248.3,545.1c-8.2-4.8-21.7-4.8-30,0l-49.4,28.6c-8.2,4.8-8.2,12.5,0,17.3l49.4,28.6c8.2,4.8,21.7,4.8,30,0
|
||||||
|
l49.4-28.5c8.2-4.8,8.2-12.5,0-17.3L1248.3,545.1z"/>
|
||||||
|
<path class="st15" d="M942.8,369.3c-3.5,2.3-5.7,6-5.9,10.2V391c0,3.7-2.7,5.2-6,3.4l-51.6-29.2c-3.5-2.2-5.7-6-6-10.1v-22.7
|
||||||
|
l1.1-0.6c0.6-0.3,3.8,0.9,7,2.7l48.6,27.3c3.7,1.8,8.1,1.8,11.9,0l49.1-28.3c3.3-1.9,6.7-3.1,7.7-2.8c1.1,0.5,1.8,1.6,1.8,2.8
|
||||||
|
c0,1.2-2.6,3.7-5.9,5.6L942.8,369.3z M942.8,292.3c-3.7-1.9-8.1-1.9-11.8,0l-58.7,33.9c-3.5,2.2-5.7,6-5.9,10.1v22.9
|
||||||
|
c0.2,4.1,2.5,7.9,6,10.1l58.7,33.2c3.7,1.9,8.1,1.9,11.9,0l58.7-33.2c3.5-2.2,5.7-6,6-10.1v-22.8c-0.2-4.1-2.4-7.9-5.9-10.1
|
||||||
|
L942.8,292.3z"/>
|
||||||
|
<path class="st15" d="M1140.4,437.4c-3.5,2.3-5.7,6-5.9,10.2v11.6c0,3.7-2.7,5.2-5.9,3.4l-51.6-29.2c-3.5-2.2-5.7-6-5.9-10.1
|
||||||
|
v-22.8l1.1-0.6c0.6-0.3,3.8,0.9,7,2.7l48.5,27.3c3.7,1.9,8.1,1.9,11.9,0l49.2-28.3c3.3-1.9,6.7-3.1,7.7-2.8
|
||||||
|
c1.1,0.5,1.8,1.6,1.8,2.8c0,1.2-2.6,3.7-5.9,5.6L1140.4,437.4z M1140.4,360.4c-3.7-1.9-8.1-1.9-11.8,0l-58.7,33.9
|
||||||
|
c-3.5,2.2-5.7,6-5.9,10.1v22.9c0.2,4.1,2.5,7.9,5.9,10.1l58.7,33.2c3.7,1.9,8.1,1.9,11.9,0l58.7-33.2c3.5-2.2,5.7-6,5.9-10.1
|
||||||
|
v-22.9c-0.2-4.1-2.4-7.9-5.9-10.1L1140.4,360.4z"/>
|
||||||
|
<path class="st15" d="M1041.6,241c-3.5,2.3-5.7,6-5.9,10.2v11.6c0,3.7-2.7,5.2-5.9,3.4L978.1,237c-3.5-2.2-5.7-6-6-10.1v-22.8
|
||||||
|
l1.1-0.6c0.6-0.3,3.8,0.9,7,2.7l48.5,27.3c3.7,1.9,8.1,1.9,11.9,0l49.2-28.3c3.3-1.9,6.7-3.1,7.7-2.8c1.1,0.5,1.8,1.6,1.8,2.8
|
||||||
|
c0,1.2-2.6,3.7-5.9,5.6L1041.6,241z M1041.6,164c-3.7-1.9-8.1-1.9-11.8,0L971,197.9c-3.5,2.2-5.7,6-5.9,10.1v22.8
|
||||||
|
c0.2,4.1,2.5,7.9,6,10.1l58.7,33.2c3.7,1.9,8.1,1.9,11.9,0l58.7-33.2c3.5-2.2,5.7-6,5.9-10.1v-22.8c-0.2-4.1-2.4-7.9-5.9-10.1
|
||||||
|
L1041.6,164z"/>
|
||||||
|
<path class="st15" d="M1041.6,538.7c-3.5,2.3-5.7,6-5.9,10.2v11.6c0,3.7-2.7,5.2-5.9,3.4l-51.6-29.2c-3.5-2.2-5.7-6-6-10.1v-22.8
|
||||||
|
l1.1-0.6c0.6-0.3,3.8,0.9,7,2.7l48.5,27.3c3.7,1.8,8.1,1.8,11.9,0l49.2-28.3c3.3-1.9,6.7-3.1,7.7-2.8c1.1,0.5,1.8,1.6,1.8,2.8
|
||||||
|
c0,1.2-2.6,3.7-5.9,5.6L1041.6,538.7z M1041.6,461.7c-3.7-1.9-8.1-1.9-11.8,0L971,495.6c-3.5,2.2-5.7,6-5.9,10.1v22.9
|
||||||
|
c0.2,4.1,2.5,7.9,6,10.1l58.7,33.2c3.7,1.9,8.1,1.9,11.9,0l58.7-33.2c3.5-2.2,5.7-6,5.9-10.1v-22.9c-0.2-4.1-2.4-7.9-5.9-10.1
|
||||||
|
L1041.6,461.7z"/>
|
||||||
|
<path class="st1" d="M582.5,50.3l-0.1-0.1L582.5,50.3 M396.4,166.1c-6.8,6.8-6.1,10.1,2.8,13.7c10.5,4.3,17.5,12,21.7,22.5
|
||||||
|
c2.9,7.2,6.9,8.1,12.4,2.6c16-15.9,26.1-26,42.2-41.8c3.9-4,8.2-9.3,8.9-16c1.4-10.3,5-17,9-21c19.1-19,27.1-27.7,40.5-41.3
|
||||||
|
c1.6-1.7,2.5-4.1,2.4-6.5c-1.6-10.5,1.7-18.2,10.5-23.3c8.2-4.7,16.9-4,24.6,2.1c0.3,0.2,1.7,1.7,1.8,1.9c0,0,0.2,0.1,4.4-4.1
|
||||||
|
l4.8-4.8c-3.1-3.1-22.3-22.2-24.7-24.4c-4.9-4.7-3.9-4.7-4.9-3.7L527,47.2c0,0-3.8,3.8-9.6-1.9C517.8,45,436.3,126.2,396.4,166.1"
|
||||||
|
/>
|
||||||
|
<path class="st1" d="M180.6,384c0,0.3,0,0.6,0,0.9C180.6,384.5,180.6,384.2,180.6,384 M362.3,256.2c-10.5-4.3-17.5-12-21.7-22.5
|
||||||
|
c-2.9-7.2-6.9-8.1-12.4-2.6c-16,15.9-31.8,32-47.9,47.8c-3.2,3.2-4.9,6.3-4,10.7c1.8,8.8-1.6,15.1-8.1,21.2
|
||||||
|
c-12,11.2-22.9,22.5-34.4,34.3c11.9,4,22.6,15.8,27,29l104.2-104.2C372,263,371.2,259.8,362.3,256.2"/>
|
||||||
|
<path class="st1" d="M616.5,60.2c-0.2,0.2-0.3,0.4-0.3,0.6C616.2,60.6,616.3,60.4,616.5,60.2 M616.2,60.9c0,0,0,0.1,0,0.1
|
||||||
|
C616.1,61,616.1,60.9,616.2,60.9 M616.5,61.6c0.1,0.1,0.1,0.1,0.2,0.2C616.6,61.7,616.5,61.7,616.5,61.6 M626.9,61.2
|
||||||
|
c-0.1-3.3-2.6-6-5.9-6.2c-3.3,0-6,2.6-6.1,5.9c-0.1,3.3,2.5,6,5.8,6.2C624,67,626.7,64.5,626.9,61.2"/>
|
||||||
|
<path class="st1" d="M575.9,72.3c-0.1-10.5-8.7-18.9-19.2-18.8s-18.9,8.7-18.8,19.2c0,10.5,9,19.4,19.2,19.2
|
||||||
|
C567.8,91.7,576.1,82.9,575.9,72.3"/>
|
||||||
|
<path class="st1" d="M188.9,482h-53c-12,0-12-12-12-12v-71c0,82,65,82.8,65,82.8C200.9,482,188.9,482,188.9,482 M223.2,483v-46
|
||||||
|
c0-6-6-6.3-6-6.3c-11.7-0.9-22.6-6.1-30.7-14.5c-10-10.7-11.2-24.1-10.8-32.4c0.3-6-5.7-6-5.7-6h-47c-6,0-6,6-6,6V483c0,6,6,6,6,6
|
||||||
|
h94.2C223.2,489,223.2,483,223.2,483"/>
|
||||||
|
<path class="st1" d="M2.2,363.7c0,0-0.6-1.2-0.8-1.1l-1,0.4c0,0-0.3,0.1-0.3-5.9v-24.4c0,0,0-6,2.4-6s11.8-0.4,16.2-0.4
|
||||||
|
c11,0,13.1,2.1,13.1,13.2c0,12.6,0,25.2,0,32.2c0,0,0,6,3.8,5.7s4.8,3.7,4.8,9.5c-0.2,27.7-0.2,55.4,0,83.1c0,6.2,0.2,12-4.2,11.8
|
||||||
|
c0,0-4.4-0.1-4.4,5.9c0,7.9,0.1,21.2,0,34.5c0,6.5-2.9,10.1-8.9,10.4s-16.8,0.4-19.9,0.4c0,0-3.1,0-3.1-6v-24.6c0,0,0-6,0.3-5.9
|
||||||
|
l1.2,0.3c0,0,0.3,0.1,0.8-1.1s2.5-3.7,2.5-6.1c0.2-40,0.2-79.9,0-119.9C5,367.5,2.9,365,2.2,363.7"/>
|
||||||
|
<path class="st1" d="M114.9,469.9l-1.5,1.2c0,0-0.3,0.2-0.8-0.5s-2.3-2.1-2.3-3.5c-0.2-23.2-0.2-46.4,0-69.6c0-1.3,2-2.6,2.5-3.2
|
||||||
|
c0,0,0.5-0.6,0.8-0.5l1.3,0.9 M44.9,432.6c0-15.2,0.1-30.5,0-45.8c0-5.4,2.1-7.9,7.6-7.8c10.5,0.2,37.1,0.1,47.6,0
|
||||||
|
c5.4-0.1,7.9,2.2,7.9,7.6c-0.1,30.5-0.1,61,0,91.5c0,5.3-2.2,8-7.7,7.9c-10.3-0.1-36.7-0.1-47,0c-5.8,0.1-8.6-2.3-8.5-8.4
|
||||||
|
C45,462.6,44.8,447.6,44.9,432.6"/>
|
||||||
|
<path class="st1" d="M218.4,427.1c-24.7-0.2-40.3-21.7-39.5-41.9c1-24.1,19.7-40.8,43.9-39.6c21.8,1.1,38.3,20.9,37,44.4
|
||||||
|
C258.6,410.9,239.4,428.2,218.4,427.1"/>
|
||||||
|
<path class="st15" d="M692.1,363.5c4.6,2.3,10,2.2,14.5-0.1l60.3-34.7c4-2.3,8.2-3.8,9.4-3.4c1.1,0.5,1.9,1.5,2.2,2.7
|
||||||
|
c0,0,0,0.7,0,1.4s-3.2,3.8-7.2,6.1l-63.5,37.1c-4,2.3-7.2,7.9-7.2,12.5v14.2c0,4.5-3.3,6.4-7.3,4.1L630,367.7
|
||||||
|
c-4-2.3-7.3-7.8-7.3-12.4v-27.9c0,0,0,0,0.3-0.2l1-0.6c0.7-0.4,4.6,1.1,8.6,3.3L692.1,363.5z M693.3,278.3l-72,41.5
|
||||||
|
c-4.1,2.7-6.7,7.1-7.2,11.9l1.7,0.2c1.2,0.2,2,1.3,1.9,2.5v8c0,0,0,1.1-3.7,2.8v14.9c0,4.5,3.3,10.1,7.3,12.4l71.9,40.7
|
||||||
|
c4.6,2.3,10,2.3,14.6,0l71.9-40.7c4-2.3,7.3-7.8,7.3-12.4v-12c-0.3-0.1-0.6-0.1-0.8-0.2c-8.1-2.7-8.1-4.6-8.1-4.6v-8
|
||||||
|
c-0.1-1.2,0.7-2.3,1.9-2.5l7-1c-0.4-4.9-3.1-9.4-7.2-12.1l-72-41.5C703.2,276,697.9,276,693.3,278.3"/>
|
||||||
|
<path class="st1" d="M487.8,147L487.8,147l35.2-36.8l-5.1-4.9l-23,23.7C494.9,129,488.9,135,487.8,147"/>
|
||||||
|
<path class="st1" d="M519.9,43.1L519.9,43.1L563.6,0l5.3,5.2l-14,14.4l-1.3-1.3l-27.2,26.1C526.4,44.5,523.8,47.1,519.9,43.1"/>
|
||||||
|
<path class="st1" d="M631.5,61.3l-7.1,7.1c0,0-4.2,4.2,0,8.5l62.5,62.6c0,0,4.2,4.2,8.5,0l2.8-2.8c0,0,4.2-4.2,0-8.5L631.5,61.3z"
|
||||||
|
/>
|
||||||
|
<path class="st1" d="M709.3,166.1L594.9,51.7c0,0-4.2-4.2-8.5,0l-2.8,2.8c0,0-4.2,4.2,0,8.5l24.1,24.1l-11.6,11.6
|
||||||
|
c0,0-4.2,4.2,0,8.5l86,86c0,0,4.2,4.2,8.5,0l1.9-1.9c-3.5-2.2-5.6-6-5.5-10.1c0.2-6.2,5.7-11.5,11.6-11.2c3.9,0.3,7.4,2.4,9.5,5.7
|
||||||
|
l1.2-1.2C709.3,174.5,713.5,170.3,709.3,166.1 M690.2,182.8c-0.1-0.1-0.2-0.2-0.3-0.3L690.2,182.8 M690.4,183l-0.1-0.1L690.4,183
|
||||||
|
M689.4,181c0.1-0.4,0.3-0.8,0.7-1.1C689.7,180.2,689.4,180.6,689.4,181"/>
|
||||||
|
<path class="st1" d="M708.4,138.2c0,0-4.2-4.2-8.5,0L697,141c0,0-4.2,4.2,0,8.5l14,13.9L708.4,138.2z"/>
|
||||||
|
<path class="st1" d="M693,228.7c0.1-0.3,0.2-0.6,0.5-0.8C693.2,228.1,693.1,228.4,693,228.7 M693.7,230c-0.1-0.1-0.2-0.2-0.3-0.3
|
||||||
|
C693.5,229.8,693.6,229.9,693.7,230 M707.3,229.2c-0.3,4.3-3.9,7.7-8.2,7.8c-4.4-0.2-7.8-3.8-7.7-8.2c0.2-4.4,3.7-7.8,8.1-7.8
|
||||||
|
C703.8,221.3,707.2,224.9,707.3,229.2 M690.5,227.4c-0.3,0.3-0.6,0.7-0.7,1.1C689.9,228,690.2,227.6,690.5,227.4 M724.9,239v-3
|
||||||
|
c0,0,0-5-5-5h-8.8c0.1-0.5,0.2-1.1,0.2-1.6c0.2-6.2-5.4-12.1-11.7-12.4s-12,5.3-12.2,11.7c0,0.8,0,1.5,0.2,2.3h-8.7c0,0-5,0-5,5v3
|
||||||
|
c0,0,0,5,5,5h41C719.9,244,724.9,244,724.9,239"/>
|
||||||
|
<path class="st1" d="M707.7,181.8c-0.1-5-4-9.1-9-9.5c-4.8-0.2-9.2,4.1-9.4,9c-0.1,5.1,3.8,9.3,8.9,9.4
|
||||||
|
C703.2,190.6,707.4,186.7,707.7,181.8"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<polygon class="st1" points="570.8,7.1 570.8,7.1 568.9,9 615.4,55.5 617.3,53.6 "/>
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<rect id="SVGID_5_" width="1303.8" height="737.4"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_6_">
|
||||||
|
<use xlink:href="#SVGID_5_" style="overflow:visible;"/>
|
||||||
|
</clipPath>
|
||||||
|
<g class="st16">
|
||||||
|
<path class="st1" d="M586.1,44.3l-25.1-25.1c-0.4-0.4-1-0.4-1.4,0c0,0-0.1,0.1-0.1,0.1l-1.8,1.8c-0.1,0.1-0.1,0.2-0.2,0.3
|
||||||
|
L583.9,48l0.1-0.1l0,0c0.1-0.1,0.2-0.1,0.3-0.2l1.7-1.9C586,45.8,586.8,45,586.1,44.3"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<polygon class="st1" points="540.7,88.9 540.7,88.9 538.8,87 521,105.1 522.9,107 "/>
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<rect id="SVGID_7_" width="1303.8" height="737.4"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_8_">
|
||||||
|
<use xlink:href="#SVGID_7_" style="overflow:visible;"/>
|
||||||
|
</clipPath>
|
||||||
|
<g class="st17">
|
||||||
|
<path class="st1" d="M1123.8,193.5c0.3,0.3,0.1,0.5-0.2,0.7c-2.5,1.6-5,3.1-7.4,4.8c-2,1.3-3.6,3-4.7,5.1
|
||||||
|
c-0.8,1.6-0.7,3.6,0.3,5.2c1.3,2,3,3.7,5.1,5c2.2,1.5,4.5,2.9,6.7,4.3c0.3,0.2,0.5,0.3,0.2,0.6c-1.7-0.9-3.4-1.9-5.1-2.7
|
||||||
|
c-2.1-1.1-4.3-2-6.6-2.6c-1.8-0.6-3.7-0.5-5.4,0.2c-1.3,0.7-2.4,2-2.8,3.4c-0.7,1.8-1.1,3.6-1.2,5.5c-0.3,2.8-0.4,5.7-0.3,8.5
|
||||||
|
c0,0.1,0,0.2,0,0.2h-0.6c0-0.2,0-0.3,0-0.5c-0.1-2.3-0.1-4.6-0.3-6.9c-0.1-2.5-0.6-4.9-1.5-7.2c-0.6-1.9-2.2-3.3-4.2-3.6
|
||||||
|
c-1.4-0.2-2.8-0.1-4.1,0.4c-1.8,0.6-3.5,1.2-5.2,2c-2.1,1-4.2,2.1-6.3,3.2l-0.2-0.3c0.1-0.1,0.3-0.2,0.4-0.3
|
||||||
|
c2.5-1.6,5-3.1,7.4-4.9c1.9-1.3,3.5-3,4.6-5c0.9-1.7,0.7-3.7-0.3-5.2c-1.3-2-3-3.7-5-4.9c-2.2-1.5-4.5-2.9-6.7-4.3
|
||||||
|
c-0.3-0.2-0.5-0.3-0.2-0.6c1.8,1,3.6,2,5.4,2.9c2.2,1.1,4.4,2,6.8,2.6c1.3,0.3,2.6,0.4,3.9,0.1c1.7-0.5,3-1.7,3.6-3.3
|
||||||
|
c0.8-1.9,1.3-4,1.4-6.1c0.2-2.3,0.2-4.6,0.4-6.9c0-0.5,0.1-1,0.1-1.5c0-0.1,0.2-0.2,0.3-0.3l0.2,0.1c0,0.4,0,0.9,0,1.3
|
||||||
|
c0,1.5,0,3,0.1,4.5c0.1,2.9,0.6,5.7,1.5,8.4c0.8,2,2,3.5,4.2,3.9c1.6,0.2,3.2,0.1,4.7-0.4c3.5-1.2,6.8-2.7,10-4.6L1123.8,193.5"/>
|
||||||
|
<path class="st1" d="M654.9,259c-9,0-14-0.2-22,0c-5,0.1-17,0-17.8,1.1c-4.3,6.1-7.5,14.1-8,21.6c-1.1,17-0.4,34.2-0.4,51.8l8,1.1
|
||||||
|
v8.6c-15.6,5.2-21.9-3.5-21.7-17.2c0.2-15.7-0.2-31.4,0.2-47.1c0.1-6.4,1.3-12.7,2.1-19.5c-7.4-0.6-5.1-6.6-4.5-12.4h89V259"/>
|
||||||
|
<path class="st1" d="M731.9,259c9,0,27-0.2,35,0c5,0.1,12.2-0.6,14,2c4.3,6.2,7.5,13.4,8,20.8c1.1,17,0.4,34.2,0.4,51.8l-8,1.1
|
||||||
|
v8.6c15.6,5.2,21.9-3.5,21.7-17.2c-0.2-15.7,0.2-31.4-0.2-47.1c-0.1-6.4-1.3-12.7-2.1-19.5c7.4-0.6,5.1-6.6,4.5-12.4h-89v12"/>
|
||||||
|
<path class="st1" d="M275.1,286c-7.5,7.5-44.8,44.5-58.3,57.9c2.7-0.3,5.3-0.4,8-0.3c2.1,0.1,4.1,0.4,6.1,0.8
|
||||||
|
c3.1-3.2,7-7.3,12.1-12.5c8.1-8.3,15.8-16.3,24.2-24.2c4.6-4.3,7-8.7,5.8-15C272.5,290.3,273.2,287.7,275.1,286 M275.8,285.2
|
||||||
|
c-0.2,0.2-0.5,0.5-0.7,0.8C276.5,284.6,276.9,284.2,275.8,285.2"/>
|
||||||
|
<path class="st1" d="M390.6,217c0,5.9-4.8,10.6-10.7,10.6c-5.9,0-10.6-4.8-10.6-10.7c0-5.8,4.7-10.5,10.4-10.6
|
||||||
|
C385.7,206.3,390.5,211.1,390.6,217 M419,217c0-21.6-17.5-39.1-39.1-39.1s-39.1,17.5-39.1,39.1c0,21.6,17.5,39.1,39.1,39.1
|
||||||
|
S419,238.6,419,217L419,217"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 351 195" viewBox="0 0 351 195" xmlns="http://www.w3.org/2000/svg"><g fill="#58606b"><path d="m11.4 102.5c-5.2-3-5.2-7.9 0-10.8l30.9-17.9c5.9-3 12.9-3 18.8 0l30.9 17.9c5.2 3 5.2 7.9 0 10.8l-30.9 17.9c-5.9 3-12.9 3-18.8 0z"/><path d="m104.2 84.6c5.9 3 12.9 3 18.8 0l30.9-17.9c5.2-3 5.2-7.9 0-10.8l-30.9-18c-5.9-3-12.9-3-18.8 0l-30.9 17.9c-5.2 3-5.2 7.9 0 10.8z"/><path d="m166.1 48.7c5.9 3 12.9 3 18.8 0l30.9-17.9c5.2-3 5.2-7.9 0-10.8l-30.9-18c-5.9-3-12.9-3-18.8 0l-30.9 17.9c-5.2 3-5.2 7.9 0 10.8z"/><path d="m104.2 156.2c5.9 3 12.9 3 18.8 0l30.9-17.9c5.2-3 5.2-7.9 0-10.8l-30.9-18c-5.9-3-12.9-3-18.8 0l-30.9 17.8c-5.2 3-5.2 7.9 0 10.8z"/><path d="m228 84.6c5.9 3 12.9 3 18.8 0l30.9-17.9c5.2-3 5.2-7.9 0-10.8l-30.9-18c-5.9-3-12.9-3-18.8 0l-30.9 17.9c-5.2 3-5.2 7.9 0 10.8z"/><path d="m166.1 192c5.9 3 12.9 3 18.8 0l30.9-17.9c5.2-3 5.2-7.9 0-10.8l-30.9-17.9c-5.9-3-12.9-3-18.8 0l-30.9 17.9c-5.2 3-5.2 7.9 0 10.8z"/><path d="m166.1 120.3c5.9 3 12.9 3 18.8 0l30.9-17.9c5.2-3 5.2-7.9 0-10.8l-30.9-17.9c-5.9-3-12.9-3-18.8 0l-30.9 17.9c-5.2 3-5.2 7.9 0 10.8z"/><path d="m228 156.2c5.9 3 12.9 3 18.8 0l30.9-17.9c5.2-3 5.2-7.9 0-10.8l-30.9-17.9c-5.9-3-12.9-3-18.8 0l-30.9 17.8c-5.2 3-5.2 7.9 0 10.8z"/><path d="m308.7 73.7c-5.9-3-12.9-3-18.8 0l-30.9 17.9c-5.2 3-5.2 7.9 0 10.8l30.9 17.9c5.9 3 12.9 3 18.8 0l30.9-17.9c5.2-3 5.2-7.9 0-10.8z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.7 KiB |
@ -0,0 +1,132 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.Icon {
|
||||||
|
--size: 21px;
|
||||||
|
--small-size: 18px;
|
||||||
|
--smallest-size: 16px;
|
||||||
|
--big-size: 32px;
|
||||||
|
--color-active: var(--iconActiveColor);
|
||||||
|
--bgc-active: var(--iconActiveBackground);
|
||||||
|
--focus-color: var(--icon-focus-color, var(--blue));
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-style: normal;
|
||||||
|
vertical-align: middle;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-decoration: none;
|
||||||
|
user-select: none;
|
||||||
|
box-sizing: content-box; // allow to use padding for outer spacing
|
||||||
|
-webkit-user-select: none; /* safari */
|
||||||
|
-moz-user-select: none; /* firefox */
|
||||||
|
|
||||||
|
font-size: var(--size);
|
||||||
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
|
||||||
|
&.smallest {
|
||||||
|
font-size: var(--smallest-size);
|
||||||
|
width: var(--smallest-size);
|
||||||
|
height: var(--smallest-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
font-size: var(--small-size);
|
||||||
|
width: var(--small-size);
|
||||||
|
height: var(--small-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.big {
|
||||||
|
font-size: var(--big-size);
|
||||||
|
width: var(--big-size);
|
||||||
|
height: var(--big-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
// material-icon
|
||||||
|
&.material {
|
||||||
|
> .icon {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
font-style: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// inline svg icon
|
||||||
|
&.svg {
|
||||||
|
box-sizing: content-box;
|
||||||
|
|
||||||
|
> .icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
pointer-events: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
* {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
line {
|
||||||
|
stroke: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
opacity: .5;
|
||||||
|
color: inherit !important;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.sticker {
|
||||||
|
background: var(--colorOk);
|
||||||
|
color: var(--textColorAccent);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-sizing: content-box;
|
||||||
|
padding: $padding * 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: var(--color-active);
|
||||||
|
box-shadow: 0 0 0 2px var(--iconActiveBackground);
|
||||||
|
background-color: var(--iconActiveBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.interactive {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 250ms color, 250ms opacity, 150ms background-color, 150ms box-shadow;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
|
&.focusable:focus-visible {
|
||||||
|
box-shadow: 0 0 0 2px var(--focus-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@extend .active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import type { Logger } from "../../../common/logger";
|
||||||
|
import loggerInjectable from "../../../common/logger.injectable";
|
||||||
|
import { getDiForUnitTesting } from "../../getDiForUnitTesting";
|
||||||
|
import type { DiRender } from "../test-utils/renderFor";
|
||||||
|
import { renderFor } from "../test-utils/renderFor";
|
||||||
|
import { Icon } from "./icon";
|
||||||
|
|
||||||
|
describe("<Icon> href technical tests", () => {
|
||||||
|
let render: DiRender;
|
||||||
|
let logger: jest.MockedObject<Logger>;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
const di = getDiForUnitTesting();
|
||||||
|
|
||||||
|
logger = {
|
||||||
|
debug: jest.fn(),
|
||||||
|
error: jest.fn(),
|
||||||
|
info: jest.fn(),
|
||||||
|
silly: jest.fn(),
|
||||||
|
warn: jest.fn(),
|
||||||
|
};
|
||||||
|
|
||||||
|
di.override(loggerInjectable, () => logger);
|
||||||
|
|
||||||
|
render = renderFor(di);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should render an <Icon> with http href", () => {
|
||||||
|
const result = render((
|
||||||
|
<Icon
|
||||||
|
data-testid="my-icon"
|
||||||
|
href="http://localhost"
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
const icon = result.queryByTestId("my-icon");
|
||||||
|
|
||||||
|
expect(icon).toBeInTheDocument();
|
||||||
|
expect(icon).toHaveAttribute("href", "http://localhost");
|
||||||
|
expect(logger.warn).not.toBeCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should render an <Icon> with https href", () => {
|
||||||
|
const result = render((
|
||||||
|
<Icon
|
||||||
|
data-testid="my-icon"
|
||||||
|
href="https://localhost"
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
const icon = result.queryByTestId("my-icon");
|
||||||
|
|
||||||
|
expect(icon).toBeInTheDocument();
|
||||||
|
expect(icon).toHaveAttribute("href", "https://localhost");
|
||||||
|
expect(logger.warn).not.toBeCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should warn about ws hrefs", () => {
|
||||||
|
const result = render((
|
||||||
|
<Icon
|
||||||
|
data-testid="my-icon"
|
||||||
|
href="ws://localhost"
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
const icon = result.queryByTestId("my-icon");
|
||||||
|
|
||||||
|
expect(icon).toBeInTheDocument();
|
||||||
|
expect(icon).not.toHaveAttribute("href", "ws://localhost");
|
||||||
|
expect(logger.warn).toBeCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should warn about javascript: hrefs", () => {
|
||||||
|
const result = render((
|
||||||
|
<Icon
|
||||||
|
data-testid="my-icon"
|
||||||
|
href="javascript:void 0"
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
const icon = result.queryByTestId("my-icon");
|
||||||
|
|
||||||
|
expect(icon).toBeInTheDocument();
|
||||||
|
expect(icon).not.toHaveAttribute("href", "javascript:void 0");
|
||||||
|
expect(logger.warn).toBeCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,283 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./icon.scss";
|
||||||
|
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import React, { createRef } from "react";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
import type { LocationDescriptor } from "history";
|
||||||
|
import { cssNames } from "@k8slens/utilities";
|
||||||
|
import isNumber from "lodash/isNumber";
|
||||||
|
import Configuration from "./configuration.svg";
|
||||||
|
import Crane from "./crane.svg";
|
||||||
|
import Group from "./group.svg";
|
||||||
|
import Helm from "./helm.svg";
|
||||||
|
import Install from "./install.svg";
|
||||||
|
import Kube from "./kube.svg";
|
||||||
|
import LensLogo from "./lens-logo.svg";
|
||||||
|
import License from "./license.svg";
|
||||||
|
import LogoLens from "./logo-lens.svg";
|
||||||
|
import Logout from "./logout.svg";
|
||||||
|
import Nodes from "./nodes.svg";
|
||||||
|
import PushOff from "./push_off.svg";
|
||||||
|
import PushPin from "./push_pin.svg";
|
||||||
|
import Spinner from "./spinner.svg";
|
||||||
|
import Ssh from "./ssh.svg";
|
||||||
|
import Storage from "./storage.svg";
|
||||||
|
import Terminal from "./terminal.svg";
|
||||||
|
import Notice from "./notice.svg";
|
||||||
|
import User from "./user.svg";
|
||||||
|
import Users from "./users.svg";
|
||||||
|
import Wheel from "./wheel.svg";
|
||||||
|
import Workloads from "./workloads.svg";
|
||||||
|
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
|
import { withTooltip } from "../tooltip";
|
||||||
|
import { Logger, loggerInjectionToken } from "../../injection-tokens";
|
||||||
|
|
||||||
|
const hrefValidation = /https?:\/\//;
|
||||||
|
|
||||||
|
const hrefIsSafe = (href: string) => Boolean(href.match(hrefValidation));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mapping between the local file names and the svgs
|
||||||
|
*
|
||||||
|
* Because we only really want a fixed list of bundled icons, this is safer so that consumers of
|
||||||
|
* `<Icon>` cannot pass in a `../some/path`.
|
||||||
|
*/
|
||||||
|
const localSvgIcons = new Map([
|
||||||
|
["configuration", Configuration],
|
||||||
|
["crane", Crane],
|
||||||
|
["group", Group],
|
||||||
|
["helm", Helm],
|
||||||
|
["install", Install],
|
||||||
|
["kube", Kube],
|
||||||
|
["lens-logo", LensLogo],
|
||||||
|
["license", License],
|
||||||
|
["logo-lens", LogoLens],
|
||||||
|
["logout", Logout],
|
||||||
|
["nodes", Nodes],
|
||||||
|
["push_off", PushOff],
|
||||||
|
["push_pin", PushPin],
|
||||||
|
["spinner", Spinner],
|
||||||
|
["ssh", Ssh],
|
||||||
|
["storage", Storage],
|
||||||
|
["terminal", Terminal],
|
||||||
|
["notice", Notice],
|
||||||
|
["user", User],
|
||||||
|
["users", Users],
|
||||||
|
["wheel", Wheel],
|
||||||
|
["workloads", Workloads],
|
||||||
|
]);
|
||||||
|
|
||||||
|
export interface BaseIconProps {
|
||||||
|
/**
|
||||||
|
* One of the names from https://material.io/icons/
|
||||||
|
*/
|
||||||
|
material?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Either an SVG XML or one of the following names
|
||||||
|
* - configuration
|
||||||
|
* - crane
|
||||||
|
* - group
|
||||||
|
* - helm
|
||||||
|
* - install
|
||||||
|
* - kube
|
||||||
|
* - lens-logo
|
||||||
|
* - license
|
||||||
|
* - logo-lens
|
||||||
|
* - logout
|
||||||
|
* - nodes
|
||||||
|
* - push_off
|
||||||
|
* - push_pin
|
||||||
|
* - spinner
|
||||||
|
* - ssh
|
||||||
|
* - storage
|
||||||
|
* - terminal
|
||||||
|
* - user
|
||||||
|
* - users
|
||||||
|
* - wheel
|
||||||
|
* - workloads
|
||||||
|
*/
|
||||||
|
svg?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* render icon as NavLink from react-router-dom
|
||||||
|
*/
|
||||||
|
link?: LocationDescriptor;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* render icon as hyperlink
|
||||||
|
*/
|
||||||
|
href?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The icon size (css units)
|
||||||
|
*/
|
||||||
|
size?: string | number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A pre-defined icon-size
|
||||||
|
*/
|
||||||
|
small?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A pre-defined icon-size
|
||||||
|
*/
|
||||||
|
smallest?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A pre-defined icon-size
|
||||||
|
*/
|
||||||
|
big?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* apply active-state styles
|
||||||
|
*/
|
||||||
|
active?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* indicates that icon is interactive and highlight it on focus/hover
|
||||||
|
*/
|
||||||
|
interactive?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allow focus to the icon to show `.active` styles. Only applicable if {@link IconProps.interactive} is `true`.
|
||||||
|
*
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
focusable?: boolean;
|
||||||
|
sticker?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
"data-testid"?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IconProps extends React.HTMLAttributes<any>, BaseIconProps {}
|
||||||
|
|
||||||
|
export function isSvg(content: string): boolean {
|
||||||
|
// source code of the asset
|
||||||
|
return String(content).includes("<svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Dependencies {
|
||||||
|
logger: Logger;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RawIcon = (props: IconProps & Dependencies) => {
|
||||||
|
const ref = createRef<HTMLAnchorElement>();
|
||||||
|
|
||||||
|
const {
|
||||||
|
// skip passing props to icon's html element
|
||||||
|
className, href, link, material, svg, size, smallest, small, big,
|
||||||
|
disabled, sticker, active,
|
||||||
|
focusable = true,
|
||||||
|
children,
|
||||||
|
interactive, onClick, onKeyDown,
|
||||||
|
logger,
|
||||||
|
...elemProps
|
||||||
|
} = props;
|
||||||
|
const isInteractive = interactive ?? !!(onClick || href || link);
|
||||||
|
|
||||||
|
const boundOnClick = (event: React.MouseEvent) => {
|
||||||
|
if (!disabled) {
|
||||||
|
onClick?.(event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const boundOnKeyDown = (event: React.KeyboardEvent<any>) => {
|
||||||
|
switch (event.nativeEvent.code) {
|
||||||
|
case "Space":
|
||||||
|
|
||||||
|
// fallthrough
|
||||||
|
case "Enter": {
|
||||||
|
ref.current?.click();
|
||||||
|
event.preventDefault();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyDown?.(event);
|
||||||
|
};
|
||||||
|
|
||||||
|
let iconContent: ReactNode;
|
||||||
|
const iconProps: Partial<IconProps> = {
|
||||||
|
className: cssNames("Icon", className,
|
||||||
|
{ svg, material, interactive: isInteractive, disabled, sticker, active, focusable },
|
||||||
|
!size ? { smallest, small, big } : {},
|
||||||
|
),
|
||||||
|
onClick: isInteractive ? boundOnClick : undefined,
|
||||||
|
onKeyDown: isInteractive ? boundOnKeyDown : undefined,
|
||||||
|
tabIndex: isInteractive && focusable && !disabled ? 0 : undefined,
|
||||||
|
style: size ? { "--size": size + (isNumber(size) ? "px" : "") } as React.CSSProperties : undefined,
|
||||||
|
...elemProps,
|
||||||
|
};
|
||||||
|
|
||||||
|
// render as inline svg-icon
|
||||||
|
if (typeof svg === "string") {
|
||||||
|
const svgIconText = isSvg(svg)
|
||||||
|
? svg
|
||||||
|
: localSvgIcons.get(svg) ?? "";
|
||||||
|
|
||||||
|
iconContent = (
|
||||||
|
<span
|
||||||
|
className="icon"
|
||||||
|
dangerouslySetInnerHTML={{ __html: svgIconText }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// render as material-icon
|
||||||
|
if (typeof material === "string") {
|
||||||
|
iconContent = <span className="icon" data-icon-name={material}>{material}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// wrap icon's content passed from decorator
|
||||||
|
iconProps.children = (
|
||||||
|
<>
|
||||||
|
{iconContent}
|
||||||
|
{children}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
// render icon type
|
||||||
|
if (link) {
|
||||||
|
const { className, children } = iconProps;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
className={className}
|
||||||
|
to={link}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (href) {
|
||||||
|
if (hrefIsSafe(href)) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
{...iconProps}
|
||||||
|
href={href}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
logger.warn("[ICON]: href prop is unsafe, blocking", { href });
|
||||||
|
}
|
||||||
|
|
||||||
|
return <i {...iconProps} ref={ref} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const InjectedIcon = withInjectables<Dependencies, IconProps>(RawIcon, {
|
||||||
|
getProps: (di, props) => ({
|
||||||
|
...props,
|
||||||
|
logger: di.inject(loggerInjectionToken),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Icon = Object.assign(withTooltip(InjectedIcon), { isSvg });
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./icon";
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m4486.6 4986.6c-3.9-9.8-64.4-246-130.8-525.1l-123-511.5-244-62.5-244-64.4-89.8 95.7c-48.8 52.7-216.7 228.4-374.8 392.4l-285 296.7-437.3-253.8c-240.1-138.6-439.2-259.6-443.1-269.4s60.5-242.1 140.6-517.3c82-275.3 148.4-511.5 148.4-525.1 0-33.2-296.7-326-329.9-326-13.7 0-253.8 66.4-533 148.4-277.2 82-509.5 144.5-513.4 140.6-5.9-3.9-123-205-263.5-447.1l-254-437.4 113.2-107.4c60.5-58.6 242.1-232.3 400.2-384.6l288.9-279.2-54.7-224.5-54.6-224.5-68.3-19.5c-37.1-9.8-251.8-62.5-478.3-117.1-226.5-54.7-443.2-107.4-482.2-119.1l-74.2-19.5v-513.5-513.4l548.6-134.7c462.7-113.2 552.5-140.6 566.1-173.8 7.8-21.5 37.1-117.1 64.4-214.7l50.8-175.7-411.9-400.2-410-400.2 247.9-429.5c134.7-236.2 253.8-435.3 259.6-445.1 7.8-7.8 255.7 56.6 548.6 142.5 294.8 85.9 544.7 156.2 556.4 156.2s83.9-64.4 162-142.5l140.6-142.5-156.2-529c-85.9-290.9-156.2-540.8-156.2-556.4 0-21.5 669.6-427.5 845.3-511.5 31.2-17.6 91.8 37.1 441.2 398.2l404.1 417.8 164-44.9c91.8-25.4 183.5-52.7 205-60.5 33.2-11.7 60.5-101.5 175.7-574l136.7-558.3h517.3 519.3l134.7 552.5c74.2 302.6 140.6 556.4 146.4 564.2s99.6 37.1 208.9 66.4l199.1 50.8 269.4-281.1c148.4-152.3 326-337.7 394.3-410 68.3-74.2 134.7-132.8 144.5-132.8 19.5 0 802.4 449 855.1 492 29.3 23.4 19.5 74.2-128.8 572l-162 546.6 138.6 140.6c76.1 78.1 150.3 142.5 164 142.5s263.5-70.3 556.4-156.2 536.9-150.3 544.6-140.6c7.8 7.8 126.9 207 263.5 443.2l247.9 429.5-410 400.2-410 400.2 60.5 212.8 60.5 214.7 552.5 134.7 550.6 134.7v515.4c0 283.1-1.9 515.4-3.9 515.4-3.9 2-247.9 60.5-542.7 134.7-499.8 123-538.8 134.7-550.5 179.6-7.8 25.4-37.1 126.9-62.5 222.5l-48.8 175.7 402.2 392.4 404.1 390.4-242.1 419.7c-132.8 230.4-251.8 429.5-263.6 443.1-19.5 21.5-115.2 0-529-121-279.2-82-519.3-146.4-534.9-146.4-15.6 2-97.6 74.2-179.6 162l-150.3 158.1 154.2 527.1c85.9 290.9 148.4 529 140.6 532.9s-206.9 119.1-443.2 257.7l-429.5 251.8-380.7-392.4-382.6-392.4-230.4 60.5c-126.9 33.2-234.3 64.4-238.2 68.3-5.9 5.9-206.9 806.3-251.8 1005.4l-9.8 43h-517.3c-283 .1-519.2-5.7-523.1-13.5zm1085.4-3959.1c1132.3-788.7 1202.6-841.4 1169.4-870.7-44.9-42.9-2735-2047.8-2746.7-2047.8-5.8 0-9.8 905.8-9.8 2010.8v2012.7l191.3-132.8c103.4-72.2 732-509.5 1395.8-972.2z" fill="#87909c" transform="matrix(.1 0 0 -.1 0 511)"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22.1 14.3c-.1 0-.1 0 0 0-.1 0-.1 0-.2 0s-.3 0-.4 0-.1 0-.2 0c-.4 0-.8-.1-1.1-.2-.1-.1-.2-.1-.2-.2l-.3-.1c.1-.9.1-1.9-.1-2.8-.3-1.1-.6-2-1.2-2.8l.2-.2c0-.1 0-.2.1-.3.3-.3.6-.4.9-.7.1 0 .1-.1.2-.1.1-.1.2-.1.3-.2 0 0 .1 0 .1-.1.3-.2.3-.6.1-.9-.1-.1-.3-.2-.5-.2s-.3.1-.4.2-.1.1-.1.1c-.1.1-.2.2-.3.3 0 0-.1.1-.1.1-.3.3-.5.5-.8.7 0 .1 0 .1-.1.1h-.1l-.2.2c-.3-.3-.5-.5-.8-.8-1.2-.9-2.7-1.5-4.2-1.7v-.3c-.1-.1-.1-.1-.2-.3 0-.3 0-.7.1-1.1 0-.1 0-.1 0-.2s0-.2.1-.4v-.1c0-.4-.3-.7-.6-.7-.2 0-.3.1-.4.2s-.2.3-.2.5v.1c0 .1 0 .3.1.4v.2c0 .4.1.8.1 1.1 0 .1-.1.2-.2.3v.3c-.4 0-.7.1-1.1.2-1.8.3-3.1 1.1-4.2 2.2l-.2-.2h-.1c-.1 0-.1 0-.2-.1-.3-.1-.6-.3-.8-.6s-.1-.1-.1-.1c-.2-.2-.2-.3-.3-.4 0 0-.1 0-.1-.1-.2-.1-.4-.1-.5-.1-.2 0-.4.1-.5.2-.2.2-.1.6.2.9s.1.1.1.1c.1.1.2.1.3.2.1 0 .1.1.2.1.4.2.7.4.9.6.1.1.1.2.1.3l.2.2c0 .1-.1.1-.1.2-1 1.6-1.4 3.5-1.1 5.3l-.3.1c0 .1-.1.2-.2.2-.3.1-.7.2-1.1.2-.1 0-.1 0-.2 0s-.2 0-.4 0h-.1s0 0-.1 0c-.4.1-.6.4-.5.7s.3.5.6.5h.2.1c.1 0 .2-.1.4-.1.1 0 .1-.1.2-.1.4-.1.7-.3 1-.3.1 0 .2.1.3.1h.3c.5 1.5 1.4 2.8 2.6 3.8.3.2.6.4.9.6l-.1.3c0 .1.1.2 0 .3-.1.3-.3.6-.5.9 0 .1-.1.1-.1.2-.1.1-.1.2-.2.3 0 0 0 .1-.1.1-.2.3 0 .7.3.9.1 0 .2.1.2.1.2 0 .5-.2.6-.4s0-.1.1-.1c.1-.1.1-.2.1-.4 0-.1 0-.1.1-.2.1-.4.2-.7.4-1 .2-.1.3-.1.3-.2l.1-.3c.9.3 1.8.5 2.8.5.6 0 1.2-.1 1.7-.2.4-.1.7-.2 1-.3l.1.2c.1 0 .2.1.3.2.2.3.3.6.4 1 0 .1 0 .1.1.2 0 .1.1.2.1.4 0 0 0 .1.1.1.1.2.4.4.6.4.1 0 .2 0 .2-.1.1-.1.3-.2.3-.4s0-.3 0-.5 0-.1-.1-.1c-.1-.1-.1-.2-.2-.3 0-.1-.1-.1-.1-.2-.2-.3-.4-.6-.5-.9 0-.1 0-.2 0-.3l.1-.2c1.1-.6 2-1.5 2.6-2.6.4-.6.6-1.2.8-1.8h.2c.1 0 .1-.1.3-.1.3 0 .7.2 1 .3.1 0 .1.1.2.1.1.1.2.1.4.1h.1.1.2c.3 0 .6-.2.6-.5.1-.1-.1-.4-.4-.5zm-9.3-1-.9.4-.9-.4-.2-.9.6-.8h1l.6.8zm5.2-2.1c.2.7.2 1.4.1 2l-3.1-.9c-.3-.1-.4-.4-.4-.6 0-.1.1-.2.1-.2l2.4-2.2c.5.6.7 1.2.9 1.9zm-1.7-3.1-2.6 1.9c-.2.1-.5.1-.7-.1-.1-.1-.1-.1-.1-.2l-.2-3.3c1.4.1 2.6.7 3.6 1.7zm-5.8-1.7c.2 0 .4-.1.6-.1l-.2 3.2c0 .3-.2.5-.5.5-.1 0-.2 0-.2-.1l-2.7-1.8c.8-.8 1.8-1.4 3-1.7zm-4 2.9 2.4 2.1c.2.2.2.5.1.7-.1.1-.1.1-.2.2l-3.1.9c-.2-1.3.1-2.7.8-3.9zm-.5 5.4 3.2-.5c.3 0 .5.2.6.4v.3l-1.2 2.9c-1.2-.6-2.1-1.8-2.6-3.1zm7.3 4c-.5.1-.9.2-1.4.2-.7 0-1.4-.1-2-.3l1.6-2.9c.2-.2.4-.3.6-.1.1.1.2.1.2.2l1.5 2.8c-.1 0-.3.1-.5.1zm3.9-2.8c-.5.8-1.2 1.4-1.9 1.9l-1.3-3c-.1-.2 0-.5.3-.6.1 0 .2-.1.3-.1l3.2.5c-.1.5-.3.9-.6 1.3z"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 497.43 228.97">
|
||||||
|
<defs><style>.cls-1{fill:#3f90ce;}</style></defs>
|
||||||
|
<title>Lens logo</title>
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M0,0H12.25V170H110v11.64H0Z"/>
|
||||||
|
<path class="cls-1" d="M138.75,167.24Q122.82,148,122.82,116.39t15.93-50.84q15.93-19,42.27-19T223.29,64q15.92,17.46,15.93,46.55v5.82H135.08q0,26.65,12.55,42.58T181,174.9a50.14,50.14,0,0,0,28.18-8.27A44.23,44.23,0,0,0,227,144.27h12.25q-3.08,18.07-19.61,30T181,186.23Q154.68,186.23,138.75,167.24ZM227,104.75v-4.59a46.49,46.49,0,0,0-14.71-30.63A45.05,45.05,0,0,0,181,57.28a43.4,43.4,0,0,0-30.94,12.56,47.58,47.58,0,0,0-15,31.54v3.37Z"/>
|
||||||
|
<path class="cls-1" d="M268,181.64V51.15h12.25V73.21a41.83,41.83,0,0,1,16.85-18.38,46.6,46.6,0,0,1,25.12-7q19.29,0,32.77,12.56Q368.79,73.21,368.78,91v90.67H356.53V91a30.37,30.37,0,0,0-10.11-23,34.12,34.12,0,0,0-24.19-9.5A40.35,40.35,0,0,0,295,68.92a45.21,45.21,0,0,0-14.7,26.65v86.07Z"/>
|
||||||
|
<path class="cls-1" d="M409.83,172.75Q395.12,160.51,395.12,143h11.34q0,13.17,11.33,22.67,11.32,9.18,27.26,9.19,18.38,0,29.71-8.27a27,27,0,0,0,11-22.36q0-10.41-11.64-17.77-11.64-7-31.24-8.88-20.84-1.84-33.08-11.64-12.57-9.8-12.56-24.2,0-16.23,12.56-25.11t35.22-8.89q21.75,0,34.61,9.5,13.17,9.5,13.17,25.42H481.19A28.06,28.06,0,0,0,469.55,64q-9.49-6.73-24.5-6.74-16.55,0-26.34,6.74t-9.8,17.76q0,10.43,11.94,17.77,11.64,7,31.25,8.88,20.5,1.84,33.08,12.25,12.24,10.42,12.25,26,0,17.46-14.4,27.87Q468.95,185,445.05,185,424.22,185,409.83,172.75Z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.2 KiB |
@ -0,0 +1,4 @@
|
|||||||
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<defs><style>.cls-1{fill:none!important;}</style></defs>
|
||||||
|
<rect class="cls-1" width="512" height="512"/><path d="M193.6,220,308.08,21.76A247.33,247.33,0,0,0,256,16,239.62,239.62,0,0,0,104.32,70l87.84,152.4Z"/><path d="M485,184A240.6,240.6,0,0,0,341,31.84L253.12,184Z"/><path d="M491.2,208H311.44l7,12L432.64,418A237.85,237.85,0,0,0,496,256,243,243,0,0,0,491.2,208Z"/><path d="M173,256,79.36,94C40.24,136.72,16,193.36,16,256a243,243,0,0,0,4.8,48H200.56Z"/><path d="M27,328A240.6,240.6,0,0,0,171,480.16L258.88,328Z"/><path d="M297.52,328l-93.6,162.24A247.33,247.33,0,0,0,256,496a239.62,239.62,0,0,0,151.68-54L319.84,289.6Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 730 B |
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 14.4 14.4" viewBox="0 0 14.4 14.4" xmlns="http://www.w3.org/2000/svg"><path d="m7.2 14.4c-4 0-7.2-3.2-7.2-7.2 0-2.1.9-4.1 2.5-5.5.1-.1.2-.1.3 0l1.1 1.1s.1.1.1.1c0 .1 0 .1-.1.1-1.2 1-1.9 2.5-1.9 4.1 0 2.9 2.4 5.2 5.2 5.2 2.9 0 5.2-2.4 5.2-5.2 0-1.6-.7-3.1-1.9-4.1 0 0-.1-.1-.1-.1 0-.1 0-.1.1-.1l1.1-1.1c.1-.1.2-.1.3 0 1.6 1.4 2.5 3.4 2.5 5.5 0 3.9-3.3 7.2-7.2 7.2zm.8-6.2h-1.6c-.1 0-.2-.1-.2-.2v-7.8c0-.1.1-.2.2-.2h1.6c.1 0 .2.1.2.2v7.8c0 .1-.1.2-.2.2z" fill="#707275"/></svg>
|
||||||
|
After Width: | Height: | Size: 507 B |
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.7 4v16h6.7v-16zm3.3 13.3c-.3 0-.6-.3-.6-.6s.3-.6.6-.6.6.3.6.6-.3.6-.6.6zm2-6.8h-4v-1.2h4zm0-2.4h-4v-1.2h4z"/><path d="m16.6 5.1v13.8h6.2v-13.8zm2.9 11.2c-.3 0-.6-.3-.6-.6s.3-.6.6-.6.6.3.6.6-.1.6-.6.6zm1.7-4.9h-3.2v-1.3h3.2zm0-2.4h-3.2v-1.3h3.2z"/><path d="m1.2 5.1v13.8h6.2v-13.8zm3.3 11.2c-.3 0-.6-.3-.6-.6s.3-.7.6-.7.6.3.6.6-.3.7-.6.7zm1.5-4.9h-3.2v-1.3h3.2zm0-2.4h-3.2v-1.3h3.2z"/></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,30 @@
|
|||||||
|
<svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="notice.svg" inkscape:version="1.0 (4035a4f, 2020-05-01)" id="notice" version="1.1" viewBox="0 0 135.46666 135.46666" height="512" width="512">
|
||||||
|
<defs id="defs2">
|
||||||
|
<rect id="rect2785" height="134.1693" width="135.23837" y="0.26726951" x="-0.53453903" />
|
||||||
|
<linearGradient osb:paint="solid" id="linearGradient837">
|
||||||
|
<stop id="stop835" offset="0" style="stop-color:#000000;stop-opacity:1;" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview inkscape:window-maximized="0" inkscape:window-y="0" inkscape:window-x="0" inkscape:window-height="1080" inkscape:window-width="1920" inkscape:pagecheckerboard="true" units="px" showgrid="false" inkscape:document-rotation="0" inkscape:current-layer="layer1" inkscape:document-units="px" inkscape:cy="263.00246" inkscape:cx="240.74335" inkscape:zoom="2.0359339" inkscape:pageshadow="2" inkscape:pageopacity="0.0" borderopacity="1.0" bordercolor="#666666" pagecolor="#ffffff" id="base" />
|
||||||
|
<metadata id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
|
||||||
|
<ellipse ry="59.764721" rx="59.764713" cy="67.73333" cx="67.733345" id="path10" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:15.9372;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
<path id="path2807" d="M 58.707956,29.522524 H 76.674473 L 76.739452,43.330427 73.23062,71.076192 62.054343,71.043701 58.740444,43.427894 Z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||||
|
<rect y="83.204803" x="59.292759" height="14.815064" width="16.861885" id="rect2809" style="fill:#000000;fill-opacity:1;stroke:none;" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" /></svg>
|
||||||
|
After Width: | Height: | Size: 418 B |
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 193.826 193.826" viewBox="0 0 193.826 193.826" xmlns="http://www.w3.org/2000/svg"><path d="m191.495 55.511-54.046-54.046c-1.951-1.953-5.119-1.953-7.07 0l-.229.229c-3.314 3.313-5.14 7.72-5.14 12.406 0 3.019.767 5.916 2.192 8.485l-56.55 48.533c-4.328-3.868-9.852-5.985-15.703-5.985-6.305 0-12.232 2.455-16.689 6.913l-.339.339c-1.953 1.952-1.953 5.118 0 7.07l32.378 32.378-31.534 31.533c-.631.649-15.557 16.03-25.37 28.27-9.345 11.653-11.193 13.788-11.289 13.898-1.735 1.976-1.639 4.956.218 6.822.973.977 2.256 1.471 3.543 1.471 1.173 0 2.349-.41 3.295-1.237.083-.072 2.169-1.885 13.898-11.289 12.238-9.813 27.619-24.74 28.318-25.421l31.483-31.483 30.644 30.644c.976.977 2.256 1.465 3.535 1.465s2.56-.488 3.535-1.465l.339-.339c4.458-4.457 6.913-10.385 6.913-16.689 0-5.851-2.118-11.375-5.985-15.703l48.533-56.55c2.569 1.425 5.466 2.192 8.485 2.192 4.687 0 9.093-1.825 12.406-5.14l.229-.229c1.953-1.954 1.953-5.12 0-7.072z"/></svg>
|
||||||
|
After Width: | Height: | Size: 959 B |
@ -0,0 +1,29 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="white">
|
||||||
|
<circle cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
<circle transform="rotate(45 16 16)" cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
<circle transform="rotate(90 16 16)" cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
<circle transform="rotate(135 16 16)" cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
<circle transform="rotate(225 16 16)" cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
<circle transform="rotate(270 16 16)" cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
<circle transform="rotate(315 16 16)" cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
|
||||||
|
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
|
||||||
|
</circle>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<title>ssh</title>
|
||||||
|
<path d="M19,3H5A2,2,0,0,0,3,5V19a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2V5a2,2,0,0,0-2-2M10.2,13.3,6.7,16.8,5.3,15.4l3.5-3.5L5.2,8.3,6.6,6.9l3.5,3.5,1.4,1.4ZM19,17H12V15h7Z" transform="translate(0 0)" fill="#87909c"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 324 B |
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.8 13.3c-.3 0-.5 0-.8 0s-.6 0-.8 0c-2.3-.1-4.1-.4-5.4-.9-.6-.2-1.2-.5-1.6-.7v2.2.2.2.4c.9.9 3.8 1.7 7.8 1.7s6.9-.9 7.8-1.8v-.4-.2-.2-2.2c-.4.3-1 .5-1.6.7-1.3.6-3.1.9-5.4 1z"/><path d="m4.2 7.6v2.2.2.2.4c.8.9 3.5 1.7 6.9 1.8h.1.3.4.4.3.1c3.6-.1 6.1-.9 6.9-1.8v-.4-.3-.1-2.2c-1.5 1.1-4.7 1.6-7.8 1.6s-6.1-.6-7.6-1.6z"/><path d="m19.8 5.6c-.4-1.4-3.1-2.7-7.8-2.7s-7.4 1.3-7.8 2.7v.2.2.6c.9.8 3.9 1.7 7.8 1.7s6.9-.9 7.8-1.8v-.6z"/><path d="m4.2 15.7v2.6.1c.4 1.5 3.6 2.7 7.8 2.7 4 0 7.4-1.1 7.8-2.7 0 0 0-.1 0-.2v-2.6c-1.3.9-3.9 1.6-7.8 1.6-3.8.1-6.5-.6-7.8-1.5z"/></svg>
|
||||||
|
After Width: | Height: | Size: 673 B |
@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 18.1 18.1" style="enable-background:new 0 0 18.1 18.1;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#87909C;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M16,0H2C0.9,0,0,0.9,0,2v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V2C18,0.9,17.1,0,16,0 M7.2,10.3l-3.5,3.5
|
||||||
|
l-1.4-1.4l3.5-3.5L2.2,5.3l1.4-1.4l3.5,3.5l1.4,1.4L7.2,10.3z M16,14H9v-2h7V14z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 619 B |
@ -0,0 +1 @@
|
|||||||
|
<svg enable-background="new 0 0 351 346" viewBox="0 0 351 346" xmlns="http://www.w3.org/2000/svg"><g fill="#58606b"><path d="m43.8 296.9c0-2.8 0-.8 0 0z"/><path d="m307.4 299.1c0-.8 0-5.4 0 0z"/><path d="m307.1 293.5c-1.3-81.6-11.9-104.8-93.5-119.5 0 0-11.5 14.7-38.2 14.7s-38.2-14.7-38.2-14.7c-80.6 14.6-91.9 37.5-93.4 116.9-.1 6.5-.3 6.8-.3 6.1v8.6s19.4 39.1 131.9 39.1c112.4 0 131.9-39.1 131.9-39.1 0-2.9 0-4.9 0-6.3.1.4-.1-.7-.2-5.8z"/><path d="m175.3 1.4-72.4 42v82.8l72.4 42.9 73.3-42.9v-82.8z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 512 B |
@ -0,0 +1 @@
|
|||||||
|
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#879199"><path d="m13.27 10.74a3.37 3.37 0 0 0 1.45.32 3.41 3.41 0 1 0 0-6.83 3.47 3.47 0 0 0 -1.45.32 4.9 4.9 0 0 1 .73 1.45 5 5 0 0 1 0 3.29 4.82 4.82 0 0 1 -.78 1.45z"/><path d="m14.12 12.72a8.05 8.05 0 0 1 1.63 1.72 7.82 7.82 0 0 1 1.37 3.69 7.73 7.73 0 0 1 0 .82 2.45 2.45 0 0 1 -.14.82h3.13a.82.82 0 0 0 .82-.82 6.26 6.26 0 0 0 -6.25-6.25h-.6z"/><path d="m9.28 11.06a3.42 3.42 0 0 0 2.72-1.35 3.38 3.38 0 0 0 .69-2.06 3.41 3.41 0 1 0 -3.41 3.41z"/><path d="m3.85 19.76h10.87a.82.82 0 0 0 .82-.82 6.45 6.45 0 0 0 -.05-.82 6.24 6.24 0 0 0 -1.85-3.67 6.43 6.43 0 0 0 -1.64-1.14 6.25 6.25 0 0 0 -9 5.63.81.81 0 0 0 .82.82z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 729 B |
@ -0,0 +1,46 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 256 249" style="enable-background:new 0 0 256 249;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M247.7,151.3L247.7,151.3L247.7,151.3C247.4,151.3,247.4,151.3,247.7,151.3h-0.2c-0.2,0-0.5,0-0.5-0.2
|
||||||
|
c-0.5,0-1-0.2-1.4-0.2c-1.7-0.2-3.1-0.5-4.5-0.5c-0.7,0-1.4,0-2.4-0.2h-0.2c-5-0.5-9-1-12.8-2.1c-1.7-0.7-2.1-1.7-2.6-2.6
|
||||||
|
c0-0.2-0.2-0.2-0.2-0.5l0,0l-3.1-1c1.4-10.9,1-22.3-1.7-33.5c-2.6-11.2-7.1-21.6-13.3-31.1l2.4-2.1v-0.5c0-1.2,0.2-2.4,1.2-3.6
|
||||||
|
c2.9-2.6,6.4-4.8,10.7-7.4l0,0c0.7-0.5,1.4-0.7,2.1-1.2c1.4-0.7,2.6-1.4,4-2.4c0.2-0.2,0.7-0.5,1.2-1c0.2-0.2,0.5-0.2,0.5-0.5l0,0
|
||||||
|
c3.3-2.9,4-7.6,1.7-10.7c-1.2-1.7-3.3-2.6-5.5-2.6c-1.9,0-3.6,0.7-5.2,1.9l0,0l0,0c-0.2,0.2-0.2,0.2-0.5,0.5c-0.5,0.2-0.7,0.7-1.2,1
|
||||||
|
c-1.2,1.2-2.1,2.1-3.1,3.3c-0.5,0.5-1,1.2-1.7,1.7l0,0c-3.3,3.6-6.4,6.4-9.5,8.6c-0.7,0.5-1.4,0.7-2.1,0.7c-0.5,0-1,0-1.4-0.2h-0.5
|
||||||
|
l0,0l-2.9,1.9c-3.1-3.3-6.4-6.2-9.7-9c-14.3-11.2-31.6-18.1-49.6-19.7l-0.2-3.1c-0.2-0.2-0.2-0.2-0.5-0.5c-0.7-0.7-1.7-1.4-1.9-3.1
|
||||||
|
c-0.2-3.8,0.2-8.1,0.7-12.8v-0.2c0-0.7,0.2-1.7,0.5-2.4c0.2-1.4,0.5-2.9,0.7-4.5V10V9.3l0,0l0,0c0-4.3-3.3-7.8-7.4-7.8
|
||||||
|
c-1.9,0-3.8,1-5.2,2.4c-1.4,1.4-2.1,3.3-2.1,5.5l0,0l0,0v0.5v1.4c0,1.7,0.2,3.1,0.7,4.5c0.2,0.7,0.2,1.4,0.5,2.4v0.2
|
||||||
|
c0.5,4.8,1.2,9,0.7,12.8c-0.2,1.7-1.2,2.4-1.9,3.1c-0.2,0.2-0.2,0.2-0.5,0.5l0,0l-0.2,3.1c-4.3,0.5-8.6,1-12.8,1.9
|
||||||
|
c-18.3,4-34.4,13.3-47,26.6l-2.4-1.7h-0.5c-0.5,0-1,0.2-1.4,0.2c-0.7,0-1.4-0.2-2.1-0.7c-3.1-2.1-6.2-5.2-9.5-8.8l0,0
|
||||||
|
c-0.5-0.5-1-1.2-1.7-1.7c-1-1.2-1.9-2.1-3.1-3.3c-0.2-0.2-0.7-0.5-1.2-1c-0.2-0.2-0.5-0.2-0.5-0.5l0,0c-1.4-1.2-3.3-1.9-5.2-1.9
|
||||||
|
c-2.1,0-4.3,1-5.5,2.6c-2.4,3.1-1.7,7.8,1.7,10.7l0,0l0,0c0.2,0,0.2,0.2,0.5,0.2c0.5,0.2,0.7,0.7,1.2,1c1.4,1,2.6,1.7,4,2.4
|
||||||
|
c0.7,0.2,1.4,0.7,2.1,1.2l0,0c4.3,2.6,7.8,4.8,10.7,7.4c1.2,1.2,1.2,2.4,1.2,3.6v0.5l0,0l2.4,2.1c-0.5,0.7-1,1.2-1.2,1.9
|
||||||
|
c-11.9,18.8-16.4,40.9-13.3,62.7l-3.1,1c0,0.2-0.2,0.2-0.2,0.5c-0.5,1-1.2,1.9-2.6,2.6c-3.6,1.2-7.8,1.7-12.8,2.1h-0.2
|
||||||
|
c-0.7,0-1.7,0-2.4,0.2c-1.4,0-2.9,0.2-4.5,0.5c-0.5,0-1,0.2-1.4,0.2c-0.2,0-0.5,0-0.7,0.2l0,0l0,0c-4.3,1-6.9,5-6.2,8.8
|
||||||
|
c0.7,3.3,3.8,5.5,7.6,5.5c0.7,0,1.2,0,1.9-0.2l0,0l0,0c0.2,0,0.5,0,0.5-0.2c0.5,0,1-0.2,1.4-0.2c1.7-0.5,2.9-1,4.3-1.7
|
||||||
|
c0.7-0.2,1.4-0.7,2.1-1h0.2c4.5-1.7,8.6-3.1,12.4-3.6h0.5c1.4,0,2.4,0.7,3.1,1.2c0.2,0,0.2,0.2,0.5,0.2l0,0l3.3-0.5
|
||||||
|
c5.7,17.6,16.6,33.3,31.1,44.7c3.3,2.6,6.7,4.8,10.2,6.9l-1.4,3.1c0,0.2,0.2,0.2,0.2,0.5c0.5,1,1,2.1,0.5,3.8
|
||||||
|
c-1.4,3.6-3.6,7.1-6.2,11.2v0.2c-0.5,0.7-1,1.2-1.4,1.9c-1,1.2-1.7,2.4-2.6,3.8c-0.2,0.2-0.5,0.7-0.7,1.2c0,0.2-0.2,0.5-0.2,0.5l0,0
|
||||||
|
l0,0c-1.9,4-0.5,8.6,3.1,10.2c1,0.5,1.9,0.7,2.9,0.7c2.9,0,5.7-1.9,7.1-4.5l0,0l0,0c0-0.2,0.2-0.5,0.2-0.5c0.2-0.5,0.5-1,0.7-1.2
|
||||||
|
c0.7-1.7,1-2.9,1.4-4.3c0.2-0.7,0.5-1.4,0.7-2.1l0,0c1.7-4.8,2.9-8.6,5-11.9c1-1.4,2.1-1.7,3.1-2.1c0.2,0,0.2,0,0.5-0.2l0,0l1.7-3.1
|
||||||
|
c10.5,4,21.9,6.2,33.3,6.2c6.9,0,14-0.7,20.7-2.4c4.3-1,8.3-2.1,12.4-3.6l1.4,2.6c0.2,0,0.2,0,0.5,0.2c1.2,0.2,2.1,0.7,3.1,2.1
|
||||||
|
c1.9,3.3,3.3,7.4,5,11.9v0.2c0.2,0.7,0.5,1.4,0.7,2.1c0.5,1.4,0.7,2.9,1.4,4.3c0.2,0.5,0.5,0.7,0.7,1.2c0,0.2,0.2,0.5,0.2,0.5l0,0
|
||||||
|
l0,0c1.4,2.9,4.3,4.5,7.1,4.5c1,0,1.9-0.2,2.9-0.7c1.7-1,3.1-2.4,3.6-4.3s0.5-4-0.5-5.9l0,0l0,0c0-0.2-0.2-0.2-0.2-0.5
|
||||||
|
c-0.2-0.5-0.5-1-0.7-1.2c-0.7-1.4-1.7-2.6-2.6-3.8c-0.5-0.7-1-1.2-1.4-1.9V229c-2.6-4-5-7.6-6.2-11.2c-0.5-1.7,0-2.6,0.2-3.8
|
||||||
|
c0-0.2,0.2-0.2,0.2-0.5l0,0l-1.2-2.9c12.6-7.4,23.3-17.8,31.4-30.6c4.3-6.7,7.6-14,10-21.4l2.9,0.5c0.2,0,0.2-0.2,0.5-0.2
|
||||||
|
c1-0.5,1.7-1.2,3.1-1.2h0.5c3.8,0.5,7.8,1.9,12.4,3.6h0.2c0.7,0.2,1.4,0.7,2.1,1c1.4,0.7,2.6,1.2,4.3,1.7c0.5,0,1,0.2,1.4,0.2
|
||||||
|
c0.2,0,0.5,0,0.7,0.2l0,0c0.7,0.2,1.2,0.2,1.9,0.2c3.6,0,6.7-2.4,7.6-5.5C254.6,156.3,251.9,152.5,247.7,151.3L247.7,151.3z
|
||||||
|
M137.7,139.7l-10.5,5l-10.5-5l-2.6-11.2l7.1-9h11.6l7.1,9L137.7,139.7L137.7,139.7z M199.7,115c1.9,8.1,2.4,16.2,1.7,24L165,128.5
|
||||||
|
c-3.3-1-5.2-4.3-4.5-7.6c0.2-1,0.7-1.9,1.4-2.6l28.7-25.9C194.7,99.1,197.8,106.7,199.7,115L199.7,115z M179.3,78.2l-31.1,22.1
|
||||||
|
c-2.6,1.7-6.2,1.2-8.3-1.4c-0.7-0.7-1-1.7-1.2-2.6l-2.1-38.7C152.9,59.4,167.8,66.8,179.3,78.2L179.3,78.2z M110.4,58.7
|
||||||
|
c2.6-0.5,5-1,7.6-1.4l-2.1,38c-0.2,3.3-2.9,6.2-6.4,6.2c-1,0-2.1-0.2-2.9-0.7L75,78.2C84.7,68.4,96.8,61.8,110.4,58.7L110.4,58.7z
|
||||||
|
M63.6,92.4l28.3,25.2c2.6,2.1,2.9,6.2,0.7,8.8c-0.7,1-1.7,1.7-2.9,1.9L52.9,139C51.4,122.8,55,106.4,63.6,92.4L63.6,92.4z
|
||||||
|
M57.1,156.8l37.8-6.4c3.1-0.2,5.9,1.9,6.7,5c0.2,1.4,0.2,2.6-0.2,3.8l0,0l-14.5,34.9C73.5,185.6,62.8,172.5,57.1,156.8L57.1,156.8z
|
||||||
|
M143.9,204.1c-5.5,1.2-10.9,1.9-16.6,1.9c-8.3,0-16.4-1.4-24-3.8l18.8-34c1.9-2.1,5-3.1,7.6-1.7c1.2,0.7,2.1,1.7,2.9,2.6l0,0
|
||||||
|
l18.3,33C148.6,202.9,146.2,203.4,143.9,204.1L143.9,204.1z M190.2,171.1c-5.9,9.5-13.8,17.1-22.8,23l-15-35.9
|
||||||
|
c-0.7-2.9,0.5-5.9,3.3-7.4c1-0.5,2.1-0.7,3.3-0.7l38,6.4C195.6,161.8,193.3,166.5,190.2,171.1L190.2,171.1z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,2 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="m12 7.47 4.25-2.47-4.25-2.44-4.25 2.44z"/><path d="m11.66 8.06-4.25-2.46v4.91l4.25 2.49z"/><path d="m12.34 8.06v4.94l4.25-2.45v-4.95z"/><path d="m16.93 15.94 4.26-2.45-4.26-2.49-4.25 2.45z"/><path d="m16.59 16.53-4.25-2.45v4.92l4.25 2.46z"/><path d="m17.26 16.53v4.91l4.26-2.44v-4.93z"/><path d="m7.07 15.94 4.25-2.45-4.25-2.49-4.25 2.49z"/><path d="m6.74 16.53-4.26-2.46v4.93l4.26 2.46z"/><path d="m7.41 16.53v4.91l4.25-2.44v-4.93z"/></svg>
|
||||||
|
After Width: | Height: | Size: 534 B |
@ -0,0 +1,43 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import type { editor } from "monaco-editor";
|
||||||
|
import React from "react";
|
||||||
|
import type { MonacoEditorProps, MonacoEditorRef } from "../monaco-editor";
|
||||||
|
import { monacoValidators } from "../monaco-validators";
|
||||||
|
|
||||||
|
class FakeMonacoEditor extends React.Component<MonacoEditorProps> {
|
||||||
|
render() {
|
||||||
|
const { id, value, onChange, onError, language = "yaml" } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
data-testid={`monaco-editor-for-${id}`}
|
||||||
|
|
||||||
|
onChange={(event) => {
|
||||||
|
const newValue = event.target.value;
|
||||||
|
|
||||||
|
onChange?.(
|
||||||
|
newValue,
|
||||||
|
{} as editor.IModelContentChangedEvent,
|
||||||
|
);
|
||||||
|
|
||||||
|
const validator = monacoValidators[language];
|
||||||
|
|
||||||
|
try {
|
||||||
|
validator(newValue);
|
||||||
|
} catch(e) {
|
||||||
|
onError?.(e);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MonacoEditor = React.forwardRef<
|
||||||
|
MonacoEditorRef,
|
||||||
|
MonacoEditorProps
|
||||||
|
>((props, ref) => <FakeMonacoEditor innerRef={ref} {...props} />);
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
|
|
||||||
|
const getEditorHeightFromLinesCountInjectable = getInjectable({
|
||||||
|
id: "get-editor-height-from-lines-number",
|
||||||
|
|
||||||
|
instantiate: () => {
|
||||||
|
return (linesCount: number) => {
|
||||||
|
if (typeof linesCount !== "number") {
|
||||||
|
throw new Error("linesNumber must be a number");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (linesCount < 10) {
|
||||||
|
return 90;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (linesCount < 20) {
|
||||||
|
return 180;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 360;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default getEditorHeightFromLinesCountInjectable;
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { createContainer } from "@ogre-tools/injectable";
|
||||||
|
import getEditorHeightFromLinesCountInjectable from "./get-editor-height-from-lines-number.injectable";
|
||||||
|
|
||||||
|
describe("get-editor-height-from-lines-number", () => {
|
||||||
|
let getEditorHeightFromLinesNumber: (linesCount: number) => number;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
const di = createContainer("some-container");
|
||||||
|
|
||||||
|
di.register(getEditorHeightFromLinesCountInjectable);
|
||||||
|
|
||||||
|
getEditorHeightFromLinesNumber = di.inject(getEditorHeightFromLinesCountInjectable);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("given linesCount is less than 10, when called, returns small number", () => {
|
||||||
|
const actual = getEditorHeightFromLinesNumber(9);
|
||||||
|
|
||||||
|
expect(actual).toBe(90);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("given linesCount is equal to 10, when called, returns medium number", () => {
|
||||||
|
const actual = getEditorHeightFromLinesNumber(10);
|
||||||
|
|
||||||
|
expect(actual).toBe(180);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("given linesCount is greater than 10 and less than 20, when called, returns medium number", () => {
|
||||||
|
const actual = getEditorHeightFromLinesNumber(19);
|
||||||
|
|
||||||
|
expect(actual).toBe(180);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("given linesCount is equal to 20, when called, returns large number", () => {
|
||||||
|
const actual = getEditorHeightFromLinesNumber(20);
|
||||||
|
|
||||||
|
expect(actual).toBe(360);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("given linesCount is greater than 20, when called, returns large number", () => {
|
||||||
|
const actual = getEditorHeightFromLinesNumber(21);
|
||||||
|
|
||||||
|
expect(actual).toBe(360);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./monaco-editor";
|
||||||
|
export * from "./monaco-validators";
|
||||||
|
export * from "./monaco-themes";
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.MonacoEditor {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
@ -0,0 +1,341 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// import styles from "./monaco-editor.module.scss";
|
||||||
|
import React from "react";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import type { IComputedValue } from "mobx";
|
||||||
|
import { action, computed, makeObservable, observable, reaction } from "mobx";
|
||||||
|
import { editor, Uri } from "monaco-editor";
|
||||||
|
import type { MonacoTheme } from "./monaco-themes";
|
||||||
|
import { type MonacoValidator, monacoValidators } from "./monaco-validators";
|
||||||
|
import { debounce, merge } from "lodash";
|
||||||
|
import { cssNames, disposer } from "@k8slens/utilities";
|
||||||
|
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||||
|
import getEditorHeightFromLinesCountInjectable from "./get-editor-height-from-lines-number.injectable";
|
||||||
|
import autoBindReact from "auto-bind/react";
|
||||||
|
import type { Logger, UserStore } from "../../injection-tokens";
|
||||||
|
import {
|
||||||
|
activeThemeInjectionToken,
|
||||||
|
loggerInjectionToken,
|
||||||
|
userStoreInjectionToken
|
||||||
|
} from "../../injection-tokens";
|
||||||
|
import type { LensTheme } from "../chart/lens-theme";
|
||||||
|
|
||||||
|
export type MonacoEditorId = string;
|
||||||
|
|
||||||
|
export interface MonacoEditorProps {
|
||||||
|
id?: MonacoEditorId; // associating editor's ID with created model.uri
|
||||||
|
className?: string;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
autoFocus?: boolean;
|
||||||
|
readOnly?: boolean;
|
||||||
|
theme?: MonacoTheme;
|
||||||
|
language?: "yaml" | "json"; // supported list of languages, configure in `webpack.renderer.ts`
|
||||||
|
options?: Partial<editor.IStandaloneEditorConstructionOptions>; // customize editor's initialization options
|
||||||
|
value: string;
|
||||||
|
onChange?(value: string, evt: editor.IModelContentChangedEvent): void; // catch latest value updates
|
||||||
|
onError?(error: unknown): void; // provide syntax validation error, etc.
|
||||||
|
onDidLayoutChange?(info: editor.EditorLayoutInfo): void;
|
||||||
|
onDidContentSizeChange?(evt: editor.IContentSizeChangedEvent): void;
|
||||||
|
onModelChange?(model: editor.ITextModel, prev?: editor.ITextModel): void;
|
||||||
|
innerRef?: React.ForwardedRef<MonacoEditorRef>;
|
||||||
|
setInitialHeight?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Dependencies {
|
||||||
|
userStore: UserStore;
|
||||||
|
activeTheme: IComputedValue<LensTheme>;
|
||||||
|
getEditorHeightFromLinesCount: (linesCount: number) => number;
|
||||||
|
logger: Logger;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createMonacoUri(id: MonacoEditorId): Uri {
|
||||||
|
return Uri.file(`/monaco-editor/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const monacoViewStates = new WeakMap<Uri, editor.ICodeEditorViewState>();
|
||||||
|
|
||||||
|
export interface MonacoEditorRef {
|
||||||
|
focus(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
class NonInjectedMonacoEditor extends React.Component<MonacoEditorProps & Dependencies> {
|
||||||
|
static defaultProps = {
|
||||||
|
language: "yaml" as const,
|
||||||
|
};
|
||||||
|
|
||||||
|
private staticId = `editor-id#${Math.round(1e7 * Math.random())}`;
|
||||||
|
private dispose = disposer();
|
||||||
|
|
||||||
|
@observable.ref containerElem: HTMLDivElement | null = null;
|
||||||
|
@observable.ref editor!: editor.IStandaloneCodeEditor;
|
||||||
|
@observable readonly dimensions: { width?: number; height?: number } = {};
|
||||||
|
@observable unmounting = false;
|
||||||
|
|
||||||
|
// TODO: investigate how to replace with "common/logger"
|
||||||
|
// currently leads for stucking UI forever & infinite loop.
|
||||||
|
// e.g. happens on tab change/create, maybe some other cases too.
|
||||||
|
private logger = console;
|
||||||
|
|
||||||
|
constructor(props: MonacoEditorProps & Dependencies) {
|
||||||
|
super(props);
|
||||||
|
makeObservable(this);
|
||||||
|
autoBindReact(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get id(): MonacoEditorId {
|
||||||
|
return this.props.id ?? this.staticId;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get theme() {
|
||||||
|
return this.props.theme ?? this.props.activeTheme.get().monacoTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get model(): editor.ITextModel {
|
||||||
|
const uri = createMonacoUri(this.id);
|
||||||
|
const model = editor.getModel(uri);
|
||||||
|
|
||||||
|
if (model) {
|
||||||
|
return model; // already exists
|
||||||
|
}
|
||||||
|
|
||||||
|
const { language, value: rawValue } = this.props;
|
||||||
|
const value = typeof rawValue === "string"
|
||||||
|
? rawValue
|
||||||
|
: "";
|
||||||
|
|
||||||
|
if (typeof rawValue !== "string") {
|
||||||
|
this.props.logger.error(`[MONACO-EDITOR]: Passed a non-string default value`, { rawValue });
|
||||||
|
}
|
||||||
|
|
||||||
|
return editor.createModel(value, language, uri);
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get options(): editor.IStandaloneEditorConstructionOptions {
|
||||||
|
return merge({},
|
||||||
|
this.props.userStore.editorConfiguration,
|
||||||
|
this.props.options,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed
|
||||||
|
private get logMetadata() {
|
||||||
|
return {
|
||||||
|
editorId: this.id,
|
||||||
|
model: this.model,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Monitor editor's dom container element box-size and sync with monaco's dimensions
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
private bindResizeObserver() {
|
||||||
|
const resizeObserver = new ResizeObserver(entries => {
|
||||||
|
for (const entry of entries) {
|
||||||
|
const { width, height } = entry.contentRect;
|
||||||
|
|
||||||
|
this.setDimensions(width, height);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const containerElem = this.editor.getContainerDomNode();
|
||||||
|
|
||||||
|
resizeObserver.observe(containerElem);
|
||||||
|
|
||||||
|
return () => resizeObserver.unobserve(containerElem);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onModelChange(model: editor.ITextModel, oldModel?: editor.ITextModel) {
|
||||||
|
this.logger.info("[MONACO]: model change", { model, oldModel }, this.logMetadata);
|
||||||
|
|
||||||
|
if (oldModel) {
|
||||||
|
this.saveViewState(oldModel);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.editor.setModel(model);
|
||||||
|
this.restoreViewState(model);
|
||||||
|
this.editor.layout();
|
||||||
|
this.editor.focus(); // keep focus in editor, e.g. when clicking between dock-tabs
|
||||||
|
this.props.onModelChange?.(model, oldModel);
|
||||||
|
this.validateLazy();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save current view-model state in the editor.
|
||||||
|
* This will allow restore cursor position, selected text, etc.
|
||||||
|
*/
|
||||||
|
protected saveViewState(model: editor.ITextModel) {
|
||||||
|
const viewState = this.editor?.saveViewState();
|
||||||
|
|
||||||
|
if (viewState) {
|
||||||
|
monacoViewStates.set(model.uri, viewState);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected restoreViewState(model: editor.ITextModel) {
|
||||||
|
const viewState = monacoViewStates.get(model.uri);
|
||||||
|
|
||||||
|
if (viewState) {
|
||||||
|
this.editor?.restoreViewState(viewState);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
try {
|
||||||
|
this.createEditor();
|
||||||
|
this.logger.info(`[MONACO]: editor did mount`, this.logMetadata);
|
||||||
|
} catch (error) {
|
||||||
|
this.logger.error(`[MONACO]: mounting failed: ${error}`, this.logMetadata);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.unmounting = true;
|
||||||
|
this.saveViewState(this.model);
|
||||||
|
|
||||||
|
if (this.editor) {
|
||||||
|
this.dispose();
|
||||||
|
this.editor.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
protected createEditor() {
|
||||||
|
if (!this.containerElem || this.editor || this.unmounting) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { language, readOnly, value: defaultValue } = this.props;
|
||||||
|
const { theme } = this;
|
||||||
|
|
||||||
|
this.editor = editor.create(this.containerElem, {
|
||||||
|
model: this.model,
|
||||||
|
detectIndentation: false, // allow `option.tabSize` to use custom number of spaces for [Tab]
|
||||||
|
value: defaultValue,
|
||||||
|
language,
|
||||||
|
theme,
|
||||||
|
readOnly,
|
||||||
|
...this.options,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.logger.info(`[MONACO]: editor created for language=${language}, theme=${theme}`, this.logMetadata);
|
||||||
|
this.validateLazy(); // validate initial value
|
||||||
|
this.restoreViewState(this.model); // restore previous state if any
|
||||||
|
|
||||||
|
if (this.props.autoFocus) {
|
||||||
|
this.editor.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDidLayoutChangeDisposer = this.editor.onDidLayoutChange(layoutInfo => {
|
||||||
|
this.props.onDidLayoutChange?.(layoutInfo);
|
||||||
|
});
|
||||||
|
|
||||||
|
const onValueChangeDisposer = this.editor.onDidChangeModelContent(event => {
|
||||||
|
const value = this.editor.getValue();
|
||||||
|
|
||||||
|
this.props.onChange?.(value, event);
|
||||||
|
this.validateLazy(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
const onContentSizeChangeDisposer = this.editor.onDidContentSizeChange((params) => {
|
||||||
|
this.props.onDidContentSizeChange?.(params);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.dispose.push(
|
||||||
|
reaction(() => this.model, this.onModelChange),
|
||||||
|
reaction(() => this.theme, theme => {
|
||||||
|
if (theme) {
|
||||||
|
editor.setTheme(theme);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
reaction(() => this.props.value, value => this.setValue(value)),
|
||||||
|
reaction(() => this.options, opts => this.editor.updateOptions(opts)),
|
||||||
|
|
||||||
|
() => onDidLayoutChangeDisposer.dispose(),
|
||||||
|
() => onValueChangeDisposer.dispose(),
|
||||||
|
() => onContentSizeChangeDisposer.dispose(),
|
||||||
|
this.bindResizeObserver(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
setDimensions(width: number, height: number) {
|
||||||
|
this.dimensions.width = width;
|
||||||
|
this.dimensions.height = height;
|
||||||
|
this.editor?.layout({ width, height });
|
||||||
|
}
|
||||||
|
|
||||||
|
setValue(value = ""): void {
|
||||||
|
if (value == this.getValue()) return;
|
||||||
|
|
||||||
|
this.editor.setValue(value);
|
||||||
|
this.validate(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue(opts?: { preserveBOM: boolean; lineEnding: string }): string {
|
||||||
|
return this.editor?.getValue(opts) ?? "";
|
||||||
|
}
|
||||||
|
|
||||||
|
focus() {
|
||||||
|
this.editor?.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
validate(value = this.getValue()) {
|
||||||
|
const validators: MonacoValidator[] = [
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
monacoValidators[this.props.language!], // parsing syntax check
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
for (const validate of validators) {
|
||||||
|
try {
|
||||||
|
validate(value);
|
||||||
|
} catch (error) {
|
||||||
|
this.props.onError?.(error); // emit error outside
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// avoid excessive validations during typing
|
||||||
|
validateLazy = debounce(this.validate, 250);
|
||||||
|
|
||||||
|
get initialHeight() {
|
||||||
|
return this.props.getEditorHeightFromLinesCount(this.model.getLineCount());
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { className, style } = this.props;
|
||||||
|
|
||||||
|
const css: React.CSSProperties = {
|
||||||
|
...style,
|
||||||
|
height: style?.height ?? this.initialHeight,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-test-id="monaco-editor"
|
||||||
|
// hack: missing: styles.MonacoEditor
|
||||||
|
className={cssNames(className)}
|
||||||
|
style={css}
|
||||||
|
ref={elem => this.containerElem = elem}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MonacoEditor = withInjectables<Dependencies, MonacoEditorProps, MonacoEditorRef>(
|
||||||
|
React.forwardRef<MonacoEditorRef, MonacoEditorProps & Dependencies>((props, ref) => <NonInjectedMonacoEditor innerRef={ref} {...props} />),
|
||||||
|
{
|
||||||
|
getProps: (di, props) => ({
|
||||||
|
...props,
|
||||||
|
userStore: di.inject(userStoreInjectionToken),
|
||||||
|
activeTheme: di.inject(activeThemeInjectionToken),
|
||||||
|
getEditorHeightFromLinesCount: di.inject(getEditorHeightFromLinesCountInjectable),
|
||||||
|
logger: di.inject(loggerInjectionToken),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
);
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Monaco editor themes customization
|
||||||
|
import { getInjectionToken } from "@ogre-tools/injectable";
|
||||||
|
import type { editor } from "monaco-editor";
|
||||||
|
|
||||||
|
export type MonacoTheme = "vs" | "vs-dark" | "hc-black" | MonacoCustomTheme;
|
||||||
|
export type MonacoCustomTheme = "clouds-midnight";
|
||||||
|
|
||||||
|
export interface MonacoThemeData extends editor.IStandaloneThemeData {
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const customMonacoThemeInjectionToken = getInjectionToken<MonacoThemeData>({
|
||||||
|
id: "custom-monaco-theme-token",
|
||||||
|
});
|
||||||
@ -0,0 +1,143 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { customMonacoThemeInjectionToken } from "../monaco-themes";
|
||||||
|
|
||||||
|
import { getInjectable } from "@ogre-tools/injectable";
|
||||||
|
|
||||||
|
const cloudsMidnightThemeInjectable = getInjectable({
|
||||||
|
id: "clouds-midnight-theme",
|
||||||
|
instantiate: () => ({
|
||||||
|
"name": "clouds-midnight",
|
||||||
|
"base": "vs-dark" as const,
|
||||||
|
"inherit": true,
|
||||||
|
"rules": [
|
||||||
|
{
|
||||||
|
"background": "191919",
|
||||||
|
"token": "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "3c403b",
|
||||||
|
"token": "comment",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "5d90cd",
|
||||||
|
"token": "string",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "46a609",
|
||||||
|
"token": "constant.numeric",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "39946a",
|
||||||
|
"token": "constant.language",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "927c5d",
|
||||||
|
"token": "keyword",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "927c5d",
|
||||||
|
"token": "support.constant.property-value",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "927c5d",
|
||||||
|
"token": "constant.other.color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "366f1a",
|
||||||
|
"token": "keyword.other.unit",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "a46763",
|
||||||
|
"token": "entity.other.attribute-name.html",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "4b4b4b",
|
||||||
|
"token": "keyword.operator",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "e92e2e",
|
||||||
|
"token": "storage",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "858585",
|
||||||
|
"token": "entity.other.inherited-class",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "606060",
|
||||||
|
"token": "entity.name.tag",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "a165ac",
|
||||||
|
"token": "constant.character.entity",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "a165ac",
|
||||||
|
"token": "support.class.js",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "606060",
|
||||||
|
"token": "entity.other.attribute-name",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "e92e2e",
|
||||||
|
"token": "meta.selector.css",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "e92e2e",
|
||||||
|
"token": "entity.name.tag.css",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "e92e2e",
|
||||||
|
"token": "entity.other.attribute-name.id.css",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "e92e2e",
|
||||||
|
"token": "entity.other.attribute-name.class.css",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "616161",
|
||||||
|
"token": "meta.property-name.css",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "e92e2e",
|
||||||
|
"token": "support.function",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "ffffff",
|
||||||
|
"background": "e92e2e",
|
||||||
|
"token": "invalid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "e92e2e",
|
||||||
|
"token": "punctuation.section.embedded",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "606060",
|
||||||
|
"token": "punctuation.definition.tag",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "a165ac",
|
||||||
|
"token": "constant.other.color.rgb-value.css",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"foreground": "a165ac",
|
||||||
|
"token": "support.constant.property-value.css",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"colors": {
|
||||||
|
"editor.foreground": "#929292",
|
||||||
|
"editor.background": "#191919",
|
||||||
|
"editor.selectionBackground": "#000000",
|
||||||
|
"editor.lineHighlightBackground": "#D7D7D708",
|
||||||
|
"editorCursor.foreground": "#7DA5DC",
|
||||||
|
"editorWhitespace.foreground": "#BFBFBF",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
injectionToken: customMonacoThemeInjectionToken,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default cloudsMidnightThemeInjectable;
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import yaml from "js-yaml";
|
||||||
|
|
||||||
|
export interface MonacoValidator {
|
||||||
|
(value: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function yamlValidator(value: string) {
|
||||||
|
try {
|
||||||
|
yaml.loadAll(value);
|
||||||
|
} catch (error) {
|
||||||
|
throw String(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function jsonValidator(value: string) {
|
||||||
|
try {
|
||||||
|
JSON.parse(value);
|
||||||
|
} catch (error) {
|
||||||
|
throw String(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const monacoValidators = {
|
||||||
|
yaml: yamlValidator,
|
||||||
|
json: jsonValidator,
|
||||||
|
};
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./radio";
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.RadioGroup {
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.buttonsView {
|
||||||
|
display: inline-flex;
|
||||||
|
|
||||||
|
.Radio {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid var(--borderFaintColor);
|
||||||
|
border-radius: $radius;
|
||||||
|
text-align: center;
|
||||||
|
padding: round($padding * .7) $padding;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: 250ms color;
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.checked):not(.disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
&:not(:active):focus {
|
||||||
|
position: relative;
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: inset 0 0 0 1px var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.checked {
|
||||||
|
background-color: var(--radioActiveBackground);
|
||||||
|
color: var(--textColorAccent);
|
||||||
|
* {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--textColorAccent)
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .Radio {
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
+ * {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Radio {
|
||||||
|
$tickSize: round(1.8 * $unit);
|
||||||
|
$tickColor: currentColor;
|
||||||
|
$tickColorActive: var(--colorInfo);
|
||||||
|
$tickColorFocus: var(--colorInfo);
|
||||||
|
$labelColorActive: var(--textColorAccent);
|
||||||
|
|
||||||
|
input[type="radio"] {
|
||||||
|
display: none;
|
||||||
|
&:checked {
|
||||||
|
~ .tick {
|
||||||
|
color: $tickColorActive;
|
||||||
|
&:after {
|
||||||
|
content: "radio_button_checked";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:disabled {
|
||||||
|
~ .tick {
|
||||||
|
color: $tickColor;
|
||||||
|
}
|
||||||
|
~ * {
|
||||||
|
opacity: .5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:disabled) ~ * {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
.tick {
|
||||||
|
color: $tickColorActive;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.checked {
|
||||||
|
.label {
|
||||||
|
color: $labelColorActive;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick {
|
||||||
|
color: $tickColor;
|
||||||
|
font: calc($font-size * 1.3) "Material Icons";
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "radio_button_unchecked";
|
||||||
|
}
|
||||||
|
|
||||||
|
+ * {
|
||||||
|
margin-left: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./radio.scss";
|
||||||
|
import React, { useContext, useRef } from "react";
|
||||||
|
import type { SingleOrMany } from "@k8slens/utilities";
|
||||||
|
import { cssNames, noop } from "@k8slens/utilities";
|
||||||
|
|
||||||
|
export interface RadioGroupProps<T> {
|
||||||
|
className?: string;
|
||||||
|
value?: T;
|
||||||
|
asButtons?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
onChange: (value: T) => void;
|
||||||
|
children: SingleOrMany<React.ReactElement<RadioProps<T>>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RadioGroupContext {
|
||||||
|
disabled: boolean;
|
||||||
|
value: any | undefined;
|
||||||
|
onSelect: (newValue: any) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const radioGroupContext = React.createContext<RadioGroupContext>({
|
||||||
|
disabled: false,
|
||||||
|
value: undefined,
|
||||||
|
onSelect: noop,
|
||||||
|
});
|
||||||
|
|
||||||
|
export function RadioGroup<T>({
|
||||||
|
value,
|
||||||
|
asButtons,
|
||||||
|
disabled = false,
|
||||||
|
onChange,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
}: RadioGroupProps<T>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cssNames("RadioGroup", { buttonsView: asButtons }, className)}
|
||||||
|
>
|
||||||
|
<radioGroupContext.Provider value={{ disabled, onSelect: onChange, value }}>
|
||||||
|
{children}
|
||||||
|
</radioGroupContext.Provider>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RadioProps<T> {
|
||||||
|
className?: string;
|
||||||
|
label: React.ReactNode;
|
||||||
|
value: T;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Radio<T>({
|
||||||
|
className,
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
disabled = false,
|
||||||
|
}: RadioProps<T>) {
|
||||||
|
const ctx = useContext(radioGroupContext);
|
||||||
|
const ref = useRef<HTMLLabelElement | null>(null);
|
||||||
|
const checked = ctx.value === value;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<label
|
||||||
|
className={cssNames("Radio flex align-center", className, {
|
||||||
|
checked,
|
||||||
|
disabled: disabled || ctx.disabled,
|
||||||
|
})}
|
||||||
|
tabIndex={checked ? undefined : 0}
|
||||||
|
onKeyDown={event => {
|
||||||
|
// Spacebar or Enter key
|
||||||
|
if (event.key === " " || event.key === "Enter") {
|
||||||
|
ref.current?.click();
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
checked={checked}
|
||||||
|
onChange={() => ctx.onSelect(value)}
|
||||||
|
disabled={disabled || ctx.disabled}
|
||||||
|
/>
|
||||||
|
<i className="tick flex center"/>
|
||||||
|
{label ? <div className="label">{label}</div> : null}
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./spinner";
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
.Spinner {
|
||||||
|
--spinner-size: 24px;
|
||||||
|
--spinner-border: calc(var(--spinner-size) / 6);
|
||||||
|
|
||||||
|
$duration: 1s;
|
||||||
|
$rotateAnimation: rotate $duration linear infinite;
|
||||||
|
$colorAnimation: colors $duration*4 ease-in-out infinite;
|
||||||
|
|
||||||
|
@mixin spinner-color($color) {
|
||||||
|
border-color: transparent $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
width: var(--spinner-size);
|
||||||
|
height: var(--spinner-size);
|
||||||
|
border: var(--spinner-border) solid transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&:not(.singleColor) {
|
||||||
|
animation: $rotateAnimation, $colorAnimation;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.singleColor {
|
||||||
|
@include spinner-color(var(--textColorPrimary));
|
||||||
|
animation: $rotateAnimation;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.center {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-left: calc(var(--spinner-size) / -2);
|
||||||
|
margin-top: calc(var(--spinner-size) / -2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes colors {
|
||||||
|
0% {
|
||||||
|
@include spinner-color(#4285F4);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
@include spinner-color(#DE3E35);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
@include spinner-color(#F7C223);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
@include spinner-color(#1B9A59);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
@include spinner-color(#4285F4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./spinner.scss";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { cssNames } from "@k8slens/utilities";
|
||||||
|
|
||||||
|
export interface SpinnerProps extends React.HTMLProps<any> {
|
||||||
|
singleColor?: boolean;
|
||||||
|
center?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Spinner extends React.Component<SpinnerProps, {}> {
|
||||||
|
static defaultProps = {
|
||||||
|
singleColor: true,
|
||||||
|
center: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { center, singleColor, className, ...props } = this.props;
|
||||||
|
const classNames = cssNames("Spinner", className, { singleColor, center });
|
||||||
|
|
||||||
|
return <div {...props} className={classNames} />;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./status-brick";
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.StatusBrick {
|
||||||
|
$brickSize: 8px;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
width: $brickSize;
|
||||||
|
height: $brickSize;
|
||||||
|
margin-right: $margin;
|
||||||
|
background: var(--colorOk);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./status-brick.scss";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { cssNames } from "@k8slens/utilities";
|
||||||
|
import { withTooltip } from "../tooltip";
|
||||||
|
|
||||||
|
export interface StatusBrickProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StatusBrick = withTooltip(({ className, ...elemProps }: StatusBrickProps) => (
|
||||||
|
<div
|
||||||
|
className={cssNames("StatusBrick", className)}
|
||||||
|
{...elemProps}
|
||||||
|
/>
|
||||||
|
));
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export const withTooltip =
|
||||||
|
(Target: any) =>
|
||||||
|
({ tooltip, tooltipOverrideDisabled, ...props }: any) => {
|
||||||
|
if (tooltip) {
|
||||||
|
const testId = props["data-testid"];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Target {...props} />
|
||||||
|
<div data-testid={testId && `tooltip-content-for-${testId}`}>
|
||||||
|
{tooltip.children || tooltip}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Target {...props} />;
|
||||||
|
};
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`<Tooltip /> does not render to DOM if not visibile 1`] = `
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
id="my-target"
|
||||||
|
>
|
||||||
|
Target Text
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<Tooltip /> renders to DOM when forced to by visibile prop 1`] = `
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="Tooltip right visible"
|
||||||
|
role="tooltip"
|
||||||
|
style="left: 10px; top: 0px;"
|
||||||
|
>
|
||||||
|
I am a tooltip
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="my-target"
|
||||||
|
>
|
||||||
|
Target Text
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<Tooltip /> renders to DOM when hovering over target 1`] = `
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="Tooltip right visible"
|
||||||
|
role="tooltip"
|
||||||
|
style="left: 10px; top: 0px;"
|
||||||
|
>
|
||||||
|
I am a tooltip
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="my-target"
|
||||||
|
>
|
||||||
|
Target Text
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
`;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from "./tooltip";
|
||||||
|
export * from "./withTooltip";
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
.Tooltip {
|
||||||
|
--bgc: var(--mainBackground);
|
||||||
|
--radius: #{$radius};
|
||||||
|
--color: var(--textColorAccent);
|
||||||
|
--border: 1px solid var(--borderColor);
|
||||||
|
|
||||||
|
// use positioning relative to viewport (window)
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/position
|
||||||
|
position: fixed;
|
||||||
|
margin: 0 !important;
|
||||||
|
background: var(--bgc);
|
||||||
|
font-size: small;
|
||||||
|
font-weight: normal;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
color: var(--color);
|
||||||
|
white-space: normal;
|
||||||
|
padding: .5em;
|
||||||
|
text-align: center;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 150ms 150ms ease-in-out;
|
||||||
|
z-index: 100000;
|
||||||
|
box-shadow: 0 8px 16px rgba(0,0,0,0.24);
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
&.visible {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.formatter {
|
||||||
|
&.nowrap {
|
||||||
|
&, * {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.narrow {
|
||||||
|
max-width: 300px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-wrap: break-word;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
font-size: $font-size-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
color: var(--colorError);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tableView {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--padding);
|
||||||
|
grid-template-columns: max-content 1fr;
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
|
||||||
|
// backward compatibility: skips element in DOM to consider only children in grid-flow
|
||||||
|
> .flex {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
grid-column: 1 / 3; // merge
|
||||||
|
color: var(--textColorAccent);
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-align: right;
|
||||||
|
color: var(--textColorAccent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
text-align: left;
|
||||||
|
color: var(--textColorSecondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { render } from "@testing-library/react";
|
||||||
|
import userEvent from "@testing-library/user-event";
|
||||||
|
import assert from "assert";
|
||||||
|
import React from "react";
|
||||||
|
import { Tooltip } from "./tooltip";
|
||||||
|
|
||||||
|
describe("<Tooltip />", () => {
|
||||||
|
let requestAnimationFrameSpy: jest.SpyInstance<number, [callback: FrameRequestCallback]>;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
requestAnimationFrameSpy = jest.spyOn(window, "requestAnimationFrame");
|
||||||
|
|
||||||
|
requestAnimationFrameSpy.mockImplementation(cb => {
|
||||||
|
cb(0);
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
requestAnimationFrameSpy.mockRestore();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it("does not render to DOM if not visibile", () => {
|
||||||
|
const result = render((
|
||||||
|
<>
|
||||||
|
<Tooltip targetId="my-target" usePortal={false}>I am a tooltip</Tooltip>
|
||||||
|
<div id="my-target">Target Text</div>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
|
expect(result.baseElement).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders to DOM when hovering over target", () => {
|
||||||
|
const result = render((
|
||||||
|
<>
|
||||||
|
<Tooltip
|
||||||
|
targetId="my-target"
|
||||||
|
data-testid="tooltip"
|
||||||
|
usePortal={false}
|
||||||
|
>
|
||||||
|
I am a tooltip
|
||||||
|
</Tooltip>
|
||||||
|
<div id="my-target">Target Text</div>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
|
const target = result.baseElement.querySelector("#my-target");
|
||||||
|
|
||||||
|
assert(target);
|
||||||
|
|
||||||
|
userEvent.hover(target);
|
||||||
|
expect(result.baseElement).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders to DOM when forced to by visibile prop", () => {
|
||||||
|
const result = render((
|
||||||
|
<>
|
||||||
|
<Tooltip
|
||||||
|
targetId="my-target"
|
||||||
|
data-testid="tooltip"
|
||||||
|
visible={true}
|
||||||
|
usePortal={false}
|
||||||
|
>
|
||||||
|
I am a tooltip
|
||||||
|
</Tooltip>
|
||||||
|
<div id="my-target">Target Text</div>
|
||||||
|
</>
|
||||||
|
));
|
||||||
|
|
||||||
|
expect(result.baseElement).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,243 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./tooltip.scss";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
|
import { observer } from "mobx-react";
|
||||||
|
import type { IClassName } from "@k8slens/utilities";
|
||||||
|
import { cssNames } from "@k8slens/utilities";
|
||||||
|
import { observable, makeObservable, action } from "mobx";
|
||||||
|
import autoBindReact from "auto-bind/react";
|
||||||
|
|
||||||
|
export enum TooltipPosition {
|
||||||
|
TOP = "top",
|
||||||
|
BOTTOM = "bottom",
|
||||||
|
LEFT = "left",
|
||||||
|
RIGHT = "right",
|
||||||
|
TOP_LEFT = "top_left",
|
||||||
|
TOP_RIGHT = "top_right",
|
||||||
|
BOTTOM_LEFT = "bottom_left",
|
||||||
|
BOTTOM_RIGHT = "bottom_right",
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TooltipProps {
|
||||||
|
targetId: string; // html-id of target element to bind for
|
||||||
|
tooltipOnParentHover?: boolean; // detect hover on parent of target
|
||||||
|
visible?: boolean; // initial visibility
|
||||||
|
offset?: number; // offset from target element in pixels (all sides)
|
||||||
|
usePortal?: boolean; // renders element outside of parent (in body), disable for "easy-styling", default: true
|
||||||
|
preferredPositions?: TooltipPosition | TooltipPosition[];
|
||||||
|
className?: IClassName;
|
||||||
|
formatters?: TooltipContentFormatters;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TooltipContentFormatters {
|
||||||
|
narrow?: boolean; // max-width
|
||||||
|
warning?: boolean; // color
|
||||||
|
small?: boolean; // font-size
|
||||||
|
nowrap?: boolean; // white-space
|
||||||
|
tableView?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultProps: Partial<TooltipProps> = {
|
||||||
|
usePortal: true,
|
||||||
|
offset: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export class Tooltip extends React.Component<TooltipProps> {
|
||||||
|
static defaultProps = defaultProps as object;
|
||||||
|
|
||||||
|
@observable.ref elem: HTMLDivElement | null = null;
|
||||||
|
@observable activePosition?: TooltipPosition;
|
||||||
|
@observable isVisible = false;
|
||||||
|
@observable isContentVisible = false; // animation manager
|
||||||
|
|
||||||
|
constructor(props: TooltipProps) {
|
||||||
|
super(props);
|
||||||
|
makeObservable(this);
|
||||||
|
autoBindReact(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
get targetElem(): HTMLElement | null {
|
||||||
|
return document.getElementById(this.props.targetId);
|
||||||
|
}
|
||||||
|
|
||||||
|
get hoverTarget(): HTMLElement | null {
|
||||||
|
if (this.props.tooltipOnParentHover) {
|
||||||
|
return this.targetElem?.parentElement ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.targetElem;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.hoverTarget?.addEventListener("mouseenter", this.onEnterTarget);
|
||||||
|
this.hoverTarget?.addEventListener("mouseleave", this.onLeaveTarget);
|
||||||
|
this.refreshPosition();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
this.refreshPosition();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.hoverTarget?.removeEventListener("mouseenter", this.onEnterTarget);
|
||||||
|
this.hoverTarget?.removeEventListener("mouseleave", this.onLeaveTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
protected onEnterTarget() {
|
||||||
|
this.isVisible = true;
|
||||||
|
requestAnimationFrame(action(() => this.isContentVisible = true));
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
protected onLeaveTarget() {
|
||||||
|
this.isVisible = false;
|
||||||
|
this.isContentVisible = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshPosition() {
|
||||||
|
const { preferredPositions } = this.props;
|
||||||
|
const { elem, targetElem } = this;
|
||||||
|
|
||||||
|
if (!elem || !targetElem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const positions = new Set<TooltipPosition>([
|
||||||
|
...[preferredPositions ?? []].flat(),
|
||||||
|
TooltipPosition.RIGHT,
|
||||||
|
TooltipPosition.BOTTOM,
|
||||||
|
TooltipPosition.TOP,
|
||||||
|
TooltipPosition.LEFT,
|
||||||
|
TooltipPosition.TOP_RIGHT,
|
||||||
|
TooltipPosition.TOP_LEFT,
|
||||||
|
TooltipPosition.BOTTOM_RIGHT,
|
||||||
|
TooltipPosition.BOTTOM_LEFT,
|
||||||
|
]);
|
||||||
|
|
||||||
|
// reset position first and get all possible client-rect area for tooltip element
|
||||||
|
this.setPosition(elem, { left: 0, top: 0 });
|
||||||
|
|
||||||
|
const selfBounds = elem.getBoundingClientRect();
|
||||||
|
const targetBounds = targetElem.getBoundingClientRect();
|
||||||
|
const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
|
||||||
|
|
||||||
|
// find proper position
|
||||||
|
for (const pos of positions) {
|
||||||
|
const { left, top, right, bottom } = this.getPosition(pos, selfBounds, targetBounds);
|
||||||
|
const fitsToWindow = left >= 0 && top >= 0 && right <= viewportWidth && bottom <= viewportHeight;
|
||||||
|
|
||||||
|
if (fitsToWindow) {
|
||||||
|
this.activePosition = pos;
|
||||||
|
this.setPosition(elem, { top, left });
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// apply fallback position if nothing helped from above
|
||||||
|
const fallbackPosition = Array.from(positions)[0];
|
||||||
|
const { left, top } = this.getPosition(fallbackPosition, selfBounds, targetBounds);
|
||||||
|
|
||||||
|
this.activePosition = fallbackPosition;
|
||||||
|
this.setPosition(elem, { left, top });
|
||||||
|
}
|
||||||
|
|
||||||
|
protected setPosition(elem: HTMLDivElement, pos: { left: number; top: number }) {
|
||||||
|
elem.style.left = `${pos.left}px`;
|
||||||
|
elem.style.top = `${pos.top}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected getPosition(position: TooltipPosition, tooltipBounds: DOMRect, targetBounds: DOMRect) {
|
||||||
|
let left: number;
|
||||||
|
let top: number;
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
const offset = this.props.offset!;
|
||||||
|
const horizontalCenter = targetBounds.left + (targetBounds.width - tooltipBounds.width) / 2;
|
||||||
|
const verticalCenter = targetBounds.top + (targetBounds.height - tooltipBounds.height) / 2;
|
||||||
|
const topCenter = targetBounds.top - tooltipBounds.height - offset;
|
||||||
|
const bottomCenter = targetBounds.bottom + offset;
|
||||||
|
|
||||||
|
switch (position) {
|
||||||
|
case "top":
|
||||||
|
left = horizontalCenter;
|
||||||
|
top = topCenter;
|
||||||
|
break;
|
||||||
|
case "bottom":
|
||||||
|
left = horizontalCenter;
|
||||||
|
top = bottomCenter;
|
||||||
|
break;
|
||||||
|
case "left":
|
||||||
|
top = verticalCenter;
|
||||||
|
left = targetBounds.left - tooltipBounds.width - offset;
|
||||||
|
break;
|
||||||
|
case "right":
|
||||||
|
top = verticalCenter;
|
||||||
|
left = targetBounds.right + offset;
|
||||||
|
break;
|
||||||
|
case "top_left":
|
||||||
|
left = targetBounds.left;
|
||||||
|
top = topCenter;
|
||||||
|
break;
|
||||||
|
case "top_right":
|
||||||
|
left = targetBounds.right - tooltipBounds.width;
|
||||||
|
top = topCenter;
|
||||||
|
break;
|
||||||
|
case "bottom_left":
|
||||||
|
top = bottomCenter;
|
||||||
|
left = targetBounds.left;
|
||||||
|
break;
|
||||||
|
case "bottom_right":
|
||||||
|
top = bottomCenter;
|
||||||
|
left = targetBounds.right - tooltipBounds.width;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new TypeError("Invalid props.postition value");
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
left,
|
||||||
|
top,
|
||||||
|
right: left + tooltipBounds.width,
|
||||||
|
bottom: top + tooltipBounds.height,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { style, formatters, usePortal, children, visible = this.isVisible } = this.props;
|
||||||
|
|
||||||
|
if (!visible) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
|
||||||
|
visible: this.isContentVisible || this.props.visible,
|
||||||
|
formatter: !!formatters,
|
||||||
|
});
|
||||||
|
const tooltip = (
|
||||||
|
<div
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
ref={elem => this.elem = elem}
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (usePortal) {
|
||||||
|
return createPortal(tooltip, document.body);
|
||||||
|
}
|
||||||
|
|
||||||
|
return tooltip;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Tooltip decorator for simple composition with other components
|
||||||
|
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import type { TooltipProps } from "./tooltip";
|
||||||
|
import { Tooltip } from "./tooltip";
|
||||||
|
import { isReactNode } from "@k8slens/utilities";
|
||||||
|
import uniqueId from "lodash/uniqueId";
|
||||||
|
import type { SingleOrMany } from "@k8slens/utilities";
|
||||||
|
|
||||||
|
export interface TooltipDecoratorProps {
|
||||||
|
tooltip?: ReactNode | Omit<TooltipProps, "targetId">;
|
||||||
|
/**
|
||||||
|
* forces tooltip to detect the target's parent for mouse events. This is
|
||||||
|
* useful for displaying tooltips even when the target is "disabled"
|
||||||
|
*/
|
||||||
|
tooltipOverrideDisabled?: boolean;
|
||||||
|
id?: string;
|
||||||
|
children?: SingleOrMany<React.ReactNode>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function withTooltip<TargetProps>(
|
||||||
|
Target: TargetProps extends Pick<TooltipDecoratorProps, "id" | "children">
|
||||||
|
? React.FunctionComponent<TargetProps>
|
||||||
|
: never,
|
||||||
|
): React.FunctionComponent<TargetProps & TooltipDecoratorProps> {
|
||||||
|
const DecoratedComponent = (props: TargetProps & TooltipDecoratorProps) => {
|
||||||
|
// TODO: Remove side-effect to allow deterministic unit testing
|
||||||
|
const [defaultTooltipId] = useState(uniqueId("tooltip_target_"));
|
||||||
|
|
||||||
|
let {
|
||||||
|
id: targetId,
|
||||||
|
children: targetChildren,
|
||||||
|
} = props;
|
||||||
|
const {
|
||||||
|
tooltip,
|
||||||
|
tooltipOverrideDisabled,
|
||||||
|
id: _unusedId,
|
||||||
|
children: _unusedTargetChildren,
|
||||||
|
...targetProps
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
if (tooltip) {
|
||||||
|
const tooltipProps: TooltipProps = {
|
||||||
|
targetId: targetId || defaultTooltipId,
|
||||||
|
tooltipOnParentHover: tooltipOverrideDisabled,
|
||||||
|
formatters: { narrow: true },
|
||||||
|
...(isReactNode(tooltip) ? { children: tooltip } : tooltip),
|
||||||
|
};
|
||||||
|
|
||||||
|
targetId = tooltipProps.targetId;
|
||||||
|
targetChildren = (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
{targetChildren}
|
||||||
|
</div>
|
||||||
|
<Tooltip {...tooltipProps} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Target id={targetId} {...targetProps as any}>
|
||||||
|
{targetChildren}
|
||||||
|
</Target>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
DecoratedComponent.displayName = `withTooltip(${Target.displayName || Target.name})`;
|
||||||
|
|
||||||
|
return DecoratedComponent;
|
||||||
|
}
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
import type React from "react";
|
||||||
|
import { getInjectionToken } from "@ogre-tools/injectable";
|
||||||
|
import type { LensTheme } from "./components/chart/lens-theme";
|
||||||
|
import type { IComputedValue } from "mobx";
|
||||||
|
|
||||||
|
export type ClusterOverviewUIBlock = {
|
||||||
|
id: string;
|
||||||
|
Component: React.ElementType;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const clusterOverviewUIBlockInjectionToken = getInjectionToken<ClusterOverviewUIBlock>({
|
||||||
|
id: "cluster-overview-ui-block-injection-token",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hack: any
|
||||||
|
export type ClusterOverviewStore = any;
|
||||||
|
|
||||||
|
export const clusterOverviewStoreInjectionToken = getInjectionToken<ClusterOverviewStore>({
|
||||||
|
id: "cluster-overview-store-injection-token",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hack: any
|
||||||
|
export type UserStore = any;
|
||||||
|
|
||||||
|
export const userStoreInjectionToken = getInjectionToken<UserStore>({
|
||||||
|
id: "user-store-injection-token",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hack: any
|
||||||
|
export type NodeStore = any;
|
||||||
|
|
||||||
|
export const nodeStoreInjectionToken = getInjectionToken<NodeStore>({
|
||||||
|
id: "node-store-injection-token",
|
||||||
|
});
|
||||||
|
|
||||||
|
export const navigateToPreferencesOfMetricsInjectionToken = getInjectionToken<() => void>({
|
||||||
|
id: "navigate-to-preferences-of-metrics-injection-token",
|
||||||
|
});
|
||||||
|
|
||||||
|
export const activeThemeInjectionToken = getInjectionToken<IComputedValue<LensTheme>>({
|
||||||
|
id: "active-theme-injection-token",
|
||||||
|
});
|
||||||
|
|
||||||
|
type LoggerFunction = (message: string, ...additionals: any[]) => void;
|
||||||
|
|
||||||
|
export type Logger = {
|
||||||
|
debug: LoggerFunction;
|
||||||
|
info: LoggerFunction;
|
||||||
|
warn: LoggerFunction;
|
||||||
|
error: LoggerFunction;
|
||||||
|
silly: LoggerFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loggerInjectionToken = getInjectionToken<Logger>({
|
||||||
|
id: "logger-injection-token",
|
||||||
|
});
|
||||||
|
|
||||||
|
export enum MetricType {
|
||||||
|
MEMORY = "memory",
|
||||||
|
CPU = "cpu",
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum MetricNodeRole {
|
||||||
|
MASTER = "master",
|
||||||
|
WORKER = "worker",
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||||
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Metrics api
|
||||||
|
|
||||||
|
import moment from "moment";
|
||||||
|
import { isDefined, object } from "@k8slens/utilities";
|
||||||
|
|
||||||
|
export interface MetricData {
|
||||||
|
status: string;
|
||||||
|
data: {
|
||||||
|
resultType: string;
|
||||||
|
result: MetricResult[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MetricResult {
|
||||||
|
metric: {
|
||||||
|
[name: string]: string | undefined;
|
||||||
|
instance?: string;
|
||||||
|
node?: string;
|
||||||
|
pod?: string;
|
||||||
|
kubernetes?: string;
|
||||||
|
kubernetes_node?: string;
|
||||||
|
kubernetes_namespace?: string;
|
||||||
|
};
|
||||||
|
values: [number, string][];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function normalizeMetrics(metrics: MetricData | undefined | null, frames = 60): MetricData {
|
||||||
|
if (!metrics?.data?.result) {
|
||||||
|
return {
|
||||||
|
data: {
|
||||||
|
resultType: "",
|
||||||
|
result: [{
|
||||||
|
metric: {},
|
||||||
|
values: [],
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
status: "",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const { result } = metrics.data;
|
||||||
|
|
||||||
|
if (result.length) {
|
||||||
|
if (frames > 0) {
|
||||||
|
// fill the gaps
|
||||||
|
result.forEach(res => {
|
||||||
|
if (!res.values || !res.values.length) return;
|
||||||
|
|
||||||
|
let now = moment().startOf("minute").subtract(1, "minute").unix();
|
||||||
|
let timestamp = res.values[0][0];
|
||||||
|
|
||||||
|
while (timestamp <= now) {
|
||||||
|
timestamp = moment.unix(timestamp).add(1, "minute").unix();
|
||||||
|
|
||||||
|
if (!res.values.find((value) => value[0] === timestamp)) {
|
||||||
|
res.values.push([timestamp, "0"]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
while (res.values.length < frames) {
|
||||||
|
const timestamp = moment.unix(res.values[0][0]).subtract(1, "minute").unix();
|
||||||
|
|
||||||
|
if (!res.values.find((value) => value[0] === timestamp)) {
|
||||||
|
res.values.unshift([timestamp, "0"]);
|
||||||
|
}
|
||||||
|
now = timestamp;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// always return at least empty values array
|
||||||
|
result.push({
|
||||||
|
metric: {},
|
||||||
|
values: [],
|
||||||
|
} as MetricResult);
|
||||||
|
}
|
||||||
|
|
||||||
|
return metrics;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isMetricsEmpty(metrics: Partial<Record<string, MetricData>>) {
|
||||||
|
return Object.values(metrics).every(metric => !metric?.data?.result?.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getItemMetrics<Keys extends string>(metrics: Partial<Record<Keys, MetricData>> | null | undefined, itemName: string): Partial<Record<Keys, MetricData>> | undefined {
|
||||||
|
if (!metrics) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemMetrics = { ...metrics };
|
||||||
|
|
||||||
|
for (const metric in metrics) {
|
||||||
|
if (!metrics[metric]?.data?.result) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const results = metrics[metric]?.data.result;
|
||||||
|
const result = results?.find(res => Object.values(res.metric)[0] == itemName);
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
itemMetrics[metric]!.data.result = result ? [result] : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return itemMetrics;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMetricLastPoints<Keys extends string>(metrics: Partial<Record<Keys, MetricData>>): Partial<Record<Keys, number>> {
|
||||||
|
return object.fromEntries(
|
||||||
|
object.entries(metrics)
|
||||||
|
.map(([metricName, metric]) => {
|
||||||
|
try {
|
||||||
|
return [metricName, +metric.data.result[0].values.slice(-1)[0][1]] as const;
|
||||||
|
} catch {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.filter(isDefined),
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user