feat: #14 add nodes listing to the nodex page

Author: bohdan-shulha

app/Http/Controllers/NodeController.php

@@ -16,7 +16,9 @@ class NodeController extends Controller
      */
     public function index()
     {
-        return Inertia::render('Nodes/Index');
+        $nodes = Node::all();
+
+        return Inertia::render('Nodes/Index', ['nodes' => $nodes]);
     }
 
     /**

resources/js/Components/NodeStatus.vue

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  'node': Object,
+});
+</script>
+
+<template>
+  <div class="mx-2">
+  <span v-if="$props.node.online"
+        class="bg-green-300 text-green-950 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Online</span>
+  <span v-else
+        class="bg-red-300 text-red-950 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Offline</span>
+  </div>
+</template>

resources/js/Pages/Nodes/Create.vue

@@ -47,7 +47,8 @@ const createNode = () => {
                     </template>
 
                     <template #description>
-                        How your server will be represented in our system.
+                        <p>How your server will be represented in our system.</p>
+                      <p>You will receive Agent installation instructions on the next step.</p>
                     </template>
 
                     <template #form>

resources/js/Pages/Nodes/Index.vue

@@ -3,6 +3,12 @@ import { router } from '@inertiajs/vue3'
 
 import AppLayout from '@/Layouts/AppLayout.vue';
 import PrimaryButton from "@/Components/PrimaryButton.vue";
+import NodeStatus from "@/Components/NodeStatus.vue";
+import ValueCard from "@/Components/ValueCard.vue";
+
+defineProps({
+  'nodes': Array,
+})
 </script>
 
 <template>
@@ -19,9 +25,23 @@ import PrimaryButton from "@/Components/PrimaryButton.vue";
 
         <div class="py-12">
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
-                    list nodes here
-                </div>
+                <a v-for="node in nodes" :key="node.id" :href="route('nodes.show', {node: node.id})"
+                    class="w-96 bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg p-4 flex justify-around">
+
+                  <div class="flex">
+                    <div class="font-bold text-xl">{{ node.name }}</div>
+                    <NodeStatus :node="node" />
+                  </div>
+                  <div                       class="flex flex-col"
+                  >
+                  <template v-for="network in node.data.host.networks" :key="network.if_name"
+                  >
+                    <ValueCard
+                        v-for="ip in network.ips" :key="ip.ip"
+                        :label="network.if_name" :value="ip.ip" />
+                  </template>
+                  </div>
+                </a>
             </div>
         </div>
     </AppLayout>

resources/js/Pages/Nodes/Partials/SwarmDetauls.vue renamed to resources/js/Pages/Nodes/Partials/SwarmDetails.vue

@@ -5,7 +5,7 @@ import ShowLayout from "@/Pages/Nodes/ShowLayout.vue";
 import AgentStatus from "@/Pages/Nodes/Partials/AgentStatus.vue";
 import SectionBorder from "@/Components/SectionBorder.vue";
 import InitSwarmProgress from "@/Pages/Nodes/Partials/InitSwarmProgress.vue";
-import SwarmDetauls from "@/Pages/Nodes/Partials/SwarmDetauls.vue";
+import SwarmDetails from "@/Pages/Nodes/Partials/SwarmDetails.vue";
 
 defineProps([
     'node',
@@ -26,7 +26,7 @@ defineProps([
       <template v-if="$props.node.online">
       <NewSwarmCluster v-if="$props.node.swarm_id === null" :node="$props.node"/>
       <InitSwarmProgress v-if="$props.initTaskGroup" :taskGroup="$props.initTaskGroup" />
-      <SwarmDetauls v-if="$props.node.swarm_id !== null" :node="$props.node"/>
+      <SwarmDetails v-if="$props.node.swarm_id !== null" :node="$props.node"/>
       </template>
     </ShowLayout>
 </template>

resources/js/Pages/Nodes/Show.vue

@@ -1,6 +1,7 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
 import LayoutTab from "@/Components/LayoutTab.vue";
+import NodeStatus from "@/Components/NodeStatus.vue";
 
 const props = defineProps({
     node: Object
@@ -10,14 +11,11 @@ const props = defineProps({
 <template>
     <AppLayout title="Dashboard">
         <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight flex" >
                 {{ $props.node.name }}
 
 
-              <span v-if="$props.node.online"
-                    class="bg-green-300 text-green-950 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Online</span>
-              <span v-else
-                    class="bg-red-300 text-red-950 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Offline</span>
+              <NodeStatus :node="$props.node" />
 
             </h2>
         </template>