diff --git a/app/ui-react/packages/api/src/WithActivities.tsx b/app/ui-react/packages/api/src/WithActivities.tsx
new file mode 100644
index 00000000000..8e3bb940a1c
--- /dev/null
+++ b/app/ui-react/packages/api/src/WithActivities.tsx
@@ -0,0 +1,47 @@
+import { Activity, IntegrationDeployment } from '@syndesis/models';
+import * as React from 'react';
+import { SyndesisFetch } from './SyndesisFetch';
+
+export interface IIntegrationDeploymentResponse {
+  items: IntegrationDeployment[];
+  totalCount: number;
+}
+
+export interface IActivitiesAndDeploymentsChildrenProps {
+  activities: Activity[];
+  deployments: IntegrationDeployment[];
+  fetchDeployments: () => Promise<void>;
+  fetchActivities: () => Promise<void>;
+}
+
+export interface IWithActivitiesProps {
+  integrationId: string;
+  children(props: IActivitiesAndDeploymentsChildrenProps): any;
+}
+
+export class WithActivities extends React.Component<IWithActivitiesProps> {
+  public render() {
+    return (
+      <SyndesisFetch<IIntegrationDeploymentResponse>
+        url={`/integrations/${this.props.integrationId}/deployments`}
+        defaultValue={{ items: [], totalCount: 0 }}
+      >
+        {({ read: fetchDeployments, response: deployments }) => (
+          <SyndesisFetch<Activity[]>
+            url={`/activity/integrations/${this.props.integrationId}`}
+            defaultValue={[]}
+          >
+            {({ read: fetchActivities, response: activities }) => {
+              return this.props.children({
+                activities: activities.data,
+                deployments: deployments.data.items,
+                fetchActivities,
+                fetchDeployments,
+              });
+            }}
+          </SyndesisFetch>
+        )}
+      </SyndesisFetch>
+    );
+  }
+}
diff --git a/app/ui-react/packages/api/src/WithMonitoredIntegration.tsx b/app/ui-react/packages/api/src/WithMonitoredIntegration.tsx
new file mode 100644
index 00000000000..3c8f4465d81
--- /dev/null
+++ b/app/ui-react/packages/api/src/WithMonitoredIntegration.tsx
@@ -0,0 +1,93 @@
+import {
+  IIntegrationOverviewWithDraft,
+  IntegrationMonitoring,
+  IntegrationWithMonitoring,
+} from '@syndesis/models';
+import * as React from 'react';
+import { IFetchState } from './Fetch';
+import { ServerEventsContext } from './ServerEventsContext';
+import { SyndesisFetch } from './SyndesisFetch';
+import { WithChangeListener } from './WithChangeListener';
+import { WithIntegration } from './WithIntegration';
+import { IChangeEvent } from './WithServerEvents';
+
+export interface IWithMonitoredIntegrationProps {
+  integrationId: string;
+  disableUpdates?: boolean;
+  children(props: IFetchState<IntegrationWithMonitoring>): any;
+}
+
+/**
+ * A component that fetches the integration with the specified identifier.
+ * @see [integrationId]{@link IWithIntegrationProps#integrationId}
+ */
+export class WithMonitoredIntegration extends React.Component<
+  IWithMonitoredIntegrationProps
+> {
+  public constructor(props: IWithMonitoredIntegrationProps) {
+    super(props);
+    this.changeFilter = this.changeFilter.bind(this);
+  }
+  public changeFilter(change: IChangeEvent) {
+    return (
+      change.kind.startsWith('integration') &&
+      change.id.startsWith(this.props.integrationId)
+    );
+  }
+  public getMonitoredIntegration(
+    integration: IIntegrationOverviewWithDraft,
+    response: IFetchState<IntegrationMonitoring[]>
+  ) {
+    return {
+      integration,
+      monitoring: response.data.find(
+        (o: IntegrationMonitoring) => o.integrationId === integration.id
+      ),
+    };
+  }
+  public render() {
+    return (
+      <WithIntegration
+        integrationId={this.props.integrationId}
+        disableUpdates={this.props.disableUpdates}
+      >
+        {({ data: integration, ...props }) => (
+          <SyndesisFetch<IntegrationMonitoring[]>
+            url={'/monitoring/integrations'}
+            defaultValue={[]}
+          >
+            {({ read, response }) => {
+              if (this.props.disableUpdates) {
+                const data = this.getMonitoredIntegration(
+                  integration,
+                  response
+                );
+                return this.props.children({ ...props, data });
+              }
+              return (
+                <ServerEventsContext.Consumer>
+                  {({ registerChangeListener, unregisterChangeListener }) => (
+                    <WithChangeListener
+                      read={read}
+                      registerChangeListener={registerChangeListener}
+                      unregisterChangeListener={unregisterChangeListener}
+                      filter={this.changeFilter}
+                    >
+                      {() => {
+                        const data = this.getMonitoredIntegration(
+                          integration,
+                          response
+                        );
+                        return this.props.children({ ...props, data });
+                      }}
+                    </WithChangeListener>
+                  )}
+                </ServerEventsContext.Consumer>
+              );
+            }}
+          </SyndesisFetch>
+        )}
+      </WithIntegration>
+    );
+  }
+}
diff --git a/app/ui-react/packages/api/src/index.ts b/app/ui-react/packages/api/src/index.ts
index a63db0472b0..f67d641125e 100644
--- a/app/ui-react/packages/api/src/index.ts
+++ b/app/ui-react/packages/api/src/index.ts
@@ -6,6 +6,7 @@ export * from './Fetch';
 export * from './ServerEventsContext';
 export * from './Stream';
 export * from './WithIntegrationHelpers';
