Skip to content

Commit 3500b29

Browse files
mukultayal135mukultayal135
authored
Merge pull request #1308 from mukultayal135/css-fixes/platform-observations
fix: Css fixes/platform observations
2 parents 3655334 + 93bd76d commit 3500b29

File tree

20 files changed

+326
-207
lines changed

20 files changed

+326
-207
lines changed

‎src/components/ClusterNodes/ClusterOverview.tsx‎

Lines changed: 69 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
import React, { useEffect, useState } from 'react'
22
import { ClusterOverviewProps, DescriptionDataType, ERROR_TYPE } from './types'
33
import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
4+
import { ReactComponent as QuestionFilled } from '../../assets/icons/ic-help.svg'
5+
import { ReactComponent as TippyIcon } from '../../assets/icons/ic-help-outline.svg'
46
import { getClusterNote } from './clusterNodes.service'
57
import { generatePath, useHistory, useParams, useRouteMatch } from 'react-router-dom'
68
import GenericDescription from '../common/Description/GenericDescription'
79
import { defaultClusterNote } from './constants'
810
import moment from 'moment'
9-
import { Moment12HourFormat } from '../../config'
10-
import { ErrorScreenManager, Progressing, showError } from '@devtron-labs/devtron-fe-common-lib'
11+
import { Moment12HourFormat,URLS } from '../../config'
12+
import {
13+
ErrorScreenManager,
14+
Progressing,
15+
TippyCustomized,
16+
TippyTheme,
17+
showError,
18+
} from '@devtron-labs/devtron-fe-common-lib'
1119
import { K8S_EMPTY_GROUP, SIDEBAR_KEYS } from '../ResourceBrowser/Constants'
1220
import { unauthorizedInfoText } from '../ResourceBrowser/ResourceList/ClusterSelector'
1321

