From c6103b5af7625d077d8903859d23f353f2063110 Mon Sep 17 00:00:00 2001 From: atu Date: Sun, 23 Aug 2020 21:29:41 -0700 Subject: [PATCH 1/2] convert statefulSet and workloads into ts --- client/src/utils/types.ts | 12 ++++++ .../views/{statefulSet.js => statefulSet.tsx} | 21 +++++++-- .../src/views/{workloads.js => workloads.tsx} | 43 +++++++++++++------ 3 files changed, 60 insertions(+), 16 deletions(-) rename client/src/views/{statefulSet.js => statefulSet.tsx} (89%) rename client/src/views/{workloads.js => workloads.tsx} (82%) diff --git a/client/src/utils/types.ts b/client/src/utils/types.ts index 34adc3c..ed4db6d 100644 --- a/client/src/utils/types.ts +++ b/client/src/utils/types.ts @@ -409,6 +409,18 @@ interface DeploymentStatus { export interface Deployment extends ApiItem { } +interface StatefulSetSpec { + template: { + spec: Spec; + } +} + +interface StatefulSetStatus { +} + +export interface StatefulSet extends ApiItem { +} + interface Port { name: string; port: number; diff --git a/client/src/views/statefulSet.js b/client/src/views/statefulSet.tsx similarity index 89% rename from client/src/views/statefulSet.js rename to client/src/views/statefulSet.tsx index 4e77b9f..47504e4 100644 --- a/client/src/views/statefulSet.js +++ b/client/src/views/statefulSet.tsx @@ -14,14 +14,29 @@ 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'; +import {defaultSortInfo, SortInfo} from '../components/sorter'; import ReplicasChart from '../components/replicasChart'; import ChartsContainer from '../components/chartsContainer'; +import {ApiItem, K8sEvent, Metrics, Pod} from "../utils/types"; + +type Props = { + namespace: string; + name: string; +} + +type State = { + item?: ApiItem; + pods?: Pod[]; + events?: K8sEvent[]; + metrics?: Metrics[]; + podsSort?: SortInfo; + eventsSort?: SortInfo; +} const service = api.statefulSet; -export default class StatefulSet extends Base { - state = { +export default class StatefulSet extends Base { + state: State = { podsSort: defaultSortInfo(x => this.setState({podsSort: x})), eventsSort: defaultSortInfo(x => this.setState({eventsSort: x})), }; diff --git a/client/src/views/workloads.js b/client/src/views/workloads.tsx similarity index 82% rename from client/src/views/workloads.js rename to client/src/views/workloads.tsx index 47e20f8..9b843c9 100644 --- a/client/src/views/workloads.js +++ b/client/src/views/workloads.tsx @@ -4,20 +4,37 @@ import Base from '../components/base'; import Chart from '../components/chart'; import Filter from '../components/filter'; import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listViewHelpers'; -import Sorter, {defaultSortInfo} from '../components/sorter'; +import Sorter, {defaultSortInfo, SortInfo} from '../components/sorter'; import api from '../services/api'; import test from '../utils/filterHelper'; import Working from '../components/working'; import LoadingChart from '../components/loadingChart'; import ChartsContainer from '../components/chartsContainer'; +import {ApiItem, CronJob, DaemonSet, Deployment, Job, StatefulSet, TODO} from "../utils/types"; -export default class Workloads extends Base { - state = { +type Props = { + +} + +type State = { + filter: string; + sort: SortInfo; + cronJobs?: CronJob[] | null; + daemonSets?: DaemonSet[] | null; + deployments?: Deployment[] | null; + jobs?: Job[] | null; + statefulSets?: StatefulSet[] | null; + sortBy?: string; + sortDirection?: string; +} + +export default class Workloads extends Base { + state: State = { filter: '', sort: defaultSortInfo(this), }; - setNamespace(namespace) { + setNamespace(namespace: string) { this.setState({ cronJobs: null, daemonSets: null, @@ -35,7 +52,7 @@ export default class Workloads extends Base { }); } - sort(sortBy, sortDirection) { + sort(sortBy: string, sortDirection: string) { this.setState({sortBy, sortDirection}); } @@ -68,7 +85,7 @@ export default class Workloads extends Base { - ( + ( [] | null}) { const workingItems = _.filter(items, (item) => { const current = getCurrentCount(item); const expected = getExpectedCount(item); @@ -99,7 +116,7 @@ function ControllerStatusChart({items}) { return (
- {items ? ( + {items && count && pending ? ( ) : ( @@ -110,7 +127,7 @@ function ControllerStatusChart({items}) { ); } -function PodStatusChart({items}) { +function PodStatusChart({items}: {items: ApiItem[] | null}) { const current = _.sumBy(items, getCurrentCount); const expected = _.sumBy(items, getExpectedCount); @@ -127,7 +144,7 @@ function PodStatusChart({items}) { ); } -function Status({item}) { +function Status({item}: {item: ApiItem}) { const current = getCurrentCount(item); const expected = getExpectedCount(item); const text = `${current} / ${expected}`; @@ -136,15 +153,15 @@ function Status({item}) { return ; } -function getCurrentCount({status}) { +function getCurrentCount({status}: TODO) { return status.readyReplicas || status.numberReady || 0; } -function getExpectedCount({spec, status}) { +function getExpectedCount({spec, status}: TODO) { return spec.replicas || status.currentNumberScheduled || 0; } -function filterControllers(filter, items) { +function filterControllers(filter: string, items: TODO[]) { const results = items .flat() .filter(x => !!x); From 292258605ec39ffa94da0727b44d8361b24db6b5 Mon Sep 17 00:00:00 2001 From: atu Date: Mon, 24 Aug 2020 09:17:09 -0700 Subject: [PATCH 2/2] fix statefulSet type --- client/src/views/statefulSet.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/views/statefulSet.tsx b/client/src/views/statefulSet.tsx index 47504e4..a00daa3 100644 --- a/client/src/views/statefulSet.tsx +++ b/client/src/views/statefulSet.tsx @@ -17,7 +17,7 @@ import ContainersPanel from '../components/containersPanel'; import {defaultSortInfo, SortInfo} from '../components/sorter'; import ReplicasChart from '../components/replicasChart'; import ChartsContainer from '../components/chartsContainer'; -import {ApiItem, K8sEvent, Metrics, Pod} from "../utils/types"; +import {K8sEvent, Metrics, Pod, StatefulSet as StatefulSetInterface} from "../utils/types"; type Props = { namespace: string; @@ -25,7 +25,7 @@ type Props = { } type State = { - item?: ApiItem; + item?: StatefulSetInterface; pods?: Pod[]; events?: K8sEvent[]; metrics?: Metrics[];