@adminforth/background-jobs 1.0.1

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,46 @@
+#!/bin/sh
+
+set -x
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+STATUS=${1}  
+
+
+if [ "$STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+BUILD_LOG=$(echo $BUILD_LOG | sed 's/"/\\"/g')
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl -sS -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK" 2>&1

package/.woodpecker/release.yml

@@ -0,0 +1,57 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+
+  build:
+    image: node:20
+    when:
+      - event: push
+    commands:
+      - apt update && apt install -y rsync
+      - . /woodpecker/deploy.vault.env   
+      - npm clean-install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+
+  release:
+    image: node:20
+    when:
+      - event:
+          - push
+        branch:
+          - main
+    commands:
+      - . /woodpecker/deploy.vault.env
+      - npx semantic-release
+
+  slack-on-failure:
+    image: curlimages/curl
+    when:
+      - event: push
+        status: [failure]
+    commands:
+      - . /woodpecker/deploy.vault.env
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh failure
+      
+  slack-on-success: 
+    image: curlimages/curl
+    when:
+      - event: push
+        status: [success]
+    commands:
+      - . /woodpecker/deploy.vault.env
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh success

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Devforth.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build.log

@@ -0,0 +1,15 @@
+
+> @adminforth/background-jobs@1.0.1 build
+> tsc && rsync -av --exclude 'node_modules' custom dist/
+
+sending incremental file list
+custom/
+custom/JobInfoPopup.vue
+custom/JobsList.vue
+custom/NavbarJobs.vue
+custom/StateToIcon.vue
+custom/tsconfig.json
+custom/utils.ts
+
+sent 11,198 bytes  received 134 bytes  22,664.00 bytes/sec
+total size is 10,720  speedup is 0.95

package/custom/JobInfoPopup.vue

@@ -0,0 +1,110 @@
+<template> 
+    <div class="flex flex-col w-full min-w-96">
+      <div class="flex items-center mb-1">
+        <h2 class="text-lg font-semibold">{{ job.name }}</h2>
+        <p class="ml-2 text-xs text-gray-600 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
+        <p class="ml-auto text-gray-800 h-full"> {{  t('Progress:')  }} <span class="font-semibold" >{{ job.progress }}%</span></p>
+        <StateToIcon :job="job" />
+      </div>
+      <div class="flex items-center gap-4 w-full">
+        <ProgressBar 
+          :current-value="job.progress" 
+          :max-value="100" 
+          :min-value="0"
+          :showAnimation="job.status === 'IN_PROGRESS'"
+          :showLabels="false"
+          :showValues="false"
+          :show-progress="false"
+          :height="6"
+        />
+        <Button class="h-8" v-if="job.status === 'IN_PROGRESS'" @click="cancelJob"> {{ t('Cancel') }} </Button>
+      </div>
+    </div>
+    <component 
+      v-if="job.customComponent"
+      class="mt-4" 
+      :is="getCustomComponent(job.customComponent)" 
+      :meta="job.customComponent"
+      :getJobTasks="getJobTasks"
+      :job="job"
+    />
+</template>
+
+
+
+
+<script setup lang="ts">
+import type { IJob } from './utils';
+import { ProgressBar, Button } from '@/afcl';
+import { getTimeAgoString, callAdminForthApi, getCustomComponent} from '@/utils';
+import { useI18n } from 'vue-i18n';
+import StateToIcon from './StateToIcon.vue';
+import { useAdminforth } from '@/adminforth';
+
+
+const { t } = useI18n();
+
+const adminforth = useAdminforth();
+
+const props = defineProps<{
+  job: IJob;
+  meta: {
+    pluginInstanceId: string;
+  };
+}>();
+
+async function cancelJob() {
+  // Implement job cancellation logic here
+  const isConfirmed = await adminforth.confirm({ message: t('Are you sure you want to cancel this job?') });
+  if (!isConfirmed) {
+    return;
+  }
+  const failedToCancelText = t('Failed to cancel job');
+  console.log(`Canceling job with ID: ${props.job.id}`);
+  try {
+    const res = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/cancel-job`,
+      method: 'POST',
+      body: {
+        jobId: props.job.id,
+      },
+    });
+    if (res.ok) {
+      adminforth.alert({ message: t('Job cancelled successfully'), variant: 'success' });
+    } else {
+      adminforth.alert({ message: failedToCancelText, variant: 'danger' });
+    }
+  } catch (error) {
+    adminforth.alert({ message: failedToCancelText, variant: 'danger' });
+    console.error('Error canceling job:', error);
+  }
+}
+
+
+
+async function getJobTasks(limit: number = 10, offset: number = 0): Promise<{state: Record<string, any>, status: string}[]> {
+  try {
+    const res = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get-tasks`,
+      method: 'POST',
+      body: {
+        jobId: props.job.id,
+        limit,
+        offset,
+      },
+    });
+    if (res.ok) {
+      return res.tasks;
+    } else {
+      console.error('Error fetching job tasks:', res.error);
+      return [];
+    }
+  } catch (error) {
+    console.error('Error fetching job tasks:', error);
+    return [];
+  }
+}
+
+
+
+</script>

