Metriktank: Linage UI updates (#23848)

public/app/features/dashboard/components/PanelEditor/state/selectors.ts

@@ -43,7 +43,7 @@ export const getPanelEditorTabs = memoizeOne((location: LocationState, plugin?:
     });
     });
   }
   }
 
 
-  const activeTab = tabs.find(item => item.id === (location.query.tab || defaultTab));
+  const activeTab = tabs.find(item => item.id === location.query.tab || defaultTab) ?? tabs[0];
   activeTab.active = true;
   activeTab.active = true;
 
 
   return tabs;
   return tabs;

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -101,7 +101,7 @@ export class PanelHeader extends Component<Props, State> {
     e.stopPropagation();
     e.stopPropagation();
 
 
     updateLocation({
     updateLocation({
-      query: { inspect: panel.id, tab },
+      query: { inspect: panel.id, inspectTab: tab },
       partial: true,
       partial: true,
     });
     });
   };
   };
@@ -110,7 +110,7 @@ export class PanelHeader extends Component<Props, State> {
     return (
     return (
       <Tooltip content={notice.text} key={notice.severity}>
       <Tooltip content={notice.text} key={notice.severity}>
         {notice.inspect ? (
         {notice.inspect ? (
-          <div className="panel-info-notice" onClick={e => this.openInspect(e, notice.inspect!)}>
+          <div className="panel-info-notice pointer" onClick={e => this.openInspect(e, notice.inspect!)}>
             <Icon name="info-circle" style={{ marginRight: '8px' }} />
             <Icon name="info-circle" style={{ marginRight: '8px' }} />
           </div>
           </div>
         ) : (
         ) : (

public/app/plugins/datasource/graphite/MetricTankMetaInspector.tsx

@@ -30,7 +30,10 @@ export class MetricTankMetaInspector extends PureComponent<Props, State> {
 
 
     return (
     return (
       <div className={styles.metaItem} key={key}>
       <div className={styles.metaItem} key={key}>
-        <div className={styles.metaItemHeader}>Schema: {meta['schema-name']}</div>
+        <div className={styles.metaItemHeader}>
+          Schema: {meta['schema-name']}
+          <div className="small muted">Series count: {meta.count}</div>
+        </div>
         <div className={styles.metaItemBody}>
         <div className={styles.metaItemBody}>
           <div className={styles.step}>
           <div className={styles.step}>
             <div className={styles.stepHeading}>Step 1: Fetch</div>
             <div className={styles.stepHeading}>Step 1: Fetch</div>
@@ -97,7 +100,12 @@ export class MetricTankMetaInspector extends PureComponent<Props, State> {
         for (const metaItem of series.meta.custom.seriesMetaList as MetricTankSeriesMeta[]) {
         for (const metaItem of series.meta.custom.seriesMetaList as MetricTankSeriesMeta[]) {
           // key is to dedupe as many series will have identitical meta
           // key is to dedupe as many series will have identitical meta
           const key = `${metaItem['schema-name']}-${metaItem['archive-read']}`;
           const key = `${metaItem['schema-name']}-${metaItem['archive-read']}`;
-          seriesMetas[key] = metaItem;
+
+          if (seriesMetas[key]) {
+            seriesMetas[key].count += metaItem.count;
+          } else {
+            seriesMetas[key] = metaItem;
+          }
         }
         }
       }
       }
     }
     }
@@ -108,7 +116,7 @@ export class MetricTankMetaInspector extends PureComponent<Props, State> {
 
 
     return (
     return (
       <div>
       <div>
-        <h2 className="page-heading">Aggregation & rollup</h2>
+        <h2 className="page-heading">Metrictank Lineage</h2>
         {Object.keys(seriesMetas).map(key => this.renderMeta(seriesMetas[key], key))}
         {Object.keys(seriesMetas).map(key => this.renderMeta(seriesMetas[key], key))}
       </div>
       </div>
     );
     );
@@ -131,6 +139,8 @@ const getStyles = stylesFactory(() => {
       background: ${headerBg};
       background: ${headerBg};
       padding: ${theme.spacing.xs} ${theme.spacing.md};
       padding: ${theme.spacing.xs} ${theme.spacing.md};
       font-size: ${theme.typography.size.md};
       font-size: ${theme.typography.size.md};
+      display: flex;
+      justify-content: space-between;
     `,
     `,
     metaItemBody: css`
     metaItemBody: css`
       padding: ${theme.spacing.md};
       padding: ${theme.spacing.md};