WIP POC Jaeger Embedded components

src/components/Nav/Navigation.tsx

@@ -77,7 +77,7 @@ class Navigation extends React.Component<PropsType> {
       return isRoute;
     });
     return navItems.map(item => {
-      if (item.title === 'Distributed Tracing') {
+      /*if (item.title === 'Distributed Tracing') {
         return (
           <VerticalNav.Item
             key={item.to}
@@ -87,7 +87,7 @@ class Navigation extends React.Component<PropsType> {
             onClick={() => this.goTojaeger()}
           />
         );
-      }
+      }*/
       return (
         <VerticalNav.Item
           key={item.to}

src/pages/ServiceDetails/ServiceDetailsPage.tsx

@@ -10,8 +10,10 @@ import { authentication } from '../../utils/Authentication';
 import IstioObjectDetails from './IstioObjectDetails';
 import ServiceMetricsContainer from '../../containers/ServiceMetricsContainer';
 import ServiceInfo from './ServiceInfo';
+import ServiceTraces from './ServiceTraces';
 import { TargetPage, ListPageLink } from '../../components/ListPage/ListPageLink';
 import { MetricsObjectTypes, MetricsDirection } from '../../types/Metrics';
+import { height } from 'csstips';
 
 type ServiceDetailsState = {
   serviceDetailsInfo: ServiceDetailsInfo;
@@ -210,6 +212,7 @@ class ServiceDetails extends React.Component<RouteComponentProps<ServiceId>, Ser
     const parsedSearch = this.parseSearch();
     const istioObject = this.searchObject(parsedSearch);
     const editorVisible = parsedSearch.name && parsedSearch.type;
+
     return (
       <>
         {this.renderBreadcrumbs(parsedSearch, !!(editorVisible && istioObject))}
@@ -235,7 +238,7 @@ class ServiceDetails extends React.Component<RouteComponentProps<ServiceId>, Ser
                 <NavItem eventKey="metrics">
                   <div>Inbound Metrics</div>
                 </NavItem>
-                <NavItem onClick={this.navigateToJaeger}>
+                <NavItem eventKey="traces">
                   <div>Traces</div>
                 </NavItem>
               </Nav>
@@ -259,6 +262,12 @@ class ServiceDetails extends React.Component<RouteComponentProps<ServiceId>, Ser
                     direction={MetricsDirection.INBOUND}
                   />
                 </TabPane>
+                <TabPane eventKey="traces" style={height('800px')}>
+                  <ServiceTraces
+                    namespace={this.props.match.params.namespace}
+                    service={this.props.match.params.service}
+                  />
+                </TabPane>
               </TabContent>
             </div>
           </TabContainer>
@@ -287,18 +296,6 @@ class ServiceDetails extends React.Component<RouteComponentProps<ServiceId>, Ser
       this.props.history.push(this.props.location.pathname + '?' + urlParams.toString());
     };
   };
-
-  private navigateToJaeger = () => {
-    API.getJaegerInfo(authentication())
-      .then(response => {
-        let data = response['data'];
-        window.open(data.url + `/search?service=${this.props.match.params.service}`, '_blank');
-      })
-      .catch(error => {
-        MessageCenter.add(API.getErrorMsg('Could not fetch Jaeger info', error));
-        console.log(error);
-      });
-  };
 }
 
 export default ServiceDetails;

src/pages/ServiceDetails/ServiceTraces.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { ToolbarDropdown } from '../../components/ToolbarDropdown/ToolbarDropdown';
+import { Toolbar, FormGroup, Checkbox } from 'patternfly-react';
+import ServiceId from '../../types/ServiceId';
+import { HistoryManager, URLParams } from '../../app/History';
+import { config } from '../../config';
+import history from '../../app/History';
+import ServiceTracesJaeger from './ServiceTraces/ServiceTracesJaeger';
+
+type ServiceTraceState = {
+  duration: number;
+  onlyErrors: boolean;
+};
+
+class ServiceTraces extends React.Component<ServiceId, ServiceTraceState> {
+  static Durations = config().toolbar.intervalDuration;
+  static DefaultDuration = config().toolbar.defaultDuration;
+
+  constructor(props: ServiceId) {
+    super(props);
+    const urlParams = new URLSearchParams(history.location.search);
+    this.state = {
+      duration: this.initialDuration(urlParams),
+      onlyErrors: true
+    };
+  }
+
+  initialDuration = (urlParams: URLSearchParams): number => {
+    let d = urlParams.get(URLParams.DURATION);
+    if (d !== null) {
+      sessionStorage.setItem(URLParams.DURATION, d);
+      return Number(d);
+    }
+    d = sessionStorage.getItem(URLParams.DURATION);
+    return d !== null ? Number(d) : ServiceTraces.DefaultDuration;
+  };
+
+  onDurationChange = (key: number) => {
+    sessionStorage.setItem(URLParams.DURATION, String(key));
+    HistoryManager.setParam(URLParams.DURATION, String(key));
+    this.setState({ duration: key });
+  };
+
+  onErrorsChange = evt => {
+    this.setState({ onlyErrors: evt.target.checked });
+  };
+
+  render() {
+    return (
+      <div>
+        <Toolbar>
+          <FormGroup>
+            <ToolbarDropdown
+              id={'traces_filter_interval_duration'}
+              disabled={false}
+              handleSelect={this.onDurationChange}
+              nameDropdown={'Displaying'}
+              initialValue={this.state.duration}
+              initialLabel={String(ServiceTraces.Durations[this.state.duration])}
+              options={ServiceTraces.Durations}
+            />
+          </FormGroup>
+          <FormGroup controlId="checkbox">
+            <Checkbox inline={true} checked={this.state.onlyErrors} onChange={this.onErrorsChange}>
+              Only Errors
+            </Checkbox>
+          </FormGroup>
+        </Toolbar>
+        <ServiceTracesJaeger
+          service={this.props.service}
+          duration={this.state.duration}
+          onlyErrors={this.state.onlyErrors}
+        />
+      </div>
+    );
+  }
+
+  /*private navigateToJaeger = () => {
+  API.getJaegerInfo(authentication())
+    .then(response => {
+      let data = response['data'];
+      window.open(data.url + `/search?service=${this.props.match.params.service}`, '_blank');
+    })
+    .catch(error => {
+      MessageCenter.add(API.getErrorMsg('Could not fetch Jaeger info', error));
+      console.log(error);
+    });
+  };*/
+}
+
+export default ServiceTraces;

src/pages/ServiceDetails/ServiceTraces/ServiceTracesJaeger.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Iframe from 'react-iframe';
+
+type ServiceTracesJaegerProps = {
+  service: string;
+  duration: number;
+  onlyErrors: boolean;
+};
+
+type ServiceTracesJaegerState = {
+  url: string;
+};
+
+class ServiceTracesJaeger extends React.Component<ServiceTracesJaegerProps, ServiceTracesJaegerState> {
+  constructor(props: ServiceTracesJaegerProps) {
+    super(props);
+    this.state = {
+      url: this.jaegerQuery()
+    };
+  }
+
+  jaegerQuery = () => {
+    const dateNow = Date.now();
+    const start = (dateNow - this.props.duration * 1000) * 1000;
+    const end = dateNow * 1000;
+    const errors = this.props.onlyErrors ? `&tags=%7B"error"%3A"true"%7D` : ``;
+    const service = this.props.service === 'Filter by Service' ? `` : `&service=${this.props.service}`;
+    console.log(
+      `http://localhost:3000/search?embed` +
+        `&limit=20` +
+        `&start=${start}` +
+        `&end=${end}` +
+        `&maxDuration` +
+        `&minDuration` +
+        service +
+        errors
+    );
+    return (
+      `http://localhost:3000/search?embed` +
+      `&limit=20` +
+      `&start=${start}` +
+      `&end=${end}` +
+      `&maxDuration` +
+      `&minDuration` +
+      service +
+      errors
+    );
+  };
+
+  componentDidUpdate(prevProps: ServiceTracesJaegerProps) {
+    if (this.props !== prevProps) {
+      this.setState({
+        url: this.jaegerQuery()
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <Iframe
+          url={this.state.url}
+          position="inherit"
+          allowFullScreen={true}
+          height="800px"
+          sandbox="allow-same-origin"
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceTracesJaeger;