watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 16:17:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Dev (#1702)

Browse source 
* 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 2022-12-12 19:45:38 -08:00 • committed by GitHub
parent 94848cc41b
commit 8732d056dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
165 changed files with 3370 additions and 6268 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/metrics/ActiveUsers.module.css
View file

@ -5,7 +5,7 @@
.text {
display: flex;
font-size: var(--font-size-normal);
font-size: var(--font-size-md);
}
.value {

6
components/metrics/ChartTooltip.module.css
View file

@ -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 {

10
components/metrics/DataTable.module.css
View file

@ -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;
}

4
components/metrics/Legend.module.css
View file

@ -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);
}

8
components/metrics/MetricCard.module.css
View file

@ -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
components/metrics/MetricsTable.module.css
View file

@ -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;
}

6
components/metrics/RealtimeLog.module.css
View file

@ -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;
}

52
components/metrics/WebsiteChart.js
View file

@ -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>
</>
);
}

17
components/metrics/WebsiteChart.module.css
View file

@ -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;
}

59
components/metrics/WebsiteHeader.js
View file

@ -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>
);
}

29
components/metrics/WebsiteHeader.module.css
View file

@ -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;
}
}