KIALI-2129 UXD: Move the grafana link to the topbar

src/components/Metrics/Metrics.tsx

@@ -238,6 +238,7 @@ class Metrics extends React.Component<MetricsProps, MetricsState> {
           onLabelsFiltersChanged={this.onLabelsFiltersChanged}
           direction={this.props.direction}
           labelValues={this.state.labelValues}
+          grafanaLink={this.getGrafanaLink()}
         />
         {expandedChart ? this.renderExpandedChart(expandedChart) : this.renderMetrics()}
       </div>
@@ -254,13 +255,6 @@ class Metrics extends React.Component<MetricsProps, MetricsState> {
               <div className="card-pf-body">{Object.keys(charts).map(key => this.renderChart(key, charts[key]))}</div>
             </div>
           </div>
-          {this.props.grafanaInfo && (
-            <span id="grafana-link">
-              <a href={this.getGrafanaLink()} target="_blank">
-                View in Grafana
-              </a>
-            </span>
-          )}
         </div>
       </div>
     );

src/components/MetricsOptions/MetricsOptionsBar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Toolbar, ToolbarRightContent, FormGroup } from 'patternfly-react';
+import { Toolbar, ToolbarRightContent, FormGroup, Icon } from 'patternfly-react';
 import isEqual from 'lodash/fp/isEqual';
 
 import RefreshContainer from '../../containers/RefreshContainer';
@@ -18,6 +18,7 @@ export interface MetricsOptionsBarProps {
   onLabelsFiltersChanged: (label: L.LabelName, value: string, checked: boolean) => void;
   direction: Direction;
   labelValues: Map<L.LabelName, L.LabelValues>;
+  grafanaLink: string;
 }
 
 export class MetricsOptionsBar extends React.Component<MetricsOptionsBarProps> {
@@ -161,17 +162,24 @@ export class MetricsOptionsBar extends React.Component<MetricsOptionsBarProps> {
             options={MetricsOptionsBar.ReporterOptions}
           />
         </FormGroup>
-        <ToolbarDropdown
-          id={'metrics_filter_interval_duration'}
-          disabled={false}
-          handleSelect={this.onDurationChanged}
-          nameDropdown={'Displaying'}
-          initialValue={this.duration}
-          initialLabel={String(MetricsOptionsBar.Durations[this.duration])}
-          options={MetricsOptionsBar.Durations}
-        />
+        {this.props.grafanaLink && (
+          <FormGroup style={{ borderRight: 'none' }}>
+            <a id={'grafana_link'} href={this.props.grafanaLink} target="_blank">
+              View in Grafana <Icon type={'fa'} name={'external-link'} />
+            </a>
+          </FormGroup>
+        )}
         <ToolbarRightContent>
-          <RefreshContainer id="metrics-refresh" handleRefresh={this.props.onRefresh} />
+          <ToolbarDropdown
+            id={'metrics_filter_interval_duration'}
+            disabled={false}
+            handleSelect={this.onDurationChanged}
+            nameDropdown={'Fetching'}
+            initialValue={this.duration}
+            initialLabel={String(MetricsOptionsBar.Durations[this.duration])}
+            options={MetricsOptionsBar.Durations}
+          />
+          <RefreshContainer id="metrics-refresh" handleRefresh={this.props.onRefresh} hideLabel={true} />
         </ToolbarRightContent>
       </Toolbar>
     );

src/components/MetricsOptions/__tests__/MetricsOptionsBar.test.tsx

@@ -16,6 +16,7 @@ describe('MetricsOptionsBar', () => {
           onLabelsFiltersChanged={jest.fn()}
           direction={'inbound'}
           labelValues={new Map()}
+          grafanaLink={'http://grafana-istio-system.127.0.0.1.nip.io/d/UbsSZTDik/istio-workload-dashboard'}
         />
       </Provider>
     );
@@ -31,6 +32,7 @@ describe('MetricsOptionsBar', () => {
           onLabelsFiltersChanged={jest.fn()}
           direction={'inbound'}
           labelValues={new Map()}
+          grafanaLink={''}
         />
       </Provider>
     );
@@ -44,4 +46,20 @@ describe('MetricsOptionsBar', () => {
     wrapper.setProps({}); // Force re-render
     expect(optionsChanged).toHaveBeenCalledTimes(2);
   });
+
+  it('Has a Grafana link', () => {
+    let wrapper = mount(
+      <Provider store={store}>
+        <MetricsOptionsBar
+          onOptionsChanged={jest.fn()}
+          onRefresh={jest.fn()}
+          onLabelsFiltersChanged={jest.fn()}
+          direction={'inbound'}
+          labelValues={new Map()}
+          grafanaLink={'http://grafana-istio-system.127.0.0.1.nip.io/d/UbsSZTDik/istio-workload-dashboard'}
+        />
+      </Provider>
+    );
+    expect(wrapper.find('#grafana_link')).toHaveLength(1);
+  });
 });

src/components/MetricsOptions/__tests__/__snapshots__/MetricsOptionsBar.test.tsx.snap

@@ -17,6 +17,7 @@ ShallowWrapper {
   >
     <MetricsOptionsBar
       direction="inbound"
+      grafanaLink="http://grafana-istio-system.127.0.0.1.nip.io/d/UbsSZTDik/istio-workload-dashboard"
       labelValues={Map {}}
       onLabelsFiltersChanged={[MockFunction]}
       onOptionsChanged={[MockFunction]}
@@ -37,6 +38,7 @@ ShallowWrapper {
     "nodeType": "class",
     "props": Object {
       "direction": "inbound",
+      "grafanaLink": "http://grafana-istio-system.127.0.0.1.nip.io/d/UbsSZTDik/istio-workload-dashboard",
       "labelValues": Map {},
       "onLabelsFiltersChanged": [MockFunction],
       "onOptionsChanged": [MockFunction],
@@ -53,6 +55,7 @@ ShallowWrapper {
       "nodeType": "class",
       "props": Object {
         "direction": "inbound",
+        "grafanaLink": "http://grafana-istio-system.127.0.0.1.nip.io/d/UbsSZTDik/istio-workload-dashboard",
         "labelValues": Map {},
         "onLabelsFiltersChanged": [MockFunction],
         "onOptionsChanged": [MockFunction],

src/components/Refresh/Refresh.tsx

@@ -7,6 +7,7 @@ import { PollIntervalInMs } from '../../types/Common';
 type ComponentProps = {
   id: string;
   handleRefresh: () => void;
+  hideLabel?: boolean;
 };
 
 type ReduxProps = {
@@ -54,9 +55,10 @@ class Refresh extends React.Component<Props, State> {
 
   render() {
     if (this.props.refreshInterval !== undefined) {
+      const { hideLabel } = this.props;
       return (
         <>
-          <label style={{ paddingRight: '0.5em', marginLeft: '1.5em' }}>Refreshing</label>
+          {!hideLabel && <label style={{ paddingRight: '0.5em', marginLeft: '1.5em' }}>Refreshing</label>}
           <DropdownButton id={this.props.id} title={POLL_INTERVALS[this.props.refreshInterval]}>
             {Object.keys(POLL_INTERVALS).map(strKey => {
               const key = Number(strKey);

src/containers/WorkloadMetricsContainer.tsx

@@ -4,7 +4,8 @@ import { RouteComponentProps, withRouter } from 'react-router';
 import Metrics, { MetricsProps } from '../components/Metrics/Metrics';
 
 const mapStateToProps = (state: KialiAppState) => ({
-  isPageVisible: state.globalState.isPageVisible
+  isPageVisible: state.globalState.isPageVisible,
+  grafanaInfo: state.grafanaInfo
 });
 
 const WorkloadMetricsConnected = withRouter<RouteComponentProps<{}> & MetricsProps>(connect(mapStateToProps)(Metrics));