feat/gh-actions

.github/workflows/DevelopServerDeploy.yml

@@ -74,6 +74,7 @@ jobs:
           -v /home/wikigdrive/service_account.json:/service_account.json \
           -v /home/wikigdrive/env.develop:/usr/src/app/.env \
           -v /var/run/docker.sock:/var/run/docker.sock \
+          -v /var/run/podman/podman.sock:/var/run/podman/podman.sock \
           -v "/var/www/dev.wikigdrive.com:/usr/src/app/dist/hugo" \
           -e "GIT_SHA=${GITHUB_SHA}" \
           -e "ZIPKIN_URL=https://dev.wikigdrive.com/zipkin" \

.github/workflows/ProdServerDeploy.yml

@@ -73,6 +73,7 @@ jobs:
           -v /home/wikigdrive/service_account.json:/service_account.json \
           -v /home/wikigdrive/env.prod:/usr/src/app/.env \
           -v /var/run/docker.sock:/var/run/docker.sock \
+          -v /var/run/podman/podman.sock:/var/run/podman/podman.sock \
           -v "/var/www/wikigdrive.com:/usr/src/app/dist/hugo" \
           -e "GIT_SHA=${GITHUB_SHA}" \
           --publish 127.0.0.1:3000:3000 \

.github/workflows/feat-deploy.yml

@@ -33,13 +33,15 @@ jobs:
   build:
     needs: test
     runs-on: ubuntu-latest
-
+    env:
+      BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+      GH_TOKEN: ${{ github.token }}
+      BODY: ${{ github.event.head_commit.message }}
     steps:
+      - uses: actions/checkout@v4
       - name: Create pull request
-        id: open-pr
-        uses: repo-sync/pull-request@v2
-        with:
-          destination_branch: "master"
-          pr_title: "${BRANCH_NAME}"
-          pr_template: ".github/pull_request.md"
-          pr_draft: true
+        run: |
+          gh_pr_up() {
+            gh pr edit $* --body "${BODY}" || gh pr create --draft $* --body "${BODY}"
+          }
+          gh_pr_up --base master --title "${BRANCH_NAME}"

.github/workflows/pull-request.yml

@@ -83,6 +83,7 @@ jobs:
           -v /home/wikigdrive/service_account.json:/service_account.json \
           -v /home/wikigdrive/env.pr:/usr/src/app/.env \
           -v /var/run/docker.sock:/var/run/docker.sock \
+          -v /var/run/podman/podman.sock:/var/run/podman/podman.sock \
           -e "GIT_SHA=${{ github.sha }}" \
           -v "/var/www/pr-${{ github.event.number }}.wikigdrive.com:/usr/src/app/website/.vitepress/dist" \
           -e "ZIPKIN_URL=https://pr-${{ github.event.number }}.wikigdrive.com/zipkin" \
@@ -95,7 +96,8 @@ jobs:
           --service_account /service_account.json \
           --share_email [email protected] \
           --workdir /data \
-          server 3000
+          server 3000 \
+          --disable_google_watch
 
   remove:
     if: github.event.pull_request.head.ref != 'develop' && !contains( github.event.pull_request.labels.*.name, 'deploy-pr')

Dockerfile

@@ -7,7 +7,7 @@ VOLUME /data
 WORKDIR /usr/src/app
 
 RUN apt-get update
-RUN apt-get install -yq bash git-lfs openssh-client curl unzip socat
+RUN apt-get install -yq bash git-lfs openssh-client curl unzip socat podman
 RUN curl -fsSL https://deno.land/install.sh | DENO_INSTALL=/usr/local sh
 
 COPY package.json package-lock.json ./
@@ -30,4 +30,8 @@ WORKDIR "/usr/src/app"
 # Add the GIT_SSH_COMMAND to /etc/profile so that we can debug git issues from the command line
 RUN echo 'export GIT_SSH_COMMAND="ssh -i \$(pwd | sed s/_transform.*//)/.private/id_rsa"' >> /etc/profile
 
