Fixing some linting errors

2026-02-14 17:49:55 +00:00 · 2020-10-15 14:01:00 -05:00
parent 7906593f7a
commit de4c16869c
61 changed files with 210 additions and 216 deletions
--- a/client/.eslintrc
+++ b/client/.eslintrc
@@ -1,7 +1,9 @@
 {
    "extends": [
        "airbnb-base",
-        "plugin:react/recommended"
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
    ],
    "env": {
        "browser": true,
@@ -63,10 +65,22 @@
                "functions": false
            }
        ],
+        "max-len": [
+            "error",
+            {
+                "code": 150,
+                "ignoreStrings": true
+            }
+        ],
        "no-await-in-loop": "off",
        "no-restricted-syntax": "off",
        "no-plusplus": "off",
        "class-methods-use-this": "off",
-        "react/prop-types": "off"
+        "react/prop-types": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/no-non-null-assertion": "off"
    }
 }
--- a/client/src/components/containersPanel.tsx
+++ b/client/src/components/containersPanel.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Fragment} from 'react';
 import Field from './field';
-import {TODO} from "../utils/types";
+import {TODO} from '../utils/types';

 const ContainersPanel = ({spec}: {spec: TODO}) => (
    <>
--- a/client/src/components/donut.tsx
+++ b/client/src/components/donut.tsx
@@ -16,9 +16,9 @@ export default class Donut extends Base<Props, State> {
        currentPercent2: 0,
    };

-    private unmounted: boolean = false;
+    private unmounted = false;

-    private animationQueued: boolean = false;
+    private animationQueued = false;

    constructor(props: Props) {
        super(props);
--- a/client/src/components/eventsPanel.tsx
+++ b/client/src/components/eventsPanel.tsx
@@ -4,7 +4,7 @@ import {TableBody} from './listViewHelpers';
 import log from '../utils/log';
 import ResourceSvg from '../art/resourceSvg';
 import Sorter, {sortByDate, SortInfo} from './sorter';
-import { K8sEvent, InvolvedObject } from '../utils/types';
+import {K8sEvent, InvolvedObject} from '../utils/types';

 type EventsPanelProps = {
    items?: K8sEvent[];
@@ -44,7 +44,7 @@ export default function EventsPanel({items, filter, shortList, sort} : EventsPan
                    filter={filter}
                    colSpan={shortList ? 4 : 5}
                    sort={sort}
-                    row={(event) => (
+                    row={event => (
                        <tr key={event.metadata.name}>
                            <td className='td_icon optional_medium'>
                                <ResourceSvg
--- a/client/src/components/field.tsx
+++ b/client/src/components/field.tsx
@@ -1,5 +1,5 @@
 import './field.scss';
-import React, { ReactNode } from 'react';
+import React, {ReactNode} from 'react';

 type FieldProps = {
    name: string;
--- a/client/src/components/hpaPanel.tsx
+++ b/client/src/components/hpaPanel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Field from './field';
-import { TODO } from '../utils/types';
+import {TODO} from '../utils/types';

 const HpaPanel = ({spec}: TODO) => (
    <>
--- a/client/src/components/listViewHelpers.tsx
+++ b/client/src/components/listViewHelpers.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { ReactNode } from 'react';
+import React, {ReactNode} from 'react';
 import fromNow from '../utils/dates';
 import {isAValidURL} from '../utils/string';
 import Loading from './loading';
@@ -74,7 +74,14 @@ export function MetadataHeaders({includeNamespace, sort}: {includeNamespace?: bo
    );
 }

-export function MetadataColumns({item, href, includeNamespace, resourceClass}: {item: TODO, href: string, includeNamespace?: boolean, resourceClass?: string}) {
+type MetadataColumnsProps = {
+    item: TODO,
+    href: string,
+    includeNamespace?: boolean,
+    resourceClass?: string
+};
+
+export function MetadataColumns({item, href, includeNamespace, resourceClass}: MetadataColumnsProps) {
    return (
        <>
            <td className='td_icon optional_small'>
--- a/client/src/components/menu.tsx
+++ b/client/src/components/menu.tsx
@@ -7,7 +7,7 @@ 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";
+import {TODO} from '../utils/types';

 interface MenuProps {
    onClick: () => void;
--- a/client/src/components/metadataFields.tsx
+++ b/client/src/components/metadataFields.tsx
@@ -9,7 +9,7 @@ const MetadataFields = ({item}: {[key: string]: any}) => (

        {item.metadata.namespace && (
            <Field name='Namespace'>
-                <a href={"#!namespace/"+item.metadata.namespace}>{item.metadata.namespace}</a>
+                <a href={`#!namespace/${item.metadata.namespace}`}>{item.metadata.namespace}</a>
            </Field>
        )}

--- a/client/src/components/nodeRamChart.tsx
+++ b/client/src/components/nodeRamChart.tsx
@@ -31,7 +31,7 @@ export default function NodeRamChart({items, metrics}: {items?: Node[], metrics?
 }

 function getNodeRamTotals(items?: Node[], metrics?: _.Dictionary<Metrics>) {
-    if (!items || !metrics) return;
+    if (!items || !metrics) return undefined;

    const metricValues = Object.values(metrics);
    const used = _.sumBy(metricValues, x => parseRam(x.usage.memory));
--- a/client/src/components/nodesPanel.tsx
+++ b/client/src/components/nodesPanel.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import Base from './base';
-import Sorter, { SortInfo } from './sorter';
+import Sorter, {SortInfo} from './sorter';
 import LoadingEllipsis from './loadingEllipsis';
 import {MetadataHeaders, MetadataColumns, TableBody, objectMap} from './listViewHelpers';
 import {unparseCpu, unparseRam} from '../utils/unitHelpers';
--- a/client/src/components/podStatusChart.tsx
+++ b/client/src/components/podStatusChart.tsx
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import Chart from './chart';
 import LoadingChart from './loadingChart';
-import {Pod} from "../utils/types";
+import {Pod} from '../utils/types';

 export default function PodStatusChart({items}: {items?: Pod[]}) {
    const available = items && items.length;
--- a/client/src/components/podsPanel.tsx
+++ b/client/src/components/podsPanel.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import Base from './base';
-import Sorter, { SortInfo } from './sorter';
+import Sorter, {SortInfo} from './sorter';
 import LoadingEllipsis from './loadingEllipsis';
 import {MetadataHeaders, MetadataColumns, TableBody} from './listViewHelpers';
 import {unparseRam, unparseCpu} from '../utils/unitHelpers';
--- a/client/src/components/replicaSetsPanel.tsx
+++ b/client/src/components/replicaSetsPanel.tsx
@@ -2,7 +2,7 @@ import './replicaSetsPanel.scss';
 import React from 'react';
 import Switch from 'react-switch';
 import Base from './base';
-import Sorter, { SortInfo } from './sorter';
+import Sorter, {SortInfo} from './sorter';
 import {MetadataHeaders, MetadataColumns, TableBody} from './listViewHelpers';
 import {ReplicaSet} from '../utils/types';

@@ -56,7 +56,7 @@ export default class ReplicaSetsPanel extends Base<ReplicaSetsPanelProps, Replic
                        filter={filter}
                        sort={sort}
                        colSpan={5 + Number(includeNamespace)}
-                        row={(x) => (
+                        row={x => (
                            <tr key={x.metadata.uid}>
                                <MetadataColumns
                                    item={x}
--- a/client/src/components/replicasChart.tsx
+++ b/client/src/components/replicasChart.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Chart from './chart';
 import LoadingChart from './loadingChart';
-import {TODO} from "../utils/types";
+import {TODO} from '../utils/types';

 export default function ReplicasChart({item}: {item: TODO}) {
    return (
--- a/client/src/components/saveButton.tsx
+++ b/client/src/components/saveButton.tsx
@@ -3,7 +3,7 @@ import Base from './base';
 import Button from './button';
 import EditorModal from '../views/editorModal';
 import EditSvg from '../art/editSvg';
-import { ApiItem } from '../utils/types';
+import {ApiItem} from '../utils/types';

 interface SaveButtonProps<T extends ApiItem<any, any>> {
    item?: T;
--- a/client/src/components/sorter.tsx
+++ b/client/src/components/sorter.tsx
@@ -5,7 +5,7 @@ import ArrowUpSvg from '../art/arrowUpSvg';
 import ArrowDownSvg from '../art/arrowDownSvg';
 import {TODO} from '../utils/types';

-export type Direction = "asc" | "desc";
+export type Direction = 'asc' | 'desc';

 export interface SortInfo {
    field: string,
@@ -16,8 +16,8 @@ export interface SortInfo {
 interface SorterProps {
    field: TODO;
    sort?: {
-        field: string, 
-        direction: Direction, 
+        field: string,
+        direction: Direction,
        onSort: Function,
    };
 }
@@ -45,25 +45,24 @@ export function sortByDate(x: {metadata: {creationTimestamp: string}}) {
    return -Date.parse(x.metadata.creationTimestamp);
 }

-function getFieldName (field: TODO) {
-    if(typeof field === 'function') {
-        return field.name
+function getFieldName(field: TODO) {
+    if (typeof field === 'function') {
+        return field.name;
    }
-    return field
+    return field;
 }

 export default class Sorter extends Base<SorterProps, SorterStates> {
-
    onClickHandler() {
        const {sort} = this.props;

-        if(sort) {
-            this.sort()
+        if (sort) {
+            this.sort();
            const url = new URL(window.location.href);
-            const fieldName = getFieldName(sort.field)
+            const fieldName = getFieldName(sort.field);

-            url.searchParams.set('sortKey', fieldName)
-            url.searchParams.set('sortDir', sort.direction)
+            url.searchParams.set('sortKey', fieldName);
+            url.searchParams.set('sortDir', sort.direction);

            window.history.pushState({}, '', url.search + url.hash);
        }
@@ -73,20 +72,20 @@ export default class Sorter extends Base<SorterProps, SorterStates> {
        const {sort} = this.props;

        const urlParams = new URLSearchParams(window.location.search);
-        
-        const sortKey = urlParams.get('sortKey')
-        const sortDir = urlParams.get('sortDir')

-        if(sort && getFieldName(sort.field) === sortKey) {
-            sort.direction = sortDir as Direction
-            sort.onSort(sort)
+        const sortKey = urlParams.get('sortKey');
+        const sortDir = urlParams.get('sortDir');
+
+        if (sort && getFieldName(sort.field) === sortKey) {
+            sort.direction = sortDir as Direction;
+            sort.onSort(sort);
        }
    }
-    
+
    render() {
        const {children, sort} = this.props;
        return (
-            <div className={sort ? 'sorter' : undefined} onClick={()=>this.onClickHandler()}>
+            <div className={sort ? 'sorter' : undefined} onClick={() => this.onClickHandler()}>
                <span>{children}</span>
                {sort && (
                    <span className={`sorter_arrows ${this.isSelected() && 'sorter_active'}`}>
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, {ReactNode} from 'react';
 import {hasToken} from './services/auth';
 import Account from './views/account';
 import Auth from './views/auth';
--- a/client/src/services/api.ts
+++ b/client/src/services/api.ts
@@ -2,9 +2,10 @@ import _ from 'lodash';
 import {Base64} from 'js-base64';
 import {request, post, stream, apiFactory, apiFactoryWithNamespace} from './apiProxy';
 import log from '../utils/log';
-import { K8sEvent, Namespace, TODO, Metrics, PersistentVolume, Node, Pod, ClusterRole, ClusterRoleBinding, ConfigMap, RoleBinding, Secret, ServiceAccount, StorageClass } from '../utils/types';
+import {K8sEvent, Namespace, TODO, Metrics, PersistentVolume, Node, Pod, ClusterRole, ClusterRoleBinding, ConfigMap, RoleBinding, Secret, ServiceAccount, StorageClass} from '../utils/types';

 type DataCallback<T> = (data: T) => void;
+type MetricsCallback = DataCallback<Metrics[]>;

 const configMap = apiFactoryWithNamespace<ConfigMap>('', 'v1', 'configmaps');
 const event = apiFactoryWithNamespace<K8sEvent>('', 'v1', 'events');
@@ -102,10 +103,11 @@ async function apply(body: TODO): Promise<TODO> {

 function metricsFactory() {
    return {
-        nodes: (cb: DataCallback<Metrics[]>) => metrics('/apis/metrics.k8s.io/v1beta1/nodes', cb),
-        node: (name: string, cb: DataCallback<Metrics[]>) => metrics(`/apis/metrics.k8s.io/v1beta1/nodes/${name}`, cb),
-        pods: (namespace: string | undefined, cb: DataCallback<Metrics[]>) => metrics(url(namespace), cb),
-        pod: (namespace: string, name: string, cb: DataCallback<Metrics[]>) => metrics(`/apis/metrics.k8s.io/v1beta1/namespaces/${namespace}/pods/${name}`, cb),
+        nodes: (cb: MetricsCallback) => metrics('/apis/metrics.k8s.io/v1beta1/nodes', cb),
+        node: (name: string, cb: MetricsCallback) => metrics(`/apis/metrics.k8s.io/v1beta1/nodes/${name}`, cb),
+        pods: (namespace: string | undefined, cb: MetricsCallback) => metrics(url(namespace), cb),
+        // eslint-disable-next-line max-len
+        pod: (namespace: string, name: string, cb: MetricsCallback) => metrics(`/apis/metrics.k8s.io/v1beta1/namespaces/${namespace}/pods/${name}`, cb),
    };

    function url(namespace?: string) {
@@ -120,7 +122,7 @@ function oidcFactory() {
    };
 }

-function metrics(url: string, cb: DataCallback<Metrics[]>) {
+function metrics(url: string, cb: MetricsCallback) {
    let isApiRequestInProgress = false;
    const handel = setInterval(getMetrics, 10000);
    getMetrics();
--- a/client/src/services/docs.ts
+++ b/client/src/services/docs.ts
@@ -1,6 +1,6 @@
 import Swagger from 'swagger-parser';
 import apis from './api';
-import { TODO } from '../utils/types';
+import {TODO} from '../utils/types';

 let docsPromise: Promise<TODO>;

--- a/client/src/utils/string.ts
+++ b/client/src/utils/string.ts
@@ -16,8 +16,7 @@ const URL_REGEXP = new RegExp(
 /**
 * Check whether a string is a valid URL
 */
+// eslint-disable-next-line import/prefer-default-export
 export function isAValidURL(str: string) {
    return URL_REGEXP.test(str.trim());
 }
-
-/** ... Add other String utilities functions here */
--- a/client/src/utils/types.ts
+++ b/client/src/utils/types.ts
@@ -74,8 +74,7 @@ interface NamespaceStatus {
    phase: string;
 }

-export interface Namespace extends ApiItem<undefined, NamespaceStatus> {
-}
+export type Namespace = ApiItem<undefined, NamespaceStatus>

 interface NodeSpec {
    taints: {[name: string]: string}
@@ -98,9 +97,7 @@ export interface NodeStatus {
    }
 }

-export interface Node extends ApiItem<NodeSpec, NodeStatus> {
-
-}
+export type Node = ApiItem<NodeSpec, NodeStatus>

 export interface K8sEvent extends ApiItem<undefined, undefined> {
    type: string;
@@ -130,8 +127,7 @@ interface PodStatus {
    containerStatuses: ContainerStatus[];
 }

-export interface Pod extends ApiItem<PodSpec, PodStatus>{
-}
+export type Pod = ApiItem<PodSpec, PodStatus>

 interface PersistentVolumeSpec {
    storageClassName: string;
@@ -155,9 +151,7 @@ interface PersistentVolumeStatus {
    phase: string;
 }

-export interface PersistentVolume extends ApiItem<PersistentVolumeSpec, PersistentVolumeStatus> {
-
-}
+export type PersistentVolume = ApiItem<PersistentVolumeSpec, PersistentVolumeStatus>

 interface PersistentVolumeClaimSpec {
    storageClassName: string;
@@ -172,9 +166,7 @@ interface PersistentVolumeClaimStatus {
    }
 }

-export interface PersistentVolumeClaim extends ApiItem<PersistentVolumeClaimSpec, PersistentVolumeClaimStatus> {
-
-}
+export type PersistentVolumeClaim = ApiItem<PersistentVolumeClaimSpec, PersistentVolumeClaimStatus>

 interface RoleRule {
    apiGroups?: string[];
@@ -184,23 +176,17 @@ interface RoleRule {
    resourceNames?: string[];
 }

-interface RoleSpec {
+type RoleSpec = unknown;

-}
-
-interface RoleStatus {
-}
+type RoleStatus = unknown;

 export interface Role extends ApiItem<RoleSpec, RoleStatus> {
    rules?: RoleRule[];
 }

-interface ClusterRoleSpec {
+type ClusterRoleSpec = unknown;

-}
-
-interface ClusterRoleStatus {
-}
+type ClusterRoleStatus = unknown;

 export interface ClusterRole extends ApiItem<ClusterRoleSpec, ClusterRoleStatus> {
    rules?: RoleRule[];
@@ -219,36 +205,27 @@ export interface RoleBindingRef {
    namespace: string;
 }

-interface RoleBindingSpec {
+type RoleBindingSpec = unknown;

-}
-
-interface RoleBindingStatus {
-}
+type RoleBindingStatus = unknown;

 export interface RoleBinding extends ApiItem<RoleBindingSpec, RoleBindingStatus> {
    subjects: RoleBindingSubject[];
    roleRef: RoleBindingRef;
 }

-interface ClusterRoleBindingSpec {
+type ClusterRoleBindingSpec = unknown;

-}
-
-interface ClusterRoleBindingStatus {
-}
+type ClusterRoleBindingStatus = unknown;

 export interface ClusterRoleBinding extends ApiItem<ClusterRoleBindingSpec, ClusterRoleBindingStatus> {
    subjects: RoleBindingSubject[];
    roleRef: RoleBindingRef;
 }

-interface ConfigMapSpec {
+type ConfigMapSpec = unknown;

-}
-
-interface ConfigMapStatus {
-}
+type ConfigMapStatus = unknown;

 export interface ConfigMap extends ApiItem<ConfigMapSpec, ConfigMapStatus> {
    data: {[name: string]: string}
@@ -273,11 +250,9 @@ interface IngressSpec {
    rules: IngressRule[];
 }

-interface IngressStatus {
-}
+type IngressStatus = unknown;

-export interface Ingress extends ApiItem<IngressSpec, IngressStatus> {
-}
+export type Ingress = ApiItem<IngressSpec, IngressStatus>

 interface ReplicaSetSpec {
    replicas: number;
@@ -293,25 +268,20 @@ interface ReplicaSetStatus {
    replicas: number;
 }

-export interface ReplicaSet extends ApiItem<ReplicaSetSpec, ReplicaSetStatus> {
-}
+export type ReplicaSet = ApiItem<ReplicaSetSpec, ReplicaSetStatus>

-interface SecretSpec {
-}
+type SecretSpec = unknown;

-interface SecretStatus {
-}
+type SecretStatus = unknown;

 export interface Secret extends ApiItem<SecretSpec, SecretStatus> {
    type: string;
    data: {[key: string]: string};
 }

-interface ServiceAccountSpec {
-}
+type ServiceAccountSpec = unknown;

-interface ServiceAccountStatus {
-}
+type ServiceAccountStatus = unknown;

 export interface ServiceAccount extends ApiItem<ServiceAccountSpec, ServiceAccountStatus> {
    secrets: {
@@ -319,11 +289,9 @@ export interface ServiceAccount extends ApiItem<ServiceAccountSpec, ServiceAccou
    }[];
 }

-interface StorageClassSpec {
-}
+type StorageClassSpec = unknown;

-interface StorageClassStatus {
-}
+type StorageClassStatus = unknown;

 export interface StorageClass extends ApiItem<StorageClassSpec, StorageClassStatus> {
    reclaimPolicy: string;
@@ -337,15 +305,11 @@ interface HpaSpec {
    targetCPUUtilizationPercentage: number;
 }

-interface HpaStatus {
-}
+type HpaStatus = unknown;

-export interface Hpa extends ApiItem<HpaSpec, HpaStatus> {
-}
+export type Hpa = ApiItem<HpaSpec, HpaStatus>

-export interface Spec {
-
-}
+export type Spec = unknown;

 interface CronJobSpec {
    schedule: string;
@@ -364,8 +328,7 @@ interface CronJobStatus {
    lastScheduleTime: string;
 }

-export interface CronJob extends ApiItem<CronJobSpec, CronJobStatus> {
-}
+export type CronJob = ApiItem<CronJobSpec, CronJobStatus>

 interface DaemonSetSpec {
    template: {
@@ -379,8 +342,7 @@ interface DaemonSetStatus {
    desiredNumberScheduled: number;
 }

-export interface DaemonSet extends ApiItem<DaemonSetSpec, DaemonSetStatus> {
-}
+export type DaemonSet = ApiItem<DaemonSetSpec, DaemonSetStatus>

 interface JobSpec {
    template: {
@@ -395,8 +357,7 @@ interface JobStatus {
    completionTime: string;
 }

-export interface Job extends ApiItem<JobSpec, JobStatus> {
-}
+export type Job = ApiItem<JobSpec, JobStatus>

 interface DeploymentSpec {
    template: {
@@ -404,11 +365,9 @@ interface DeploymentSpec {
    }
 }

-interface DeploymentStatus {
-}
+type DeploymentStatus = unknown;

-export interface Deployment extends ApiItem<DeploymentSpec, DeploymentStatus> {
-}
+export type Deployment = ApiItem<DeploymentSpec, DeploymentStatus>

 interface StatefulSetSpec {
    template: {
@@ -416,11 +375,9 @@ interface StatefulSetSpec {
    }
 }

-interface StatefulSetStatus {
-}
+type StatefulSetStatus = unknown;

-export interface StatefulSet extends ApiItem<StatefulSetSpec, StatefulSetStatus> {
-}
+export type StatefulSet = ApiItem<StatefulSetSpec, StatefulSetStatus>

 interface Port {
    name: string;
@@ -439,8 +396,6 @@ interface ServiceSpec {
    ports: Port[];
 }

-interface ServiceStatus {
-}
+type ServiceStatus = unknown;

-export interface Service extends ApiItem<ServiceSpec, ServiceStatus> {
-}
+export type Service = ApiItem<ServiceSpec, ServiceStatus>
--- a/client/src/utils/unitHelpers.ts
+++ b/client/src/utils/unitHelpers.ts
@@ -16,7 +16,7 @@ export function parseRam(value?: string) {
 }

 export function parseUnitsOfRam(bytes?: number) {
-    if (!bytes) return;
+    if (!bytes) return undefined;

    let i = 0;
    while (bytes >= 1000 && i < UNITS.length - 1) {
--- a/client/src/views/account.tsx
+++ b/client/src/views/account.tsx
@@ -65,7 +65,7 @@ export default class Account extends Base<{}, State> {

    setDarkMode(useDarkMode: boolean) {
        if (useDarkMode) {
-            localStorage.useDarkMode = "true"
+            localStorage.useDarkMode = 'true';
        } else {
            delete localStorage.useDarkMode;
        }
--- a/client/src/views/clusterRole.tsx
+++ b/client/src/views/clusterRole.tsx
@@ -8,7 +8,7 @@ import MetadataFields from '../components/metadataFields';
 import {TableBody} from '../components/listViewHelpers';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { ClusterRole } from '../utils/types';
+import {ClusterRole} from '../utils/types';

 type Props = {
    name: string;
--- a/client/src/views/clusterRoleBinding.tsx
+++ b/client/src/views/clusterRoleBinding.tsx
@@ -10,7 +10,7 @@ import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
 import ResourceSvg from '../art/resourceSvg';
 import Sorter, {defaultSortInfo, SortInfo} from '../components/sorter';
-import { ClusterRoleBinding, RoleBindingRef, RoleBindingSubject } from '../utils/types';
+import {ClusterRoleBinding, RoleBindingRef, RoleBindingSubject} from '../utils/types';

 type Props = {
    name: string;
--- a/client/src/views/configMap.tsx
+++ b/client/src/views/configMap.tsx
@@ -8,7 +8,7 @@ import Field from '../components/field';
 import MetadataFields from '../components/metadataFields';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { ConfigMap } from '../utils/types';
+import {ConfigMap} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/configMaps.tsx
+++ b/client/src/views/configMaps.tsx
@@ -5,7 +5,7 @@ import api from '../services/api';
 import test from '../utils/filterHelper';
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import {MetadataColumns, MetadataHeaders, TableBody} from '../components/listViewHelpers';
-import { ConfigMap } from '../utils/types';
+import {ConfigMap} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/cronJob.tsx
+++ b/client/src/views/cronJob.tsx
@@ -16,7 +16,7 @@ import getMetrics from '../utils/metricsHelpers';
 import {filterByOwner} from '../utils/filterHelper';
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import ChartsContainer from '../components/chartsContainer';
-import { Pod, K8sEvent, Metrics, CronJob } from '../utils/types';
+import {Pod, K8sEvent, Metrics, CronJob} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/daemonSet.tsx
+++ b/client/src/views/daemonSet.tsx
@@ -17,7 +17,7 @@ import {filterByOwner} from '../utils/filterHelper';
 import ContainersPanel from '../components/containersPanel';
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import ChartsContainer from '../components/chartsContainer';
-import { DaemonSet, Pod, K8sEvent, Metrics } from '../utils/types';
+import {DaemonSet, Pod, K8sEvent, Metrics} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/dashboard.tsx
+++ b/client/src/views/dashboard.tsx
@@ -13,7 +13,7 @@ import PodRamChart from '../components/podRamChart';
 import NodeCpuChart from '../components/nodeCpuChart';
 import NodeRamChart from '../components/nodeRamChart';
 import getMetrics from '../utils/metricsHelpers';
-import { K8sEvent, Pod, Metrics, Node } from '../utils/types';
+import {K8sEvent, Pod, Metrics, Node} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/deployment.tsx
+++ b/client/src/views/deployment.tsx
@@ -19,7 +19,7 @@ import {defaultSortInfo, SortInfo} from '../components/sorter';
 import ReplicasChart from '../components/replicasChart';
 import ChartsContainer from '../components/chartsContainer';
 import HpaPanel from '../components/hpaPanel';
-import { Deployment, ReplicaSet, Pod, Metrics, Hpa, K8sEvent } from '../utils/types';
+import {Deployment, ReplicaSet, Pod, Metrics, Hpa, K8sEvent} from '../utils/types';

 type Props = {
    namespace: string;
@@ -56,7 +56,7 @@ export default class DeploymentView extends Base<Props, State> {
            events: api.event.list(namespace, x => this.setState({events: x})),
            pods: api.pod.list(namespace, x => this.setState({pods: x})),
            metrics: api.metrics.pods(namespace, x => this.setState({metrics: x})),
-            hpa: api.hpa.get(namespace, name, x => this.setState({hpa: x}))
+            hpa: api.hpa.get(namespace, name, x => this.setState({hpa: x})),
        });
    }

--- a/client/src/views/editorModal.tsx
+++ b/client/src/views/editorModal.tsx
@@ -8,7 +8,7 @@ import Doc from '../components/doc';
 import getDocDefinitions from '../services/docs';
 import LightBulbSvg from '../art/lightBulbSvg';
 import EditSvg from '../art/editSvg';
-import { ApiItem, TODO } from '../utils/types';
+import {ApiItem, TODO} from '../utils/types';

 interface Props<T extends ApiItem<any, any>> {
    body?: T;
@@ -35,7 +35,7 @@ export default class EditorModal<T extends ApiItem<any, any>> extends Base<Props
        this.setState({yaml});

        try {
-            const body = yml.parse(yaml,{indent:2,schema:'core'});
+            const body = yml.parse(yaml, {indent: 2, schema: 'core'});
            this.findDocs(body);
        } catch (err) {
            // Do nothing here. The current yaml can't be parsed
@@ -46,7 +46,7 @@ export default class EditorModal<T extends ApiItem<any, any>> extends Base<Props
        const {onSave} = this.props;
        const {yaml = ''} = this.state;

-        const json = yml.parse(yaml,{indent:2,schema:'core'});
+        const json = yml.parse(yaml, {indent: 2, schema: 'core'});
        const shouldClose = await onSave(json);

        if (shouldClose) this.close();
@@ -73,7 +73,7 @@ export default class EditorModal<T extends ApiItem<any, any>> extends Base<Props
        const {yaml, properties, showDocs} = this.state || {};
        const {body} = this.props;

-        const defaultYaml = body && yml.stringify(body, {indent:2,schema:'core'});
+        const defaultYaml = body && yml.stringify(body, {indent: 2, schema: 'core'});

        return (
            <Modal isOpen={true} className='modal_modal' overlayClassName='modal_overlay' onRequestClose={() => this.close()}>
--- a/client/src/views/exec.tsx
+++ b/client/src/views/exec.tsx
@@ -4,7 +4,7 @@ import Select from 'react-select';
 import {Terminal} from 'xterm';
 import Base from '../components/base';
 import api from '../services/api';
-import { Pod, TODO } from '../utils/types';
+import {Pod, TODO} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/ingress.tsx
+++ b/client/src/views/ingress.tsx
@@ -8,7 +8,7 @@ import MetadataFields from '../components/metadataFields';
 import {TableBody} from '../components/listViewHelpers';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { Ingress } from '../utils/types';
+import {Ingress} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/ingresses.tsx
+++ b/client/src/views/ingresses.tsx
@@ -6,7 +6,7 @@ import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listVie
 import api from '../services/api';
 import test from '../utils/filterHelper';
 import {defaultSortInfo, SortInfo} from '../components/sorter';
-import { Ingress } from '../utils/types';
+import {Ingress} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/job.tsx
+++ b/client/src/views/job.tsx
@@ -17,7 +17,7 @@ import {filterByOwner} from '../utils/filterHelper';
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import ChartsContainer from '../components/chartsContainer';
 import {formatDuration} from '../utils/dates';
-import { Pod, Job, K8sEvent, Metrics } from '../utils/types';
+import {Pod, Job, K8sEvent, Metrics} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/logs.tsx
+++ b/client/src/views/logs.tsx
@@ -8,7 +8,7 @@ import Base from '../components/base';
 import InputFilter from '../components/inputFilter';
 import Loading from '../components/loading';
 import api from '../services/api';
-import { Pod } from '../utils/types';
+import {Pod} from '../utils/types';

 type Props = {
    namespace: string;
@@ -60,7 +60,7 @@ export default class Logs extends Base<Props, State> {
        }


-        this.setState({containers, initContainers });
+        this.setState({containers, initContainers});
        this.setContainer(containers[0]);
    }

@@ -74,7 +74,7 @@ export default class Logs extends Base<Props, State> {
        this.startLogsStream(this.state.container, showPrevious);
    }

-    startLogsStream(container?: string, showPrevious: boolean = false) {
+    startLogsStream(container?: string, showPrevious = false) {
        if (!container) return;

        this.setState({container, showPrevious, items: []});
@@ -92,18 +92,18 @@ export default class Logs extends Base<Props, State> {
        const lowercaseFilter = filter.toLowerCase();
        const filteredLogs = items.filter(x => x.toLowerCase().includes(lowercaseFilter));

-        const containerOptions = containers.map(x => ({ value: x, label: x }));
-        const initContainerOptions = initContainers.map(x => ({ value: x, label: x }));
+        const containerOptions = containers.map(x => ({value: x, label: x}));
+        const initContainerOptions = initContainers.map(x => ({value: x, label: x}));

        const options = [{
            label: 'Containers',
-            options: containerOptions
+            options: containerOptions,
        }, {
            label: 'Init Containers',
-            options: initContainerOptions
+            options: initContainerOptions,
        }];

-        const selected = [...containerOptions, ...initContainerOptions].find((x) => x.value === container);
+        const selected = [...containerOptions, ...initContainerOptions].find(x => x.value === container);

        return (
            <div id='content'>
--- a/client/src/views/namespace.tsx
+++ b/client/src/views/namespace.tsx
@@ -14,7 +14,7 @@ import PodStatusChart from '../components/podStatusChart';
 import PodCpuChart from '../components/podCpuChart';
 import PodRamChart from '../components/podRamChart';
 import getMetrics from '../utils/metricsHelpers';
-import { Namespace, K8sEvent, Pod, Metrics } from '../utils/types';
+import {Namespace, K8sEvent, Pod, Metrics} from '../utils/types';

 type Props = {
    namespace: string;
@@ -86,8 +86,8 @@ export default class NamespaceView extends Base<Props, State> {
                />

                <div className='contentPanel_header'>Events</div>
-                
-                {/* 
+
+                {/*
                // @ts-ignore */}
                <EventsPanel items={events} />
            </div>
--- a/client/src/views/namespaces.tsx
+++ b/client/src/views/namespaces.tsx
@@ -5,7 +5,7 @@ import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listVie
 import Sorter, {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
-import { Namespace } from '../utils/types';
+import {Namespace} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/nodes.tsx
+++ b/client/src/views/nodes.tsx
@@ -11,7 +11,7 @@ import getReadyStatus from '../utils/nodeHelpers';
 import NodeCpuChart from '../components/nodeCpuChart';
 import NodeRamChart from '../components/nodeRamChart';
 import getMetrics from '../utils/metricsHelpers';
-import { Node, Metrics, Pod } from '../utils/types';
+import {Node, Metrics, Pod} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/persistentVolume.tsx
+++ b/client/src/views/persistentVolume.tsx
@@ -7,7 +7,7 @@ import Field from '../components/field';
 import MetadataFields from '../components/metadataFields';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { PersistentVolume } from '../utils/types';
+import {PersistentVolume} from '../utils/types';

 type State = {
    item?: PersistentVolume;
--- a/client/src/views/persistentVolumeClaim.tsx
+++ b/client/src/views/persistentVolumeClaim.tsx
@@ -7,7 +7,7 @@ import Field from '../components/field';
 import MetadataFields from '../components/metadataFields';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { PersistentVolumeClaim } from '../utils/types';
+import {PersistentVolumeClaim} from '../utils/types';

 type State = {
    item?: PersistentVolumeClaim;
--- a/client/src/views/persistentVolumeClaims.tsx
+++ b/client/src/views/persistentVolumeClaims.tsx
@@ -6,7 +6,7 @@ import Sorter, {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
 import {parseDiskSpace} from '../utils/unitHelpers';
-import { PersistentVolumeClaim } from '../utils/types';
+import {PersistentVolumeClaim} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/pod.tsx
+++ b/client/src/views/pod.tsx
@@ -19,7 +19,7 @@ import getMetrics from '../utils/metricsHelpers';
 import PodCpuChart from '../components/podCpuChart';
 import PodRamChart from '../components/podRamChart';
 import ChartsContainer from '../components/chartsContainer';
-import { Pod, Metrics, K8sEvent } from '../utils/types';
+import {Pod, Metrics, K8sEvent} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/replicaSet.tsx
+++ b/client/src/views/replicaSet.tsx
@@ -20,7 +20,7 @@ import getMetrics from '../utils/metricsHelpers';
 import {filterByOwner} from '../utils/filterHelper';
 import ChartsContainer from '../components/chartsContainer';
 import HpaPanel from '../components/hpaPanel';
-import { ReplicaSet, Pod, K8sEvent, Metrics, Hpa } from '../utils/types';
+import {ReplicaSet, Pod, K8sEvent, Metrics, Hpa} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/replicaSets.tsx
+++ b/client/src/views/replicaSets.tsx
@@ -5,7 +5,7 @@ import ReplicaSetsPanel from '../components/replicaSetsPanel';
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
-import { ReplicaSet } from '../utils/types';
+import {ReplicaSet} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/role.tsx
+++ b/client/src/views/role.tsx
@@ -8,7 +8,7 @@ import MetadataFields from '../components/metadataFields';
 import {TableBody} from '../components/listViewHelpers';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { Role } from '../utils/types';
+import {Role} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/roleBinding.tsx
+++ b/client/src/views/roleBinding.tsx
@@ -10,7 +10,7 @@ import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
 import Sorter, {defaultSortInfo, SortInfo} from '../components/sorter';
 import ResourceSvg from '../art/resourceSvg';
-import { RoleBinding, RoleBindingSubject } from '../utils/types';
+import {RoleBinding, RoleBindingSubject} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/roleBindings.tsx
+++ b/client/src/views/roleBindings.tsx
@@ -5,7 +5,7 @@ import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listVie
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
-import { ClusterRole, ClusterRoleBinding } from '../utils/types';
+import {ClusterRole, ClusterRoleBinding} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/roles.tsx
+++ b/client/src/views/roles.tsx
@@ -5,7 +5,7 @@ import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listVie
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
-import { Role, ClusterRole } from '../utils/types';
+import {Role, ClusterRole} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/secret.tsx
+++ b/client/src/views/secret.tsx
@@ -8,7 +8,7 @@ import MetadataFields from '../components/metadataFields';
 import SecretValue from '../components/secretValue';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { Secret } from '../utils/types';
+import {Secret} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/secrets.tsx
+++ b/client/src/views/secrets.tsx
@@ -5,7 +5,7 @@ import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listVie
 import Sorter, {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
-import { Secret } from '../utils/types';
+import {Secret} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/service.tsx
+++ b/client/src/views/service.tsx
@@ -10,7 +10,7 @@ import Loading from '../components/loading';
 import MetadataFields from '../components/metadataFields';
 import SaveButton from '../components/saveButton';
 import {filterByOwner} from '../utils/filterHelper';
-import { Service, K8sEvent } from '../utils/types';
+import {Service, K8sEvent} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/serviceAccount.tsx
+++ b/client/src/views/serviceAccount.tsx
@@ -8,7 +8,7 @@ import Field from '../components/field';
 import MetadataFields from '../components/metadataFields';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { ServiceAccount } from '../utils/types';
+import {ServiceAccount} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/serviceAccounts.tsx
+++ b/client/src/views/serviceAccounts.tsx
@@ -5,7 +5,7 @@ import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listVie
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
-import { ServiceAccount } from '../utils/types';
+import {ServiceAccount} from '../utils/types';

 type State = {
    filter: string;
--- a/client/src/views/services.tsx
+++ b/client/src/views/services.tsx
@@ -5,7 +5,7 @@ import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listVie
 import {defaultSortInfo, SortInfo} from '../components/sorter';
 import api from '../services/api';
 import test from '../utils/filterHelper';
-import { Service } from '../utils/types';
+import {Service} from '../utils/types';

 type State = {
    filter: string;
@@ -48,15 +48,21 @@ export default class Services extends Base<{}, State> {
                            </tr>
                        </thead>

-                        <TableBody items={filtered} filter={filter} sort={sort} colSpan={4} row={x => (
-                            <tr key={x.metadata.uid}>
-                                <MetadataColumns
-                                    item={x}
-                                    includeNamespace={true}
-                                    href={`#!service/${x.metadata.namespace}/${x.metadata.name}`}
-                                />
-                            </tr>
-                        )} />
+                        <TableBody
+                            items={filtered}
+                            filter={filter}
+                            sort={sort}
+                            colSpan={4}
+                            row={x => (
+                                <tr key={x.metadata.uid}>
+                                    <MetadataColumns
+                                        item={x}
+                                        includeNamespace={true}
+                                        href={`#!service/${x.metadata.namespace}/${x.metadata.name}`}
+                                    />
+                                </tr>
+                            )}
+                        />
                    </table>
                </div>
            </div>
--- 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 {K8sEvent, Metrics, Pod, StatefulSet as StatefulSetInterface} from "../utils/types";
+import {K8sEvent, Metrics, Pod, StatefulSet as StatefulSetInterface} from '../utils/types';

 type Props = {
    namespace: string;
--- a/client/src/views/storageClass.tsx
+++ b/client/src/views/storageClass.tsx
@@ -7,7 +7,7 @@ import Field from '../components/field';
 import MetadataFields from '../components/metadataFields';
 import SaveButton from '../components/saveButton';
 import DeleteButton from '../components/deleteButton';
-import { StorageClass } from '../utils/types';
+import {StorageClass} from '../utils/types';

 type Props = {
    name: string;
--- a/client/src/views/storageClasses.tsx
+++ b/client/src/views/storageClasses.tsx
@@ -5,7 +5,7 @@ import {MetadataHeaders, MetadataColumns, TableBody} from '../components/listVie
 import api from '../services/api';
 import test from '../utils/filterHelper';
 import Sorter, {defaultSortInfo, SortInfo} from '../components/sorter';
-import { StorageClass } from '../utils/types';
+import {StorageClass} from '../utils/types';

 type State = {
    filter: string;
@@ -47,16 +47,22 @@ export default class StorageClasses extends Base<{}, State> {
                            </tr>
                        </thead>

-                        <TableBody items={filtered} filter={filter} sort={sort} colSpan={5} row={x => (
-                            <tr key={x.metadata.uid}>
-                                <MetadataColumns
-                                    item={x}
-                                    href={`#!storageclass/${x.metadata.name}`}
-                                />
-                                <td>{x.reclaimPolicy}</td>
-                                <td className='optional_small'>{x.volumeBindingMode}</td>
-                            </tr>
-                        )} />
+                        <TableBody
+                            items={filtered}
+                            filter={filter}
+                            sort={sort}
+                            colSpan={5}
+                            row={x => (
+                                <tr key={x.metadata.uid}>
+                                    <MetadataColumns
+                                        item={x}
+                                        href={`#!storageclass/${x.metadata.name}`}
+                                    />
+                                    <td>{x.reclaimPolicy}</td>
+                                    <td className='optional_small'>{x.volumeBindingMode}</td>
+                                </tr>
+                            )}
+                        />
                    </table>
                </div>
            </div>
--- a/client/src/views/workloads.tsx
+++ b/client/src/views/workloads.tsx
@@ -10,7 +10,7 @@ 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";
+import {ApiItem, CronJob, DaemonSet, Deployment, Job, StatefulSet, TODO} from '../utils/types';

 type Props = {

@@ -85,18 +85,24 @@ export default class Workloads extends Base<Props, State> {
                            </tr>
                        </thead>

-                        <TableBody items={filtered} filter={filter} sort={sort} colSpan={5} row={x => (
-                            <tr key={x.metadata.uid}>
-                                <MetadataColumns
-                                    item={x}
-                                    includeNamespace={true}
-                                    href={`#!workload/${x.kind.toLowerCase()}/${x.metadata.namespace}/${x.metadata.name}`}
-                                />
-                                <td>
-                                    <Status item={x} />
-                                </td>
-                            </tr>
-                        )} />
+                        <TableBody
+                            items={filtered}
+                            filter={filter}
+                            sort={sort}
+                            colSpan={5}
+                            row={x => (
+                                <tr key={x.metadata.uid}>
+                                    <MetadataColumns
+                                        item={x}
+                                        includeNamespace={true}
+                                        href={`#!workload/${x.kind.toLowerCase()}/${x.metadata.namespace}/${x.metadata.name}`}
+                                    />
+                                    <td>
+                                        <Status item={x} />
+                                    </td>
+                                </tr>
+                            )}
+                        />
                    </table>
                </div>
            </div>