Drill down metrics (#200)

* multiple dashboards on same page

* fix

* time range selector fix

Author: GurinderRawala

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

@@ -14,7 +14,7 @@ import { PopoverContent, Tooltip, TooltipPlacement } from '../Tooltip';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'success';
 export const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive'];
-export type ButtonFill = 'solid' | 'outline' | 'text';
+export type ButtonFill = 'solid' | 'outline' | 'text' | 'ghost';
 export const allButtonFills: ButtonFill[] = ['solid', 'outline', 'text'];
 
 type CommonProps = {
@@ -319,6 +319,17 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
     };
   }
 
+  if (fill === 'ghost') {
+    return {
+      background: '#5d5a5990',
+      color: color.text,
+      border: `1px solid ${borderColor}`,
+      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+        duration: theme.transitions.duration.short,
+      }),
+    };
+  }
+
   return {
     background: color.main,
     color: color.contrastText,

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx

@@ -58,7 +58,7 @@ export const TimeRangeContent = (props: Props) => {
     onApply: onApplyFromProps,
     isReversed,
     fiscalYearStartMonth,
-    onError,
+    // onError,
     weekStart,
   } = props;
   const [fromValue, toValue] = valueToState(value.raw.from, value.raw.to, timeZone);
@@ -112,28 +112,28 @@ export const TimeRangeContent = (props: Props) => {
     }
   };
 
-  const onCopy = () => {
-    const raw: RawTimeRange = { from: from.value, to: to.value };
-    navigator.clipboard.writeText(JSON.stringify(raw));
-  };
-
-  const onPaste = async () => {
-    const raw = await navigator.clipboard.readText();
-    let range;
-
-    try {
-      range = JSON.parse(raw);
-    } catch (error) {
-      if (onError) {
-        onError(raw);
-      }
-      return;
-    }
-
-    const [fromValue, toValue] = valueToState(range.from, range.to, timeZone);
-    setFrom(fromValue);
-    setTo(toValue);
-  };
+  // const onCopy = () => {
+  //   const raw: RawTimeRange = { from: from.value, to: to.value };
+  //   navigator.clipboard.writeText(JSON.stringify(raw));
+  // };
+
+  // const onPaste = async () => {
+  //   const raw = await navigator.clipboard.readText();
+  //   let range;
+
+  //   try {
+  //     range = JSON.parse(raw);
+  //   } catch (error) {
+  //     if (onError) {
+  //       onError(raw);
+  //     }
+  //     return;
+  //   }
+
+  //   const [fromValue, toValue] = valueToState(range.from, range.to, timeZone);
+  //   setFrom(fromValue);
+  //   setTo(toValue);
+  // };
 
   const fiscalYear = rangeUtil.convertRawToRange({ from: 'now/fy', to: 'now/fy' }, timeZone, fiscalYearStartMonth);
   const fiscalYearMessage = t('time-picker.range-content.fiscal-year', 'Fiscal year');
