From f6b322a92aed336f04782d6bbcffe25f41cf16c7 Mon Sep 17 00:00:00 2001 From: Yann Stepienik Date: Tue, 31 Oct 2023 19:35:50 +0000 Subject: [PATCH] [release] v0.12.0-unstable25 --- changelog.md | 2 ++ client/src/components/apiModal.jsx | 2 +- client/src/pages/config/users/proxyman.jsx | 5 +++- .../pages/dashboard/components/mini-plot.jsx | 11 ++++++--- .../servapps/containers/docker-compose.jsx | 4 ++-- .../pages/servapps/containers/overview.jsx | 10 ++++++-- client/src/pages/servapps/servapps.jsx | 5 +++- client/src/utils/servapp-icon.jsx | 13 +++++++---- package-lock.json | 23 +++++++++++++++++-- package.json | 10 +++++++- 10 files changed, 67 insertions(+), 18 deletions(-) diff --git a/changelog.md b/changelog.md index 923e800..a5add76 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,8 @@ - Integrated a new docker-less mode of functioning for networking - Added Button to force reset HTTPS cert in settings - New color slider with reset buttons + - Fixed blinking modals issues + - Added lazyloading to URL and Servapp pages images ## Version 0.11.3 - Fix missing even subscriber on export diff --git a/client/src/components/apiModal.jsx b/client/src/components/apiModal.jsx index ceba699..f2c6cbe 100644 --- a/client/src/components/apiModal.jsx +++ b/client/src/components/apiModal.jsx @@ -57,7 +57,7 @@ const ApiModal = ({ callback, label }) => { }, [openModal]); return <> - setOpenModal(false)}> + setOpenModal(false)} fullWidth maxWidth={'sm'}> Refresh Page diff --git a/client/src/pages/config/users/proxyman.jsx b/client/src/pages/config/users/proxyman.jsx index 1572573..f0d212e 100644 --- a/client/src/pages/config/users/proxyman.jsx +++ b/client/src/pages/config/users/proxyman.jsx @@ -39,6 +39,7 @@ import HostChip from '../../../components/hostChip'; import {RouteActions, RouteMode, RouteSecurity} from '../../../components/routeComponents'; import { useNavigate } from 'react-router'; import NewRouteCreate from '../routes/newRoute'; +import LazyLoad from 'react-lazyload'; const stickyButton = { position: 'fixed', @@ -154,7 +155,9 @@ const ProxyManagement = () => { columns={[ { title: '', - field: (r) => , + field: (r) => + + , style: { textAlign: 'center', }, diff --git a/client/src/pages/dashboard/components/mini-plot.jsx b/client/src/pages/dashboard/components/mini-plot.jsx index caedd5b..477d284 100644 --- a/client/src/pages/dashboard/components/mini-plot.jsx +++ b/client/src/pages/dashboard/components/mini-plot.jsx @@ -1,4 +1,6 @@ import React, { useEffect, useState, useMemo } from 'react'; +import { useInView } from 'react-intersection-observer'; + // material-ui import { Avatar, @@ -34,8 +36,11 @@ const _MiniPlotComponent = ({metrics, labels}) => { const [dataMetrics, setDataMetrics] = useState([]); const [series, setSeries] = useState([]); const slot = 'hourly'; + const [ref, inView] = useInView(); useEffect(() => { + if(!inView) return; + let xAxis = []; if(slot === 'latest') { @@ -88,7 +93,7 @@ const _MiniPlotComponent = ({metrics, labels}) => { setSeries(_series); }); - }, [metrics]); + }, [metrics, inView]); const chartOptions = { colors: [ @@ -167,13 +172,13 @@ const _MiniPlotComponent = ({metrics, labels}) => { fontSize: '110%', whiteSpace: 'nowrap', }}>{formaters[di](dataMetric.Values[dataMetric.Values.length - 1].Value)} -
{(labels && labels[di]) || dataMetric.Label}
+
{(labels && labels[dataMetric.Key]) || dataMetric.Label}
)}
+ }} ref={ref}>
diff --git a/client/src/pages/servapps/containers/docker-compose.jsx b/client/src/pages/servapps/containers/docker-compose.jsx index 567588c..1a5c0ae 100644 --- a/client/src/pages/servapps/containers/docker-compose.jsx +++ b/client/src/pages/servapps/containers/docker-compose.jsx @@ -499,9 +499,9 @@ const DockerComposeImport = ({ refresh, dockerComposeInit, installerInit, defaul } return <> - setOpenModal(false)}> + setOpenModal(false)} fullWidth maxWidth={'sm'}> {installer ? "Installation" : "Import Compose File"} - + {step === 0 && !installer && <> diff --git a/client/src/pages/servapps/containers/overview.jsx b/client/src/pages/servapps/containers/overview.jsx index b623f23..b59ebd8 100644 --- a/client/src/pages/servapps/containers/overview.jsx +++ b/client/src/pages/servapps/containers/overview.jsx @@ -174,11 +174,17 @@ const ContainerOverview = ({ containerInfo, config, refresh, updatesAvailable, s + ]} labels={{ + ["cosmos.system.docker.cpu." + Name.replace('/', '')]: "CPU", + ["cosmos.system.docker.ram." + Name.replace('/', '')]: "RAM" + }}/> + ]} labels={{ + ["cosmos.system.docker.netTx." + Name.replace('/', '')]: "NTX", + ["cosmos.system.docker.netTx." + Name.replace('/', '')]: "NRX" + }}/> diff --git a/client/src/pages/servapps/servapps.jsx b/client/src/pages/servapps/servapps.jsx index 6fc86c0..8f37fa4 100644 --- a/client/src/pages/servapps/servapps.jsx +++ b/client/src/pages/servapps/servapps.jsx @@ -301,7 +301,10 @@ const ServApps = () => { + ]} labels={{ + ["cosmos.system.docker.cpu." + app.Names[0].replace('/', '')]: "CPU", + ["cosmos.system.docker.ram." + app.Names[0].replace('/', '')]: "RAM" + }}/>
diff --git a/client/src/utils/servapp-icon.jsx b/client/src/utils/servapp-icon.jsx index a052dfd..2ee0e74 100644 --- a/client/src/utils/servapp-icon.jsx +++ b/client/src/utils/servapp-icon.jsx @@ -1,9 +1,12 @@ import { getFaviconURL } from "./routes"; import logogray from '../assets/images/icons/cosmos_gray.png'; +import LazyLoad from 'react-lazyload'; -export const ServAppIcon = ({route, container, ...pprops}) => { - return (container && container.Labels["cosmos-icon"]) ? - : - route ? - : +export const ServAppIcon = ({route, container, width, ...pprops}) => { + return + {(container && container.Labels["cosmos-icon"]) ? + :( + route ? + : )} + ; }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 442bfae..ff22e65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cosmos-server", - "version": "0.10.0-unstable16", + "version": "0.12.0-unstable24", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cosmos-server", - "version": "0.10.0-unstable16", + "version": "0.12.0-unstable24", "dependencies": { "@ant-design/colors": "^6.0.0", "@ant-design/icons": "^4.7.0", @@ -42,6 +42,8 @@ "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-element-to-jsx-string": "^15.0.0", + "react-intersection-observer": "^9.5.2", + "react-lazyload": "^3.2.0", "react-material-ui-carousel": "^3.4.2", "react-number-format": "^4.9.4", "react-perfect-scrollbar": "^1.5.8", @@ -8992,11 +8994,28 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "node_modules/react-intersection-observer": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.2.tgz", + "integrity": "sha512-EmoV66/yvksJcGa1rdW0nDNc4I1RifDWkT50gXSFnPLYQ4xUptuDD4V7k+Rj1OgVAlww628KLGcxPXFlOkkU/Q==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/react-lazyload": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-3.2.0.tgz", + "integrity": "sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==", + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", + "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/react-material-ui-carousel": { "version": "3.4.2", "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz", diff --git a/package.json b/package.json index b5f4f42..9e38d10 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cosmos-server", - "version": "0.12.0-unstable24", + "version": "0.12.0-unstable25", "description": "", "main": "test-server.js", "bugs": { @@ -42,6 +42,8 @@ "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-element-to-jsx-string": "^15.0.0", + "react-intersection-observer": "^9.5.2", + "react-lazyload": "^3.2.0", "react-material-ui-carousel": "^3.4.2", "react-number-format": "^4.9.4", "react-perfect-scrollbar": "^1.5.8", @@ -61,6 +63,12 @@ "whiskers.js": "^1.0.0", "yup": "^0.32.11" }, + "overrides": { + "react-lazyload": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, "scripts": { "client": "vite", "client-build": "vite build --base=/cosmos-ui/",