Skip to content

Vue#1007

Open
kesselb wants to merge 2 commits into
masterfrom
hello-vue
Open

Vue#1007
kesselb wants to merge 2 commits into
masterfrom
hello-vue

Conversation

@kesselb
Copy link
Copy Markdown
Collaborator

@kesselb kesselb commented Jun 3, 2026

No description provided.

kesselb added 2 commits June 3, 2026 20:52
Assisted-by: Claude:claude-opus-4-8
Assisted-by: Copilot:github-copilot/gpt-5.4

Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>
Assisted-by: Claude:claude-opus-4-8

Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR migrates the ServerInfo admin settings page from a PHP-rendered template + legacy JS (Smoothie) to a Vite-built Vue 3 frontend, backed by new JSON endpoints that split static (one-time) and live (polled) data.

Changes:

  • Replaces the large templates/settings-admin.php output with a Vue mount point and loads new bundled assets from AdminSettings.
  • Adds /data (static snapshot) and updates /update (live snapshot) endpoints, with new PHP service classes (StaticData, LiveData, UptimeFormatter).
  • Introduces a new Vue UI composed of sections/components and Chart.js-based charts, plus Vite/ESLint/node tooling and REUSE license asset handling.

Reviewed changes

Copilot reviewed 47 out of 53 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
.gitignore Ignores node_modules/ for the new Node/Vite toolchain.
REUSE.toml Updates REUSE annotations to cover generated CSS assets.
appinfo/routes.php Adds /data route and keeps /update for the Vue app’s API calls.
css/main-CrF6ckF0.chunk.css Adds generated CSS bundle output.
css/serverinfo-main.css Adds CSS entrypoint that imports the generated chunk.
eslint.config.mjs Adds ESLint configuration for the new JS/Vue code.
js/script.js Removes legacy jQuery/Smoothie-based frontend code.
js/serverinfo-main.mjs.license Adds generated license metadata for the JS bundle.
js/serverinfo-main.mjs.map.license Adds generated license metadata for the source map bundle.
js/smoothie.js Removes bundled Smoothie charting library source.
lib/Controller/ApiController.php Refactors uptime formatting into UptimeFormatter.
lib/Controller/PageController.php Adds data() endpoint and updates update() to return new live payload.
lib/JobQueueInfo.php Adds Psalm API marker metadata.
lib/LiveData.php Introduces a live-data aggregator for the polling endpoint.
lib/OperatingSystems/Linux.php Enhances thermal zone discovery by reading hwmon sensors in addition to thermal zones.
lib/PhpStatistics.php Ensures stable indexed array output for PHP extensions list.
lib/Settings/AdminSettings.php Switches admin UI to load built JS/CSS bundles and returns an empty template.
lib/SlowestJobs.php Adds Psalm API marker metadata.
lib/StaticData.php Introduces a static-data aggregator for the one-time snapshot endpoint.
lib/SystemStatistics.php Makes getFreeSpace() public for reuse by StaticData.
lib/UptimeFormatter.php Extracts uptime formatting into a reusable service.
LICENSES/Apache-2.0.txt Adds third-party license text for bundle compliance.
LICENSES/GPL-3.0-or-later.txt Adds third-party license text for bundle compliance.
LICENSES/ISC.txt Adds third-party license text for bundle compliance.
LICENSES/MPL-2.0.txt Adds third-party license text for bundle compliance.
package.json Adds Vite/Vue/Chart.js dependencies, scripts, and engine constraints.
src/components/ActiveUsersSection.vue New Vue section for active-user statistics.
src/components/CpuChartSection.vue New Vue CPU chart implementation (Chart.js + vue-chartjs).
src/components/DatabaseSection.vue New Vue section for database stats.
src/components/DiskSection.vue New Vue section for disk stats with Chart.js doughnut charts.
src/components/MemoryChartSection.vue New Vue memory/swap chart implementation (Chart.js + vue-chartjs).
src/components/MonitoringSection.vue New Vue section to build the external monitoring URL interactively.
src/components/NetworkSection.vue New Vue section for network/interface information.
src/components/PhpSection.vue New Vue section for PHP/FPM statistics.
src/components/SectionSkeleton.vue New skeleton loading section shown before data loads.
src/components/SharesSection.vue New Vue section for share statistics.
src/components/SystemSection.vue New Vue section for hostname/OS/CPU/memory/time/uptime.
src/components/ThermalSection.vue New Vue section for thermal sensor data.
src/composables/useLiveData.ts Adds client polling logic for /update.
src/composables/useStaticData.ts Adds one-time fetch logic for /data.
src/main.css Adjusts styles for new icon rendering and bundled CSS behavior.
src/main.ts Adds Vue entrypoint to mount the new admin settings UI.
src/utils.ts Adds formatting and theming utilities for the Vue UI.
src/views/SettingsAdmin.vue Implements the new composed admin page layout and data wiring.
templates/settings-admin.php Replaces legacy PHP-rendered content with the Vue mount container.
tests/lib/ApiControllerTest.php Updates controller test to use UptimeFormatter dependency.
tests/lib/UptimeFormatterTest.php Adds unit tests for the new uptime formatter.
tests/psalm-baseline.xml Updates Psalm baseline for new/removed classes and new Psalm version.
vite.config.mjs Adds Vite config via @nextcloud/vite-config, including license extraction settings.
Files not reviewed (1)
  • css/main-CrF6ckF0.chunk.css: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +60 to +63
<td>{{ t('serverinfo', 'PHP Info:') }}</td>
<td>
<a class="info" target="_blank" :href="phpinfoUrl">{{ t('serverinfo', 'Show phpinfo') }}</a>
</td>
Comment on lines +51 to +53
import { ArcElement, Chart, DoughnutController, Tooltip } from 'chart.js'
import { onMounted } from 'vue'
import Harddisk from 'vue-material-design-icons/Harddisk.vue'
Comment on lines +62 to +65
Chart.register(ArcElement, DoughnutController, Tooltip)

const canvasRefs: HTMLCanvasElement[] = []

Comment on lines +81 to +104
onMounted(() => {
props.disks.forEach((disk, i) => {
const canvas = canvasRefs[i]
if (!canvas) {
return
}
new Chart(canvas, {
type: 'doughnut',
data: {
datasets: [{
backgroundColor: [primaryColor(), passiveColor()],
data: [disk.used, disk.available],
}],
},
options: {
plugins: {
legend: { display: false },
tooltip: { enabled: false },
},
cutout: '60%',
},
})
})
})
@kesselb kesselb requested a review from ChristophWurst June 3, 2026 19:15
@kesselb kesselb marked this pull request as ready for review June 3, 2026 19:15
@kesselb kesselb requested a review from benjaminfrueh as a code owner June 3, 2026 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants