diff --git a/.github/workflows/ui-test.yml b/.github/workflows/ui-test.yml index 1a22061d..b5c820c2 100644 --- a/.github/workflows/ui-test.yml +++ b/.github/workflows/ui-test.yml @@ -3,10 +3,10 @@ name: ui tests on: pull_request: paths: - - 'cyclops-ui/**' + - "cyclops-ui/**" push: paths: - - 'cyclops-ui/**' + - "cyclops-ui/**" branches: - main @@ -27,8 +27,6 @@ jobs: cd ${{ github.workspace }}/cyclops-ui yarn test - name: Build - env: - CI: false run: | cd ${{ github.workspace }}/cyclops-ui yarn build diff --git a/cyclops-ui/package.json b/cyclops-ui/package.json index d0296025..6a8b6126 100644 --- a/cyclops-ui/package.json +++ b/cyclops-ui/package.json @@ -70,6 +70,7 @@ ] }, "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.0", "@types/react-gauge-chart": "^0.4.3", "@types/react-highlight-words": "^0.16.7", "husky": "^9.0.11", diff --git a/cyclops-ui/src/.DS_Store b/cyclops-ui/src/.DS_Store deleted file mode 100644 index 7ceb3145..00000000 Binary files a/cyclops-ui/src/.DS_Store and /dev/null differ diff --git a/cyclops-ui/src/components/.DS_Store b/cyclops-ui/src/components/.DS_Store deleted file mode 100644 index 2f155174..00000000 Binary files a/cyclops-ui/src/components/.DS_Store and /dev/null differ diff --git a/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx b/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx index 2ac286a9..2c826600 100644 --- a/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx +++ b/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx @@ -16,32 +16,32 @@ const ConfigMap = ({ name, namespace }: Props) => { description: "", }); - function fetchConfigMap() { - axios - .get(`/api/resources`, { - params: { - group: ``, - version: `v1`, - kind: `ConfigMap`, - name: name, - namespace: namespace, - }, - }) - .then((res) => { - setConfigMap(res.data); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - } - useEffect(() => { + function fetchConfigMap() { + axios + .get(`/api/resources`, { + params: { + group: ``, + version: `v1`, + kind: `ConfigMap`, + name: name, + namespace: namespace, + }, + }) + .then((res) => { + setConfigMap(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); + } + fetchConfigMap(); const interval = setInterval(() => fetchConfigMap(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [name, namespace]); const configMapData = (configMap: any) => { if (configMap.data) { diff --git a/cyclops-ui/src/components/k8s-resources/CronJob.tsx b/cyclops-ui/src/components/k8s-resources/CronJob.tsx index 84d594d9..be6fd947 100644 --- a/cyclops-ui/src/components/k8s-resources/CronJob.tsx +++ b/cyclops-ui/src/components/k8s-resources/CronJob.tsx @@ -20,32 +20,32 @@ const CronJob = ({ name, namespace }: Props) => { description: "", }); - function fetchCronJob() { - axios - .get(`/api/resources`, { - params: { - group: `batch`, - version: `v1`, - kind: `CronJob`, - name: name, - namespace: namespace, - }, - }) - .then((res) => { - setCronjob(res.data); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - } - useEffect(() => { + function fetchCronJob() { + axios + .get(`/api/resources`, { + params: { + group: `batch`, + version: `v1`, + kind: `CronJob`, + name: name, + namespace: namespace, + }, + }) + .then((res) => { + setCronjob(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); + } + fetchCronJob(); const interval = setInterval(() => fetchCronJob(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [name, namespace]); return (
diff --git a/cyclops-ui/src/components/k8s-resources/DaemonSet.tsx b/cyclops-ui/src/components/k8s-resources/DaemonSet.tsx index edcf2ef8..6091c28f 100644 --- a/cyclops-ui/src/components/k8s-resources/DaemonSet.tsx +++ b/cyclops-ui/src/components/k8s-resources/DaemonSet.tsx @@ -19,32 +19,32 @@ const DaemonSet = ({ name, namespace }: Props) => { description: "", }); - function fetchDaemonSet() { - axios - .get(`/api/resources`, { - params: { - group: `apps`, - version: `v1`, - kind: `DaemonSet`, - name: name, - namespace: namespace, - }, - }) - .then((res) => { - setDaemonSet(res.data); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - } - useEffect(() => { + function fetchDaemonSet() { + axios + .get(`/api/resources`, { + params: { + group: `apps`, + version: `v1`, + kind: `DaemonSet`, + name: name, + namespace: namespace, + }, + }) + .then((res) => { + setDaemonSet(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); + } + fetchDaemonSet(); const interval = setInterval(() => fetchDaemonSet(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [name, namespace]); return (
diff --git a/cyclops-ui/src/components/k8s-resources/Deployment.tsx b/cyclops-ui/src/components/k8s-resources/Deployment.tsx index f59ecb9c..cfc1095b 100644 --- a/cyclops-ui/src/components/k8s-resources/Deployment.tsx +++ b/cyclops-ui/src/components/k8s-resources/Deployment.tsx @@ -19,32 +19,32 @@ const Deployment = ({ name, namespace }: Props) => { description: "", }); - function fetchDeployment() { - axios - .get(`/api/resources`, { - params: { - group: `apps`, - version: `v1`, - kind: `Deployment`, - name: name, - namespace: namespace, - }, - }) - .then((res) => { - setDeployment(res.data); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - } - useEffect(() => { + function fetchDeployment() { + axios + .get(`/api/resources`, { + params: { + group: `apps`, + version: `v1`, + kind: `Deployment`, + name: name, + namespace: namespace, + }, + }) + .then((res) => { + setDeployment(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); + } + fetchDeployment(); const interval = setInterval(() => fetchDeployment(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [name, namespace]); return (
diff --git a/cyclops-ui/src/components/k8s-resources/Job.tsx b/cyclops-ui/src/components/k8s-resources/Job.tsx index 2e5ee30a..5dfe156a 100644 --- a/cyclops-ui/src/components/k8s-resources/Job.tsx +++ b/cyclops-ui/src/components/k8s-resources/Job.tsx @@ -20,32 +20,32 @@ const Job = ({ name, namespace }: Props) => { description: "", }); - function fetchJob() { - axios - .get(`/api/resources`, { - params: { - group: `batch`, - version: `v1`, - kind: `Job`, - name: name, - namespace: namespace, - }, - }) - .then((res) => { - setJob(res.data); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - } - useEffect(() => { + function fetchJob() { + axios + .get(`/api/resources`, { + params: { + group: `batch`, + version: `v1`, + kind: `Job`, + name: name, + namespace: namespace, + }, + }) + .then((res) => { + setJob(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); + } + fetchJob(); const interval = setInterval(() => fetchJob(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [name, namespace]); return (
diff --git a/cyclops-ui/src/components/k8s-resources/Pod.tsx b/cyclops-ui/src/components/k8s-resources/Pod.tsx index 96c398f0..c7457450 100644 --- a/cyclops-ui/src/components/k8s-resources/Pod.tsx +++ b/cyclops-ui/src/components/k8s-resources/Pod.tsx @@ -63,32 +63,32 @@ const Pod = ({ name, namespace }: Props) => { }); const [logs, setLogs] = useState(""); - function fetchPod() { - axios - .get(`/api/resources`, { - params: { - group: ``, - version: `v1`, - kind: `Pod`, - name: name, - namespace: namespace, - }, - }) - .then((res) => { - setPod(res.data); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - } - useEffect(() => { + function fetchPod() { + axios + .get(`/api/resources`, { + params: { + group: ``, + version: `v1`, + kind: `Pod`, + name: name, + namespace: namespace, + }, + }) + .then((res) => { + setPod(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); + } + fetchPod(); const interval = setInterval(() => fetchPod(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [name, namespace]); const handleCancelLogs = () => { setLogsModal({ diff --git a/cyclops-ui/src/components/k8s-resources/Secret.tsx b/cyclops-ui/src/components/k8s-resources/Secret.tsx index 4a5569a5..4a536f62 100644 --- a/cyclops-ui/src/components/k8s-resources/Secret.tsx +++ b/cyclops-ui/src/components/k8s-resources/Secret.tsx @@ -1,7 +1,7 @@ import axios from "axios"; import React, { useEffect, useState } from "react"; import { mapResponseError } from "../../utils/api/errors"; -import { Alert, Descriptions, Divider, Table } from "antd"; +import { Alert, Descriptions, Divider } from "antd"; interface Props { name: string; diff --git a/cyclops-ui/src/components/k8s-resources/Service.tsx b/cyclops-ui/src/components/k8s-resources/Service.tsx index 012cda44..f49c5c0b 100644 --- a/cyclops-ui/src/components/k8s-resources/Service.tsx +++ b/cyclops-ui/src/components/k8s-resources/Service.tsx @@ -28,32 +28,32 @@ const Service = ({ name, namespace }: Props) => { description: "", }); - function fetchService() { - axios - .get(`/api/resources`, { - params: { - group: ``, - version: `v1`, - kind: `Service`, - name: name, - namespace: namespace, - }, - }) - .then((res) => { - setService(res.data); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - } - useEffect(() => { + function fetchService() { + axios + .get(`/api/resources`, { + params: { + group: ``, + version: `v1`, + kind: `Service`, + name: name, + namespace: namespace, + }, + }) + .then((res) => { + setService(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); + } + fetchService(); const interval = setInterval(() => fetchService(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [name, namespace]); return (
diff --git a/cyclops-ui/src/components/k8s-resources/StatefulSet.tsx b/cyclops-ui/src/components/k8s-resources/StatefulSet.tsx index 9186ce54..92727444 100644 --- a/cyclops-ui/src/components/k8s-resources/StatefulSet.tsx +++ b/cyclops-ui/src/components/k8s-resources/StatefulSet.tsx @@ -25,32 +25,32 @@ const StatefulSet = ({ name, namespace }: Props) => { description: "", }); - function fetchStatefulSet() { - axios - .get(`/api/resources`, { - params: { - group: `apps`, - version: `v1`, - kind: `StatefulSet`, - name: name, - namespace: namespace, - }, - }) - .then((res) => { - setStatefulSet(res.data); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - } - useEffect(() => { + function fetchStatefulSet() { + axios + .get(`/api/resources`, { + params: { + group: `apps`, + version: `v1`, + kind: `StatefulSet`, + name: name, + namespace: namespace, + }, + }) + .then((res) => { + setStatefulSet(res.data); + }) + .catch((error) => { + setError(mapResponseError(error)); + }); + } + fetchStatefulSet(); const interval = setInterval(() => fetchStatefulSet(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [name, namespace]); return (
diff --git a/cyclops-ui/src/components/k8s-resources/common/PodTable.tsx b/cyclops-ui/src/components/k8s-resources/common/PodTable.tsx index bee83f31..cf6e7965 100644 --- a/cyclops-ui/src/components/k8s-resources/common/PodTable.tsx +++ b/cyclops-ui/src/components/k8s-resources/common/PodTable.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { Button, Col, diff --git a/cyclops-ui/src/components/pages/EditModule.tsx b/cyclops-ui/src/components/pages/EditModule.tsx index c4cb7ff0..b913e633 100644 --- a/cyclops-ui/src/components/pages/EditModule.tsx +++ b/cyclops-ui/src/components/pages/EditModule.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { Alert, Button, @@ -42,10 +42,7 @@ import { fileExtension, findMaps, flattenObjectKeys } from "../../utils/form"; import "./custom.css"; import { numberInputValidators } from "../../utils/validators/number"; import { stringInputValidators } from "../../utils/validators/string"; -import { - moduleTemplateReferenceView, - templateRef, -} from "../../utils/templateRef"; +import { templateRef } from "../../utils/templateRef"; import { FeedbackError, FormValidationErrors, @@ -57,8 +54,6 @@ import { Template, } from "../../utils/api/template"; -const { TextArea } = Input; - const { Title } = Typography; const layout = { wrapperCol: { span: 16 }, @@ -89,7 +84,6 @@ const EditModule = () => { const [initialValuesRaw, setInitialValuesRaw] = useState({}); - const [allConfigs, setAllConfigs] = useState([]); const [values, setValues] = useState({}); const [isChanged, setIsChanged] = useState(false); const [isTemplateChanged, setIsTemplateChanged] = useState(false); @@ -138,7 +132,7 @@ const EditModule = () => { let { moduleName } = useParams(); - const mapsToArray = (fields: any[], values: any): any => { + const mapsToArray = useCallback((fields: any[], values: any): any => { let out: any = {}; fields.forEach((field) => { let valuesList: any[] = []; @@ -202,7 +196,7 @@ const EditModule = () => { }); return out; - }; + }, []); useEffect(() => { const fetchModuleData = async () => { @@ -258,16 +252,11 @@ const EditModule = () => { }); }; fetchModuleData(); - }, []); + }, [editTemplateForm, form, moduleName, mapsToArray]); useEffect(() => { form.validateFields(flattenObjectKeys(values)); - }, [values]); - - const configNames: {} | any = []; - allConfigs.map((c: any) => { - configNames.push({c.name}); - }); + }, [values, form]); const handleValuesChange = (changedValues: any, allValues: any) => { if (JSON.stringify(allValues) === JSON.stringify(values)) { @@ -590,6 +579,7 @@ const EditModule = () => { arrayIndexLifetime = arrayIndexLifetime - 1; } + var header; switch (field.type) { case "string": if (field.enum) { @@ -689,7 +679,7 @@ const EditModule = () => { ); return; case "object": - var header = {field.name}; + header = {field.name}; if (field.description && field.description.length !== 0) { header = ( @@ -774,7 +764,7 @@ const EditModule = () => { ); return; case "array": - var header = {field.name}; + header = {field.name}; if (field.description && field.description.length !== 0) { header = ( diff --git a/cyclops-ui/src/components/pages/History.tsx b/cyclops-ui/src/components/pages/History.tsx index 4a483590..55891566 100644 --- a/cyclops-ui/src/components/pages/History.tsx +++ b/cyclops-ui/src/components/pages/History.tsx @@ -6,7 +6,7 @@ import { useParams } from "react-router-dom"; import ReactDiffViewer from "react-diff-viewer"; import ReactAce from "react-ace"; -const { Title, Text } = Typography; +const { Title } = Typography; require(`ace-builds/src-noconflict/mode-sass`); require(`ace-builds/src-noconflict/snippets/sass`); @@ -44,7 +44,7 @@ const ModuleHistory = () => { previous: diff.previous, }); }); - }, []); + }, [diff.previous, moduleName]); const handleOk = () => { setDiffModal({ diff --git a/cyclops-ui/src/components/pages/ModuleDetails.tsx b/cyclops-ui/src/components/pages/ModuleDetails.tsx index c052cf97..562aa62b 100644 --- a/cyclops-ui/src/components/pages/ModuleDetails.tsx +++ b/cyclops-ui/src/components/pages/ModuleDetails.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useCallback } from "react"; import { Alert, Button, @@ -174,21 +174,7 @@ const ModuleDetails = () => { }); } - function fetchModule() { - axios - .get(`/api/modules/` + moduleName) - .then((res) => { - setModule(res.data); - setLoadModule(true); - }) - .catch((error) => { - setLoading(false); - setLoadModule(true); - setError(mapResponseError(error)); - }); - } - - function fetchModuleResources() { + const fetchModuleResources = useCallback(() => { axios .get(`/api/modules/` + moduleName + `/resources`) .then((res) => { @@ -200,16 +186,30 @@ const ModuleDetails = () => { setLoadResources(true); setError(mapResponseError(error)); }); - } + }, [moduleName]); useEffect(() => { + function fetchModule() { + axios + .get(`/api/modules/` + moduleName) + .then((res) => { + setModule(res.data); + setLoadModule(true); + }) + .catch((error) => { + setLoading(false); + setLoadModule(true); + setError(mapResponseError(error)); + }); + } + fetchModule(); fetchModuleResources(); const interval = setInterval(() => fetchModuleResources(), 15000); return () => { clearInterval(interval); }; - }, []); + }, [moduleName, fetchModuleResources]); const getCollapseColor = (fieldName: string) => { if ( @@ -590,6 +590,7 @@ const ModuleDetails = () => { <img + alt="" style={{ height: "1.5em", marginRight: "8px" }} src={module.iconURL} /> diff --git a/cyclops-ui/src/components/pages/Modules/Modules.tsx b/cyclops-ui/src/components/pages/Modules/Modules.tsx index b68b823a..1ed3011a 100644 --- a/cyclops-ui/src/components/pages/Modules/Modules.tsx +++ b/cyclops-ui/src/components/pages/Modules/Modules.tsx @@ -4,7 +4,6 @@ import { Col, Divider, Row, - Select, Typography, Input, Card, @@ -27,7 +26,6 @@ const Modules = () => { const [allData, setAllData] = useState([]); const [filteredData, setFilteredData] = useState([]); const [loadingModules, setLoadingModules] = useState(false); - const [namespacesState, setNamespacesState] = useState([]); const [error, setError] = useState({ message: "", description: "", @@ -48,23 +46,10 @@ const Modules = () => { }); }, []); - const namespaces: {} | any = []; - namespacesState.map((namespace: any) => { - namespaces.push( - <Select.Option key={namespace.name}>{namespace.name}</Select.Option>, - ); - }); - - const [value, setValue] = useState(""); - const handleClick = () => { history("/modules/new"); }; - const handleClickNew = () => { - history("/new-app"); - }; - const handleSearch = (event: any) => { const query = event.target.value; var updatedList = [...allData]; @@ -104,7 +89,7 @@ const Modules = () => { return <Spin size={"large"} />; } - if (filteredData.length == 0) { + if (filteredData.length === 0) { return ( <div style={{ width: "100%" }}> <Empty description="No Modules Found"></Empty> @@ -119,6 +104,7 @@ const Modules = () => { title={ <div> <img + alt="" style={{ height: "2em", marginRight: "8px" }} src={module.iconURL} /> diff --git a/cyclops-ui/src/components/pages/NewModule.tsx b/cyclops-ui/src/components/pages/NewModule.tsx index 11b081fc..9a523376 100644 --- a/cyclops-ui/src/components/pages/NewModule.tsx +++ b/cyclops-ui/src/components/pages/NewModule.tsx @@ -129,7 +129,7 @@ const NewModule = () => { useEffect(() => { form.validateFields(flattenObjectKeys(initialValues)); - }, [initialValues]); + }, [initialValues, form]); const mapsToArray = (fields: any[], values: any): any => { let out: any = {}; @@ -566,6 +566,7 @@ const NewModule = () => { arrayIndexLifetime = arrayIndexLifetime - 1; } + var header; switch (field.type) { case "string": if (field.enum) { @@ -663,7 +664,7 @@ const NewModule = () => { ); return; case "object": - var header = <Row>{field.name}</Row>; + header = <Row>{field.name}</Row>; if (field.description && field.description.length !== 0) { header = ( @@ -745,7 +746,7 @@ const NewModule = () => { ); return; case "array": - var header = <Row>{field.name}</Row>; + header = <Row>{field.name}</Row>; if (field.description && field.description.length !== 0) { header = ( @@ -1042,6 +1043,7 @@ const NewModule = () => { {templateStore.map((option: any, index) => ( <Option key={option.name} value={option.name}> <img + alt="" style={{ height: "1.5em", marginRight: "8px" }} src={option.iconURL} /> diff --git a/cyclops-ui/src/components/pages/NodeDetails.tsx b/cyclops-ui/src/components/pages/NodeDetails.tsx index 14322a79..53d89fe7 100644 --- a/cyclops-ui/src/components/pages/NodeDetails.tsx +++ b/cyclops-ui/src/components/pages/NodeDetails.tsx @@ -13,7 +13,6 @@ import { Typography, } from "antd"; import "ace-builds/src-noconflict/ace"; -import { useNavigate } from "react-router"; import { useParams } from "react-router-dom"; import axios from "axios"; import "ace-builds/src-noconflict/mode-jsx"; @@ -26,7 +25,7 @@ import { SearchOutlined } from "@ant-design/icons"; import Highlighter from "react-highlight-words"; import { mapResponseError } from "../../utils/api/errors"; -const { Title, Text } = Typography; +const { Title } = Typography; interface DataSourceType { name: string; @@ -38,7 +37,6 @@ interface DataSourceType { type DataIndex = keyof DataSourceType; const NodeDetails = () => { - const history = useNavigate(); let { nodeName } = useParams(); const [node, setNode] = useState({ @@ -67,11 +65,6 @@ const NodeDetails = () => { pod_count: 0, }); - const [activeCollapses, setActiveCollapses] = useState(new Map()); - const updateActiveCollapses = (k: any, v: any) => { - setActiveCollapses(new Map(activeCollapses.set(k, v))); - }; - const [error, setError] = useState({ message: "", description: "", @@ -278,27 +271,27 @@ const NodeDetails = () => { }, }); - const fetchNodeData = () => { - axios - .get(`/api/nodes/` + nodeName) - .then((res) => { - setNode(res.data); - setResources({ - cpu: +(res.data.requested.cpu / res.data.available.cpu).toFixed(4), - memory: +( - res.data.requested.memory / res.data.available.memory - ).toFixed(4), - pod_count: +( - res.data.requested.pod_count / res.data.available.pod_count - ).toFixed(4), + useEffect(() => { + const fetchNodeData = () => { + axios + .get(`/api/nodes/` + nodeName) + .then((res) => { + setNode(res.data); + setResources({ + cpu: +(res.data.requested.cpu / res.data.available.cpu).toFixed(4), + memory: +( + res.data.requested.memory / res.data.available.memory + ).toFixed(4), + pod_count: +( + res.data.requested.pod_count / res.data.available.pod_count + ).toFixed(4), + }); + }) + .catch((error) => { + setError(mapResponseError(error)); }); - }) - .catch((error) => { - setError(mapResponseError(error)); - }); - }; + }; - useEffect(() => { fetchNodeData(); // setInterval to refresh data every 15 seconds @@ -308,7 +301,7 @@ const NodeDetails = () => { // Cleanup the interval when the component is unmounted return () => clearInterval(intervalId); - }, []); + }, [nodeName]); const columns: ColumnType<DataSourceType>[] = [ { @@ -347,13 +340,13 @@ const NodeDetails = () => { if (cond.type === type) { switch (type) { case "MemoryPressure": - return cond.status == "True" ? "#de3428" : "green"; + return cond.status === "True" ? "#de3428" : "green"; case "DiskPressure": - return cond.status == "True" ? "#de3428" : "green"; + return cond.status === "True" ? "#de3428" : "green"; case "PIDPressure": - return cond.status == "True" ? "#de3428" : "green"; + return cond.status === "True" ? "#de3428" : "green"; case "Ready": - return cond.status == "True" ? "green" : "#de3428"; + return cond.status === "True" ? "green" : "#de3428"; default: console.log("default", type); } diff --git a/cyclops-ui/src/components/pages/Nodes.tsx b/cyclops-ui/src/components/pages/Nodes.tsx index 24b5ef15..f1b68b99 100644 --- a/cyclops-ui/src/components/pages/Nodes.tsx +++ b/cyclops-ui/src/components/pages/Nodes.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; import { Button, Col, Row, Table, Typography, Alert } from "antd"; -import { useNavigate } from "react-router"; import axios from "axios"; import { formatBytes } from "../../utils/common"; import { mapResponseError } from "../../utils/api/errors"; @@ -8,9 +7,7 @@ import { mapResponseError } from "../../utils/api/errors"; const { Title } = Typography; const Nodes = () => { - const history = useNavigate(); const [nodes, setNodes] = useState([]); - const [filteredNodes, setFilteredNodes] = useState([]); const [error, setError] = useState({ message: "", description: "", @@ -21,7 +18,6 @@ const Nodes = () => { .get(`/api/nodes`) .then((res) => { setNodes(res.data); - setFilteredNodes(res.data); }) .catch((error) => { setError(mapResponseError(error)); diff --git a/cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx b/cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx index b2f3e95b..358a9ce1 100644 --- a/cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx +++ b/cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx @@ -189,6 +189,7 @@ const TemplateStore = () => { render={function (iconURL) { return ( <img + alt="" style={{ verticalAlign: "middle", margin: "-5px", diff --git a/cyclops-ui/src/utils/common.tsx b/cyclops-ui/src/utils/common.tsx index 794d66be..8e243afd 100644 --- a/cyclops-ui/src/utils/common.tsx +++ b/cyclops-ui/src/utils/common.tsx @@ -1,5 +1,5 @@ export function formatBytes(bytes: number) { - if (bytes == 0) return "0 Bytes"; + if (bytes === 0) return "0 Bytes"; var k = 1024, dm = 2, sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],