mirror of
https://github.com/umami-software/umami.git
synced 2026-02-11 08:07: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:
parent
94848cc41b
commit
8732d056dd
165 changed files with 3370 additions and 6268 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue