typing error fix and modifications (#101)

* typing error fix and modifications

* react-use module installed

* Fix type error and adhoc filter alignment

* Fix one more type error

---------

Co-authored-by: Spikatrix <[email protected]>

Author: 2 people

packages/grafana-data/src/dataframe/ArrayDataFrame.ts

@@ -1,4 +1,4 @@
-import { QueryResultMeta } from '../types/data';
+import { QueryResultMeta } from '../types';
 import { Field, FieldType, DataFrame, TIME_SERIES_VALUE_FIELD_NAME } from '../types/dataFrame';
 
 import { guessFieldTypeForField } from './processDataFrame';
@@ -16,18 +16,16 @@ export class ArrayDataFrame<T = any> implements DataFrame {
   meta?: QueryResultMeta;
 
   constructor(source: T[], names?: string[]) {
-    return arrayToDataFrame(source, names); // returns a standard DataFrame
+    return arrayToDataFrame(source, names) as ArrayDataFrame<T>; // returns a standard DataFrame
   }
 }
 
 /**
- * arrayToDataFrame will convert any array into a DataFrame.
- * @param source - can be an array of objects or an array of simple values.
- * @param names - will be used for ordering of fields. Source needs to be array of objects if names are provided.
+ * arrayToDataFrame will convert any array into a DataFrame
  *
  * @public
  */
-export function arrayToDataFrame(source: Array<Record<string, unknown>> | unknown[], names?: string[]): DataFrame {
+export function arrayToDataFrame(source: any[], names?: string[]): DataFrame {
   const df: DataFrame = {
     fields: [],
     length: source.length,
@@ -36,46 +34,30 @@ export function arrayToDataFrame(source: Array<Record<string, unknown>> | unknow
     return df;
   }
 
-  // If names are provided then we assume the source is an array of objects with the names as keys (field names). This
-  // makes ordering of the fields predictable.
   if (names) {
-    if (!isObjectArray(source)) {
-      throw new Error('source is not an array of objects');
-    }
-
     for (const name of names) {
       df.fields.push(
         makeFieldFromValues(
           name,
-          source.map((v) => (v ? v[name] : v))
+          source.map((v) => v[name])
         )
       );
     }
     return df;
   }
 
-  const firstDefined = source.find((v) => v); // first not null|undefined
-  // This means if the source is lots of null/undefined values we throw that away and return empty dataFrame. This is
-  // different to how we preserve null/undefined values if there is some defined rows. Not sure this inconsistency
-  // is by design or not.
-  if (firstDefined === null) {
-    return df;
-  }
-
-  // If is an array of objects we use the keys as field names.
-  if (isObjectArray(source)) {
-    // We need to do this to please TS. We know source is array of objects and that there is some object in there but
-    // TS still thinks it can all be undefined|nulls.
-    const first = source.find((v) => v);
-    df.fields = Object.keys(first || {}).map((name) => {
-      return makeFieldFromValues(
-        name,
-        source.map((v) => (v ? v[name] : v))
-      );
-    });
-  } else {
-    // Otherwise source should be an array of simple values, so we create single field data frame.
-    df.fields.push(makeFieldFromValues(TIME_SERIES_VALUE_FIELD_NAME, source));
+  const first = source.find((v) => v != null); // first not null|undefined
+  if (first != null) {
+    if (typeof first === 'object') {
+      df.fields = Object.keys(first).map((name) => {
+        return makeFieldFromValues(
+          name,
+          source.map((v) => v[name])
+        );
+      });
+    } else {
+      df.fields.push(makeFieldFromValues(TIME_SERIES_VALUE_FIELD_NAME, source));
+    }
   }
   return df;
 }
@@ -85,8 +67,3 @@ function makeFieldFromValues(name: string, values: unknown[]): Field {
   f.type = guessFieldTypeForField(f) ?? FieldType.other;
   return f;
 }
-
-function isObjectArray(arr: unknown[]): arr is Array<Record<string, unknown> | null | undefined> {
-  const first = arr.find((v) => v); // first not null|undefined
-  return arr.length > 0 && typeof first === 'object';
-}

packages/grafana-data/src/themes/fnCreateColors.ts

@@ -75,6 +75,7 @@ class FnDarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
     disabledText: this.text.disabled,
     disabledBackground: `rgba(${this.whiteBase}, 0.04)`,
     disabledOpacity: 0.38,
+    selectedBorder: palette.orangeDarkMain,
   };
 
   gradients = {
@@ -155,6 +156,7 @@ class FnLightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
     disabledBackground: `rgba(${this.blackBase}, 0.04)`,
     disabledText: this.text.disabled,
     disabledOpacity: 0.38,
+    selectedBorder: palette.orangeLightMain,
   };
 
   gradients = {

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -47,6 +47,11 @@ export interface FeatureToggles {
   mysqlAnsiQuotes?: boolean;
   accessControlOnCall?: boolean;
   nestedFolders?: boolean;
+  nestedFolderPicker?: boolean;
+  accessTokenExpirationCheck?: boolean;
+  emptyDashboardPage?: boolean;
+  disablePrometheusExemplarSampling?: boolean;
+  datasourceOnboarding?: boolean;
   alertingBacktesting?: boolean;
   editPanelCSVDragAndDrop?: boolean;
   alertingNoNormalState?: boolean;
@@ -60,6 +65,7 @@ export interface FeatureToggles {
   influxdbRunQueriesInParallel?: boolean;
   prometheusRunQueriesInParallel?: boolean;
   lokiMetricDataplane?: boolean;
+  newTraceView?: boolean;
   lokiLogsDataplane?: boolean;
   dataplaneFrontendFallback?: boolean;
   disableSSEDataplane?: boolean;

packages/grafana-o11y-ds-frontend/src/TraceToMetrics/TraceToMetricsSettings.tsx

@@ -80,7 +80,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
       <InlineFieldRow>
         <IntervalInput
           label={getTimeShiftLabel('start')}
-          tooltip={getTimeShiftTooltip('start', '-2m')}
+          tooltip={getTimeShiftTooltip('start', '')}
           value={options.jsonData.tracesToMetrics?.spanStartTimeShift || ''}
           onChange={(val) => {
             updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {
@@ -96,7 +96,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
       <InlineFieldRow>
         <IntervalInput
           label={getTimeShiftLabel('end')}
-          tooltip={getTimeShiftTooltip('end', '2m')}
+          tooltip={getTimeShiftTooltip('end', '')}
           value={options.jsonData.tracesToMetrics?.spanEndTimeShift || ''}
           onChange={(val) => {
             updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {

packages/grafana-ui/src/components/Dropdown/Dropdown.tsx

@@ -85,9 +85,9 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
 
   return (
     <>
-      {React.cloneElement(children, {
-        ref: refs.setReference,
-        ...getReferenceProps(),
+      {/* @ts-ignore */}
+      {React.cloneElement(typeof children === 'function' ? children(visible) : children, {
+        ref: setTriggerRef,
       })}
       {show && (
         <Portal>
@@ -105,7 +105,8 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
                 timeout={{ appear: animationDuration, exit: 0, enter: 0 }}
                 classNames={animationStyles}
               >
-                <div ref={transitionRef}>{ReactUtils.renderOrCallToRender(overlay, { ...getFloatingProps() })}</div>
+                {/* @ts-ignore */}
+                <div ref={transitionRef}>{ReactUtils.renderOrCallToRender(overlay, {})}</div>
               </CSSTransition>
             </div>
           </FloatingFocusManager>

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -42,10 +42,20 @@ const getIconStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-export const Icon = React.forwardRef<SVGElement, IconProps>(
-  ({ size = 'md', type = 'default', name, className, style, title = '', ...rest }, ref) => {
+export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
+  ({ size = 'md', type = 'default', name, className, style, title = '', ...divElementProps }, ref): JSX.Element => {
     const styles = useStyles2(getIconStyles);
 
+    /* Temporary solution to display also font awesome icons */
+    if (name?.startsWith('fa fa-')) {
+      /* @ts-ignore */
+      return <i className={getFontAwesomeIconStyles(name, className)} {...divElementProps} style={style} />;
+    }
+
+    if (!cacheInitialized) {
+      initIconCache();
+    }
+
     if (!isIconName(name)) {
       console.warn('Icon component passed an invalid icon name', name);
     }
@@ -70,23 +80,17 @@ export const Icon = React.forwardRef<SVGElement, IconProps>(
     );
 
     return (
-      <SVG
-        aria-hidden={
-          rest.tabIndex === undefined &&
-          !title &&
-          !rest['aria-label'] &&
-          !rest['aria-labelledby'] &&
-          !rest['aria-describedby']
-        }
-        innerRef={ref}
-        src={svgPath}
-        width={svgWid}
-        height={svgHgt}
-        title={title}
-        className={composedClassName}
-        style={style}
-        {...rest}
-      />
+      <div className={styles.container} {...divElementProps} ref={ref}>
+        {/* @ts-ignore */}
+        <SVG
+          src={svgPath}
+          width={svgWid}
+          height={svgHgt}
+          title={title}
+          className={cx(styles.icon, className, type === 'mono' ? { [styles.orange]: name === 'favorite' } : '')}
+          style={style}
+        />
+      </div>
     );
   }
 );