@@ -32,7 +40,20 @@ export default function ClusterOverview({
3240
const history = useHistory()
3341
const { path } = useRouteMatch()
3442
const [errorCode, setErrorCode] = useState(0)
35-
43+
const metricsApiTippyContent = () => (
44+
<div className="dc__align-left dc__word-break dc__hyphens-auto fs-13 fw-4 lh-20 p-12">
45+
Devtron uses Kubernetes’s&nbsp;
46+
<a
47+
href="https://kubernetes.io/docs/tasks/debug/debug-cluster/resource-metrics-pipeline/#metrics-api"
48+
rel="noreferrer noopener"
49+
target="_blank"
50+
>
51+
Metrics API
52+
</a>
53+
&nbsp; to show CPU and Memory Capacity. Please install metrics-server in this cluster to display CPU and
54+
Memory Capacity.
55+
</div>
56+
)
3657
useEffect(() => {
3758
setIsLoading(true)
3859
if (errorStatusCode > 0) return
@@ -141,54 +162,81 @@ export default function ClusterOverview({
141162
)
142163
}
143164

165+
const tippyForMetricsApi = () => {
166+
return (
167+
<>
168+
<span>NA</span>
169+
<TippyCustomized
170+
theme={TippyTheme.white}
171+
className="w-300 h-100 fcv-5 dc__align-left"
172+
placement="bottom"
173+
Icon={QuestionFilled}
174+
heading='Metrics API is not available'
175+
showCloseButton={true}
176+
trigger="click"
177+
additionalContent={metricsApiTippyContent()}
178+
interactive={true}
179+
documentationLinkText="View metrics-server helm chart"
180+
documentationLink={`/dashboard/${URLS.CHARTS_DISCOVER}/?appStoreName=metrics-server`}
181+
>
182+
<TippyIcon className="icon-dim-20 ml-8 cursor fcn-5" />
183+
</TippyCustomized>
184+
</>
185+
)
186+
}
187+
144188
const renderCardDetails = () => {
145189
return (
146190
<div className="flexbox dc__content-space pb-16">
147191
<div className="flexbox dc__content-space mr-16 w-50 p-16 bcn-0 br-4 en-2 bw-1">
148192
<div className="mr-16 w-25">
149-
<div className="dc__align-center fs-13 fw-4 cn-7">CPU Usage</div>
150-
<div className="dc__align-center fs-24 fw-4 cn-9">
151-
{clusterCapacityData?.cpu?.usagePercentage}
193+
<div className="dc__align-left fs-13 fw-4 cn-7">CPU Usage</div>
194+
<div className="dc__align-left fs-24 fw-4 cn-9">
195+
{clusterCapacityData?.cpu?.usagePercentage
196+
? clusterCapacityData?.cpu?.usagePercentage
197+
: tippyForMetricsApi()}
152198
</div>
153199
</div>
154200
<div className="mr-16 w-25">
155-
<div className="dc__align-center fs-13 fw-4 cn-7">CPU Capacity</div>
156-
<div className="dc__align-center fs-24 fw-4 cn-9">{clusterCapacityData?.cpu?.capacity}</div>
201+
<div className="dc__align-left fs-13 fw-4 cn-7">CPU Capacity</div>
202+
<div className="dc__align-left fs-24 fw-4 cn-9">{clusterCapacityData?.cpu?.capacity}</div>
157203
</div>
158204
<div className="mr-16 w-25">
159-
<div className="dc__align-center fs-13 fw-4 cn-7">CPU Requests</div>
160-
<div className="dc__align-center fs-24 fw-4 cn-9">
205+
<div className="dc__align-left fs-13 fw-4 cn-7">CPU Requests</div>
206+
<div className="dc__align-left fs-24 fw-4 cn-9">
161207
{clusterCapacityData?.cpu?.requestPercentage}
162208
</div>
163209
</div>
164210
<div className="w-25">
165-
<div className="dc__align-center fs-13 fw-4 cn-7">CPU Limits</div>
166-
<div className="dc__align-center fs-24 fw-4 cn-9">
211+
<div className="dc__align-left fs-13 fw-4 cn-7">CPU Limits</div>
212+
<div className="dc__align-left fs-24 fw-4 cn-9">
167213
{clusterCapacityData?.cpu?.limitPercentage}
168214
</div>
169215
</div>
170216
</div>
171217

172218
<div className="flexbox dc__content-space w-50 p-16 bcn-0 br-4 en-2 bw-1">
173219
<div className="mr-16 w-25">
174-
<div className="dc__align-center fs-13 fw-4 cn-7">Memory Usage</div>
175-
<div className="dc__align-center fs-24 fw-4 cn-9">
176-
{clusterCapacityData?.memory?.usagePercentage}
220+
<div className="dc__align-left fs-13 fw-4 cn-7">Memory Usage</div>
221+
<div className="dc__align-left fs-24 fw-4 cn-9">
222+
{clusterCapacityData?.memory?.usagePercentage
223+
? clusterCapacityData?.memory?.usagePercentage
224+
: tippyForMetricsApi()}
177225
</div>
178226
</div>
179227
<div className="mr-16 w-25">
180-
<div className="dc__align-center fs-13 fw-4 cn-7">Memory Capacity</div>
181-
<div className="dc__align-center fs-24 fw-4 cn-9">{clusterCapacityData?.memory?.capacity}</div>
228+
<div className="dc__align-left fs-13 fw-4 cn-7">Memory Capacity</div>
229+
<div className="dc__align-left fs-24 fw-4 cn-9">{clusterCapacityData?.memory?.capacity}</div>
182230
</div>
183231
<div className="mr-16 w-25">
184-
<div className="dc__align-center fs-13 fw-4 cn-7">Memory Requests</div>
185-
<div className="dc__align-center fs-24 fw-4 cn-9">
232+
<div className="dc__align-left fs-13 fw-4 cn-7">Memory Requests</div>
233+
<div className="dc__align-left fs-24 fw-4 cn-9">
186234
{clusterCapacityData?.memory?.requestPercentage}
187235
</div>
188236
</div>
189237
<div className="w-25">
190-
<div className="dc__align-center fs-13 fw-4 cn-7">Memory Limits</div>
191-
<div className="dc__align-center fs-24 fw-4 cn-9">
238+
<div className="dc__align-left fs-13 fw-4 cn-7">Memory Limits</div>
239+
<div className="dc__align-left fs-24 fw-4 cn-9">
192240
{clusterCapacityData?.memory?.limitPercentage}
193241
</div>
194242
</div>

‎src/components/ConfigMapSecret/ConfigMapSecretForm.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -651,7 +651,12 @@ export const ConfigMapSecretForm = React.memo(
651651
}
652652
return null
653653
}
654-
654+
const trimConfigMapName = (): void => {
655+
dispatch({
656+
type: ConfigMapActionTypes.setConfigName,
657+
payload: { value: state.configName.value.trim() },
658+
})
659+
}
655660
const renderRollARN = (): JSX.Element => {
656661
if (isHashiOrAWS || isESO) {
657662
return (
@@ -890,6 +895,7 @@ export const ConfigMapSecretForm = React.memo(
890895
autoComplete="off"
891896
autoFocus
892897
onChange={onConfigNameChange}
898+
onBlur={trimConfigMapName}
893899
type="text"
894900
className={`form__input`}
895901
placeholder={componentType === 'secret' ? 'random-secret' : 'random-configmap'}

‎src/components/Jobs/JobList/JobListView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export default function JobListView(props: JobListViewProps) {
130130
const icon = props.sortRule.order == OrderBy.ASC ? '' : 'sort-up'
131131
return (
132132
<div className="app-list" data-testid="job-list-container">
133-
<div className="app-list__header dc__border-bottom">
133+
<div className="app-list__header dc__border-bottom dc__position-sticky dc__top-47">
134134
<div className="app-list__cell--icon flex left cursor" onClick={toggleAllExpandRow}>
135135
<Arrow className={`icon-dim-24 p-2 ${arrowIcon()}`} />
136136
</div>

‎src/components/ResourceBrowser/ResourceBrowser.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,13 @@
156156
.scrollable-resource-list,
157157
.scrollable-event-list {
158158
.hover-class {
159-
&:hover {
160-
background-color: var(--N50);
161-
.sticky-column {
162-
background-color: var(--N50);
163-
}
164-
}
165-
}
159+
&:hover {
160+
background-color: var(--N50);
161+
.sticky-column {
162+
background-color: var(--N50);
163+
}
164+
}
165+
}
166166
}
167167

168168
.pagination-wrapper {
@@ -199,7 +199,7 @@
199199
}
200200

201201
.log-viewer-container {
202-
height: calc(100vh - 161px);
202+
height: calc(100vh - 150px);
203203
}
204204

205205
.terminal-container {

‎src/components/ResourceBrowser/ResourceList/EventList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function EventList({
3838
}}
3939
></span>
4040
</div>
41-
<div className="dc__highlight-text">
41+
<div className="dc__highlight-text dc__break-word">
4242
<span
4343
dangerouslySetInnerHTML={{
4444
__html: highlightSearchedText(searchText, eventData.message),

‎src/components/app/create/CreateApp.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,7 @@ export class AddNewApp extends Component<AddNewAppProps, AddNewAppState> {
236236
changeTemplate = (appCreationType: string): void => {
237237
let { form, isValid } = { ...this.state }
238238
form.appCreationType = appCreationType
239+
form.cloneId = appCreationType === AppCreationType.Blank ? 0 : form.cloneId
239240
isValid.cloneAppId = appCreationType === AppCreationType.Blank
240241
this.setState({ form, isValid })
241242
}

‎src/components/app/details/triggerView/cdMaterial.tsx‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -980,28 +980,34 @@ export class CDMaterial extends Component<CDMaterialProps, CDMaterialState> {
980980
}
981981
}
982982
return (
983-
<div
984-
className={`trigger-modal__config-diff-status flex pl-16 pr-16 dc__right-radius-4 ${
985-
_canReviewConfig ? 'cursor' : 'config-not-found'
986-
} ${isLastDeployedOption ? 'pt-10 pb-10' : 'pt-7 pb-7'}`}
987-
onClick={this.reviewConfig}
983+
<Tippy
984+
className="default-tt cursor"
985+
arrow={false}
986+
content={(diffFound ? 'Config' : 'No config') + ' diff from last deployed'}
988987
>
989-
{!isLastDeployedOption && (this.state.recentDeploymentConfig !== null || this.state.checkingDiff) && (
990-
<div
991-
className={`flex pt-3 pb-3 pl-12 pr-12 dc__border-radius-24 fs-12 fw-6 lh-20 ${statusColorClasses}`}
992-
>
993-
{checkingdiff}
994-
{configNotAvailable}
995-
{diffFound}
996-
{noDiff}
997-
</div>
998-
)}
999-
{((!this.state.checkingDiff && _canReviewConfig) ||
1000-
isLastDeployedOption ||
1001-
!this.state.recentDeploymentConfig) && (
1002-
<span className={`dc__uppercase cb-5 pointer ${!isLastDeployedOption ? 'ml-12' : ''}`}>REVIEW</span>
1003-
)}
1004-
</div>
988+
<div
989+
className={`trigger-modal__config-diff-status flex pl-16 pr-16 dc__right-radius-4 ${
990+
_canReviewConfig ? 'cursor' : 'config-not-found'
991+
} ${isLastDeployedOption ? 'pt-10 pb-10' : 'pt-7 pb-7'}`}
992+
onClick={this.reviewConfig}
993+
>
994+
{!isLastDeployedOption && (this.state.recentDeploymentConfig !== null || this.state.checkingDiff) && (
995+
<div
996+
className={`flex pt-3 pb-3 pl-12 pr-12 dc__border-radius-24 fs-12 fw-6 lh-20 ${statusColorClasses}`}
997+
>
998+
{checkingdiff}
999+
{configNotAvailable}
1000+
{diffFound}
1001+
{noDiff}
1002+
</div>
1003+
)}
1004+
{((!this.state.checkingDiff && _canReviewConfig) ||
1005+
isLastDeployedOption ||
1006+
!this.state.recentDeploymentConfig) && (
1007+
<span className={`dc__uppercase cb-5 pointer ${!isLastDeployedOption ? 'ml-12' : ''}`}>REVIEW</span>
1008+
)}
1009+
</div>
1010+
</Tippy>
10051011
)
10061012
}
10071013

‎src/components/app/list-new/AppList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,7 @@ export default function AppList({ isSuperAdmin, appListCount, isArgoInstalled }:
396396
filterType: string,
397397
query: Record<string, string>,
398398
): string => {
399-
399+
400400
/**
401401
* Step 1: Return currently selected/checked items from filters list as string if
402402
* - There are no query params

‎src/components/app/list-new/HelmAppList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -362,15 +362,15 @@ export default function HelmAppList({
362362

363363
function renderHeaders() {
364364
return (
365-
<div className="app-list__header">
365+
<div className="app-list__header dc__position-sticky dc__top-47">
366366
<div className="app-list__cell--icon"></div>
367367
<div className="app-list__cell app-list__cell--name">
368368
{sseConnection && <span>{APP_LIST_HEADERS.ReleaseName}</span>}
369369
{!sseConnection && (
370370
<button className="app-list__cell-header flex" onClick={sortByAppName}>
371371
{APP_LIST_HEADERS.AppName}
372372
{sortBy == SortBy.APP_NAME ? (
373-
<span className={`sort ${sortOrder == OrderBy.ASC ? 'sort-up' : ''} ml-4`}></span>
373+
<span className={`sort ${sortOrder == OrderBy.ASC ? '' : 'sort-up'} ml-4`}></span>
374374
) : (
375375
<span className="sort-col dc__opacity-0_5 ml-4"></span>
376376
)}

‎src/components/app/list/AppListView.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export class AppListView extends Component<AppListViewProps> {
8989
let icon = this.props.sortRule.order == OrderBy.ASC ? '' : 'sort-up'
9090
return (
9191
<div className="app-list" data-testid="app-list-container">
92-
<div className="app-list__header">
92+
<div className="app-list__header dc__position-sticky dc__top-47">
9393
<div className="app-list__cell--icon flex left cursor" onClick={this.toggleAllExpandRow}>
9494
<Arrow className={`icon-dim-24 p-2 ${this.arrowIcon()}`} />
9595
</div>
@@ -120,12 +120,12 @@ export class AppListView extends Component<AppListViewProps> {
120120
</span>
121121
<Tippy
122122
data-testid="env-tippy"
123-
className="default-tt"
123+
className="default-tt w-200"
124124
arrow={true}
125125
placement="top"
126126
content="Environment is a unique combination of cluster and namespace"
127127
>
128-
<HelpOutlineIcon className="icon-dim-20" />
128+
<HelpOutlineIcon className="icon-dim-16" />
129129
</Tippy>
130130
</div>
131131
<div className="app-list__cell app-list__cell--cluster">
@@ -147,7 +147,12 @@ export class AppListView extends Component<AppListViewProps> {
147147
{APP_LIST_HEADERS.LastDeployedAt}
148148

149149
{this.props.sortRule.key === SortBy.LAST_DEPLOYED ? (
150-
<span data-testid="sort-app-name-list" className={` sort ${this.props.sortRule.order == OrderBy.ASC ? 'sort-up' : ''} ml-4`}></span>
150+
<span
151+
data-testid="sort-app-name-list"
152+
className={` sort ${
153+
this.props.sortRule.order == OrderBy.ASC ? 'sort-up' : ''
154+
} ml-4`}
155+
></span>
151156
) : (
152157
<span className="sort-col dc__opacity-0_5 ml-4"></span>
153158
)}
@@ -283,7 +288,7 @@ export class AppListView extends Component<AppListViewProps> {
283288
linkIconPlacement={CardLinkIconPlacement.BeforeLink}
284289
/>
285290
<ContentCard
286-
datatestid="create-application"
291+
datatestid="create-application"
287292
redirectTo={`${URLS.APP}/${URLS.APP_LIST}/${AppListConstants.AppType.DEVTRON_APPS}/${AppListConstants.CREATE_DEVTRON_APP_URL}`}
288293
rootClassName="ev-5"
289294
imgSrc={DeployCICD}

0 commit comments

Comments
 (0)