[release] v0.12.0-unstable25
This commit is contained in:
parent
10fe2d7f25
commit
f6b322a92a
|
@ -4,6 +4,8 @@
|
||||||
- Integrated a new docker-less mode of functioning for networking
|
- Integrated a new docker-less mode of functioning for networking
|
||||||
- Added Button to force reset HTTPS cert in settings
|
- Added Button to force reset HTTPS cert in settings
|
||||||
- New color slider with reset buttons
|
- New color slider with reset buttons
|
||||||
|
- Fixed blinking modals issues
|
||||||
|
- Added lazyloading to URL and Servapp pages images
|
||||||
|
|
||||||
## Version 0.11.3
|
## Version 0.11.3
|
||||||
- Fix missing even subscriber on export
|
- Fix missing even subscriber on export
|
||||||
|
|
|
@ -57,7 +57,7 @@ const ApiModal = ({ callback, label }) => {
|
||||||
}, [openModal]);
|
}, [openModal]);
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<Dialog open={openModal} onClose={() => setOpenModal(false)}>
|
<Dialog open={openModal} onClose={() => setOpenModal(false)} fullWidth maxWidth={'sm'}>
|
||||||
<DialogTitle>Refresh Page</DialogTitle>
|
<DialogTitle>Refresh Page</DialogTitle>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<DialogContentText>
|
<DialogContentText>
|
||||||
|
|
|
@ -39,6 +39,7 @@ import HostChip from '../../../components/hostChip';
|
||||||
import {RouteActions, RouteMode, RouteSecurity} from '../../../components/routeComponents';
|
import {RouteActions, RouteMode, RouteSecurity} from '../../../components/routeComponents';
|
||||||
import { useNavigate } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import NewRouteCreate from '../routes/newRoute';
|
import NewRouteCreate from '../routes/newRoute';
|
||||||
|
import LazyLoad from 'react-lazyload';
|
||||||
|
|
||||||
const stickyButton = {
|
const stickyButton = {
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
|
@ -154,7 +155,9 @@ const ProxyManagement = () => {
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: '',
|
title: '',
|
||||||
field: (r) => <img className="loading-image" alt="" src={getFaviconURL(r)} width="64px" />,
|
field: (r) => <LazyLoad width={"64px"} height={"64px"}>
|
||||||
|
<img className="loading-image" alt="" src={getFaviconURL(r)} width="64px" height="64px"/>
|
||||||
|
</LazyLoad>,
|
||||||
style: {
|
style: {
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
import React, { useEffect, useState, useMemo } from 'react';
|
import React, { useEffect, useState, useMemo } from 'react';
|
||||||
|
import { useInView } from 'react-intersection-observer';
|
||||||
|
|
||||||
// material-ui
|
// material-ui
|
||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
|
@ -34,8 +36,11 @@ const _MiniPlotComponent = ({metrics, labels}) => {
|
||||||
const [dataMetrics, setDataMetrics] = useState([]);
|
const [dataMetrics, setDataMetrics] = useState([]);
|
||||||
const [series, setSeries] = useState([]);
|
const [series, setSeries] = useState([]);
|
||||||
const slot = 'hourly';
|
const slot = 'hourly';
|
||||||
|
const [ref, inView] = useInView();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if(!inView) return;
|
||||||
|
|
||||||
let xAxis = [];
|
let xAxis = [];
|
||||||
|
|
||||||
if(slot === 'latest') {
|
if(slot === 'latest') {
|
||||||
|
@ -88,7 +93,7 @@ const _MiniPlotComponent = ({metrics, labels}) => {
|
||||||
|
|
||||||
setSeries(_series);
|
setSeries(_series);
|
||||||
});
|
});
|
||||||
}, [metrics]);
|
}, [metrics, inView]);
|
||||||
|
|
||||||
const chartOptions = {
|
const chartOptions = {
|
||||||
colors: [
|
colors: [
|
||||||
|
@ -167,13 +172,13 @@ const _MiniPlotComponent = ({metrics, labels}) => {
|
||||||
fontSize: '110%',
|
fontSize: '110%',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
}}>{formaters[di](dataMetric.Values[dataMetric.Values.length - 1].Value)}</div>
|
}}>{formaters[di](dataMetric.Values[dataMetric.Values.length - 1].Value)}</div>
|
||||||
<div>{(labels && labels[di]) || dataMetric.Label}</div>
|
<div>{(labels && labels[dataMetric.Key]) || dataMetric.Label}</div>
|
||||||
</Stack>)}
|
</Stack>)}
|
||||||
|
|
||||||
<div style={{
|
<div style={{
|
||||||
margin: '-10px 0px -20px 10px',
|
margin: '-10px 0px -20px 10px',
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
}}>
|
}} ref={ref}>
|
||||||
<ReactApexChart options={chartOptions} series={series} type="line" height={90} />
|
<ReactApexChart options={chartOptions} series={series} type="line" height={90} />
|
||||||
</div>
|
</div>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -499,9 +499,9 @@ const DockerComposeImport = ({ refresh, dockerComposeInit, installerInit, defaul
|
||||||
}
|
}
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<Dialog open={openModal} onClose={() => setOpenModal(false)}>
|
<Dialog open={openModal} onClose={() => setOpenModal(false)} fullWidth maxWidth={'sm'}>
|
||||||
<DialogTitle>{installer ? "Installation" : "Import Compose File"}</DialogTitle>
|
<DialogTitle>{installer ? "Installation" : "Import Compose File"}</DialogTitle>
|
||||||
<DialogContent style={{ width: '800px', maxWidth: '100%' }}>
|
<DialogContent style={{ width: '100%' }}>
|
||||||
<DialogContentText>
|
<DialogContentText>
|
||||||
{step === 0 && !installer && <><Stack spacing={2}>
|
{step === 0 && !installer && <><Stack spacing={2}>
|
||||||
|
|
||||||
|
|
|
@ -174,11 +174,17 @@ const ContainerOverview = ({ containerInfo, config, refresh, updatesAvailable, s
|
||||||
<MiniPlotComponent metrics={[
|
<MiniPlotComponent metrics={[
|
||||||
"cosmos.system.docker.cpu." + Name.replace('/', ''),
|
"cosmos.system.docker.cpu." + Name.replace('/', ''),
|
||||||
"cosmos.system.docker.ram." + Name.replace('/', ''),
|
"cosmos.system.docker.ram." + Name.replace('/', ''),
|
||||||
]} labels={["CPU", "RAM"]}/>
|
]} labels={{
|
||||||
|
["cosmos.system.docker.cpu." + Name.replace('/', '')]: "CPU",
|
||||||
|
["cosmos.system.docker.ram." + Name.replace('/', '')]: "RAM"
|
||||||
|
}}/>
|
||||||
<MiniPlotComponent metrics={[
|
<MiniPlotComponent metrics={[
|
||||||
"cosmos.system.docker.netTx." + Name.replace('/', ''),
|
"cosmos.system.docker.netTx." + Name.replace('/', ''),
|
||||||
"cosmos.system.docker.netRx." + Name.replace('/', ''),
|
"cosmos.system.docker.netRx." + Name.replace('/', ''),
|
||||||
]} labels={["NTX", "NRX"]}/>
|
]} labels={{
|
||||||
|
["cosmos.system.docker.netTx." + Name.replace('/', '')]: "NTX",
|
||||||
|
["cosmos.system.docker.netTx." + Name.replace('/', '')]: "NRX"
|
||||||
|
}}/>
|
||||||
</div>
|
</div>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -301,7 +301,10 @@ const ServApps = () => {
|
||||||
<MiniPlotComponent metrics={[
|
<MiniPlotComponent metrics={[
|
||||||
"cosmos.system.docker.cpu." + app.Names[0].replace('/', ''),
|
"cosmos.system.docker.cpu." + app.Names[0].replace('/', ''),
|
||||||
"cosmos.system.docker.ram." + app.Names[0].replace('/', ''),
|
"cosmos.system.docker.ram." + app.Names[0].replace('/', ''),
|
||||||
]} labels={["CPU", "RAM"]}/>
|
]} labels={{
|
||||||
|
["cosmos.system.docker.cpu." + app.Names[0].replace('/', '')]: "CPU",
|
||||||
|
["cosmos.system.docker.ram." + app.Names[0].replace('/', '')]: "RAM"
|
||||||
|
}}/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Link to={`/cosmos-ui/servapps/containers/${app.Names[0].replace('/', '')}`}>
|
<Link to={`/cosmos-ui/servapps/containers/${app.Names[0].replace('/', '')}`}>
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
import { getFaviconURL } from "./routes";
|
import { getFaviconURL } from "./routes";
|
||||||
import logogray from '../assets/images/icons/cosmos_gray.png';
|
import logogray from '../assets/images/icons/cosmos_gray.png';
|
||||||
|
import LazyLoad from 'react-lazyload';
|
||||||
|
|
||||||
export const ServAppIcon = ({route, container, ...pprops}) => {
|
export const ServAppIcon = ({route, container, width, ...pprops}) => {
|
||||||
return (container && container.Labels["cosmos-icon"]) ?
|
return <LazyLoad width={width} height={width}>
|
||||||
<img src={container.Labels["cosmos-icon"]} {...pprops}></img> :
|
{(container && container.Labels["cosmos-icon"]) ?
|
||||||
route ? <img src={getFaviconURL(route)} {...pprops}></img>
|
<img src={container.Labels["cosmos-icon"]} {...pprops} width={width} height={width}></img> :(
|
||||||
: <img src={logogray} {...pprops}></img>
|
route ? <img src={getFaviconURL(route)} {...pprops} width={width} height={width}></img>
|
||||||
|
: <img src={logogray} {...pprops} width={width} height={width}></img>)}
|
||||||
|
</LazyLoad>;
|
||||||
};
|
};
|
23
package-lock.json
generated
23
package-lock.json
generated
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "cosmos-server",
|
"name": "cosmos-server",
|
||||||
"version": "0.10.0-unstable16",
|
"version": "0.12.0-unstable24",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "cosmos-server",
|
"name": "cosmos-server",
|
||||||
"version": "0.10.0-unstable16",
|
"version": "0.12.0-unstable24",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/colors": "^6.0.0",
|
"@ant-design/colors": "^6.0.0",
|
||||||
"@ant-design/icons": "^4.7.0",
|
"@ant-design/icons": "^4.7.0",
|
||||||
|
@ -42,6 +42,8 @@
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-draggable": "^4.4.5",
|
"react-draggable": "^4.4.5",
|
||||||
"react-element-to-jsx-string": "^15.0.0",
|
"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-material-ui-carousel": "^3.4.2",
|
||||||
"react-number-format": "^4.9.4",
|
"react-number-format": "^4.9.4",
|
||||||
"react-perfect-scrollbar": "^1.5.8",
|
"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",
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
"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": {
|
"node_modules/react-is": {
|
||||||
"version": "18.2.0",
|
"version": "18.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
"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": {
|
"node_modules/react-material-ui-carousel": {
|
||||||
"version": "3.4.2",
|
"version": "3.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz",
|
||||||
|
|
10
package.json
10
package.json
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "cosmos-server",
|
"name": "cosmos-server",
|
||||||
"version": "0.12.0-unstable24",
|
"version": "0.12.0-unstable25",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "test-server.js",
|
"main": "test-server.js",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
|
@ -42,6 +42,8 @@
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-draggable": "^4.4.5",
|
"react-draggable": "^4.4.5",
|
||||||
"react-element-to-jsx-string": "^15.0.0",
|
"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-material-ui-carousel": "^3.4.2",
|
||||||
"react-number-format": "^4.9.4",
|
"react-number-format": "^4.9.4",
|
||||||
"react-perfect-scrollbar": "^1.5.8",
|
"react-perfect-scrollbar": "^1.5.8",
|
||||||
|
@ -61,6 +63,12 @@
|
||||||
"whiskers.js": "^1.0.0",
|
"whiskers.js": "^1.0.0",
|
||||||
"yup": "^0.32.11"
|
"yup": "^0.32.11"
|
||||||
},
|
},
|
||||||
|
"overrides": {
|
||||||
|
"react-lazyload": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"client": "vite",
|
"client": "vite",
|
||||||
"client-build": "vite build --base=/cosmos-ui/",
|
"client-build": "vite build --base=/cosmos-ui/",
|
||||||
|
|
Loading…
Reference in a new issue