Kubecon 2025

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.19.4-pre-0",
+    "version": "1.19.4-pre-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -116,6 +116,7 @@
         "@uiw/react-codemirror": "4.23.7",
         "@xyflow/react": "12.4.2",
         "ansi_up": "^5.2.1",
+        "chart.js": "^4.5.0",
         "codemirror-json-schema": "0.8.0",
         "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",

src/Common/Constants.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { CostBreakdownItemViewParamsType, CostBreakdownViewType } from 'src/Pages-Devtron-2.0'
+
 import { SelectPickerOptionType } from '@Shared/Components'
 
 export const FALLBACK_REQUEST_TIMEOUT = 60000
@@ -50,6 +52,9 @@ export const PATTERNS = {
 
 const GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP = '/global-config/templates/devtron-apps'
 
+const APPLICATION_MANAGEMENT_ROOT = '/application-management'
+const COST_VISIBILITY_ROOT = '/cost-visibility'
+
 export const URLS = {
     LOGIN: '/login',
     LOGIN_SSO: '/login/sso',
@@ -88,6 +93,17 @@ export const URLS = {
     GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/detail/:appId`,
     LICENSE_AUTH: '/license-auth',
     GLOBAL_CONFIG_EDIT_CLUSTER: '/global-config/cluster-env/edit/:clusterId',
+    COST_VISIBILITY: COST_VISIBILITY_ROOT,
+    COST_VISIBILITY_OVERVIEW: `${COST_VISIBILITY_ROOT}/overview`,
+    COST_BREAKDOWN_ROUTE: `${COST_VISIBILITY_ROOT}/breakdown/:breakdownViewType`,
+    COST_BREAKDOWN_CLUSTERS: `${COST_VISIBILITY_ROOT}/breakdown/${CostBreakdownViewType.CLUSTERS}`,
+    COST_BREAKDOWN_ENVIRONMENTS: `${COST_VISIBILITY_ROOT}/breakdown/${CostBreakdownViewType.ENVIRONMENTS}`,
+    COST_BREAKDOWN_PROJECTS: `${COST_VISIBILITY_ROOT}/breakdown/${CostBreakdownViewType.PROJECTS}`,
+    COST_BREAKDOWN_APPLICATIONS: `${COST_VISIBILITY_ROOT}/breakdown/${CostBreakdownViewType.APPLICATIONS}`,
+    COST_BREAKDOWN_ITEM_NAME: `:${CostBreakdownItemViewParamsType.ITEM_NAME}`,
+    COST_CONFIGURATIONS: `${COST_VISIBILITY_ROOT}/configurations`,
+    APPLICATION_MANAGEMENT: APPLICATION_MANAGEMENT_ROOT,
+    APPLICATION_MANAGEMENT_OVERVIEW: `${APPLICATION_MANAGEMENT_ROOT}/overview`,
 } as const
 
 export const ROUTES = {

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -47,6 +47,7 @@ export const KEYBOARD_KEYS_MAP = {
     Delete: '⌦',
     '.': '.',
     Space: 'Space',
+    '>': '>',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Common/SearchBar/SearchBar.component.tsx

@@ -16,10 +16,8 @@
 
 import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react'
 
-import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
-import { ReactComponent as Search } from '@Icons/ic-search.svg'
 import { useRegisterShortcut } from '@Common/Hooks'
-import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components'
+import { Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
 
 import { debounce, noop } from '../Helper'
@@ -74,6 +72,7 @@ const SearchBar = ({
     noBackgroundAndBorder = false,
     size = ComponentSizeType.medium,
     keyboardShortcut,
+    variant = 'default',
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -157,11 +156,19 @@ const SearchBar = ({
     return (
         <div className={`search-bar-container ${containerClassName || ''}`}>
             <div
-                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bg__secondary en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 ${getSearchBarHeightFromSize(size)}`}
+                className={`search-bar search-bar--${variant} ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bg__secondary en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 ${getSearchBarHeightFromSize(size)}`}
             >
-                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
+                <span
+                    className="search-bar__icon dc__position-abs icon-dim-16"
+                    style={
+                        variant === 'sidenav' ? { ['--overrideIconColor' as string]: 'var(--sidenav-input-icon)' } : {}
+                    }
+                >
+                    <Icon name="ic-magnifying-glass" color="N600" />
+                </span>
                 <input
                     placeholder="Search"
+                    data-variant={variant}
                     data-testid={dataTestId}
                     type="text"
                     {...inputProps}
@@ -176,9 +183,11 @@ const SearchBar = ({
                 />
                 {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
                 {showClearButton ? (
-                    <div className="flex search-bar__clear-button dc__position-abs dc__transparent">
+                    <div
+                        className={`flex search-bar__clear-btn search-bar__clear-btn--${variant} dc__position-abs dc__transparent`}
+                    >
                         <Button
-                            icon={<ICCross />}
+                            icon={<Icon name="ic-close-small" color={null} />}
                             size={ComponentSizeType.xs}
                             variant={ButtonVariantType.borderLess}
                             style={ButtonStyleType.negativeGrey}

src/Common/SearchBar/searchBar.scss

@@ -15,6 +15,8 @@
  */
 
 .search-bar {
+    $root: &;
+
     &:focus,
     &:focus-within {
         outline: none;
@@ -29,18 +31,50 @@
         }
     }
 
+    &#{$root}--sidenav {
+        background: transparent;
+        border-color: var(--sidenav-input-border);
+        min-width: 0;
+
+        &:hover {
+            border-color: var(--sidenav-input-border-hover);
+        }
+
+        &:focus,
+        &:focus-within {
+            border: solid 1px var(--sidenav-input-border-focus) !important;
+        }
+
+        #{$root}__input {
+            color: var(--sidenav-text);
+            background: transparent;
+
+            &::placeholder {
+                color: var(--sidenav-input-placeholder);
+            }
+        }
+    }
+
     &__icon {
         z-index: 1;
         top: 50%;
         left: 8px;
         transform: translateY(-50%);
     }
 
-    &__clear-button {
-        right: 0;
+    &__clear-btn {
+        right: 2px;
         top: 50%;
         transform: translateY(-50%);
         z-index: 1;
+
+        &#{$root}__clear-btn--sidenav {
+            .button {
+                svg *[stroke^='#']:not([data-style-override='false']) {
+                    stroke: var(--sidenav-input-icon);
+                }
+            }
+        }
     }
 
     &__kbd-shortcut {

src/Common/SearchBar/types.ts

@@ -71,4 +71,8 @@ export interface SearchBarProps {
      * @note This is displayed in place of the dropdown indicator
      */
     keyboardShortcut?: SupportedKeyboardKeysType
+    /**
+     * @default 'default'
+     */
+    variant?: 'default' | 'sidenav'
 }

src/Common/Types.ts

@@ -63,9 +63,6 @@ export interface ResponseType<T = any> {
 
 export interface APIOptions {
     timeout?: number
-    /**
-     * @deprecated Use abortController instead
-     */
     signal?: AbortSignal
     abortControllerRef?: MutableRefObject<AbortController>
     /**

src/Pages-Devtron-2.0/ApplicationManagement/Overview/Overview.tsx

@@ -0,0 +1 @@
+export const Overview = () => <div>Overview</div>

src/Pages-Devtron-2.0/ApplicationManagement/Overview/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/ApplicationManagement/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/Automation&Enablement/Overview/Overview.tsx

@@ -0,0 +1 @@
+export const Overview = () => <div>Overview</div>

src/Pages-Devtron-2.0/Automation&Enablement/Overview/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/Automation&Enablement/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/CostVisibility/Overview/Overview.tsx

@@ -0,0 +1 @@
+export const Overview = () => <div>Overview</div>

src/Pages-Devtron-2.0/CostVisibility/Overview/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/CostVisibility/Shared/index.ts

@@ -0,0 +1 @@
+export * from './types'

src/Pages-Devtron-2.0/CostVisibility/Shared/types.ts

@@ -0,0 +1,10 @@
+export enum CostBreakdownViewType {
+    CLUSTERS = 'clusters',
+    ENVIRONMENTS = 'environments',
+    PROJECTS = 'projects',
+    APPLICATIONS = 'applications',
+}
+
+export enum CostBreakdownItemViewParamsType {
+    ITEM_NAME = 'itemName',
+}

src/Pages-Devtron-2.0/CostVisibility/index.ts

@@ -0,0 +1 @@
+export * from './Shared'

src/Pages-Devtron-2.0/GlobalConfiguration/Overview/Overview.tsx

@@ -0,0 +1 @@
+export const Overview = () => <div>Overview</div>

src/Pages-Devtron-2.0/GlobalConfiguration/Overview/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/GlobalConfiguration/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/GlobalOverview/GlobalOverview.tsx

@@ -0,0 +1 @@
+export const GlobalOverview = () => <div>GlobalOverview</div>

src/Pages-Devtron-2.0/GlobalOverview/index.ts

@@ -0,0 +1 @@
+export * from './GlobalOverview'

src/Pages-Devtron-2.0/InfrastructureManagement/Overview/Overview.tsx

@@ -0,0 +1 @@
+export const Overview = () => <div>Overview</div>

src/Pages-Devtron-2.0/InfrastructureManagement/Overview/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/InfrastructureManagement/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/SecurityCenter/Overview/Overview.tsx

@@ -0,0 +1 @@
+export const Overview = () => <div>Overview</div>

src/Pages-Devtron-2.0/SecurityCenter/Overview/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/SecurityCenter/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/SoftwareReleaseManagement/Overview/Overview.tsx

@@ -0,0 +1 @@
+export const Overview = () => <div>Overview</div>

src/Pages-Devtron-2.0/SoftwareReleaseManagement/Overview/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/SoftwareReleaseManagement/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/index.ts

@@ -0,0 +1 @@
+export * from './CostVisibility'