mirror of
https://github.com/umami-software/umami.git
synced 2026-02-08 22:57:12 +01:00
Dev (#1702)
* Initial Typescript models. * Re-add realtime data * get distinct sessions for session metrics * Add queries for new schema. * Fix Typo. * Add some api/team endpoints. * Fix destructure error. * Fix getWebsites call. * Ignore typescript build errors. * Fix enum issue. * add clickhouse route to deleteWebsite * Fix Website auth. * Updated lint-staged config. * Add permission checks. * Add user role api. * Fix error when updating website. * Fix isAdmin check. Fix Schema. * Initial conversion to react-basics. * Remove user/team transfer from website update. * delete website in relational query * Fix login secure token creation. * Add event type to event. * Allow user to be added to team with role. * Updated login form. * Add Role to TeamUser. * Add database migration. * Refactored permissions check. Updated redis lib. * Feat/um 114 roles and permissions (#1683) * Auth checkpoint. * Merge branch 'dev' into feat/um-114-roles-and-permissions * Add 02 migration. * Added lib/types. * Updated schema. * Updated roles and permissions logic. * Implement react-basics styles. Fix queries. * Update website details layout. * Add 01 migration. * Fix admin create. * Update react-basics. Co-authored-by: Francis Cao <franciscao@gmail.com> Co-authored-by: Mike Cao <mike@mikecao.com> Co-authored-by: Mike Cao <moocao@gmail.com>
This commit is contained in:
Brian Cao
GitHub
parent
94848cc41b
commit
8732d056dd
165 changed files with 3370 additions and 6268 deletions
|
|
@ -2,9 +2,9 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-normal);
|
||||
color: var(--gray900);
|
||||
background: var(--gray100);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--base900);
|
||||
background: var(--base100);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
}
|
||||
|
||||
.button:hover {
|
||||
background: var(--gray200);
|
||||
background: var(--base200);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
color: var(--gray900);
|
||||
color: var(--base900);
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -29,30 +29,30 @@
|
|||
}
|
||||
|
||||
.large {
|
||||
font-size: var(--font-size-large);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.xsmall {
|
||||
font-size: var(--font-size-xsmall);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.action,
|
||||
.action:active {
|
||||
color: var(--gray50);
|
||||
background: var(--gray900);
|
||||
color: var(--base50);
|
||||
background: var(--base900);
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
background: var(--gray800);
|
||||
background: var(--base800);
|
||||
}
|
||||
|
||||
.danger,
|
||||
.danger:active {
|
||||
color: var(--gray50);
|
||||
color: var(--base50);
|
||||
background: var(--red500);
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
.light,
|
||||
.light:active {
|
||||
color: var(--gray900);
|
||||
color: var(--base900);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -85,18 +85,18 @@
|
|||
|
||||
.button:disabled {
|
||||
cursor: default;
|
||||
color: var(--gray500);
|
||||
background: var(--gray75);
|
||||
color: var(--base500);
|
||||
background: var(--base75);
|
||||
}
|
||||
|
||||
.button:disabled:active {
|
||||
color: var(--gray500);
|
||||
color: var(--base500);
|
||||
}
|
||||
|
||||
.button:disabled:hover {
|
||||
background: var(--gray75);
|
||||
background: var(--base75);
|
||||
}
|
||||
|
||||
.button.light:disabled {
|
||||
background: var(--gray50);
|
||||
background: var(--base50);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gray500);
|
||||
border: 1px solid var(--base500);
|
||||
}
|
||||
|
||||
.group .button {
|
||||
border-radius: 0;
|
||||
color: var(--gray800);
|
||||
background: var(--gray50);
|
||||
border-left: 1px solid var(--gray500);
|
||||
color: var(--base800);
|
||||
background: var(--base50);
|
||||
border-left: 1px solid var(--base500);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
.group .button:hover {
|
||||
background: var(--gray100);
|
||||
background: var(--base100);
|
||||
}
|
||||
|
||||
.group .button + .button {
|
||||
|
|
@ -26,6 +26,6 @@
|
|||
}
|
||||
|
||||
.group .button.selected {
|
||||
color: var(--gray900);
|
||||
color: var(--base900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
flex: 1;
|
||||
min-height: 306px;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.calendar td {
|
||||
color: var(--gray800);
|
||||
color: var(--base800);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
|
|
@ -23,17 +23,17 @@
|
|||
}
|
||||
|
||||
.calendar td:hover {
|
||||
border: 1px solid var(--gray300);
|
||||
background: var(--gray75);
|
||||
border: 1px solid var(--base300);
|
||||
background: var(--base75);
|
||||
}
|
||||
|
||||
.calendar td.faded {
|
||||
color: var(--gray500);
|
||||
color: var(--base500);
|
||||
}
|
||||
|
||||
.calendar td.selected {
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--gray600);
|
||||
border: 1px solid var(--base600);
|
||||
}
|
||||
|
||||
.calendar td.selected:hover {
|
||||
|
|
@ -41,18 +41,18 @@
|
|||
}
|
||||
|
||||
.calendar td.disabled {
|
||||
color: var(--gray400);
|
||||
background: var(--gray75);
|
||||
color: var(--base400);
|
||||
background: var(--base75);
|
||||
}
|
||||
|
||||
.calendar td.disabled:hover {
|
||||
cursor: default;
|
||||
background: var(--gray75);
|
||||
background: var(--base75);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.calendar td.faded.disabled {
|
||||
background: var(--gray100);
|
||||
background: var(--base100);
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
align-items: center;
|
||||
font-weight: 700;
|
||||
line-height: 40px;
|
||||
font-size: var(--font-size-normal);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.body {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--gray500);
|
||||
border: 1px solid var(--base500);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.wrapper {
|
||||
background: var(--gray50);
|
||||
background: var(--base50);
|
||||
margin-right: 10px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid var(--gray500);
|
||||
border: 1px solid var(--base500);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
padding: 4px 16px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
margin: auto;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
background-color: var(--gray50);
|
||||
background-color: var(--base50);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
}
|
||||
|
||||
.row .inactive {
|
||||
color: var(--gray500);
|
||||
color: var(--base500);
|
||||
}
|
||||
|
||||
.row .active {
|
||||
color: var(--gray900);
|
||||
color: var(--base900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ a.link,
|
|||
a.link:active,
|
||||
a.link:visited {
|
||||
position: relative;
|
||||
color: var(--gray900);
|
||||
color: var(--base900);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -17,15 +17,15 @@ a.link:hover span {
|
|||
}
|
||||
|
||||
a.link.large {
|
||||
font-size: var(--font-size-large);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
a.link.small {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
a.link.xsmall {
|
||||
font-size: var(--font-size-xsmall);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
a.link .icon + * {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
background: var(--gray400);
|
||||
background: var(--base400);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
|
@ -33,13 +33,13 @@
|
|||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
background: var(--gray400);
|
||||
background: var(--base400);
|
||||
animation: blink 1.4s infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.loading.overlay div {
|
||||
background: var(--gray900);
|
||||
background: var(--base900);
|
||||
}
|
||||
|
||||
.loading div + div {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
.menu {
|
||||
background: var(--gray50);
|
||||
border: 1px solid var(--gray500);
|
||||
background: var(--base50);
|
||||
border: 1px solid var(--base500);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.option {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: normal;
|
||||
background: var(--gray50);
|
||||
background: var(--base50);
|
||||
padding: 4px 16px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: var(--gray100);
|
||||
background: var(--base100);
|
||||
}
|
||||
|
||||
.float {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
.divider {
|
||||
border-top: 1px solid var(--gray300);
|
||||
border-top: 1px solid var(--base300);
|
||||
}
|
||||
|
||||
.selected {
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
}
|
||||
|
||||
.text {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.open,
|
||||
.open:hover {
|
||||
background: var(--gray50);
|
||||
border: 1px solid var(--gray500);
|
||||
background: var(--base50);
|
||||
border: 1px solid var(--base500);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--gray50);
|
||||
background-color: var(--base50);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
.item {
|
||||
font-size: var(--font-size-large);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.item + .item {
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--gray50);
|
||||
background: var(--base50);
|
||||
min-width: 400px;
|
||||
min-height: 100px;
|
||||
max-width: 100vw;
|
||||
z-index: 1;
|
||||
border: 1px solid var(--gray300);
|
||||
border: 1px solid var(--base300);
|
||||
padding: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.menu {
|
||||
color: var(--gray800);
|
||||
border: 1px solid var(--gray500);
|
||||
color: var(--base800);
|
||||
border: 1px solid var(--base500);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
|
|
@ -13,10 +13,10 @@
|
|||
}
|
||||
|
||||
.option:hover {
|
||||
background: var(--gray75);
|
||||
background: var(--base75);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--gray900);
|
||||
color: var(--base900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.container {
|
||||
color: var(--gray500);
|
||||
font-size: var(--font-size-normal);
|
||||
color: var(--base500);
|
||||
font-size: var(--font-size-md);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@
|
|||
|
||||
.table label {
|
||||
display: none;
|
||||
font-size: var(--font-size-xsmall);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
border-bottom: 1px solid var(--base300);
|
||||
}
|
||||
|
||||
.head {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
.row {
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
border-bottom: 1px solid var(--base300);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.tag {
|
||||
padding: 2px 4px;
|
||||
border: 1px solid var(--gray300);
|
||||
border: 1px solid var(--base300);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.message {
|
||||
font-size: var(--font-size-normal);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.close {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.message {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
|
|
|||
2
components/declarations.d.ts
vendored
Normal file
2
components/declarations.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
declare module '*.css';
|
||||
declare module '*.svg';
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
.calendars > div + div {
|
||||
margin-left: 20px;
|
||||
padding-left: 20px;
|
||||
border-left: 1px solid var(--gray300);
|
||||
border-left: 1px solid var(--base300);
|
||||
}
|
||||
|
||||
.filter {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
.form {
|
||||
border-right: 1px solid var(--gray300);
|
||||
border-right: 1px solid var(--base300);
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.filters + .filters {
|
||||
border-top: 1px solid var(--gray300);
|
||||
border-top: 1px solid var(--base300);
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
|
|
|
|||
63
components/forms/Form.module.css
Normal file
63
components/forms/Form.module.css
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
width: 600px;
|
||||
margin: 0 auto 30px;
|
||||
background: var(--base50);
|
||||
padding: 16px;
|
||||
color: var(--red400);
|
||||
border: 1px solid var(--red400);
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success {
|
||||
width: 600px;
|
||||
margin: 60px auto;
|
||||
background: var(--base50);
|
||||
padding: 16px;
|
||||
color: var(--green400);
|
||||
border: 1px solid var(--green400);
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,113 +1,57 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { Formik, Form, Field } from 'formik';
|
||||
import { setItem } from 'next-basics';
|
||||
import { useRouter } from 'next/router';
|
||||
import Button from 'components/common/Button';
|
||||
import FormLayout, {
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import {
|
||||
Form,
|
||||
FormInput,
|
||||
FormButtons,
|
||||
FormError,
|
||||
FormMessage,
|
||||
FormRow,
|
||||
} from 'components/layout/FormLayout';
|
||||
import Icon from 'components/common/Icon';
|
||||
import useApi from 'hooks/useApi';
|
||||
import { AUTH_TOKEN } from 'lib/constants';
|
||||
TextField,
|
||||
PasswordField,
|
||||
SubmitButton,
|
||||
Icon,
|
||||
} from 'react-basics';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useApi } from 'next-basics';
|
||||
import { setUser } from 'store/app';
|
||||
import { setAuthToken } from 'lib/client';
|
||||
import Logo from 'assets/logo.svg';
|
||||
import styles from './LoginForm.module.css';
|
||||
|
||||
const validate = ({ username, password }) => {
|
||||
const errors = {};
|
||||
|
||||
if (!username) {
|
||||
errors.username = <FormattedMessage id="label.required" defaultMessage="Required" />;
|
||||
}
|
||||
if (!password) {
|
||||
errors.password = <FormattedMessage id="label.required" defaultMessage="Required" />;
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
import styles from './Form.module.css';
|
||||
|
||||
export default function LoginForm() {
|
||||
const { post } = useApi();
|
||||
const router = useRouter();
|
||||
const [message, setMessage] = useState();
|
||||
const { post } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(data => post('/auth/login', data));
|
||||
|
||||
const handleSubmit = async ({ username, password }) => {
|
||||
const { ok, status, data } = await post('/auth/login', {
|
||||
username,
|
||||
password,
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async ({ token, user }) => {
|
||||
setAuthToken(token);
|
||||
setUser(user);
|
||||
|
||||
await router.push('/websites');
|
||||
},
|
||||
});
|
||||
|
||||
if (ok) {
|
||||
const { user, token } = data;
|
||||
|
||||
setItem(AUTH_TOKEN, token);
|
||||
|
||||
setUser(user);
|
||||
|
||||
await router.push('/');
|
||||
|
||||
return null;
|
||||
} else {
|
||||
setMessage(
|
||||
status === 401 ? (
|
||||
<FormattedMessage
|
||||
id="message.incorrect-username-password"
|
||||
defaultMessage="Incorrect username/password."
|
||||
/>
|
||||
) : (
|
||||
data
|
||||
),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FormLayout className={styles.login}>
|
||||
<Formik
|
||||
initialValues={{
|
||||
username: '',
|
||||
password: '',
|
||||
}}
|
||||
validate={validate}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{() => (
|
||||
<Form>
|
||||
<div className={styles.header}>
|
||||
<Icon icon={<Logo />} size="xlarge" className={styles.icon} />
|
||||
<h1 className="center">umami</h1>
|
||||
</div>
|
||||
<FormRow>
|
||||
<label htmlFor="username">
|
||||
<FormattedMessage id="label.username" defaultMessage="Username" />
|
||||
</label>
|
||||
<div>
|
||||
<Field name="username" type="text" />
|
||||
<FormError name="username" />
|
||||
</div>
|
||||
</FormRow>
|
||||
<FormRow>
|
||||
<label htmlFor="password">
|
||||
<FormattedMessage id="label.password" defaultMessage="Password" />
|
||||
</label>
|
||||
<div>
|
||||
<Field name="password" type="password" />
|
||||
<FormError name="password" />
|
||||
</div>
|
||||
</FormRow>
|
||||
<FormButtons>
|
||||
<Button type="submit" variant="action">
|
||||
<FormattedMessage id="label.login" defaultMessage="Login" />
|
||||
</Button>
|
||||
</FormButtons>
|
||||
<FormMessage>{message}</FormMessage>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</FormLayout>
|
||||
<>
|
||||
<div className={styles.header}>
|
||||
<Icon size="xl">
|
||||
<Logo />
|
||||
</Icon>
|
||||
<p>umami</p>
|
||||
</div>
|
||||
<Form className={styles.form} onSubmit={handleSubmit} error={error}>
|
||||
<FormInput name="username" label="Username" rules={{ required: 'Required' }}>
|
||||
<TextField autoComplete="off" />
|
||||
</FormInput>
|
||||
<FormInput name="password" label="Password" rules={{ required: 'Required' }}>
|
||||
<PasswordField />
|
||||
</FormInput>
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
|
||||
Log in
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
.msg {
|
||||
color: var(--msgColor);
|
||||
background: var(--red400);
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
|
|
@ -78,8 +78,8 @@
|
|||
margin: 20px 0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
color: var(--gray50);
|
||||
background: var(--gray800);
|
||||
color: var(--base50);
|
||||
background: var(--base800);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
}
|
||||
|
||||
.row {
|
||||
border-top: 1px solid var(--gray300);
|
||||
border-top: 1px solid var(--base300);
|
||||
min-height: 430px;
|
||||
}
|
||||
|
||||
.row > .col {
|
||||
border-left: 1px solid var(--gray300);
|
||||
border-left: 1px solid var(--base300);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
.row > .col {
|
||||
border-top: 1px solid var(--gray300);
|
||||
border-top: 1px solid var(--base300);
|
||||
border-left: 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
|
|
|||
18
components/layout/GridRow.js
Normal file
18
components/layout/GridRow.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { Row, cloneChildren } from 'react-basics';
|
||||
import styles from './GridRow.module.css';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default function GridRow(props) {
|
||||
const { children, className, ...rowProps } = props;
|
||||
return (
|
||||
<Row {...rowProps} className={className}>
|
||||
{breakpoint =>
|
||||
cloneChildren(children, () => {
|
||||
return {
|
||||
className: classNames(styles.column, styles[breakpoint]),
|
||||
};
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
21
components/layout/GridRow.module.css
Normal file
21
components/layout/GridRow.module.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.column {
|
||||
padding: 20px;
|
||||
border-top: 1px solid var(--base200);
|
||||
border-left: 1px solid var(--base200);
|
||||
}
|
||||
|
||||
.column:first-child {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.column:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.column.xs,
|
||||
.column.sm,
|
||||
.column.md {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { Row, Column } from 'react-basics';
|
||||
import { useRouter } from 'next/router';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import Link from 'components/common/Link';
|
||||
import Icon from 'components/common/Icon';
|
||||
import LanguageButton from 'components/settings/LanguageButton';
|
||||
|
|
@ -25,31 +25,33 @@ export default function Header() {
|
|||
return (
|
||||
<>
|
||||
{allowUpdate && <UpdateNotice />}
|
||||
<header className={classNames(styles.header, 'row')}>
|
||||
<div className={styles.title}>
|
||||
<Icon icon={<Logo />} size="large" className={styles.logo} />
|
||||
<Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
|
||||
</div>
|
||||
<HamburgerButton />
|
||||
{user && !adminDisabled && (
|
||||
<div className={styles.links}>
|
||||
<Link href="/dashboard">
|
||||
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
|
||||
</Link>
|
||||
<Link href="/realtime">
|
||||
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
|
||||
</Link>
|
||||
<Link href="/settings">
|
||||
<FormattedMessage id="label.settings" defaultMessage="Settings" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.buttons}>
|
||||
<ThemeButton />
|
||||
<LanguageButton menuAlign="right" />
|
||||
<SettingsButton />
|
||||
{user && !adminDisabled && <UserButton />}
|
||||
</div>
|
||||
<header className={styles.header}>
|
||||
<Row>
|
||||
<Column className={styles.title}>
|
||||
<Icon icon={<Logo />} size="large" className={styles.logo} />
|
||||
<Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
|
||||
</Column>
|
||||
<HamburgerButton />
|
||||
{user && !adminDisabled && (
|
||||
<div className={styles.links}>
|
||||
<Link href="/dashboard">
|
||||
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
|
||||
</Link>
|
||||
<Link href="/realtime">
|
||||
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
|
||||
</Link>
|
||||
<Link href="/settings">
|
||||
<FormattedMessage id="label.settings" defaultMessage="Settings" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<Column className={styles.buttons}>
|
||||
<ThemeButton />
|
||||
<LanguageButton menuAlign="right" />
|
||||
<SettingsButton />
|
||||
{user && !adminDisabled && <UserButton />}
|
||||
</Column>
|
||||
</Row>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
|
||||
.title {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-large);
|
||||
font-size: var(--font-size-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.4;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-normal);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
.buttons {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,32 @@
|
|||
import React from 'react';
|
||||
import { Container } from 'react-basics';
|
||||
import Head from 'next/head';
|
||||
import Header from 'components/layout/Header';
|
||||
import Footer from 'components/layout/Footer';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
export default function Layout({ title, children, header = true, footer = true }) {
|
||||
const { dir } = useLocale();
|
||||
const { basePath } = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container dir={dir} style={{ maxWidth: 1140 }}>
|
||||
<Head>
|
||||
<title>umami{title && ` - ${title}`}</title>
|
||||
<title>{title ? `${title} | umami` : 'umami'}</title>
|
||||
<link rel="icon" href={`${basePath}/favicon.ico`} />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
|
||||
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
|
||||
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
|
||||
<meta name="msapplication-TileColor" content="#da532c" />
|
||||
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
|
||||
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
|
||||
{header && <Header />}
|
||||
<main>{children}</main>
|
||||
{footer && <Footer />}
|
||||
<div id="__modals" dir={dir} />
|
||||
</>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
.container .content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border-left: 1px solid var(--gray300);
|
||||
border-left: 1px solid var(--base300);
|
||||
padding-left: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.container .content {
|
||||
border-top: 1px solid var(--gray300);
|
||||
border-top: 1px solid var(--base300);
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -3,5 +3,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30px;
|
||||
background: var(--gray50);
|
||||
background: var(--base50);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.text {
|
||||
display: flex;
|
||||
font-size: var(--font-size-normal);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.value {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-xsmall);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
margin-right: 8px;
|
||||
background: var(--gray50);
|
||||
background: var(--base50);
|
||||
}
|
||||
|
||||
.color {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.table {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
display: grid;
|
||||
grid-template-rows: fit-content(100%) auto;
|
||||
overflow: hidden;
|
||||
|
|
@ -23,11 +23,11 @@
|
|||
.title {
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-normal);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.metric {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
|
|
@ -80,8 +80,8 @@
|
|||
.percent {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
color: var(--gray600);
|
||||
border-left: 1px solid var(--gray600);
|
||||
color: var(--base600);
|
||||
border-left: 1px solid var(--base600);
|
||||
padding-left: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-xsmall);
|
||||
font-size: var(--font-size-xs);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -17,5 +17,5 @@
|
|||
}
|
||||
|
||||
.hidden {
|
||||
color: var(--gray400);
|
||||
color: var(--base400);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.value {
|
||||
font-size: var(--font-size-xlarge);
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: 40px;
|
||||
min-height: 40px;
|
||||
font-weight: 600;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
font-size: var(--font-size-normal);
|
||||
font-size: var(--font-size-md);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
padding: 0 5px;
|
||||
border-radius: 5px;
|
||||
margin-left: 4px;
|
||||
border: 1px solid var(--gray200);
|
||||
color: var(--gray500);
|
||||
border: 1px solid var(--base200);
|
||||
color: var(--base500);
|
||||
}
|
||||
|
||||
.change.positive {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
position: relative;
|
||||
min-height: 430px;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.table {
|
||||
font-size: var(--font-size-xsmall);
|
||||
font-size: var(--font-size-xs);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
border-bottom: 1px solid var(--base300);
|
||||
}
|
||||
|
||||
.body {
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.row .link {
|
||||
color: var(--gray900);
|
||||
color: var(--base900);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useMemo } from 'react';
|
||||
import { Row, Column } from 'react-basics';
|
||||
import PageviewsChart from './PageviewsChart';
|
||||
import MetricsBar from './MetricsBar';
|
||||
import WebsiteHeader from './WebsiteHeader';
|
||||
|
|
@ -20,7 +20,6 @@ export default function WebsiteChart({
|
|||
title,
|
||||
domain,
|
||||
stickyHeader = false,
|
||||
showLink = false,
|
||||
showChart = true,
|
||||
onDataLoad = () => {},
|
||||
}) {
|
||||
|
|
@ -80,33 +79,34 @@ export default function WebsiteChart({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
|
||||
<div className={classNames(styles.header, 'row')}>
|
||||
<StickyHeader
|
||||
className={classNames(styles.metrics, 'col row')}
|
||||
stickyClassName={styles.sticky}
|
||||
enabled={stickyHeader}
|
||||
>
|
||||
<FilterTags
|
||||
params={{ url, referrer, os, browser, device, country }}
|
||||
onClick={handleCloseFilter}
|
||||
/>
|
||||
<div className="col-12 col-lg-9">
|
||||
<>
|
||||
<WebsiteHeader websiteId={websiteId} title={title} domain={domain} />
|
||||
|
||||
<StickyHeader
|
||||
className={styles.metrics}
|
||||
stickyClassName={styles.sticky}
|
||||
enabled={stickyHeader}
|
||||
>
|
||||
<FilterTags
|
||||
params={{ url, referrer, os, browser, device, country }}
|
||||
onClick={handleCloseFilter}
|
||||
/>
|
||||
<Row className={styles.header}>
|
||||
<Column xs={12} sm={12} md={12} defaultSize={10}>
|
||||
<MetricsBar websiteId={websiteId} />
|
||||
</div>
|
||||
<div className={classNames(styles.filter, 'col-12 col-lg-3')}>
|
||||
</Column>
|
||||
<Column className={styles.filter} xs={12} sm={12} md={12} defaultSize={2}>
|
||||
<DateFilter
|
||||
value={value}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
onChange={handleDateChange}
|
||||
/>
|
||||
</div>
|
||||
</StickyHeader>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className={classNames(styles.chart, 'col')}>
|
||||
</Column>
|
||||
</Row>
|
||||
</StickyHeader>
|
||||
<Row>
|
||||
<Column className={styles.chart}>
|
||||
{error && <ErrorMessage />}
|
||||
{showChart && (
|
||||
<PageviewsChart
|
||||
|
|
@ -117,8 +117,8 @@ export default function WebsiteChart({
|
|||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@
|
|||
|
||||
.chart {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-large);
|
||||
font-size: var(--font-size-lg);
|
||||
line-height: 60px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -31,19 +32,11 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
background: var(--gray50);
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
background: var(--base50);
|
||||
border-bottom: 1px solid var(--base300);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.filter {
|
||||
display: block;
|
||||
}
|
||||
align-self: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,22 @@
|
|||
import Arrow from 'assets/arrow-right.svg';
|
||||
import classNames from 'classnames';
|
||||
import { Row, Column } from 'react-basics';
|
||||
import Favicon from 'components/common/Favicon';
|
||||
import Link from 'components/common/Link';
|
||||
import OverflowText from 'components/common/OverflowText';
|
||||
import RefreshButton from 'components/common/RefreshButton';
|
||||
import ButtonLayout from 'components/layout/ButtonLayout';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ActiveUsers from './ActiveUsers';
|
||||
import styles from './WebsiteHeader.module.css';
|
||||
|
||||
export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
|
||||
const header = showLink ? (
|
||||
<>
|
||||
<Favicon domain={domain} />
|
||||
<Link
|
||||
className={styles.titleLink}
|
||||
href="/websites/[...id]"
|
||||
as={`/websites/${websiteId}/${title}`}
|
||||
>
|
||||
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Favicon domain={domain} />
|
||||
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
|
||||
</>
|
||||
);
|
||||
|
||||
export default function WebsiteHeader({ websiteId, title, domain }) {
|
||||
return (
|
||||
<PageHeader className="row">
|
||||
<div className={classNames(styles.title, 'col-10 col-lg-4 order-1 order-lg-1')}>{header}</div>
|
||||
<div className={classNames(styles.active, 'col-12 col-lg-4 order-3 order-lg-2')}>
|
||||
<ActiveUsers websiteId={websiteId} />
|
||||
</div>
|
||||
<div className="col-2 col-lg-4 order-2 order-lg-3">
|
||||
<ButtonLayout align="right">
|
||||
<RefreshButton websiteId={websiteId} />
|
||||
{showLink && (
|
||||
<Link
|
||||
href="/websites/[...id]"
|
||||
as={`/websites/${websiteId}/${title}`}
|
||||
className={styles.link}
|
||||
icon={<Arrow />}
|
||||
size="small"
|
||||
iconRight
|
||||
>
|
||||
<FormattedMessage id="label.view-details" defaultMessage="View details" />
|
||||
</Link>
|
||||
)}
|
||||
</ButtonLayout>
|
||||
</div>
|
||||
<PageHeader>
|
||||
<Row>
|
||||
<Column className={styles.title} variant="two">
|
||||
<Favicon domain={domain} />
|
||||
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
|
||||
</Column>
|
||||
<Column className={styles.active} variant="two">
|
||||
<ActiveUsers websiteId={websiteId} />
|
||||
</Column>
|
||||
</Row>
|
||||
</PageHeader>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,15 @@
|
|||
.title {
|
||||
color: var(--gray900);
|
||||
font-size: var(--font-size-large);
|
||||
line-height: var(--font-size-xlarge);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: var(--font-size-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.titleLink {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.active {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
a.link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,19 +16,19 @@
|
|||
|
||||
.item h2 {
|
||||
font-size: 14px;
|
||||
color: var(--gray700);
|
||||
color: var(--base700);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--gray400);
|
||||
background: var(--gray50);
|
||||
border: 1px solid var(--base400);
|
||||
background: var(--base50);
|
||||
}
|
||||
|
||||
.active .text {
|
||||
border-color: var(--gray600);
|
||||
box-shadow: 4px 4px 4px var(--gray100);
|
||||
border-color: var(--base600);
|
||||
box-shadow: 4px 4px 4px var(--base100);
|
||||
}
|
||||
|
||||
.dragActive {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'classnames';
|
||||
import { Row, Column } from 'react-basics';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
|
|
@ -62,8 +62,8 @@ export default function TestConsole() {
|
|||
</PageHeader>
|
||||
{website && (
|
||||
<>
|
||||
<div className={classNames(styles.test, 'row')}>
|
||||
<div className="col-4">
|
||||
<Row className={styles.test}>
|
||||
<Column xs="4">
|
||||
<PageHeader>Page links</PageHeader>
|
||||
<div>
|
||||
<Link href={`/console/${websiteId}?page=1`}>
|
||||
|
|
@ -87,22 +87,22 @@ export default function TestConsole() {
|
|||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
</Column>
|
||||
<Column xs="4">
|
||||
<PageHeader>CSS events</PageHeader>
|
||||
<Button id="primary-button" className="umami--click--button-click" variant="action">
|
||||
Send event
|
||||
</Button>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
</Column>
|
||||
<Column xs="4">
|
||||
<PageHeader>Javascript events</PageHeader>
|
||||
<Button id="manual-button" variant="action" onClick={handleClick}>
|
||||
Run script
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<WebsiteChart
|
||||
websiteId={website.id}
|
||||
title={website.name}
|
||||
|
|
@ -111,8 +111,8 @@ export default function TestConsole() {
|
|||
/>
|
||||
<PageHeader>Events</PageHeader>
|
||||
<EventsChart websiteId={website.id} />
|
||||
</div>
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
</>
|
||||
)}
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.test {
|
||||
border: 1px solid var(--gray200);
|
||||
border: 1px solid var(--base200);
|
||||
border-radius: 5px;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { Column } from 'react-basics';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import WebsiteChart from 'components/metrics/WebsiteChart';
|
||||
import WorldMap from 'components/common/WorldMap';
|
||||
import Page from 'components/layout/Page';
|
||||
import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
|
||||
import GridRow from 'components/layout/GridRow';
|
||||
import MenuLayout from 'components/layout/MenuLayout';
|
||||
import Link from 'components/common/Link';
|
||||
import Loading from 'components/common/Loading';
|
||||
import Arrow from 'assets/arrow-right.svg';
|
||||
import PagesTable from 'components/metrics/PagesTable';
|
||||
import ReferrersTable from 'components/metrics/ReferrersTable';
|
||||
import BrowsersTable from 'components/metrics/BrowsersTable';
|
||||
|
|
@ -16,15 +16,13 @@ import OSTable from 'components/metrics/OSTable';
|
|||
import DevicesTable from 'components/metrics/DevicesTable';
|
||||
import CountriesTable from 'components/metrics/CountriesTable';
|
||||
import LanguagesTable from 'components/metrics/LanguagesTable';
|
||||
import EventsTable from 'components/metrics/EventsTable';
|
||||
import EventsChart from 'components/metrics/EventsChart';
|
||||
import ScreenTable from 'components/metrics/ScreenTable';
|
||||
import QueryParametersTable from 'components/metrics/QueryParametersTable';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import usePageQuery from 'hooks/usePageQuery';
|
||||
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
|
||||
import Arrow from 'assets/arrow-right.svg';
|
||||
import styles from './WebsiteDetails.module.css';
|
||||
import EventDataButton from 'components/common/EventDataButton';
|
||||
|
||||
const messages = defineMessages({
|
||||
pages: { id: 'metrics.pages', defaultMessage: 'Pages' },
|
||||
|
|
@ -35,7 +33,6 @@ const messages = defineMessages({
|
|||
devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
|
||||
countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
|
||||
languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
|
||||
events: { id: 'metrics.events', defaultMessage: 'Events' },
|
||||
query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
|
||||
});
|
||||
|
||||
|
|
@ -48,7 +45,6 @@ const views = {
|
|||
screen: ScreenTable,
|
||||
country: CountriesTable,
|
||||
language: LanguagesTable,
|
||||
event: EventsTable,
|
||||
query: QueryParametersTable,
|
||||
};
|
||||
|
||||
|
|
@ -56,7 +52,6 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
const { data } = useFetch(`/websites/${websiteId}`);
|
||||
const [chartLoaded, setChartLoaded] = useState(false);
|
||||
const [countryData, setCountryData] = useState();
|
||||
const [eventsData, setEventsData] = useState();
|
||||
const {
|
||||
resolve,
|
||||
query: { view },
|
||||
|
|
@ -65,7 +60,7 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
|
||||
const BackButton = () => (
|
||||
<div key="back-button" className={classNames(styles.backButton, 'col-12')}>
|
||||
<Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} size="small">
|
||||
<Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} sizes="small">
|
||||
<FormattedMessage id="label.back" defaultMessage="Back" />
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -107,10 +102,6 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
label: formatMessage(messages.screens),
|
||||
value: resolve({ view: 'screen' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.events),
|
||||
value: resolve({ view: 'event' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.query),
|
||||
value: resolve({ view: 'query' }),
|
||||
|
|
@ -137,58 +128,45 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
<div className="row">
|
||||
<div className={classNames(styles.chart, 'col')}>
|
||||
<WebsiteChart
|
||||
websiteId={websiteId}
|
||||
title={data.name}
|
||||
domain={data.domain}
|
||||
onDataLoad={handleDataLoad}
|
||||
showLink={false}
|
||||
stickyHeader
|
||||
/>
|
||||
{!chartLoaded && <Loading />}
|
||||
</div>
|
||||
</div>
|
||||
<WebsiteChart
|
||||
websiteId={websiteId}
|
||||
title={data.name}
|
||||
domain={data.domain}
|
||||
onDataLoad={handleDataLoad}
|
||||
showLink={false}
|
||||
stickyHeader
|
||||
/>
|
||||
{!chartLoaded && <Loading />}
|
||||
{chartLoaded && !view && (
|
||||
<GridLayout>
|
||||
<>
|
||||
<GridRow>
|
||||
<GridColumn md={12} lg={6}>
|
||||
<Column variant="two" className={styles.column}>
|
||||
<PagesTable {...tableProps} />
|
||||
</GridColumn>
|
||||
<GridColumn md={12} lg={6}>
|
||||
</Column>
|
||||
<Column variant="two" className={styles.column}>
|
||||
<ReferrersTable {...tableProps} />
|
||||
</GridColumn>
|
||||
</Column>
|
||||
</GridRow>
|
||||
<GridRow>
|
||||
<GridColumn md={12} lg={4}>
|
||||
<Column variant="three" className={styles.column}>
|
||||
<BrowsersTable {...tableProps} />
|
||||
</GridColumn>
|
||||
<GridColumn md={12} lg={4}>
|
||||
</Column>
|
||||
<Column variant="three" className={styles.column}>
|
||||
<OSTable {...tableProps} />
|
||||
</GridColumn>
|
||||
<GridColumn md={12} lg={4}>
|
||||
</Column>
|
||||
<Column variant="three" className={styles.column}>
|
||||
<DevicesTable {...tableProps} />
|
||||
</GridColumn>
|
||||
</Column>
|
||||
</GridRow>
|
||||
<GridRow>
|
||||
<GridColumn xs={12} md={12} lg={8}>
|
||||
<Column xs={12} sm={12} md={12} defaultSize={8}>
|
||||
<WorldMap data={countryData} />
|
||||
</GridColumn>
|
||||
<GridColumn xs={12} md={12} lg={4}>
|
||||
</Column>
|
||||
<Column xs={12} sm={12} md={12} defaultSize={4}>
|
||||
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
|
||||
</GridColumn>
|
||||
</Column>
|
||||
</GridRow>
|
||||
<GridRow className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
|
||||
<GridColumn xs={12} md={12} lg={4}>
|
||||
<EventsTable {...tableProps} onDataLoad={setEventsData} />
|
||||
</GridColumn>
|
||||
<GridColumn xs={12} md={12} lg={8}>
|
||||
<EventDataButton websiteId={websiteId} />
|
||||
<EventsChart className={styles.eventschart} websiteId={websiteId} />
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
</GridLayout>
|
||||
</>
|
||||
)}
|
||||
{view && chartLoaded && (
|
||||
<MenuLayout
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
}
|
||||
|
||||
.view {
|
||||
border-top: 1px solid var(--gray300);
|
||||
border-top: 1px solid var(--base300);
|
||||
}
|
||||
|
||||
.menu {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -29,14 +29,3 @@
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.eventschart {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.website {
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
border-bottom: 1px solid var(--base300);
|
||||
margin-bottom: 30px;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
}
|
||||
|
||||
.panel {
|
||||
background: var(--gray50);
|
||||
border: 1px solid var(--gray500);
|
||||
background: var(--base50);
|
||||
border: 1px solid var(--base500);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.username {
|
||||
border-bottom: 1px solid var(--gray500);
|
||||
border-bottom: 1px solid var(--base500);
|
||||
}
|
||||
|
||||
.username:hover {
|
||||
background: var(--gray50);
|
||||
background: var(--base50);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue