mirror of
https://github.com/umami-software/umami.git
synced 2026-02-09 15:17:23 +01:00
Progress check-in.
This commit is contained in:
Mike Cao
parent
30274a07fd
commit
54d5af5cbb
35 changed files with 540 additions and 405 deletions
|
|
@ -1,22 +1,12 @@
|
|||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormRow,
|
||||
FormButtons,
|
||||
FormInput,
|
||||
SubmitButton,
|
||||
TextField,
|
||||
} from 'react-basics';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
||||
import { useIntl, FormattedMessage } from 'react-intl';
|
||||
import { labels, messages } from 'components/messages';
|
||||
import useApi from 'hooks/useApi';
|
||||
|
||||
const CONFIRM_VALUE = 'DELETE';
|
||||
|
||||
export default function TeamDeleteForm({ teamId, onSave, onClose }) {
|
||||
export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
|
||||
const { formatMessage } = useIntl();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate, error } = useMutation(data => del(`/teams/${teamId}`, data));
|
||||
const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
|
||||
|
||||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
|
|
@ -29,14 +19,13 @@ export default function TeamDeleteForm({ teamId, onSave, onClose }) {
|
|||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} error={error}>
|
||||
<p>{formatMessage(messages.deleteTeam, { confirmation: CONFIRM_VALUE })}</p>
|
||||
<FormRow label={formatMessage(labels.confirm)}>
|
||||
<FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
|
||||
<TextField autoComplete="off" />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
<p>
|
||||
<FormattedMessage {...messages.deleteTeamWarning} values={{ name: <b>{teamName}</b> }} />
|
||||
</p>
|
||||
<FormButtons flex>
|
||||
<SubmitButton variant="danger">{formatMessage(labels.delete)}</SubmitButton>
|
||||
<SubmitButton variant="danger" disabled={isLoading}>
|
||||
{formatMessage(labels.delete)}
|
||||
</SubmitButton>
|
||||
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@ export default function TeamsTable({ data = [], onDelete }) {
|
|||
<a>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.ArrowRight />
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.settings)}</Text>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
|
|
@ -66,7 +66,14 @@ export default function TeamsTable({ data = [], onDelete }) {
|
|||
<Text>{formatMessage(labels.delete)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.deleteTeam)}>
|
||||
{close => <TeamDeleteForm teamId={row.id} onSave={onDelete} onClose={close} />}
|
||||
{close => (
|
||||
<TeamDeleteForm
|
||||
teamId={row.id}
|
||||
teamName={row.name}
|
||||
onSave={onDelete}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
</Flexbox>
|
||||
|
|
|
|||
|
|
@ -45,9 +45,9 @@ export default function WebsitesTable({ data = [] }) {
|
|||
<a>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.ArrowRight />
|
||||
<Icons.Edit />
|
||||
</Icon>
|
||||
<Text>Settings</Text>
|
||||
<Text>{formatMessage(labels.edit)}</Text>
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
|
|
@ -57,7 +57,7 @@ export default function WebsitesTable({ data = [] }) {
|
|||
<Icon>
|
||||
<Icons.External />
|
||||
</Icon>
|
||||
<Text>View</Text>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,31 @@
|
|||
import { Icons } from 'react-basics';
|
||||
import { useState } from 'react';
|
||||
import { Icons, Loading } from 'react-basics';
|
||||
import { useIntl } from 'react-intl';
|
||||
import Link from 'next/link';
|
||||
import classNames from 'classnames';
|
||||
import Link from 'components/common/Link';
|
||||
import WorldMap from 'components/common/WorldMap';
|
||||
import GridRow from 'components/layout/GridRow';
|
||||
import MenuLayout from 'components/layout/MenuLayout';
|
||||
import Page from 'components/layout/Page';
|
||||
import BrowsersTable from 'components/metrics/BrowsersTable';
|
||||
import CountriesTable from 'components/metrics/CountriesTable';
|
||||
import DevicesTable from 'components/metrics/DevicesTable';
|
||||
import LanguagesTable from 'components/metrics/LanguagesTable';
|
||||
import OSTable from 'components/metrics/OSTable';
|
||||
import PagesTable from 'components/metrics/PagesTable';
|
||||
import QueryParametersTable from 'components/metrics/QueryParametersTable';
|
||||
import ReferrersTable from 'components/metrics/ReferrersTable';
|
||||
import ScreenTable from 'components/metrics/ScreenTable';
|
||||
import WebsiteChart from 'components/metrics/WebsiteChart';
|
||||
import useApi from 'hooks/useApi';
|
||||
import usePageQuery from 'hooks/usePageQuery';
|
||||
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
|
||||
import { useState } from 'react';
|
||||
import { Column, Loading } from 'react-basics';
|
||||
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||
import EventDataButton from '../../common/EventDataButton';
|
||||
import EventsChart from '../../metrics/EventsChart';
|
||||
import EventsTable from '../../metrics/EventsTable';
|
||||
import { labels, messages } from 'components/messages';
|
||||
import styles from './WebsiteDetails.module.css';
|
||||
|
||||
const messages = defineMessages({
|
||||
pages: { id: 'metrics.pages', defaultMessage: 'Pages' },
|
||||
referrers: { id: 'metrics.referrers', defaultMessage: 'Referrers' },
|
||||
screens: { id: 'metrics.screens', defaultMessage: 'Screens' },
|
||||
browsers: { id: 'metrics.browsers', defaultMessage: 'Browsers' },
|
||||
os: { id: 'metrics.operating-systems', defaultMessage: 'Operating system' },
|
||||
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' },
|
||||
});
|
||||
|
||||
const views = {
|
||||
url: PagesTable,
|
||||
referrer: ReferrersTable,
|
||||
browser: BrowsersTable,
|
||||
os: OSTable,
|
||||
device: DevicesTable,
|
||||
screen: ScreenTable,
|
||||
country: CountriesTable,
|
||||
language: LanguagesTable,
|
||||
event: EventsTable,
|
||||
query: QueryParametersTable,
|
||||
};
|
||||
import WebsiteTableView from './WebsiteTableView';
|
||||
import WebsiteMenuView from './WebsiteMenuView';
|
||||
|
||||
export default function WebsiteDetails({ websiteId }) {
|
||||
const { formatMessage } = useIntl();
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, isLoading } = useQuery(['websites', websiteId], () =>
|
||||
const { data, isLoading, error } = useQuery(['websites', websiteId], () =>
|
||||
get(`/websites/${websiteId}`),
|
||||
);
|
||||
const [chartLoaded, setChartLoaded] = useState(false);
|
||||
const [countryData, setCountryData] = useState();
|
||||
|
||||
const {
|
||||
resolve,
|
||||
query: { view },
|
||||
} = usePageQuery();
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const BackButton = () => (
|
||||
<div key="back-button" className={classNames(styles.backButton, 'col-12')}>
|
||||
|
|
@ -73,147 +35,34 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
icon={<Icons.ArrowRight />}
|
||||
sizes="small"
|
||||
>
|
||||
<FormattedMessage id="label.back" defaultMessage="Back" />
|
||||
{formatMessage(labels.back)}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
const menuOptions = [
|
||||
{
|
||||
render: BackButton,
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.pages),
|
||||
value: resolve({ view: 'url' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.referrers),
|
||||
value: resolve({ view: 'referrer' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.browsers),
|
||||
value: resolve({ view: 'browser' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.os),
|
||||
value: resolve({ view: 'os' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.devices),
|
||||
value: resolve({ view: 'device' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.countries),
|
||||
value: resolve({ view: 'country' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.languages),
|
||||
value: resolve({ view: 'language' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.screens),
|
||||
value: resolve({ view: 'screen' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.events),
|
||||
value: resolve({ view: 'event' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.query),
|
||||
value: resolve({ view: 'query' }),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps = {
|
||||
websiteId,
|
||||
websiteDomain: data?.domain,
|
||||
limit: 10,
|
||||
};
|
||||
|
||||
const DetailsComponent = views[view];
|
||||
|
||||
function handleDataLoad() {
|
||||
if (!chartLoaded) {
|
||||
setTimeout(() => setChartLoaded(true), DEFAULT_ANIMATION_DURATION);
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Page loading={isLoading} error={error}>
|
||||
<WebsiteChart
|
||||
websiteId={websiteId}
|
||||
title={data.name}
|
||||
domain={data.domain}
|
||||
title={data?.name}
|
||||
domain={data?.domain}
|
||||
onDataLoad={handleDataLoad}
|
||||
showLink={false}
|
||||
stickyHeader
|
||||
/>
|
||||
{!chartLoaded && <Loading variant="dots" />}
|
||||
{chartLoaded && !view && (
|
||||
{!chartLoaded && <Loading icon="dots" />}
|
||||
{chartLoaded && (
|
||||
<>
|
||||
<GridRow>
|
||||
<Column variant="two" className={styles.column}>
|
||||
<PagesTable {...tableProps} />
|
||||
</Column>
|
||||
<Column variant="two" className={styles.column}>
|
||||
<ReferrersTable {...tableProps} />
|
||||
</Column>
|
||||
</GridRow>
|
||||
<GridRow>
|
||||
<Column variant="three" className={styles.column}>
|
||||
<BrowsersTable {...tableProps} />
|
||||
</Column>
|
||||
<Column variant="three" className={styles.column}>
|
||||
<OSTable {...tableProps} />
|
||||
</Column>
|
||||
<Column variant="three" className={styles.column}>
|
||||
<DevicesTable {...tableProps} />
|
||||
</Column>
|
||||
</GridRow>
|
||||
<GridRow>
|
||||
<Column xs={12} sm={12} md={12} defaultSize={8}>
|
||||
<WorldMap data={countryData} />
|
||||
</Column>
|
||||
<Column xs={12} sm={12} md={12} defaultSize={4}>
|
||||
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
|
||||
</Column>
|
||||
</GridRow>
|
||||
<GridRow>
|
||||
<Column xs={12} md={12} lg={4} defaultSize={4}>
|
||||
<EventsTable {...tableProps} />
|
||||
</Column>
|
||||
<Column xs={12} md={12} lg={8} defaultSize={8}>
|
||||
<EventDataButton websiteId={websiteId} />
|
||||
<EventsChart className={styles.eventschart} websiteId={websiteId} />
|
||||
</Column>
|
||||
</GridRow>
|
||||
{!view && <WebsiteTableView websiteId={websiteId} />}
|
||||
{view && <WebsiteMenuView websiteId={websiteId} />}
|
||||
</>
|
||||
)}
|
||||
{view && chartLoaded && (
|
||||
<MenuLayout
|
||||
className={styles.view}
|
||||
menuClassName={styles.menu}
|
||||
contentClassName={styles.content}
|
||||
menu={menuOptions}
|
||||
>
|
||||
<DetailsComponent
|
||||
{...tableProps}
|
||||
height={500}
|
||||
limit={false}
|
||||
animte={false}
|
||||
showFilters
|
||||
virtualize
|
||||
/>
|
||||
</MenuLayout>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
115
components/pages/websites/WebsiteMenuView.js
Normal file
115
components/pages/websites/WebsiteMenuView.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import { Row, Column, Menu, Item, Icon, Text, Button } from 'react-basics';
|
||||
import Link from 'next/link';
|
||||
import BrowsersTable from 'components/metrics/BrowsersTable';
|
||||
import CountriesTable from 'components/metrics/CountriesTable';
|
||||
import DevicesTable from 'components/metrics/DevicesTable';
|
||||
import LanguagesTable from 'components/metrics/LanguagesTable';
|
||||
import OSTable from 'components/metrics/OSTable';
|
||||
import PagesTable from 'components/metrics/PagesTable';
|
||||
import QueryParametersTable from 'components/metrics/QueryParametersTable';
|
||||
import ReferrersTable from 'components/metrics/ReferrersTable';
|
||||
import ScreenTable from 'components/metrics/ScreenTable';
|
||||
import EventsTable from 'components/metrics/EventsTable';
|
||||
import usePageQuery from 'hooks/usePageQuery';
|
||||
import Icons from 'components/icons';
|
||||
import { labels } from '../../messages';
|
||||
import { useIntl } from 'react-intl';
|
||||
|
||||
const views = {
|
||||
url: PagesTable,
|
||||
referrer: ReferrersTable,
|
||||
browser: BrowsersTable,
|
||||
os: OSTable,
|
||||
device: DevicesTable,
|
||||
screen: ScreenTable,
|
||||
country: CountriesTable,
|
||||
language: LanguagesTable,
|
||||
event: EventsTable,
|
||||
query: QueryParametersTable,
|
||||
};
|
||||
|
||||
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
||||
const { formatMessage } = useIntl();
|
||||
const {
|
||||
resolve,
|
||||
query: { view },
|
||||
} = usePageQuery();
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: formatMessage(labels.pages),
|
||||
value: resolve({ view: 'url' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.referrers),
|
||||
value: resolve({ view: 'referrer' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.browsers),
|
||||
value: resolve({ view: 'browser' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.os),
|
||||
value: resolve({ view: 'os' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.devices),
|
||||
value: resolve({ view: 'device' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.countries),
|
||||
value: resolve({ view: 'country' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.languages),
|
||||
value: resolve({ view: 'language' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.screens),
|
||||
value: resolve({ view: 'screen' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.events),
|
||||
value: resolve({ view: 'event' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.query),
|
||||
value: resolve({ view: 'query' }),
|
||||
},
|
||||
];
|
||||
|
||||
const DetailsComponent = views[view];
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Column>
|
||||
<Button>
|
||||
<Icon rotate={180}>
|
||||
<Icons.ArrowRight />
|
||||
</Icon>
|
||||
{formatMessage(labels.back)}
|
||||
</Button>
|
||||
<Menu items={items}>
|
||||
{({ value, label }) => (
|
||||
<Link href={resolve()}>
|
||||
<a>
|
||||
<Item key={value}>{label}</Item>
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</Menu>
|
||||
</Column>
|
||||
<Column>
|
||||
<DetailsComponent
|
||||
websiteId={websiteId}
|
||||
websiteDomain={websiteDomain}
|
||||
height={500}
|
||||
limit={false}
|
||||
animate={false}
|
||||
showFilters
|
||||
virtualize
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
59
components/pages/websites/WebsiteTableView.js
Normal file
59
components/pages/websites/WebsiteTableView.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import { useState } from 'react';
|
||||
import { Row, Column } from 'react-basics';
|
||||
import PagesTable from 'components/metrics/PagesTable';
|
||||
import ReferrersTable from 'components/metrics/ReferrersTable';
|
||||
import BrowsersTable from 'components/metrics/BrowsersTable';
|
||||
import OSTable from 'components/metrics/OSTable';
|
||||
import DevicesTable from 'components/metrics/DevicesTable';
|
||||
import WorldMap from 'components/common/WorldMap';
|
||||
import CountriesTable from 'components/metrics/CountriesTable';
|
||||
import EventsTable from 'components/metrics/EventsTable';
|
||||
import EventsChart from 'components/metrics/EventsChart';
|
||||
|
||||
export default function WebsiteTableView({ websiteId }) {
|
||||
const [countryData, setCountryData] = useState();
|
||||
const tableProps = {
|
||||
websiteId,
|
||||
limit: 10,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row>
|
||||
<Column variant="two">
|
||||
<PagesTable {...tableProps} />
|
||||
</Column>
|
||||
<Column variant="two">
|
||||
<ReferrersTable {...tableProps} />
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column variant="three">
|
||||
<BrowsersTable {...tableProps} />
|
||||
</Column>
|
||||
<Column variant="three">
|
||||
<OSTable {...tableProps} />
|
||||
</Column>
|
||||
<Column variant="three">
|
||||
<DevicesTable {...tableProps} />
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column xs={12} sm={12} md={12} defaultSize={8}>
|
||||
<WorldMap data={countryData} />
|
||||
</Column>
|
||||
<Column xs={12} sm={12} md={12} defaultSize={4}>
|
||||
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column xs={12} md={12} lg={4} defaultSize={4}>
|
||||
<EventsTable {...tableProps} />
|
||||
</Column>
|
||||
<Column xs={12} md={12} lg={8} defaultSize={8}>
|
||||
<EventsChart websiteId={websiteId} />
|
||||
</Column>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue