michael.reber/rclone-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add navigation bar and remote size

Browse Source
This commit is contained in:
controlol 2021-10-30 22:46:12 +02:00
parent 21db107073
commit a6c071bde1
2 changed files with 99 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/App.js
View File

@ -1,6 +1,7 @@
import { Component, Fragment } from 'react'
import ReactTooltip from 'react-tooltip'
import { Container, HeaderContainer, InfosContainer, InfosWrapper, ItemsContainer, ActiveContainer, HistoryContainer, HistoryItem, HistoryItemsWrapper, LogoContainer, StatusContainer, StatusBulb } from './styled'
import { Container, HeaderContainer, InfosContainer, InfosWrapper, ItemsContainer, ActiveContainer, HistoryContainer, HistoryItem, HistoryItemsWrapper, LogoContainer, StatusContainer, StatusBulb, InfosRow } from './styled'
import API from './utils/API'
import secondsToTimeString from './utils/timestring'
@ -8,55 +9,60 @@ import bytesToString from './utils/bytestring'
import Settings from './components/settings'
import Job from './components/job'
import Navigation from './components/navigation'
class App extends Component {
constructor() {
super()
this.state = {
stats: {
bytes: 0,
checks: 0,
deletedDirs: 0,
deletes: 0,
elapsedTime: 0,
errors: 0,
eta: null,
fatalError: false,
renames: 0,
retryError: false,
speed: 0,
totalBytes: 0,
totalChecks: 0,
totalTransfers: 0,
transferTime: 0,
transfers: 0,
transferring: [
{
speed: 23534245,
group: "job/1",
size: 23457826345,
eta: 3600,
name: "a very very very long absurdly unneccesarily long name this is if you cant tell"
}
]
// bytes: 0,
// checks: 0,
// deletedDirs: 0,
// deletes: 0,
// elapsedTime: 0,
// errors: 0,
// eta: null,
// fatalError: false,
// renames: 0,
// retryError: false,
// speed: 0,
// totalBytes: 0,
// totalChecks: 0,
// totalTransfers: 0,
// transferTime: 0,
// transfers: 0,
// transferring: [
// {
// speed: 23534245,
// group: "job/1",
// size: 23457826345,
// eta: 3600,
// name: "a very very very long absurdly unneccesarily long name this is if you cant tell"
// }
// ]
},
remotes: [],
remotes: [{
// name: "gdrive",
// type: "drive",
// bytes: 84265292526
}],
mounts: [],
transferred: [],
version: {
"arch": "amd64",
"decomposed": [
1,
56,
2
],
"goTags": "none",
"goVersion": "go1.16.8",
"isBeta": false,
"isGit": false,
"linking": "static",
"os": "linux",
"version": "v1.56.2"
// "arch": "amd64",
// "decomposed": [
// 1,
// 56,
// 2
// ],
// "goTags": "none",
// "goVersion": "go1.16.8",
// "isBeta": false,
// "isGit": false,
// "linking": "static",
// "os": "linux",
// "version": "v1.56.2"
},
endPointAvailable: true
}
@ -130,14 +136,33 @@ class App extends Component {
let remotes = []
Object.keys(response.data).forEach(v => {
remotes.push({
name: v,
type: response.data[v].type
return Promise.all(Object.keys(response.data).map(v => {
return new Promise((resolve, reject) => {
return API.request({
url: "/operations/about",
data: {
fs: v + ":"
}
})
.then(({data}) => {
if (typeof data !== "object" || isNaN(data.used)) return reject()
remotes.push({
name: v,
type: response.data[v].type,
bytes: data.used
})
return resolve()
})
.catch(reject)
})
})
this.setState({ remotes })
)
.then(() => {
this.setState({ remotes })
})
.catch(err => console.error(err))
})
.catch(() => {})
}
@ -226,10 +251,11 @@ class App extends Component {
*/
renderRemotes = () => {
return this.state.remotes.map(v => (
<Fragment key={v.name}>
<InfosRow key={v.name} data-tip={bytesToString(v.bytes, { fixed: 2 })} data-for={"size"+v.MountPoint}>
<p> {v.name} </p>
<p> {v.type} </p>
</Fragment>
<ReactTooltip id={"size"+v.MountPoint} place="left" type="info" effect="solid" />
</InfosRow>
))
}
@ -239,7 +265,7 @@ class App extends Component {
*/
renderMounts = () => {
return this.state.mounts.map(v => (
<Fragment key={v.MountPoint}>
<Fragment key={v.MountPoint} >
<p> {v.Fs} </p>
<p> {v.MountPoint} </p>
</Fragment>
@ -284,7 +310,7 @@ class App extends Component {
render = () => {
const { stats, version, endPointAvailable } = this.state
const { elapsedTime, transfers, totalTransfers, bytes } = stats
const { elapsedTime, transfers, totalTransfers, bytes, errors, lastError } = stats
return (
<Fragment>
@ -299,6 +325,9 @@ class App extends Component {
{ endPointAvailable ? "API endpoint is behaving normally" : "API endpoint is unavailable" }
</StatusContainer>
</HeaderContainer>
<Navigation info={{ errors, lastError }} />
<Container>
<ItemsContainer>
<ActiveContainer>

25
src/styled.js
View File

@ -7,16 +7,17 @@ export const Container = styled.div`
flex-wrap: wrap;
@media only screen and (max-width: 1280px) {
margin: 0vh 1vw 1vh 1vw;
margin: 1vh 1vw 1vh 1vw;
}
`
export const HeaderContainer = styled(Container)`
justify-content: space-between;
flex-wrap: nowrap;
@media only screen and (max-width: 800px) {
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 2rem;
}
`
@ -33,6 +34,8 @@ export const LogoContainer = styled.div`
border-radius: .5rem;
padding: 1rem 2rem;
min-height: 100px;
flex-grow: 1;
flex-wrap: wrap;
display: flex;
gap: .5rem;
@ -42,8 +45,10 @@ export const LogoContainer = styled.div`
justify-content: center;
padding: 0;
}
@media only screen and (max-width: 600px) {
font-size: .8rem;
@media only screen and (max-width: 450px) {
h1 {
font-size: 1.6rem;
}
}
`
@ -188,6 +193,7 @@ export const StatusContainer = styled.div`
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
width: 360px;
@ -206,6 +212,15 @@ export const StatusBulb = styled.div`
border-radius: 1.15rem;
`
export const InfosRow = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
gap: .2rem 2rem;
grid-column: 1 / span 2;
height: max-content;
cursor: default;
`
export const InfosWrapper = styled.div`
border-radius: .3rem;
/* border: 1px solid black; */