package/custom/JobsList.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
+    <Modal v-for="job in props.jobs" :key="job.id" :beforeOpenFunction="props.closeDropdown">
+      <template #trigger>
+        <div class="flex items-center w-full px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
+          <div class="flex flex-col w-full max-w-48">
+            <p class="flex gap-2 items-end justify-between text-nowrap">
+              <span class="text-sm h-full text truncate">{{ job.name }}</span> 
+              <span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span> 
+            </p>
+            <ProgressBar 
+              class="mt-1"
+              :current-value="job.progress" 
+              :max-value="100" 
+              :min-value="0"
+              :showAnimation="job.status === 'IN_PROGRESS'"
+              :showLabels="false"
+              :showValues="false"
+              :show-progress="false"
+            />
+          </div>
+          <StateToIcon :job="job" />
+        </div>
+      </template>
+      <div>
+        <JobInfoPopup 
+          :job="job" 
+          :meta="meta"
+        />
+      </div>
+    </Modal>
+
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import type { IJob } from './utils';
+import { getTimeAgoString } from '@/utils';
+import { ProgressBar, Modal } from '@/afcl';
+import JobInfoPopup from './JobInfoPopup.vue';
+import StateToIcon from './StateToIcon.vue';
+
+const props = defineProps<{
+  jobs: IJob[];
+  closeDropdown: () => void;
+  meta: {
+    pluginInstanceId: string;
+  };
+}>();
+
+  
+</script>

package/custom/NavbarJobs.vue

@@ -0,0 +1,154 @@
+<template>
+  <div ref="dropdownRef">
+    <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
+      <div v-if="isAlLeastOneJobRunning" class="relative">
+        <div class="loader "></div>
+        <div class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"> {{ jobsCount }}</div>
+      </div>
+      <div class="flex items-center justify-center" v-else-if="jobs.length > 0">
+        <Tooltip>
+          <IconCheckCircleOutline class="w-8 h-8 text-green-500" />
+          <template #tooltip>
+            {{ t('All jobs completed') }}
+          </template>
+        </Tooltip>
+      </div>
+    </div>
+    <Transition
+      enter-active-class="transition ease-out duration-200"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-150"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div v-show="isDropdownOpen" class="absolute right-28 top-14 md:top-12 rounded z-10 overflow-y-auto max-h-96 ">
+        <JobsList 
+          :closeDropdown="() => isDropdownOpen = false"
+          :jobs="jobs" 
+          :meta="meta"
+        />
+      </div>
+    </Transition>
+  </div>
+
+  
+</template>
+
+
+
+<script setup lang="ts">
+  import type { AdminUser } from 'adminforth';
+  import { onMounted, onUnmounted, ref, computed } from 'vue';
+  import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
+  import { Tooltip, Modal } from '@/afcl';
+  import { useI18n } from 'vue-i18n';
+  import JobsList from './JobsList.vue';
+  import type { IJob } from './utils';
+  import { callAdminForthApi } from '@/utils';
+  import websocket from '@/websocket';
+  import { onClickOutside } from '@vueuse/core'
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    meta: {
+      pluginInstanceId: string;
+    };
+    adminUser: AdminUser;
+  }>();
+
+  const isDropdownOpen = ref(false);
+  const jobs = ref<IJob[]>([]);
+  const dropdownRef = ref<HTMLElement | null>(null);
+
+  onClickOutside(dropdownRef, () => {
+    isDropdownOpen.value = false;
+  });
+
+  const isAlLeastOneJobRunning = computed(() => {
+    return jobs.value.some(job => job.status === 'IN_PROGRESS');
+  })
+
+  const jobsCount = computed(() => {
+    return jobs.value.filter(job => job.status === 'IN_PROGRESS').length;
+  })
+
+
+
+  onMounted(async () => {
+    websocket.subscribe('/background-jobs', (data) => {
+      const jobIndex = jobs.value.findIndex(job => job.id === data.jobId);
+      if (jobIndex !== -1) {
+        if (data.status) {
+          jobs.value[jobIndex].status = data.status;
+        }
+        if (data.progress !== undefined) {
+          jobs.value[jobIndex].progress = data.progress;
+        }
+      } else {
+        jobs.value.unshift({
+          id: data.jobId,
+          name: data.name || 'Unknown Job',
+          status: data.status || 'IN_PROGRESS',
+          progress: data.progress || 0,
+          createdAt: data.createdAt || new Date().toISOString(),
+          customComponent: data.customComponent,
+        });
+      }
+    });
+
+
+    try {
+      const res = await callAdminForthApi({
+        path: `/plugin/${props.meta.pluginInstanceId}/get-list-of-jobs`,
+        method: 'POST',
+      });
+      jobs.value = res.jobs;
+    } catch (error) {
+      console.error('Error fetching jobs:', error);
+    }
+  });
+
+
+  onUnmounted(() => {
+    websocket.unsubscribe('/background-jobs');
+  });
+
+</script>
+
+
+<style scoped lang="scss">
+  .loader {
+    width: 28px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    --spinner-color: #1a56db;
+
+    background:
+      conic-gradient(
+        from 120deg,
+        var(--spinner-color) 0deg 40deg,
+        transparent 40deg
+      ),
+
+      conic-gradient(#ccc 0deg 360deg);
+
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - 6px),
+      #000 calc(100% - 5px)
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - 6px),
+      #000 calc(100% - 5px)
+    );
+
+    animation: stepRotate 2s infinite;
+  }
+
+  @keyframes stepRotate {
+    to { transform: rotate(1turn); }
+  }
+</style>

package/custom/StateToIcon.vue

@@ -0,0 +1,40 @@
+<template>
+  <Tooltip v-if="job.status === 'IN_PROGRESS'">
+    <Spinner class="w-5 h-5 ml-2" />
+    <template #tooltip>
+      {{ t('In progress') }}
+    </template>
+  </Tooltip>
+  <Tooltip v-else-if="job.status === 'DONE'">
+    <IconCheckCircleOutline  class="w-6 h-6 ml-2 text-green-500" />
+    <template #tooltip>
+      {{ t('Done') }}
+    </template>
+  </Tooltip>
+  <Tooltip v-else-if="job.status === 'CANCELLED'">
+    <IconCloseCircleOutline class="w-6 h-6 ml-2 text-red-500" />
+    <template #tooltip>
+      {{ t('Cancelled') }}
+    </template>
+  </Tooltip>
+  <Tooltip v-else-if="job.status === 'DONE_WITH_ERRORS'">
+    <IconExclamationCircleOutline class="w-6 h-6 ml-2 text-yellow-500" />
+    <template #tooltip>
+      {{ t('Done with errors') }}
+    </template>
+  </Tooltip>
+</template>
+
+
+<script setup lang="ts">
+  import type { IJob } from './utils';
+  import { IconCheckCircleOutline, IconCloseCircleOutline, IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
+  import { Spinner, Tooltip } from '@/afcl';
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    job: IJob;
+  }>();
+</script>

package/custom/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        "../node_modules/adminforth/dist/spa/src/*"
+      ],
+      "*": [
+        "../node_modules/adminforth/dist/spa/node_modules/*"
+      ],
+      "@@/*": [
+        "."
+      ]
+    }
+  }
+}

package/custom/utils.ts

@@ -0,0 +1,9 @@
+import type { AdminForthComponentDeclarationFull } from "adminforth";
+export interface IJob {
+  id: string;
+  name: string;
+  status: 'IN_PROGRESS' | 'DONE' | 'DONE_WITH_ERRORS' | 'CANCELLED';
+  progress: number; // 0 to 100
+  createdAt: Date;
+  customComponent?: AdminForthComponentDeclarationFull; 
+}

package/dist/custom/JobInfoPopup.vue

@@ -0,0 +1,110 @@
+<template> 
+    <div class="flex flex-col w-full min-w-96">
+      <div class="flex items-center mb-1">
+        <h2 class="text-lg font-semibold">{{ job.name }}</h2>
+        <p class="ml-2 text-xs text-gray-600 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
+        <p class="ml-auto text-gray-800 h-full"> {{  t('Progress:')  }} <span class="font-semibold" >{{ job.progress }}%</span></p>
+        <StateToIcon :job="job" />
+      </div>
+      <div class="flex items-center gap-4 w-full">
+        <ProgressBar 
+          :current-value="job.progress" 
+          :max-value="100" 
+          :min-value="0"
+          :showAnimation="job.status === 'IN_PROGRESS'"
+          :showLabels="false"
+          :showValues="false"
+          :show-progress="false"
+          :height="6"
+        />
+        <Button class="h-8" v-if="job.status === 'IN_PROGRESS'" @click="cancelJob"> {{ t('Cancel') }} </Button>
+      </div>
+    </div>
+    <component 
+      v-if="job.customComponent"
+      class="mt-4" 
+      :is="getCustomComponent(job.customComponent)" 
+      :meta="job.customComponent"
+      :getJobTasks="getJobTasks"
+      :job="job"
+    />
+</template>
+
+
+
+
+<script setup lang="ts">
+import type { IJob } from './utils';
+import { ProgressBar, Button } from '@/afcl';
+import { getTimeAgoString, callAdminForthApi, getCustomComponent} from '@/utils';
+import { useI18n } from 'vue-i18n';
+import StateToIcon from './StateToIcon.vue';
+import { useAdminforth } from '@/adminforth';
+
+
+const { t } = useI18n();
+
+const adminforth = useAdminforth();
+
+const props = defineProps<{
+  job: IJob;
+  meta: {
+    pluginInstanceId: string;
+  };
+}>();
+
+async function cancelJob() {
+  // Implement job cancellation logic here
+  const isConfirmed = await adminforth.confirm({ message: t('Are you sure you want to cancel this job?') });
+  if (!isConfirmed) {
+    return;
+  }
+  const failedToCancelText = t('Failed to cancel job');
+  console.log(`Canceling job with ID: ${props.job.id}`);
+  try {
+    const res = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/cancel-job`,
+      method: 'POST',
+      body: {
+        jobId: props.job.id,
+      },
+    });
+    if (res.ok) {
+      adminforth.alert({ message: t('Job cancelled successfully'), variant: 'success' });
+    } else {
+      adminforth.alert({ message: failedToCancelText, variant: 'danger' });
+    }
+  } catch (error) {
+    adminforth.alert({ message: failedToCancelText, variant: 'danger' });
+    console.error('Error canceling job:', error);
+  }
+}
+
+
+
+async function getJobTasks(limit: number = 10, offset: number = 0): Promise<{state: Record<string, any>, status: string}[]> {
+  try {
+    const res = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get-tasks`,
+      method: 'POST',
+      body: {
+        jobId: props.job.id,
+        limit,
+        offset,
+      },
+    });
+    if (res.ok) {
+      return res.tasks;
+    } else {
+      console.error('Error fetching job tasks:', res.error);
+      return [];
+    }
+  } catch (error) {
+    console.error('Error fetching job tasks:', error);
+    return [];
+  }
+}
+
+
+
+</script>