Add cron feature (#934)

https://woodpecker-ci.org/docs/usage/cron

Co-authored-by: Anbraten <anton@ju60.de>
Co-authored-by: qwerty287 <80460567+qwerty287@users.noreply.github.com>

web/components.d.ts

@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ActionsTab: typeof import('./src/components/repo/settings/ActionsTab.vue')['default']
     ActiveBuilds: typeof import('./src/components/layout/header/ActiveBuilds.vue')['default']
+    AdminSecretsTab: typeof import('./src/components/admin/settings/AdminSecretsTab.vue')['default']
     BadgeTab: typeof import('./src/components/repo/settings/BadgeTab.vue')['default']
     BuildFeedItem: typeof import('./src/components/build-feed/BuildFeedItem.vue')['default']
     BuildFeedSidebar: typeof import('./src/components/build-feed/BuildFeedSidebar.vue')['default']
@@ -22,24 +23,66 @@ declare module '@vue/runtime-core' {
     Button: typeof import('./src/components/atomic/Button.vue')['default']
     Checkbox: typeof import('./src/components/form/Checkbox.vue')['default']
     CheckboxesField: typeof import('./src/components/form/CheckboxesField.vue')['default']
+    CronTab: typeof import('./src/components/repo/settings/CronTab.vue')['default']
     DocsLink: typeof import('./src/components/atomic/DocsLink.vue')['default']
     FluidContainer: typeof import('./src/components/layout/FluidContainer.vue')['default']
     GeneralTab: typeof import('./src/components/repo/settings/GeneralTab.vue')['default']
+    IBxBxPowerOff: typeof import('~icons/bx/bx-power-off')['default']
+    ICarbonCloseOutline: typeof import('~icons/carbon/close-outline')['default']
+    IClarityDeployLine: typeof import('~icons/clarity/deploy-line')['default']
+    IClaritySettingsSolid: typeof import('~icons/clarity/settings-solid')['default']
     Icon: typeof import('./src/components/atomic/Icon.vue')['default']
     IconButton: typeof import('./src/components/atomic/IconButton.vue')['default']
+    IEntypoDotsTwoVertical: typeof import('~icons/entypo/dots-two-vertical')['default']
+    IGgTrash: typeof import('~icons/gg/trash')['default']
+    IIcBaselineDarkMode: typeof import('~icons/ic/baseline-dark-mode')['default']
+    IIcBaselineDownload: typeof import('~icons/ic/baseline-download')['default']
+    IIcBaselineEdit: typeof import('~icons/ic/baseline-edit')['default']
+    IIcBaselineHealing: typeof import('~icons/ic/baseline-healing')['default']
+    IIconoirArrowLeft: typeof import('~icons/iconoir/arrow-left')['default']
+    IIconParkOutlineAlarmClock: typeof import('~icons/icon-park-outline/alarm-clock')['default']
+    IIcRoundLightMode: typeof import('~icons/ic/round-light-mode')['default']
+    IIcSharpTimelapse: typeof import('~icons/ic/sharp-timelapse')['default']
+    IIcTwotoneAdd: typeof import('~icons/ic/twotone-add')['default']
+    IMdiBitbucket: typeof import('~icons/mdi/bitbucket')['default']
+    IMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
+    IMdiClockTimeEightOutline: typeof import('~icons/mdi/clock-time-eight-outline')['default']
+    IMdiFormatListBulleted: typeof import('~icons/mdi/format-list-bulleted')['default']
+    IMdiGithub: typeof import('~icons/mdi/github')['default']
+    IMdiLoading: typeof import('~icons/mdi/loading')['default']
+    IMdiSourceBranch: typeof import('~icons/mdi/source-branch')['default']
+    IMdisourceCommit: typeof import('~icons/mdi/source-commit')['default']
+    IMdiSourcePull: typeof import('~icons/mdi/source-pull')['default']
+    IMdiSync: typeof import('~icons/mdi/sync')['default']
+    IMdiTagOutline: typeof import('~icons/mdi/tag-outline')['default']
     InputField: typeof import('./src/components/form/InputField.vue')['default']
+    IOcticonSkip24: typeof import('~icons/octicon/skip24')['default']
+    IPhCheckCircle: typeof import('~icons/ph/check-circle')['default']
+    IPhGitlabLogoSimpleFill: typeof import('~icons/ph/gitlab-logo-simple-fill')['default']
+    IPhHand: typeof import('~icons/ph/hand')['default']
+    IPhHourglass: typeof import('~icons/ph/hourglass')['default']
+    IPhProhibit: typeof import('~icons/ph/prohibit')['default']
+    IPhWarning: typeof import('~icons/ph/warning')['default']
+    IPhXCircle: typeof import('~icons/ph/x-circle')['default']
+    ISimpleIconsGitea: typeof import('~icons/simple-icons/gitea')['default']
+    ITeenyiconsGitSolid: typeof import('~icons/teenyicons/git-solid')['default']
+    IVaadinQuestionCircleO: typeof import('~icons/vaadin/question-circle-o')['default']
     ListItem: typeof import('./src/components/atomic/ListItem.vue')['default']
     Navbar: typeof import('./src/components/layout/header/Navbar.vue')['default']
     NumberField: typeof import('./src/components/form/NumberField.vue')['default']
+    OrgSecretsTab: typeof import('./src/components/org/settings/OrgSecretsTab.vue')['default']
     Panel: typeof import('./src/components/layout/Panel.vue')['default']
     RadioField: typeof import('./src/components/form/RadioField.vue')['default']
     RegistriesTab: typeof import('./src/components/repo/settings/RegistriesTab.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SecretEdit: typeof import('./src/components/secrets/SecretEdit.vue')['default']
+    SecretList: typeof import('./src/components/secrets/SecretList.vue')['default']
     SecretsTab: typeof import('./src/components/repo/settings/SecretsTab.vue')['default']
     SelectField: typeof import('./src/components/form/SelectField.vue')['default']
     Tab: typeof import('./src/components/tabs/Tab.vue')['default']
     Tabs: typeof import('./src/components/tabs/Tabs.vue')['default']
     TextField: typeof import('./src/components/form/TextField.vue')['default']
+    Warning: typeof import('./src/components/atomic/Warning.vue')['default']
   }
 }

web/src/assets/locales/en.json

@@ -122,6 +122,31 @@
                     "placeholder": "Registry Address (e.g. docker.io)"
                 }
             },
+            "crons": {
+                "crons": "Crons",
+                "desc": "Cron jobs can be used to trigger pipelines on a regular basis.",
+                "show": "Show crons",
+                "add": "Add cron",
+                "none": "There are no crons yet.",
+                "save": "Save cron",
+                "created": "Cron created",
+                "saved": "Cron saved",
+                "deleted": "Cron deleted",
+                "next_exec": "Next execution",
+                "not_executed_yet": "Not executed yet",
+                "branch": {
+                    "title": "Branch",
+                    "placeholder": "Branch (uses default branch if empty)"
+                },
+                "name": {
+                    "name": "Name",
+                    "placeholder": "Name of the cron job"
+                },
+                "schedule": {
+                    "title": "Schedule (based on UTC)",
+                    "placeholder": "Schedule"
+                }
+            },
             "badge": {
                 "badge": "Badge",
                 "url_branch": "URL for specific branch",
@@ -179,7 +204,8 @@
                 "push": "Push",
                 "tag": "Tag",
                 "pr": "Pull Request",
-                "deploy": "Deploy"
+                "deploy": "Deploy",
+                "cron": "Cron"
             }
         }
     },

web/src/components/atomic/DocsLink.vue

@@ -1,32 +1,22 @@
 <template>
-  <a :href="`${docsBaseUrl}${url}`" target="_blank" class="text-blue-500 hover:text-blue-600 cursor-pointer mt-1"
+  <a :href="`${docsUrl}`" target="_blank" class="text-blue-500 hover:text-blue-600 cursor-pointer mt-1"
     ><Icon name="question" class="!w-4 !h-4"
   /></a>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineProps, toRef } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';
 
-export default defineComponent({
-  name: 'DocsLink',
-
-  components: {
-    Icon,
-  },
-
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-  },
-
-  setup() {
-    const docsBaseUrl = window.WOODPECKER_DOCS;
-
-    return { docsBaseUrl };
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
   },
 });
+
+const docsBaseUrl = window.WOODPECKER_DOCS;
+const url = toRef(props, 'url');
+const docsUrl = computed(() => (url.value.startsWith('http') ? url.value : `${docsBaseUrl}${url.value}`));
 </script>

web/src/components/atomic/Icon.vue

@@ -37,6 +37,7 @@
   <i-carbon-close-outline v-else-if="name === 'close'" class="h-6 w-6" />
   <i-ic-baseline-edit v-else-if="name === 'edit'" class="h-6 w-6" />
   <i-ic-baseline-download v-else-if="name === 'download'" class="h-6 w-6" />
+  <i-icon-park-outline-alarm-clock v-else-if="name === 'stopwatch'" class="h-6 w-6" />
   <div v-else-if="name === 'blank'" class="h-6 w-6" />
 </template>
 
@@ -82,6 +83,7 @@ export type IconNames =
   | 'turn-off'
   | 'close'
   | 'edit'
+  | 'stopwatch'
   | 'download';
 
 export default defineComponent({

web/src/components/repo/build/BuildItem.vue

@@ -19,7 +19,8 @@
 
     <div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
       <div class="<md:hidden flex items-center flex-shrink-0">
-        <img class="w-8" :src="build.author_avatar" />
+        <Icon v-if="build.event === 'cron'" name="stopwatch" class="text-color" />
+        <img v-else class="w-8" :src="build.author_avatar" />
       </div>
 
       <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
@@ -33,6 +34,7 @@
           <Icon v-if="build.event === 'pull_request'" name="pull_request" />
           <Icon v-else-if="build.event === 'deployment'" name="deployment" />
           <Icon v-else-if="build.event === 'tag'" name="tag" />
+          <Icon v-else-if="build.event === 'cron'" name="push" />
           <Icon v-else name="push" />
           <span class="truncate">{{ prettyRef }}</span>
         </div>

web/src/components/repo/build/BuildProcList.vue

@@ -4,7 +4,10 @@
       class="flex md:ml-2 p-4 space-x-1 justify-between flex-shrink-0 border-b-1 md:rounded-md bg-gray-300 dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
     >
       <div class="flex space-x-1 items-center flex-shrink-0">
-        <div class="flex items-center"><img class="w-6" :src="build.author_avatar" /></div>
+        <div class="flex items-center">
+          <Icon v-if="build.event === 'cron'" name="stopwatch" />
+          <img v-else class="w-6" :src="build.author_avatar" />
+        </div>
         <span>{{ build.author }}</span>
       </div>
       <div class="flex space-x-1 items-center min-w-0">

web/src/components/repo/settings/CronTab.vue

@@ -0,0 +1,155 @@
+<template>
+  <Panel>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+      <div class="ml-2">
+        <h1 class="text-xl text-color">{{ $t('repo.settings.crons.crons') }}</h1>
+        <p class="text-sm text-color-alt">
+          {{ $t('repo.settings.crons.desc') }}
+          <DocsLink url="docs/usage/crons" />
+        </p>
+      </div>
+      <Button
+        v-if="selectedCron"
+        class="ml-auto"
+        start-icon="back"
+        :text="$t('repo.settings.crons.show')"
+        @click="selectedCron = undefined"
+      />
+      <Button
+        v-else
+        class="ml-auto"
+        start-icon="plus"
+        :text="$t('repo.settings.crons.add')"
+        @click="selectedCron = {}"
+      />
+    </div>
+
+    <div v-if="!selectedCron" class="space-y-4 text-color">
+      <ListItem v-for="cron in crons" :key="cron.id" class="items-center">
+        <span>{{ cron.name }}</span>
+        <span v-if="cron.next_exec && cron.next_exec > 0" class="ml-auto">
+          {{ $t('repo.settings.crons.next_exec') }}: {{ date.toLocaleString(new Date(cron.next_exec * 1000)) }}</span
+        >
+        <span v-else class="ml-auto">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
+        <IconButton icon="edit" class="ml-auto w-8 h-8" @click="selectedCron = cron" />
+        <IconButton
+          icon="trash"
+          class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          :is-loading="isDeleting"
+          @click="deleteCron(cron)"
+        />
+      </ListItem>
+
+      <div v-if="crons?.length === 0" class="ml-2">{{ $t('repo.settings.crons.none') }}</div>
+    </div>
+
+    <div v-else class="space-y-4">
+      <form @submit.prevent="createCron">
+        <InputField :label="$t('repo.settings.crons.name.name')">
+          <TextField v-model="selectedCron.name" :placeholder="$t('repo.settings.crons.name.placeholder')" required />
+        </InputField>
+
+        <InputField :label="$t('repo.settings.crons.branch.title')">
+          <TextField v-model="selectedCron.branch" :placeholder="$t('repo.settings.crons.branch.placeholder')" />
+        </InputField>
+
+        <InputField
+          :label="$t('repo.settings.crons.schedule.title')"
+          docs-url="https://pkg.go.dev/github.com/robfig/cron?utm_source=godoc#hdr-CRON_Expression_Format"
+        >
+          <TextField
+            v-model="selectedCron.schedule"
+            :placeholder="$t('repo.settings.crons.schedule.placeholder')"
+            required
+          />
+        </InputField>
+
+        <div v-if="isEditingCron" class="ml-auto mb-4">
+          <span v-if="selectedCron.next_exec && selectedCron.next_exec > 0" class="text-color">
+            {{ $t('repo.settings.crons.next_exec') }}:
+            {{ date.toLocaleString(new Date(selectedCron.next_exec * 1000)) }}
+          </span>
+          <span v-else class="text-color">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
+        </div>
+
+        <Button
+          type="submit"
+          :is-loading="isSaving"
+          :text="isEditingCron ? $t('repo.settings.crons.save') : $t('repo.settings.crons.add')"
+        />
+      </form>
+    </div>
+  </Panel>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onMounted, Ref, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from '~/components/atomic/Button.vue';
+import DocsLink from '~/components/atomic/DocsLink.vue';
+import IconButton from '~/components/atomic/IconButton.vue';
+import ListItem from '~/components/atomic/ListItem.vue';
+import InputField from '~/components/form/InputField.vue';
+import TextField from '~/components/form/TextField.vue';
+import Panel from '~/components/layout/Panel.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import { useDate } from '~/compositions/useDate';
+import useNotifications from '~/compositions/useNotifications';
+import { Cron, Repo } from '~/lib/api/types';
+
+const apiClient = useApiClient();
+const notifications = useNotifications();
+const i18n = useI18n();
+
+const repo = inject<Ref<Repo>>('repo');
+const crons = ref<Cron[]>();
+const selectedCron = ref<Partial<Cron>>();
+const isEditingCron = computed(() => !!selectedCron.value?.id);
+const date = useDate();
+
+async function loadCrons() {
+  if (!repo?.value) {
+    throw new Error("Unexpected: Can't load repo");
+  }
+
+  crons.value = await apiClient.getCronList(repo.value.owner, repo.value.name);
+}
+
+const { doSubmit: createCron, isLoading: isSaving } = useAsyncAction(async () => {
+  if (!repo?.value) {
+    throw new Error("Unexpected: Can't load repo");
+  }
+
+  if (!selectedCron.value) {
+    throw new Error("Unexpected: Can't get cron");
+  }
+
+  if (isEditingCron.value) {
+    await apiClient.updateCron(repo.value.owner, repo.value.name, selectedCron.value);
+  } else {
+    await apiClient.createCron(repo.value.owner, repo.value.name, selectedCron.value);
+  }
+  notifications.notify({
+    title: i18n.t(isEditingCron.value ? 'repo.settings.crons.saved' : i18n.t('repo.settings.crons.created')),
+    type: 'success',
+  });
+  selectedCron.value = undefined;
+  await loadCrons();
+});
+
+const { doSubmit: deleteCron, isLoading: isDeleting } = useAsyncAction(async (_cron: Cron) => {
+  if (!repo?.value) {
+    throw new Error("Unexpected: Can't load repo");
+  }
+
+  await apiClient.deleteCron(repo.value.owner, repo.value.name, _cron.id);
+  notifications.notify({ title: i18n.t('repo.settings.crons.deleted'), type: 'success' });
+  await loadCrons();
+});
+
+onMounted(async () => {
+  await loadCrons();
+});
+</script>

web/src/components/secrets/SecretEdit.vue

@@ -111,6 +111,7 @@ export default defineComponent({
         description: i18n.t('repo.settings.secrets.events.pr_warning'),
       },
       { value: WebhookEvents.Deploy, text: i18n.t('repo.build.event.deploy') },
+      { value: WebhookEvents.Cron, text: i18n.t('repo.build.event.cron') },
     ];
 
     function save() {

web/src/compositions/useBuild.ts

@@ -87,6 +87,10 @@ export default (build: Ref<Build | undefined>) => {
       return build.value.branch;
     }
 
+    if (build.value?.event === 'cron') {
+      return build.value.ref.replaceAll('refs/heads/', '');
+    }
+
     if (build.value?.event === 'tag') {
       return build.value.ref.replaceAll('refs/tags/', '');
     }

web/src/lib/api/index.ts

@@ -12,6 +12,7 @@ import {
   RepoSettings,
   Secret,
 } from './types';
+import { Cron } from './types/cron';
 
 type RepoListOptions = {
   all?: boolean;
@@ -136,6 +137,22 @@ export default class WoodpeckerClient extends ApiClient {
     return this._delete(`/api/repos/${owner}/${repo}/registry/${registryAddress}`);
   }
 
+  getCronList(owner: string, repo: string): Promise<Cron[]> {
+    return this._get(`/api/repos/${owner}/${repo}/cron`) as Promise<Cron[]>;
+  }
+
+  createCron(owner: string, repo: string, cron: Partial<Cron>): Promise<unknown> {
+    return this._post(`/api/repos/${owner}/${repo}/cron`, cron);
+  }
+
+  updateCron(owner: string, repo: string, cron: Partial<Cron>): Promise<unknown> {
+    return this._patch(`/api/repos/${owner}/${repo}/cron/${cron.id}`, cron);
+  }
+
+  deleteCron(owner: string, repo: string, cronId: number): Promise<unknown> {
+    return this._delete(`/api/repos/${owner}/${repo}/cron/${cronId}`);
+  }
+
   getOrgPermissions(owner: string): Promise<OrgPermissions> {
     return this._get(`/api/orgs/${owner}/permissions`) as Promise<OrgPermissions>;
   }

web/src/lib/api/types/build.ts

@@ -8,7 +8,7 @@ export type Build = {
 
   parent: number;
 
-  event: 'push' | 'tag' | 'pull_request' | 'deployment';
+  event: 'push' | 'tag' | 'pull_request' | 'deployment' | 'cron';
 
   //  The current status of the build.
   status: BuildStatus;

web/src/lib/api/types/cron.ts

@@ -0,0 +1,7 @@
+export type Cron = {
+  id: number;
+  name: string;
+  branch: string;
+  schedule: string;
+  next_exec: number;
+};

web/src/lib/api/types/index.ts

@@ -1,5 +1,6 @@
 export * from './build';
 export * from './buildConfig';
+export * from './cron';
 export * from './org';
 export * from './registry';
 export * from './repo';

web/src/lib/api/types/webhook.ts

@@ -3,4 +3,5 @@ export enum WebhookEvents {
   Tag = 'tag',
   PullRequest = 'pull_request',
   Deploy = 'deployment',
+  Cron = 'cron',
 }

web/src/views/repo/RepoSettings.vue

@@ -15,6 +15,9 @@
       <Tab id="registries" :title="$t('repo.settings.registries.registries')">
         <RegistriesTab />
       </Tab>
+      <Tab id="crons" :title="$t('repo.settings.crons.crons')">
+        <CronTab />
+      </Tab>
       <Tab id="badge" :title="$t('repo.settings.badge.badge')">
         <BadgeTab />
       </Tab>
@@ -25,8 +28,8 @@
   </FluidContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, onMounted, Ref } from 'vue';
+<script lang="ts" setup>
+import { inject, onMounted, Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -34,6 +37,7 @@ import IconButton from '~/components/atomic/IconButton.vue';
 import FluidContainer from '~/components/layout/FluidContainer.vue';
 import ActionsTab from '~/components/repo/settings/ActionsTab.vue';
 import BadgeTab from '~/components/repo/settings/BadgeTab.vue';
+import CronTab from '~/components/repo/settings/CronTab.vue';
 import GeneralTab from '~/components/repo/settings/GeneralTab.vue';
 import RegistriesTab from '~/components/repo/settings/RegistriesTab.vue';
 import SecretsTab from '~/components/repo/settings/SecretsTab.vue';
@@ -43,41 +47,21 @@ import useNotifications from '~/compositions/useNotifications';
 import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
 import { RepoPermissions } from '~/lib/api/types';
 
-export default defineComponent({
-  name: 'RepoSettings',
+const notifications = useNotifications();
+const router = useRouter();
+const i18n = useI18n();
 
-  components: {
-    FluidContainer,
-    IconButton,
-    Tabs,
-    Tab,
-    GeneralTab,
-    SecretsTab,
-    RegistriesTab,
-    ActionsTab,
-    BadgeTab,
-  },
+const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
+if (!repoPermissions) {
+  throw new Error('Unexpected: "repoPermissions" should be provided at this place');
+}
 
-  setup() {
-    const notifications = useNotifications();
-    const router = useRouter();
-    const i18n = useI18n();
-
-    const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
-    if (!repoPermissions) {
-      throw new Error('Unexpected: "repoPermissions" should be provided at this place');
-    }
-
-    onMounted(async () => {
-      if (!repoPermissions.value.admin) {
-        notifications.notify({ type: 'error', title: i18n.t('repo.settings.not_allowed') });
-        await router.replace({ name: 'home' });
-      }
-    });
-
-    return {
-      goBack: useRouteBackOrDefault({ name: 'repo' }),
-    };
-  },
+onMounted(async () => {
+  if (!repoPermissions.value.admin) {
+    notifications.notify({ type: 'error', title: i18n.t('repo.settings.not_allowed') });
+    await router.replace({ name: 'home' });
+  }
 });
+
+const goBack = useRouteBackOrDefault({ name: 'repo' });
 </script>