* 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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
.test {
border: 1px solid var(--gray200);
border: 1px solid var(--base200);
border-radius: 5px;
padding: 0 20px 20px 20px;
}

View file

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

View file

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

View file

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