feat(ui) - insights - drilldown filters
This commit is contained in:
Shekar Siri
parent
0d83e0d94a
commit
270f020299
10 changed files with 160 additions and 93 deletions
|
|
@ -40,7 +40,7 @@ function Change({ change, isIncreased }: any) {
|
|||
<Icon
|
||||
name={isIncreased ? 'arrow-up-short' : 'arrow-down-short'}
|
||||
color={isIncreased ? 'red' : 'tealx'}
|
||||
size={20}
|
||||
size={18}
|
||||
/>
|
||||
{change}%
|
||||
</div>
|
||||
|
|
@ -50,7 +50,7 @@ function Change({ change, isIncreased }: any) {
|
|||
function ErrorItem({ item, className, onClick }: any) {
|
||||
return (
|
||||
<div className={className} onClick={onClick}>
|
||||
<Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
|
||||
<Icon name={item.icon} size={18} className="mr-2" color={item.iconColor} />
|
||||
{item.isNew ? (
|
||||
<>
|
||||
<div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
|
||||
|
|
@ -73,7 +73,7 @@ function ErrorItem({ item, className, onClick }: any) {
|
|||
function NetworkItem({ item, className, onClick }: any) {
|
||||
return (
|
||||
<div className={className} onClick={onClick}>
|
||||
<Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
|
||||
<Icon name={item.icon} size={18} className="mr-2" color={item.iconColor} />
|
||||
<div className="mx-1">Network request</div>
|
||||
<div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
|
||||
<div className="mx-1">{item.change > 0 ? 'increased' : 'decreased'}</div>
|
||||
|
|
@ -85,7 +85,7 @@ function NetworkItem({ item, className, onClick }: any) {
|
|||
function ResourcesItem({ item, className, onClick }: any) {
|
||||
return (
|
||||
<div className={className} onClick={onClick}>
|
||||
<Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
|
||||
<Icon name={item.icon} size={18} className="mr-2" color={item.iconColor} />
|
||||
<div className="mx-1">{item.change > 0 ? 'Inrease' : 'Decrease'}</div>
|
||||
<div className="mx-1">in</div>
|
||||
<div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
|
||||
|
|
@ -97,7 +97,7 @@ function ResourcesItem({ item, className, onClick }: any) {
|
|||
function RageItem({ item, className, onClick }: any) {
|
||||
return (
|
||||
<div className={className} onClick={onClick}>
|
||||
<Icon name={item.icon} size={20} className="mr-2" color={item.iconColor} />
|
||||
<Icon name={item.icon} size={18} className="mr-2" color={item.iconColor} />
|
||||
<div className="mx-1 bg-gray-100 px-2 rounded">{item.isNew ? item.name : 'Click Rage'}</div>
|
||||
{item.isNew && <div className="mx-1">has</div>}
|
||||
{!item.isNew && <div className="mx-1">on</div>}
|
||||
|
|
|
|||
|
|
@ -4,23 +4,61 @@ import { observer } from 'mobx-react-lite';
|
|||
import React from 'react';
|
||||
import InsightItem from './InsightItem';
|
||||
import { NO_METRIC_DATA } from 'App/constants/messages';
|
||||
import { InishtIssue } from 'App/mstore/types/widget';
|
||||
import { FilterKey, IssueCategory, IssueType } from 'App/types/filter/filterType';
|
||||
import { filtersMap } from 'Types/filter/newFilter';
|
||||
|
||||
interface Props {}
|
||||
function InsightsCard(props: Props) {
|
||||
function InsightsCard() {
|
||||
const { metricStore, dashboardStore } = useStore();
|
||||
const metric = metricStore.instance;
|
||||
const drillDownFilter = dashboardStore.drillDownFilter;
|
||||
const period = dashboardStore.period;
|
||||
|
||||
const clickHanddler = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
console.log(e);
|
||||
// TODO update drillDownFilter
|
||||
// const periodTimestamps = period.toTimestamps();
|
||||
// drillDownFilter.merge({
|
||||
// filters: event,
|
||||
// startTimestamp: periodTimestamps.startTimestamp,
|
||||
// endTimestamp: periodTimestamps.endTimestamp,
|
||||
// });
|
||||
const clickHanddler = (e: React.MouseEvent<HTMLDivElement>, item: InishtIssue) => {
|
||||
let filter: any = {};
|
||||
switch (item.category) {
|
||||
case IssueCategory.RESOURCES:
|
||||
filter = {
|
||||
...filtersMap[
|
||||
item.name === IssueType.MEMORY ? FilterKey.AVG_MEMORY_USAGE : FilterKey.AVG_CPU
|
||||
],
|
||||
};
|
||||
filter.source = [item.oldValue];
|
||||
filter.value = [];
|
||||
break;
|
||||
case IssueCategory.RAGE:
|
||||
filter = { ...filtersMap[FilterKey.CLICK] };
|
||||
filter.value = [item.name];
|
||||
break;
|
||||
case IssueCategory.NETWORK:
|
||||
filter = { ...filtersMap[FilterKey.FETCH_URL] };
|
||||
filter.filters = [
|
||||
{ ...filtersMap[FilterKey.FETCH_URL], value: [item.name] },
|
||||
{ ...filtersMap[FilterKey.FETCH_DURATION], value: [item.oldValue] },
|
||||
];
|
||||
filter.value = [];
|
||||
break;
|
||||
case IssueCategory.ERRORS:
|
||||
filter = { ...filtersMap[FilterKey.ERROR] };
|
||||
break;
|
||||
}
|
||||
|
||||
filter.type = filter.key;
|
||||
delete filter.key;
|
||||
delete filter.operatorOptions;
|
||||
delete filter.sourceOperatorOptions;
|
||||
delete filter.placeholder;
|
||||
delete filter.sourcePlaceholder;
|
||||
delete filter.sourceType;
|
||||
delete filter.sourceUnit;
|
||||
delete filter.category;
|
||||
delete filter.icon;
|
||||
delete filter.label;
|
||||
delete filter.options;
|
||||
|
||||
drillDownFilter.merge({
|
||||
filters: [filter],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -32,7 +70,7 @@ function InsightsCard(props: Props) {
|
|||
<div className="overflow-y-auto" style={{ maxHeight: '240px' }}>
|
||||
{metric.data.issues &&
|
||||
metric.data.issues.map((item: any) => (
|
||||
<InsightItem item={item} onClick={clickHanddler} />
|
||||
<InsightItem item={item} onClick={(e) => clickHanddler(e, item)} />
|
||||
))}
|
||||
</div>
|
||||
</NoContent>
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ function WidgetForm(props: Props) {
|
|||
await confirm({
|
||||
header: 'Confirm',
|
||||
confirmButton: 'Yes, delete',
|
||||
confirmation: `Are you sure you want to permanently delete this metric?`,
|
||||
confirmation: `Are you sure you want to permanently delete this card?`,
|
||||
})
|
||||
) {
|
||||
metricStore.delete(metric).then(props.onDelete);
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ function WidgetSessions(props: Props) {
|
|||
const customFilter = { ...filter, ...timeRange, filters: [ ...sessionStore.userFilter.filters, clickFilter]}
|
||||
debounceClickMapSearch(customFilter)
|
||||
} else {
|
||||
console.log(widget)
|
||||
debounceRequest(widget.metricId, {
|
||||
...filter,
|
||||
series: widget.series,
|
||||
|
|
|
|||
|
|
@ -259,10 +259,10 @@ const SVG = (props: Props) => {
|
|||
case 'high-engagement': return <svg viewBox="0 0 640 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m638.59 368.22-33.37-211.59c-8.86-50.26-48.4-90.77-100.66-103.13h-.07a803.14 803.14 0 0 0-369 0C83.17 65.86 43.64 106.36 34.78 156.63L1.41 368.22C-8.9 426.73 38.8 480 101.51 480c49.67 0 93.77-30.07 109.48-74.64l7.52-21.36h203l7.49 21.36C444.72 449.93 488.82 480 538.49 480c62.71 0 110.41-53.27 100.1-111.78zm-45.11 54.88c-13.28 15.82-33.33 24.9-55 24.9-36.2 0-68.07-21.41-79.29-53.27l-7.53-21.36-7.52-21.37H195.86l-7.53 21.37-7.53 21.36C169.58 426.59 137.71 448 101.51 448c-21.66 0-41.71-9.08-55-24.9A59.93 59.93 0 0 1 33 373.2l33.28-211c6.66-37.7 36.72-68.14 76.53-77.57a771.07 771.07 0 0 1 354.38 0c39.84 9.42 69.87 39.86 76.42 77l33.47 212.15c3.11 17.64-1.72 35.16-13.6 49.32zm-339.3-218.74h-42.54v-42.54a9.86 9.86 0 0 0-9.82-9.82h-19.64a9.86 9.86 0 0 0-9.82 9.82v42.54h-42.54a9.86 9.86 0 0 0-9.82 9.82v19.64a9.86 9.86 0 0 0 9.82 9.82h42.54v42.54a9.86 9.86 0 0 0 9.82 9.82h19.64a9.86 9.86 0 0 0 9.82-9.82v-42.54h42.54a9.86 9.86 0 0 0 9.82-9.82v-19.64a9.86 9.86 0 0 0-9.82-9.82zM416 224a32 32 0 1 0 32 32 32 32 0 0 0-32-32zm64-64a32 32 0 1 0 32 32 32 32 0 0 0-32-32z"/></svg>;
|
||||
case 'history': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M20 24h10c6.627 0 12 5.373 12 12v94.625C85.196 57.047 165.239 7.715 256.793 8.001 393.18 8.428 504.213 120.009 504 256.396 503.786 393.181 392.834 504 256 504c-63.926 0-122.202-24.187-166.178-63.908-5.113-4.618-5.354-12.561-.482-17.433l7.069-7.069c4.503-4.503 11.749-4.714 16.482-.454C150.782 449.238 200.935 470 256 470c117.744 0 214-95.331 214-214 0-117.744-95.331-214-214-214-82.862 0-154.737 47.077-190.289 116H164c6.627 0 12 5.373 12 12v10c0 6.627-5.373 12-12 12H20c-6.627 0-12-5.373-12-12V36c0-6.627 5.373-12 12-12zm321.647 315.235 4.706-6.47c3.898-5.36 2.713-12.865-2.647-16.763L272 263.853V116c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v164.147l84.884 61.734c5.36 3.899 12.865 2.714 16.763-2.646z"/></svg>;
|
||||
case 'hourglass-start': return <svg viewBox="0 0 384 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M368 32h4c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12H12C5.373 0 0 5.373 0 12v8c0 6.627 5.373 12 12 12h4c0 91.821 44.108 193.657 129.646 224C59.832 286.441 16 388.477 16 480h-4c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h360c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12h-4c0-91.821-44.108-193.657-129.646-224C324.168 225.559 368 123.523 368 32zM48 32h288c0 110.457-64.471 200-144 200S48 142.457 48 32zm288 448H48c0-110.457 64.471-200 144-200s144 89.543 144 200zM285.621 96H98.379a12.01 12.01 0 0 1-11.602-8.903 199.464 199.464 0 0 1-2.059-8.43C83.054 71.145 88.718 64 96.422 64h191.157c7.704 0 13.368 7.145 11.704 14.667a199.464 199.464 0 0 1-2.059 8.43A12.013 12.013 0 0 1 285.621 96zm-15.961 50.912a141.625 141.625 0 0 1-6.774 8.739c-2.301 2.738-5.671 4.348-9.248 4.348H130.362c-3.576 0-6.947-1.61-9.248-4.348a142.319 142.319 0 0 1-6.774-8.739c-5.657-7.91.088-18.912 9.813-18.912h135.694c9.725 0 15.469 11.003 9.813 18.912z"/></svg>;
|
||||
case 'ic-errors': return <svg viewBox="0 0 496 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>;
|
||||
case 'ic-network': return <svg viewBox="0 0 496 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>;
|
||||
case 'ic-rage': return <svg viewBox="0 0 496 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>;
|
||||
case 'ic-resources': return <svg viewBox="0 0 496 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>;
|
||||
case 'ic-errors': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>;
|
||||
case 'ic-network': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z"/><path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/></svg>;
|
||||
case 'ic-rage': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zm6.991-8.38a.5.5 0 1 1 .448.894l-1.009.504c.176.27.285.64.285 1.049 0 .828-.448 1.5-1 1.5s-1-.672-1-1.5c0-.247.04-.48.11-.686a.502.502 0 0 1 .166-.761l2-1zm-6.552 0a.5.5 0 0 0-.448.894l1.009.504A1.94 1.94 0 0 0 5 6.5C5 7.328 5.448 8 6 8s1-.672 1-1.5c0-.247-.04-.48-.11-.686a.502.502 0 0 0-.166-.761l-2-1z"/></svg>;
|
||||
case 'ic-resources': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/><path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/></svg>;
|
||||
case 'id-card': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path d="M3 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0-5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-1z"/></svg>;
|
||||
case 'image': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z"/></svg>;
|
||||
case 'info-circle-fill': return <svg viewBox="0 0 36 36" width={ `${ width }px` } height={ `${ height }px` } ><path d="M17.75 35.5a17.75 17.75 0 1 0 0-35.5 17.75 17.75 0 0 0 0 35.5Zm2.064-20.883-2.22 10.44c-.155.754.065 1.182.675 1.182.43 0 1.08-.155 1.522-.546l-.195.923c-.637.768-2.041 1.327-3.25 1.327-1.56 0-2.224-.937-1.793-2.927l1.637-7.694c.142-.65.014-.886-.637-1.043l-1-.18.182-.845 5.08-.637h-.002Zm-2.064-2.414a2.219 2.219 0 1 1 0-4.437 2.219 2.219 0 0 1 0 4.437Z"/></svg>;
|
||||
|
|
|
|||
|
|
@ -19,18 +19,21 @@ export class InishtIssue {
|
|||
category: string;
|
||||
label: string;
|
||||
value: number;
|
||||
oldValue: number;
|
||||
isIncreased?: boolean;
|
||||
|
||||
constructor(
|
||||
category: string,
|
||||
public name: string,
|
||||
public ratio: number,
|
||||
oldValue = 0,
|
||||
value = 0,
|
||||
change = 0,
|
||||
isNew = false
|
||||
) {
|
||||
this.category = category;
|
||||
this.value = Math.round(value);
|
||||
this.oldValue = Math.round(oldValue);
|
||||
// @ts-ignore
|
||||
this.label = issueCategoriesMap[category];
|
||||
this.icon = `ic-${category}`;
|
||||
|
|
@ -43,46 +46,48 @@ export class InishtIssue {
|
|||
}
|
||||
|
||||
export default class Widget {
|
||||
public static get ID_KEY():string { return "metricId" }
|
||||
metricId: any = undefined
|
||||
widgetId: any = undefined
|
||||
category?: string = undefined
|
||||
name: string = "Untitled Card"
|
||||
metricType: string = "timeseries"
|
||||
metricOf: string = "sessionCount"
|
||||
metricValue: string = ""
|
||||
viewType: string = "lineChart"
|
||||
metricFormat: string = "sessionCount"
|
||||
series: FilterSeries[] = []
|
||||
sessions: [] = []
|
||||
isPublic: boolean = true
|
||||
owner: string = ""
|
||||
lastModified: number = new Date().getTime()
|
||||
dashboards: any[] = []
|
||||
dashboardIds: any[] = []
|
||||
config: any = {}
|
||||
page: number = 1
|
||||
limit: number = 5
|
||||
thumbnail?: string
|
||||
params: any = { density: 70 }
|
||||
public static get ID_KEY(): string {
|
||||
return 'metricId';
|
||||
}
|
||||
metricId: any = undefined;
|
||||
widgetId: any = undefined;
|
||||
category?: string = undefined;
|
||||
name: string = 'Untitled Card';
|
||||
metricType: string = 'timeseries';
|
||||
metricOf: string = 'sessionCount';
|
||||
metricValue: string = '';
|
||||
viewType: string = 'lineChart';
|
||||
metricFormat: string = 'sessionCount';
|
||||
series: FilterSeries[] = [];
|
||||
sessions: [] = [];
|
||||
isPublic: boolean = true;
|
||||
owner: string = '';
|
||||
lastModified: number = new Date().getTime();
|
||||
dashboards: any[] = [];
|
||||
dashboardIds: any[] = [];
|
||||
config: any = {};
|
||||
page: number = 1;
|
||||
limit: number = 5;
|
||||
thumbnail?: string;
|
||||
params: any = { density: 70 };
|
||||
|
||||
period: Record<string, any> = Period({ rangeName: LAST_24_HOURS }); // temp value in detail view
|
||||
hasChanged: boolean = false;
|
||||
|
||||
position: number = 0
|
||||
data: any = {
|
||||
sessions: [],
|
||||
issues: [],
|
||||
total: 0,
|
||||
chart: [],
|
||||
namesMap: {},
|
||||
avg: 0,
|
||||
percentiles: [],
|
||||
}
|
||||
isLoading: boolean = false
|
||||
isValid: boolean = false
|
||||
dashboardId: any = undefined
|
||||
predefinedKey: string = ''
|
||||
position: number = 0;
|
||||
data: any = {
|
||||
sessions: [],
|
||||
issues: [],
|
||||
total: 0,
|
||||
chart: [],
|
||||
namesMap: {},
|
||||
avg: 0,
|
||||
percentiles: [],
|
||||
};
|
||||
isLoading: boolean = false;
|
||||
isValid: boolean = false;
|
||||
dashboardId: any = undefined;
|
||||
predefinedKey: string = '';
|
||||
|
||||
constructor() {
|
||||
makeAutoObservable(this);
|
||||
|
|
@ -140,34 +145,44 @@ export default class Widget {
|
|||
return this;
|
||||
}
|
||||
|
||||
toWidget(): any {
|
||||
return {
|
||||
config: {
|
||||
position: this.position,
|
||||
col: this.config.col,
|
||||
row: this.config.row,
|
||||
}
|
||||
}
|
||||
}
|
||||
toWidget(): any {
|
||||
return {
|
||||
config: {
|
||||
position: this.position,
|
||||
col: this.config.col,
|
||||
row: this.config.row,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
toJson() {
|
||||
return {
|
||||
metricId: this.metricId,
|
||||
widgetId: this.widgetId,
|
||||
metricOf: this.metricOf,
|
||||
metricValue: this.metricValueToArray(this.metricValue),
|
||||
metricType: this.metricType,
|
||||
metricFormat: this.metricFormat,
|
||||
viewType: this.viewType,
|
||||
name: this.name,
|
||||
series: this.series.map((series: any) => series.toJson()),
|
||||
thumbnail: this.thumbnail,
|
||||
config: {
|
||||
...this.config,
|
||||
col: (this.metricType === 'funnel' || this.metricOf === FilterKey.ERRORS || this.metricOf === FilterKey.SESSIONS || this.metricOf === FilterKey.SLOWEST_RESOURCES || this.metricOf === FilterKey.MISSING_RESOURCES || this.metricOf === FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION) ? 4 : (this.metricType === WEB_VITALS ? 1 : 2)
|
||||
},
|
||||
}
|
||||
}
|
||||
toJson() {
|
||||
return {
|
||||
metricId: this.metricId,
|
||||
widgetId: this.widgetId,
|
||||
metricOf: this.metricOf,
|
||||
metricValue: this.metricValueToArray(this.metricValue),
|
||||
metricType: this.metricType,
|
||||
metricFormat: this.metricFormat,
|
||||
viewType: this.viewType,
|
||||
name: this.name,
|
||||
series: this.series.map((series: any) => series.toJson()),
|
||||
thumbnail: this.thumbnail,
|
||||
config: {
|
||||
...this.config,
|
||||
col:
|
||||
this.metricType === 'funnel' ||
|
||||
this.metricOf === FilterKey.ERRORS ||
|
||||
this.metricOf === FilterKey.SESSIONS ||
|
||||
this.metricOf === FilterKey.SLOWEST_RESOURCES ||
|
||||
this.metricOf === FilterKey.MISSING_RESOURCES ||
|
||||
this.metricOf === FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION
|
||||
? 4
|
||||
: this.metricType === WEB_VITALS
|
||||
? 1
|
||||
: 2,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
validate() {
|
||||
this.isValid = this.name.length > 0;
|
||||
|
|
@ -189,9 +204,12 @@ export default class Widget {
|
|||
if (this.metricOf === FilterKey.ERRORS) {
|
||||
_data['errors'] = data.errors.map((s: any) => new Error().fromJSON(s));
|
||||
} else if (this.metricType === INSIGHTS) {
|
||||
_data['issues'] = data.filter((i: any) => i.change > 0 || i.change < 0).map(
|
||||
(i: any) => new InishtIssue(i.category, i.name, i.ratio, i.value, i.change, i.isNew)
|
||||
);
|
||||
_data['issues'] = data
|
||||
.filter((i: any) => i.change > 0 || i.change < 0)
|
||||
.map(
|
||||
(i: any) =>
|
||||
new InishtIssue(i.category, i.name, i.ratio, i.oldValue, i.value, i.change, i.isNew)
|
||||
);
|
||||
} else {
|
||||
if (data.hasOwnProperty('chart')) {
|
||||
_data['chart'] = getChartFormatter(period)(data.chart);
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 927 B After Width: | Height: | Size: 331 B |
|
|
@ -1 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-cloud-arrow-down" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z"/>
|
||||
<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 927 B After Width: | Height: | Size: 749 B |
|
|
@ -1 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-emoji-angry" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zm6.991-8.38a.5.5 0 1 1 .448.894l-1.009.504c.176.27.285.64.285 1.049 0 .828-.448 1.5-1 1.5s-1-.672-1-1.5c0-.247.04-.48.11-.686a.502.502 0 0 1 .166-.761l2-1zm-6.552 0a.5.5 0 0 0-.448.894l1.009.504A1.94 1.94 0 0 0 5 6.5C5 7.328 5.448 8 6 8s1-.672 1-1.5c0-.247-.04-.48-.11-.686a.502.502 0 0 0-.166-.761l-2-1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 927 B After Width: | Height: | Size: 692 B |
|
|
@ -1 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm0-184c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm0 96c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm-28.7-140.7c6.2-6.2 6.2-16.4 0-22.6L190.6 192l28.7-28.7c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L168 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.3 16.4 6.3 22.6 0zm160-102.6c-6.2-6.2-16.4-6.2-22.6 0L328 169.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l28.7 28.7-28.7 28.7c-6.2 6.2-6.2 16.4 0 22.6 6.2 6.2 16.4 6.3 22.6 0l28.7-28.7 28.7 28.7c6.2 6.2 16.4 6.3 22.6 0 6.2-6.2 6.2-16.4 0-22.6L350.6 192l28.7-28.7c6.3-6.2 6.3-16.4 0-22.6z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
|
||||
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
|
||||
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 927 B After Width: | Height: | Size: 460 B |
Loading…
Add table
Reference in a new issue