Add service status to Index.php and update resource display in index.blade.php

This commit is contained in:
Andras Bacsai 2024-01-12 11:31:51 +01:00
parent 8d04fbdb74
commit 408738e08d
2 changed files with 29 additions and 0 deletions

View File

@ -103,6 +103,7 @@ public function mount()
'environment_name' => data_get($service, 'environment.name'), 'environment_name' => data_get($service, 'environment.name'),
'service_uuid' => data_get($service, 'uuid') 'service_uuid' => data_get($service, 'uuid')
]); ]);
$service->status = serviceStatus($service);
} }
return $service; return $service;
}); });

View File

@ -150,6 +150,23 @@ class="items-center justify-center box">+ Add New Resource</a>
</template> </template>
</a> </a>
</template> </template>
<template x-for="item in filteredServices" :key="item.id">
<a class="relative box group" :href="item.hrefLink">
<div class="flex flex-col mx-6">
<div class="font-bold text-white" x-text="item.name"></div>
<div class="description" x-text="item.description"></div>
</div>
<template x-if="item.status.startsWith('running')">
<div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('exited')">
<div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('degraded')">
<div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
</template>
</a>
</template>
</div> </div>
</div> </div>
</div> </div>
@ -164,6 +181,7 @@ function searchComponent() {
mongodbs: @js($mongodbs), mongodbs: @js($mongodbs),
mysqls: @js($mysqls), mysqls: @js($mysqls),
mariadbs: @js($mariadbs), mariadbs: @js($mariadbs),
services: @js($services),
get filteredApplications() { get filteredApplications() {
if (this.search === '') { if (this.search === '') {
return this.applications; return this.applications;
@ -225,6 +243,16 @@ function searchComponent() {
item.description?.toLowerCase().includes(this.search.toLowerCase()); item.description?.toLowerCase().includes(this.search.toLowerCase());
}); });
}, },
get filteredServices() {
if (this.search === '') {
return this.services;
}
this.services = Object.values(this.services);
return this.services.filter(item => {
return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
item.description?.toLowerCase().includes(this.search.toLowerCase());
});
},
}; };
} }