Jobs delete button (#39)

* Jobs delete button

* Delete job output file on job delete

Author: antonkomarev

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
 
 ## [Unreleased]
 
+### Added
+
+- ([#39]) Add jobs deletion
+
 ## [1.3.0]
 
 ### Added

resources/js/components/Job/OptionsMenu.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="relative">
+        <button :class="getOptionsButtonClass()" v-on:click="toggleOptionsMenu()">
+            <svg aria-label="Show options" viewBox="0 0 13 16" version="1.1" width="13" height="16" role="img">
+                <path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM13 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
+            </svg>
+        </button>
+        <div class="absolute bg-white border rounded right-0 shadow text-sm whitespace-no-wrap" v-if="isMenuOpened">
+            <button class="hover:bg-red-300 py-2 px-3" v-on:click="confirmDeleteJob()">Delete Job</button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Swal from 'sweetalert2';
+
+    export default {
+        props: {
+            job: {
+                type: Object,
+                required: true,
+            },
+        },
+
+        data() {
+            return {
+                isMenuOpened: false,
+            };
+        },
+
+        methods: {
+            getOptionsButtonClass() {
+                const classes = 'p-2 hover:bg-gray-200 rounded-full';
+
+                return classes + ` ${this.isMenuOpened ? 'bg-gray-200' : ''}`;
+            },
+
+            toggleOptionsMenu() {
+                this.isMenuOpened = !this.isMenuOpened;
+            },
+
+            async deleteJob() {
+                await this.$store.dispatch('deleteJobs', {
+                    id: this.job.id,
+                });
+
+                await this.$store.dispatch('collectJobs');
+            },
+
+            async confirmDeleteJob() {
+                this.toggleOptionsMenu();
+
+                const response = await Swal.fire({
+                    type: 'warning',
+                    title: 'Job Deletion',
+                    text: 'Do you want to delete job permanently?',
+                    showCancelButton: true,
+                    confirmButtonText: 'Delete',
+                    confirmButtonColor: '#f56565',
+                });
+
+                if (response.value) {
+                    this.deleteJob();
+
+                    await Swal.fire({
+                        type: 'success',
+                        title: 'Job Deleted!',
+                    });
+
+                    const jobsListUrl = this.$store.getters.getUrl('/jobs');
+                    const currentUrl = window.location.href;
+                    if (currentUrl !== jobsListUrl) {
+                        window.location.href = jobsListUrl;
+                    }
+                }
+            },
+        },
+    }
+</script>

resources/js/components/Job/Status/Badge.vue renamed to resources/js/components/Job/StatusBadge.vue

@@ -4,8 +4,9 @@
 
         <div class="rounded overflow-hidden shadow mt-3" v-for="job in getJobs">
             <div class="p-4">
-                <div>
+                <div class="flex">
                     <div class="font-mono" v-text="getCommandLine(job)"></div>
+                    <job-options-menu class="ml-auto mr-3" :job="job"></job-options-menu>
                 </div>
                 <div class="flex">
                     <div class="mt-2">
@@ -25,11 +26,13 @@
 
 <script>
     import moment from 'moment';
-    import JobStatusBadge from '../../components/Job/Status/Badge';
+    import JobStatusBadge from '../../components/Job/StatusBadge';
+    import JobOptionsMenu from '../../components/Job/OptionsMenu';
 
     export default {
         components: {
             JobStatusBadge,
+            JobOptionsMenu,
         },
 
         data() {

resources/js/screens/jobs/index.vue

@@ -4,21 +4,22 @@
             <router-link class="text-indigo-700 hover:text-indigo-900" :to="{name: 'jobs'}">Jobs</router-link>
         </h1>
 
-        <div class="rounded overflow-hidden shadow mt-3">
+        <div class="rounded overflow-hidden shadow mt-3 py-3">
             <div class="flex">
-                <div class="mt-3 mx-3">
+                <div class="mx-3">
                     <h4 class="text-xl font-mono" v-text="job.id"></h4>
                 </div>
 
-                <div class="flex mt-3 ml-auto mr-3">
+                <div class="flex ml-auto">
                     <span class="bg-gray-200 border-b-2 border-gray-400 px-2 py-1 text-sm font-semibold font-mono tracking-wide text-gray-700 mr-3" title="Execution start time">
                         <time v-text="getCreatedAt(job)"></time>
                     </span>
-                    <job-status-badge :status="getStatus(job)"></job-status-badge>
+                    <job-status-badge class="mr-3" :status="getStatus(job)"></job-status-badge>
+                    <job-options-menu class="mr-3" :job="job"></job-options-menu>
                 </div>
             </div>
 
-            <div class="p-4 text-left bg-black mt-4" v-show="processOutput">
+            <div class="p-4 text-left bg-black mt-4 -mb-3" v-show="processOutput">
                 <code class="bg-black text-white border-0" v-html="processOutput"></code>
             </div>
         </div>
@@ -28,11 +29,13 @@
 <script>
     import AnsiConverter from 'ansi-to-html';
     import moment from 'moment';
-    import JobStatusBadge from '../../components/Job/Status/Badge';
+    import JobStatusBadge from '../../components/Job/StatusBadge';
+    import JobOptionsMenu from '../../components/Job/OptionsMenu';
 
     export default {
         components: {
             JobStatusBadge,
+            JobOptionsMenu,
         },
 
         data() {

resources/js/screens/jobs/item.vue

@@ -38,6 +38,10 @@ const actions = {
         this.dispatch('collectRequirements');
     },
 
+    async deleteJobs(context, payload) {
+        await Axios.delete(this.getters.getUrl(`/api/jobs/${payload.id}`));
+    },
+
     async collectJobs() {
         const response = await Axios.get(this.getters.getUrl('/api/jobs'));
 
@@ -58,7 +62,7 @@ const getters = {
     },
 
     getUrl: () => (uri) => {
-        return '/' + window.Paket.baseUri + uri;
+        return window.location.origin + '/' + window.Paket.baseUri + uri;
     },
 
     getJob: (state, getters) => (jobId) => {

resources/js/store.js

@@ -29,6 +29,10 @@
     Route::get('jobs/{job}')
         ->uses('Jobs\GetAction')
         ->name('jobs.get');
+
+    Route::delete('jobs/{job}')
+        ->uses('Jobs\DeleteAction')
+        ->name('jobs.delete');
 });
 
 Route::get('{view?}', 'AppAction')

routes/web.php

@@ -0,0 +1,28 @@
+<?php
+
+/*
+ * This file is part of Laravel Paket.
+ *
+ * (c) Anton Komarev <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Cog\Laravel\Paket\Http\Controllers\Api\Jobs;
+
+use Cog\Contracts\Paket\Job\Repositories\Job as JobRepositoryContract;
+use Illuminate\Contracts\Support\Responsable as ResponsableContract;
+
+final class DeleteAction
+{
+    public function __invoke(string $id, JobRepositoryContract $jobs): ResponsableContract
+    {
+        $job = $jobs->getById($id);
+        $jobs->deleteById($id);
+
+        return new DeleteResponse($job);
+    }
+}

src/Http/Controllers/Api/Jobs/DeleteAction.php

@@ -0,0 +1,44 @@
+<?php
+
+/*
+ * This file is part of Laravel Paket.
+ *
+ * (c) Anton Komarev <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Cog\Laravel\Paket\Http\Controllers\Api\Jobs;
+
+use Cog\Contracts\Paket\Job\Entities\Job as JobContract;
+use Illuminate\Contracts\Support\Responsable as ResponsableContract;
+use Illuminate\Http\JsonResponse;
+
+final class DeleteResponse implements ResponsableContract
+{
+    private $job;
+
+    public function __construct(JobContract $job)
+    {
+        $this->job = $job;
+    }
+
+    /**
+     * Create an HTTP response that represents the object.
+     *
+     * @param  \Illuminate\Http\Request $request
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    public function toResponse($request)
+    {
+        return $this->toJson();
+    }
+
+    private function toJson(): JsonResponse
+    {
+        return response()->json($this->job->toArray());
+    }
+}

src/Http/Controllers/Api/Jobs/DeleteResponse.php

@@ -76,6 +76,30 @@ public function getById(string $id): JobContract
         throw new NotFoundHttpException("Job with id `{$id}` not found.");
     }
 
+    // TODO: [v2.0] Add to contract
+    public function deleteById(string $id): void
+    {
+        $index = $this->getIndex();
+
+        foreach ($index as $key => $job) {
+            if ($job['id'] === $id) {
+                $jobKey = $key;
+                break;
+            }
+        }
+
+        if (!isset($jobKey)) {
+            throw new NotFoundHttpException("Job with id `{$id}` not found.");
+        }
+
+        unset($index[$jobKey]);
+        $index = array_values($index);
+
+        $this->deleteJobProcessOutput($id);
+
+        $this->putIndex($index);
+    }
+
     public function store(JobContract $job): void
     {
         $index = $this->getIndex();
@@ -150,6 +174,12 @@ private function getJobProcessOutput(string $jobId): string
         }
     }
 
+    private function deleteJobProcessOutput(string $jobId): void
+    {
+        $path = sprintf('%s/jobs/%s.log', $this->storagePath, $jobId);
+        $this->files->delete($path);
+    }
+
     private function getIndexFilePath(): string
     {
         return $this->storagePath . '/jobs.json';