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",
|
||||
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
|
||||
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"acorn": "^7.0.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -8514,7 +8513,6 @@
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@ -8526,7 +8524,6 @@
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
||||
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
@ -9614,7 +9611,6 @@
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
@ -10374,7 +10370,6 @@
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
|
||||
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
@ -10457,7 +10452,6 @@
|
||||
"version": "2.9.4",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
|
||||
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chartjs-color": "^2.1.0",
|
||||
"moment": "^2.10.2"
|
||||
@ -10467,7 +10461,6 @@
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
|
||||
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chartjs-color-string": "^0.6.0",
|
||||
"color-convert": "^1.9.3"
|
||||
@ -10477,7 +10470,6 @@
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
||||
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-name": "^1.0.0"
|
||||
}
|
||||
@ -10486,7 +10478,6 @@
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
@ -10494,8 +10485,7 @@
|
||||
"node_modules/chartjs-color/node_modules/color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.5.3",
|
||||
@ -12187,7 +12177,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
|
||||
"integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
@ -12301,7 +12290,6 @@
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
|
||||
"integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"acorn-node": "^1.8.2",
|
||||
"defined": "^1.0.0",
|
||||
@ -12336,8 +12324,7 @@
|
||||
"node_modules/didyoumean": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
|
||||
},
|
||||
"node_modules/diff": {
|
||||
"version": "4.0.2",
|
||||
@ -12418,8 +12405,7 @@
|
||||
"node_modules/dlv": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
|
||||
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
|
||||
},
|
||||
"node_modules/dmg-builder": {
|
||||
"version": "23.6.0",
|
||||
@ -13040,7 +13026,6 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
}
|
||||
@ -22054,7 +22039,6 @@
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
@ -23472,14 +23456,12 @@
|
||||
"node_modules/monaco-editor": {
|
||||
"version": "0.29.1",
|
||||
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz",
|
||||
"integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
|
||||
},
|
||||
"node_modules/monaco-editor-webpack-plugin": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-5.0.0.tgz",
|
||||
"integrity": "sha512-KrUUTmMO3lDCNK4honZ6rrrKjOI7FFLeyCktPetIo5HlRqr5dfE6ewaA9qNLH96XY7CekE3Z+v/+I6ufAs3ObA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
@ -27802,7 +27784,6 @@
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@ -28320,7 +28301,6 @@
|
||||
"version": "14.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
|
||||
"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"postcss-value-parser": "^4.0.0",
|
||||
"read-cache": "^1.0.0",
|
||||
@ -28337,7 +28317,6 @@
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
|
||||
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"camelcase-css": "^2.0.1"
|
||||
},
|
||||
@ -28461,7 +28440,6 @@
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
|
||||
"integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"postcss-selector-parser": "^6.0.10"
|
||||
},
|
||||
@ -29330,7 +29308,6 @@
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"pify": "^2.3.0"
|
||||
}
|
||||
@ -31874,7 +31851,6 @@
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
|
||||
"integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"arg": "^5.0.2",
|
||||
"chokidar": "^3.5.3",
|
||||
@ -31915,7 +31891,6 @@
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
||||
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.3"
|
||||
},
|
||||
@ -31927,7 +31902,6 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
|
||||
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
@ -34993,7 +34967,7 @@
|
||||
"@swc/core": "^1.3.38",
|
||||
"@swc/jest": "^0.2.23",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/react": "^12.1.5",
|
||||
"@types/jest": "^29.2.2",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "^29.5.0",
|
||||
@ -36326,8 +36300,10 @@
|
||||
"css-loader": "^6.7.2",
|
||||
"fork-ts-checker-webpack-plugin": "^7.3.0",
|
||||
"mini-css-extract-plugin": "^2.7.3",
|
||||
"sass": "^1.58.2",
|
||||
"sass-loader": "^13.2.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"ts-loader": "^9.4.1",
|
||||
"webpack": "^5.76.0",
|
||||
"webpack-cli": "^4.10.0",
|
||||
@ -37077,11 +37053,24 @@
|
||||
"version": "6.5.0-alpha.1",
|
||||
"license": "MIT",
|
||||
"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": {
|
||||
"@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": {
|
||||
|
||||
@ -6,15 +6,13 @@ import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { createLogger, format } from "winston";
|
||||
import type { Logger } from "./logger";
|
||||
import { loggerTransportInjectionToken } from "./logger/transports";
|
||||
import { loggerInjectionToken } from "@k8slens/metrics";
|
||||
|
||||
const loggerInjectable = getInjectable({
|
||||
id: "logger",
|
||||
instantiate: (di): Logger => {
|
||||
const baseLogger = createLogger({
|
||||
format: format.combine(
|
||||
format.splat(),
|
||||
format.simple(),
|
||||
),
|
||||
format: format.combine(format.splat(), format.simple()),
|
||||
transports: di.injectMany(loggerTransportInjectionToken),
|
||||
});
|
||||
|
||||
@ -28,6 +26,8 @@ const loggerInjectable = getInjectable({
|
||||
},
|
||||
|
||||
decorable: false,
|
||||
|
||||
injectionToken: loggerInjectionToken,
|
||||
});
|
||||
|
||||
export default loggerInjectable;
|
||||
|
||||
@ -3,11 +3,6 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import type { Logger } from "@k8slens/metrics";
|
||||
|
||||
export interface 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;
|
||||
}
|
||||
export { Logger };
|
||||
|
||||
@ -18,6 +18,7 @@ import { persistStateToConfigInjectionToken } from "../base-store/save-to-file";
|
||||
import getBasenameOfPathInjectable from "../path/get-basename.injectable";
|
||||
import { enlistMessageChannelListenerInjectionToken } from "../utils/channel/enlist-message-channel-listener-injection-token";
|
||||
import userStorePreferenceDescriptorsInjectable from "./preference-descriptors.injectable";
|
||||
import { userStoreInjectionToken } from "@k8slens/metrics";
|
||||
|
||||
const userStoreInjectable = getInjectable({
|
||||
id: "user-store",
|
||||
@ -37,6 +38,8 @@ const userStoreInjectable = getInjectable({
|
||||
shouldDisableSyncInListener: di.inject(shouldBaseStoreDisableSyncInIpcListenerInjectionToken),
|
||||
preferenceDescriptors: di.inject(userStorePreferenceDescriptorsInjectable),
|
||||
}),
|
||||
|
||||
injectionToken: userStoreInjectionToken
|
||||
});
|
||||
|
||||
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 systemThemeConfigurationInjectable from "./system-theme.injectable";
|
||||
import lensThemesInjectable from "./themes.injectable";
|
||||
import { activeThemeInjectionToken } from "@k8slens/metrics";
|
||||
|
||||
const activeThemeInjectable = getInjectable({
|
||||
id: "active-theme",
|
||||
@ -35,6 +36,8 @@ const activeThemeInjectable = getInjectable({
|
||||
return lensThemes.get(pref.lensThemeId) ?? defaultLensTheme;
|
||||
});
|
||||
},
|
||||
|
||||
injectionToken: activeThemeInjectionToken
|
||||
});
|
||||
|
||||
export default activeThemeInjectable;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
"@swc/core": "^1.3.38",
|
||||
"@swc/jest": "^0.2.23",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/react": "^12.1.5",
|
||||
"@types/jest": "^29.2.2",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "^29.5.0",
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
const getNodeConfig = require("./get-node-config");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
|
||||
const path = require("path");
|
||||
|
||||
// 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 =
|
||||
({ miniCssExtractPluginLoader = MiniCssExtractPlugin.loader } = {}) =>
|
||||
@ -22,6 +24,13 @@ module.exports =
|
||||
new MiniCssExtractPlugin({
|
||||
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: {
|
||||
@ -55,7 +64,8 @@ module.exports =
|
||||
options: {
|
||||
sourceMap: false,
|
||||
postcssOptions: {
|
||||
plugins: ["tailwindcss"],
|
||||
// hack: commented
|
||||
// plugins: ["tailwindcss"],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -4,5 +4,17 @@
|
||||
*/
|
||||
export { metricsFeature } from "./src/feature";
|
||||
|
||||
export type { ClusterOverviewUIBlock } from "./src/cluster-overview/cluster-overview-ui-block";
|
||||
export { clusterOverviewUIBlockInjectionToken } from "./src/cluster-overview/cluster-overview-ui-block";
|
||||
export type { ClusterOverviewUIBlock, MetricType } from "./src/cluster-overview/injection-tokens";
|
||||
|
||||
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": {
|
||||
"@k8slens/feature-core": "^6.5.0-alpha.0",
|
||||
"@k8slens/utilities": "^1.0.0-alpha.1",
|
||||
"@ogre-tools/injectable": "^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": {
|
||||
"@testing-library/react": "^12.1.5",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@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.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
// import styles from "./cluster-metrics.module.scss";
|
||||
//
|
||||
// import React, { useState } from "react";
|
||||
// import { observer } from "mobx-react";
|
||||
import styles from "./cluster-metrics.module.scss";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
// import type { ChartOptions, ChartPoint } from "chart.js";
|
||||
// import type { ClusterOverviewStore } from "../cluster-overview-store/cluster-overview-store";
|
||||
// import { MetricType } from "../cluster-overview-store/cluster-overview-store";
|
||||
// import { BarChart } from "../../chart";
|
||||
// import { bytesToUnits, cssNames } from "@k8slens/utilities";
|
||||
import { bytesToUnits, cssNames } from "@k8slens/utilities";
|
||||
// import { Spinner } from "../../spinner";
|
||||
// import { ZebraStripesPlugin } from "../../chart/zebra-stripes.plugin";
|
||||
// import { ClusterNoMetrics } from "../cluster-no-metrics";
|
||||
// import { ClusterMetricSwitchers } from "../cluster-metric-switchers";
|
||||
// import { getMetricLastPoints } from "../../../../common/k8s-api/endpoints/metrics.api";
|
||||
// import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
// import clusterOverviewStoreInjectable from "../cluster-overview-store/cluster-overview-store.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 {
|
||||
// clusterOverviewStore: ClusterOverviewStore;
|
||||
// }
|
||||
interface Dependencies {
|
||||
// hack
|
||||
clusterOverviewStore: any;
|
||||
}
|
||||
|
||||
// const NonInjectedClusterMetrics = observer(
|
||||
// ({
|
||||
// clusterOverviewStore: {
|
||||
// metricType,
|
||||
// metricNodeRole,
|
||||
// getMetricsValues,
|
||||
// metricsLoaded,
|
||||
// metrics,
|
||||
// },
|
||||
// }: Dependencies) => {
|
||||
// const [plugins] = useState([new ZebraStripesPlugin()]);
|
||||
// const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics ?? {});
|
||||
// const metricValues = getMetricsValues(metrics ?? {});
|
||||
// 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 NonInjectedClusterMetrics = observer(
|
||||
({
|
||||
clusterOverviewStore: {
|
||||
metricType,
|
||||
metricNodeRole,
|
||||
getMetricsValues,
|
||||
metricsLoaded,
|
||||
metrics,
|
||||
},
|
||||
}: Dependencies) => {
|
||||
const [plugins] = useState([new ZebraStripesPlugin()]);
|
||||
const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics ?? {});
|
||||
const metricValues = getMetricsValues(metrics ?? {});
|
||||
const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
|
||||
|
||||
// const ClusterMetrics = withInjectables<Dependencies>(
|
||||
// NonInjectedClusterMetrics,
|
||||
//
|
||||
// {
|
||||
// getProps: (di) => ({
|
||||
// clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
|
||||
// }),
|
||||
// }
|
||||
// );
|
||||
// hack: any being used
|
||||
// @ts-ignore
|
||||
const data = metricValues.map((value) => ({
|
||||
x: value[0],
|
||||
y: parseFloat(value[1]).toFixed(3),
|
||||
}));
|
||||
|
||||
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({
|
||||
id: "cluster-metrics-overview-block",
|
||||
|
||||
@ -25,7 +25,7 @@ import React from "react";
|
||||
// import activeThemeInjectable from "../../../themes/active.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 { clusterOverviewUIBlockInjectionToken } from "../cluster-overview-ui-block";
|
||||
import { clusterOverviewUIBlockInjectionToken } from "../injection-tokens";
|
||||
|
||||
// function createLabels(rawLabelData: [string, number | undefined][]): string[] {
|
||||
// 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