+export * from './WithActivities';
 export * from './WithApiConnectors';
 export * from './WithApiVersion';
 export * from './WithEnvironments';
@@ -17,6 +18,7 @@ export * from './WithExtensions';
 export * from './WithIntegration';
 export * from './WithIntegrations';
 export * from './WithIntegrationTags';
+export * from './WithMonitoredIntegration';
 export * from './WithMonitoredIntegrations';
 export * from './WithIntegrationsMetrics';
 export * from './WithConnections';
diff --git a/app/ui-react/packages/models/src/extra.d.ts b/app/ui-react/packages/models/src/extra.d.ts
index 9624af9192c..4ee60ad20d0 100644
--- a/app/ui-react/packages/models/src/extra.d.ts
+++ b/app/ui-react/packages/models/src/extra.d.ts
@@ -15,6 +15,29 @@ import {
  *
  */
 
+// this is for the logging backend
+export interface Activity {
+  logts?: string;
+  at: number;
+  pod: string;
+  ver: string;
+  status: string;
+  failed: boolean;
+  steps?: ActivityStep[];
+  metadata?: any;
+}
+
+export interface ActivityStep extends Step {
+  name: string;
+  isFailed: boolean;
+  at: number;
+  duration?: number;
+  failure?: string;
+  messages?: string[];
+  output?: string;
+  events?: any;
+}
+
 export interface IApiVersion {
   version: string;
   'commit-id': string;
diff --git a/app/ui-react/packages/ui/src/Integration/IntegrationDetailInfo.tsx b/app/ui-react/packages/ui/src/Integration/IntegrationDetailInfo.tsx
index ac8975b8641..99310046f5d 100644
--- a/app/ui-react/packages/ui/src/Integration/IntegrationDetailInfo.tsx
+++ b/app/ui-react/packages/ui/src/Integration/IntegrationDetailInfo.tsx
@@ -3,10 +3,22 @@ import * as React from 'react';
 import { IntegrationDetailEditableName } from './IntegrationDetailEditableName';
 
 import './IntegrationDetailInfo.css';
+import { IntegrationStatusDetail } from './IntegrationStatusDetail';
+import { IntegrationState } from './models';
 
 export interface IIntegrationDetailInfoProps {
   name?: string;
   version?: number;
+  currentState: IntegrationState;
+  targetState: IntegrationState;
+  monitoringValue?: string;
+  monitoringCurrentStep?: number;
+  monitoringTotalSteps?: number;
+  monitoringLogUrl?: string;
+  i18nProgressPending: string;
+  i18nProgressStarting: string;
+  i18nProgressStopping: string;
+  i18nLogUrlText: string;
 }
 
 export class IntegrationDetailInfo extends React.PureComponent<
@@ -16,14 +28,27 @@ export class IntegrationDetailInfo extends React.PureComponent<
     return (
       <div className="integration-detail-info">
         <IntegrationDetailEditableName name={this.props.name} />
-        {this.props.version ? (
-          <>
-            <span className="pficon pficon-ok" />
-            &nbsp;Published version {this.props.version}
-          </>
-        ) : (
-          'Stopped'
-        )}
+        <>
+          {this.props.currentState === 'Pending' && (
+            <IntegrationStatusDetail
+              targetState={this.props.targetState}
+              value={this.props.monitoringValue}
+              currentStep={this.props.monitoringCurrentStep}
+              totalSteps={this.props.monitoringTotalSteps}
+              logUrl={this.props.monitoringLogUrl}
+              i18nProgressPending={this.props.i18nProgressPending}
+              i18nProgressStarting={this.props.i18nProgressStarting}
+              i18nProgressStopping={this.props.i18nProgressStopping}
+              i18nLogUrlText={this.props.i18nLogUrlText}
+            />
+          )}
+          {this.props.currentState === 'Published' && this.props.version && (
+            <>
+              <span className="pficon pficon-ok" />
+              &nbsp;Published version {this.props.version}
+            </>
+          )}
+        </>
       </div>
     );
   }
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/IntegrationDetailHeader.tsx b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationDetailHeader.tsx
new file mode 100644
index 00000000000..15f433bb7be
--- /dev/null
+++ b/app/ui-react/syndesis/src/modules/integrations/components/IntegrationDetailHeader.tsx
@@ -0,0 +1,89 @@
+import { canActivate, canDeactivate } from '@syndesis/api';
+import {
+  IntegrationMonitoring,
+  IntegrationWithMonitoring,
+} from '@syndesis/models';
+import {
+  IMenuActions,
+  IntegrationDetailBreadcrumb,
+  IntegrationDetailInfo,
+} from '@syndesis/ui';
+import * as React from 'react';
+import { Translation } from 'react-i18next';
+import resolvers from '../../resolvers';
+import { IntegrationDetailNavBar } from '../shared';
+
+export interface IIntegrationDetailHeaderProps {
+  data: IntegrationWithMonitoring;
+  startAction: IMenuActions;
+  stopAction: IMenuActions;
+  deleteAction: IMenuActions;
+  ciCdAction: IMenuActions;
+  editAction: IMenuActions;
+  exportAction: IMenuActions;
+  getPodLogUrl: (
+    monitoring: IntegrationMonitoring | undefined
+  ) => string | undefined;
+}
+
+export const IntegrationDetailHeader: React.FunctionComponent<
+  IIntegrationDetailHeaderProps
+> = (props: IIntegrationDetailHeaderProps) => {
+  const breadcrumbMenuActions: IMenuActions[] = [];
+  if (canActivate(props.data.integration)) {
+    breadcrumbMenuActions.push(props.startAction);
+  }
+  if (canDeactivate(props.data.integration)) {
+    breadcrumbMenuActions.push(props.stopAction);
+  }
+  breadcrumbMenuActions.push(props.deleteAction);
+  breadcrumbMenuActions.push(props.ciCdAction);
+
+  return (
+    <Translation ns={['integrations', 'shared']}>
+      {t => (
+        <>
+          <IntegrationDetailBreadcrumb
+            editHref={props.editAction.href}
+            editLabel={props.editAction.label}
+            exportAction={props.exportAction.onClick}
+            exportHref={props.exportAction.href}
+            exportLabel={props.exportAction.label}
+            homeHref={resolvers.dashboard.root()}
+            i18nHome={t('shared:Home')}
+            i18nIntegrations={t('shared:Integrations')}
+            i18nPageTitle={t('integrations:detail:pageTitle')}
+            integrationId={props.data.integration.id}
+            integrationsHref={resolvers.integrations.list()}
+            menuActions={breadcrumbMenuActions}
+          />
+
+          <IntegrationDetailInfo
+            name={props.data.integration.name}
+            version={props.data.integration.version}
+            currentState={props.data.integration.currentState!}
+            targetState={props.data.integration.targetState!}
+            monitoringValue={
+              props.data.monitoring &&
+              t('integrations:' + props.data.monitoring.detailedState.value)
+            }
+            monitoringCurrentStep={
+              props.data.monitoring &&
+              props.data.monitoring.detailedState.currentStep
+            }
+            monitoringTotalSteps={
+              props.data.monitoring &&
+              props.data.monitoring.detailedState.totalSteps
+            }
+            monitoringLogUrl={props.getPodLogUrl(props.data.monitoring)}
+            i18nProgressPending={t('shared:Pending')}
+            i18nProgressStarting={t('integrations:progressStarting')}
+            i18nProgressStopping={t('integrations:progressStopping')}
+            i18nLogUrlText={t('shared:viewLogs')}
+          />
+          <IntegrationDetailNavBar integration={props.data.integration} />
+        </>
+      )}
+    </Translation>
+  );
+};
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/index.ts b/app/ui-react/syndesis/src/modules/integrations/components/index.ts
index a4b38029c72..e2ff6f363bc 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/index.ts
+++ b/app/ui-react/syndesis/src/modules/integrations/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Integrations';
 export * from './IntegrationCreatorBreadcrumbs';
+export * from './IntegrationDetailHeader';
 export * from './IntegrationDetailSteps';
 export * from './IntegrationEditorBreadcrumbs';
 export * from './IntegrationEditorSidebar';
diff --git a/app/ui-react/syndesis/src/modules/integrations/pages/detail/ActivityPage.tsx b/app/ui-react/syndesis/src/modules/integrations/pages/detail/ActivityPage.tsx
index 85abc1f318c..46f8e26702f 100644
--- a/app/ui-react/syndesis/src/modules/integrations/pages/detail/ActivityPage.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/pages/detail/ActivityPage.tsx
@@ -1,8 +1,16 @@
+import { WithMonitoredIntegration } from '@syndesis/api';
 import { Integration } from '@syndesis/models';
-import { WithRouteData } from '@syndesis/utils';
+import { IntegrationDetailActivity, Loader } from '@syndesis/ui';
+import { WithLoader, WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
-import { IntegrationDetailNavBar } from '../../shared';
+import { AppContext } from '../../../../app';
+import { ApiError, PageTitle } from '../../../../shared';
+import {
+  IntegrationDetailHeader,
+  WithIntegrationActions,
+} from '../../components';
+import { ActivityPageTable } from './ActivityPageTable';
 
 /**
  * @integrationId - the ID of the integration for which details are being displayed.
@@ -25,18 +33,84 @@ export interface IActivityPageState {
 export class ActivityPage extends React.Component {
   public render() {
     return (
-      <WithRouteData<IActivityPageParams, IActivityPageState>>
-        {({ integrationId }, { integration }, { history }) => {
-          return (
-            <div>
-              <Translation ns={['integration', 'shared']}>
-                {t => <IntegrationDetailNavBar integration={integration} />}
-              </Translation>
-              <p>This is the Integration Detail Activity page.</p>
-            </div>
-          );
-        }}
-      </WithRouteData>
+      <Translation ns={['integrations', 'shared']}>
+        {t => (
+          <AppContext.Consumer>
+            {({ getPodLogUrl }) => (
+              <WithRouteData<IActivityPageParams, IActivityPageState>>
+                {({ integrationId }, { integration }, { history }) => {
+                  return (
+                    <>
+                      <WithMonitoredIntegration integrationId={integrationId}>
+                        {({ data, hasData, error }) => (
+                          <WithLoader
+                            error={error}
+                            loading={!hasData}
+                            loaderChildren={<Loader />}
+                            errorChildren={<ApiError />}
+                          >
+                            {() => (
+                              <WithIntegrationActions
+                                integration={data.integration}
+                              >
+                                {({
+                                  ciCdAction,
+                                  editAction,
+                                  deleteAction,
+                                  exportAction,
+                                  startAction,
+                                  stopAction,
+                                }) => {
+                                  return (
+                                    <>
+                                      <PageTitle
+                                        title={t(
+                                          'integrations:detail:pageTitle'
+                                        )}
+                                      />
+                                      <IntegrationDetailHeader
+                                        data={data}
+                                        startAction={startAction}
+                                        stopAction={stopAction}
+                                        deleteAction={deleteAction}
+                                        ciCdAction={ciCdAction}
+                                        editAction={editAction}
+                                        exportAction={exportAction}
+                                        getPodLogUrl={getPodLogUrl}
+                                      />
+                                      <IntegrationDetailActivity
+                                        i18nBtnRefresh={t('shared:Refresh')}
+                                        i18nLastRefresh={t(
+                                          'integrations:LastRefresh'
+                                        )}
+                                        i18nViewLogOpenShift={t(
+                                          'integrations:View Log in OpenShift'
+                                        )}
+                                        linkToOpenShiftLog={
+                                          getPodLogUrl(data.monitoring) || ''
+                                        }
+                                        children={
+                                          <ActivityPageTable
+                                            integrationId={data.integration.id!}
+                                          />
+                                        }
+                                      />
+                                    </>
+                                  );
+                                }}
+                              </WithIntegrationActions>
+                            )}
+                          </WithLoader>
+                        )}
+                      </WithMonitoredIntegration>
+                    </>
+                  );
+                }}
+              </WithRouteData>
+            )}
+          </AppContext.Consumer>
+        )}
+      </Translation>
     );
   }
 }
diff --git a/app/ui-react/syndesis/src/modules/integrations/pages/detail/ActivityPageTable.tsx b/app/ui-react/syndesis/src/modules/integrations/pages/detail/ActivityPageTable.tsx
new file mode 100644
index 00000000000..c3e243bf774
--- /dev/null
+++ b/app/ui-react/syndesis/src/modules/integrations/pages/detail/ActivityPageTable.tsx
@@ -0,0 +1,144 @@
+import { WithActivities } from '@syndesis/api';
+import {
+  Activity,
+  ActivityStep,
+  IntegrationDeployment,
+  Step,
+} from '@syndesis/models';
+import {
+  IntegrationDetailActivityItem,
+  IntegrationDetailActivityItemSteps,
+} from '@syndesis/ui';
+import * as React from 'react';
+import { Translation } from 'react-i18next';
+import i18n from '../../../../i18n';
+
+export interface IActivityPagetableProps {
+  integrationId: string;
+}
+
+interface IExtendedActivity extends Activity {
+  [name: string]: any;
+}
+
+interface IExtendedActivityStep extends ActivityStep {
+  [name: string]: any;
+}
+
+interface IExtendedDeployment extends IntegrationDeployment {
+  [name: string]: any;
+}
+
+function fetchStepName(step: Step): string {
+  let stepName = 'n/a';
+
+  if (step) {
+    const { name, action } = step;
+    stepName = name || (action && action.name ? action.name : stepName);
+  }
+
+  return stepName;
+}
+
+export class ActivityPageTable extends React.Component<
+  IActivityPagetableProps
+> {
+  public render() {
+    return (
+      <Translation ns={['integrations', 'shared']}>
+        {t => (
+          <WithActivities integrationId={this.props.integrationId}>
+            {({
+              activities: activitiesBase,
+              deployments: deploymentsBase,
+              // fetchActivities,
+              // fetchDeployments,
+            }) => {
+              const activities = activitiesBase as IExtendedActivity[];
+              const integrationDeployments = (deploymentsBase ||
+                []) as IExtendedDeployment[];
+              /*
+              const refresh = async () => {
+                await fetchActivities();
+                await fetchDeployments();
+              };
+              */
+
+              activities.forEach((activity: IExtendedActivity) => {
+                if (activity.steps && Array.isArray(activity.steps)) {
+                  activity.steps.forEach((step: IExtendedActivityStep) => {
+                    step.name = 'n/a';
+                    step.isFailed =
+                      typeof step.failure !== 'undefined' &&
+                      step.failure.length > 0;
+
+                    const deployedIntegration = integrationDeployments.find(
+                      deployment => deployment.version === +activity.ver
+                    );
+                    if (!deployedIntegration) {
+                      return;
+                    }
+
+                    for (const integrationFlow of deployedIntegration!.spec!
+                      .flows!) {
+                      const integrationStep = integrationFlow!.steps!.find(
+                        is => is.id === step.id
+                      );
+                      if (integrationStep) {
+                        step.name = fetchStepName(integrationStep);
+                        break;
+                      }
+                    }
+
+                    const errorMessages = [
+                      null,
+                      ...step.messages!,
+                      step.failure,
+                    ].filter(messages => !!messages);
+                    step.output =
+                      errorMessages.length > 0 ? errorMessages.join('\n') : '';
+                  });
+                }
+              });
+
+              return (
+                <>
+                  {activities.map(
+                    (activity: IExtendedActivity, activityIndex: number) => (
+                      <IntegrationDetailActivityItem
+                        key={activityIndex}
+                        date={new Date(activity.at!).getDate().toLocaleString()}
+                        errorCount={activity.failed ? 1 : 0}
+                        i18nErrorsFound={t('integrations:ErrorsFound')}
+                        i18nNoErrors={t('integrations:NoErrors')}
+                        i18nNoSteps={t('integrations:NoSteps')}
+                        i18nVersion={t('shared:Version')}
+                        steps={(activity.steps || []).map(
+                          (step: IExtendedActivityStep, stepIndex: number) => (
+                            <IntegrationDetailActivityItemSteps
+                              key={stepIndex}
+                              duration={step.duration}
+                              name={step.name || ''}
+                              output={step.output}
+                              status={
+                                step.isFailed
+                                  ? i18n.t('shared:Error')
+                                  : i18n.t('shared:Success')
+                              }
+                            />
+                          )
+                        )}
+                        time={new Date(activity.at).getTime().toLocaleString()}
+                        version={activity.version}
+                      />
+                    )
+                  )}
+                </>
+              );
+            }}
+          </WithActivities>
+        )}
+      </Translation>
+    );
+  }
+}
diff --git a/app/ui-react/syndesis/src/modules/integrations/pages/detail/DetailsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/pages/detail/DetailsPage.tsx
index 64e25fa14e6..ce787f25f18 100644
--- a/app/ui-react/syndesis/src/modules/integrations/pages/detail/DetailsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/pages/detail/DetailsPage.tsx
@@ -1,25 +1,22 @@
-import { canActivate, canDeactivate, WithIntegration } from '@syndesis/api';
+import { canActivate, WithMonitoredIntegration } from '@syndesis/api';
 import { IIntegrationOverviewWithDraft } from '@syndesis/models';
 import {
-  IMenuActions,
-  IntegrationDetailBreadcrumb,
   IntegrationDetailDescription,
   IntegrationDetailHistoryListView,
   IntegrationDetailHistoryListViewItem,
   IntegrationDetailHistoryListViewItemActions,
-  IntegrationDetailInfo,
   Loader,
 } from '@syndesis/ui';
 import { WithLoader, WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
+import { AppContext } from '../../../../app';
 import { ApiError, PageTitle } from '../../../../shared';
-import resolvers from '../../../resolvers';
 import {
+  IntegrationDetailHeader,
   IntegrationDetailSteps,
   WithIntegrationActions,
 } from '../../components';
-import { IntegrationDetailNavBar } from '../../shared';
 
 /**
  * @integrationId - the ID of the integration for which details are being displayed.
@@ -54,126 +51,123 @@ export class DetailsPage extends React.Component<IIntegrationDetailsPageProps> {
     return (
       <Translation ns={['integrations', 'shared']}>
         {t => (
-          <WithRouteData<IIntegrationDetailsRouteParams, null>>
-            {({ integrationId }) => (
-              <WithIntegration integrationId={integrationId}>
-                {({ data, hasData, error }) => (
-                  <WithLoader
-                    error={error}
-                    loading={!hasData}
-                    loaderChildren={<Loader />}
-                    errorChildren={<ApiError />}
-                  >
-                    {() => (
-                      <WithIntegrationActions integration={data}>
-                        {({
-                          ciCdAction,
-                          editAction,
-                          deleteAction,
-                          exportAction,
-                          startAction,
-                          stopAction,
-                        }) => {
-                          const breadcrumbMenuActions: IMenuActions[] = [];
-                          if (canActivate(data)) {
-                            breadcrumbMenuActions.push(startAction);
-                          }
-                          if (canDeactivate(data)) {
-                            breadcrumbMenuActions.push(stopAction);
-                          }
-                          breadcrumbMenuActions.push(deleteAction);
-                          breadcrumbMenuActions.push(ciCdAction);
-                          return (
-                            <>
-                              <PageTitle
-                                title={t('integrations:detail:pageTitle')}
-                              />
-                              <IntegrationDetailBreadcrumb
-                                editHref={editAction.href}
-                                editLabel={editAction.label}
-                                exportAction={exportAction.onClick}
-                                exportHref={exportAction.href}
-                                exportLabel={exportAction.label}
-                                homeHref={resolvers.dashboard.root()}
-                                i18nHome={t('shared:Home')}
-                                i18nIntegrations={t('shared:Integrations')}
-                                i18nPageTitle={t(
-                                  'integrations:detail:pageTitle'
-                                )}
-                                integrationId={data.id}
-                                integrationsHref={resolvers.integrations.list()}
-                                menuActions={breadcrumbMenuActions}
-                              />
-
-                              <IntegrationDetailInfo
-                                name={data.name}
-                                version={data.version}
-                              />
-                              <IntegrationDetailNavBar integration={data} />
-                              <IntegrationDetailSteps integration={data} />
-                              <IntegrationDetailDescription
-                                description={data.description}
-                                i18nNoDescription={t(
-                                  'integrations:detail:noDescription'
-                                )}
-                              />
-                              <IntegrationDetailHistoryListView
-                                editHref={editAction.href}
-                                editLabel={editAction.label}
-                                hasHistory={(data.deployments || []).length > 0}
-                                isDraft={data.isDraft}
-                                i18nTextDraft={t('shared:Draft')}
-                                i18nTextHistory={t(
-                                  'integrations:detail:History'
-                                )}
-                                publishAction={
-                                  canActivate(data)
-                                    ? startAction.onClick
-                                    : undefined
-                                }
-                                publishHref={
-                                  canActivate(data)
-                                    ? startAction.href
-                                    : undefined
-                                }
-                                publishLabel={
-                                  canActivate(data)
-                                    ? t('shared:Publish')
-                                    : undefined
-                                }
-                                children={(data.deployments || []).map(
-                                  (deployment, idx) => {
-                                    return (
-                                      <IntegrationDetailHistoryListViewItem
-                                        key={idx}
-                                        actions={
-                                          <IntegrationDetailHistoryListViewItemActions
-                                            actions={[]}
-                                            integrationId={data.id!}
-                                          />
-                                        }
-                                        currentState={deployment.currentState!}
-                                        i18nTextLastPublished={t(
-                                          'integrations:detail:lastPublished'
-                                        )}
-                                        i18nTextVersion={t('shared:Version')}
-                                        updatedAt={deployment.updatedAt}
-                                        version={deployment.version}
-                                      />
-                                    );
-                                  }
-                                )}
-                              />
-                            </>
-                          );
-                        }}
-                      </WithIntegrationActions>
+          <AppContext.Consumer>
+            {({ getPodLogUrl }) => (
+              <WithRouteData<IIntegrationDetailsRouteParams, null>>
+                {({ integrationId }) => (
+                  <WithMonitoredIntegration integrationId={integrationId}>
+                    {({ data, hasData, error }) => (
+                      <WithLoader
+                        error={error}
+                        loading={!hasData}
+                        loaderChildren={<Loader />}
+                        errorChildren={<ApiError />}
+                      >
+                        {() => (
+                          <WithIntegrationActions
+                            integration={data.integration}
+                          >
+                            {({
+                              ciCdAction,
+                              editAction,
+                              deleteAction,
+                              exportAction,
+                              startAction,
+                              stopAction,
+                            }) => {
+                              return (
+                                <>
+                                  <PageTitle
+                                    title={t('integrations:detail:pageTitle')}
+                                  />
+                                  <IntegrationDetailHeader
+                                    data={data}
+                                    startAction={startAction}
+                                    stopAction={stopAction}
+                                    deleteAction={deleteAction}
+                                    ciCdAction={ciCdAction}
+                                    editAction={editAction}
+                                    exportAction={exportAction}
+                                    getPodLogUrl={getPodLogUrl}
+                                  />
+                                  <IntegrationDetailSteps
+                                    integration={data.integration}
+                                  />
+                                  <IntegrationDetailDescription
+                                    description={data.integration.description}
+                                    i18nNoDescription={t(
+                                      'integrations:detail:noDescription'
+                                    )}
+                                  />
+                                  <IntegrationDetailHistoryListView
+                                    editHref={editAction.href}
+                                    editLabel={editAction.label}
+                                    hasHistory={
+                                      (data.integration.deployments || [])
+                                        .length > 0
+                                    }
+                                    isDraft={
+                                      (data.integration as IIntegrationOverviewWithDraft)
+                                        .isDraft
+                                    }
+                                    i18nTextDraft={t('shared:Draft')}
+                                    i18nTextHistory={t(
+                                      'integrations:detail:History'
+                                    )}
+                                    publishAction={
+                                      canActivate(data.integration)
+                                        ? startAction.onClick
+                                        : undefined
+                                    }
+                                    publishHref={
+                                      canActivate(data.integration)
+                                        ? startAction.href
+                                        : undefined
+                                    }
+                                    publishLabel={
+                                      canActivate(data.integration)
+                                        ? t('shared:Publish')
+                                        : undefined
+                                    }
+                                    children={(
+                                      data.integration.deployments || []
+                                    ).map((deployment, idx) => {
+                                      return (
+                                        <IntegrationDetailHistoryListViewItem
+                                          key={idx}
+                                          actions={
+                                            <IntegrationDetailHistoryListViewItemActions
+                                              actions={[]}
+                                              integrationId={
+                                                data.integration.id!
+                                              }
+                                            />
+                                          }
+                                          currentState={
+                                            deployment.currentState!
+                                          }
+                                          i18nTextLastPublished={t(
+                                            'integrations:detail:lastPublished'
+                                          )}
+                                          i18nTextVersion={t('shared:Version')}
+                                          updatedAt={deployment.updatedAt}
+                                          version={deployment.version}
+                                        />
+                                      );
+                                    })}
+                                  />
+                                </>
+                              );
+                            }}
+                          </WithIntegrationActions>
+                        )}
+                      </WithLoader>
                     )}
-                  </WithLoader>
+                  </WithMonitoredIntegration>
                 )}
-              </WithIntegration>
+              </WithRouteData>
             )}
-          </WithRouteData>
+          </AppContext.Consumer>
         )}
       </Translation>
     );
diff --git a/app/ui-react/syndesis/src/modules/integrations/pages/detail/MetricsPage.tsx b/app/ui-react/syndesis/src/modules/integrations/pages/detail/MetricsPage.tsx
index f13c8699361..95870b516bb 100644
--- a/app/ui-react/syndesis/src/modules/integrations/pages/detail/MetricsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/pages/detail/MetricsPage.tsx
@@ -1,8 +1,15 @@
+import { WithMonitoredIntegration } from '@syndesis/api';
 import { Integration } from '@syndesis/models';
-import { WithRouteData } from '@syndesis/utils';
+import { Loader } from '@syndesis/ui';
+import { WithLoader, WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
-import { IntegrationDetailNavBar } from '../../shared';
+import { AppContext } from '../../../../app';
+import { ApiError, PageTitle } from '../../../../shared';
+import {
+  IntegrationDetailHeader,
+  WithIntegrationActions,
+} from '../../components';
 
 /**
  * @integrationId - the ID of the integration for which details are being displayed.
@@ -25,18 +32,67 @@ export interface IMetricsPageState {
 export class MetricsPage extends React.Component {
   public render() {
     return (
-      <WithRouteData<IMetricsPageParams, IMetricsPageState>>
-        {({ integrationId }, { integration }, { history }) => {
-          return (
-            <div>
-              <Translation ns={['integration', 'shared']}>
-                {t => <IntegrationDetailNavBar integration={integration} />}
-              </Translation>
-              <p>This is the Integration Detail Metrics page.</p>
-            </div>
-          );
-        }}
-      </WithRouteData>
+      <Translation ns={['integrations', 'shared']}>
+        {t => (
+          <AppContext.Consumer>
+            {({ getPodLogUrl }) => (
+              <WithRouteData<IMetricsPageParams, IMetricsPageState>>
+                {({ integrationId }, { integration }, { history }) => {
+                  return (
+                    <WithMonitoredIntegration integrationId={integrationId}>
+                      {({ data, hasData, error }) => (
+                        <WithLoader
+                          error={error}
+                          loading={!hasData}
+                          loaderChildren={<Loader />}
+                          errorChildren={<ApiError />}
+                        >
+                          {() => (
+                            <WithIntegrationActions
+                              integration={data.integration}
+                            >
+                              {({
+                                ciCdAction,
+                                editAction,
+                                deleteAction,
+                                exportAction,
+                                startAction,
+                                stopAction,
+                              }) => {
+                                return (
+                                  <>
+                                    <PageTitle
+                                      title={t('integrations:detail:pageTitle')}
+                                    />
+                                    <IntegrationDetailHeader
+                                      data={data}
+                                      startAction={startAction}
+                                      stopAction={stopAction}
+                                      deleteAction={deleteAction}
+                                      ciCdAction={ciCdAction}
+                                      editAction={editAction}
+                                      exportAction={exportAction}
+                                      getPodLogUrl={getPodLogUrl}
+                                    />
+                                    <p>
+                                      This is the Integration Detail Metrics
+                                      page.
+                                    </p>
+                                  </>
+                                );
+                              }}
+                            </WithIntegrationActions>
+                          )}
+                        </WithLoader>
+                      )}
+                    </WithMonitoredIntegration>
+                  );
+                }}
+              </WithRouteData>
+            )}
+          </AppContext.Consumer>
+        )}
+      </Translation>
     );
   }
 }
diff --git a/app/ui-react/syndesis/src/modules/integrations/pages/detail/index.ts b/app/ui-react/syndesis/src/modules/integrations/pages/detail/index.ts
index 641a6eecc00..4eae805e1a8 100644
--- a/app/ui-react/syndesis/src/modules/integrations/pages/detail/index.ts
+++ b/app/ui-react/syndesis/src/modules/integrations/pages/detail/index.ts
@@ -1,3 +1,4 @@
 export * from './ActivityPage';
+export * from './ActivityPageTable';
 export * from './DetailsPage';
 export * from './MetricsPage';