@@ -197,7 +197,7 @@ export const TimeRangeContent = (props: Props) => {
       </div>
 
       <div className={style.buttonsContainer}>
-        <Button
+        {/* <Button
           data-testid={selectors.components.TimePicker.copyTimeRange}
           icon="copy"
           variant="secondary"
@@ -212,13 +212,13 @@ export const TimeRangeContent = (props: Props) => {
           tooltip={t('time-picker.copy-paste.tooltip-paste', 'Paste time range')}
           type="button"
           onClick={onPaste}
-        />
+        /> */}
         <Button
           data-testid={selectors.components.TimePicker.applyTimeRange}
           type="button"
           onClick={onApply}
           style={{
-            width: 193,
+            width: 205,
             textAlign: 'center',
             paddingLeft: 45,
           }}

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

@@ -34,7 +34,7 @@ export const Pagination = ({
     const pages = [...new Array(numberOfPages).keys()];
 
     const condensePages = numberOfPages > pageLengthToCondense;
-    const getListItem = (page: number, fill?: 'outline') => (
+    const getListItem = (page: number, fill?: 'outline' | 'ghost') => (
       <li key={page} className={styles.item}>
         <Button size="sm" onClick={() => onNavigate(page)} fill={fill}>
           {page}
@@ -44,7 +44,7 @@ export const Pagination = ({
 
     return pages.reduce<JSX.Element[]>((pagesToRender, pageIndex) => {
       const page = pageIndex + 1;
-      const fill: 'outline' | undefined = page === currentPage ? undefined : 'outline';
+      const fill: 'outline' | 'ghost' = page === currentPage ? 'ghost' : 'outline';
 
       // The indexes at which to start and stop condensing pages
       const lowerBoundIndex = pageLengthToCondense;

packages/grafana-ui/src/components/Table/RowsList.tsx

@@ -53,6 +53,7 @@ interface RowsListProps {
   initialRowIndex?: number;
   headerGroups: HeaderGroup[];
   longestField?: Field;
+  onClickRow?: (row: Record<string, string | number>) => void;
 }
 
 export const RowsList = (props: RowsListProps) => {
@@ -78,6 +79,7 @@ export const RowsList = (props: RowsListProps) => {
     initialRowIndex = undefined,
     headerGroups,
     longestField,
+    onClickRow,
   } = props;
 
   const [rowHighlightIndex, setRowHighlightIndex] = useState<number | undefined>(initialRowIndex);
@@ -303,13 +305,44 @@ export const RowsList = (props: RowsListProps) => {
       }
       const { key, ...rowProps } = row.getRowProps({ style, ...additionalProps });
 
+      const mapRowValues = () => {
+        const rowValues: Record<string, string | number> = {};
+        for (const [key, val] of Object.entries(row.values)) {
+          const k = (row.cells[Number(key)].column as unknown as { field?: { name: string | undefined } })?.field?.name;
+          if (k === undefined) {
+            continue;
+          }
+          const camelCaseKey = k
+            .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => (index === 0 ? word.toLowerCase() : word.toUpperCase()))
+            .replace(/\s+/g, '');
+          rowValues[camelCaseKey] = val;
+        }
+        return rowValues;
+      };
+
       return (
         <div
           key={key}
           {...rowProps}
           className={cx(tableStyles.row, expandedRowStyle)}
           onMouseEnter={() => onRowHover(index, data)}
           onMouseLeave={onRowLeave}
+          onClick={() => {
+            if (onClickRow) {
+              onClickRow(mapRowValues());
+            }
+          }}
+          role={onClickRow ? 'button' : undefined}
+          tabIndex={onClickRow ? 0 : undefined}
+          onKeyDown={
+            onClickRow
+              ? (e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                  }
+                }
+              : undefined
+          }
         >
           {/*add the nested data to the DOM first to prevent a 1px border CSS issue on the last cell of the row*/}
           {rowExpanded && (
@@ -343,6 +376,7 @@ export const RowsList = (props: RowsListProps) => {
       );
     },
     [
+      onClickRow,
       cellHeight,
       data,
       nestedDataField,

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

@@ -58,6 +58,7 @@ export const Table = memo((props: Props) => {
     enableSharedCrosshair = false,
     initialRowIndex = undefined,
     fieldConfig,
+    onClickRow,
   } = props;
 
   const listRef = useRef<VariableSizeList>(null);
@@ -334,6 +335,7 @@ export const Table = memo((props: Props) => {
                 enableSharedCrosshair={enableSharedCrosshair}
                 initialRowIndex={initialRowIndex}
                 longestField={longestField}
+                onClickRow={onClickRow}
               />
             </div>
           ) : (

packages/grafana-ui/src/components/Table/styles.ts

@@ -59,8 +59,8 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
         minHeight: `${rowHeight - 1}px`,
         wordBreak: textShouldWrap ? 'break-word' : undefined,
         whiteSpace: textShouldWrap && overflowOnHover ? 'normal' : 'nowrap',
-        boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,
-        background: rowStyled ? 'inherit' : (backgroundHover ?? theme.colors.background.primary),
+        //boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,
+       // background: 'inherit', //: (backgroundHover ?? theme.colors.background.primary),
         zIndex: 1,
         '.cellActions': {
           color: '#FFF',

packages/grafana-ui/src/components/Table/types.ts

@@ -100,6 +100,7 @@ export interface Props {
   // The index of the field value that the table will initialize scrolled to
   initialRowIndex?: number;
   fieldConfig?: FieldConfigSource;
+  onClickRow?: (row: Record<string, string | number>) => void;
 }
 
 /**

public/app/core/components/Page/usePageTitle.ts

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import { NavModel, NavModelItem } from '@grafana/data';
-import { FnGlobalState } from 'app/core/reducers/fn-slice';
 import { HOME_NAV_ID } from 'app/core/reducers/navModel';
 import { useSelector } from 'app/types';
 
@@ -10,7 +9,7 @@ import { buildBreadcrumbs } from '../Breadcrumbs/utils';
 
 export function usePageTitle(navModel?: NavModel, pageNav?: NavModelItem) {
   const homeNav = useSelector((state) => state.navIndex)[HOME_NAV_ID];
-  const { FNDashboard, pageTitle } = useSelector<FnGlobalState>((state) => state.fnGlobalState);
+  const { FNDashboard, pageTitle } = useSelector((state) => state.fnGlobalState);
 
   useEffect(() => {
     const sectionNav = (navModel?.node !== navModel?.main ? navModel?.node : navModel?.main) ?? { text: 'Grafana' };

public/app/core/components/TimePicker/TimePickerWithHistory.tsx

@@ -1,12 +1,9 @@
-import { isEqual, uniqBy } from 'lodash';
-import { CSSProperties, FC, useEffect, useRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
+import { uniqBy } from 'lodash';
+import { CSSProperties, FC } from 'react';
 
 import { TimeRange, isDateTime, rangeUtil } from '@grafana/data';
 import { TimeRangePickerProps, TimeRangePicker, useTheme2 } from '@grafana/ui';
-import { FnGlobalState, updatePartialFnStates } from 'app/core/reducers/fn-slice';
-import { StoreState } from 'app/types';
+import { useSelector } from 'app/types';
 
 import { LocalStorageValueProvider } from '../LocalStorageValueProvider';
 
@@ -24,7 +21,7 @@ interface TimePickerHistoryItem {
 type LSTimePickerHistoryItem = TimePickerHistoryItem | TimeRange;
 
 const FnText: React.FC = () => {
-  const { FNDashboard } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
+  const { FNDashboard } = useSelector(({ fnGlobalState }) => fnGlobalState);
   const theme = useTheme2();
 
   const FN_TEXT_STYLE: CSSProperties = { fontWeight: 700, fontSize: 14, marginLeft: 8 };
@@ -47,32 +44,9 @@ export interface PickerProps {
 }
 
 export const Picker: FC<PickerProps> = ({ rawValues, onSaveToStore, pickerProps }) => {
-  const { fnGlobalTimeRange } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
-  const dispatch = useDispatch();
-
   const values = migrateHistory(rawValues);
   const history = deserializeHistory(values);
 
-  const didMountRef = useRef(false);
-  useEffect(() => {
-    /* The condition below skips the first run of useeffect that happens when this component gets mounted */
-    if (didMountRef.current) {
-      /* If the current timerange value has changed, update fnGlobalTimeRange */
-      if (!isEqual(fnGlobalTimeRange?.raw, pickerProps.value.raw)) {
-        dispatch(
-          updatePartialFnStates({
-            fnGlobalTimeRange: pickerProps.value,
-          })
-        );
-      }
-    } else if (fnGlobalTimeRange && !isEqual(fnGlobalTimeRange.raw, pickerProps.value.raw)) {
-      /* If fnGlobalTimeRange exists in the initial render, set the time as that */
-      pickerProps.onChange(fnGlobalTimeRange);
-    }
-
-    didMountRef.current = true;
-  }, [dispatch, fnGlobalTimeRange, pickerProps]);
-
   return (
     <TimeRangePicker
       {...pickerProps}