Add execution list and details pages

envoy.Dockerfile

@@ -1,11 +1,9 @@
 FROM envoyproxy/envoy:latest
 
 COPY envoy.yaml /etc/envoy.yaml
-COPY envoy-entrypoint.sh /
-
-RUN chmod 500 /envoy-entrypoint.sh
 
 RUN apt-get update && \
     apt-get install gettext -y
 
-ENTRYPOINT ["/envoy-entrypoint.sh"]
+ENTRYPOINT ["/usr/local/bin/envoy", "-c"]
+CMD ["/etc/envoy.yaml"]

frontend/src/components/Router.tsx

@@ -25,6 +25,8 @@ import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import ExecutionList from '../pages/ExecutionList';
+import ExecutionDetails from '../pages/ExecutionDetails';
 import ExperimentDetails from '../pages/ExperimentDetails';
 import ExperimentsAndRuns, { ExperimentsAndRunsTab } from '../pages/ExperimentsAndRuns';
 import NewExperiment from '../pages/NewExperiment';
@@ -72,6 +74,7 @@ export enum RouteParams {
 // tslint:disable-next-line:variable-name
 export const RoutePrefix = {
   ARTIFACT: '/artifact',
+  EXECUTION: '/execution',
   RECURRING_RUN: '/recurringrun',
 };
 
@@ -136,6 +139,8 @@ class Router extends React.Component<{}, RouteComponentState> {
       { path: RoutePage.ARCHIVE, Component: Archive },
       { path: RoutePage.ARTIFACTS, Component: ArtifactList },
       { path: RoutePage.ARTIFACT_DETAILS, Component: ArtifactDetails },
+      { path: RoutePage.EXECUTIONS, Component: ExecutionList },
+      { path: RoutePage.EXECUTION_DETAILS, Component: ExecutionDetails },
       { path: RoutePage.EXPERIMENTS, Component: ExperimentsAndRuns, view: ExperimentsAndRunsTab.EXPERIMENTS },
       { path: RoutePage.EXPERIMENT_DETAILS, Component: ExperimentDetails },
       { path: RoutePage.NEW_EXPERIMENT, Component: NewExperiment },

frontend/src/components/SideNav.tsx

@@ -19,6 +19,7 @@ import ArchiveIcon from '@material-ui/icons/Archive';
 import ArtifactsIcon from '@material-ui/icons/BubbleChart';
 import Button from '@material-ui/core/Button';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ExecutionsIcon from '@material-ui/icons/PlayArrow';
 import ExperimentsIcon from '../icons/experiments';
 import IconButton from '@material-ui/core/IconButton';
 import JupyterhubIcon from '@material-ui/icons/Code';
@@ -252,7 +253,7 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
               </Button>
             </Link>
           </Tooltip>
-          <div className={classes(css.indicator, !page.startsWith(RoutePage.ARTIFACTS) && css.indicatorHidden)} />
+          <div className={classes(css.indicator, !this._highlightArtifactsButton(page) && css.indicatorHidden)} />
           <Tooltip title={'Artifacts List'} enterDelay={300} placement={'right-start'}
             disableFocusListener={!collapsed} disableHoverListener={!collapsed}
             disableTouchListener={!collapsed}>
@@ -265,6 +266,19 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
               </Button>
             </Link>
           </Tooltip>
+          <div className={classes(css.indicator, !this._highlightExecutionsButton(page) && css.indicatorHidden)} />
+          <Tooltip title={'Executions List'} enterDelay={300} placement={'right-start'}
+            disableFocusListener={!collapsed} disableHoverListener={!collapsed}
+            disableTouchListener={!collapsed}>
+            <Link id='executionsBtn' to={RoutePage.EXECUTIONS} className={commonCss.unstyled}>
+              <Button className={classes(css.button,
+                this._highlightExecutionsButton(page) && css.active,
+                collapsed && css.collapsedButton)}>
+                <ExecutionsIcon />
+                <span className={classes(collapsed && css.collapsedLabel, css.label)}>Executions</span>
+              </Button>
+            </Link>
+          </Tooltip>
           {this.state.jupyterHubAvailable && (
             <Tooltip title={'Open Jupyter Notebook'} enterDelay={300} placement={'right-start'}
               disableFocusListener={!collapsed} disableHoverListener={!collapsed}
@@ -327,6 +341,10 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
     return page.startsWith(RoutePrefix.ARTIFACT);
   }
 
+  private _highlightExecutionsButton(page: string): boolean {
+    return page.startsWith(RoutePrefix.EXECUTION);
+  }
+
   private _toggleNavClicked(): void {
     this.setStateSafe({
       collapsed: !this.state.collapsed,

frontend/src/components/__snapshots__/Router.test.tsx.snap

@@ -44,60 +44,72 @@ exports[`Router initial render 1`] = `
           <Route
             exact={true}
             key="3"
-            path="/experiments"
+            path="/executions"
             render={[Function]}
           />
           <Route
             exact={true}
             key="4"
-            path="/experiments/details/:eid"
+            path="/execution_types/:executionType+/executions/:id"
             render={[Function]}
           />
           <Route
             exact={true}
             key="5"
-            path="/experiments/new"
+            path="/experiments"
             render={[Function]}
           />
           <Route
             exact={true}
             key="6"
-            path="/runs/new"
+            path="/experiments/details/:eid"
             render={[Function]}
           />
           <Route
             exact={true}
             key="7"
-            path="/pipelines"
+            path="/experiments/new"
             render={[Function]}
           />
           <Route
             exact={true}
             key="8"
-            path="/pipelines/details/:pid?"
+            path="/runs/new"
             render={[Function]}
           />
           <Route
             exact={true}
             key="9"
-            path="/runs"
+            path="/pipelines"
             render={[Function]}
           />
           <Route
             exact={true}
             key="10"
-            path="/recurringrun/details/:rid"
+            path="/pipelines/details/:pid?"
             render={[Function]}
           />
           <Route
             exact={true}
             key="11"
-            path="/runs/details/:rid"
+            path="/runs"
             render={[Function]}
           />
           <Route
             exact={true}
             key="12"
+            path="/recurringrun/details/:rid"
+            render={[Function]}
+          />
+          <Route
+            exact={true}
+            key="13"
+            path="/runs/details/:rid"
+            render={[Function]}
+          />
+          <Route
+            exact={true}
+            key="14"
             path="/compare"
             render={[Function]}
           />