Expose essential APIs for Dashboards, ListPage and DetailsPage

frontend/packages/ceph-storage-plugin/src/components/dashboards/object-service/status-card/statuses.tsx

@@ -1,7 +1,6 @@
 import { TFunction } from 'i18next';
 import { PrometheusHealthHandler, SubsystemHealth } from '@console/plugin-sdk';
-import { HealthState } from '@console/shared/src/components/dashboard/status-card/states';
-import { K8sResourceKind } from '@console/internal/module/k8s';
+import { K8sResourceKind, HealthState } from '@console/internal/module/k8s';
 import { getGaugeValue } from '../../../../utils';
 import { Phase } from '../../../../constants';
 

frontend/packages/ceph-storage-plugin/src/components/dashboards/ocs-dashboards.tsx

@@ -56,3 +56,4 @@ const OCSDashboardsPage: React.FC<DashboardsPageProps> = ({ match, kindsInFlight
 };
 
 export const DashboardsPage = connect(mapStateToProps)(OCSDashboardsPage);
+export default DashboardsPage;

frontend/packages/ceph-storage-plugin/src/components/dashboards/persistent-internal/status-card/utils.ts

@@ -4,7 +4,7 @@ import {
   ResourceHealthHandler,
   SubsystemHealth,
 } from '@console/plugin-sdk';
-import { HealthState } from '@console/shared/src/components/dashboard/status-card/states';
+import { HealthState } from '@console/dynamic-plugin-sdk';
 import { getResiliencyProgress } from '../../../../utils';
 import { WatchCephResource } from '../../../../types';
 

frontend/packages/ceph-storage-plugin/src/components/ocs-install/external-mode/utils.ts

@@ -1,8 +1,8 @@
 import * as _ from 'lodash';
 import { Base64 } from 'js-base64';
-import { HealthState } from '@console/shared/src/components/dashboard/status-card/states';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { ClusterServiceVersionKind } from '@console/operator-lifecycle-manager';
+import { HealthState } from '@console/dynamic-plugin-sdk';
 import { getAnnotations } from '@console/shared';
 import { IP_FAMILY } from '../../../constants';
 

frontend/packages/ceph-storage-plugin/src/plugin.ts

@@ -203,20 +203,21 @@ const plugin: Plugin<ConsumedExtensions> = [
     },
   },
   // Ceph Storage Dashboard Main Cards
-  {
+  /* {
     type: 'Dashboards/Card',
     properties: {
       tab: 'persistent-storage',
       position: GridPosition.MAIN,
       loader: () =>
         import(
-          './components/dashboards/persistent-internal/status-card/status-card' /* webpackChunkName: "ceph-storage-status-card" */
+    //      './components/dashboards/persistent-internal/status-card/status-card' /* webpackChunkName: "ceph-storage-status-card" 
         ).then((m) => m.default),
     },
     flags: {
       required: [CEPH_FLAG],
     },
   },
