seperate components

src/components/job.jsx

@@ -0,0 +1,145 @@
+import { Component, Fragment } from "react"
+import { ActiveJob, ActiveTransfer, StopButton } from "../styled"
+import API from '../utils/API'
+import bytesToString from "../utils/bytestring"
+import secondsToTimeString from "../utils/timestring"
+
+class Job extends Component {
+  constructor() {
+    super()
+    this.state = {
+      jobstatus: {
+        progress: 0,
+        eta: 0
+      },
+      stats: {
+
+      },
+      jobid: 0
+    }
+
+    this.decreaseEtaInterval = undefined
+    this.fetchStatsInterval = undefined
+    this.fetchJobInterval = undefined
+  }
+
+  componentDidMount = () => {
+    // this.setState({ jobid: this.props.fileTransfers[0].group.replace(/\D/g, '') })
+
+    this.fetchJobInfo(this.props.fileTransfers[0].group.replace(/\D/g, ''))
+    this.fetchStats()
+
+    if (this.decreaseEtaInterval === undefined) this.decreaseEtaInterval = setInterval(() => {
+      let { stats } = this.state
+
+      if (stats.eta > 1) stats.eta--
+      stats.elapsedTime++
+      stats.transferring?.forEach(v => {if (v.eta > 1) v.eta--})
+
+      this.setState({ stats })
+    }, 1000)
+
+    if (this.fetchStatsInterval === undefined) this.fetchStatsInterval = setInterval(this.fetchStats, 5 * 1000)
+    if (this.fetchJobInterval === undefined) this.fetchJobInterval = setInterval(this.fetchJobInfo, 30 * 1000)
+  }
+
+  componentWillUnmount = () => {
+    clearInterval(this.decreaseEtaInterval)
+    // clearInterval(this.fetchStatsInterval)
+    clearInterval(this.fetchJobInterval)
+  }
+
+  fetchStats = () => {
+    return API({
+      url: "/core/stats",
+      data: {
+        group: "job/" + this.props.jobid
+      }
+    })
+    .then(response => {
+      if (typeof response.data !== "object") return new Error("invalid response")
+
+      this.setState({ stats: response.data })
+    })
+    .catch(err => console.log(err))
+  }
+
+  fetchJobInfo = id => {
+    if (!id) id = this.state.jobid
+
+    return API({
+      url: "/job/status",
+      data: {
+        jobid: this.props.jobid
+      }
+    })
+    .then(response => {
+      if (typeof response.data !== "object") throw new Error("invalid response")
+
+      this.setState({ jobstatus: response.data })
+    })
+    .catch(err => console.error(err))
+  }
+
+  stopJob = () => {
+    return API({
+      url: "/job/stop",
+      data: {
+        jobid: this.props.jobid
+      }
+    })
+    .then(() => this.props.refreshStats())
+    .catch(err => console.error(err))
+  }
+
+  renderSize = bytes => {
+    return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB"
+  }
+
+  renderSpeed = bytes => {
+    return (bytes / (1024 * 1024)).toFixed(2) + " MB/s"
+  }
+
+  renderActiveTransfer = () => {
+    const { transferring } = this.state.stats
+
+    if (typeof transferring !== "object") return;
+
+    return transferring.map(v => (
+      <ActiveTransfer key={v.name}>
+        <p> { v.name } </p>
+        <p> { this.renderSize(v.size) } </p>
+        <p> { secondsToTimeString(v.eta) } </p>
+        <p> { this.renderSpeed(v.speed) } </p>
+      </ActiveTransfer>
+    ))
+  }
+
+  render = () => {
+    const { stats } = this.state
+
+    return (
+      <Fragment>
+
+          <ActiveJob>
+            <p> Time elapsed: </p>
+            <p> { secondsToTimeString(stats.elapsedTime) } </p>
+            <p> Progress: </p>
+            <p> { bytesToString(stats.bytes, { format: "GB", fixed: 3 }) } / { bytesToString(stats.totalBytes, { format: "GB", fixed: 3 }) } GB </p>
+            <span/>
+
+            <p> Time left: </p>
+            <p> { secondsToTimeString(stats.eta) } </p>
+            <p> Progress: </p>
+            <p> { ((stats.bytes / stats.totalBytes) * 100).toFixed(2) } % </p>
+            <span/>
+
+            <StopButton onClick={this.stopJob}> Cancel </StopButton>
+          </ActiveJob>
+          { this.renderActiveTransfer() }
+      </Fragment>
+    )
+  }
+}
+
+export default Job

src/components/settings.jsx

@@ -0,0 +1,84 @@
+import { Component, Fragment } from "react"
+import { InfosWrapper, PopupContainer, PopupTitle, Cross, Button } from "../styled"
+import API from '../utils/API'
+import bytesToString from "../utils/bytestring"
+import secondsToTimeString from "../utils/timestring"
+
+class Settings extends Component {
+  constructor() {
+    super()
+    this.state = {
+      settings: {},
+      show: false
+    }
+  }
+
+  componentDidMount = () => this.fetchSettings()
+
+  fetchSettings = () => {
+    return new Promise((resolve, reject) => {
+      return API({
+        url: "/options/get"
+      })
+      .then(response => {
+        if (typeof response.data !== "object") return new Error("invalid response")
+  
+        this.setState({ settings: response.data })
+
+        return resolve()
+      })
+      .catch(reject)
+    })
+  }
+
+  showSettings = () => {
+    this.fetchSettings()
+    .then(() => this.setState({ show: true }))
+    .catch(err => console.error(err))
+  }
+
+  renderSettings = () => {
+    return (
+      <PopupContainer>
+        <PopupTitle> Settings </PopupTitle>
+        <Cross onClick={() => this.setState({ show: false })}> Close </Cross>
+
+        <pre>
+        {
+          JSON.stringify(this.state.settings, null, 4)
+        }
+        </pre>
+      </PopupContainer>
+    )
+  }
+
+  render =  () => {
+    const { settings, show } = this.state
+
+    return (
+      <Fragment>
+        {
+          show ? 
+          this.renderSettings()
+          : ""
+        }
+
+        <InfosWrapper>
+          <h2> Settings </h2>
+          <p> Cache max size </p>
+          <p> { bytesToString(settings?.vfs?.CacheMaxSize, {}) } </p>
+
+          <p> Cache max age </p>
+          <p> { secondsToTimeString(settings?.vfs?.CacheMaxAge / 1000000000, true) } </p>
+
+          <p> File min age </p>
+          <p> { secondsToTimeString(settings?.filter?.MinAge / 1000000000, true) } </p>
+
+          <Button onClick={this.showSettings}> List Settings </Button>
+        </InfosWrapper>
+      </Fragment>
+    )
+  }
+}
+
+export default Settings