@devtron-labs/devtron-fe-common-lib 4.0.7-beta-2 → 4.0.7-beta-12

package/dist/Shared/Components/CICDHistory/constants.d.ts

@@ -1,4 +1,5 @@
-import { WorkflowStageStatusType } from './types';
+import { FiltersTypeEnum, TableProps } from '../Table';
+import { ResourceConflictItemType, WorkflowStageStatusType } from './types';
 export declare const HISTORY_LABEL: {
     APPLICATION: string;
     ENVIRONMENT: string;
@@ -85,3 +86,5 @@ export declare const PROGRESSING_STATUS: {
 };
 export declare const FAILED_WORKFLOW_STAGE_STATUS_MAP: Record<Extract<WorkflowStageStatusType, WorkflowStageStatusType.ABORTED | WorkflowStageStatusType.FAILED | WorkflowStageStatusType.TIMEOUT>, true>;
 export declare const APP_HEALTH_DROP_DOWN_LIST: string[];
+export declare const RESOURCE_CONFLICT_DEPLOY_ERROR = "cannot be imported into the current release: invalid ownership metadata;";
+export declare const CONFLICTED_RESOURCES_COLUMNS: TableProps<ResourceConflictItemType, FiltersTypeEnum.STATE>['columns'];

package/dist/Shared/Components/CICDHistory/service.d.ts

@@ -1,5 +1,5 @@
 import { ResponseType } from '../../../Common';
-import { DeploymentHistoryDetail, DeploymentHistoryResult, DeploymentStatusDetailsResponse, ModuleConfigResponse, TriggerDetailsResponseType, TriggerHistoryParamsType } from './types';
+import { DeploymentHistoryDetail, DeploymentHistoryResult, DeploymentStatusDetailsResponse, GetResourceConflictDetailsParamsType, ModuleConfigResponse, ResourceConflictItemType, ResourceConflictRedeployParamsType, TriggerDetailsResponseType, TriggerHistoryParamsType } from './types';
 export declare function getTriggerDetails({ appId, envId, pipelineId, triggerId, fetchIdData, }: {
     appId: any;
     envId: any;
@@ -21,3 +21,5 @@ export declare function getManualSync(params: {
 export declare const prepareHistoryData: (rawData: any, historyComponent: string, skipDecode?: boolean) => DeploymentHistoryDetail;
 export declare const getTriggerHistory: ({ appId, envId, pagination, releaseId, showCurrentReleaseDeployments, }: TriggerHistoryParamsType) => Promise<Pick<DeploymentHistoryResult, "result">>;
 export declare const getModuleConfigured: (moduleName: string) => Promise<ModuleConfigResponse>;
+export declare const resourceConflictRedeploy: ({ pipelineId, triggerId, appId, }: ResourceConflictRedeployParamsType) => Promise<void>;
+export declare const getResourceConflictDetails: ({ appId, pipelineId, triggerId, signal, }: GetResourceConflictDetailsParamsType) => Promise<ResourceConflictItemType[]>;

package/dist/Shared/Components/CICDHistory/types.d.ts

@@ -1,8 +1,9 @@
-import { CSSProperties, MutableRefObject, ReactElement, ReactNode } from 'react';
+import { CSSProperties, JSX, MutableRefObject, ReactElement, ReactNode } from 'react';
 import { SupportedKeyboardKeysType } from '../../../Common/Hooks/UseRegisterShortcut/types';
+import { GVKType } from '../../../Pages/ResourceBrowser';
 import { DeploymentAppTypes, FilterConditionsListType, ImageComment, OptionType, PaginationProps, PromotionApprovalMetadataType, ReleaseTag, ResponseType, TooltipProps, UserApprovalMetadataType, useScrollable } from '../../../Common';
 import { DeploymentStageType } from '../../constants';
-import { AggregationKeys, AppDetails, DeploymentStatusDetailsBreakdownDataType, DeploymentStatusDetailsType, DeploymentStatusTimelineType, DeploymentStrategyType, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType, TargetPlatformsDTO } from '../../types';
+import { AggregationKeys, AppDetails, BaseURLParams, DeploymentStatusDetailsBreakdownDataType, DeploymentStatusDetailsType, DeploymentStatusTimelineType, DeploymentStrategyType, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType, TargetPlatformsDTO } from '../../types';
 import { TargetPlatformBadgeListProps } from '../TargetPlatforms';
 export declare enum HistoryComponentType {
     CI = "CI",
@@ -182,8 +183,9 @@ export interface SidebarType extends RenderRunSourceType {
     handleViewAllHistory?: () => void;
     children?: React.ReactNode;
     resourceId?: number;
+    path: string;
 }
-export interface HistorySummaryCardType extends RenderRunSourceType, Pick<History, 'workflowExecutionStages' | 'podName' | 'namespace'> {
+export interface HistorySummaryCardType extends RenderRunSourceType, Pick<History, 'workflowExecutionStages' | 'podName' | 'namespace'>, Pick<SidebarType, 'path'> {
     id: number;
     status: string;
     startedOn: string;
@@ -257,7 +259,30 @@ export interface TriggerDetailsType extends Pick<StartDetailsType, 'renderTarget
     workerPodName?: string;
     triggerMetadata?: string;
     renderDeploymentHistoryTriggerMetaText: (triggerMetaData: string, onlyRenderIcon?: boolean) => JSX.Element;
+    /**
+     * Only present in case of CD trigger details as of now
+     */
+    isLatest?: boolean;
+    /**
+     * Only present in case of CD trigger details as of now
+     */
+    appName?: string;
+}
+export declare enum ResourceConflictModalType {
+    DEPLOY_DIALOG = "DEPLOY_DIALOG",
+    RESOURCE_DETAIL_MODAL = "RESOURCE_DETAIL_MODAL"
 }
+interface ResourceConflictDialogBaseProps extends Required<Pick<TriggerDetailsType, 'appName' | 'environmentName'>> {
+    handleClose: () => void;
+}
+export interface ResourceConflictDeployDialogProps extends ResourceConflictDialogBaseProps {
+}
+export interface ResourceConflictDetailsModalProps extends ResourceConflictDialogBaseProps {
+}
+export type TriggerOutputURLParamsType = Pick<BaseURLParams, 'appId' | 'envId'> & {
+    triggerId: string;
+    pipelineId: string;
+};
 export type ProgressingStatusType = {
     stage: DeploymentStageType;
     type: HistoryComponentType;
@@ -283,6 +308,7 @@ export interface WorkerStatusType extends Pick<ExecutionInfoType['workerDetails'
      * @default false
      */
     hideShowMoreMessageButton?: boolean;
+    children?: ReactNode;
 }
 export type FinishedType = {
     artifact: string;
@@ -345,6 +371,7 @@ export type CIListItemType = Pick<History, 'promotionApprovalMetadata' | 'isDepl
     tagsEditable: boolean;
     hideImageTaggingHardDelete: boolean;
     isSuperAdmin: boolean;
+    artifact: string;
 } | {
     type: 'report';
     targetPlatforms?: never;
@@ -356,6 +383,7 @@ export type CIListItemType = Pick<History, 'promotionApprovalMetadata' | 'isDepl
     tagsEditable?: never;
     hideImageTaggingHardDelete?: never;
     isSuperAdmin?: never;
+    artifact?: never;
 });
 export interface TriggerOutputProps extends RenderRunSourceType, Pick<TriggerDetailsType, 'renderTargetConfigInfo'> {
     fullScreenView: boolean;
@@ -380,8 +408,9 @@ export interface TriggerOutputProps extends RenderRunSourceType, Pick<TriggerDet
     setTriggerHistory: React.Dispatch<React.SetStateAction<Map<Number, History>>>;
     scrollToTop: ReturnType<typeof useScrollable>[1];
     scrollToBottom: ReturnType<typeof useScrollable>[2];
+    pathPattern: string;
 }
-export interface HistoryLogsProps extends Pick<TriggerOutputProps, 'scrollToTop' | 'scrollToBottom' | 'setFullScreenView' | 'deploymentAppType' | 'isBlobStorageConfigured' | 'appReleaseTags' | 'tagsEditable' | 'hideImageTaggingHardDelete' | 'selectedEnvironmentName' | 'processVirtualEnvironmentDeploymentData' | 'renderDeploymentApprovalInfo' | 'renderCIListHeader' | 'renderVirtualHistoryArtifacts' | 'fullScreenView' | 'appName' | 'triggerHistory'>, Pick<TargetPlatformBadgeListProps, 'targetPlatforms'> {
+export interface HistoryLogsProps extends Pick<TriggerOutputProps, 'scrollToTop' | 'scrollToBottom' | 'setFullScreenView' | 'deploymentAppType' | 'isBlobStorageConfigured' | 'appReleaseTags' | 'tagsEditable' | 'hideImageTaggingHardDelete' | 'selectedEnvironmentName' | 'processVirtualEnvironmentDeploymentData' | 'renderDeploymentApprovalInfo' | 'renderCIListHeader' | 'renderVirtualHistoryArtifacts' | 'fullScreenView' | 'appName' | 'triggerHistory' | 'pathPattern'>, Pick<TargetPlatformBadgeListProps, 'targetPlatforms'> {
     triggerDetails: History;
     loading: boolean;
     userApprovalMetadata: UserApprovalMetadataType;
@@ -479,12 +508,6 @@ export interface AggregatedNodes {
         };
     };
 }
-export interface PodMetadatum {
-    name: string;
-    uid: string;
-    containers: string[];
-    isNew: boolean;
-}
 export declare const STATUS_SORTING_ORDER: {
     missing: number;
     degraded: number;
@@ -621,11 +644,11 @@ export interface ModuleConfigResponse extends ResponseType {
         enabled: boolean;
     };
 }
-export interface DeploymentHistoryBaseParamsType {
+export type DeploymentHistoryBaseParamsType = {
     appId: string;
     envId: string;
     pipelineId: string;
-}
+};
 export interface TriggerHistoryParamsType {
     appId: number;
     envId: number;
@@ -659,16 +682,25 @@ export interface StageDetailType extends Pick<StageInfoDTO, 'stage' | 'startTime
     isOpen: boolean;
     targetPlatforms?: StageInfoDTO['metadata']['targetPlatforms'];
 }
-export interface LogStageAccordionProps extends StageDetailType, Pick<LogsRendererType, 'fullScreenView'> {
+export type LogVirtualItem = {
+    type: 'header';
+    stageIndex: number;
+} | {
+    type: 'log';
+    stageIndex: number;
+    logIndex: number;
+};
+export interface LogStageHeaderProps extends Omit<StageDetailType, 'logs'>, Pick<LogsRendererType, 'fullScreenView'> {
     handleStageClose: (index: number) => void;
     handleStageOpen: (index: number) => void;
     stageIndex: number;
+    logsRendererRef: MutableRefObject<HTMLDivElement>;
     /**
-     * A stage is loading if it is last in current stage list and event is not closed
+     * When false, the sticky CSS is not applied to the button.
+     * The virtual list wrapper div controls positioning instead.
+     * @default true
      */
-    isLoading: boolean;
-    searchIndex: string;
-    logsRendererRef: MutableRefObject<HTMLDivElement>;
+    applySticky?: boolean;
 }
 export interface CreateMarkupReturnType {
     __html: string;
@@ -701,4 +733,43 @@ export interface CIPipelineSourceConfigInterface {
     primaryBranchAfterRegex?: string;
     rootClassName?: string;
 }
+export interface ResourceConflictItemType {
+    name: string;
+    namespace: string;
+    gvk: GVKType;
+    gvkTitle: string;
+    clusterId: number;
+    /**
+     * Generated at ui
+     */
+    id: string;
+}
+export interface ConflictedResourcesTableProps {
+    resourceConflictDetails: ResourceConflictItemType[];
+}
+export interface ResourceConflictDeployDialogURLParamsType extends Pick<TriggerOutputURLParamsType, 'appId' | 'envId' | 'pipelineId' | 'triggerId'> {
+}
+export interface ResourceConflictRedeployParamsType extends Pick<ResourceConflictDeployDialogURLParamsType, 'pipelineId' | 'triggerId' | 'appId'> {
+}
+export interface ResourceConflictRedeployPayloadType {
+    pipelineId: number;
+    appId: number;
+    wfrIdForDeploymentWithSpecificTrigger: number;
+    helmRedeploymentRequest: true;
+}
+export interface GetResourceConflictDetailsParamsType extends Pick<ResourceConflictDeployDialogURLParamsType, 'pipelineId' | 'triggerId' | 'appId'> {
+    signal: AbortSignal;
+}
+export interface ResourceConflictListItemDTO {
+    clusterId: number;
+    conflictingResources: {
+        name: string;
+        namespace: string;
+        groupVersionKind: {
+            Group: string;
+            Version: string;
+            Kind: NodeType;
+        };
+    }[];
+}
 export {};

package/dist/Shared/Components/CICDHistory/utils.d.ts

@@ -1,11 +1,11 @@
-import { ReactElement } from 'react';
+import { JSX, ReactElement } from 'react';
 import { DeploymentAppTypes } from '../../../Common/Types';
 import { DeploymentStatusBreakdownItemType, Node } from '../../types';
 import { TabGroupProps } from '../TabGroup';
 import { DeploymentHistoryResultObject, ExecutionInfoType, History, NodeFilters, NodeStatus, StageStatusType, TriggerHistoryFilterCriteriaProps, TriggerHistoryFilterCriteriaType, WorkflowExecutionStagesMapDTO, WorkflowStageStatusType } from './types';
 export declare const getTriggerHistoryFilterCriteria: ({ appId, envId, releaseId, showCurrentReleaseDeployments, }: TriggerHistoryFilterCriteriaProps) => TriggerHistoryFilterCriteriaType;
 export declare const getParsedTriggerHistory: (result: any) => DeploymentHistoryResultObject;
-export declare const buildHoverHtmlForWebhook: (eventName: any, condition: any, selectors: any) => JSX.Element;
+export declare const buildHoverHtmlForWebhook: (eventName: any, condition: any, selectors: any) => import("react/jsx-runtime").JSX.Element;
 export declare const getStageStatusIcon: (status: StageStatusType) => JSX.Element;
 export declare const getLogSearchIndex: ({ stageIndex, lineNumberInsideStage, }: Record<"stageIndex" | "lineNumberInsideStage", number>) => string;
 export declare const sanitizeWorkflowExecutionStages: (workflowExecutionStages: WorkflowExecutionStagesMapDTO["workflowExecutionStages"]) => ExecutionInfoType | null;
@@ -35,8 +35,10 @@ export declare const getStatusFilters: ({ allNodeCount, missingNodeCount, failed
         count: number;
     })[];
 };
-export declare const getAppStatusIcon: (status: NodeStatus | NodeFilters, hideMessage?: boolean) => JSX.Element;
+export declare const getAppStatusIcon: (status: NodeStatus | NodeFilters, hideMessage?: boolean) => import("react/jsx-runtime").JSX.Element;
 export declare const getTriggerStatusIcon: (status: string) => string;
 export declare const renderDeploymentTimelineIcon: (iconState: DeploymentStatusBreakdownItemType["icon"]) => JSX.Element;
 export declare const getDeploymentTimelineBGColorFromIcon: (icon: DeploymentStatusBreakdownItemType["icon"]) => string;
 export declare const getTriggerOutputTabs: (triggerDetails: History, deploymentAppType: DeploymentAppTypes) => TabGroupProps["tabs"];
+export declare const getSortedTriggerHistory: (triggerHistory: Map<number, History>) => [number, History][];
+export declare const findScrollableAncestor: (el: HTMLElement | null) => HTMLElement | null;

package/dist/Shared/Components/CMCS/ConfigMapSecretReadyOnly.d.ts

@@ -1,3 +1,3 @@
 import { ConfigMapSecretReadyOnlyProps } from './types';
-declare const ConfigMapSecretReadyOnly: ({ componentType, isJob, configMapSecretData, cmSecretStateLabel, areScopeVariablesResolving, fallbackMergeStrategy, hideCodeEditor, containerClassName, displayKeys, isBorderLess, }: ConfigMapSecretReadyOnlyProps) => JSX.Element;
+declare const ConfigMapSecretReadyOnly: ({ componentType, isJob, configMapSecretData, cmSecretStateLabel, areScopeVariablesResolving, fallbackMergeStrategy, hideCodeEditor, containerClassName, displayKeys, isBorderLess, }: ConfigMapSecretReadyOnlyProps) => import("react/jsx-runtime").JSX.Element;
 export default ConfigMapSecretReadyOnly;

package/dist/Shared/Components/CMCS/helpers.d.ts

@@ -1 +1 @@
-export declare const renderHashiOrAwsDeprecatedInfo: () => JSX.Element;
+export declare const renderHashiOrAwsDeprecatedInfo: () => import("react/jsx-runtime").JSX.Element;

package/dist/Shared/Components/Card/Card.component.d.ts

@@ -0,0 +1,3 @@
+import { CardProps } from './types';
+declare const Card: ({ onClick, children, isLoading, shimmerVariant, variant, flexGap, flexDirection, padding, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/Shared/Components/Card/constants.d.ts

@@ -0,0 +1,4 @@
+import { CardProps } from './types';
+export declare const DEFAULT_BORDER_RADIUS = 8;
+export declare const DEFAULT_FLEX_GAP = 0;
+export declare const VARIANT_TO_BORDER_CLASS_MAP: Record<CardProps['variant'], string>;

package/dist/Shared/Components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.component';
+export type { CardProps } from './types';

package/dist/Shared/Components/Card/types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ComponentLayoutType } from '../../types';
+export type CardProps = {
+    children: ReactNode;
+    onClick?: () => void;
+    /**
+     * @default primary--outlined
+     */
+    variant?: 'primary--outlined' | 'secondary--outlined';
+    /**
+     * @default 'column'
+     */
+    flexDirection?: ComponentLayoutType;
+    /**
+     * @default 0px
+     */
+    flexGap?: 0 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32;
+    padding?: 0 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32;
+} & ({
+    isLoading: boolean;
+    shimmerVariant: 'A' | 'B' | 'C';
+} | {
+    isLoading?: never;
+    shimmerVariant?: never;
+});

package/dist/Shared/Components/Charts/Chart.component.d.ts

@@ -0,0 +1,121 @@
+import { ChartProps } from './types';
+/**
+ * A versatile Chart component that renders different types of charts using Chart.js.
+ * Supports area charts, pie charts, semi-pie charts, stacked bar charts (vertical/horizontal), and line charts.
+ *
+ * The component automatically adapts to theme changes and provides consistent styling
+ * across all chart types. Colors are provided by the user through the CHART_COLORS constant
+ * or custom color tokens.
+ *
+ * @example
+ * ```tsx
+ * [Area Chart Example]
+ * <Chart
+ *   id="quarterly-growth"
+ *   type="area"
+ *   xAxisLabels={['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023']}
+ *   datasets={[{
+ *     datasetName: 'Revenue Growth (%)',
+ *     yAxisValues: [15.2, 18.7, 22.3, 19.8],
+ *     backgroundColor: 'LavenderPurple300'
+ *   }]}
+ * />
+ *
+ * [Pie Chart Example]
+ * <Chart
+ *   id="technology-adoption"
+ *   type="pie"
+ *   xAxisLabels={['React', 'Vue.js', 'Angular']}
+ *   datasets={{
+ *     datasetName: 'Adoption Rate (%)',
+ *     yAxisValues: [45.2, 28.7, 35.4],
+ *     colors: ['SkyBlue300', 'AquaTeal400', 'LavenderPurple300']
+ *   }}
+ * />
+ *
+ * [Semi-Pie Chart Example with Center Text]
+ * <Chart
+ *   id="performance-metrics"
+ *   type="semiPie"
+ *   xAxisLabels={['Good', 'Average', 'Poor']}
+ *   datasets={{
+ *     datasetName: 'Performance Score (%)',
+ *     yAxisValues: [65, 25, 10],
+ *     colors: ['LimeGreen500', 'GoldenYellow400', 'CoralRed400']
+ *   }}
+ *   centerText={{
+ *     text: '85%',
+ *     fontSize: 24,
+ *     fontWeight: '600'
+ *   }}
+ * />
+ *
+ * [Line Chart Example (non-stacked, non-filled)]
+ * <Chart
+ *   id="traffic-trends"
+ *   type="line"
+ *   xAxisLabels={['Jan', 'Feb', 'Mar', 'Apr']}
+ *   datasets={[{
+ *     datasetName: 'Website Traffic',
+ *     yAxisValues: [120, 190, 300, 500],
+ *     borderColor: 'SkyBlue500'
+ *   }]}
+ * />
+ *
+ * [Stacked Bar Chart Example]
+ * <Chart
+ *   id="team-allocation"
+ *   type="stackedBar"
+ *   xAxisLabels={['Q1', 'Q2', 'Q3', 'Q4']}
+ *   datasets={[
+ *     {
+ *       datasetName: 'Frontend',
+ *       yAxisValues: [120, 150, 180, 200],
+ *       backgroundColor: 'SkyBlue600'
+ *     },
+ *     {
+ *       datasetName: 'Backend',
+ *       yAxisValues: [80, 100, 120, 140],
+ *       backgroundColor: 'AquaTeal600'
+ *     }
+ *   ]}
+ * />
+ * ```
+ *
+ * @param id - Unique identifier for the chart canvas element
+ * @param type - Chart type: 'area', 'pie', 'semiPie', 'stackedBar', 'stackedBarHorizontal', or 'line'
+ * @param xAxisLabels - Array of labels for the x-axis (or categories for pie/semi-pie charts)
+ * @param datasets - Chart data: array of datasets for most charts, single dataset object for pie/semi-pie charts
+ *
+ * @performance
+ * **Memoization Recommendations:**
+ * - `xAxisLabels`: Should be memoized with useMemo() if derived from complex calculations
+ * - `datasets`: Should be memoized with useMemo() as it contains arrays and objects that cause re-renders
+ * - Avoid passing inline objects or arrays directly to these props
+ *
+ * @example
+ * ```tsx
+ * [Good: Memoized props prevent unnecessary re-renders]
+ * const labels = useMemo(() => quarters.map(q => `Q${q}`), [quarters])
+ * const chartDatasets = useMemo(() => [
+ *   {
+ *     datasetName: 'Revenue',
+ *     yAxisValues: revenueData,
+ *     backgroundColor: 'LavenderPurple300'
+ *   }
+ * ], [revenueData])
+ *
+ * return <Chart id="revenue-chart" type="area" xAxisLabels={labels} datasets={chartDatasets} />
+ * ```
+ *
+ * @notes
+ * - Chart automatically re-renders when theme changes (light/dark mode)
+ * - Line charts are rendered as non-stacked and non-filled by default
+ * - Pie and semi-pie charts expect a single dataset object instead of an array
+ * - Semi-pie charts render as half-circles, ideal for gauges or progress indicators
+ * - Center text can be added to pie and semi-pie charts using the centerText prop
+ * - Colors should reference CHART_COLORS tokens for consistency
+ * - Component destroys and recreates Chart.js instance on prop changes for optimal performance
+ */
+declare const Chart: (props: ChartProps) => import("react/jsx-runtime").JSX.Element;
+export default Chart;

package/dist/Shared/Components/Charts/constants.d.ts

@@ -0,0 +1,10 @@
+import { AppThemeType } from '../../Providers';
+import { ChartColorKey } from './types';
+export declare const CHART_COLORS: Record<AppThemeType, Record<ChartColorKey, string>>;
+export declare const CHART_GRID_LINES_COLORS: Record<AppThemeType, string>;
+export declare const CHART_AXIS_COLORS: Record<AppThemeType, string>;
+export declare const CHART_AXIS_LABELS_COLOR: Record<AppThemeType, string>;
+export declare const CHART_CANVAS_BACKGROUND_COLORS: Record<AppThemeType, string>;
+export declare const LINE_DASH: number[];
+export declare const MAX_BAR_THICKNESS = 96;
+export declare const DIS_JOINT_CHART_POINT_RADIUS = 4;

package/dist/Shared/Components/Charts/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Chart } from './Chart.component';
+export { CHART_COLORS } from './constants';
+export type { CenterTextConfig, ChartColorKey, ChartProps, ChartType, ReferenceLineConfigType, SimpleDataset, SimpleDatasetForPie, } from './types';
+export { chartColorGenerator } from './utils';

package/dist/Shared/Components/Charts/plugins.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { Plugin } from 'chart.js';
+import { AppThemeType } from '../../Providers';
+import { CenterTextConfig, ChartType, ReferenceLineConfigType } from './types';
+export declare const drawReferenceLine: (config: ReferenceLineConfigType, id: string, appTheme: AppThemeType) => Plugin;
+export declare const htmlLegendPlugin: (id: string, ref: RefObject<HTMLDivElement>, type: ChartType) => Plugin;
+export declare const drawCenterText: (config: CenterTextConfig, appTheme: AppThemeType) => Plugin;

package/dist/Shared/Components/Charts/types.d.ts

@@ -0,0 +1,133 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { TooltipOptions, TooltipPositionerFunction } from 'chart.js';
+import { TooltipProps } from '../../../Common/Tooltip';
+import { AppThemeType } from '../../Providers';
+import { Never } from '../../types';
+export type ChartType = 'area' | 'pie' | 'semiPie' | 'stackedBar' | 'stackedBarHorizontal' | 'line';
+export type ColorTokensType = 'DeepPlum' | 'Magenta' | 'Slate' | 'Lavender' | 'SkyBlue' | 'AquaTeal' | 'LimeGreen' | 'CoralRed' | 'GoldenYellow' | 'CharcoalGray' | 'Gray' | 'SunsetOrange';
+export type VariantsType = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export type ChartColorKey = `${ColorTokensType}${VariantsType}`;
+export type ChartTypeWithoutPie = Exclude<ChartType, 'pie' | 'semiPie'>;
+interface BaseSimpleDataset {
+    datasetName: string;
+    yAxisValues: number[];
+}
+export interface SimpleDataset extends BaseSimpleDataset {
+    color: ChartColorKey;
+    isClickable?: boolean;
+}
+export interface SimpleDatasetForLineAndArea extends Omit<SimpleDataset, 'isClickable'> {
+    isDashed?: boolean;
+}
+export interface SimpleDatasetForPie extends BaseSimpleDataset {
+    colors: Array<ChartColorKey>;
+    isClickable?: boolean[];
+}
+export interface ReferenceLineConfigType {
+    strokeWidth?: number;
+    color?: ChartColorKey;
+    value: number;
+}
+export interface CenterTextConfig {
+    text: string;
+    fontSize?: number;
+    fontWeight?: string | number;
+    color?: string;
+    fontFamily?: string;
+}
+type XYAxisMax = {
+    xAxisMax?: number;
+    yAxisMax?: number;
+    /**
+     * Optional reference lines to draw across the chart
+     */
+    referenceLines?: ReferenceLineConfigType[];
+};
+type OnChartClickHandler = (datasetName: string, value: number) => void;
+type ScaleTickFormatCallbacks = Partial<{
+    xScaleTickFormat: (label: string, index: number) => string | string[] | number | number[];
+    yScaleTickFormat: (value: number, index: number) => string | string[] | number | number[];
+}>;
+export type TypeAndDatasetsType = ({
+    type: 'pie' | 'semiPie';
+    /**
+     * Needs to be memoized
+     */
+    datasets: SimpleDatasetForPie;
+    onChartClick?: OnChartClickHandler;
+    /** Configuration for center text (only for doughnut/pie charts) */
+    centerText?: CenterTextConfig;
+} & Never<XYAxisMax> & Never<ScaleTickFormatCallbacks>) | ({
+    type: 'line';
+    datasets: SimpleDatasetForLineAndArea[];
+    onChartClick?: never;
+    centerText?: never;
+} & XYAxisMax & ScaleTickFormatCallbacks) | ({
+    type: 'area';
+    datasets: SimpleDatasetForLineAndArea;
+    onChartClick?: never;
+    centerText?: never;
+} & XYAxisMax & ScaleTickFormatCallbacks) | ({
+    type: Exclude<ChartType, 'pie' | 'semiPie' | 'line' | 'area'>;
+    datasets: SimpleDataset[];
+    onChartClick?: OnChartClickHandler;
+    centerText?: never;
+} & XYAxisMax & ScaleTickFormatCallbacks);
+export type ChartProps = {
+    id: string;
+    /**
+     * The x-axis labels. Needs to be memoized
+     */
+    xAxisLabels: string[];
+    /**
+     * Hide the x and y axis and grid lines
+     * @default false
+     */
+    hideAxis?: boolean;
+    hideXAxisLabels?: boolean;
+    tooltipConfig?: {
+        getTooltipContent?: (args: Parameters<TooltipOptions['external']>[0]) => ReactNode;
+        /**
+         * @default 'top'
+         */
+        placement?: TooltipProps['placement'];
+        datasetValueFormatter?: (value: number) => string | number;
+    };
+    xScaleTitle?: string;
+    yScaleTitle?: string;
+} & TypeAndDatasetsType;
+export type TransformDatasetProps = {
+    appTheme: AppThemeType;
+} & ({
+    type: 'pie' | 'semiPie';
+    dataset: SimpleDatasetForPie;
+} | {
+    type: 'line' | 'area';
+    dataset: SimpleDatasetForLineAndArea;
+} | {
+    type: Exclude<ChartType, 'pie' | 'semiPie' | 'line' | 'area'>;
+    dataset: SimpleDataset;
+});
+export type GetBackgroundAndBorderColorProps = TransformDatasetProps;
+export type TransformDataForChartProps = {
+    appTheme: AppThemeType;
+} & TypeAndDatasetsType;
+export interface GetDefaultOptionsParams {
+    chartProps: ChartProps;
+    appTheme: AppThemeType;
+    externalTooltipHandler: TooltipOptions['external'];
+    setTooltipVisible: Dispatch<SetStateAction<boolean>>;
+}
+declare module 'chart.js' {
+    interface TooltipPositionerMap {
+        barElementCenterPositioner: TooltipPositionerFunction<'bar'>;
+    }
+}
+export interface HTMLLegendProps {
+    backgroundColor: string;
+    label: string;
+    onClick: () => void;
+    strikeThrough: boolean;
+    variant: 'line' | 'square';
+}
+export {};

package/dist/Shared/Components/Charts/utils.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ChartDataset, ChartOptions, ChartType as ChartJSChartType, Point, TooltipOptions } from 'chart.js';
+import { ChartType, GetDefaultOptionsParams, TransformDataForChartProps } from './types';
+export declare const getChartJSType: (type: ChartType) => ChartJSChartType;
+export declare const getDefaultOptions: ({ chartProps, appTheme, externalTooltipHandler, setTooltipVisible, }: GetDefaultOptionsParams) => ChartOptions;
+export declare const transformDataForChart: (props: TransformDataForChartProps) => (ChartDataset<"line"> | {
+    backgroundColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    borderColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    pointBackgroundColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    pointBorderColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    label: string;
+    data: number[];
+} | {
+    backgroundColor: string[];
+    hoverBackgroundColor: string[];
+    borderColor: string;
+    borderWidth: number;
+    label: string;
+    data: number[];
+} | {
+    backgroundColor: string;
+    hoverBackgroundColor: string;
+    borderColor: string;
+    borderWidth?: undefined;
+    label: string;
+    data: number[];
+})[];
+export declare function chartColorGenerator(): Generator<"DeepPlum400" | "DeepPlum500" | "DeepPlum100" | "DeepPlum200" | "DeepPlum300" | "DeepPlum50" | "DeepPlum600" | "DeepPlum700" | "DeepPlum800" | "DeepPlum900" | "DeepPlum950" | "Magenta400" | "Magenta500" | "Magenta100" | "Magenta200" | "Magenta300" | "Magenta50" | "Magenta600" | "Magenta700" | "Magenta800" | "Magenta900" | "Magenta950" | "Slate400" | "Slate500" | "Slate100" | "Slate200" | "Slate300" | "Slate50" | "Slate600" | "Slate700" | "Slate800" | "Slate900" | "Slate950" | "Lavender400" | "Lavender500" | "Lavender100" | "Lavender200" | "Lavender300" | "Lavender50" | "Lavender600" | "Lavender700" | "Lavender800" | "Lavender900" | "Lavender950" | "SkyBlue400" | "SkyBlue500" | "SkyBlue100" | "SkyBlue200" | "SkyBlue300" | "SkyBlue50" | "SkyBlue600" | "SkyBlue700" | "SkyBlue800" | "SkyBlue900" | "SkyBlue950" | "AquaTeal400" | "AquaTeal500" | "AquaTeal100" | "AquaTeal200" | "AquaTeal300" | "AquaTeal50" | "AquaTeal600" | "AquaTeal700" | "AquaTeal800" | "AquaTeal900" | "AquaTeal950" | "LimeGreen400" | "LimeGreen500" | "LimeGreen100" | "LimeGreen200" | "LimeGreen300" | "LimeGreen50" | "LimeGreen600" | "LimeGreen700" | "LimeGreen800" | "LimeGreen900" | "LimeGreen950" | "CoralRed400" | "CoralRed500" | "CoralRed100" | "CoralRed200" | "CoralRed300" | "CoralRed50" | "CoralRed600" | "CoralRed700" | "CoralRed800" | "CoralRed900" | "CoralRed950" | "GoldenYellow400" | "GoldenYellow500" | "GoldenYellow100" | "GoldenYellow200" | "GoldenYellow300" | "GoldenYellow50" | "GoldenYellow600" | "GoldenYellow700" | "GoldenYellow800" | "GoldenYellow900" | "GoldenYellow950" | "CharcoalGray400" | "CharcoalGray500" | "CharcoalGray100" | "CharcoalGray200" | "CharcoalGray300" | "CharcoalGray50" | "CharcoalGray600" | "CharcoalGray700" | "CharcoalGray800" | "CharcoalGray900" | "CharcoalGray950" | "Gray400" | "Gray500" | "Gray100" | "Gray200" | "Gray300" | "Gray50" | "Gray600" | "Gray700" | "Gray800" | "Gray900" | "Gray950" | "SunsetOrange400" | "SunsetOrange500" | "SunsetOrange100" | "SunsetOrange200" | "SunsetOrange300" | "SunsetOrange50" | "SunsetOrange600" | "SunsetOrange700" | "SunsetOrange800" | "SunsetOrange900" | "SunsetOrange950", void, unknown>;
+export declare const buildChartTooltipFromContext: ({ title, body, labelColors: labelColorsProp, }: Pick<Parameters<TooltipOptions["external"]>[0]["tooltip"], "title" | "body" | "labelColors">) => ReactNode;
+export declare const distanceBetweenPoints: (pt1: Point, pt2: Point) => number;

package/dist/Shared/Components/Chip/Chip.component.d.ts

@@ -1,3 +1,3 @@
 import { ChipProps } from './types';
-declare const Chip: ({ label, startIconProps, startIcon, size: userSize, value, onRemove, style, type, onClick, capitalizeLabel, href, }: ChipProps) => JSX.Element;
+declare const Chip: ({ label, startIconProps, startIcon, size: userSize, value, onRemove, style, type, onClick, capitalizeLabel, href, }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default Chip;

package/dist/Shared/Components/ClusterStatusIcon/ClusterStatusIcon.d.ts

@@ -0,0 +1,3 @@
+import { ClusterStatusIconProps } from './types';
+declare const ClusterStatusIcon: ({ clusterStatus, isVirtualCluster }: ClusterStatusIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ClusterStatusIcon;

package/dist/Shared/Components/ClusterStatusIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as ClusterStatusIcon } from './ClusterStatusIcon';

package/dist/Shared/Components/ClusterStatusIcon/types.d.ts

@@ -0,0 +1,5 @@
+import { ClusterStatusType } from '../../../Pages/ResourceBrowser';
+export interface ClusterStatusIconProps {
+    clusterStatus: ClusterStatusType;
+    isVirtualCluster: boolean;
+}

package/dist/Shared/Components/ClusterStatusIcon/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClusterStatusType } from '../../../Pages/ResourceBrowser';
+export declare const getBulletColorAccToStatus: (status: ClusterStatusType) => "bcg-5" | "bcr-5" | "bcy-5";