From bd045667aa5a13987d89772d30469c187c991f79 Mon Sep 17 00:00:00 2001 From: Jaume Date: Thu, 7 Sep 2023 18:46:48 +0200 Subject: [PATCH] Fixing different problems of the view (#24) * Fixing different problems of the view * fixing some minor things on the docker-compose.yaml --- docker/postgres/docker-compose.yml | 4 +- .../graph-with-rechart/enrich-graph.spec.ts | 54 ++++++++++--------- .../graphs/graph-with-rechart/enrich-graph.ts | 7 ++- .../contents/graphs/use-graph-data.spec.ts | 2 +- .../contents/raw-data-list/raw-data-list.tsx | 9 +++- .../contents/tags/edit-tag/edit-tag.form.tsx | 4 +- view/src/contents/tags/edit-tag/edit-tag.tsx | 5 +- .../tags/edit-tag/filter-list-add.tsx | 1 + view/src/contents/tags/list-tags.tsx | 4 +- view/src/contents/tags/tag-list-row.tsx | 8 +-- view/src/utils/data-factory/tag.factory.ts | 4 +- 11 files changed, 58 insertions(+), 44 deletions(-) diff --git a/docker/postgres/docker-compose.yml b/docker/postgres/docker-compose.yml index f87a5674..da2b4c5f 100644 --- a/docker/postgres/docker-compose.yml +++ b/docker/postgres/docker-compose.yml @@ -2,7 +2,7 @@ version: '3.1' services: mrscrooge: - image: dracks/mrscrooge + image: dracks/mrscrooge:latest-postgres container_name: mrscrooge depends_on: - postgres @@ -13,7 +13,7 @@ services: - 3333:80 postgres: - image: postgres + image: postgres:12 environment: POSTGRES_PASSWORD: postgres POSTGRES_USER: postgres diff --git a/view/src/contents/graphs/graph-with-rechart/enrich-graph.spec.ts b/view/src/contents/graphs/graph-with-rechart/enrich-graph.spec.ts index 69a02d93..4f64db74 100644 --- a/view/src/contents/graphs/graph-with-rechart/enrich-graph.spec.ts +++ b/view/src/contents/graphs/graph-with-rechart/enrich-graph.spec.ts @@ -1,32 +1,34 @@ import { Tag } from '../../../api/client/tag/types'; import { tagFactory } from '../../../utils/data-factory/tag.factory'; -import {enrichGraph} from './enrich-graph' +import { enrichGraph } from './enrich-graph'; +describe('enrichGraph', () => { + let tagsMap: Map; + const tagId = (tag: number) => ({ tag }); -describe('enrichGraph', ()=>{ - let tagsMap : Map - const tagId=(tag: number)=>({tag}) - - beforeEach(()=>{ + beforeEach(() => { const tagsList = [ - tagFactory.build({id: 1, name: 'tag1'}), - tagFactory.build({id: 2, name: 'tag2'}), - tagFactory.build({id: 3, name: 'tag3'}), - tagFactory.build({id: 4, name: 'tag4'}) - ] - tagsMap = new Map(tagsList.map(tag => [tag.id, tag])) - }) - it('A graph with group type tags and preserving the order', ()=>{ - const result = enrichGraph({ - dateRange: 'all', - group: { - groupTags: [tagId(3), tagId(1)], - group: 'tags', + tagFactory.build({ id: 1, name: 'tag1' }), + tagFactory.build({ id: 2, name: 'tag2' }), + tagFactory.build({ id: 3, name: 'tag3' }), + tagFactory.build({ id: 4, name: 'tag4' }), + ]; + tagsMap = new Map(tagsList.map(tag => [tag.id, tag])); + }); + it('A graph with group type tags and preserving the order', () => { + const result = enrichGraph( + { + dateRange: 'all', + group: { + groupTags: [tagId(3), tagId(1)], + group: 'tags', + }, + id: 1, + kind: 'pie', + name: 'some graph', }, - id: 1, - kind: 'pie', - name: 'some graph' - }, tagsMap) - expect(result.group.groupTags).toEqual([tagsMap.get(3), tagsMap.get(1)]) - }) -}) + tagsMap, + ); + expect(result.group.groupTags).toEqual([tagsMap.get(3), tagsMap.get(1)]); + }); +}); diff --git a/view/src/contents/graphs/graph-with-rechart/enrich-graph.ts b/view/src/contents/graphs/graph-with-rechart/enrich-graph.ts index 92cc58b3..9683e4be 100644 --- a/view/src/contents/graphs/graph-with-rechart/enrich-graph.ts +++ b/view/src/contents/graphs/graph-with-rechart/enrich-graph.ts @@ -1,8 +1,11 @@ import { EnrichedGraph, EnrichedGroup, GraphGroup, GraphV2 } from '../../../api/client/graphs/types'; import { Tag } from '../../../api/client/tag/types'; -export const enrichGroup = ({ groupTags: oldGroupTags, ...group }: GraphGroup, tagsMap: Map): EnrichedGroup => { - const groupTags = oldGroupTags?.map(tag => tagsMap.get(tag.tag)).filter(Boolean) as Tag[] ?? []; +export const enrichGroup = ( + { groupTags: oldGroupTags, ...group }: GraphGroup, + tagsMap: Map, +): EnrichedGroup => { + const groupTags = (oldGroupTags?.map(tag => tagsMap.get(tag.tag)).filter(Boolean) as Tag[]) ?? []; return { ...group, diff --git a/view/src/contents/graphs/use-graph-data.spec.ts b/view/src/contents/graphs/use-graph-data.spec.ts index 0cd96641..853b1f64 100644 --- a/view/src/contents/graphs/use-graph-data.spec.ts +++ b/view/src/contents/graphs/use-graph-data.spec.ts @@ -42,7 +42,7 @@ describe('useGraphData', () => { { id: 5, name: 'tag_5' }, { id: 8, name: 'tag_8' }, ].map(element => ({ ...element, children: [], filters: [] })); - tagsMap = new Map(tags.map(tag => [tag.id, tag])) + tagsMap = new Map(tags.map(tag => [tag.id, tag])); }); it('Check basic pie', () => { expect(useGraphDataGenerator(enrichGraph({ ...GraphV2Pie, id: 2 }, tagsMap))).toEqual([ diff --git a/view/src/contents/raw-data-list/raw-data-list.tsx b/view/src/contents/raw-data-list/raw-data-list.tsx index 508aac97..ea991cbd 100644 --- a/view/src/contents/raw-data-list/raw-data-list.tsx +++ b/view/src/contents/raw-data-list/raw-data-list.tsx @@ -86,7 +86,14 @@ export const RawDataList: React.FC = () => { - + ( + + {marker} + + )} + > {(result: RdsEnriched) => ( )} diff --git a/view/src/contents/tags/edit-tag/edit-tag.form.tsx b/view/src/contents/tags/edit-tag/edit-tag.form.tsx index b3509d5c..8d83d2e1 100644 --- a/view/src/contents/tags/edit-tag/edit-tag.form.tsx +++ b/view/src/contents/tags/edit-tag/edit-tag.form.tsx @@ -26,8 +26,8 @@ export const EditTagForm: React.FC = ({ tag, save }) => { while (tmpChildrenList.length > 0) { const firstChildId = tmpChildrenList.pop() as number; childrenList.push(firstChildId); - const firstChild = tagsMap[firstChildId]; - firstChild.children.forEach(child => tmpChildrenList.push(child)); + const firstChild = tagsMap.get(firstChildId); + firstChild?.children.forEach(child => tmpChildrenList.push(child)); } return tags.filter(({ id }) => !childrenList.includes(id)).map(({ id, name }) => ({ id, name })); }, [tag, tag?.parent, tagsMap, tags]); diff --git a/view/src/contents/tags/edit-tag/edit-tag.tsx b/view/src/contents/tags/edit-tag/edit-tag.tsx index 8d39e670..4f5adfe0 100644 --- a/view/src/contents/tags/edit-tag/edit-tag.tsx +++ b/view/src/contents/tags/edit-tag/edit-tag.tsx @@ -13,9 +13,10 @@ import { UITag } from './models/ui-tag.model'; export const TagEdit: React.FC = () => { const { tagsMap, refresh } = useTagsContext(); const { id } = useParams<{ id: string }>(); - const tag: Tag | undefined = tagsMap[Number.parseInt(id ?? 'Nan', 10)]; + const idNum = Number.parseInt(id ?? 'Nan', 10); + const tag: Tag | undefined = tagsMap.get(idNum); - const [, updateTag] = usePutTag(tag?.id); + const [, updateTag] = usePutTag(tag?.id ?? 0); const [tagUiValue, setTagUiValue] = React.useState(); diff --git a/view/src/contents/tags/edit-tag/filter-list-add.tsx b/view/src/contents/tags/edit-tag/filter-list-add.tsx index fcd936e2..5dd412e6 100644 --- a/view/src/contents/tags/edit-tag/filter-list-add.tsx +++ b/view/src/contents/tags/edit-tag/filter-list-add.tsx @@ -19,6 +19,7 @@ export const FilterListAddArgs: React.FC = ({ conditions, tag const [, request] = usePostTagFilter(); const [viewFilter, setViewFilter] = React.useState>({ tag: tagId, + conditional: '', }); React.useEffect(() => { setViewFilter({ tag: tagId }); diff --git a/view/src/contents/tags/list-tags.tsx b/view/src/contents/tags/list-tags.tsx index 8c9603ff..18d04d61 100644 --- a/view/src/contents/tags/list-tags.tsx +++ b/view/src/contents/tags/list-tags.tsx @@ -9,7 +9,7 @@ import { TagListRow } from './tag-list-row'; export const TagsList: React.FC = () => { const [isAdding, setIsAdding] = React.useState(false); - const { tags, tagsMap: tagsHash, refresh } = useTagsContext(); + const { tags, tagsMap, refresh } = useTagsContext(); const onClose = React.useCallback( async (newTag?: Tag) => { @@ -41,7 +41,7 @@ export const TagsList: React.FC = () => { {isAdding ? : undefined} - {(result: Tag) => } + {(result: Tag) => } diff --git a/view/src/contents/tags/tag-list-row.tsx b/view/src/contents/tags/tag-list-row.tsx index 20ccb43e..8fe0de7d 100644 --- a/view/src/contents/tags/tag-list-row.tsx +++ b/view/src/contents/tags/tag-list-row.tsx @@ -10,17 +10,17 @@ import { ConfirmationButton } from '../../utils/ui/confirmation-button'; interface TagListRowArgs { refresh: () => void; tag: Tag; - tagHash: Record; + tagsMap: Map; } -export const TagListRow: React.FC = ({ tag, tagHash, refresh }) => { +export const TagListRow: React.FC = ({ tag, tagsMap: tagHash, refresh }) => { const [, deleteRequest] = useDeleteTag(tag.id); const navigate = useNavigate(); - const parentTag = tag.parent ? tagHash[tag.parent] : { name: undefined }; + const parentTag = tag.parent ? tagHash.get(tag.parent) : { name: undefined }; const logger = useLogger(); return ( - {parentTag.name} + {parentTag?.name} {tag.name} {tag.negateConditional ? 'not and' : 'or'} {tag.filters.length} diff --git a/view/src/utils/data-factory/tag.factory.ts b/view/src/utils/data-factory/tag.factory.ts index 364c258e..70d44d90 100644 --- a/view/src/utils/data-factory/tag.factory.ts +++ b/view/src/utils/data-factory/tag.factory.ts @@ -1,4 +1,4 @@ -import * as Factory from 'factory.ts' +import * as Factory from 'factory.ts'; import { Tag } from '../../api/client/tag/types'; @@ -7,4 +7,4 @@ export const tagFactory = Factory.Sync.makeFactory({ name: 'Build tag', children: [], filters: [], -}) +});