+# Git 2.47:
+#RUN apt upgrade git --repository=http://dl-cdn.alpinelinux.org/alpine/edge/main
+RUN git config --global --add safe.directory /srv/wikigdrive/*
+
 CMD [ "sh", "-c", "wikigdrive --workdir /data server 3000" ]

apps/ui/src/components/DriveTools.vue

@@ -55,7 +55,7 @@
   </div>
 </template>
 <script>
-import {UtilsMixin} from './UtilsMixin.ts';
+import {disableElement, UtilsMixin} from './UtilsMixin.ts';
 import {UiMixin} from './UiMixin.ts';
 import ToolButton from './ToolButton.vue';
 
@@ -89,6 +89,20 @@ export default {
     GIT_SHA() {
       return this.drive.GIT_SHA;
     }
+  },
+  methods: {
+    async transformAll(event) {
+      await disableElement(event, async () => {
+        await this.authenticatedClient.fetchApi(`/api/run_action/${this.driveId}/transform_all`, {
+          method: 'post',
+          headers: {
+            'Content-type': 'application/json'
+          },
+          body: JSON.stringify({})
+        });
+
+      });
+    },
   }
 };
 </script>

apps/ui/src/components/JobsViewer.vue

@@ -2,77 +2,88 @@
   <div class="container mainbar__content-height">
     <StatusToolBar :active-tab="activeTab" />
 
-    <div>
-      <div class="card-footer" v-if="active_jobs.length === 0">
-        <div class="btn-group">
-          <a class="btn btn-outline-primary me-2" v-if="selectedFile.id && selectedFile.id !== 'TO_FILL'" @click.prevent="$emit('sync', { $event, file: selectedFile })">Sync Single</a>
-          <a class="btn btn-outline-danger me-2" v-if="drive.name" @click.prevent="syncAll">Sync All</a>
-          <a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name && selectedFile.id" @click.prevent="$emit('transform', $event, selectedFile)">Transform Single Markdown</a>
-          <a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name" @click.prevent="transformAll">Transform All Markdown</a>
-          <a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name" @click.prevent="renderPreview">Render Preview</a>
-        </div>
-      </div>
+    <div class="overflow-scroll d-flex flex-row mt-3">
 
-      <div class="card mt-3">
-        <div class="card-header">
-          Jobs
+      <div class="flex-column order-0 w-auto">
+        <div class="d-block" v-if="active_jobs.length === 0">
+          <div class="btn-group-vertical w-100">
+            <a class="btn btn-outline-primary me-2" v-if="selectedFile.id && selectedFile.id !== 'TO_FILL'" @click.prevent="$emit('sync', { $event, file: selectedFile })">Sync Single</a>
+            <a class="btn btn-outline-danger me-2" v-if="drive.name" @click.prevent="syncAll">Sync All</a>
+          </div>
         </div>
-        <div class="card-body">
-          <div class="row py-1 align-items-center" v-if="last_job.dateStr">
-            <div class="col-8">
-              <span v-if="last_job.kind === 'full'" class="fw-bold">Last full sync </span>
-              <span v-else class="fw-bold">Last synced </span>
-              <span class="small text-muted">{{ last_job.dateStr }} </span>
-              <span v-if="last_job.durationStr" class="small text-muted">&nbsp;{{ last_job.durationStr }}</span>
-            </div>
-            <div v-if="last_transform.durationStr" class="col-8">
-              <span class="fw-bold">Last transform took</span>
-              <span class="small text-muted">&nbsp;{{ last_transform.durationStr }}</span>
+        <div class="d-block mt-3" v-if="!isGDocsPreview && drive.name">
+          <h6>Workflows <a href="#workflows"><i class="fa-solid fa-edit"></i></a></h6>
+          <div class="btn-group-vertical w-100">
+            <div v-for="(workflow_job, id) in workflow_jobs" :key="id">
+              <a v-if="!workflow_job.hide_in_menu" class="btn btn-outline-secondary me-2 w-100" @click.prevent="runAction($event, id)">
+                {{ workflow_job.name }}
+              </a>
             </div>
           </div>
+        </div>
+      </div>
+      <div class="flex-grow-1 flex-shrink-1 overflow-scroll border-left-0-not-first ms-3">
+        <div class="card">
+          <div class="card-header">
+            Jobs
+          </div>
+          <div class="card-body">
+            <div class="row py-1 align-items-center" v-if="last_job.dateStr">
+              <div class="col-8">
+                <span v-if="last_job.kind === 'full'" class="fw-bold">Last full sync </span>
+                <span v-else class="fw-bold">Last synced </span>
+                <span class="small text-muted">{{ last_job.dateStr }} </span>
+                <span v-if="last_job.durationStr" class="small text-muted">&nbsp;{{ last_job.durationStr }}</span>
+              </div>
+              <div v-if="last_transform.durationStr" class="col-8">
+                <span class="fw-bold">Last transform took</span>
+                <span class="small text-muted">&nbsp;{{ last_transform.durationStr }}</span>
+              </div>
+            </div>
 
-          <table class="table table-bordered jobs-list mt-3">
-            <thead>
-            <tr>
-              <th>Job</th>
-              <th>Started</th>
-              <th>Finished</th>
-            </tr>
-            </thead>
+            <table class="table table-bordered jobs-list mt-3">
+              <thead>
+              <tr>
+                <th>Job</th>
+                <th>Started</th>
+                <th>Finished</th>
+              </tr>
+              </thead>
 
-            <tbody v-if="active_jobs_reverse.length > 0">
-            <tr v-for="(job, idx) of active_jobs_reverse" :key="idx" class="jobs-list__item" :class="{ active: 'running' === job.state }">
-              <td>{{ job.title }}</td>
-              <td>{{ job.startedStr || job.state }}</td>
-              <td>
-                <span v-if="job.progress && job.progress.total > job.progress.completed">&nbsp;{{ job.progress.completed }} / {{ job.progress.total }}</span>
-                <a v-if="job.id && job.started" class="btn float-end" :href="'#drive_logs:job-' + job.id" @click.prevent="showLogs(job)">Logs</a>
-              </td>
-            </tr>
-            </tbody>
+              <tbody v-if="active_jobs_reverse.length > 0">
+              <tr v-for="(job, idx) of active_jobs_reverse" :key="idx" class="jobs-list__item" :class="{ active: 'running' === job.state }">
+                <td>{{ job.title }}</td>
+                <td>{{ job.startedStr || job.state }}</td>
+                <td>
+                  <span v-if="job.progress && job.progress.total > job.progress.completed">&nbsp;{{ job.progress.completed }} / {{ job.progress.total }}</span>
+                  <a v-if="job.id && job.started" class="btn float-end" :href="'#drive_logs:job-' + job.id" @click.prevent="showLogs(job)">Logs</a>
+                </td>
+              </tr>
+              </tbody>
 
-            <tbody>
-            <tr v-for="(job, idx) of archive" :key="idx" class="jobs-list__item" :class="{ active: 'running' === job.state, 'text-danger': 'failed' === job.state, 'text-warning': job.progress && job.progress.warnings > 0 }">
-              <td>{{ job.title }}</td>
-              <td>{{ job.startedStr }}</td>
-              <td>
-                {{ job.finishedStr }}
-                ({{ job.durationStr }})
-                <a class="btn float-end" :href="'#drive_logs:job-' + job.id" @click.prevent="showLogs(job)">Logs</a>
-              </td>
-            </tr>
-            </tbody>
-          </table>
+              <tbody>
+              <tr v-for="(job, idx) of archive" :key="idx" class="jobs-list__item" :class="{ active: 'running' === job.state, 'text-danger': 'failed' === job.state, 'text-warning': job.progress && job.progress.warnings > 0 }">
+                <td>{{ job.title }}</td>
+                <td>{{ job.startedStr }}</td>
+                <td>
+                  {{ job.finishedStr }}
+                  ({{ job.durationStr }})
+                  <a class="btn float-end" :href="'#drive_logs:job-' + job.id" @click.prevent="showLogs(job)">Logs</a>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
 <script>
-import {UtilsMixin} from './UtilsMixin.ts';
+import {disableElement, UtilsMixin} from './UtilsMixin.ts';
 import {UiMixin} from './UiMixin.ts';
 import StatusToolBar from './StatusToolBar.vue';
+import yaml from 'js-yaml';
 
 export default {
   name: 'JobsViewer',
@@ -83,7 +94,15 @@
       type: String
     }
   },
+  data() {
+    return {
+      workflow_jobs: []
+    };
+  },
   components: {StatusToolBar},
+  created() {
+    this.fetchConfig();
+  },
   computed: {
     active_jobs_reverse() {
       return [].concat(this.active_jobs)
@@ -114,7 +133,31 @@
   methods: {
     showLogs(job) {
       this.$router.push(`/drive/${this.driveId}#drive_logs:job-${job.id}`);
-    }
+    },
+    async fetchConfig() {
+      const response = await this.authenticatedClient.fetchApi(`/api/config/${this.driveId}`);
+      const json = await response.json();
+      if (json.config?.actions_yaml) {
+        const actions_yaml = json.config?.actions_yaml;
+        this.workflow_jobs = {};
+        yaml.loadAll(actions_yaml, (workflow) => {
+          this.workflow_jobs = workflow.jobs;
+        });
+      }
+    },
+    async runAction(event, id) {
+      await disableElement(event, async () => {
+        await this.authenticatedClient.fetchApi(`/api/run_action/${this.driveId}/${id}`, {
+          method: 'post',
+          headers: {
+            'Content-type': 'application/json'
+          },
+          body: JSON.stringify({
+            selectedFileId: this.selectedFile.id
+          })
+        });
+      });
+    },
   }
 };
 </script>

apps/ui/src/components/UtilsMixin.ts

@@ -212,20 +212,6 @@ export const UtilsMixin = {
         });
       });
     },
-    async renderPreview(event) {
-      await disableElement(event, async () => {
-        await this.authenticatedClient.fetchApi(`/api/run_action/${this.driveId}/transform`, {
-          method: 'post'
-        });
-      });
-    },
-    async transformAll(event) {
-      await disableElement(event, async () => {
-        await this.authenticatedClient.fetchApi(`/api/transform/${this.driveId}`, {
-          method: 'post'
-        });
-      });
-    },
     async uploadGdrive(event) {
       await disableElement(event, async () => {
         const response = await this.authenticatedClient.fetchApi('/api/gdrive/' + this.driveId + '/upload', { method: 'get' });
@@ -235,13 +221,6 @@ export const UtilsMixin = {
         }
       });
     },
-    async transformSingle(event, selectedFile) {
-      await disableElement(event, async () => {
-        await this.authenticatedClient.fetchApi(`/api/transform/${this.driveId}/${selectedFile.id}`, {
-          method: 'post'
-        });
-      });
-    },
     downloadOdt(fileId) {
       const odtPath = `/api/drive/${this.driveId}/file/${fileId}.odt`;
       window.open(odtPath, '_blank');

apps/ui/src/components/WorkflowsEditor.vue

@@ -6,7 +6,7 @@
       <div class="card-body">
         <form>
           <div class="form-group">
-            <label>Config.toml for preview</label>
+            <label>Workflows</label>
             <CodeEditor v-model="user_config.actions_yaml" lang="yaml" />
           </div>
         </form>

apps/ui/src/modals/ToastsMixin.ts

@@ -11,14 +11,14 @@ export const ToastsMixin = {
           await this.$root.changeDrive(this.drive.id);
           window.location.reload();
           break;
-        case 'transform:scheduled':
-          this.$removeToastMatching(item => item.type.startsWith('transform:'));
+        case 'action:scheduled':
+          this.$removeToastMatching(item => item.type.startsWith('action:'));
           break;
-        case 'transform:failed':
-          this.$removeToastMatching(item => item.type.startsWith('transform:'));
+        case 'action:failed':
+          this.$removeToastMatching(item => item.type.startsWith('action:'));
           break;
-        case 'transform:done':
-          this.$removeToastMatching(item => item.type.startsWith('transform:'));
+        case 'action:done':
+          this.$removeToastMatching(item => item.type.startsWith('action:'));
           break;
         case 'sync:done':
       }

apps/ui/src/pages/FolderView.vue

@@ -23,8 +23,8 @@
           </div>
         </div>
 
-        <JobsViewer v-if="activeTab === 'sync'" :selected-file="selectedFile" :activeTab="activeTab" @sync="syncSingle($event.$event, $event.file)" @transform="transformSingle" @showLogs="showLogs" />
-        <ChangesViewer v-if="activeTab === 'changes'" :selected-file="selectedFile" :activeTab="activeTab" @sync="syncSingle($event.$event, $event.file)" @transform="transformSingle" @showLogs="showLogs" />
+        <JobsViewer v-if="activeTab === 'sync'" :selected-file="selectedFile" :activeTab="activeTab" @sync="syncSingle($event.$event, $event.file)" @showLogs="showLogs" />
+        <ChangesViewer v-if="activeTab === 'changes'" :selected-file="selectedFile" :activeTab="activeTab" @sync="syncSingle($event.$event, $event.file)" @showLogs="showLogs" />
         <GitLog v-if="activeTab === 'git_log'" :folderPath="folderPath" :selectedFile="selectedFile" :active-tab="activeTab" />
 
         <DriveTools v-if="activeTab === 'drive_tools'" :folderPath="folderPath" :selectedFile="selectedFile" :selected-folder="selectedFolder" :active-tab="activeTab" />