Improve sites page and add script adding instructions (#143)

* Improve sites page and add script adding instructions

* Fix the code highlighting issue in docs

* Fix eslint and typescript issues

* Fix eslint issues

backend/Dockerfile

@@ -2,6 +2,8 @@ FROM golang:1.19.4
 
 WORKDIR /usr/src/poeticmetric
 
+RUN CGO_ENABLED=0 go install -tags 'clickhouse,postgres' github.com/golang-migrate/migrate/v4/cmd/migrate@v4.15.2
+
 COPY go.mod go.sum ./
 RUN go mod download
 
@@ -23,7 +25,10 @@ WORKDIR /poeticmetric
 
 COPY assets assets
 COPY migrations migrations
+COPY scripts/migrate-clickhouse /usr/local/bin/migrate-clickhouse
+COPY scripts/migrate-postgres /usr/local/bin/migrate-postgres
 
+COPY --from=0 /go/bin/migrate /usr/local/bin/migrate
 COPY --from=0 /usr/src/poeticmetric/bin/migrator /usr/local/bin/poeticmetric-migrator
 COPY --from=0 /usr/src/poeticmetric/bin/rest-api /usr/local/bin/poeticmetric-rest-api
 COPY --from=0 /usr/src/poeticmetric/bin/scheduler /usr/local/bin/poeticmetric-scheduler

backend/development.Dockerfile

@@ -4,6 +4,8 @@ RUN apt update && apt install -y postgresql-client
 
 WORKDIR /poeticmetric
 
+RUN CGO_ENABLED=0 go install -tags 'clickhouse,postgres' github.com/golang-migrate/migrate/v4/cmd/migrate@v4.15.2
+
 RUN go install github.com/cespare/reflex@latest
 RUN go install github.com/go-delve/delve/cmd/dlv@latest
 
@@ -15,6 +17,8 @@ COPY cmd cmd
 COPY migrations migrations
 COPY pkg pkg
 
+COPY scripts/migrate-clickhouse /usr/local/bin/
+COPY scripts/migrate-postgres /usr/local/bin/
 COPY scripts/run-tests /usr/local/bin/
 COPY scripts/wait-for-it /usr/local/bin/
 COPY docker-entrypoint.development.sh /usr/local/bin/docker-entrypoint.sh

backend/migrations/postgres/000001_create_tables.up.sql

@@ -77,6 +77,7 @@ CREATE INDEX "idx_user_access_tokens_user_id" ON "user_access_tokens" ("user_id"
 CREATE TABLE "sites" (
   "created_at" timestamptz NOT NULL,
   "domain" text UNIQUE,
+  "has_events" boolean NOT NULL,
   "id" bigserial,
   "is_public" boolean NOT NULL,
   "name" text,

backend/pkg/model/event.go

@@ -4,7 +4,6 @@ import (
 	"crypto/sha256"
 	"encoding/hex"
 	"fmt"
-	"log"
 	url2 "net/url"
 	"time"
 
@@ -99,7 +98,6 @@ func (e *Event) FillFromUrl(url string, safeQueryParameters []string) {
 	q := u.Query()
 
 	for k := range u.Query() {
-		log.Println(safeQueryParametersMap[k])
 		if !safeQueryParametersMap[k] {
 			q.Del(k)
 		}

backend/pkg/model/site.go

@@ -9,6 +9,7 @@ import (
 type Site struct {
 	CreatedAt           time.Time
 	Domain              string
+	HasEvents           bool
 	Id                  uint64
 	IsPublic            bool
 	Name                string

backend/pkg/service/bootstrap/create_site.go

@@ -21,6 +21,7 @@ const eventsInBatch = 100
 func createSite(dp *depot.Depot) error {
 	modelSite := &model.Site{
 		Domain:              "demo.yoursite.tld",
+		HasEvents:           true,
 		Id:                  1,
 		IsPublic:            false,
 		Name:                "Demo Site",

backend/pkg/service/event/create.go

@@ -36,6 +36,7 @@ func Create(dp *depot.Depot, payload *CreatePayload) error {
 	err = dp.Postgres().
 		Model(&model.Site{}).
 		Select(
+			"has_events",
 			"id",
 			"safe_query_parameters",
 		).
@@ -75,6 +76,17 @@ func Create(dp *depot.Depot, payload *CreatePayload) error {
 		return err
 	}
 
+	if !modelSite.HasEvents {
+		err = dp.Postgres().
+			Model(&model.Site{}).
+			Where("id = ?", modelSite.Id).
+			Update("has_events", true).
+			Error
+		if err != nil {
+			return err
+		}
+	}
+
 	return nil
 }
 

backend/pkg/service/site/delete.go

@@ -15,11 +15,19 @@ func Delete(dp *depot.Depot, id uint64) error {
 	}
 
 	err = dp.ClickHouse().
+		Exec("optimize table events_buffer").
+		Error
+	if err != nil {
+		return err
+	}
+
+	err = dp.ClickHouse().
+		Table("events").
 		Where("site_id = ?", id).
-		Delete(&model.Event{}).
+		Delete(nil).
 		Error
 	if err != nil {
-		// TODO: handle error
+		return err
 	}
 
 	return nil

backend/pkg/service/site/site.go

@@ -9,6 +9,7 @@ import (
 type Site struct {
 	CreatedAt           time.Time      `json:"createdAt"`
 	Domain              string         `json:"domain"`
+	HasEvents           bool           `json:"hasEvents"`
 	Id                  uint64         `json:"id"`
 	IsPublic            bool           `json:"isPublic"`
 	Name                string         `json:"name"`

backend/pkg/service/sitereport/browsername/main.go

@@ -1,8 +1,6 @@
 package browsername
 
 import (
-	"log"
-
 	"github.com/poeticmetric/poeticmetric/backend/pkg/depot"
 	"github.com/poeticmetric/poeticmetric/backend/pkg/service/sitereport/filter"
 	"github.com/poeticmetric/poeticmetric/backend/pkg/service/sitereport/pagination"
@@ -26,8 +24,6 @@ type Report struct {
 }
 
 func Get(dp *depot.Depot, filters *filter.Filters, paginationCursor *PaginationCursor) (*Report, error) {
-	log.Println(paginationCursor)
-
 	report := &Report{}
 
 	baseQuery := filter.Apply(dp, filters).

backend/scripts/migrate-clickhouse

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+set -eo pipefail
+
+exec migrate \
+  -database "clickhouse://${CLICKHOUSE_HOST}:${CLICKHOUSE_TCP_PORT}?username=${CLICKHOUSE_USER}&password=${CLICKHOUSE_PASSWORD}&database=${CLICKHOUSE_DATABASE}&x-multi-statement=true" \
+  -source "file:///poeticmetric/migrations/clickhouse" \
+  "$@"

backend/scripts/migrate-postgres

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+set -eo pipefail
+
+exec migrate \
+  -database "postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DATABASE}?sslmode=disable" \
+  -source "file:///poeticmetric/migrations/postgres" \
+  "$@"

frontend/@types/site.d.ts

@@ -1,6 +1,7 @@
 type Site = {
   createdAt: string;
   domain: string;
+  hasEvents: boolean;
   id: number;
   isPublic: boolean;
   name: string;

frontend/components/Billing/index.tsx

@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import React, { useContext, useMemo, useState } from "react";
 import { Container } from "react-bootstrap";
 import { Breadcrumb, Layout, Plans, Title } from "..";
-import { AuthAndApiContext, PlansContext, PlansContextValue, PlansContextState } from "../../contexts";
+import { AuthAndApiContext, PlansContext, PlansContextState, PlansContextValue } from "../../contexts";
 import { BillingPortalButton } from "./BillingPortalButton";
 
 export function Billing() {

frontend/components/Empty/index.tsx

@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import React from "react";
+
+export type EmptyProps = Overwrite<Omit<React.PropsWithoutRef<JSX.IntrinsicElements["div"]>, "children">, {
+  description: React.ReactNode;
+  title: React.ReactNode;
+}>;
+
+export function Empty({ className, description, title, ...props }: EmptyProps) {
+  return (
+    <div
+      {...props}
+      className={classNames("align-items-center d-flex flex-column flex-grow-1 justify-content-center text-center", className)}
+    >
+      <span className="bi-folder2-open bis-5rem small text-primary" />
+
+      <h3>{title}</h3>
+
+      <div className="fs-5 fw-medium text-muted">{description}</div>
+    </div>
+  );
+}

frontend/components/Markdown/index.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+import classNames from "classnames";
+import hljs from "highlight.js";
 import BaseMarkdown from "markdown-to-jsx";
+import React, { useEffect, useRef } from "react";
 import styles from "./Markdown.module.scss";
 
 export type MarkdownProps = {
@@ -8,7 +10,25 @@ export type MarkdownProps = {
 };
 
 export function Markdown({ className, ...props }: MarkdownProps) {
+  const div = useRef<HTMLDivElement>(null);
+  const previousChildren = useRef<string>("");
+
+  useEffect(() => {
+    if (div.current !== null && props.children !== previousChildren.current) {
+      div.current.querySelectorAll<HTMLElement>("pre code").forEach((e) => hljs.highlightElement(e));
+
+      previousChildren.current = props.children;
+    }
+  }, [props.children]);
+
   return (
-    <BaseMarkdown {...props} className={`${styles.markdown} ${className}`} />
+    <div className={classNames(styles.markdown, className)} ref={div}>
+      <BaseMarkdown
+        {...props}
+        options={{
+          wrapper: React.Fragment,
+        }}
+      />
+    </div>
   );
 }

frontend/components/SiteForm/index.tsx

@@ -38,11 +38,11 @@ export function SiteForm() {
 
     if (response.ok) {
       addToast({
-        body: id === undefined ? "Site is created." : "Site is updated.",
+        body: id === undefined ? "Site is created. Please add the PoeticMetric tracking script to your site." : "Site is updated.",
         variant: "success",
       });
 
-      await router.push("/sites");
+      await router.push(id === undefined ? `/sites/reports?id=${responseJson.id}` : "/sites");
     } else {
       setErrors(responseJson);
     }

frontend/components/SiteReports/index.tsx

@@ -64,20 +64,4 @@ export function SiteReports({ site }: SiteReportsProps) {
       </Row>
     </FiltersHandler>
   );
-
-  // return (
-  //   <Layout kind="app">
-  //     <Title>{site === undefined ? "..." : `Reports - ${site.name}`}</Title>
-  //
-  //     <Container className="d-flex flex-column flex-grow-1 py-4">
-  //       {site === undefined ? (
-  //         <div className="d-flex flex-grow-1 align-items-center justify-content-center">
-  //           <Spinner variant="primary" />
-  //         </div>
-  //       ) : (
-  //
-  //       )}
-  //     </Container>
-  //   </Layout>
-  // );
 }

frontend/components/Sites/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { Col, Container, Row, Spinner } from "react-bootstrap";
-import { Layout, Title } from "..";
+import { Empty, Layout, Title } from "..";
 import { useSites } from "../../hooks";
 import { DeleteModal } from "./DeleteModal";
 import { Header } from "./Header";
@@ -16,6 +16,15 @@ export function Sites() {
       );
     }
 
+    if (sites.length === 0) {
+      return (
+        <Empty
+          description="Please add a site to start tracking its traffic."
+          title="You don't have any sites yet."
+        />
+      );
+    }
+
     return (
       <Row md={2} xl={3} xs={1}>
         {sites.map((s) => (

frontend/components/SyntaxHighlighter/index.tsx

@@ -0,0 +1,25 @@
+import hljs from "highlight.js";
+import React, { useEffect, useRef } from "react";
+
+export type SyntaxHighlighterProps = Overwrite<Omit<React.PropsWithoutRef<JSX.IntrinsicElements["pre"]>, "children">, {
+  code: string;
+}>;
+
+export function SyntaxHighlighter({ code, ...props }: SyntaxHighlighterProps) {
+  const previousCode = useRef<string>("");
+  const codeRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (codeRef.current !== null && code !== previousCode.current) {
+      hljs.highlightElement(codeRef.current);
+
+      previousCode.current = code;
+    }
+  }, [code]);
+
+  return (
+    <pre {...props}>
+      <code className="text-break text-wrap" ref={codeRef}>{code}</code>
+    </pre>
+  );
+}

frontend/components/index.ts

@@ -11,6 +11,7 @@ export * from "./ChartTooltip";
 export * from "./Description";
 export * from "./DocsArticle";
 export * from "./EmailAddressVerification";
+export * from "./Empty";
 export * from "./FavIcon";
 export * from "./Home";
 export * from "./Layout";
@@ -35,6 +36,7 @@ export * from "./SiteForm";
 export * from "./SiteReports";
 export * from "./Sites";
 export * from "./SwrConfig";
+export * from "./SyntaxHighlighter";
 export * from "./Team";
 export * from "./TeamMemberForm";
 export * from "./TermsOfService";

frontend/docs/websites/2_adding-the-script-to-your-website.md

@@ -4,8 +4,8 @@ title: Adding the script to your website
 
 To start tracking your website's traffic, you need to update the HTML code of your website and add the PoeticMetric tracking script code to the header section. Put the script between the `<head>` and `</head>` tags.
 
-<div class="alert alert-primary align-items-center d-flex flex-row">
-    <span class="bi bi-lightbulb flex-shrink-0 me-3" />
+<div className="alert alert-primary align-items-center d-flex flex-row">
+    <span className="bi bi-lightbulb flex-shrink-0 me-3" />
 
     If you are not the person managing the website's code, and there is someone else who deals with it, you can share the link to this page.
 </div>

frontend/package.json

@@ -17,6 +17,7 @@
     "bootstrap-icons": "^1.9.1",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
+    "copy-to-clipboard": "^3.3.3",
     "cross-env": "^7.0.3",
     "d3-array": "^3.2.0",
     "d3-scale": "^4.0.2",

frontend/pages/_app.tsx

@@ -6,7 +6,6 @@ import localeData from "dayjs/plugin/localeData";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 import updateLocale from "dayjs/plugin/updateLocale";
-import hljs from "highlight.js";
 import "highlight.js/styles/stackoverflow-light.css";
 import { AppProps } from "next/app";
 import React, { useEffect } from "react";
@@ -27,12 +26,6 @@ export default function App({ Component, pageProps }: AppProps) {
     registerLocale("en-GB", enGb);
   }, []);
 
-  useEffect(() => {
-    if (document.querySelectorAll("pre").length > 0) {
-      hljs.highlightAll();
-    }
-  });
-
   return (
     <SwrConfig>
       <AuthAndApiHandler>

frontend/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
 import Script from "next/script";
 import React from "react";