Вывод данных на виджет с помощью вспомогательного компонента SimpleCounterViewComponent
This commit is contained in:
Pavel Gnedov
parent
8479b6d68d
commit
656b26897c
3 changed files with 121 additions and 60 deletions
46
frontend/package-lock.json
generated
46
frontend/package-lock.json
generated
|
|
@ -26,6 +26,7 @@
|
|||
"react-router-dom": "^6.11.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"uuid": "^11.0.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -14049,9 +14050,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
|
|
@ -15109,6 +15110,14 @@
|
|||
"websocket-driver": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/sockjs/node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
|
|
@ -16142,11 +16151,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"version": "11.0.5",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
|
||||
"integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==",
|
||||
"funding": [
|
||||
"https://github.com/sponsors/broofa",
|
||||
"https://github.com/sponsors/ctavan"
|
||||
],
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
"uuid": "dist/esm/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/v8-to-istanbul": {
|
||||
|
|
@ -26959,9 +26972,9 @@
|
|||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
|
|
@ -27727,6 +27740,13 @@
|
|||
"faye-websocket": "^0.11.3",
|
||||
"uuid": "^8.3.2",
|
||||
"websocket-driver": "^0.7.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"source-list-map": {
|
||||
|
|
@ -28496,9 +28516,9 @@
|
|||
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
|
||||
},
|
||||
"uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||
"version": "11.0.5",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz",
|
||||
"integrity": "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA=="
|
||||
},
|
||||
"v8-to-istanbul": {
|
||||
"version": "8.1.1",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"react-router-dom": "^6.11.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"uuid": "^11.0.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import * as DashboardStoreNs from '../dashboard-store';
|
|||
import { observer } from 'mobx-react-lite';
|
||||
import { DebugInfo } from '../../misc-components/debug-info';
|
||||
import { Instance, onSnapshot, types } from 'mobx-state-tree';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export const DailyEccmV2Data = types.model({
|
||||
id: types.string,
|
||||
|
|
@ -27,6 +28,47 @@ export const DailyEccmV2Store = types
|
|||
|
||||
export type IDailyEccmV2Store = Instance<typeof DailyEccmV2Store>;
|
||||
|
||||
const SimpleCounterViewComponent = (props: {
|
||||
key?: string;
|
||||
label: string;
|
||||
count: number;
|
||||
issueIds?: number[];
|
||||
detailsLabel?: string;
|
||||
details?: Record<string, number>;
|
||||
}): JSX.Element => {
|
||||
let detailsHintComponent = <></>;
|
||||
if (props.details) {
|
||||
const parentKey = props.key
|
||||
? props.key
|
||||
: `simple-counter-component-${uuidv4()}`;
|
||||
const detailsKey = `${parentKey}-details`;
|
||||
detailsHintComponent = (
|
||||
<DetailsHintViewComponent
|
||||
key={detailsKey}
|
||||
mainLabel={props.detailsLabel ?? 'Details'}
|
||||
details={props.details}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span key={props.key}>
|
||||
{props.label}: {props.count} {detailsHintComponent}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const DetailsHintViewComponent = (props: {
|
||||
key?: string;
|
||||
mainLabel: string;
|
||||
details: Record<string, number>;
|
||||
}): JSX.Element => {
|
||||
return (
|
||||
<span key={props.key} style={{ marginLeft: '10px', color: 'lightgray' }}>
|
||||
({props.mainLabel}: {JSON.stringify(props.details)})
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const DailyEccmV2 = observer(
|
||||
(props: { store: IDailyEccmV2Store }): JSX.Element => {
|
||||
const dashboardId = props.store?.data?.dashboardId;
|
||||
|
|
@ -42,61 +84,55 @@ export const DailyEccmV2 = observer(
|
|||
|
||||
const byStatusLi: JSX.Element[] = [];
|
||||
|
||||
Object.keys(issuesByStatusCount).forEach((status) => {
|
||||
let byStatusHint: JSX.Element;
|
||||
const byVersion = issuesByStatusCount[status]?.byVersion;
|
||||
const keyPrefixForCurrentStatusBlock = `${keyPrefix}-issuesByStatusCount-${status}`;
|
||||
if (byVersion && Object.keys(byVersion).length > 0) {
|
||||
const byVersionSimple = Object.keys(byVersion).reduce(
|
||||
(acc: Record<string, number>, version) => {
|
||||
acc[version] = byVersion[version].count;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, number>,
|
||||
);
|
||||
byStatusHint = (
|
||||
<span
|
||||
key={`${keyPrefixForCurrentStatusBlock}-byVersionHint`}
|
||||
style={{ marginLeft: '10px', color: 'lightgray' }}
|
||||
>
|
||||
(Версии: {JSON.stringify(byVersionSimple)})
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
byStatusHint = <></>;
|
||||
}
|
||||
Object.keys(issuesByStatusCount).forEach((statusName) => {
|
||||
const byStatusData = issuesByStatusCount[statusName];
|
||||
const keyPrefixForCurrentStatusBlock = `${keyPrefix}-issuesByStatusCount-${statusName}`;
|
||||
byStatusLi.push(
|
||||
<li key={`${keyPrefixForCurrentStatusBlock}`}>
|
||||
{status}: {issuesByStatusCount[status].count} {byStatusHint}
|
||||
<li key={`${keyPrefixForCurrentStatusBlock}-li`}>
|
||||
<SimpleCounterViewComponent
|
||||
key={`${keyPrefixForCurrentStatusBlock}`}
|
||||
label={statusName}
|
||||
count={byStatusData.count}
|
||||
issueIds={byStatusData.issueIds}
|
||||
details={byStatusData.byVersion}
|
||||
detailsLabel="Версии"
|
||||
/>
|
||||
</li>,
|
||||
);
|
||||
});
|
||||
|
||||
const byVersionsLi: JSX.Element[] = [];
|
||||
|
||||
Object.keys(issuesByVersionsCount).forEach((version) => {
|
||||
const byStatus = issuesByVersionsCount[version].byStatus;
|
||||
const keyPrefixForCurrentVersionBlock = `${keyPrefix}-issuesByVersionsCount-${version}`;
|
||||
|
||||
let byStatusHint: JSX.Element = <></>;
|
||||
if (byStatus && Object.keys(byStatus).length > 0) {
|
||||
const byStatusSimple = Object.keys(byStatus).reduce((acc, status) => {
|
||||
acc[status] = byStatus[status].count;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
byStatusHint = (
|
||||
<span
|
||||
style={{ marginLeft: '10px', color: 'lightgray' }}
|
||||
key={`${keyPrefixForCurrentVersionBlock}-byStatusHint`}
|
||||
>
|
||||
(Статусы: {JSON.stringify(byStatusSimple)})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
Object.keys(issuesByVersionsCount).forEach((versionName) => {
|
||||
const byVersionData = issuesByVersionsCount[versionName];
|
||||
const keyPrefixForCurrentVersionBlock = `${keyPrefix}-issuesByVersionCount-${versionName}`;
|
||||
byVersionsLi.push(
|
||||
<li key={keyPrefixForCurrentVersionBlock}>
|
||||
{version}: {issuesByVersionsCount[version].count} {byStatusHint}
|
||||
<li key={`${keyPrefixForCurrentVersionBlock}-li`}>
|
||||
<SimpleCounterViewComponent
|
||||
key={keyPrefixForCurrentVersionBlock}
|
||||
label={versionName}
|
||||
count={byVersionData.count}
|
||||
issueIds={byVersionData.issueIds}
|
||||
details={byVersionData.byStatus}
|
||||
detailsLabel="Статусы"
|
||||
/>
|
||||
</li>,
|
||||
);
|
||||
});
|
||||
|
||||
const byUsersLi: JSX.Element[] = [];
|
||||
|
||||
Object.keys(issuesByUsername).forEach((username) => {
|
||||
const byUserNameData = issuesByUsername[username];
|
||||
const keyPrefixForCurrentUserBlock = `${keyPrefix}-issuesByUsername-${username}`;
|
||||
byUsersLi.push(
|
||||
<li key={`${keyPrefixForCurrentUserBlock}-li`}>
|
||||
<SimpleCounterViewComponent
|
||||
key={keyPrefixForCurrentUserBlock}
|
||||
label={username}
|
||||
count={byUserNameData.count}
|
||||
issueIds={byUserNameData.issueIds}
|
||||
/>
|
||||
</li>,
|
||||
);
|
||||
});
|
||||
|
|
@ -118,6 +154,10 @@ export const DailyEccmV2 = observer(
|
|||
По версиям:
|
||||
<ul>{byVersionsLi}</ul>
|
||||
</li>
|
||||
<li>
|
||||
По работникам:
|
||||
<ul>{byUsersLi}</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue