Merge pull request #1064 from mikecao/dev

v1.29.0

.eslintrc.json

@@ -4,15 +4,14 @@
     "es2020": true,
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier", "next"],
+  "extends": ["eslint:recommended", "plugin:prettier/recommended", "next"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": 11,
     "sourceType": "module"
   },
-  "plugins": ["react"],
   "rules": {
     "react/display-name": "off",
     "react/react-in-jsx-scope": "off",

.github/workflows/cd.yml

@@ -0,0 +1,30 @@
+name: Create docker images
+
+on: [create]
+
+jobs:
+
+  build:
+    name: Build, push, and deploy
+    if: ${{ startsWith(github.ref, 'refs/tags/v') }}
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        db-type: [postgresql, mysql]
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Set env
+      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+
+    - uses: mr-smithers-excellent/docker-build-push@v5
+      name: Build & push Docker image for ${{ matrix.db-type }}
+      with:
+        image: umami
+        tags: ${{ matrix.db-type }}-${{ env.RELEASE_VERSION }}, ${{ matrix.db-type }}-latest
+        buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
+        registry: ghcr.io/${{ github.actor }}
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -0,0 +1,42 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, 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: Node.js CI
+
+on: [push]
+
+env:
+  DATABASE_TYPE: postgresql
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        include:
+        - node-version: 12.x
+          db-type: postgresql
+        - node-version: 12.x
+          db-type: mysql
+        - node-version: 14.x
+          db-type: postgresql
+        - node-version: 14.x
+          db-type: mysql
+        - node-version: 16.x
+          db-type: postgresql
+        - node-version: 16.x
+          db-type: mysql
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+      env:
+        DATABASE_TYPE: ${{ matrix.db-type }}
+    - run: npm install --global yarn
+    - run: yarn install --frozen-lockfile
+    - run: yarn build

README.md

@@ -102,6 +102,13 @@ npm install
 npm run build
 ```
 
+To update the Docker image, simply pull the new images and rebuild:
+
+```bash
+docker-compose pull
+docker-compose up --force-recreate
+```
+
 ## License
 
 MIT

components/metrics/MetricsTable.js

@@ -30,7 +30,7 @@ export default function MetricsTable({
   const {
     resolve,
     router,
-    query: { url },
+    query: { url, referrer },
   } = usePageQuery();
 
   const { data, loading, error } = useFetch(
@@ -41,12 +41,13 @@ export default function MetricsTable({
         start_at: +startDate,
         end_at: +endDate,
         url,
+        referrer,
       },
       onDataLoad,
       delay: DEFAULT_ANIMATION_DURATION,
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified],
+    [modified, url, referrer],
   );
 
   const filteredData = useMemo(() => {

components/metrics/ReferrersTable.js

@@ -19,7 +19,7 @@ export default function ReferrersTable({ websiteId, websiteDomain, showFilters,
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const {
     resolve,
-    query: { ref: currentRef },
+    query: { referrer: currentRef },
   } = usePageQuery();
 
   const buttons = [
@@ -37,7 +37,7 @@ export default function ReferrersTable({ websiteId, websiteDomain, showFilters,
   const renderLink = ({ w: link, x: label }) => {
     return (
       <div className={styles.row}>
-        <Link href={resolve({ ref: label })} replace={true}>
+        <Link href={resolve({ referrer: label })} replace={true}>
           <a
             className={classNames(styles.label, {
               [styles.inactive]: currentRef && label !== currentRef,

components/metrics/WebsiteChart.js

@@ -33,7 +33,7 @@ export default function WebsiteChart({
   const {
     router,
     resolve,
-    query: { url, ref },
+    query: { url, referrer },
   } = usePageQuery();
   const { get } = useApi();
 
@@ -46,12 +46,12 @@ export default function WebsiteChart({
         unit,
         tz: timezone,
         url,
-        ref,
+        referrer,
       },
       onDataLoad,
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified, url, ref],
+    [modified, url, referrer],
   );
 
   const chartData = useMemo(() => {
@@ -88,7 +88,7 @@ export default function WebsiteChart({
           stickyClassName={styles.sticky}
           enabled={stickyHeader}
         >
-          <FilterTags params={{ url, ref }} onClick={handleCloseFilter} />
+          <FilterTags params={{ url, referrer }} onClick={handleCloseFilter} />
           <div className="col-12 col-lg-9">
             <MetricsBar websiteId={websiteId} />
           </div>

components/settings/AccountSettings.js

@@ -37,17 +37,18 @@ export default function AccountSettings() {
     </Link>
   );
 
-  const Buttons = row =>
-    row.username !== 'admin' ? (
-      <ButtonLayout align="right">
-        <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
-          <FormattedMessage id="label.edit" defaultMessage="Edit" />
-        </Button>
+  const Buttons = row => (
+    <ButtonLayout align="right">
+      <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
+        <FormattedMessage id="label.edit" defaultMessage="Edit" />
+      </Button>
+      {!row.is_admin && (
         <Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
           <FormattedMessage id="label.delete" defaultMessage="Delete" />
         </Button>
-      </ButtonLayout>
-    ) : null;
+      )}
+    </ButtonLayout>
+  );
 
   const columns = [
     {

hooks/useCountryNames.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { get } from 'lib/web';
-import enUS from 'public/country/en-US.json';
+import enUS from 'public/intl/country/en-US.json';
 
 const countryNames = {
   'en-US': enUS,
@@ -12,7 +12,7 @@ export default function useCountryNames(locale) {
   const { basePath } = useRouter();
 
   async function loadData(locale) {
-    const { ok, data } = await get(`${basePath}/country/${locale}.json`);
+    const { ok, data } = await get(`${basePath}/intl/country/${locale}.json`);
 
     if (ok) {
       countryNames[locale] = data;

hooks/useLanguageNames.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { get } from 'lib/web';
-import enUS from 'public/language/en-US.json';
+import enUS from 'public/intl/language/en-US.json';
 
 const languageNames = {
   'en-US': enUS,
@@ -12,7 +12,7 @@ export default function useLanguageNames(locale) {
   const { basePath } = useRouter();
 
   async function loadData(locale) {
-    const { ok, data } = await get(`${basePath}/language/${locale}.json`);
+    const { ok, data } = await get(`${basePath}/intl/language/${locale}.json`);
 
     if (ok) {
       languageNames[locale] = data;

hooks/useLocale.js

@@ -5,7 +5,7 @@ import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
 import useForceUpdate from 'hooks/useForceUpdate';
-import enUS from 'public/messages/en-US.json';
+import enUS from 'public/intl/messages/en-US.json';
 
 const messages = {
   'en-US': enUS,
@@ -21,7 +21,7 @@ export default function useLocale() {
   const dateLocale = getDateLocale(locale);
 
   async function loadMessages(locale) {
-    const { ok, data } = await get(`${basePath}/messages/${locale}.json`);
+    const { ok, data } = await get(`${basePath}/intl/messages/${locale}.json`);
 
     if (ok) {
       messages[locale] = data;

lang/fr-FR.json

@@ -28,7 +28,7 @@
   "label.enable-share-url": "Activer le partage d'URL",
   "label.invalid": "Invalide",
   "label.invalid-domain": "Domaine invalide",
-  "label.language": "Language",
+  "label.language": "Langage",
   "label.last-days": "{x} derniers jours",
   "label.last-hours": "{x} dernières heures",
   "label.logged-in-as": "Connecté en tant que {username}",
@@ -51,7 +51,7 @@
   "label.settings": "Paramètres",
   "label.share-url": "Partager l'URL",
   "label.single-day": "Journée",
-  "label.theme": "Theme",
+  "label.theme": "Thème",
   "label.this-month": "Ce mois ci",
   "label.this-week": "Cette semaine",
   "label.this-year": "Cette année",