frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔧 Fixed object orchestration for volumes in UI

Browse Source
This commit is contained in:
Rishi Ghan
2022-03-04 15:43:27 -08:00
parent 103cc7fa91
commit cf167be8da
1 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/client/components/Dashboard/VolumeGroups.tsx
View File

@@ -1,4 +1,4 @@
import { map } from "lodash"; import { map, unionBy } from "lodash";
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import ellipsize from "ellipsize"; import ellipsize from "ellipsize";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -11,6 +11,8 @@ export const VolumeGroups = (props): ReactElement => {
700: 2, 700: 2,
500: 1, 500: 1,
}; };
// Till mongo gives us back the deduplicated results with the ObjectId
const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
return ( return (
<section className="volumes-container mt-4"> <section className="volumes-container mt-4">
<div className="content"> <div className="content">
@@ -22,29 +24,25 @@ export const VolumeGroups = (props): ReactElement => {
className="volumes-grid" className="volumes-grid"
columnClassName="volumes-grid-column" columnClassName="volumes-grid-column"
> >
{map(props.volumeGroups, (data) => { {map(deduplicatedGroups, (data) => {
return map(data.data, (group) => { return (
return ( <div className="stack" key={data._id}>
<div className="stack" key={group.id}> <img src={data.volumes.image.small_url} />
<img src={group.volume.image.small_url} /> <div className="content">
<div className="content"> <div className="stack-title is-size-8">
<div className="stack-title is-size-8"> <Link to={`/volume/details/${data._id}`}>
<Link to={`/volume/details/${group.id}`}> {ellipsize(data.volumes.name, 18)}
{ellipsize(group.volume.name, 18)} </Link>
</Link> </div>
</div> <div className="control">
<div className="control"> <span className="tags has-addons">
<span className="tags has-addons"> <span className="tag is-primary is-light">Issues</span>
<span className="tag is-primary is-light">Issues</span> <span className="tag">{data.volumes.count_of_issues}</span>
<span className="tag"> </span>
{group.volume.count_of_issues}
</span>
</span>
</div>
</div> </div>
</div> </div>
); </div>
}); );
})} })}
</Masonry> </Masonry>
</section> </section>