From 710bc8d446d8ec5b7f9332ba93d4e250dd49fba7 Mon Sep 17 00:00:00 2001 From: atu Date: Thu, 6 Aug 2020 13:31:09 -0700 Subject: [PATCH 1/3] extra components into ts --- client/src/components/donut.tsx | 6 +- ...nodeStatusChart.js => nodeStatusChart.tsx} | 7 +- .../{nodesPanel.js => nodesPanel.tsx} | 54 +++++++++++----- .../{podStatusChart.js => podStatusChart.tsx} | 3 +- .../{podsPanel.js => podsPanel.tsx} | 64 ++++++++++++------- .../{replicasChart.js => replicasChart.tsx} | 3 +- client/src/components/secretValue.tsx | 4 +- 7 files changed, 92 insertions(+), 49 deletions(-) rename client/src/components/{nodeStatusChart.js => nodeStatusChart.tsx} (74%) rename client/src/components/{nodesPanel.js => nodesPanel.tsx} (74%) rename client/src/components/{podStatusChart.js => podStatusChart.tsx} (86%) rename client/src/components/{podsPanel.js => podsPanel.tsx} (71%) rename client/src/components/{replicasChart.js => replicasChart.tsx} (84%) diff --git a/client/src/components/donut.tsx b/client/src/components/donut.tsx index 240ea6e..f6aed4a 100644 --- a/client/src/components/donut.tsx +++ b/client/src/components/donut.tsx @@ -63,9 +63,9 @@ export default class Donut extends Base { return ( - - - + + + ); } diff --git a/client/src/components/nodeStatusChart.js b/client/src/components/nodeStatusChart.tsx similarity index 74% rename from client/src/components/nodeStatusChart.js rename to client/src/components/nodeStatusChart.tsx index 00a76de..a1fa005 100644 --- a/client/src/components/nodeStatusChart.js +++ b/client/src/components/nodeStatusChart.tsx @@ -2,8 +2,9 @@ import _ from 'lodash'; import React from 'react'; import Chart from './chart'; import LoadingChart from './loadingChart'; +import {TODO} from "../utils/types"; -export default function NodeStatusChart({items}) { +export default function NodeStatusChart({items}: {items: TODO[]}) { const readyCount = _.sumBy(items, x => getReadyStatus(x) === 'True' ? 1 : 0); // eslint-disable-line no-confusing-arrow return ( @@ -19,9 +20,9 @@ export default function NodeStatusChart({items}) { ); } -function getReadyStatus({status}) { +function getReadyStatus({status}: {status?: TODO}) { if (!status.conditions) return null; - const ready = status.conditions.find(y => y.type === 'Ready'); + const ready = status.conditions.find((y: TODO) => y.type === 'Ready'); return ready && ready.status; } diff --git a/client/src/components/nodesPanel.js b/client/src/components/nodesPanel.tsx similarity index 74% rename from client/src/components/nodesPanel.js rename to client/src/components/nodesPanel.tsx index 3e4b673..b8a848d 100644 --- a/client/src/components/nodesPanel.js +++ b/client/src/components/nodesPanel.tsx @@ -7,18 +7,38 @@ import {MetadataHeaders, MetadataColumns, TableBody, objectMap} from './listView import {unparseCpu, unparseRam} from '../utils/unitHelpers'; import {getNodeResourceValue, getNodeResourcePercent, getNodeUsagePercent, getNodeUsage, getNodeResourcesAvailable} from '../utils/metricsHelpers'; import getReadyStatus from '../utils/nodeHelpers'; +import {TODO} from "../utils/types"; -export default class NodesPanel extends Base { - constructor(props) { +interface NodesPanelProps { + metrics: TODO; + pods: TODO[]; + items: TODO[]; + sort: TODO; + filter: TODO; +} + +interface NodesPanelStates { + show: {} +} + +export default class NodesPanel extends Base { + private sortByCpuUsage: TODO; + private sortByCpuRequest: TODO; + private sortByCpuLimit: TODO; + private sortByRamUsage: TODO; + private sortByRamRequest: TODO; + private sortByRamLimit: TODO; + + constructor(props: TODO) { super(props); - this.sortByCpuUsage = x => getNodeUsagePercent(x, this.props.metrics, 'cpu'); - this.sortByCpuRequest = x => getNodeResourcePercent(x, this.props.pods, 'cpu', 'requests'); - this.sortByCpuLimit = x => getNodeResourcePercent(x, this.props.pods, 'cpu', 'limits'); + this.sortByCpuUsage = (x: TODO) => getNodeUsagePercent(x, this.props.metrics, 'cpu'); + this.sortByCpuRequest = (x: TODO) => getNodeResourcePercent(x, this.props.pods, 'cpu', 'requests'); + this.sortByCpuLimit = (x: TODO) => getNodeResourcePercent(x, this.props.pods, 'cpu', 'limits'); - this.sortByRamUsage = x => getNodeUsagePercent(x, this.props.metrics, 'memory'); - this.sortByRamRequest = x => getNodeResourcePercent(x, this.props.pods, 'memory', 'requests'); - this.sortByRamLimit = x => getNodeResourcePercent(x, this.props.pods, 'memory', 'limits'); + this.sortByRamUsage = (x: TODO) => getNodeUsagePercent(x, this.props.metrics, 'memory'); + this.sortByRamRequest = (x: TODO) => getNodeResourcePercent(x, this.props.pods, 'memory', 'requests'); + this.sortByRamLimit = (x: TODO) => getNodeResourcePercent(x, this.props.pods, 'memory', 'limits'); } render() { @@ -73,7 +93,7 @@ export default class NodesPanel extends Base { - ( + ( {objectMap(x.metadata.labels)} @@ -94,39 +114,39 @@ export default class NodesPanel extends Base { /** Simple mapping between ready statuses and an UTF-8 symbol character */ -const statusesToUtf8 = {True: '\u2713', False: '\uD83D\uDEC7', Unknown: '\u003F'}; +const statusesToUtf8: {[key: string]: string} = {True: '\u2713', False: '\uD83D\uDEC7', Unknown: '\u003F'}; /** * - * @param {*statusTxt a status text (as returned by getReadyStatus for example) } + * @param statusTxt {*statusTxt a status text (as returned by getReadyStatus for example) } * @returns a dedicated span element with an UTF-8 symbol representing the status */ -function statusSymbol(statusTxt) { +function statusSymbol(statusTxt: string) { const cssClass = `node-ready-status-${statusTxt}`; const utf8Symbol = statusesToUtf8[statusTxt] || statusesToUtf8.Unknown; return {utf8Symbol}; } -function getPercentDisplay(node, metrics, resource) { +function getPercentDisplay(node: TODO, metrics: TODO, resource: string) { const used = getNodeUsage(node, metrics, resource); return percent(node, used, resource); } -function getResourcePercentDisplay(node, pods, resource, type) { +function getResourcePercentDisplay(node: TODO, pods: TODO[], resource: string, type: TODO) { const used = getNodeResourceValue(node, pods, resource, type, ['Running']); return percent(node, used, resource); } -function percent(node, used, resource) { +function percent(node: TODO, used: number | string | null, resource: string) { if (used == null) return ; if (!used) return -; - const unparser = resource === 'cpu' ? unparseCpu : unparseRam; + const unparser: TODO = resource === 'cpu' ? unparseCpu : unparseRam; const result = unparser(used); const available = getNodeResourcesAvailable(node, resource); - const displayPercent = _.round(used / available * 100, 1); + const displayPercent = available? _.round(Number(used) / available * 100, 1): ""; const className = displayPercent >= 85 ? 'contentPanel_warn' : undefined; return ( diff --git a/client/src/components/podStatusChart.js b/client/src/components/podStatusChart.tsx similarity index 86% rename from client/src/components/podStatusChart.js rename to client/src/components/podStatusChart.tsx index 3b4fbc6..572b5e5 100644 --- a/client/src/components/podStatusChart.js +++ b/client/src/components/podStatusChart.tsx @@ -2,8 +2,9 @@ import _ from 'lodash'; import React from 'react'; import Chart from './chart'; import LoadingChart from './loadingChart'; +import {TODO} from "../utils/types"; -export default function PodStatusChart({items}) { +export default function PodStatusChart({items}: {items: TODO[]}) { const available = items && items.length; const count = _.sumBy(items, x => x.status.phase === 'Running' ? 1 : 0); // eslint-disable-line no-confusing-arrow diff --git a/client/src/components/podsPanel.js b/client/src/components/podsPanel.tsx similarity index 71% rename from client/src/components/podsPanel.js rename to client/src/components/podsPanel.tsx index dc8a5ef..56d3e99 100644 --- a/client/src/components/podsPanel.js +++ b/client/src/components/podsPanel.tsx @@ -6,23 +6,43 @@ import LoadingEllipsis from './loadingEllipsis'; import {MetadataHeaders, MetadataColumns, TableBody} from './listViewHelpers'; import {unparseRam, unparseCpu} from '../utils/unitHelpers'; import {getPodResourcePercent, getPodUsage, getPodResourceValue} from '../utils/metricsHelpers'; +import {TODO} from "../utils/types"; -export default class PodsPanel extends Base { - constructor(props) { +interface PodsPanelProps { + metrics: TODO; + pods: TODO[]; + items: TODO[]; + sort: TODO; + filter: TODO; + skipNamespace: boolean; +} + +interface PodsPanelStates { +} + +export default class PodsPanel extends Base { + private sortByCpuUsage: TODO; + private sortByCpuRequest: TODO; + private sortByCpuLimit: TODO; + private sortByRamUsage: TODO; + private sortByRamRequest: TODO; + private sortByRamLimit: TODO; + + constructor(props: TODO) { super(props); - this.sortByCpuUsage = x => getPodUsage(x, this.props.metrics, 'cpu'); - this.sortByCpuRequest = x => sortBy(x, this.props.metrics, 'cpu', 'requests'); - this.sortByCpuLimit = x => sortBy(x, this.props.metrics, 'cpu', 'limits'); + this.sortByCpuUsage = (x: TODO) => getPodUsage(x, this.props.metrics, 'cpu'); + this.sortByCpuRequest = (x: TODO) => sortBy(x, this.props.metrics, 'cpu', 'requests'); + this.sortByCpuLimit = (x: TODO) => sortBy(x, this.props.metrics, 'cpu', 'limits'); - this.sortByRamUsage = x => getPodUsage(x, this.props.metrics, 'memory'); - this.sortByRamRequest = x => sortBy(x, this.props.metrics, 'memory', 'requests'); - this.sortByRamLimit = x => sortBy(x, this.props.metrics, 'memory', 'limits'); + this.sortByRamUsage = (x: TODO) => getPodUsage(x, this.props.metrics, 'memory'); + this.sortByRamRequest = (x: TODO) => sortBy(x, this.props.metrics, 'memory', 'requests'); + this.sortByRamLimit = (x: TODO) => sortBy(x, this.props.metrics, 'memory', 'limits'); } render() { const {items, metrics, sort, filter, skipNamespace} = this.props; - const col = 10 + !skipNamespace; + const col = 10 + Number(!skipNamespace); return (
@@ -70,7 +90,7 @@ export default class PodsPanel extends Base { - ( + ( - {getRawDisplay(item, metrics, actual, resource)} - {getPercentDisplay(item, metrics, actual, resource, 'requests')} - {getPercentDisplay(item, metrics, actual, resource, 'limits')} + {actual && getRawDisplay(item, metrics, actual, resource)} + {actual && getPercentDisplay(item, metrics, actual, resource, 'requests')} + {actual && getPercentDisplay(item, metrics, actual, resource, 'limits')} ); } -function getRawDisplay(item, metrics, actual, resource) { +function getRawDisplay(item: TODO, metrics: TODO, actual: number | string | null, resource: string) { if (!item || !metrics) return ; - const unparser = resource === 'cpu' ? unparseCpu : unparseRam; + const unparser: TODO = resource === 'cpu' ? unparseCpu : unparseRam; const actualResult = unparser(actual); return ( @@ -143,13 +163,13 @@ function getRawDisplay(item, metrics, actual, resource) { ); } -function getPercentDisplay(item, metrics, actual, resource, type) { +function getPercentDisplay(item: TODO, metrics: TODO, actual: number, resource: string, type: TODO) { if (!item || !metrics) return ; const request = getPodResourceValue(item, resource, type); if (!request) return -; - const unparser = resource === 'cpu' ? unparseCpu : unparseRam; + const unparser: TODO = resource === 'cpu' ? unparseCpu : unparseRam; const result = unparser(request); const percent = request ? _.round(actual / request * 100, 1) : 0; const className = percent > 85 ? 'optional_xsmall contentPanel_warn' : 'optional_xsmall'; diff --git a/client/src/components/replicasChart.js b/client/src/components/replicasChart.tsx similarity index 84% rename from client/src/components/replicasChart.js rename to client/src/components/replicasChart.tsx index 6a91138..b024a54 100644 --- a/client/src/components/replicasChart.js +++ b/client/src/components/replicasChart.tsx @@ -1,8 +1,9 @@ import React from 'react'; import Chart from './chart'; import LoadingChart from './loadingChart'; +import {TODO} from "../utils/types"; -export default function ReplicasChart({item}) { +export default function ReplicasChart({item}: {item: TODO}) { return (
{item ? ( diff --git a/client/src/components/secretValue.tsx b/client/src/components/secretValue.tsx index b4b61e3..abd794c 100644 --- a/client/src/components/secretValue.tsx +++ b/client/src/components/secretValue.tsx @@ -15,13 +15,13 @@ interface SecretValueStates { export default class SecretValue extends Base { toggle() { - const {show = {}} = this.state || {}; + const {show = null} = this.state || {}; this.setState({show: !show}); } render() { const {text} = this.props; - const {show = {}} = this.state || {}; + const {show = null} = this.state || {}; return (
From 4b6b80ece3585ba9e4f981fa55d94cda782882c5 Mon Sep 17 00:00:00 2001 From: atu Date: Thu, 6 Aug 2020 15:34:16 -0700 Subject: [PATCH 2/3] extra components into ts --- ...containersPanel.js => containersPanel.tsx} | 9 +++-- client/src/components/{menu.js => menu.tsx} | 40 ++++++++++++++----- 2 files changed, 34 insertions(+), 15 deletions(-) rename client/src/components/{containersPanel.js => containersPanel.tsx} (89%) rename client/src/components/{menu.js => menu.tsx} (87%) diff --git a/client/src/components/containersPanel.js b/client/src/components/containersPanel.tsx similarity index 89% rename from client/src/components/containersPanel.js rename to client/src/components/containersPanel.tsx index 43c85d1..7ee15c1 100644 --- a/client/src/components/containersPanel.js +++ b/client/src/components/containersPanel.tsx @@ -1,8 +1,9 @@ import _ from 'lodash'; import React, {Fragment} from 'react'; import Field from './field'; +import {TODO} from "../utils/types"; -const ContainersPanel = ({spec}) => ( +const ContainersPanel = ({spec}: {spec: TODO}) => ( <> {spec && _.map(spec.containers, item => ( @@ -18,7 +19,7 @@ const ContainersPanel = ({spec}) => ( {item.env && ( - {item.env.map(x => ( + {item.env.map((x: TODO) => (
{x.name}: {getVariableValue(x)}
@@ -42,7 +43,7 @@ const ContainersPanel = ({spec}) => ( {item.ports && ( - {item.ports.map((x, i) => ( + {item.ports.map((x: TODO, i: number) => (
{[x.name, x.containerPort, x.hostPort, x.protocol].filter(y => !!y).join(' • ')}
@@ -55,7 +56,7 @@ const ContainersPanel = ({spec}) => ( ); -function getVariableValue(item) { +function getVariableValue(item: TODO) { if (item.value) return item.value; if (!item.valueFrom) return null; if (item.valueFrom.secretKeyRef) return item.valueFrom.secretKeyRef.key; diff --git a/client/src/components/menu.js b/client/src/components/menu.tsx similarity index 87% rename from client/src/components/menu.js rename to client/src/components/menu.tsx index fb49163..46273e9 100644 --- a/client/src/components/menu.js +++ b/client/src/components/menu.tsx @@ -7,9 +7,27 @@ import api from '../services/api'; import {addHandler} from '../services/auth'; import ResourceSvg from '../art/resourceSvg'; import AddSvg from '../art/addSvg'; +import {TODO} from "../utils/types"; +interface MenuProps { + onClick: TODO; + toggled: boolean; +} -export default class Menu extends Base { +interface MenuStates { + rules: TODO[]; + showAdd: boolean; +} + +interface MenuItemProps { + path: string; + title: string; + resource: string; + onClick: TODO; + additionalPaths?: string[]; +} + +export default class Menu extends Base { componentDidMount() { this.getRules(); @@ -29,7 +47,7 @@ export default class Menu extends Base { return ( <> -
+