Skip to content

Commit 06ebeb7

Browse files
shivani170shivani170
committed
chore: implementation of chart group card UI
1 parent b9a3487 commit 06ebeb7

File tree

9 files changed

+140
-134
lines changed

9 files changed

+140
-134
lines changed

‎src/components/charts/ChartCard.tsx

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,17 @@ import {
2121
ComponentSizeType,
2222
handleAnalyticsEvent,
2323
Icon,
24-
ImageWithFallback,
2524
noop,
2625
stopPropagation,
2726
useMainContext,
2827
} from '@devtron-labs/devtron-fe-common-lib'
2928

3029
import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
3130

32-
import { ReactComponent as Helm } from '../../assets/icons/ic-default-chart.svg'
3331
import { SERVER_MODE } from '../../config'
32+
import ChartIcon from './ChartIcon'
3433
import { ChartSelectProps } from './charts.types'
35-
import { renderDeprecatedWarning } from './charts.util'
34+
import { getDescriptionTruncate, renderDeprecatedWarning } from './charts.util'
3635

3736
const ChartCard = ({
3837
chart,
@@ -88,31 +87,6 @@ const ChartCard = ({
8887
ariaLabel="Remove chart from selection"
8988
/>
9089
)
91-
const chartIconClass = 'dc__chart-grid-item__icon chart-icon-dim br-4 dc__no-shrink'
92-
93-
const renderIcon = () => (
94-
<div className="icon-wrapper">
95-
<ImageWithFallback
96-
imageProps={{
97-
height: 32,
98-
width: 32,
99-
src: chart.icon,
100-
alt: 'chart',
101-
className: chartIconClass,
102-
}}
103-
fallbackImage={<Helm className={chartIconClass} />}
104-
/>
105-
</div>
106-
)
107-
108-
const getDescriptionTruncate = () => {
109-
if (isListView) {
110-
return 'dc__truncate--clamp-4'
111-
}
112-
113-
if (chart.deprecated) return 'dc__truncate'
114-
return 'dc__truncate--clamp-2'
115-
}
11690

11791
const renderCardInfo = () => (
11892
<div className="flexbox-col flex-grow-1 dc__gap-8">
@@ -130,7 +104,9 @@ const ChartCard = ({
130104
{chart.deprecated && renderDeprecatedWarning()}
131105
</div>
132106

133-
<span className={`fw-4 fs-13 lh-1-5 ${getDescriptionTruncate()}`}>
107+
<span
108+
className={`fw-4 fs-13 lh-1-5 ${getDescriptionTruncate({ isListView, isDeprecated: chart.deprecated })}`}
109+
>
134110
{chart.description || 'No description'}
135111
</span>
136112
</div>
@@ -163,7 +139,7 @@ const ChartCard = ({
163139
<div
164140
className={`${isListView ? 'dc__grid chart-list-item dc__gap-16' : 'flexbox-col h-166 dc__gap-12'} px-20 pt-20 pb-16`}
165141
>
166-
{renderIcon()}
142+
<ChartIcon icon={chart.icon} />
167143
{serverMode === SERVER_MODE.FULL && addChart && subtractChart && (
168144
<div
169145
className={`devtron-stepper ${selectedCount > 0 ? 'dc__grid devtron-stepper-grid dc__border br-6 fw-6 cursor bg__primary' : ''}`}

‎src/components/charts/ChartGroupCard.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { Link } from 'react-router-dom'
18+
19+
import { handleAnalyticsEvent, Icon } from '@devtron-labs/devtron-fe-common-lib'
20+
21+
import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
22+
23+
import ChartIcon from './ChartIcon'
24+
import { getChartGroupURL } from './charts.helper'
25+
import { ChartGroupCardProps } from './charts.types'
26+
import { getChartGroupSubgroup, getDescriptionTruncate } from './charts.util'
27+
28+
export const ChartGroupCard = ({ chartGroup }: ChartGroupCardProps) => {
29+
const chartGroupEntries = getChartGroupSubgroup(chartGroup.chartGroupEntries)
30+
const GROUP_EDIT_LINK = getChartGroupURL(chartGroup.id)
31+
32+
const renderCardInfo = () => (
33+
<div className="flexbox-col flex-grow-1 dc__gap-8">
34+
<div className="flexbox-col dc__gap-2">
35+
<div className="flex left">
36+
<InteractiveCellText
37+
text={chartGroup.name}
38+
rootClassName="fw-6 chart-grid-item__title cn-9"
39+
fontSize={14}
40+
/>
41+
<div className="chart-name__arrow dc__no-shrink flex">
42+
<Icon name="ic-caret-down-small" color="B500" rotateBy={270} />
43+
</div>
44+
</div>
45+
</div>
46+
47+
<span className={`fw-4 fs-13 lh-1-5 ${getDescriptionTruncate({})}`}>
48+
{chartGroup.description || 'No description'}
49+
</span>
50+
</div>
51+
)
52+
53+
const handleClick = () => {
54+
handleAnalyticsEvent({ category: 'Chart Store', action: 'CS_CHART_GROUP_CARD_CLICKED' })
55+
}
56+
57+
const renderFooter = () => (
58+
<div className="flex left dc__content-space dc__border-top-n1 px-20 py-16 dc__gap-6">
59+
<div className="flex dc__gap-6">
60+
<Icon name="ic-folder-color" size={18} color={null} />
61+
<InteractiveCellText text="" rootClassName="cn-7 lh-1-5" fontSize={12} />
62+
</div>
63+
<span className="lh-20 dc__truncate m-0 dc__align-item-left cn-7 lh-1-5 dc__mxw-120 fs-12">
64+
{chartGroup.chartGroupEntries?.length || 0} charts
65+
</span>
66+
</div>
67+
)
68+
69+
return (
70+
<Link
71+
key={chartGroup.id}
72+
className="chart-grid-item dc__visible-hover dc__visible-hover--parent bg__primary border__secondary-translucent cursor dc__position-rel br-8 "
73+
to={GROUP_EDIT_LINK}
74+
onClick={handleClick}
75+
>
76+
<div className="flexbox-col h-166 dc__gap-12 px-20 pt-20 pb-16">
77+
<div className="flexbox">
78+
{chartGroupEntries?.map((chart) => <ChartIcon icon={chart.chartMetaData.icon} key={chart.id} />)}
79+
</div>
80+
{renderCardInfo()}
81+
</div>
82+
83+
{renderFooter()}
84+
</Link>
85+
)
86+
}

‎src/components/charts/ChartIcon.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ImageWithFallback } from '@devtron-labs/devtron-fe-common-lib'
2+
3+
import { ReactComponent as Helm } from '../../assets/icons/ic-default-chart.svg'
4+
5+
const ChartIcon = ({ icon }: { icon: string }) => {
6+
const chartIconClass = 'dc__chart-grid-item__icon chart-icon-dim br-4 dc__no-shrink'
7+
8+
return (
9+
<div className="icon-wrapper">
10+
<ImageWithFallback
11+
imageProps={{
12+
height: 32,
13+
width: 32,
14+
src: icon,
15+
alt: 'chart',
16+
className: 'dc__chart-grid-item__icon chart-icon-dim br-4 dc__no-shrink',
17+
}}
18+
fallbackImage={<Helm className={chartIconClass} />}
19+
/>
20+
</div>
21+
)
22+
}
23+
24+
export default ChartIcon

‎src/components/charts/charts.scss

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -142,42 +142,13 @@
142142
margin-right: 16px;
143143
}
144144

145-
.chart-group-item__title {
146-
font-size: 14px;
147-
font-weight: 600;
148-
line-height: 1.43;
149-
letter-spacing: normal;
150-
color: var(--N900);
151-
margin-bottom: 4px;
152-
}
153-
154-
.chart-group-item__desc {
155-
font-size: 12px;
156-
height: 20px;
157-
font-weight: normal;
158-
line-height: 1.67;
159-
letter-spacing: normal;
160-
color: var(--N700);
161-
}
162-
163-
.chart-grid-item__chart-icons {
164-
height: 108px;
165-
margin-bottom: 16px;
166-
}
167-
168145
.chart-group-deployments {
169146
padding: 16px 24px;
170147
flex: 1;
171148
}
172149

173-
.chart-group__chart-icon {
174-
margin: 6px;
175-
height: 40px;
176-
width: 40px;
177-
}
178-
179150
.chart-grid--chart-group-snapshot {
180-
height: 228px;
151+
height: 238px;
181152
overflow: hidden;
182153
}
183154

‎src/components/charts/charts.types.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -444,3 +444,8 @@ export interface ChartGroupDeploymentsProps {
444444
installedChartData: InstalledChartGroup[]
445445
deleteInstalledChart: (e) => void
446446
}
447+
448+
export interface ChartDescriptionTypes {
449+
isDeprecated?: boolean
450+
isListView?: boolean
451+
}

‎src/components/charts/charts.util.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
*/
1616

1717
import { Icon } from '@devtron-labs/devtron-fe-common-lib'
18+
import { ChartDescriptionTypes, ChartGroupEntry } from './charts.types'
1819

1920
export const PaginationParams = {
2021
pageOffset: 0,
@@ -46,3 +47,18 @@ export const renderDeprecatedWarning = () => {
4647
</div>
4748
)
4849
}
50+
51+
export const getChartGroupSubgroup = (chartGroupEntries): ChartGroupEntry[] => {
52+
let len = chartGroupEntries.length
53+
len = len < 8 ? len : 8
54+
return chartGroupEntries.slice(0, len)
55+
}
56+
57+
export const getDescriptionTruncate = ({ isListView = false, isDeprecated = false }: ChartDescriptionTypes) => {
58+
if (isListView) {
59+
return 'dc__truncate--clamp-4'
60+
}
61+
62+
if (isDeprecated) return 'dc__truncate'
63+
return 'dc__truncate--clamp-2 cn-7'
64+
}

‎src/components/charts/list/ChartGroup.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,10 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react'
1817
import { Progressing, BreadCrumb, useBreadcrumb, useAsync, PageHeader } from '@devtron-labs/devtron-fe-common-lib'
1918
import { useRouteMatch, useHistory, useLocation, Switch, Route, Link } from 'react-router-dom'
2019
import { getChartGroups } from '../charts.service'
21-
import ChartGroupCard from '../util/ChartGroupCard'
20+
import{ ChartGroupCard} from '../ChartGroupCard'
2221
import CreateChartGroup from '../modal/CreateChartGroup'
2322
import ChartGroupUpdate from '../ChartGroupUpdate'
2423
import ChartGroupDetails from '../ChartGroupDetails'

‎src/components/charts/list/DiscoverCharts.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import Tippy from '@tippyjs/react'
3737
import { Select, mapByKey, sortOptionsByLabel } from '../../common'
3838
import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
3939
import ChartCard from '../ChartCard'
40-
import ChartGroupCard from '../util/ChartGroupCard'
40+
import { ChartGroupCard } from '../ChartGroupCard'
4141
import DiscoverChartDetails from '../discoverChartDetail/DiscoverChartDetails'
4242
import MultiChartSummary from '../MultiChartSummary'
4343
import AdvancedConfig from '../AdvancedConfig'

‎src/components/charts/util/ChartGroupCard.tsx

Lines changed: 0 additions & 71 deletions
This file was deleted.

0 commit comments

Comments
 (0)