diff --git a/.eslintrc.js b/.eslintrc.js index a9b4fa21f9..d59ea493e5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -47,6 +47,8 @@ module.exports = { }], "semi": ["error", "always"], "object-shorthand": "error", + "prefer-template": "error", + "template-curly-spacing": "error", } }, { @@ -90,6 +92,8 @@ module.exports = { "semi": "off", "@typescript-eslint/semi": ["error"], "object-shorthand": "error", + "prefer-template": "error", + "template-curly-spacing": "error", }, }, { @@ -140,6 +144,8 @@ module.exports = { "semi": "off", "@typescript-eslint/semi": ["error"], "object-shorthand": "error", + "prefer-template": "error", + "template-curly-spacing": "error", }, } ] diff --git a/build/download_kubectl.ts b/build/download_kubectl.ts index bab01d7f02..8c405dee5a 100644 --- a/build/download_kubectl.ts +++ b/build/download_kubectl.ts @@ -43,7 +43,7 @@ class KubectlDownloader { return true; } - console.log("Kubectl md5sum " + hash + " does not match the remote etag " + etag + ", unlinking and downloading again"); + console.log(`Kubectl md5sum ${hash} does not match the remote etag ${etag}, unlinking and downloading again`); await fs.promises.unlink(this.path); } @@ -103,7 +103,7 @@ const downloads = [ downloads.forEach((dlOpts) => { console.log(dlOpts); const downloader = new KubectlDownloader(downloadVersion, dlOpts.platform, dlOpts.arch, dlOpts.target); - console.log("Downloading: " + JSON.stringify(dlOpts)); + console.log(`Downloading: ${JSON.stringify(dlOpts)}`); downloader.downloadKubectl().then(() => downloader.checkBinary().then(() => console.log("Download complete"))); }); diff --git a/build/set_npm_version.ts b/build/set_npm_version.ts index 17d4a1ef83..9b433349fb 100644 --- a/build/set_npm_version.ts +++ b/build/set_npm_version.ts @@ -6,4 +6,4 @@ import appInfo from "../package.json"; const packagePath = path.join(__dirname, "../src/extensions/npm/extensions/package.json"); packageInfo.version = appInfo.version; -fs.writeFileSync(packagePath, JSON.stringify(packageInfo, null, 2) + "\n"); +fs.writeFileSync(packagePath, `${JSON.stringify(packageInfo, null, 2)}\n`); diff --git a/integration/__tests__/app.tests.ts b/integration/__tests__/app.tests.ts index e65dbcd445..814465d426 100644 --- a/integration/__tests__/app.tests.ts +++ b/integration/__tests__/app.tests.ts @@ -546,7 +546,7 @@ describe("Lens integration tests", () => { await app.client.keys("metadata:\n"); await app.client.keys(" name: nginx-create-pod-test\n"); await app.client.keys(`namespace: ${TEST_NAMESPACE}\n`); - await app.client.keys(BACKSPACE + "spec:\n"); + await app.client.keys(`${BACKSPACE}spec:\n`); await app.client.keys(" containers:\n"); await app.client.keys("- name: nginx-create-pod-test\n"); await app.client.keys(" image: nginx:alpine\n"); diff --git a/src/common/register-protocol.ts b/src/common/register-protocol.ts index fd5ed61daa..b8e9bb3690 100644 --- a/src/common/register-protocol.ts +++ b/src/common/register-protocol.ts @@ -5,7 +5,7 @@ import path from "path"; export function registerFileProtocol(name: string, basePath: string) { protocol.registerFileProtocol(name, (request, callback) => { - const filePath = request.url.replace(name + "://", ""); + const filePath = request.url.replace(`${name}://`, ""); const absPath = path.resolve(basePath, filePath); callback({ path: absPath }); }); diff --git a/src/common/system-ca.ts b/src/common/system-ca.ts index 005ca78884..3beb135449 100644 --- a/src/common/system-ca.ts +++ b/src/common/system-ca.ts @@ -6,7 +6,7 @@ import logger from "../main/logger"; if (isMac) { for (const crt of macca.all()) { const attributes = crt.issuer?.attributes?.map((a: any) => `${a.name}=${a.value}`); - logger.debug("Using host CA: " + attributes.join(",")); + logger.debug(`Using host CA: ${attributes.join(",")}`); } } if (isWindows) { diff --git a/src/main/helm/helm-cli.ts b/src/main/helm/helm-cli.ts index c06386a1a8..90ad78ba1d 100644 --- a/src/main/helm/helm-cli.ts +++ b/src/main/helm/helm-cli.ts @@ -28,7 +28,7 @@ export class HelmCli extends LensBinary { } protected getOriginalBinaryPath() { - return path.join(this.dirname, this.platformName + "-" + this.arch, this.originalBinaryName); + return path.join(this.dirname, `${this.platformName}-${this.arch}`, this.originalBinaryName); } } diff --git a/src/main/kubeconfig-manager.ts b/src/main/kubeconfig-manager.ts index 4cbc060f7f..b0251264e7 100644 --- a/src/main/kubeconfig-manager.ts +++ b/src/main/kubeconfig-manager.ts @@ -81,7 +81,7 @@ export class KubeconfigManager { return; } - logger.info("Deleting temporary kubeconfig: " + this.tempFile); + logger.info(`Deleting temporary kubeconfig: ${this.tempFile}`); await fs.unlink(this.tempFile); this.tempFile = undefined; } diff --git a/src/main/kubectl.ts b/src/main/kubectl.ts index d0e190438d..ee059bde5b 100644 --- a/src/main/kubectl.ts +++ b/src/main/kubectl.ts @@ -81,10 +81,10 @@ export class Kubectl { if the version map includes that, use that version, if not, fallback to the exact x.y.z of kube version */ if (kubectlMap.has(minorVersion)) { this.kubectlVersion = kubectlMap.get(minorVersion); - logger.debug("Set kubectl version " + this.kubectlVersion + " for cluster version " + clusterVersion + " using version map"); + logger.debug(`Set kubectl version ${this.kubectlVersion} for cluster version ${clusterVersion} using version map`); } else { this.kubectlVersion = versionParts[1] + versionParts[2]; - logger.debug("Set kubectl version " + this.kubectlVersion + " for cluster version " + clusterVersion + " using fallback"); + logger.debug(`Set kubectl version ${this.kubectlVersion} for cluster version ${clusterVersion} using fallback`); } let arch = null; @@ -197,7 +197,7 @@ export class Kubectl { } return true; } catch (err) { - logger.error("Could not copy the bundled kubectl to app-data: " + err); + logger.error(`Could not copy the bundled kubectl to app-data: ${err}`); return false; } } else { @@ -280,7 +280,7 @@ export class Kubectl { const fsPromises = fs.promises; const bashScriptPath = path.join(this.dirname, ".bash_set_path"); - let bashScript = "" + initScriptVersionString; + let bashScript = `${initScriptVersionString}`; bashScript += "tempkubeconfig=\"$KUBECONFIG\"\n"; bashScript += "test -f \"/etc/profile\" && . \"/etc/profile\"\n"; bashScript += "if test -f \"$HOME/.bash_profile\"; then\n"; @@ -303,7 +303,7 @@ export class Kubectl { const zshScriptPath = path.join(this.dirname, ".zlogin"); - let zshScript = "" + initScriptVersionString; + let zshScript = `${initScriptVersionString}`; zshScript += "tempkubeconfig=\"$KUBECONFIG\"\n"; // restore previous ZDOTDIR diff --git a/src/main/lens-binary.ts b/src/main/lens-binary.ts index 7b0cae23c7..bdd4c7ee62 100644 --- a/src/main/lens-binary.ts +++ b/src/main/lens-binary.ts @@ -51,8 +51,8 @@ export class LensBinary { this.platformName = isWindows ? "windows" : process.platform; this.dirname = path.normalize(path.join(baseDir, this.binaryName)); if (isWindows) { - this.binaryName = this.binaryName + ".exe"; - this.originalBinaryName = this.originalBinaryName + ".exe"; + this.binaryName = `${this.binaryName}.exe`; + this.originalBinaryName = `${this.originalBinaryName}.exe`; } const tarName = this.getTarName(); if (tarName) { diff --git a/src/main/lens-proxy.ts b/src/main/lens-proxy.ts index 305312f90c..3f9433026c 100644 --- a/src/main/lens-proxy.ts +++ b/src/main/lens-proxy.ts @@ -95,7 +95,7 @@ export class LensProxy { socket.end(); }); proxySocket.on("error", function () { - socket.write("HTTP/" + req.httpVersion + " 500 Connection error\r\n\r\n"); + socket.write(`HTTP/${req.httpVersion} 500 Connection error\r\n\r\n`); socket.end(); }); socket.on("data", function (chunk) { @@ -117,7 +117,7 @@ export class LensProxy { return; } if (target) { - logger.debug("Failed proxy to target: " + JSON.stringify(target, null, 2)); + logger.debug(`Failed proxy to target: ${JSON.stringify(target, null, 2)}`); if (req.method === "GET" && (!res.statusCode || res.statusCode >= 500)) { const reqId = this.getRequestId(req); const retryCount = this.retryCounters.get(reqId) || 0; diff --git a/src/main/resource-applier.ts b/src/main/resource-applier.ts index 24812a3102..c919185ae9 100644 --- a/src/main/resource-applier.ts +++ b/src/main/resource-applier.ts @@ -26,7 +26,7 @@ export class ResourceApplier { const fileName = tempy.file({ name: "resource.yaml" }); fs.writeFileSync(fileName, content); const cmd = `"${kubectlPath}" apply --kubeconfig "${this.cluster.getProxyKubeconfigPath()}" -o json -f "${fileName}"`; - logger.debug("shooting manifests with: " + cmd); + logger.debug(`shooting manifests with: ${cmd}`); const execEnv: NodeJS.ProcessEnv = Object.assign({}, process.env); const httpsProxy = this.cluster.preferences?.httpsProxy; if (httpsProxy) { @@ -58,7 +58,7 @@ export class ResourceApplier { console.log("shooting manifests with:", cmd); exec(cmd, (error, stdout, stderr) => { if (error) { - reject("Error applying manifests:" + error); + reject(`Error applying manifests:${error}`); } if (stderr != "") { reject(stderr); diff --git a/src/main/router.ts b/src/main/router.ts index 27a25fa50f..f8aa76043d 100644 --- a/src/main/router.ts +++ b/src/main/router.ts @@ -102,7 +102,7 @@ export class Router { // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support) const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node"); if (isDevelopment && toWebpackDevServer) { - const redirectLocation = `http://localhost:${webpackDevServerPort}` + req.url; + const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`; res.statusCode = 307; res.setHeader("Location", redirectLocation); res.end(); diff --git a/src/main/routes/watch-route.ts b/src/main/routes/watch-route.ts index 52aec70b4c..d44d5cae7b 100644 --- a/src/main/routes/watch-route.ts +++ b/src/main/routes/watch-route.ts @@ -37,7 +37,7 @@ class ApiWatcher { if (this.processor) { clearInterval(this.processor); } - logger.debug("Stopping watcher for api: " + this.apiUrl); + logger.debug(`Stopping watcher for api: ${this.apiUrl}`); try { this.watchRequest.abort(); this.sendEvent({ @@ -47,7 +47,7 @@ class ApiWatcher { }); logger.debug("watch aborted"); } catch (error) { - logger.error("Watch abort errored:" + error); + logger.error(`Watch abort errored:${error}`); } } @@ -59,7 +59,7 @@ class ApiWatcher { } private doneHandler(error: Error) { - if (error) logger.warn("watch ended: " + error.toString()); + if (error) logger.warn(`watch ended: ${error.toString()}`); this.watchRequest.abort(); } @@ -87,7 +87,7 @@ class WatchRoute extends LensApi { response.setHeader("Content-Type", "text/event-stream"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Connection", "keep-alive"); - logger.debug("watch using kubeconfig:" + JSON.stringify(cluster.getProxyKubeconfig(), null, 2)); + logger.debug(`watch using kubeconfig:${JSON.stringify(cluster.getProxyKubeconfig(), null, 2)}`); apis.forEach(apiUrl => { const watcher = new ApiWatcher(apiUrl, cluster.getProxyKubeconfig(), response); diff --git a/src/main/shell-session.ts b/src/main/shell-session.ts index e5aaa0991f..69979a51e3 100644 --- a/src/main/shell-session.ts +++ b/src/main/shell-session.ts @@ -203,6 +203,6 @@ export class ShellSession extends EventEmitter { } protected sendResponse(msg: string) { - this.websocket.send("1" + Buffer.from(msg).toString("base64")); + this.websocket.send(`1${Buffer.from(msg).toString("base64")}`); } } diff --git a/src/renderer/api/endpoints/deployment.api.ts b/src/renderer/api/endpoints/deployment.api.ts index 5c0fd039df..e3572a0bc4 100644 --- a/src/renderer/api/endpoints/deployment.api.ts +++ b/src/renderer/api/endpoints/deployment.api.ts @@ -6,7 +6,7 @@ import { KubeApi } from "../kube-api"; export class DeploymentApi extends KubeApi { protected getScaleApiUrl(params: { namespace: string; name: string }) { - return this.getUrl(params) + "/scale"; + return `${this.getUrl(params)}/scale`; } getReplicas(params: { namespace: string; name: string }): Promise { diff --git a/src/renderer/api/endpoints/helm-charts.api.ts b/src/renderer/api/endpoints/helm-charts.api.ts index e6328f136b..2964d18db2 100644 --- a/src/renderer/api/endpoints/helm-charts.api.ts +++ b/src/renderer/api/endpoints/helm-charts.api.ts @@ -34,7 +34,7 @@ export const helmChartsApi = { get(repo: string, name: string, readmeVersion?: string) { const path = endpoint({ repo, name }); return apiBase - .get(path + "?" + stringify({ version: readmeVersion })) + .get(`${path}?${stringify({ version: readmeVersion })}`) .then(data => { const versions = data.versions.map(HelmChart.create); const readme = data.readme; @@ -47,7 +47,7 @@ export const helmChartsApi = { getValues(repo: string, name: string, version: string) { return apiBase - .get(`/v2/charts/${repo}/${name}/values?` + stringify({ version })); + .get(`/v2/charts/${repo}/${name}/values?${stringify({ version })}`); } }; diff --git a/src/renderer/api/endpoints/helm-releases.api.ts b/src/renderer/api/endpoints/helm-releases.api.ts index 1969919e6c..b93d29caa9 100644 --- a/src/renderer/api/endpoints/helm-releases.api.ts +++ b/src/renderer/api/endpoints/helm-releases.api.ts @@ -106,17 +106,17 @@ export const helmReleasesApi = { }, getValues(name: string, namespace: string) { - const path = endpoint({ name, namespace }) + "/values"; + const path = `${endpoint({ name, namespace })}/values`; return apiBase.get(path); }, getHistory(name: string, namespace: string): Promise { - const path = endpoint({ name, namespace }) + "/history"; + const path = `${endpoint({ name, namespace })}/history`; return apiBase.get(path); }, rollback(name: string, namespace: string, revision: number) { - const path = endpoint({ name, namespace }) + "/rollback"; + const path = `${endpoint({ name, namespace })}/rollback`; return apiBase.put(path, { data: { revision diff --git a/src/renderer/api/endpoints/ingress.api.ts b/src/renderer/api/endpoints/ingress.api.ts index a476b29efa..5832dc55db 100644 --- a/src/renderer/api/endpoints/ingress.api.ts +++ b/src/renderer/api/endpoints/ingress.api.ts @@ -111,7 +111,7 @@ export class Ingress extends KubeObject { rule.http.paths.forEach(path => { const { serviceName, servicePort } = getBackendServiceNamePort(path.backend); - routes.push(protocol + "://" + host + (path.path || "/") + " ⇢ " + serviceName + ":" + servicePort); + routes.push(`${protocol}://${host}${path.path || "/"} ⇢ ${serviceName}:${servicePort}`); }); } }); diff --git a/src/renderer/api/endpoints/pods.api.ts b/src/renderer/api/endpoints/pods.api.ts index a5c833b5fa..3f62a3a952 100644 --- a/src/renderer/api/endpoints/pods.api.ts +++ b/src/renderer/api/endpoints/pods.api.ts @@ -5,7 +5,7 @@ import { KubeApi } from "../kube-api"; export class PodsApi extends KubeApi { async getLogs(params: { namespace: string; name: string }, query?: IPodLogsQuery): Promise { - const path = this.getUrl(params) + "/log"; + const path = `${this.getUrl(params)}/log`; return this.request.get(path, { query }); } diff --git a/src/renderer/api/endpoints/service.api.ts b/src/renderer/api/endpoints/service.api.ts index 5524e85263..219e02ab5d 100644 --- a/src/renderer/api/endpoints/service.api.ts +++ b/src/renderer/api/endpoints/service.api.ts @@ -24,7 +24,7 @@ export class ServicePort implements IServicePort { if (this.nodePort) { return `${this.port}:${this.nodePort}/${this.protocol}`; } else { - return `${this.port}${this.port === this.targetPort ? "" : ":" + this.targetPort}/${this.protocol}`; + return `${this.port}${this.port === this.targetPort ? "" : `:${this.targetPort}`}/${this.protocol}`; } } } diff --git a/src/renderer/api/endpoints/stateful-set.api.ts b/src/renderer/api/endpoints/stateful-set.api.ts index 0f3728b218..72c2ea5776 100644 --- a/src/renderer/api/endpoints/stateful-set.api.ts +++ b/src/renderer/api/endpoints/stateful-set.api.ts @@ -6,7 +6,7 @@ import { KubeApi } from "../kube-api"; export class StatefulSetApi extends KubeApi { protected getScaleApiUrl(params: { namespace: string; name: string }) { - return this.getUrl(params) + "/scale"; + return `${this.getUrl(params)}/scale`; } getReplicas(params: { namespace: string; name: string }): Promise { diff --git a/src/renderer/api/kube-api.ts b/src/renderer/api/kube-api.ts index 7350bfc729..ae558f0bf1 100644 --- a/src/renderer/api/kube-api.ts +++ b/src/renderer/api/kube-api.ts @@ -230,7 +230,7 @@ export class KubeApi { namespace: this.isNamespaced ? namespace : undefined, name, }); - return resourcePath + (query ? `?` + stringify(this.normalizeQuery(query)) : ""); + return resourcePath + (query ? `?${stringify(this.normalizeQuery(query))}` : ""); } protected normalizeQuery(query: Partial = {}) { diff --git a/src/renderer/api/kube-watch-api.ts b/src/renderer/api/kube-watch-api.ts index 30875220e1..8d5a318c3c 100644 --- a/src/renderer/api/kube-watch-api.ts +++ b/src/renderer/api/kube-watch-api.ts @@ -78,7 +78,7 @@ export class KubeWatchApi { return; } const query = this.getQuery(); - const apiUrl = `${apiPrefix}/watch?` + stringify(query); + const apiUrl = `${apiPrefix}/watch?${stringify(query)}`; this.evtSource = new EventSource(apiUrl); this.evtSource.onmessage = this.onMessage; this.evtSource.onerror = this.onError; diff --git a/src/renderer/api/terminal-api.ts b/src/renderer/api/terminal-api.ts index 6f28b53aa2..39a86faae5 100644 --- a/src/renderer/api/terminal-api.ts +++ b/src/renderer/api/terminal-api.ts @@ -130,7 +130,7 @@ export class TerminalApi extends WebSocketApi { } let time; if (showTime) { - time = (new Date()).toLocaleString() + " "; + time = `${(new Date()).toLocaleString()} `; } this.onData.emit(`${showTime ? time : ""}${data}\r\n`); } diff --git a/src/renderer/api/websocket-api.ts b/src/renderer/api/websocket-api.ts index 6bc915b5af..b9e0c22c96 100644 --- a/src/renderer/api/websocket-api.ts +++ b/src/renderer/api/websocket-api.ts @@ -88,7 +88,7 @@ export class WebSocketApi { reconnect() { const { reconnectDelaySeconds } = this.params; if (!reconnectDelaySeconds) return; - this.writeLog("reconnect after", reconnectDelaySeconds + "ms"); + this.writeLog("reconnect after", `${reconnectDelaySeconds}ms`); this.reconnectTimer = setTimeout(() => this.connect(), reconnectDelaySeconds * 1000); this.readyState = WebSocketApiState.RECONNECTING; } diff --git a/src/renderer/components/+apps-helm-charts/helm-charts.route.ts b/src/renderer/components/+apps-helm-charts/helm-charts.route.ts index abd0677de8..9b8aecc499 100644 --- a/src/renderer/components/+apps-helm-charts/helm-charts.route.ts +++ b/src/renderer/components/+apps-helm-charts/helm-charts.route.ts @@ -3,7 +3,7 @@ import { buildURL } from "../../../common/utils/buildUrl"; import { appsRoute } from "../+apps/apps.route"; export const helmChartsRoute: RouteProps = { - path: appsRoute.path + "/charts/:repo?/:chartName?" + path: `${appsRoute.path}/charts/:repo?/:chartName?` }; export interface IHelmChartsRouteParams { diff --git a/src/renderer/components/+apps-releases/release.route.ts b/src/renderer/components/+apps-releases/release.route.ts index a992383657..61c41b37ff 100644 --- a/src/renderer/components/+apps-releases/release.route.ts +++ b/src/renderer/components/+apps-releases/release.route.ts @@ -3,7 +3,7 @@ import { buildURL } from "../../../common/utils/buildUrl"; import { appsRoute } from "../+apps/apps.route"; export const releaseRoute: RouteProps = { - path: appsRoute.path + "/releases/:namespace?/:name?" + path: `${appsRoute.path}/releases/:namespace?/:name?` }; export interface IReleaseRouteParams { diff --git a/src/renderer/components/+cluster/cluster-metrics.tsx b/src/renderer/components/+cluster/cluster-metrics.tsx index fecddde7e6..52e1defc29 100644 --- a/src/renderer/components/+cluster/cluster-metrics.tsx +++ b/src/renderer/components/+cluster/cluster-metrics.tsx @@ -25,7 +25,7 @@ export const ClusterMetrics = observer(() => { const datasets = [{ id: metricType + metricNodeRole, - label: metricType.toUpperCase() + " usage", + label: `${metricType.toUpperCase()} usage`, borderColor: colors[metricType], data }]; diff --git a/src/renderer/components/+cluster/cluster-pie-charts.tsx b/src/renderer/components/+cluster/cluster-pie-charts.tsx index 340a0b6032..81adad0936 100644 --- a/src/renderer/components/+cluster/cluster-pie-charts.tsx +++ b/src/renderer/components/+cluster/cluster-pie-charts.tsx @@ -73,10 +73,10 @@ export const ClusterPieCharts = observer(() => { }, ], labels: [ - i18n._(t`Usage`) + `: ${cpuUsage ? cpuUsage.toFixed(2) : "N/A"}`, - i18n._(t`Requests`) + `: ${cpuRequests ? cpuRequests.toFixed(2) : "N/A"}`, - i18n._(t`Limits`) + `: ${cpuLimits ? cpuLimits.toFixed(2) : "N/A"}`, - i18n._(t`Capacity`) + `: ${cpuCapacity || "N/A"}` + `${i18n._(t`Usage`)}: ${cpuUsage ? cpuUsage.toFixed(2) : "N/A"}`, + `${i18n._(t`Requests`)}: ${cpuRequests ? cpuRequests.toFixed(2) : "N/A"}`, + `${i18n._(t`Limits`)}: ${cpuLimits ? cpuLimits.toFixed(2) : "N/A"}`, + `${i18n._(t`Capacity`)}: ${cpuCapacity || "N/A"}` ] }; const memoryData: ChartData = { @@ -116,10 +116,10 @@ export const ClusterPieCharts = observer(() => { }, ], labels: [ - i18n._(t`Usage`) + `: ${bytesToUnits(memoryUsage)}`, - i18n._(t`Requests`) + `: ${bytesToUnits(memoryRequests)}`, - i18n._(t`Limits`) + `: ${bytesToUnits(memoryLimits)}`, - i18n._(t`Capacity`) + `: ${bytesToUnits(memoryCapacity)}`, + `${i18n._(t`Usage`)}: ${bytesToUnits(memoryUsage)}`, + `${i18n._(t`Requests`)}: ${bytesToUnits(memoryRequests)}`, + `${i18n._(t`Limits`)}: ${bytesToUnits(memoryLimits)}`, + `${i18n._(t`Capacity`)}: ${bytesToUnits(memoryCapacity)}`, ] }; const podsData: ChartData = { @@ -137,8 +137,8 @@ export const ClusterPieCharts = observer(() => { }, ], labels: [ - i18n._(t`Usage`) + `: ${podUsage || 0}`, - i18n._(t`Capacity`) + `: ${podCapacity}`, + `${i18n._(t`Usage`)}: ${podUsage || 0}`, + `${i18n._(t`Capacity`)}: ${podCapacity}`, ] }; return ( diff --git a/src/renderer/components/+config-resource-quotas/resource-quota-details.tsx b/src/renderer/components/+config-resource-quotas/resource-quota-details.tsx index 38309efac1..f6e388f7b1 100644 --- a/src/renderer/components/+config-resource-quotas/resource-quota-details.tsx +++ b/src/renderer/components/+config-resource-quotas/resource-quota-details.tsx @@ -46,7 +46,7 @@ function renderQuotas(quota: ResourceQuota): JSX.Element[] { max={max} value={current} tooltip={ -

Set: {value}. Usage: {usage + "%"}

+

Set: {value}. Usage: {`${usage}%`}

} /> diff --git a/src/renderer/components/+custom-resources/crd.route.ts b/src/renderer/components/+custom-resources/crd.route.ts index fc819d6560..573f8e6446 100644 --- a/src/renderer/components/+custom-resources/crd.route.ts +++ b/src/renderer/components/+custom-resources/crd.route.ts @@ -6,11 +6,11 @@ export const crdRoute: RouteProps = { }; export const crdDefinitionsRoute: RouteProps = { - path: crdRoute.path + "/definitions" + path: `${crdRoute.path}/definitions` }; export const crdResourcesRoute: RouteProps = { - path: crdRoute.path + "/:group/:name" + path: `${crdRoute.path}/:group/:name` }; export interface ICRDListQuery { diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx index b0b0ca27ca..bfcf46ccb6 100644 --- a/src/renderer/components/+extensions/extensions.tsx +++ b/src/renderer/components/+extensions/extensions.tsx @@ -303,7 +303,7 @@ export class Extensions extends React.Component { async unpackExtension({ fileName, tempFile, manifest: { name, version } }: InstallRequestValidated) { const displayName = extensionDisplayName(name, version); const extensionFolder = this.getExtensionDestFolder(name); - const unpackingTempFolder = path.join(path.dirname(tempFile), path.basename(tempFile) + "-unpacked"); + const unpackingTempFolder = path.join(path.dirname(tempFile), `${path.basename(tempFile)}-unpacked`); const extensionId = path.join(extensionDiscovery.nodeModulesPath, name, "package.json"); logger.info(`Unpacking extension ${displayName}`, { fileName, tempFile }); diff --git a/src/renderer/components/+nodes/node-details.tsx b/src/renderer/components/+nodes/node-details.tsx index 94bf0f66df..39412653e3 100644 --- a/src/renderer/components/+nodes/node-details.tsx +++ b/src/renderer/components/+nodes/node-details.tsx @@ -111,7 +111,7 @@ export class NodeDetails extends React.Component { Taints} labelsOnly> { taints.map(({ key, effect, value }) => ( - + )) } diff --git a/src/renderer/components/+nodes/nodes.tsx b/src/renderer/components/+nodes/nodes.tsx index debdcdc3f9..0f4e82a161 100644 --- a/src/renderer/components/+nodes/nodes.tsx +++ b/src/renderer/components/+nodes/nodes.tsx @@ -57,7 +57,7 @@ export class Nodes extends React.Component { value={usage} tooltip={{ preferredPositions: TooltipPosition.BOTTOM, - children: _i18n._(t`CPU:`) + ` ${Math.ceil(usage * 100) / cores}\%, ` + _i18n._(t`cores:`) + ` ${cores}` + children: `${_i18n._(t`CPU:`)} ${Math.ceil(usage * 100) / cores}\%, ${_i18n._(t`cores:`)} ${cores}` }} /> ); @@ -74,7 +74,7 @@ export class Nodes extends React.Component { value={usage} tooltip={{ preferredPositions: TooltipPosition.BOTTOM, - children: _i18n._(t`Memory:`) + ` ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}` + children: `${_i18n._(t`Memory:`)} ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}` }} /> ); @@ -91,7 +91,7 @@ export class Nodes extends React.Component { value={usage} tooltip={{ preferredPositions: TooltipPosition.BOTTOM, - children: _i18n._(t`Disk:`) + ` ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}` + children: `${_i18n._(t`Disk:`)} ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}` }} /> ); diff --git a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx index 69235df25f..1dccb0d295 100644 --- a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx +++ b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx @@ -43,7 +43,7 @@ export class CronJobTriggerDialog extends Component { onOpen = async () => { const { cronjob } = this; - this.jobName = cronjob ? cronjob.getName() + "-manual-" + Math.random().toString(36).slice(2, 7) : ""; + this.jobName = cronjob ? `${cronjob.getName()}-manual-${Math.random().toString(36).slice(2, 7)}` : ""; this.jobName = this.jobName.slice(0, 63); this.ready = true; }; diff --git a/src/renderer/components/+workloads-overview/overview-workload-status.tsx b/src/renderer/components/+workloads-overview/overview-workload-status.tsx index 352083fcc4..2e80b57cc3 100644 --- a/src/renderer/components/+workloads-overview/overview-workload-status.tsx +++ b/src/renderer/components/+workloads-overview/overview-workload-status.tsx @@ -55,7 +55,7 @@ export class OverviewWorkloadStatus extends React.Component { if (val !== 0) { dataset.data.push(val); dataset.backgroundColor.push(this.getStatusColor(key)); - chartData.labels.push(capitalize(key) + ": " + val); + chartData.labels.push(`${capitalize(key)}: ${val}`); } }); chartData.datasets[0] = dataset; diff --git a/src/renderer/components/+workloads-pods/pod-container-port.tsx b/src/renderer/components/+workloads-pods/pod-container-port.tsx index 505cfe355e..d3cb3b62ca 100644 --- a/src/renderer/components/+workloads-pods/pod-container-port.tsx +++ b/src/renderer/components/+workloads-pods/pod-container-port.tsx @@ -39,7 +39,7 @@ export class PodContainerPort extends React.Component { render() { const { port } = this.props; const { name, containerPort, protocol } = port; - const text = (name ? name + ": " : "")+`${containerPort}/${protocol}`; + const text = `${name ? `${name}: ` : ""}${containerPort}/${protocol}`; return (
this.portForward() }> diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx index 1a4cb5393b..2a31ed5d5a 100755 --- a/src/renderer/components/app.tsx +++ b/src/renderer/components/app.tsx @@ -138,12 +138,12 @@ export class App extends React.Component { const tabRoutes = this.getTabLayoutRoutes(menu); if (tabRoutes.length > 0) { const pageComponent = () => ; - return tab.routePath)} />; + return tab.routePath)} />; } else { const page = clusterPageRegistry.getByPageMenuTarget(menu.target); if (page) { const pageComponent = () => ; - return ; + return ; } } }); @@ -153,7 +153,7 @@ export class App extends React.Component { return clusterPageRegistry.getItems().map((page, index) => { const menu = clusterPageMenuRegistry.getByPage(page); if (!menu) { - return ; + return ; } }); } diff --git a/src/renderer/components/chart/pie-chart.tsx b/src/renderer/components/chart/pie-chart.tsx index c2d9473f06..26d35fe449 100644 --- a/src/renderer/components/chart/pie-chart.tsx +++ b/src/renderer/components/chart/pie-chart.tsx @@ -26,7 +26,7 @@ export class PieChart extends React.Component { const metaData = Object.values<{ total: number }>(dataset["_meta"])[0]; const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100); if (isNaN(percent)) return "N/A"; - return percent + "%"; + return `${percent}%`; }, }, filter: ({ datasetIndex, index }, { datasets }) => { diff --git a/src/renderer/components/chart/zebra-stripes.plugin.ts b/src/renderer/components/chart/zebra-stripes.plugin.ts index 6af01c00de..41943db2da 100644 --- a/src/renderer/components/chart/zebra-stripes.plugin.ts +++ b/src/renderer/components/chart/zebra-stripes.plugin.ts @@ -46,10 +46,10 @@ export const ZebraStripes = { 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.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) @@ -89,7 +89,7 @@ export const ZebraStripes = { if (minutes > 0) { // Move position regarding to difference in time const cover = this.getStripesElem(chart); - cover.style.backgroundPositionX = -step * minutes + "px"; + cover.style.backgroundPositionX = `${-step * minutes}px`; } } }; \ No newline at end of file diff --git a/src/renderer/components/checkbox/checkbox.tsx b/src/renderer/components/checkbox/checkbox.tsx index becbf996f0..275f6c9604 100644 --- a/src/renderer/components/checkbox/checkbox.tsx +++ b/src/renderer/components/checkbox/checkbox.tsx @@ -33,7 +33,7 @@ export class Checkbox extends React.PureComponent { inline, checked: value, disabled: this.props.disabled, - ["theme-" + theme]: theme, + [`theme-${theme}`]: theme, }); return (