update

composer.json

@@ -1,7 +1,11 @@
 {
     "name": "stepanenko3/nova-health",
     "description": "Laravel Nova tool for checking healthy of your Laravel app",
-    "keywords": ["laravel", "nova", "health"],
+    "keywords": [
+        "laravel",
+        "nova",
+        "health"
+    ],
     "license": "MIT",
     "require": {
         "php": ">=8.0",
@@ -30,6 +34,6 @@
     "config": {
         "sort-packages": true
     },
-    "minimum-stability": "stable",
+    "minimum-stability": "dev",
     "prefer-stable": true
 }

dist/mix-manifest.json

@@ -1,3 +1,3 @@
 {
-    "/js/entry.js": "/js/entry.js"
+    "/js/tool.js": "/js/tool.js"
 }

nova.mix.js

@@ -0,0 +1,33 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+    name() {
+        return 'nova-extension'
+    }
+
+    register(name) {
+        this.name = name
+    }
+
+    webpackConfig(webpackConfig) {
+        webpackConfig.externals = {
+            vue: 'Vue',
+        }
+
+        webpackConfig.resolve.alias = {
+            ...(webpackConfig.resolve.alias || {}),
+            'laravel-nova': path.join(
+                __dirname,
+                '../../vendor/laravel/nova/resources/js/mixins/packages.js'
+            ),
+        }
+
+        webpackConfig.output = {
+            uniqueName: this.name,
+        }
+    }
+}
+
+mix.extend('nova', new NovaExtension())

package.json

@@ -1,30 +1,20 @@
 {
     "private": true,
     "scripts": {
-        "dev": "mix",
+        "dev": "npm run development",
+        "development": "mix",
         "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
         "hot": "mix watch --hot",
-        "prod": "mix --production",
-        "format": "prettier --write 'resources/**/*.{css,js,vue}'"
+        "prod": "npm run production",
+        "production": "mix --production",
+        "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
-        "@inertiajs/inertia": "^0.11.0",
-        "@vue/babel-plugin-jsx": "^1.1.1",
-        "axios": "^0.26.1",
-        "cross-env": "^7.0.3",
-        "form-backend-validation": "^2.4.0",
-        "laravel-mix": "^6.0.43",
-        "postcss": "^8.4.12",
-        "prettier": "^2.6.2",
-        "resolve-url-loader": "^5.0.0",
-        "sass": "^1.50.0",
-        "sass-loader": "^12.6.0",
-        "terser-webpack-plugin": "^5.3.1",
-        "vue-loader": "^17.0.0",
-        "vue-template-compiler": "^2.6.14",
-        "vuex": "^4.0.2"
+        "@vue/compiler-sfc": "^3.2.22",
+        "laravel-mix": "^6.0.41",
+        "postcss": "^8.3.11",
+        "vue-loader": "^16.8.3"
     },
-    "dependencies": {
-        "vue": "^3.2.31"
-    }
+    "dependencies": {}
 }

resources/js/pages/Tool.vue

@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <Heading :level="1" class="flex items-center justify-between mb-6">
+            <span>
+                {{ __('Health') }}
+            </span>
+
+            <span
+                v-if="finishedAt"
+                class="text-base ml-4"
+            >
+                {{ finishedAt }}
+            </span>
+
+            <LoadingButton
+                class="relative ml-auto"
+                size="xs"
+                component="LinkButton"
+                :disabled="loading"
+                :loading="loading"
+                @click="getData"
+            >
+                <Icon type="refresh" />
+            </LoadingButton>
+        </Heading>
+
+        <Loader v-if="loading" />
+
+        <div
+            class="grid md:grid-cols-12 gap-6"
+            v-if="!loading && checks.length"
+        >
+            <Card
+                class="md:col-span-4 h-full p-6 flex items-start"
+                v-for="check in checks"
+            >
+                <Icon
+                    width="30"
+                    height="30"
+                    class="mr-4 flex-shrink-0"
+                    :class="getByStatus(check.status, {
+                        ok: 'text-green-500',
+                        warning: 'text-yellow-500',
+                        skipped: 'text-blue-500',
+                        failed: 'text-red-500',
+                        crashed: 'text-red-500',
+                        default: 'text-gray-500',
+                    })"
+                    :type="getByStatus(check.status, {
+                        ok: 'check-circle',
+                        warning: 'exclamation-circle',
+                        skipped: 'arrow-circle-right',
+                        failed: 'x-circle',
+                        crashed: 'x-circle',
+                        default: 'dots-circle-horizontal',
+                    })"
+                />
+
+                <div>
+                    <Heading
+                        level="3"
+                        v-text="check.label"
+                    />
+                    <div class="text-sm mt-2">
+                        {{ check.notificationMessage || check.shortSummary }}
+                    </div>
+                </div>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: () => ({
+            loading: true,
+            checks: [],
+            finishedAt: null,
+        }),
+
+        mounted() {
+            this.getData();
+        },
+
+        methods: {
+            getData() {
+                this.loading = true;
+                return Nova.request()
+                    .get('/nova-vendor/stepanenko3/nova-health')
+                    .then(response => {
+                        this.loading = false;
+
+                        if (response.status && response.data) {
+                            this.checks = response.data.checkResults;
+
+                            const d = new Date(response.data.finishedAt * 1000);
+                            const dateString =
+                                ("0" + d.getDate()).slice(-2)
+                                + "/" + ("0" + (d.getMonth() + 1)).slice(-2)
+                                + "/" + d.getFullYear()
+                                + " "
+                                + ("0" + d.getHours()).slice(-2)
+                                + ":" + ("0" + d.getMinutes()).slice(-2);
+
+                            this.finishedAt = dateString;
+                        } else {
+                            Nova.error('Error');
+                        }
+                    });
+            },
+
+            getByStatus(status, data) {
+                if (data.hasOwnProperty(status)) {
+                    return data[status];
+                }
+
+                return data.default;
+            }
+        },
+    }
+</script>
+
+<style>
+    /* Scoped Styles */
+</style>

resources/js/tool.js

@@ -0,0 +1,5 @@
+import Tool from './pages/Tool'
+
+Nova.booting((app, store) => {
+  Nova.inertia('NovaHealth', Tool)
+})