From 8ea4bd32a01d76cad3ba76f636ea4d511ab9ea68 Mon Sep 17 00:00:00 2001 From: Eric Herbrandson Date: Tue, 16 Apr 2019 20:05:17 -0500 Subject: [PATCH] A lot of charts work --- client/src/components/base.js | 3 +- client/src/components/eventsPanel.js | 2 +- client/src/components/loadingChart.js | 7 +- client/src/components/loadingChart.scss | 27 ++++++ client/src/components/nodeCpuChart.js | 31 +++++++ client/src/components/nodeRamChart.js | 30 +++++++ .../{cpuChart.js => podCpuChart.js} | 8 +- .../{ramChart.js => podRamChart.js} | 0 client/src/scss/elements/charts.scss | 2 +- client/src/scss/elements/table.scss | 4 + client/src/utils/metricsHelpers.js | 6 +- client/src/views/cronJob.js | 12 +-- client/src/views/daemonSet.js | 12 +-- client/src/views/dashboard.js | 25 ++++-- client/src/views/deployment.js | 12 +-- client/src/views/job.js | 12 +-- client/src/views/namespace.js | 32 +++++++- client/src/views/node.js | 82 ++++++++----------- client/src/views/nodes.js | 72 ++-------------- client/src/views/pod.js | 12 +-- client/src/views/pods.js | 12 +-- client/src/views/replicaSet.js | 12 +-- client/src/views/statefulSet.js | 12 +-- client/src/views/workloads.js | 8 +- 24 files changed, 248 insertions(+), 187 deletions(-) create mode 100644 client/src/components/loadingChart.scss create mode 100644 client/src/components/nodeCpuChart.js create mode 100644 client/src/components/nodeRamChart.js rename client/src/components/{cpuChart.js => podCpuChart.js} (87%) rename client/src/components/{ramChart.js => podRamChart.js} (100%) diff --git a/client/src/components/base.js b/client/src/components/base.js index 42b3ed5..8dc9226 100644 --- a/client/src/components/base.js +++ b/client/src/components/base.js @@ -16,7 +16,8 @@ export default class Base extends Component { } async clearDisposers() { - for (const name of Object.keys(this.apis || {})) { + const keys = Object.keys(this.apis || {}); + for (const name of keys) { this.clearDisposer(name); } } diff --git a/client/src/components/eventsPanel.js b/client/src/components/eventsPanel.js index 9b0e486..792d287 100644 --- a/client/src/components/eventsPanel.js +++ b/client/src/components/eventsPanel.js @@ -46,7 +46,7 @@ export default function EventsPanel({items, filter, shortList, sort}) {
{x.involvedObject.kind}
{!shortList && ( - {x.involvedObject.namespace}:{x.involvedObject.name} + {x.involvedObject.namespace}:{x.involvedObject.name} )} {moment(x.metadata.creationTimestamp).fromNow(true)} {x.reason} diff --git a/client/src/components/loadingChart.js b/client/src/components/loadingChart.js index 9ec7375..30b23b9 100644 --- a/client/src/components/loadingChart.js +++ b/client/src/components/loadingChart.js @@ -1,3 +1,4 @@ +import './loadingChart.scss'; import React from 'react'; import ChartistGraph from 'react-chartist'; @@ -13,8 +14,10 @@ export default function Chart() { return (
- - ... + + . + . + .
); diff --git a/client/src/components/loadingChart.scss b/client/src/components/loadingChart.scss new file mode 100644 index 0000000..06b6753 --- /dev/null +++ b/client/src/components/loadingChart.scss @@ -0,0 +1,27 @@ + +.loadingChart span { + animation-name: blink; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-fill-mode: both; +} + +@keyframes blink { + 0% { + opacity: .1; + } + 50% { + opacity: 1; + } + 100% { + opacity: .1; + } +} + +.loadingChart span:nth-child(2) { + animation-delay: 0.2s; +} + +.loadingChart span:nth-child(3) { + animation-delay: 0.4s; +} \ No newline at end of file diff --git a/client/src/components/nodeCpuChart.js b/client/src/components/nodeCpuChart.js new file mode 100644 index 0000000..2fd5ab7 --- /dev/null +++ b/client/src/components/nodeCpuChart.js @@ -0,0 +1,31 @@ +import _ from 'lodash'; +import React from 'react'; +import Chart from './chart'; +import LoadingChart from './loadingChart'; +import {parseCpu, TO_ONE_CPU} from '../utils/unitHelpers'; + +export default function NodeCpuChart({items, metrics}) { + const totals = getNodeCpuTotals(items, metrics); + + return ( +
+ {totals ? ( + + ) : ( + + )} +
Node Cpu Use
+
Used vs Available
+
+ ); +} + +function getNodeCpuTotals(items, metrics) { + if (!items || !metrics) return null; + + const metricValues = Object.values(metrics); + const used = _.sumBy(metricValues, x => parseCpu(x.usage.cpu)) / TO_ONE_CPU; + const available = _.sumBy(items, x => parseCpu(x.status.capacity.cpu)) / TO_ONE_CPU; + + return {used, available}; +} diff --git a/client/src/components/nodeRamChart.js b/client/src/components/nodeRamChart.js new file mode 100644 index 0000000..051dbcb --- /dev/null +++ b/client/src/components/nodeRamChart.js @@ -0,0 +1,30 @@ +import _ from 'lodash'; +import React from 'react'; +import Chart from './chart'; +import LoadingChart from './loadingChart'; +import {parseRam, TO_GB} from '../utils/unitHelpers'; + +export default function NodeRamChart({items, metrics}) { + const totals = getNodeRamTotals(items, metrics); + return ( +
+ {totals ? ( + + ) : ( + + )} +
Node Ram Use
+
Used vs Available
+
+ ); +} + +function getNodeRamTotals(items, metrics) { + if (!items || !metrics) return null; + + const metricValues = Object.values(metrics); + const used = _.sumBy(metricValues, x => parseRam(x.usage.memory)) / TO_GB; + const available = _.sumBy(items, x => parseRam(x.status.capacity.memory)) / TO_GB; + + return {used, available}; +} diff --git a/client/src/components/cpuChart.js b/client/src/components/podCpuChart.js similarity index 87% rename from client/src/components/cpuChart.js rename to client/src/components/podCpuChart.js index 950c5f8..584d061 100644 --- a/client/src/components/cpuChart.js +++ b/client/src/components/podCpuChart.js @@ -4,7 +4,7 @@ import Chart from './chart'; import LoadingChart from './loadingChart'; import {parseCpu, TO_ONE_CPU} from '../utils/unitHelpers'; -export default function CpuChart({items, metrics}) { +export default function PodCpuChart({items, metrics}) { const totals = getPodCpuTotals(items, metrics); const decimals = totals && totals.used > 10 ? 1 : 2; @@ -25,14 +25,14 @@ export default function CpuChart({items, metrics}) { ); } -function getPodCpuTotals(items, metrics) { - if (!items || !metrics) return null; +function getPodCpuTotals(pods, metrics) { + if (!pods || !metrics) return null; const used = _(metrics) .flatMap(x => x.containers) .sumBy(x => parseCpu(x.usage.cpu)); - const available = _(items) + const available = _(pods) .flatMap(x => x.spec.containers) .filter(x => x.resources && x.resources.requests) .sumBy(x => parseCpu(x.resources.requests.cpu)); diff --git a/client/src/components/ramChart.js b/client/src/components/podRamChart.js similarity index 100% rename from client/src/components/ramChart.js rename to client/src/components/podRamChart.js diff --git a/client/src/scss/elements/charts.scss b/client/src/scss/elements/charts.scss index 944fe32..1500128 100644 --- a/client/src/scss/elements/charts.scss +++ b/client/src/scss/elements/charts.scss @@ -20,7 +20,7 @@ $ct-series-colors: ( .charts_item { color: $color-dark; - box-shadow: 0 0 5px 0 $color-dark; + box-shadow: 0 0 5px 0 $color-light; background-color: $color-white; display: flex; justify-content: space-around; diff --git a/client/src/scss/elements/table.scss b/client/src/scss/elements/table.scss index 0250a29..4f3f915 100644 --- a/client/src/scss/elements/table.scss +++ b/client/src/scss/elements/table.scss @@ -53,4 +53,8 @@ td { .wrapped > tbody > tr > td { padding: 0.25rem; } + + .wrapped .wrapped_name { + font-weight: bold; + } } diff --git a/client/src/utils/metricsHelpers.js b/client/src/utils/metricsHelpers.js index acab680..20b9070 100644 --- a/client/src/utils/metricsHelpers.js +++ b/client/src/utils/metricsHelpers.js @@ -1,9 +1,9 @@ import _ from 'lodash'; -export default function getPodMetrics(pods, metrics) { - if (!pods || !metrics) return null; +export default function getMetrics(items, metrics) { + if (!items || !metrics) return null; - const names = _.map(pods, x => x.metadata.name); + const names = _.map(items, x => x.metadata.name); const filteredMetrics = metrics.filter(x => names.includes(x.metadata.name)); return _.keyBy(filteredMetrics, 'metadata.name'); diff --git a/client/src/views/cronJob.js b/client/src/views/cronJob.js index 572fb88..c68da26 100644 --- a/client/src/views/cronJob.js +++ b/client/src/views/cronJob.js @@ -1,7 +1,7 @@ import React from 'react'; import Base from '../components/base'; import ContainersPanel from '../components/containersPanel'; -import CpuChart from '../components/cpuChart'; +import PodCpuChart from '../components/podCpuChart'; import DeleteButton from '../components/deleteButton'; import EventsPanel from '../components/eventsPanel'; import Field from '../components/field'; @@ -9,10 +9,10 @@ import ItemHeader from '../components/itemHeader'; import Loading from '../components/loading'; import MetadataFields from '../components/metadataFields'; import PodsPanel from '../components/podsPanel'; -import RamChart from '../components/ramChart'; +import PodRamChart from '../components/podRamChart'; import SaveButton from '../components/saveButton'; import api from '../services/api'; -import getPodMetrics from '../utils/metricsHelpers'; +import getMetrics from '../utils/metricsHelpers'; import {filterByOwner} from '../utils/filterHelper'; import {defaultSortInfo} from '../components/sorter'; import ChartsContainer from '../components/chartsContainer'; @@ -42,7 +42,7 @@ export default class CronJob extends Base { const filteredPods = filterByOwner(pods, item); const filteredEvents = filterByOwner(events, item); - const filteredMetrics = getPodMetrics(filteredPods, metrics); + const filteredMetrics = getMetrics(filteredPods, metrics); return (
@@ -64,8 +64,8 @@ export default class CronJob extends Base {
{(item && item.status.active) ? item.status.active.length : 0}
Active
- - + +
diff --git a/client/src/views/daemonSet.js b/client/src/views/daemonSet.js index c3d5e0b..caaa7a7 100644 --- a/client/src/views/daemonSet.js +++ b/client/src/views/daemonSet.js @@ -10,9 +10,9 @@ import EventsPanel from '../components/eventsPanel'; import PodsPanel from '../components/podsPanel'; import Chart from '../components/chart'; import LoadingChart from '../components/loadingChart'; -import RamChart from '../components/ramChart'; -import CpuChart from '../components/cpuChart'; -import getPodMetrics from '../utils/metricsHelpers'; +import PodRamChart from '../components/podRamChart'; +import PodCpuChart from '../components/podCpuChart'; +import getMetrics from '../utils/metricsHelpers'; import {filterByOwner} from '../utils/filterHelper'; import ContainersPanel from '../components/containersPanel'; import {defaultSortInfo} from '../components/sorter'; @@ -43,7 +43,7 @@ export default class DaemonSet extends Base { const filteredPods = filterByOwner(pods, item); const filteredEvents = filterByOwner(events, item); - const filteredMetrics = getPodMetrics(filteredPods, metrics); + const filteredMetrics = getMetrics(filteredPods, metrics); return (
@@ -74,8 +74,8 @@ export default class DaemonSet extends Base {
Replicas
Ready vs Requested
- - + +
diff --git a/client/src/views/dashboard.js b/client/src/views/dashboard.js index 660fcfa..0429828 100644 --- a/client/src/views/dashboard.js +++ b/client/src/views/dashboard.js @@ -8,9 +8,11 @@ import NodeStatusChart from '../components/nodeStatusChart'; import test from '../utils/filterHelper'; import {defaultSortInfo, sortByDate} from '../components/sorter'; import PodStatusChart from '../components/podStatusChart'; -import CpuChart from '../components/cpuChart'; -import RamChart from '../components/ramChart'; -import getPodMetrics from '../utils/metricsHelpers'; +import PodCpuChart from '../components/podCpuChart'; +import PodRamChart from '../components/podRamChart'; +import NodeCpuChart from '../components/nodeCpuChart'; +import NodeRamChart from '../components/nodeRamChart'; +import getMetrics from '../utils/metricsHelpers'; export default class Dashboard extends Base { state = { @@ -24,13 +26,15 @@ export default class Dashboard extends Base { pods: api.pod.list(null, pods => this.setState({pods})), podMetrics: api.metrics.pods(null, podMetrics => this.setState({podMetrics})), nodes: api.node.list(nodes => this.setState({nodes})), + nodeMetrics: api.metrics.nodes(nodeMetrics => this.setState({nodeMetrics})), }); } render() { - const {events, pods, podMetrics, nodes, sort, filter} = this.state; + const {events, pods, podMetrics, nodes, nodeMetrics, sort, filter} = this.state; const filteredEvents = filterEvents(events, filter); - const filteredPodMetrics = getPodMetrics(pods, podMetrics); + const filteredPodMetrics = getMetrics(pods, podMetrics); + const filteredNodeMetrics = getMetrics(nodes, nodeMetrics); return (
@@ -42,9 +46,14 @@ export default class Dashboard extends Base { + + + + + - - + +
Events
@@ -58,6 +67,6 @@ function filterEvents(events, filter) { if (!events) return null; return events - .filter(x => test(filter, x.involvedObject.name, x.involvedObject.namespace, x.message)) + .filter(x => test(filter, x.involvedObject.name, x.reason, x.message)) .slice(0, 250); } diff --git a/client/src/views/deployment.js b/client/src/views/deployment.js index 13b16b1..537a28d 100644 --- a/client/src/views/deployment.js +++ b/client/src/views/deployment.js @@ -1,20 +1,20 @@ import React from 'react'; import Base from '../components/base'; import ContainersPanel from '../components/containersPanel'; -import CpuChart from '../components/cpuChart'; +import PodCpuChart from '../components/podCpuChart'; import DeleteButton from '../components/deleteButton'; import EventsPanel from '../components/eventsPanel'; import ItemHeader from '../components/itemHeader'; import Loading from '../components/loading'; import MetadataFields from '../components/metadataFields'; import PodsPanel from '../components/podsPanel'; -import RamChart from '../components/ramChart'; +import PodRamChart from '../components/podRamChart'; import ReplicaSetsPanel from '../components/replicaSetsPanel'; import SaveButton from '../components/saveButton'; import ScaleButton from '../components/scaleButton'; import api from '../services/api'; import {filterByOwner, filterByOwners} from '../utils/filterHelper'; -import getPodMetrics from '../utils/metricsHelpers'; +import getMetrics from '../utils/metricsHelpers'; import {defaultSortInfo} from '../components/sorter'; import ReplicasChart from '../components/replicasChart'; import ChartsContainer from '../components/chartsContainer'; @@ -56,7 +56,7 @@ export default class Deployment extends Base { const filteredEvents = filterByOwner(events, item); const filteredReplicaSets = filterByOwner(replicaSets, item); const filteredPods = filterByOwners(pods, filteredReplicaSets); - const filteredMetrics = getPodMetrics(filteredPods, metrics); + const filteredMetrics = getMetrics(filteredPods, metrics); return (
@@ -81,8 +81,8 @@ export default class Deployment extends Base { - - + +
diff --git a/client/src/views/job.js b/client/src/views/job.js index 0df88c5..835e123 100644 --- a/client/src/views/job.js +++ b/client/src/views/job.js @@ -1,7 +1,7 @@ import React from 'react'; import Base from '../components/base'; import ContainersPanel from '../components/containersPanel'; -import CpuChart from '../components/cpuChart'; +import PodCpuChart from '../components/podCpuChart'; import DeleteButton from '../components/deleteButton'; import EventsPanel from '../components/eventsPanel'; import Field from '../components/field'; @@ -9,10 +9,10 @@ import ItemHeader from '../components/itemHeader'; import Loading from '../components/loading'; import MetadataFields from '../components/metadataFields'; import PodsPanel from '../components/podsPanel'; -import RamChart from '../components/ramChart'; +import PodRamChart from '../components/podRamChart'; import SaveButton from '../components/saveButton'; import api from '../services/api'; -import getPodMetrics from '../utils/metricsHelpers'; +import getMetrics from '../utils/metricsHelpers'; import {filterByOwner} from '../utils/filterHelper'; import {defaultSortInfo} from '../components/sorter'; import ChartsContainer from '../components/chartsContainer'; @@ -42,7 +42,7 @@ export default class Job extends Base { const filteredPods = filterByOwner(pods, item); const filteredEvents = filterByOwner(events, item); - const filteredMetrics = getPodMetrics(filteredPods, metrics); + const filteredMetrics = getMetrics(filteredPods, metrics); return (
@@ -70,8 +70,8 @@ export default class Job extends Base {
Active / Succeeded
- - + +
diff --git a/client/src/views/namespace.js b/client/src/views/namespace.js index 5334e73..52cd405 100644 --- a/client/src/views/namespace.js +++ b/client/src/views/namespace.js @@ -6,23 +6,38 @@ import Loading from '../components/loading'; import Field from '../components/field'; import MetadataFields from '../components/metadataFields'; import DeleteButton from '../components/deleteButton'; +import PodsPanel from '../components/podsPanel'; import EventsPanel from '../components/eventsPanel'; +import {defaultSortInfo} from '../components/sorter'; +import ChartsContainer from '../components/chartsContainer'; +import PodStatusChart from '../components/podStatusChart'; +import PodCpuChart from '../components/podCpuChart'; +import PodRamChart from '../components/podRamChart'; +import getMetrics from '../utils/metricsHelpers'; const service = api.namespace; export default class Namespace extends Base { + state = { + podsSort: defaultSortInfo(x => this.setState({podsSort: x})), + }; + componentDidMount() { const {namespace} = this.props; this.registerApi({ item: service.get(namespace, item => this.setState({item})), events: api.event.list(namespace, events => this.setState({events})), + pods: api.pod.list(namespace, pods => this.setState({pods})), + podMetrics: api.metrics.pods(namespace, podMetrics => this.setState({podMetrics})), }); } render() { const {namespace} = this.props; - const {item, events} = this.state || {}; + const {item, events, pods, podMetrics, podsSort} = this.state; + + const filteredPodMetrics = getMetrics(pods, podMetrics); return (
@@ -34,6 +49,12 @@ export default class Namespace extends Base { + + + + + +
{!item ? : (
@@ -43,6 +64,15 @@ export default class Namespace extends Base { )}
+
Pods
+ +
Events
diff --git a/client/src/views/node.js b/client/src/views/node.js index d503b09..921491c 100644 --- a/client/src/views/node.js +++ b/client/src/views/node.js @@ -3,17 +3,20 @@ import React from 'react'; import moment from 'moment'; import api from '../services/api'; import Base from '../components/base'; -import Chart from '../components/chart'; import ItemHeader from '../components/itemHeader'; import Loading from '../components/loading'; import LoadingChart from '../components/loadingChart'; import MetadataFields from '../components/metadataFields'; import PodsPanel from '../components/podsPanel'; import {defaultSortInfo} from '../components/sorter'; -import {parseCpu, parseRam, TO_GB, TO_ONE_M_CPU} from '../utils/unitHelpers'; -import PodStatusChart from '../components/podStatusChart'; import Field from '../components/field'; import ChartsContainer from '../components/chartsContainer'; +import NodeCpuChart from '../components/nodeCpuChart'; +import NodeRamChart from '../components/nodeRamChart'; +import PodStatusChart from '../components/podStatusChart'; +import PodCpuChart from '../components/podCpuChart'; +import PodRamChart from '../components/podRamChart'; +import getMetrics from '../utils/metricsHelpers'; export default class Node extends Base { state = { @@ -25,12 +28,9 @@ export default class Node extends Base { this.registerApi({ item: api.node.get(name, item => this.setState({item})), - pods: api.pod.list(null, pods => this.setState({pods})), metrics: api.metrics.node(name, metrics => this.setState({metrics})), - podMetrics: api.metrics.pods(null, (x) => { - const podMetrics = _.keyBy(x, 'metadata.name'); - this.setState({podMetrics}); - }), + pods: api.pod.list(null, pods => this.setState({pods})), + podMetrics: api.metrics.pods(null, podMetrics => this.setState({podMetrics})), }); } @@ -39,15 +39,29 @@ export default class Node extends Base { const {item, pods, metrics, podMetrics, podsSort} = this.state; const filteredPods = pods && pods.filter(x => x.spec.nodeName === name); + const filteredPodMetrics = getMetrics(filteredPods, podMetrics); return (
+ +
+ {item ? ( + {getUpTime(item)} + ) : ( + + )} +
Days Up
+
+ + + + - - + +
@@ -97,7 +111,7 @@ export default class Node extends Base {
@@ -105,44 +119,12 @@ export default class Node extends Base { } } -function CpuChart({item, metrics}) { - const usedCpu = metrics && parseCpu(metrics.usage.cpu) / TO_ONE_M_CPU; - const availableCpu = item && parseCpu(item.status.capacity.cpu) / TO_ONE_M_CPU; +function getUpTime({status}) { + const ready = status.conditions.find(y => y.type === 'Ready'); + if (!ready) return 'N/A'; - return ( -
- {item && metrics ? ( - - ) : ( - - )} -
Cpu Used
-
- ); -} - -function RamChart({item, metrics}) { - const usedRam = metrics && parseRam(metrics.usage.memory) / TO_GB; - const availableRam = item && parseRam(item.status.capacity.memory) / TO_GB; - - return ( -
- {item && metrics ? ( - - ) : ( - - )} -
Ram Used
-
- ); + const last = moment(ready.lastTransitionTime); + const diff = moment().diff(last); + const hours = moment.duration(diff).asDays(); + return _.round(hours); } diff --git a/client/src/views/nodes.js b/client/src/views/nodes.js index 1559d15..5c92edb 100644 --- a/client/src/views/nodes.js +++ b/client/src/views/nodes.js @@ -1,4 +1,3 @@ -import _ from 'lodash'; import React from 'react'; import Base from '../components/base'; import ChartsContainer from '../components/chartsContainer'; @@ -8,9 +7,9 @@ import NodeStatusChart from '../components/nodeStatusChart'; import api from '../services/api'; import test from '../utils/filterHelper'; import NodesPanel from '../components/nodesPanel'; -import Chart from '../components/chart'; -import LoadingChart from '../components/loadingChart'; -import {parseCpu, parseRam, TO_GB, TO_ONE_CPU} from '../utils/unitHelpers'; +import NodeCpuChart from '../components/nodeCpuChart'; +import NodeRamChart from '../components/nodeRamChart'; +import getMetrics from '../utils/metricsHelpers'; export default class Nodes extends Base { state = { @@ -34,7 +33,7 @@ export default class Nodes extends Base { return test(filter, x.metadata.name, ...searchableLabels); }); - const filteredMetrics = getNodeMetrics(filtered, metrics); + const filteredMetrics = getMetrics(filtered, metrics); return (
@@ -46,8 +45,8 @@ export default class Nodes extends Base { - - + + - {totals ? ( - - ) : ( - - )} -
Cores
-
Used vs Available
-
- ); -} - -function RamTotalsChart({items, metrics}) { - const totals = getNodeRamTotals(items, metrics); - return ( -
- {totals ? ( - - ) : ( - - )} -
Ram
-
Used vs Available
-
- ); -} - -function getNodeMetrics(nodes, metrics) { - if (!nodes || !metrics) return null; - - const names = _.map(nodes, x => x.metadata.name); - const filteredMetrics = metrics.filter(x => names.includes(x.metadata.name)); - - return _.keyBy(filteredMetrics, 'metadata.name'); -} - -function getNodeCpuTotals(items, metrics) { - if (!items || !metrics) return null; - - const metricValues = Object.values(metrics); - const used = _.sumBy(metricValues, x => parseCpu(x.usage.cpu)) / TO_ONE_CPU; - const available = _.sumBy(items, x => parseCpu(x.status.capacity.cpu)) / TO_ONE_CPU; - - return {used, available}; -} - -function getNodeRamTotals(items, metrics) { - if (!items || !metrics) return null; - - const metricValues = Object.values(metrics); - const used = _.sumBy(metricValues, x => parseRam(x.usage.memory)) / TO_GB; - const available = _.sumBy(items, x => parseRam(x.status.capacity.memory)) / TO_GB; - - return {used, available}; -} diff --git a/client/src/views/pod.js b/client/src/views/pod.js index db88b62..a2c940a 100644 --- a/client/src/views/pod.js +++ b/client/src/views/pod.js @@ -15,9 +15,9 @@ import EventsPanel from '../components/eventsPanel'; import ContainersPanel from '../components/containersPanel'; import {objectMap} from '../components/listViewHelpers'; import {filterByOwner} from '../utils/filterHelper'; -import getPodMetrics from '../utils/metricsHelpers'; -import CpuChart from '../components/cpuChart'; -import RamChart from '../components/ramChart'; +import getMetrics from '../utils/metricsHelpers'; +import PodCpuChart from '../components/podCpuChart'; +import PodRamChart from '../components/podRamChart'; import ChartsContainer from '../components/chartsContainer'; const service = api.pod; @@ -39,7 +39,7 @@ export default class Pod extends Base { const errors = getErrors(item); const filteredEvents = filterByOwner(events, item); - const filteredMetrics = getPodMetrics(item && [item], metrics && [metrics]); + const filteredMetrics = getMetrics(item && [item], metrics && [metrics]); return (
@@ -69,8 +69,8 @@ export default class Pod extends Base { {errors && !!errors.length && } - - + +
diff --git a/client/src/views/pods.js b/client/src/views/pods.js index e19a6ef..e2a848c 100644 --- a/client/src/views/pods.js +++ b/client/src/views/pods.js @@ -3,12 +3,12 @@ import Base from '../components/base'; import Filter from '../components/filter'; import api from '../services/api'; import test from '../utils/filterHelper'; -import CpuChart from '../components/cpuChart'; -import RamChart from '../components/ramChart'; +import PodCpuChart from '../components/podCpuChart'; +import PodRamChart from '../components/podRamChart'; import PodsPanel from '../components/podsPanel'; import PodStatusChart from '../components/podStatusChart'; import {defaultSortInfo} from '../components/sorter'; -import getPodMetrics from '../utils/metricsHelpers'; +import getMetrics from '../utils/metricsHelpers'; import ChartsContainer from '../components/chartsContainer'; export default class Pods extends Base { @@ -31,7 +31,7 @@ export default class Pods extends Base { render() { const {items, metrics, namespace, sort, filter} = this.state; const filtered = items && items.filter(x => test(filter, x.metadata.name)); - const filteredMetrics = getPodMetrics(filtered, metrics); + const filteredMetrics = getMetrics(filtered, metrics); return (
@@ -44,8 +44,8 @@ export default class Pods extends Base { - - + + @@ -70,8 +70,8 @@ export default class ReplicaSet extends Base { - - + +
diff --git a/client/src/views/statefulSet.js b/client/src/views/statefulSet.js index 97b176e..4e77b9f 100644 --- a/client/src/views/statefulSet.js +++ b/client/src/views/statefulSet.js @@ -9,9 +9,9 @@ import ScaleButton from '../components/scaleButton'; import SaveButton from '../components/saveButton'; import DeleteButton from '../components/deleteButton'; import EventsPanel from '../components/eventsPanel'; -import RamChart from '../components/ramChart'; -import CpuChart from '../components/cpuChart'; -import getPodMetrics from '../utils/metricsHelpers'; +import PodRamChart from '../components/podRamChart'; +import PodCpuChart from '../components/podCpuChart'; +import getMetrics from '../utils/metricsHelpers'; import {filterByOwner} from '../utils/filterHelper'; import ContainersPanel from '../components/containersPanel'; import {defaultSortInfo} from '../components/sorter'; @@ -43,7 +43,7 @@ export default class StatefulSet extends Base { const filteredPods = filterByOwner(pods, item); const filteredEvents = filterByOwner(events, item); - const filteredMetrics = getPodMetrics(filteredPods, metrics); + const filteredMetrics = getMetrics(filteredPods, metrics); return (
@@ -68,8 +68,8 @@ export default class StatefulSet extends Base { - - + +
diff --git a/client/src/views/workloads.js b/client/src/views/workloads.js index 14b2473..47e20f8 100644 --- a/client/src/views/workloads.js +++ b/client/src/views/workloads.js @@ -145,9 +145,13 @@ function getExpectedCount({spec, status}) { } function filterControllers(filter, items) { - const results = items.flat(); + const results = items + .flat() + .filter(x => !!x); - if (results.length && items.some(x => !x)) return null; + // If there are no results yet but some of the workload types are still + // loading, return "null" so we display the "loading" control + if (!results.length && items.some(x => !x)) return null; return _(results) .flatten()