+  */
   {
     type: 'Dashboards/Card',
     properties: {

frontend/packages/console-demo-plugin/src/components/dashboards/health.ts

@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import { HealthState } from '@console/shared/src/components/dashboard/status-card/states';
+import { HealthState } from '@console/dynamic-plugin-sdk';
 import { PrometheusHealthHandler, URLHealthHandler } from '@console/plugin-sdk';
 
 export const getFooHealthState: URLHealthHandler<any> = () => ({ state: HealthState.OK });

frontend/packages/console-dynamic-plugin-sdk/src/api/api-types.ts

@@ -1,4 +1,5 @@
 import { K8sResourceCommon, K8sResourceKindReference, Selector } from '../extensions/console-types';
+import { Humanize, HumanizeResult } from './dashboard/dashboard-types';
 
 export type WatchK8sResource = {
   kind: K8sResourceKindReference;
@@ -37,3 +38,33 @@ export type UseK8sWatchResource = <R extends K8sResourceCommon | K8sResourceComm
 export type UseK8sWatchResources = <R extends ResourcesObject>(
   initResources: WatchK8sResources<R>,
 ) => WatchK8sResults<R>;
+
+export type UsePrometheusQuery = (
+  query: string,
+  humanize: Humanize,
+) => [HumanizeResult, any, number];
+
+export type PageComponentProps<R extends K8sResourceCommon = K8sResourceCommon> = {
+  filters?: any;
+  selected?: any;
+  match?: any;
+  obj?: R;
+  params?: any;
+  customData?: any;
+  showTitle?: boolean;
+  fieldSelector?: string;
+};
+
+export type Page = {
+  href?: string;
+  path?: string;
+  name?: string;
+  nameKey?: string;
+  component?: React.ComponentType<PageComponentProps>;
+  badge?: React.ReactNode;
+  pageData?: any;
+};
+
+export * from './dashboard/dashboard-types';
+export * from './factory/factory-types';
+export * from './utils/util-types';

frontend/packages/console-dynamic-plugin-sdk/src/api/api.ts

@@ -1,4 +1,4 @@
-import { UseK8sWatchResource, UseK8sWatchResources } from './api-types';
+import { UseK8sWatchResource, UseK8sWatchResources, UsePrometheusQuery } from './api-types';
 
 export * from './api-types';
 
@@ -8,3 +8,8 @@ const MockImpl = () => {
 
 export const useK8sWatchResource: UseK8sWatchResource = MockImpl;
 export const useK8sWatchResources: UseK8sWatchResources = MockImpl;
+export const usePrometheusQuery: UsePrometheusQuery = MockImpl;
+
+export * from './dashboard/dashboard-api';
+export * from './factory/factory-api';
+export * from './utils/util-api';

frontend/packages/console-dynamic-plugin-sdk/src/api/dashboard/dashboard-api.ts

@@ -0,0 +1,19 @@
+import {
+  healthItem,
+  alertItem,
+  alertBody,
+  dashboardGrid,
+  recentEventsBody,
+  prometheusUtilizationItem,
+} from './dashboard-types';
+
+const MockImpl = () => {
+  throw new Error('You need to configure webpack externals to use this function at runtime.');
+};
+
+export const HealthItem: healthItem = MockImpl;
+export const AlertItem: alertItem = MockImpl;
+export const AlertBody: alertBody = MockImpl;
+export const DashboardGrid: dashboardGrid = MockImpl;
+export const RecentEventsBody: recentEventsBody = MockImpl;
+export const PrometheusUtilizationItem: prometheusUtilizationItem = MockImpl;

frontend/packages/console-dynamic-plugin-sdk/src/api/dashboard/dashboard-types.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { FirehoseResult, HealthState, EventKind } from '../../extensions';
+
+export type healthItem = React.FC<{
+  title: string;
+  className?: string;
+  details?: string;
+  state?: HealthState;
+  popupTitle?: string;
+  noIcon?: boolean;
+  icon?: React.ReactNode;
+}>;
+
+export type alertItem = React.FC<{
+  alert: any;
+}>;
+
+export type alertBody = React.FC<{
+  error?: boolean;
+}>;
+
+export type GridDashboardCard = {
+  Card: React.ComponentType<any>;
+  span?: 4 | 6 | 12;
+};
+
+export type dashboardGrid = React.FC<{
+  mainCards: GridDashboardCard[];
+  leftCards?: GridDashboardCard[];
+  rightCards?: GridDashboardCard[];
+}>;
+
+export type RecentEventsBodyProps = {
+  events: FirehoseResult<EventKind[]>;
+  filter?: (event: EventKind) => boolean;
+  moreLink?: string;
+};
+
+export type recentEventsBody = React.FC<RecentEventsBodyProps>;
+
+export enum LIMIT_STATE {
+  ERROR = 'ERROR',
+  WARN = 'WARN',
+  OK = 'OK',
+}
+
+export type TopConsumerPopoverProp = {
+  current: string;
+  max?: string;
+  limit?: string;
+  available?: string;
+  requested?: string;
+  total?: string;
+  limitState?: LIMIT_STATE;
+  requestedState?: LIMIT_STATE;
+};
+
+export type LimitRequested = {
+  limit: LIMIT_STATE;
+  requested: LIMIT_STATE;
+};
+
+export declare type HumanizeResult = {
+  string: string;
+  value: number;
+  unit: string;
+};
+
+export type Humanize = (
+  v: React.ReactText,
+  initialUnit?: string,
+  preferredUnit?: string,
+) => HumanizeResult;
+
+export enum ByteDataTypes {
+  BinaryBytes = 'binaryBytes',
+  BinaryBytesWithoutB = 'binaryBytesWithoutB',
+  DecimalBytes = 'decimalBytes',
+  DecimalBytesWithoutB = 'decimalBytesWithoutB',
+}
+
+export type PrometheusCommonProps = {
+  duration: string;
+  adjustDuration?: (start: number) => number;
+  title: string;
+  humanizeValue: Humanize;
+  byteDataType?: ByteDataTypes;
+  namespace?: string;
+  isDisabled?: boolean;
+};
+
+export type PrometheusUtilizationItemProps = PrometheusCommonProps & {
+  utilizationQuery: string;
+  totalQuery?: string;
+  limitQuery?: string;
+  requestQuery?: string;
+  TopConsumerPopover?: React.ComponentType<TopConsumerPopoverProp>;
+  setTimestamps?: (timestamps: Date[]) => void;
+  setLimitReqState?: (state: LimitRequested) => void;
+};
+
+export type prometheusUtilizationItem = React.FC<PrometheusUtilizationItemProps>;
+
+export type utilizationBody = React.FC<{
+  timestamps: Date[];
+}>;

frontend/packages/console-dynamic-plugin-sdk/src/api/factory/factory-api.ts

@@ -0,0 +1,9 @@
+import { detailsPage, listPage, table } from './factory-types';
+
+const MockImpl = () => {
+  throw new Error('You need to configure webpack externals to use this function at runtime.');
+};
+
+export const DetailsPage: detailsPage = MockImpl;
+export const ListPage: listPage = MockImpl;
+export const Table: table = MockImpl;

frontend/packages/console-dynamic-plugin-sdk/src/api/factory/factory-types.ts

@@ -0,0 +1,73 @@
+import { RouteComponentProps } from 'react-router';
+import { K8sResourceCommon, K8sResourceKindReference, FirehoseResource } from '../../extensions';
+
+export type listPage = React.FC<{
+  ListComponent: React.ComponentType<any>;
+  kind: string;
+  helpText?: any;
+  namespace?: string;
+  filterLabel?: string;
+  textFilter?: string;
+  title?: string;
+  showTitle?: boolean;
+  rowFilters?: any[];
+  selector?: any;
+  fieldSelector?: string;
+  canCreate?: boolean;
+  createButtonText?: string;
+  createProps?: any;
+  mock?: boolean;
+  badge?: React.ReactNode;
+  createHandler?: any;
+}>;
+
+export type detailsPage = React.FC<{
+  match: RouteComponentProps['match'];
+  title?: string | JSX.Element;
+  titleFunc?: (obj: K8sResourceCommon) => string | JSX.Element;
+  menuActions?: Function[];
+  buttonActions?: any[];
+  pages?: any[];
+  pagesFor?: (obj: K8sResourceCommon) => any[];
+  kind: K8sResourceKindReference;
+  label?: string;
+  name?: string;
+  namespace?: string;
+  resources?: FirehoseResource[];
+  breadcrumbsFor?: (obj: K8sResourceCommon) => { name: string; path: string }[];
+  customData?: any;
+  badge?: React.ReactNode;
+  icon?: React.ComponentType<{ obj: K8sResourceCommon }>;
+  getResourceStatus?: (resource: K8sResourceCommon) => string;
+  children?: React.ReactNode;
+  customKind?: string;
+}>;
+
+export type table = React.FC<{
+  customData?: any;
+  customSorts?: { [key: string]: any };
+  data?: any[];
+  defaultSortFunc?: string;
+  defaultSortField?: string;
+  showNamespaceOverride?: boolean;
+  filters?: { [key: string]: any };
+  Header: (...args) => any[];
+  loadError?: string | object;
+  Row?: Function;
+  Rows?: (...args) => any[];
+  'aria-label': string;
+  onSelect?: Function;
+  virtualize?: boolean;
+  NoDataEmptyMsg?: React.ComponentType<{}>;
+  EmptyMsg?: React.ComponentType<{}>;
+  loaded?: boolean;
+  reduxID?: string;
+  reduxIDs?: string[];
+  rowFilters?: any[];
+  label?: string;
+  columnManagementID?: string;
+  isPinned?: (val: any) => boolean;
+  staticFilters?: any[];
+  activeColumns?: Set<string>;
+  kinds?: string[];
+}>;

frontend/packages/console-dynamic-plugin-sdk/src/api/utils/util-api.ts

@@ -0,0 +1,8 @@
+import { horizontalNav, pageHeading } from './util-types';
+
+const MockImpl = () => {
+  throw new Error('You need to configure webpack externals to use this function at runtime.');
+};
+
+export const PageHeading: pageHeading = MockImpl;
+export const HorizontalNav: horizontalNav = MockImpl;

frontend/packages/console-dynamic-plugin-sdk/src/api/utils/util-types.ts

@@ -0,0 +1,33 @@
+import { K8sResourceKindReference, FirehoseResult, K8sResourceCommon } from '../../extensions';
+
+export type pageHeading = React.FC<{
+  buttonActions?: any[];
+  children?: React.ReactChildren;
+  detail?: boolean;
+  kind?: K8sResourceKindReference;
+  menuActions?: Function[];
+  obj?: FirehoseResult<K8sResourceCommon>;
+  resourceKeys?: string[];
+  style?: object;
+  title?: string | JSX.Element;
+  titleFunc?: (obj: K8sResourceCommon) => string | JSX.Element;
+  customData?: any;
+  badge?: React.ReactNode;
+  icon?: React.ComponentType<{ obj?: K8sResourceCommon }>;
+  getResourceStatus?: (resource: K8sResourceCommon) => string;
+  className?: string;
+}>;
+
+export type horizontalNav = React.FC<{
+  className?: string;
+  obj?: { loaded: boolean; data: K8sResourceCommon };
+  label?: string;
+  pages: any[];
+  pagesFor?: (obj: K8sResourceCommon) => any[];
+  match: any;
+  resourceKeys?: string[];
+  hideNav?: boolean;
+  EmptyMsg?: React.ComponentType<any>;
+  noStatusBox?: boolean;
+  customData?: any;
+}>;