Merge branch 'master' into patch-1

.eslintrc.json

@@ -15,6 +15,8 @@
     "vue/require-default-prop": "off",
     "vue/prop-name-casing": "off",
     "vue/name-property-casing": "off",
+    "vue/component-definition-name-casing": "off",
+    "vue/component-tags-order": "off",
     "@typescript-eslint/camelcase": ["off"],
     "@typescript-eslint/explicit-function-return-type": ["off"],
     "@typescript-eslint/no-var-requires": ["off"],
@@ -28,12 +30,13 @@
         "allowedNames": ["that"]
       }
     ],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "prefer-rest-params": "warn",
     "no-shadow": [
       "warn",
       {
         "builtinGlobals": true,
-        "allow": ["name", "Promise", "event", "parent", "state", "getters"]
+        "allow": ["name", "Promise", "event", "parent", "state", "getters", "stop"]
       }
     ],
     "no-console": ["off"],
@@ -49,7 +52,8 @@
     "node": true
   },
   "globals": {
-    "PRODUCTION": false
+    "PRODUCTION": false,
+    "AW_SERVER_URL": false
   },
   "overrides": [
     {
@@ -69,6 +73,12 @@
       "parserOptions": {
           "parser": "@typescript-eslint/parser"
       }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": ["off"]
+      }
     }
   ]
 }

.github/configure_server.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+mkdir -p $HOME/.config/activitywatch/aw-server
+
+# Configure CORS
+# FIXME: Why is this not needed for aw-server-rust?
+# FIXME: Ideally this should only need to contain the cors_origins keys, with fallback to defaults
+cat > $HOME/.config/activitywatch/aw-server/aw-server.toml <<- EOM
+[server]
+#host = "localhost"
+#port = "5600"
+#storage = "peewee"
+cors_origins = "http://localhost:27180"
+
+[server-testing]
+#host = "localhost"
+#port = "5666"
+#storage = "peewee"
+cors_origins = "http://localhost:27180"
+EOM

.github/workflows/comment.yml

@@ -0,0 +1,78 @@
+# NOTE: For screenshots to work in untrusted PRs we need to do the screenshot comment in a trusted job like this one.
+#       See this post for details: https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
+
+name: Comment
+
+on:
+  workflow_run:
+    workflows: ["Build"]
+    types:
+      - completed
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: >
+      ${{ github.event.workflow_run.conclusion == 'success' }}  # && github.event.workflow_run.event == 'pull_request'
+
+    steps:
+    - uses: iterative/setup-cml@v1
+
+    # Doesn't work for fetching artifacts from separate workflows
+    #- name: Download screenshots
+    #  uses: actions/download-artifact@v2
+    #  with:
+    #    name: screenshots
+    #    path: screenshots
+
+    - name: 'Download artifact'
+      uses: actions/github-script@v3.1.0
+      with:
+        script: |
+          var artifacts = await github.actions.listWorkflowRunArtifacts({
+             owner: context.repo.owner,
+             repo: context.repo.repo,
+             run_id: ${{ github.event.workflow_run.id }},
+          });
+          var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
+            return artifact.name == "screenshots"
+          })[0];
+          var download = await github.actions.downloadArtifact({
+             owner: context.repo.owner,
+             repo: context.repo.repo,
+             artifact_id: matchArtifact.id,
+             archive_format: 'zip',
+          });
+          var fs = require('fs');
+          fs.writeFileSync('${{github.workspace}}/screenshots.zip', Buffer.from(download.data));
+
+    - run: unzip -d screenshots screenshots.zip
+
+    - name: Compose comment
+      env:
+        repo_token: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+        echo "Here are screenshots of this commit:" >> comment.md
+        echo "" >> comment.md  # just for the newline
+        for aw_server_dir in screenshots/aw-*; do
+            for aw_version_dir in $aw_server_dir/*; do
+                aw_server=$(basename $aw_server_dir)
+                aw_version=$(basename $aw_version_dir)
+                echo "<details><summary>Screenshots using $aw_server $aw_version (click to expand)</summary>" >> comment.md
+                echo '<p float="left">' >> comment.md
+                cml-publish $aw_version_dir/activity.png  | sed -E 's/.+/<img width="45%" src="\0"\/>/' >> comment.md
+                cml-publish $aw_version_dir/timeline.png  | sed -E 's/.+/<img width="45%" src="\0"\/>/' >> comment.md
+                cml-publish $aw_version_dir/settings.png  | sed -E 's/.+/<img width="45%" src="\0"\/>/' >> comment.md
+                cml-publish $aw_version_dir/home.png      | sed -E 's/.+/<img width="45%" src="\0"\/>/' >> comment.md
+                cml-publish $aw_version_dir/buckets.png   | sed -E 's/.+/<img width="45%" src="\0"\/>/' >> comment.md
+                cml-publish $aw_version_dir/stopwatch.png | sed -E 's/.+/<img width="45%" src="\0"\/>/' >> comment.md
+                echo '</p>' >> comment.md
+                echo -n '</details>' >> comment.md
+            done
+        done
+    - name: Post screenshots in commit comment
+      env:
+        repo_token: ${{ secrets.GITHUB_TOKEN }}
+        head_sha: ${{ github.event.workflow_run.head_sha }}
+      run: |
+        cml-send-comment --commit-sha $head_sha --repo https://github.com/ActivityWatch/aw-webui comment.md

.github/workflows/nodejs.yml

@@ -1,6 +1,3 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build
 
 on:
@@ -11,14 +8,51 @@ on:
 
 jobs:
   build:
+    name: Build (node-${{ matrix.node-version }})
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16]
+        python-version: ['3.9']
+        include:
+        - node-version: '16'
+          python-version: '3.9'
+
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        submodules: 'recursive'
+    - name: Setup Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Install
+      run: npm ci
+    - name: Build
+      run: npm run build
+    - name: Upload build
+      uses: actions/upload-artifact@v2-preview
+      with:
+        name: build
+        path: dist/*
+
+  test:
+    name: Test (node-${{ matrix.node-version }}, py-${{ matrix.python-version }}, ${{ matrix.aw-server }} ${{ matrix.aw-version }})
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [16]
         python-version: ['3.9']
-        aw-version: ["v0.10.0"]
         aw-server: ["aw-server", "aw-server-rust"]
+        aw-version: ["v0.11.0"]
+        include:
+        - node-version: '16'
+          python-version: '3.9'
+          aw-server: "aw-server-rust"
+          aw-version: "master"
 
     steps:
     - uses: actions/checkout@v2
@@ -33,41 +67,74 @@ jobs:
       with:
         python-version: ${{ matrix.python-version }}
 
-    # Start aw-server, insert fake data
+    # TODO: Refactor out getting ActivityWatch builds (both release and nightly) into an action
     - name: Install and run ActivityWatch
+      if: ${{ matrix.aw-version != 'master' }}
       run: |
-        wget -O activitywatch.zip https://github.com/ActivityWatch/activitywatch/releases/download/${{ matrix.aw-version }}/activitywatch-${{ matrix.aw-version }}-linux-x86_64.zip
+        wget --no-verbose -O activitywatch.zip https://github.com/ActivityWatch/activitywatch/releases/download/${{ matrix.aw-version }}/activitywatch-${{ matrix.aw-version }}-linux-x86_64.zip
         unzip activitywatch.zip
+        ./.github/configure_server.sh
         ./activitywatch/${{ matrix.aw-server }}/${{ matrix.aw-server }} --testing &
+
+    - name: Download aw-server-rust nightly
+      if: ${{ matrix.aw-server == 'aw-server-rust' && matrix.aw-version == 'master' }}
+      uses: dawidd6/action-download-artifact@v2
+      with:
+        repo: ActivityWatch/aw-server-rust
+        # Required, workflow file name or ID
+        workflow: build.yml
+        # Optional, the status or conclusion of a completed workflow to search for
+        # Can be one of a workflow conclusion::
+        # "failure", "success", "neutral", "cancelled", "skipped", "timed_out", "action_required"
+        # Or a workflow status:
+        # "completed", "in_progress", "queued"
+        # Default: "completed,success"
+        workflow_conclusion: "completed"  # FIXME: Don't try to use builds that fail on Linux
+        branch: master
+        event: push
+        # Uploaded artifact name,
+        name: binaries-Linux  # NOTE: debug build
+        # Directory where to extract artifact
+        path: aw-server-rust
+
+    - name: Install and run aw-server-rust nightly
+      if: ${{ matrix.aw-server == 'aw-server-rust' && matrix.aw-version == 'master' }}
+      run: |
+        chmod +x ./aw-server-rust/debug/aw-server
+        ./aw-server-rust/debug/aw-server --testing &
+
     - name: Insert fake data into aw-server
       run: |
-        pip install git+https://github.com/ActivityWatch/aw-client.git
-        wget -O fakedata.py https://github.com/ActivityWatch/aw-fakedata/raw/ca6047e6e2cdc6aee13bc441f4fd3c9f0e36eda9/aw-fakedata.py
-        python3 fakedata.py
+        pip install click git+https://github.com/ActivityWatch/aw-client.git
+        wget --no-verbose -O fakedata.py https://raw.githubusercontent.com/ActivityWatch/aw-fakedata/master/aw_fakedata.py
+        GITDATE=$(git show -s --format=%ci HEAD | sed -r 's/ .+//g')
+        STARTDATE=$(date --date="${GITDATE} -30 day" +%Y-%m-%d)
+        python3 fakedata.py --since $STARTDATE --until $GITDATE
 
     - name: Install
       run: npm ci
-    - name: Build
-      run: npm run build
     - name: Run tests
       run: |
         npm test
         bash <(curl -s https://codecov.io/bash)
     - name: Serve webui
-      run: npm run serve &
+      run: |
+          npm run serve &
+          sleep 3  # give a few seconds
     - name: Run e2e tests with testcafe
       uses: DevExpress/testcafe-action@latest
       with:
-        args: "chrome test/e2e/"
-    - name: Upload build
-      uses: actions/upload-artifact@v2-preview
-      with:
-        name: build
-        path: dist/*
+        # NOTE: --skip-js-errors should be removed when things work properly
+        args: "--skip-js-errors chrome test/e2e/"
+    - name: Move screenshots to subdir
+      env:
+        aw_server: ${{ matrix.aw-server }}
+        aw_version: ${{ matrix.aw-version }}
+      run: |
+        mkdir -p screenshots/dist/$aw_server/$aw_version
+        mv screenshots/*.png screenshots/dist/$aw_server/$aw_version
     - name: Upload screenshots
       uses: actions/upload-artifact@v2-preview
       with:
         name: screenshots
-        path: screenshots/*
-
-
+        path: screenshots/dist/*

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 node_modules/
-dist/
+dist*/
 npm-debug.log
 selenium-debug.log
 test/unit/coverage
@@ -9,3 +9,5 @@ coverage
 *.swp
 __pycache__
 screenshots
+/modules
+.vscode

Makefile

@@ -27,7 +27,7 @@ test:
 	npm test
 
 test-e2e:
-	npx testcafe firefox test/e2e/
+	npx testcafe firefox test/e2e/ -s takeOnFails=true
 
 clean:
 	rm -rf node_modules dist

README.md

@@ -11,7 +11,7 @@ A web-based UI for ActivityWatch, built with Vue.js
 Getting started with setting up the development environment is pretty straight forward:
 
 ```bash
-# Start an instance of aw-server running in testing mode (on port 5666, with a separate database), 
+# Start an instance of aw-server running in testing mode (on port 5666, with a separate database),
 # This is what the web UI will connect to by default when run in development mode.
 aw-qt --testing
 # or, to run without watchers:
@@ -26,6 +26,8 @@ npm ci
 npm run serve
 ```
 
+Alternatively, you can run `make dev` to install dependencies and serve the application locally.
+
 You might have to configure CORS for it to work, see the CORS section below.
 
 You may also want to generate fake data so you have something to test with, see: https://github.com/ActivityWatch/aw-fakedata/
@@ -53,8 +55,23 @@ The assets are stored in the following directories (relative to your installatio
  - aw-server-python: `activitywatch/aw-server/aw_server/static/`
  - aw-server-rust: `activitywatch/aw-server-rust/static/`
 
+Either copy the assets manually, or run `make build` from the `aw-server` parent directory to rebuild and copy the assets for you.
+
 Once you've put the files in the directories, you may have to do a hard refresh in your browser to invalidate any stale caches.
 
+If you want to actively iterate on aw-webui with your local production data, you'll want to use a development build, automatically update it, and connect a aw-server running against production data. To do this, in one terminal window run:
+
+```bash
+AW_SERVER_URL="'http://localhost:5600'" npx vue-cli-service build --watch --dest=../aw_server/static
+```
+
+If you want to add `debugger` statements in your code and otherwise break linting rules, you'll need to add a `--skip-plugins=no-debugger` to that command. Then,  in another terminal (with your venv activated, assuming you are using python aw-server) run:
+
+```shell
+poetry install
+aw-server
+```
+
 ## Tests
 
 Tests can be run with:

babel.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   presets: ['@vue/cli-plugin-babel/preset'],
-  plugins: ['lodash', '@babel/plugin-syntax-dynamic-import'],
+  plugins: [
+    'lodash',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+  ],
   comments: false,
 };