Skip to content

Commit 8966d45

Browse files
vivek-devtronvivek-devtron
committed
Merge branch 'main' into app_env_filter
2 parents e4977bf + bb37638 commit 8966d45

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1592
-335
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "0.0.26",
7+
"@devtron-labs/devtron-fe-common-lib": "0.0.28",
88
"@sentry/browser": "^7.3.1",
99
"@sentry/integrations": "^7.3.1",
1010
"@sentry/tracing": "^7.3.1",
@@ -31,6 +31,7 @@
3131
"react-csv": "^2.2.2",
3232
"react-dates": "^21.8.0",
3333
"react-dom": "^17.0.2",
34+
"react-draggable": "^4.4.5",
3435
"react-ga4": "^1.4.1",
3536
"react-gtm-module": "^2.0.11",
3637
"react-keybind": "^0.9.4",

‎src/assets/icons/ic-variable.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/CIPipelineN/CIPipeline.tsx‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React, { useState, useEffect, useMemo, useRef } from 'react'
22
import { NavLink } from 'react-router-dom'
33
import { Redirect, Route, Switch, useParams, useRouteMatch, useLocation } from 'react-router'
4-
import { ButtonWithLoader, importComponentFromFELibrary, sortObjectArrayAlphabetically } from '../common'
4+
import {
5+
ButtonWithLoader,
6+
FloatingVariablesSuggestions,
7+
importComponentFromFELibrary,
8+
sortObjectArrayAlphabetically,
9+
} from '../common'
510
import {
611
ServerErrors,
712
showError,
@@ -37,7 +42,7 @@ import {
3742
import { toast } from 'react-toastify'
3843
import { ValidationRules } from '../ciPipeline/validationRules'
3944
import { CIBuildType, CIPipelineDataType, CIPipelineType } from '../ciPipeline/types'
40-
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
45+
import { ReactComponent as Close } from '../../assets/icons/ic-cross.svg'
4146
import Tippy from '@tippyjs/react'
4247
import { PreBuild } from './PreBuild'
4348
import { Sidebar } from './Sidebar'
@@ -189,6 +194,7 @@ export default function CIPipeline({
189194
list.push({
190195
id: 0,
191196
clusterName: '',
197+
clusterId: null,
192198
name: DEFAULT_ENV,
193199
active: false,
194200
isClusterActive: false,
@@ -199,6 +205,7 @@ export default function CIPipeline({
199205
list.push({
200206
id: env.id,
201207
clusterName: env.cluster_name,
208+
clusterId: env.cluster_id,
202209
name: env.environment_name,
203210
active: false,
204211
isClusterActive: env.isClusterActive,
@@ -512,7 +519,7 @@ export default function CIPipeline({
512519
}
513520

514521
let _ciPipeline = ciPipeline
515-
if(selectedEnv && selectedEnv.id !== 0) {
522+
if (selectedEnv && selectedEnv.id !== 0) {
516523
_ciPipeline.environmentId = selectedEnv.id
517524
} else {
518525
_ciPipeline.environmentId = undefined
@@ -692,6 +699,7 @@ export default function CIPipeline({
692699
<h2 className="fs-16 fw-6 lh-1-43 m-0" data-testid="build-pipeline-heading">
693700
{title}
694701
</h2>
702+
695703
<button
696704
type="button"
697705
className="dc__transparent flex icon-dim-24"
@@ -702,6 +710,7 @@ export default function CIPipeline({
702710
<Close className="icon-dim-24" />
703711
</button>
704712
</div>
713+
705714
{isAdvanced && (
706715
<ul className="ml-20 tab-list w-90">
707716
{isJobView ? (
@@ -719,9 +728,7 @@ export default function CIPipeline({
719728
</ul>
720729
)}
721730
<hr className="divider m-0" />
722-
<pipelineContext.Provider
723-
value={contextValue}
724-
>
731+
<pipelineContext.Provider value={contextValue}>
725732
<div className={`ci-pipeline-advance ${isAdvanced ? 'pipeline-container' : ''}`}>
726733
{isAdvanced && (
727734
<div className="sidebar-container">
@@ -808,10 +815,31 @@ export default function CIPipeline({
808815
)
809816
}
810817

818+
const renderFloatingVariablesWidget = () => {
819+
if (!window._env_.ENABLE_SCOPED_VARIABLES || activeStageName === BuildStageVariable.Build) return <></>
820+
821+
return (
822+
<div className="flexbox">
823+
<div className="floating-scoped-variables-widget">
824+
<FloatingVariablesSuggestions
825+
zIndex={21}
826+
appId={appId}
827+
envId={selectedEnv?.id ? String(selectedEnv.id) : null}
828+
clusterId={selectedEnv?.clusterId}
829+
/>
830+
</div>
831+
</div>
832+
)
833+
}
834+
811835
return ciPipelineId || isAdvanced ? (
812-
<Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
813-
{renderCIPipelineModal()}
814-
</Drawer>
836+
<>
837+
{renderFloatingVariablesWidget()}
838+
839+
<Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
840+
{renderCIPipelineModal()}
841+
</Drawer>
842+
</>
815843
) : (
816844
<VisibleModal className="">{renderCIPipelineModal()}</VisibleModal>
817845
)

‎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/ClusterNodes/ClusterSelectionList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export default function ClusterSelectionList({
145145
/>
146146
</div>
147147
<div>
148-
{errorCount > 0 ? (
148+
{clusterData.errorInNodeListing ? (
149149
<Tippy className="default-tt w-200" arrow={false} content={clusterData.errorInNodeListing}>
150150
<div className="flexbox">
151151
<Error className="mt-2 mb-2 mr-8 icon-dim-18" />

‎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
}

0 commit comments

Comments
 (0)