diff --git a/.gitignore b/.gitignore
index 588872d177cc..12dc7cd609ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,6 +39,7 @@ frontend/test/ui/visual-regression/screenshots/screen
 
 *.pyc
 .DS_Store
+build
 
 .ipynb_checkpoints
 *.egg-info
@@ -46,6 +47,9 @@ frontend/test/ui/visual-regression/screenshots/screen
 # go vendor
 vendor
 
+# Go module cache
+backend/pkg/mod/cache
+
 # Bazel output artifacts
 bazel-*
 
@@ -61,3 +65,4 @@ _artifacts
 
 # Generated Python SDK documentation
 docs/_build
+
diff --git a/.pylintrc b/.pylintrc
new file mode 100644
index 000000000000..c915d10042a2
--- /dev/null
+++ b/.pylintrc
@@ -0,0 +1,410 @@
+[MASTER]
+
+# Specify a configuration file.
+#rcfile=
+
+# Python code to execute, usually for sys.path manipulation such as
+# pygtk.require().
+#init-hook=
+
+# Add files or directories to the blacklist. They should be base names, not
+# paths.
+ignore=CVS
+
+# Add files or directories matching the regex patterns to the blacklist. The
+# regex matches against base names, not paths.
+ignore-patterns=
+
+# Pickle collected data for later comparisons.
+persistent=yes
+
+# List of plugins (as comma separated values of python modules names) to load,
+# usually to register additional checkers.
+load-plugins=
+
+# Use multiple processes to speed up Pylint.
+jobs=1
+
+# Allow loading of arbitrary C extensions. Extensions are imported into the
+# active Python interpreter and may run arbitrary code.
+unsafe-load-any-extension=no
+
+# A comma-separated list of package or module names from where C extensions may
+# be loaded. Extensions are loading into the active Python interpreter and may
+# run arbitrary code
+extension-pkg-whitelist=numpy
+
+# Allow optimization of some AST trees. This will activate a peephole AST
+# optimizer, which will apply various small optimizations. For instance, it can
+# be used to obtain the result of joining multiple strings with the addition
+# operator. Joining a lot of strings can lead to a maximum recursion error in
+# Pylint and this flag can prevent that. It has one side effect, the resulting
+# AST will be different than the one from reality. This option is deprecated
+# and it will be removed in Pylint 2.0.
+optimize-ast=no
+
+
+[MESSAGES CONTROL]
+
+# Only show warnings with the listed confidence levels. Leave empty to show
+# all. Valid levels: HIGH, INFERENCE, INFERENCE_FAILURE, UNDEFINED
+confidence=
+
+# Enable the message, report, category or checker with the given id(s). You can
+# either give multiple identifier separated by comma (,) or put this option
+# multiple time (only on the command line, not in the configuration file where
+# it should appear only once). See also the "--disable" option for examples.
+#enable=
+
+# Disable the message, report, category or checker with the given id(s). You
+# can either give multiple identifiers separated by comma (,) or put this
+# option multiple times (only on the command line, not in the configuration
+# file where it should appear only once).You can also use "--disable=all" to
+# disable everything first and then reenable specific checks. For example, if
+# you want to run only the similarities checker, you can use "--disable=all
+# --enable=similarities". If you want to run only the classes checker, but have
+# no Warning level messages displayed, use"--disable=all --enable=classes
+# --disable=W"
+# TODO(numerology): enable missing-module-docstring after finish the effort.
+disable=missing-module-docstring
+
+
+[REPORTS]
+
+# Set the output format. Available formats are text, parseable, colorized, msvs
+# (visual studio) and html. You can also give a reporter class, eg
+# mypackage.mymodule.MyReporterClass.
+output-format=text
+
+# Put messages in a separate file for each module / package specified on the
+# command line instead of printing them on stdout. Reports (if any) will be
+# written in a file name "pylint_global.[txt|html]". This option is deprecated
+# and it will be removed in Pylint 2.0.
+files-output=no
+
+# Tells whether to display a full report or only the messages
+reports=yes
+
+# Python expression which should return a note less than 10 (10 is the highest
+# note). You have access to the variables errors warning, statement which
+# respectively contain the number of errors / warnings messages and the total
+# number of statements analyzed. This is used by the global evaluation report
+# (RP0004).
+evaluation=10.0 - ((float(5 * error + warning + refactor + convention) / statement) * 10)
+
+# Template used to display messages. This is a python new-style format string
+# used to format the message information. See doc for all details
+#msg-template=
+
+
+[BASIC]
+
+# Good variable names which should always be accepted, separated by a comma
+# s3 is whitelisted for its special meaning.
+good-names=i,j,k,ex,Run,_,s3
+
+# Bad variable names which should always be refused, separated by a comma
+bad-names=foo,bar,baz,toto,tutu,tata
+
+# Colon-delimited sets of names that determine each other's naming style when
+# the name regexes allow several styles.
+name-group=
+
+# Include a hint for the correct naming format with invalid-name
+include-naming-hint=no
+
+# List of decorators that produce properties, such as abc.abstractproperty. Add
+# to this list to register other decorators that produce valid properties.
+property-classes=abc.abstractproperty
+
+# Regular expression matching correct variable names
+variable-rgx=[a-z_][a-z0-9_]{2,30}$
+
+# Naming hint for variable names
+variable-name-hint=[a-z_][a-z0-9_]{2,30}$
+
+# Regular expression matching correct class attribute names
+class-attribute-rgx=([A-Za-z_][A-Za-z0-9_]{2,30}|(__.*__))$
+
+# Naming hint for class attribute names
+class-attribute-name-hint=([A-Za-z_][A-Za-z0-9_]{2,30}|(__.*__))$
+
+# Regular expression matching correct argument names
+argument-rgx=[a-z_][a-z0-9_]{2,30}$
+
+# Naming hint for argument names
+argument-name-hint=[a-z_][a-z0-9_]{2,30}$
+
+# Regular expression matching correct module names
+module-rgx=(([a-z_][a-z0-9_]*)|([A-Z][a-zA-Z0-9]+))$
+
+# Naming hint for module names
+module-name-hint=(([a-z_][a-z0-9_]*)|([A-Z][a-zA-Z0-9]+))$
+
+# Regular expression matching correct constant names
+const-rgx=(([A-Z_][A-Z0-9_]*)|(__.*__))$
+
+# Naming hint for constant names
+const-name-hint=(([A-Z_][A-Z0-9_]*)|(__.*__))$
+
+# Regular expression matching correct inline iteration names
+inlinevar-rgx=[A-Za-z_][A-Za-z0-9_]*$
+
+# Naming hint for inline iteration names
+inlinevar-name-hint=[A-Za-z_][A-Za-z0-9_]*$
+
+# Regular expression matching correct method names
+method-rgx=[a-z_][a-z0-9_]{2,30}$
+
+# Naming hint for method names
+method-name-hint=[a-z_][a-z0-9_]{2,30}$
+
+# Regular expression matching correct function names
+function-rgx=[a-z_][a-z0-9_]{2,30}$
+
+# Naming hint for function names
+function-name-hint=[a-z_][a-z0-9_]{2,30}$
+
+# Regular expression matching correct attribute names
+attr-rgx=[a-z_][a-z0-9_]{2,30}$
+
+# Naming hint for attribute names
+attr-name-hint=[a-z_][a-z0-9_]{2,30}$
+
+# Regular expression matching correct class names
+class-rgx=[A-Z_][a-zA-Z0-9]+$
+
+# Naming hint for class names
+class-name-hint=[A-Z_][a-zA-Z0-9]+$
+
+# Regular expression which should only match function or class names that do
+# not require a docstring.
+no-docstring-rgx=^test_
+
+# Minimum line length for functions/classes that require docstrings, shorter
+# ones are exempt.
+docstring-min-length=-1
+
+
+[ELIF]
+
+# Maximum number of nested blocks for function / method body
+max-nested-blocks=5
+
+
+[FORMAT]
+
+# Maximum number of characters on a single line.
+max-line-length=80
+
+# Regexp for a line that is allowed to be longer than the limit.
+# Ignoring 1) links in comment, 2) component yaml specs and 3) import statements.
+ignore-long-lines=(^\s*(# )?<?https?://\S+>?$|^.*'https://raw\.githubusercontent\.com/kubeflow/pipelines\S*$|^\s*(import|from).*$)
+
+# Allow the body of an if to be on the same line as the test if there is no
+# else.
+single-line-if-stmt=y
+
+# List of optional constructs for which whitespace checking is disabled. `dict-
+# separator` is used to allow tabulation in dicts, etc.: {1  : 1,\n222: 2}.
+# `trailing-comma` allows a space between comma and closing bracket: (a, ).
+# `empty-line` allows space-only lines.
+no-space-check=trailing-comma,dict-separator
+
+# Maximum number of lines in a module
+max-module-lines=1000
+
+# String used as indentation unit. This is usually "    " (4 spaces) or "\t" (1
+# tab).
+indent-string='  '
+
+# Number of spaces of indent required inside a hanging  or continued line.
+indent-after-paren=4
+
+# Expected format of line ending, e.g. empty (any line ending), LF or CRLF.
+expected-line-ending-format=
+
+
+[LOGGING]
+
+# Logging modules to check that the string format arguments are in logging
+# function parameter format
+logging-modules=logging
+
+
+[MISCELLANEOUS]
+
+# List of note tags to take in consideration, separated by a comma.
+notes=FIXME,XXX,TODO
+
+
+[SIMILARITIES]
+
+# Minimum lines number of a similarity.
+min-similarity-lines=10
+
+# Ignore comments when computing similarities.
+ignore-comments=yes
+
+# Ignore docstrings when computing similarities.
+ignore-docstrings=yes
+
+# Ignore imports when computing similarities.
+ignore-imports=no
+
+
+[SPELLING]
+
+# Spelling dictionary name. Available dictionaries: none. To make it working
+# install python-enchant package.
+spelling-dict=
+
+# List of comma separated words that should not be checked.
+spelling-ignore-words=
+
+# A path to a file that contains private dictionary; one word per line.
+spelling-private-dict-file=
+
+# Tells whether to store unknown words to indicated private dictionary in
+# --spelling-private-dict-file option instead of raising a message.
+spelling-store-unknown-words=no
+
+
+[TYPECHECK]
+
+# Tells whether missing members accessed in mixin class should be ignored. A
+# mixin class is detected if its name ends with "mixin" (case insensitive).
+ignore-mixin-members=yes
+
+# List of module names for which member attributes should not be checked
+# (useful for modules/projects where namespaces are manipulated during runtime
+# and thus existing member attributes cannot be deduced by static analysis. It
+# supports qualified module names, as well as Unix pattern matching.
+ignored-modules=
+
+# List of class names for which member attributes should not be checked (useful
+# for classes with dynamically set attributes). This supports the use of
+# qualified names.
+ignored-classes=optparse.Values,thread._local,_thread._local,matplotlib.cm,tensorflow.python,tensorflow,tensorflow.train.Example,RunOptions
+
+# List of members which are set dynamically and missed by pylint inference
+# system, and so shouldn't trigger E1101 when accessed. Python regular
+# expressions are accepted.
+generated-members=set_shape,np.float32
+
+# List of decorators that produce context managers, such as
+# contextlib.contextmanager. Add to this list to register other decorators that
+# produce valid context managers.
+contextmanager-decorators=contextlib.contextmanager
+
+
+[VARIABLES]
+
+# Tells whether we should check for unused import in __init__ files.
+init-import=no
+
+# A regular expression matching the name of dummy variables (i.e. expectedly
+# not used).
+dummy-variables-rgx=(_+[a-zA-Z0-9_]*?$)|dummy
+
+# List of additional names supposed to be defined in builtins. Remember that
+# you should avoid to define new builtins when possible.
+additional-builtins=
+
+# List of strings which can identify a callback function by name. A callback
+# name must start or end with one of those strings.
+callbacks=cb_,_cb
+
+# List of qualified module names which can have objects that can redefine
+# builtins.
+redefining-builtins-modules=six.moves,future.builtins
+
+
+[CLASSES]
+
+# List of method names used to declare (i.e. assign) instance attributes.
+defining-attr-methods=__init__,__new__,setUp
+
+# List of valid names for the first argument in a class method.
+valid-classmethod-first-arg=cls
+
+# List of valid names for the first argument in a metaclass class method.
+valid-metaclass-classmethod-first-arg=mcs
+
+# List of member names, which should be excluded from the protected access
+# warning.
+exclude-protected=_asdict,_fields,_replace,_source,_make
+
+
+[DESIGN]
+
+# Maximum number of arguments for function / method
+max-args=10
+
+# Argument names that match this expression will be ignored. Default to name
+# with leading underscore
+ignored-argument-names=_.*
+
+# Maximum number of locals for function / method body
+max-locals=30
+
+# Maximum number of return / yield for function / method body
+max-returns=6
+
+# Maximum number of branch for function / method body
+max-branches=12
+
+# Maximum number of statements in function / method body
+max-statements=100
+
+# Maximum number of parents for a class (see R0901).
+max-parents=7
+
+# Maximum number of attributes for a class (see R0902).
+max-attributes=10
+
+# Minimum number of public methods for a class (see R0903).
+min-public-methods=0
+
+# Maximum number of public methods for a class (see R0904).
+max-public-methods=20
+
+# Maximum number of boolean expressions in a if statement
+max-bool-expr=5
+
+
+[IMPORTS]
+
+# Deprecated modules which should not be used, separated by a comma
+deprecated-modules=optparse
+
+# Create a graph of every (i.e. internal and external) dependencies in the
+# given file (report RP0402 must not be disabled)
+import-graph=
+
+# Create a graph of external dependencies in the given file (report RP0402 must
+# not be disabled)
+ext-import-graph=
+
+# Create a graph of internal dependencies in the given file (report RP0402 must
+# not be disabled)
+int-import-graph=
+
+# Force import order to recognize a module as part of the standard
+# compatibility libraries.
+known-standard-library=
+
+# Force import order to recognize a module as part of a third party library.
+known-third-party=enchant
+
+# Analyse import fallback blocks. This can be used to support both Python 2 and
+# 3 compatible code, which means that the block might have code that exists
+# only in one or another interpreter, leading to false positives when analysed.
+analyse-fallback-blocks=no
+
+
+[EXCEPTIONS]
+
+# Exceptions that will emit a warning when being caught. Defaults to
+# "Exception"
+overgeneral-exceptions=Exception
\ No newline at end of file
diff --git a/.style.yapf b/.style.yapf
new file mode 100644
index 000000000000..74248ecfe6e8
--- /dev/null
+++ b/.style.yapf
@@ -0,0 +1,9 @@
+[style]
+based_on_style = google
+blank_line_before_nested_class_or_def = true
+column_limit = 80
+continuation_indent_width = 4
+dedent_closing_brackets = true
+coalesce_brackets = true
+indent_width = 2
+split_before_first_argument = true
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 6962de1e8297..ed73a18046bf 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -23,9 +23,9 @@ matrix:
         # Frontend tests
         - cd $TRAVIS_BUILD_DIR/frontend
         - node -v
-        - npm i
+        - npm ci
         # Comment out next line if coverall has an ongoing outage to unblock.
-        - npm run test:coveralls
+        - npm run test:ci
     - language: generic
       env:
         - BAZEL_URL="https://github.com/bazelbuild/bazel/releases/download/0.23.0/bazel-0.23.0-installer-linux-x86_64.sh"
@@ -64,26 +64,54 @@ matrix:
     - language: python
       python: "3.5"
       env: TOXENV=py35
+      before_install:
+        - export PYTHONPATH=$PYTHONPATH:/home/travis/.local/lib/python3.5/site-packages/
       install: &0
+        - python3 -m pip install -r $TRAVIS_BUILD_DIR/sdk/python/requirements.txt
         # Additional dependencies
-        - pip3 install coverage coveralls jsonschema==3.0.1
+        - pip3 install coverage coveralls
         # Sample test infra dependencies
         - pip3 install minio
         - pip3 install junit_xml
         # Visualization test dependencies
         - cd $TRAVIS_BUILD_DIR/backend/src/apiserver/visualization
         - pip3 install -r requirements-test.txt
-      script: &1
-
-        # DSL tests
+      script: &1 # DSL tests
         - cd $TRAVIS_BUILD_DIR/sdk/python
-        - python3 setup.py develop
+        - python3 -m pip install -e .
         - cd $TRAVIS_BUILD_DIR # Changing the current directory to the repo root for correct coverall paths
         - coverage run --source=kfp --append sdk/python/tests/dsl/main.py
         - coverage run --source=kfp --append sdk/python/tests/compiler/main.py
         - coverage run --source=kfp --append -m unittest discover --verbose --start-dir sdk/python/tests --top-level-directory=sdk/python
         - coveralls
 
+        # Test against TFX
+        # Compile and setup protobuf
+        - PROTOC_ZIP=protoc-3.7.1-linux-x86_64.zip
+        - curl -OL https://github.com/protocolbuffers/protobuf/releases/download/v3.7.1/$PROTOC_ZIP
+        - sudo unzip -o $PROTOC_ZIP -d /usr/local bin/protoc
+        - sudo unzip -o $PROTOC_ZIP -d /usr/local 'include/*'
+        - rm -f $PROTOC_ZIP
+        # Install TFX from head
+        - cd $TRAVIS_BUILD_DIR
+        - git clone https://github.com/tensorflow/tfx.git
+        - cd $TRAVIS_BUILD_DIR/tfx
+        - pip3 install --upgrade pip
+        - python3 -m pip install "tensorflow>=1.14,<2"
+        - set -x
+        - set -e
+        - python3 setup.py bdist_wheel
+        - WHEEL_PATH=$(find dist -name "tfx-*.whl")
+        - python3 -m pip install "${WHEEL_PATH}" --upgrade
+        - set +e
+        - set +x
+        # Two KFP-related unittests
+        - cd $TRAVIS_BUILD_DIR/tfx/tfx/orchestration/kubeflow
+        - python3 kubeflow_dag_runner_test.py
+        - cd $TRAVIS_BUILD_DIR/tfx/tfx/examples/chicago_taxi_pipeline
+        - python3 taxi_pipeline_kubeflow_gcp_test.py
+        - python3 taxi_pipeline_kubeflow_local_test.py
+
         # Visualization test
         - cd $TRAVIS_BUILD_DIR/backend/src/apiserver/visualization
         - python3 test_exporter.py
@@ -102,11 +130,15 @@ matrix:
     - language: python
       python: "3.6"
       env: TOXENV=py36
+      before_install:
+        - export PYTHONPATH=$PYTHONPATH:/home/travis/.local/lib/python3.6/site-packages/
       install: *0
       script: *1
     - language: python
       python: "3.7"
       env: TOXENV=py37
+      before_install:
+        - export PYTHONPATH=$PYTHONPATH:/home/travis/.local/lib/python3.7/site-packages/
       install: *0
       script: *1
     - name: "Lint Python code with flake8"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4295c1474c57..c942317a1e3f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,190 @@
 # Change Log
 
+## [0.1.33](https://github.com/kubeflow/pipelines/tree/0.1.33) (2019-11-02)
+
+[Full Changelog](https://github.com/kubeflow/pipelines/compare/0.1.32...0.1.33)
+
+**Merged pull requests:**
+
+- Update kustomization.yaml [\#2530](https://github.com/kubeflow/pipelines/pull/2530) ([IronPan](https://github.com/IronPan))
+- Update setup.py [\#2528](https://github.com/kubeflow/pipelines/pull/2528) ([IronPan](https://github.com/IronPan))
+- Update \_\_init\_\_.py [\#2527](https://github.com/kubeflow/pipelines/pull/2527) ([IronPan](https://github.com/IronPan))
+- \[Sample\] Align preload TFX sample with TFX head [\#2526](https://github.com/kubeflow/pipelines/pull/2526) ([numerology](https://github.com/numerology))
+- SDK - Compiler - Fixed failures on Jinja placeholders [\#2522](https://github.com/kubeflow/pipelines/pull/2522) ([Ark-kun](https://github.com/Ark-kun))
+- \[Test\] Fix TFX related Travis tests [\#2521](https://github.com/kubeflow/pipelines/pull/2521) ([numerology](https://github.com/numerology))
+- update location for logo [\#2520](https://github.com/kubeflow/pipelines/pull/2520) ([IronPan](https://github.com/IronPan))
+- \[MKP\] Reduce the logo image size. [\#2519](https://github.com/kubeflow/pipelines/pull/2519) ([numerology](https://github.com/numerology))
+- Frontend - Added support for https artifact links [\#2517](https://github.com/kubeflow/pipelines/pull/2517) ([Ark-kun](https://github.com/Ark-kun))
+- Pin tensorboard version to 1.13.2 [\#2513](https://github.com/kubeflow/pipelines/pull/2513) ([IronPan](https://github.com/IronPan))
+- clean up viewer crd spec [\#2511](https://github.com/kubeflow/pipelines/pull/2511) ([IronPan](https://github.com/IronPan))
+- remove unnecessary namespace in UI rolebinding spec [\#2510](https://github.com/kubeflow/pipelines/pull/2510) ([IronPan](https://github.com/IronPan))
+- \[UI\] Fix metadata tabs loading state [\#2508](https://github.com/kubeflow/pipelines/pull/2508) ([Bobgy](https://github.com/Bobgy))
+- Regenerate api since https://github.com/kubeflow/pipelines/pull/2445 changed api proto [\#2506](https://github.com/kubeflow/pipelines/pull/2506) ([jingzhang36](https://github.com/jingzhang36))
+- \[Sample\] Replace deprecated KubeflowRunner in TFX sample [\#2499](https://github.com/kubeflow/pipelines/pull/2499) ([numerology](https://github.com/numerology))
+- Samples - Renamed component build to container build [\#2496](https://github.com/kubeflow/pipelines/pull/2496) ([Ark-kun](https://github.com/Ark-kun))
+- \[Frontend\] Enlarge choose pipeline dialog to show more description [\#2494](https://github.com/kubeflow/pipelines/pull/2494) ([Bobgy](https://github.com/Bobgy))
+- update inverse proxy custom permission setting and role setting [\#2493](https://github.com/kubeflow/pipelines/pull/2493) ([rmgogogo](https://github.com/rmgogogo))
+- Fix pipeline description 255 characters length limit [\#2492](https://github.com/kubeflow/pipelines/pull/2492) ([Bobgy](https://github.com/Bobgy))
+- \[MKP\] Fix metadata DB configmap [\#2491](https://github.com/kubeflow/pipelines/pull/2491) ([numerology](https://github.com/numerology))
+- \[Sample\] Add the run ID place holder to TFX sample, fix metadb config in preload sample as well [\#2487](https://github.com/kubeflow/pipelines/pull/2487) ([numerology](https://github.com/numerology))
+- Fix inverse proxy matching regex [\#2486](https://github.com/kubeflow/pipelines/pull/2486) ([IronPan](https://github.com/IronPan))
+- update base image to fix the GKE GC issue for marketplace deployment [\#2484](https://github.com/kubeflow/pipelines/pull/2484) ([IronPan](https://github.com/IronPan))
+- better doc for MKP-KFP deployment [\#2481](https://github.com/kubeflow/pipelines/pull/2481) ([rmgogogo](https://github.com/rmgogogo))
+- \[Frontend\] Fix log viewer cannot scroll horizontally + other minor issues [\#2480](https://github.com/kubeflow/pipelines/pull/2480) ([Bobgy](https://github.com/Bobgy))
+- \[Sample\] Update pre-load TFX::OSS sample [\#2476](https://github.com/kubeflow/pipelines/pull/2476) ([numerology](https://github.com/numerology))
+- SDK - Python components - Fixed bug when mixing file outputs with return value outputs [\#2473](https://github.com/kubeflow/pipelines/pull/2473) ([Ark-kun](https://github.com/Ark-kun))
+- Update samples/core/ai\_platform pipeline to follow data dependency [\#2472](https://github.com/kubeflow/pipelines/pull/2472) ([ucdmkt](https://github.com/ucdmkt))
+- Add option to hide tensorboard artifact [\#2466](https://github.com/kubeflow/pipelines/pull/2466) ([hlu09](https://github.com/hlu09))
+- Release notes for 0.1.32 [\#2465](https://github.com/kubeflow/pipelines/pull/2465) ([hongye-sun](https://github.com/hongye-sun))
+- \[Frontend\] Update CONTRIBUTING.md with frontend code style info [\#2464](https://github.com/kubeflow/pipelines/pull/2464) ([Bobgy](https://github.com/Bobgy))
+- \[Frontend\] Check format in travis CI [\#2463](https://github.com/kubeflow/pipelines/pull/2463) ([Bobgy](https://github.com/Bobgy))
+- Format all source files under frontend/src using prettier [\#2462](https://github.com/kubeflow/pipelines/pull/2462) ([Bobgy](https://github.com/Bobgy))
+- \[Frontend\] UI shows specified task display name in PipelineDetail page [\#2459](https://github.com/kubeflow/pipelines/pull/2459) ([Bobgy](https://github.com/Bobgy))
+- clusterrole for pipeline-runner with seldondeployments [\#2458](https://github.com/kubeflow/pipelines/pull/2458) ([MingfeiPan](https://github.com/MingfeiPan))
+- Use string literals for reference resource relation and for reference resource type in frontend [\#2453](https://github.com/kubeflow/pipelines/pull/2453) ([jingzhang36](https://github.com/jingzhang36))
+- SDK - Components - Added type to graph input references [\#2451](https://github.com/kubeflow/pipelines/pull/2451) ([Ark-kun](https://github.com/Ark-kun))
+- Fix documentation for filter.proto [\#2447](https://github.com/kubeflow/pipelines/pull/2447) ([neuromage](https://github.com/neuromage))
+- \[Request for comments\] Add config for yapf and pylintrc [\#2446](https://github.com/kubeflow/pipelines/pull/2446) ([numerology](https://github.com/numerology))
+- Runs and jobs can be created from pipeline version [\#2445](https://github.com/kubeflow/pipelines/pull/2445) ([jingzhang36](https://github.com/jingzhang36))
+- Fix CustomTable.tsx layout problems [\#2444](https://github.com/kubeflow/pipelines/pull/2444) ([Bobgy](https://github.com/Bobgy))
+- Add --bind\_all option for tensorboard [\#2441](https://github.com/kubeflow/pipelines/pull/2441) ([daikeshi](https://github.com/daikeshi))
+- \[Test\] Fix post-submit test [\#2439](https://github.com/kubeflow/pipelines/pull/2439) ([numerology](https://github.com/numerology))
+- SDK - Client - Makes the create\_run output nicer [\#2438](https://github.com/kubeflow/pipelines/pull/2438) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Setup - Added cloudpickle to requirements [\#2437](https://github.com/kubeflow/pipelines/pull/2437) ([Ark-kun](https://github.com/Ark-kun))
+- Add owner files for marketplace deployment [\#2436](https://github.com/kubeflow/pipelines/pull/2436) ([IronPan](https://github.com/IronPan))
+- Update backend OWNERS [\#2435](https://github.com/kubeflow/pipelines/pull/2435) ([IronPan](https://github.com/IronPan))
+- Diagnose me dev env [\#2425](https://github.com/kubeflow/pipelines/pull/2425) ([SinaChavoshi](https://github.com/SinaChavoshi))
+- \[Doc\] Update permission requirement in README [\#2422](https://github.com/kubeflow/pipelines/pull/2422) ([numerology](https://github.com/numerology))
+- Adding the core libraries for diagnose\_me tool. [\#2417](https://github.com/kubeflow/pipelines/pull/2417) ([SinaChavoshi](https://github.com/SinaChavoshi))
+- \[Doc\] Minor doc update [\#2394](https://github.com/kubeflow/pipelines/pull/2394) ([numerology](https://github.com/numerology))
+- License crawler for third party golang libraries [\#2393](https://github.com/kubeflow/pipelines/pull/2393) ([Bobgy](https://github.com/Bobgy))
+- update link so that user can easily jump to CAIP after deployment [\#2377](https://github.com/kubeflow/pipelines/pull/2377) ([rmgogogo](https://github.com/rmgogogo))
+- \[Frontend\] Make links in pipeline description clickable [\#2376](https://github.com/kubeflow/pipelines/pull/2376) ([Bobgy](https://github.com/Bobgy))
+- SDK/CLI: Implement kfp pipeline group [\#2340](https://github.com/kubeflow/pipelines/pull/2340) ([elikatsis](https://github.com/elikatsis))
+- SDK - Tests - Fixed most of the test warnings [\#2336](https://github.com/kubeflow/pipelines/pull/2336) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Refactoring - Split the K8sHelper class [\#2333](https://github.com/kubeflow/pipelines/pull/2333) ([Ark-kun](https://github.com/Ark-kun))
+- tech writer edits [\#2332](https://github.com/kubeflow/pipelines/pull/2332) ([jay-saldanha](https://github.com/jay-saldanha))
+- Tests - Use base image for frontend tests [\#190](https://github.com/kubeflow/pipelines/pull/190) ([Ark-kun](https://github.com/Ark-kun))
+
+
+## [0.1.32](https://github.com/kubeflow/pipelines/tree/0.1.32) (2019-10-18)
+[Full Changelog](https://github.com/kubeflow/pipelines/compare/0.1.31...0.1.32)
+
+**Merged pull requests:**
+
+- Update sdk release version [\#2434](https://github.com/kubeflow/pipelines/pull/2434) ([hongye-sun](https://github.com/hongye-sun))
+- Release e9b96de317989a9673ef88d88fb9dab9dac3005f [\#2433](https://github.com/kubeflow/pipelines/pull/2433) ([hongye-sun](https://github.com/hongye-sun))
+- \[Frontend\] Configure tslint for better DX [\#2431](https://github.com/kubeflow/pipelines/pull/2431) ([Bobgy](https://github.com/Bobgy))
+- \[Frontend\] Upgrade typescript to 3.6 [\#2428](https://github.com/kubeflow/pipelines/pull/2428) ([Bobgy](https://github.com/Bobgy))
+- SDK - DSL - Make is\_exit\_handler unnecessary in ContainerOp [\#2411](https://github.com/kubeflow/pipelines/pull/2411) ([Ark-kun](https://github.com/Ark-kun))
+- \[Frontend\] Prettier config to be consistent with existing code style [\#2409](https://github.com/kubeflow/pipelines/pull/2409) ([Bobgy](https://github.com/Bobgy))
+- tech writer edits [\#2403](https://github.com/kubeflow/pipelines/pull/2403) ([jay-saldanha](https://github.com/jay-saldanha))
+- \[Test/Sample test\] Fix model version in AI platform sample [\#2400](https://github.com/kubeflow/pipelines/pull/2400) ([numerology](https://github.com/numerology))
+- Update Watson ML default framework version [\#2398](https://github.com/kubeflow/pipelines/pull/2398) ([Tomcli](https://github.com/Tomcli))
+- Add Tomcli as kfs component reviewer [\#2396](https://github.com/kubeflow/pipelines/pull/2396) ([Tomcli](https://github.com/Tomcli))
+- quick custom spec fix [\#2390](https://github.com/kubeflow/pipelines/pull/2390) ([animeshsingh](https://github.com/animeshsingh))
+- add test config comment [\#2389](https://github.com/kubeflow/pipelines/pull/2389) ([gaoning777](https://github.com/gaoning777))
+- Remove jingzhang36 and rmgogogo from frontend reviewer list [\#2388](https://github.com/kubeflow/pipelines/pull/2388) ([Bobgy](https://github.com/Bobgy))
+- enable the check for dataflow [\#2387](https://github.com/kubeflow/pipelines/pull/2387) ([gaoning777](https://github.com/gaoning777))
+- Update samples/core/tfx-oss to tfx==0.14.0 and kfp=0.1.31 [\#2385](https://github.com/kubeflow/pipelines/pull/2385) ([ucdmkt](https://github.com/ucdmkt))
+- \[Sample\] Add back visualization in XGBoost sample [\#2384](https://github.com/kubeflow/pipelines/pull/2384) ([numerology](https://github.com/numerology))
+- move favicon path, root is override by inverse proxy [\#2382](https://github.com/kubeflow/pipelines/pull/2382) ([rmgogogo](https://github.com/rmgogogo))
+- \[Frontend\] Script and documentation to start a frontend dev env that works with all API endpoints [\#2381](https://github.com/kubeflow/pipelines/pull/2381) ([Bobgy](https://github.com/Bobgy))
+- add animesh to the approvers of the kfserving [\#2380](https://github.com/kubeflow/pipelines/pull/2380) ([gaoning777](https://github.com/gaoning777))
+- SDK - Added version [\#2374](https://github.com/kubeflow/pipelines/pull/2374) ([Ark-kun](https://github.com/Ark-kun))
+- tech writer edits [\#2373](https://github.com/kubeflow/pipelines/pull/2373) ([jay-saldanha](https://github.com/jay-saldanha))
+- \[Samples\] Add numerology as samples/OWNERS [\#2371](https://github.com/kubeflow/pipelines/pull/2371) ([numerology](https://github.com/numerology))
+- \[Frontend\] Fix cannot copy logs in LogViewer when scrolling [\#2370](https://github.com/kubeflow/pipelines/pull/2370) ([Bobgy](https://github.com/Bobgy))
+- KFServing move to v1alpha2 [\#2369](https://github.com/kubeflow/pipelines/pull/2369) ([animeshsingh](https://github.com/animeshsingh))
+- Components - Updated the gcp dataproc create\_cluster component image [\#2366](https://github.com/kubeflow/pipelines/pull/2366) ([Ark-kun](https://github.com/Ark-kun))
+- \[Doc\] Fix some description of preload samples [\#2361](https://github.com/kubeflow/pipelines/pull/2361) ([numerology](https://github.com/numerology))
+- \[Sample\] Improve tfx oss sample [\#2360](https://github.com/kubeflow/pipelines/pull/2360) ([numerology](https://github.com/numerology))
+- add cloud-platform scope in the test to reclaim the ai platform sample models [\#2355](https://github.com/kubeflow/pipelines/pull/2355) ([gaoning777](https://github.com/gaoning777))
+- Fix potential issue of the ai platform sample when running it in the ai platform notebook [\#2349](https://github.com/kubeflow/pipelines/pull/2349) ([gaoning777](https://github.com/gaoning777))
+- Typo in Data passing in python components.ipynb [\#2347](https://github.com/kubeflow/pipelines/pull/2347) ([pingsutw](https://github.com/pingsutw))
+- \[Test\] Add unittest against TFX [\#2346](https://github.com/kubeflow/pipelines/pull/2346) ([numerology](https://github.com/numerology))
+- SDK - Python components - Fixed handling multiline decorators [\#2345](https://github.com/kubeflow/pipelines/pull/2345) ([Ark-kun](https://github.com/Ark-kun))
+- \[License\] Fix third-party license [\#2344](https://github.com/kubeflow/pipelines/pull/2344) ([numerology](https://github.com/numerology))
+- \[Doc\] Fix a typo in MKP guide [\#2342](https://github.com/kubeflow/pipelines/pull/2342) ([numerology](https://github.com/numerology))
+- Fix pipeline cannot run bug when using marketplace managed storage [\#2341](https://github.com/kubeflow/pipelines/pull/2341) ([Bobgy](https://github.com/Bobgy))
+- enlarge MKP cluster constraint [\#2339](https://github.com/kubeflow/pipelines/pull/2339) ([rmgogogo](https://github.com/rmgogogo))
+- Add pipeline version api methods [\#2338](https://github.com/kubeflow/pipelines/pull/2338) ([jingzhang36](https://github.com/jingzhang36))
+- tech writer edits [\#2331](https://github.com/kubeflow/pipelines/pull/2331) ([jay-saldanha](https://github.com/jay-saldanha))
+- Add sample test for multiple output [\#2328](https://github.com/kubeflow/pipelines/pull/2328) ([gaoning777](https://github.com/gaoning777))
+- add ai\_platform test [\#2327](https://github.com/kubeflow/pipelines/pull/2327) ([gaoning777](https://github.com/gaoning777))
+- Tests - When testing SDK install it using pip [\#2325](https://github.com/kubeflow/pipelines/pull/2325) ([Ark-kun](https://github.com/Ark-kun))
+- tech writer edits [\#2324](https://github.com/kubeflow/pipelines/pull/2324) ([jay-saldanha](https://github.com/jay-saldanha))
+- SDK - Compiler - Added the component spec annotations to the compiled workflow [\#2323](https://github.com/kubeflow/pipelines/pull/2323) ([Ark-kun](https://github.com/Ark-kun))
+- \[SDK/Compiler\] Add \_create\_and\_write\_workflow method [\#2321](https://github.com/kubeflow/pipelines/pull/2321) ([numerology](https://github.com/numerology))
+- \[Sample\] Add new TFX::OSS sample [\#2319](https://github.com/kubeflow/pipelines/pull/2319) ([numerology](https://github.com/numerology))
+- SDK - Containers - Made python package installation more robust [\#2316](https://github.com/kubeflow/pipelines/pull/2316) ([Ark-kun](https://github.com/Ark-kun))
+- Extend KFServing component with autoscaling and server mode [\#2315](https://github.com/kubeflow/pipelines/pull/2315) ([Tomcli](https://github.com/Tomcli))
+- SDK - Tests - Test creating component from the real AutoML pipeline [\#2314](https://github.com/kubeflow/pipelines/pull/2314) ([Ark-kun](https://github.com/Ark-kun))
+- tech writer edits [\#2313](https://github.com/kubeflow/pipelines/pull/2313) ([jay-saldanha](https://github.com/jay-saldanha))
+- \[MKP/doc\] Update doc for changes of service account credential. [\#2309](https://github.com/kubeflow/pipelines/pull/2309) ([numerology](https://github.com/numerology))
+- \[MKP\] Remove service account credential from deployment page. [\#2308](https://github.com/kubeflow/pipelines/pull/2308) ([numerology](https://github.com/numerology))
+- SDK/DSL: ContainerOp.add\_pvolume - Fix volume passed in add\_volume [\#2306](https://github.com/kubeflow/pipelines/pull/2306) ([elikatsis](https://github.com/elikatsis))
+- \[Frontend\] Node detail view now can show workflow input/output artifacts [\#2305](https://github.com/kubeflow/pipelines/pull/2305) ([eterna2](https://github.com/eterna2))
+- SDK - Compiler - Fixed deprecation warning when calling compile [\#2303](https://github.com/kubeflow/pipelines/pull/2303) ([Ark-kun](https://github.com/Ark-kun))
+- tech writer edits [\#2301](https://github.com/kubeflow/pipelines/pull/2301) ([jay-saldanha](https://github.com/jay-saldanha))
+- \[Component\] Add VPC Interface Endpoint Support for SageMaker  [\#2299](https://github.com/kubeflow/pipelines/pull/2299) ([RedbackThomson](https://github.com/RedbackThomson))
+- SDK - Compiler - Fix bugs in the data passing rewriter [\#2297](https://github.com/kubeflow/pipelines/pull/2297) ([deepio-oc](https://github.com/deepio-oc))
+- Add CMLE deploy comment missing parameters [\#2296](https://github.com/kubeflow/pipelines/pull/2296) ([hongye-sun](https://github.com/hongye-sun))
+- Samples - Simplified pipeline submission code in samples [\#2293](https://github.com/kubeflow/pipelines/pull/2293) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Client - Added a way to set experiment name using environment variables [\#2292](https://github.com/kubeflow/pipelines/pull/2292) ([Ark-kun](https://github.com/Ark-kun))
+- tech writer edits [\#2291](https://github.com/kubeflow/pipelines/pull/2291) ([jay-saldanha](https://github.com/jay-saldanha))
+- \[MKP\] Fix gcr paths in values.yaml [\#2289](https://github.com/kubeflow/pipelines/pull/2289) ([numerology](https://github.com/numerology))
+- fix for MKP [\#2288](https://github.com/kubeflow/pipelines/pull/2288) ([rmgogogo](https://github.com/rmgogogo))
+- tech writer edits [\#2285](https://github.com/kubeflow/pipelines/pull/2285) ([jay-saldanha](https://github.com/jay-saldanha))
+- Disable cloudsql and update to v0.1.31 [\#2284](https://github.com/kubeflow/pipelines/pull/2284) ([rmgogogo](https://github.com/rmgogogo))
+-  tech writer edits [\#2282](https://github.com/kubeflow/pipelines/pull/2282) ([jay-saldanha](https://github.com/jay-saldanha))
+- Remove usage of deprecated ContainerOp methods in use\_gcp\_secret [\#2280](https://github.com/kubeflow/pipelines/pull/2280) ([andrewsmartin](https://github.com/andrewsmartin))
+- Samples - Switched the build\_component sample to the new container API [\#2279](https://github.com/kubeflow/pipelines/pull/2279) ([Ark-kun](https://github.com/Ark-kun))
+- Components - Added the "AutoML Export data to GCS" component [\#2278](https://github.com/kubeflow/pipelines/pull/2278) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Components - Deprecated build\_python\_component [\#2277](https://github.com/kubeflow/pipelines/pull/2277) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Containers - Deprecated build\_docker\_image [\#2276](https://github.com/kubeflow/pipelines/pull/2276) ([Ark-kun](https://github.com/Ark-kun))
+- Refactor resource op sample for sample test coverage [\#2274](https://github.com/kubeflow/pipelines/pull/2274) ([numerology](https://github.com/numerology))
+- SDK - Components - Creating graph components from python pipeline function  [\#2273](https://github.com/kubeflow/pipelines/pull/2273) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Components - Verify the object type when serializing primitive arguments [\#2272](https://github.com/kubeflow/pipelines/pull/2272) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Compiler - Make it possible to create more portable pipelines [\#2271](https://github.com/kubeflow/pipelines/pull/2271) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Components - Reorganized TaskSpec execution options [\#2270](https://github.com/kubeflow/pipelines/pull/2270) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Components - Fixed small bugs in graph component resolving [\#2269](https://github.com/kubeflow/pipelines/pull/2269) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Notebooks - Deprecated the docker magic [\#2266](https://github.com/kubeflow/pipelines/pull/2266) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Components - component\_ref.name should only be set when component was loaded by name [\#2265](https://github.com/kubeflow/pipelines/pull/2265) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Components - Added the ComponentSpec.save method [\#2264](https://github.com/kubeflow/pipelines/pull/2264) ([Ark-kun](https://github.com/Ark-kun))
+- Components - Removed trailing whitespace from AutoML components code [\#2263](https://github.com/kubeflow/pipelines/pull/2263) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Components - Restored attribute order when generating component.yaml files [\#2262](https://github.com/kubeflow/pipelines/pull/2262) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Lightweight - Convert the names of file inputs and outputs [\#2260](https://github.com/kubeflow/pipelines/pull/2260) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Compiler - Fixed small bug in data passing rewriter [\#2259](https://github.com/kubeflow/pipelines/pull/2259) ([Ark-kun](https://github.com/Ark-kun))
+- Samples - Added the data passing tutorial [\#2258](https://github.com/kubeflow/pipelines/pull/2258) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Components - Deprecate the get and set methods for default image in favor of plain variable [\#2257](https://github.com/kubeflow/pipelines/pull/2257) ([Ark-kun](https://github.com/Ark-kun))
+- SDK - Containers - Getting namespace lazily [\#2256](https://github.com/kubeflow/pipelines/pull/2256) ([Ark-kun](https://github.com/Ark-kun))
+- remove default namespace [\#2250](https://github.com/kubeflow/pipelines/pull/2250) ([SinaChavoshi](https://github.com/SinaChavoshi))
+- SDK - Lightweight - Added package installation support to func\_to\_container\_op [\#2245](https://github.com/kubeflow/pipelines/pull/2245) ([Ark-kun](https://github.com/Ark-kun))
+- SDK: fix label check for ContainerOP entities [\#2243](https://github.com/kubeflow/pipelines/pull/2243) ([solovyevt](https://github.com/solovyevt))
+- Update doc for MKP release [\#2242](https://github.com/kubeflow/pipelines/pull/2242) ([rmgogogo](https://github.com/rmgogogo))
+- Update changelog for release 0.1.31. \(And also for 0.1.30 and 0.1.29, whose are not added before\) [\#2232](https://github.com/kubeflow/pipelines/pull/2232) ([jingzhang36](https://github.com/jingzhang36))
+- SDK - Compiler - Move Argo volume specifications to templates [\#2229](https://github.com/kubeflow/pipelines/pull/2229) ([Ark-kun](https://github.com/Ark-kun))
+- Updated README Swagger CodeGen version [\#2228](https://github.com/kubeflow/pipelines/pull/2228) ([RedbackThomson](https://github.com/RedbackThomson))
+- SDK - Components - Fix - Stop serializing string values [\#2227](https://github.com/kubeflow/pipelines/pull/2227) ([Ark-kun](https://github.com/Ark-kun))
+- third\_party/metadata\_envoy: Modify license file [\#2224](https://github.com/kubeflow/pipelines/pull/2224) ([dushyanthsc](https://github.com/dushyanthsc))
+- \[SDK/Client\] Improve the url format check for kfp.Client [\#2222](https://github.com/kubeflow/pipelines/pull/2222) ([numerology](https://github.com/numerology))
+- \[Sample\] update XGBoost sample [\#2220](https://github.com/kubeflow/pipelines/pull/2220) ([numerology](https://github.com/numerology))
+- \[Component\] Add Managed Spot Training Support for SageMaker [\#2219](https://github.com/kubeflow/pipelines/pull/2219) ([RedbackThomson](https://github.com/RedbackThomson))
+- SDK - Containers - Added support for container image cache [\#2216](https://github.com/kubeflow/pipelines/pull/2216) ([Ark-kun](https://github.com/Ark-kun))
+- Add third party license + source code to argo and minio images to comply with their license [\#2201](https://github.com/kubeflow/pipelines/pull/2201) ([Bobgy](https://github.com/Bobgy))
+- SDK - Moved the \_container\_builder from kfp.compiler to kfp.containers [\#2192](https://github.com/kubeflow/pipelines/pull/2192) ([Ark-kun](https://github.com/Ark-kun))
+- Added the backend Go module cache to .gitignote [\#2190](https://github.com/kubeflow/pipelines/pull/2190) ([Ark-kun](https://github.com/Ark-kun))
+- Docs - Added the direct kfp module members to documentation [\#2183](https://github.com/kubeflow/pipelines/pull/2183) ([Ark-kun](https://github.com/Ark-kun))
+- Components - Added AutoML Tables components and tests [\#2174](https://github.com/kubeflow/pipelines/pull/2174) ([Ark-kun](https://github.com/Ark-kun))
+- GUI: should pop-up a correct info when delete more than one pipeline [\#2156](https://github.com/kubeflow/pipelines/pull/2156) ([QxiaoQ](https://github.com/QxiaoQ))
+- \[SDK-compiler\] Refactor Compiler to expose an API to write out yaml spec of pipeline. [\#2146](https://github.com/kubeflow/pipelines/pull/2146) ([numerology](https://github.com/numerology))
+- Add necessary data types to api and database to support pipeline version.  [\#1873](https://github.com/kubeflow/pipelines/pull/1873) ([jingzhang36](https://github.com/jingzhang36))
+- SDK - Hiding Argo's workflow.uid placeholder behind DSL [\#1683](https://github.com/kubeflow/pipelines/pull/1683) ([Ark-kun](https://github.com/Ark-kun))
+- Allows uploading a pipeline in new run form [\#1643](https://github.com/kubeflow/pipelines/pull/1643) ([rileyjbauer](https://github.com/rileyjbauer))
+- SDK - Improve errors when ContainerOp.output is unavailable [\#1578](https://github.com/kubeflow/pipelines/pull/1578) ([Ark-kun](https://github.com/Ark-kun))
+- Use Remote Build Execution for Bazel builds. [\#1031](https://github.com/kubeflow/pipelines/pull/1031) ([neuromage](https://github.com/neuromage))
+
 ## [0.1.31](https://github.com/kubeflow/pipelines/tree/0.1.31) (2019-09-25)
 [Full Changelog](https://github.com/kubeflow/pipelines/compare/0.1.30...0.1.31)
 
@@ -1765,4 +1950,4 @@
 
 
 
-\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
\ No newline at end of file
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ebbb59e5310f..5bff97828bd4 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -15,6 +15,12 @@ You generally only need to submit a CLA once, so if you've already submitted one
 (even if it was for a different project), you probably don't need to do it
 again.
 
+## Coding style
+
+The Python part of the project will follow [Google Python style guide](http://google.github.io/styleguide/pyguide.html). We provide a [yapf](https://github.com/google/yapf) configuration file to help contributors auto-format their code to adopt the Google Python style. Also, it is encouraged to lint python docstrings by [docformatter](https://github.com/myint/docformatter).
+
+The frontend part of the project uses [prettier](https://prettier.io/) for formatting, read [frontend/README.md#code-style](frontend/#code-style) for more details.
+
 ## Code reviews
 
 All submissions, including submissions by project members, require review. We
@@ -25,4 +31,4 @@ information on using pull requests.
 ## Community Guidelines
 
 This project follows
-[Google's Open Source Community Guidelines](https://opensource.google.com/conduct/).
\ No newline at end of file
+[Google's Open Source Community Guidelines](https://opensource.google.com/conduct/).
diff --git a/backend/OWNERS b/backend/OWNERS
index dc4d9f39b852..a0ff390f99e1 100644
--- a/backend/OWNERS
+++ b/backend/OWNERS
@@ -1,6 +1,8 @@
 approvers:
   - IronPan
+  - jingzhang36
   - neuromage
 reviewers:
   - IronPan
+  - jingzhang36
   - neuromage
diff --git a/backend/api/experiment.proto b/backend/api/experiment.proto
index ac925792fb32..841f90d27cb7 100644
--- a/backend/api/experiment.proto
+++ b/backend/api/experiment.proto
@@ -102,8 +102,9 @@ message ListExperimentsRequest {
   // Ascending by default.
   string sort_by = 3;
 
-  // A base-64 encoded, JSON-serialized Filter protocol buffer (see
-  // filter.proto).
+  // A url-encoded, JSON-serialized Filter protocol buffer (see
+  // [filter.proto](https://github.com/kubeflow/pipelines/
+  // blob/master/backend/api/filter.proto)).
   string filter = 4;
 }
 
@@ -118,7 +119,7 @@ message ListExperimentsResponse {
   string next_page_token = 2;
 }
 
-message DeleteExperimentRequest{
+message DeleteExperimentRequest {
   // The ID of the experiment to be deleted.
   string id = 1;
 }
@@ -131,7 +132,7 @@ message Experiment {
   string name = 2;
 
   // Optional input field. Describing the purpose of the experiment
-  string description =3;
+  string description = 3;
 
   // Output. The time that the experiment created.
   google.protobuf.Timestamp created_at = 4;
diff --git a/backend/api/go_client/pipeline.pb.go b/backend/api/go_client/pipeline.pb.go
index 6962caad9544..7a069f7b3d56 100755
--- a/backend/api/go_client/pipeline.pb.go
+++ b/backend/api/go_client/pipeline.pb.go
@@ -52,7 +52,7 @@ func (m *Url) Reset()         { *m = Url{} }
 func (m *Url) String() string { return proto.CompactTextString(m) }
 func (*Url) ProtoMessage()    {}
 func (*Url) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{0}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{0}
 }
 func (m *Url) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_Url.Unmarshal(m, b)
@@ -90,7 +90,7 @@ func (m *CreatePipelineRequest) Reset()         { *m = CreatePipelineRequest{} }
 func (m *CreatePipelineRequest) String() string { return proto.CompactTextString(m) }
 func (*CreatePipelineRequest) ProtoMessage()    {}
 func (*CreatePipelineRequest) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{1}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{1}
 }
 func (m *CreatePipelineRequest) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_CreatePipelineRequest.Unmarshal(m, b)
@@ -128,7 +128,7 @@ func (m *GetPipelineRequest) Reset()         { *m = GetPipelineRequest{} }
 func (m *GetPipelineRequest) String() string { return proto.CompactTextString(m) }
 func (*GetPipelineRequest) ProtoMessage()    {}
 func (*GetPipelineRequest) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{2}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{2}
 }
 func (m *GetPipelineRequest) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_GetPipelineRequest.Unmarshal(m, b)
@@ -169,7 +169,7 @@ func (m *ListPipelinesRequest) Reset()         { *m = ListPipelinesRequest{} }
 func (m *ListPipelinesRequest) String() string { return proto.CompactTextString(m) }
 func (*ListPipelinesRequest) ProtoMessage()    {}
 func (*ListPipelinesRequest) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{3}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{3}
 }
 func (m *ListPipelinesRequest) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_ListPipelinesRequest.Unmarshal(m, b)
@@ -230,7 +230,7 @@ func (m *ListPipelinesResponse) Reset()         { *m = ListPipelinesResponse{} }
 func (m *ListPipelinesResponse) String() string { return proto.CompactTextString(m) }
 func (*ListPipelinesResponse) ProtoMessage()    {}
 func (*ListPipelinesResponse) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{4}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{4}
 }
 func (m *ListPipelinesResponse) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_ListPipelinesResponse.Unmarshal(m, b)
@@ -282,7 +282,7 @@ func (m *DeletePipelineRequest) Reset()         { *m = DeletePipelineRequest{} }
 func (m *DeletePipelineRequest) String() string { return proto.CompactTextString(m) }
 func (*DeletePipelineRequest) ProtoMessage()    {}
 func (*DeletePipelineRequest) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{5}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{5}
 }
 func (m *DeletePipelineRequest) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_DeletePipelineRequest.Unmarshal(m, b)
@@ -320,7 +320,7 @@ func (m *GetTemplateRequest) Reset()         { *m = GetTemplateRequest{} }
 func (m *GetTemplateRequest) String() string { return proto.CompactTextString(m) }
 func (*GetTemplateRequest) ProtoMessage()    {}
 func (*GetTemplateRequest) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{6}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{6}
 }
 func (m *GetTemplateRequest) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_GetTemplateRequest.Unmarshal(m, b)
@@ -358,7 +358,7 @@ func (m *GetTemplateResponse) Reset()         { *m = GetTemplateResponse{} }
 func (m *GetTemplateResponse) String() string { return proto.CompactTextString(m) }
 func (*GetTemplateResponse) ProtoMessage()    {}
 func (*GetTemplateResponse) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{7}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{7}
 }
 func (m *GetTemplateResponse) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_GetTemplateResponse.Unmarshal(m, b)
@@ -385,6 +385,282 @@ func (m *GetTemplateResponse) GetTemplate() string {
 	return ""
 }
 
+type GetPipelineVersionTemplateRequest struct {
+	VersionId            string   `protobuf:"bytes,1,opt,name=version_id,json=versionId,proto3" json:"version_id,omitempty"`
+	XXX_NoUnkeyedLiteral struct{} `json:"-"`
+	XXX_unrecognized     []byte   `json:"-"`
+	XXX_sizecache        int32    `json:"-"`
+}
+
+func (m *GetPipelineVersionTemplateRequest) Reset()         { *m = GetPipelineVersionTemplateRequest{} }
+func (m *GetPipelineVersionTemplateRequest) String() string { return proto.CompactTextString(m) }
+func (*GetPipelineVersionTemplateRequest) ProtoMessage()    {}
+func (*GetPipelineVersionTemplateRequest) Descriptor() ([]byte, []int) {
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{8}
+}
+func (m *GetPipelineVersionTemplateRequest) XXX_Unmarshal(b []byte) error {
+	return xxx_messageInfo_GetPipelineVersionTemplateRequest.Unmarshal(m, b)
+}
+func (m *GetPipelineVersionTemplateRequest) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
+	return xxx_messageInfo_GetPipelineVersionTemplateRequest.Marshal(b, m, deterministic)
+}
+func (dst *GetPipelineVersionTemplateRequest) XXX_Merge(src proto.Message) {
+	xxx_messageInfo_GetPipelineVersionTemplateRequest.Merge(dst, src)
+}
+func (m *GetPipelineVersionTemplateRequest) XXX_Size() int {
+	return xxx_messageInfo_GetPipelineVersionTemplateRequest.Size(m)
+}
+func (m *GetPipelineVersionTemplateRequest) XXX_DiscardUnknown() {
+	xxx_messageInfo_GetPipelineVersionTemplateRequest.DiscardUnknown(m)
+}
+
+var xxx_messageInfo_GetPipelineVersionTemplateRequest proto.InternalMessageInfo
+
+func (m *GetPipelineVersionTemplateRequest) GetVersionId() string {
+	if m != nil {
+		return m.VersionId
+	}
+	return ""
+}
+
+type CreatePipelineVersionRequest struct {
+	Version              *PipelineVersion `protobuf:"bytes,1,opt,name=version,proto3" json:"version,omitempty"`
+	XXX_NoUnkeyedLiteral struct{}         `json:"-"`
+	XXX_unrecognized     []byte           `json:"-"`
+	XXX_sizecache        int32            `json:"-"`
+}
+
+func (m *CreatePipelineVersionRequest) Reset()         { *m = CreatePipelineVersionRequest{} }
+func (m *CreatePipelineVersionRequest) String() string { return proto.CompactTextString(m) }
+func (*CreatePipelineVersionRequest) ProtoMessage()    {}
+func (*CreatePipelineVersionRequest) Descriptor() ([]byte, []int) {
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{9}
+}
+func (m *CreatePipelineVersionRequest) XXX_Unmarshal(b []byte) error {
+	return xxx_messageInfo_CreatePipelineVersionRequest.Unmarshal(m, b)
+}
+func (m *CreatePipelineVersionRequest) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
+	return xxx_messageInfo_CreatePipelineVersionRequest.Marshal(b, m, deterministic)
+}
+func (dst *CreatePipelineVersionRequest) XXX_Merge(src proto.Message) {
+	xxx_messageInfo_CreatePipelineVersionRequest.Merge(dst, src)
+}
+func (m *CreatePipelineVersionRequest) XXX_Size() int {
+	return xxx_messageInfo_CreatePipelineVersionRequest.Size(m)
+}
+func (m *CreatePipelineVersionRequest) XXX_DiscardUnknown() {
+	xxx_messageInfo_CreatePipelineVersionRequest.DiscardUnknown(m)
+}
+
+var xxx_messageInfo_CreatePipelineVersionRequest proto.InternalMessageInfo
+
+func (m *CreatePipelineVersionRequest) GetVersion() *PipelineVersion {
+	if m != nil {
+		return m.Version
+	}
+	return nil
+}
+
+type GetPipelineVersionRequest struct {
+	VersionId            string   `protobuf:"bytes,1,opt,name=version_id,json=versionId,proto3" json:"version_id,omitempty"`
+	XXX_NoUnkeyedLiteral struct{} `json:"-"`
+	XXX_unrecognized     []byte   `json:"-"`
+	XXX_sizecache        int32    `json:"-"`
+}
+
+func (m *GetPipelineVersionRequest) Reset()         { *m = GetPipelineVersionRequest{} }
+func (m *GetPipelineVersionRequest) String() string { return proto.CompactTextString(m) }
+func (*GetPipelineVersionRequest) ProtoMessage()    {}
+func (*GetPipelineVersionRequest) Descriptor() ([]byte, []int) {
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{10}
+}
+func (m *GetPipelineVersionRequest) XXX_Unmarshal(b []byte) error {
+	return xxx_messageInfo_GetPipelineVersionRequest.Unmarshal(m, b)
+}
+func (m *GetPipelineVersionRequest) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
+	return xxx_messageInfo_GetPipelineVersionRequest.Marshal(b, m, deterministic)
+}
+func (dst *GetPipelineVersionRequest) XXX_Merge(src proto.Message) {
+	xxx_messageInfo_GetPipelineVersionRequest.Merge(dst, src)
+}
+func (m *GetPipelineVersionRequest) XXX_Size() int {
+	return xxx_messageInfo_GetPipelineVersionRequest.Size(m)
+}
+func (m *GetPipelineVersionRequest) XXX_DiscardUnknown() {
+	xxx_messageInfo_GetPipelineVersionRequest.DiscardUnknown(m)
+}
+
+var xxx_messageInfo_GetPipelineVersionRequest proto.InternalMessageInfo
+
+func (m *GetPipelineVersionRequest) GetVersionId() string {
+	if m != nil {
+		return m.VersionId
+	}
+	return ""
+}
+
+type ListPipelineVersionsRequest struct {
+	ResourceKey          *ResourceKey `protobuf:"bytes,1,opt,name=resource_key,json=resourceKey,proto3" json:"resource_key,omitempty"`
+	PageSize             int32        `protobuf:"varint,2,opt,name=page_size,json=pageSize,proto3" json:"page_size,omitempty"`
+	PageToken            string       `protobuf:"bytes,3,opt,name=page_token,json=pageToken,proto3" json:"page_token,omitempty"`
+	SortBy               string       `protobuf:"bytes,4,opt,name=sort_by,json=sortBy,proto3" json:"sort_by,omitempty"`
+	Filter               string       `protobuf:"bytes,5,opt,name=filter,proto3" json:"filter,omitempty"`
+	XXX_NoUnkeyedLiteral struct{}     `json:"-"`
+	XXX_unrecognized     []byte       `json:"-"`
+	XXX_sizecache        int32        `json:"-"`
+}
+
+func (m *ListPipelineVersionsRequest) Reset()         { *m = ListPipelineVersionsRequest{} }
+func (m *ListPipelineVersionsRequest) String() string { return proto.CompactTextString(m) }
+func (*ListPipelineVersionsRequest) ProtoMessage()    {}
+func (*ListPipelineVersionsRequest) Descriptor() ([]byte, []int) {
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{11}
+}
+func (m *ListPipelineVersionsRequest) XXX_Unmarshal(b []byte) error {
+	return xxx_messageInfo_ListPipelineVersionsRequest.Unmarshal(m, b)
+}
+func (m *ListPipelineVersionsRequest) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
+	return xxx_messageInfo_ListPipelineVersionsRequest.Marshal(b, m, deterministic)
+}
+func (dst *ListPipelineVersionsRequest) XXX_Merge(src proto.Message) {
+	xxx_messageInfo_ListPipelineVersionsRequest.Merge(dst, src)
+}
+func (m *ListPipelineVersionsRequest) XXX_Size() int {
+	return xxx_messageInfo_ListPipelineVersionsRequest.Size(m)
+}
+func (m *ListPipelineVersionsRequest) XXX_DiscardUnknown() {
+	xxx_messageInfo_ListPipelineVersionsRequest.DiscardUnknown(m)
+}
+
+var xxx_messageInfo_ListPipelineVersionsRequest proto.InternalMessageInfo
+
+func (m *ListPipelineVersionsRequest) GetResourceKey() *ResourceKey {
+	if m != nil {
+		return m.ResourceKey
+	}
+	return nil
+}
+
+func (m *ListPipelineVersionsRequest) GetPageSize() int32 {
+	if m != nil {
+		return m.PageSize
+	}
+	return 0
+}
+
+func (m *ListPipelineVersionsRequest) GetPageToken() string {
+	if m != nil {
+		return m.PageToken
+	}
+	return ""
+}
+
+func (m *ListPipelineVersionsRequest) GetSortBy() string {
+	if m != nil {
+		return m.SortBy
+	}
+	return ""
+}
+
+func (m *ListPipelineVersionsRequest) GetFilter() string {
+	if m != nil {
+		return m.Filter
+	}
+	return ""
+}
+
+type ListPipelineVersionsResponse struct {
+	Versions             []*PipelineVersion `protobuf:"bytes,1,rep,name=versions,proto3" json:"versions,omitempty"`
+	NextPageToken        string             `protobuf:"bytes,2,opt,name=next_page_token,json=nextPageToken,proto3" json:"next_page_token,omitempty"`
+	TotalSize            int32              `protobuf:"varint,3,opt,name=total_size,json=totalSize,proto3" json:"total_size,omitempty"`
+	XXX_NoUnkeyedLiteral struct{}           `json:"-"`
+	XXX_unrecognized     []byte             `json:"-"`
+	XXX_sizecache        int32              `json:"-"`
+}
+
+func (m *ListPipelineVersionsResponse) Reset()         { *m = ListPipelineVersionsResponse{} }
+func (m *ListPipelineVersionsResponse) String() string { return proto.CompactTextString(m) }
+func (*ListPipelineVersionsResponse) ProtoMessage()    {}
+func (*ListPipelineVersionsResponse) Descriptor() ([]byte, []int) {
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{12}
+}
+func (m *ListPipelineVersionsResponse) XXX_Unmarshal(b []byte) error {
+	return xxx_messageInfo_ListPipelineVersionsResponse.Unmarshal(m, b)
+}
+func (m *ListPipelineVersionsResponse) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
+	return xxx_messageInfo_ListPipelineVersionsResponse.Marshal(b, m, deterministic)
+}
+func (dst *ListPipelineVersionsResponse) XXX_Merge(src proto.Message) {
+	xxx_messageInfo_ListPipelineVersionsResponse.Merge(dst, src)
+}
+func (m *ListPipelineVersionsResponse) XXX_Size() int {
+	return xxx_messageInfo_ListPipelineVersionsResponse.Size(m)
+}
+func (m *ListPipelineVersionsResponse) XXX_DiscardUnknown() {
+	xxx_messageInfo_ListPipelineVersionsResponse.DiscardUnknown(m)
+}
+
+var xxx_messageInfo_ListPipelineVersionsResponse proto.InternalMessageInfo
+
+func (m *ListPipelineVersionsResponse) GetVersions() []*PipelineVersion {
+	if m != nil {
+		return m.Versions
+	}
+	return nil
+}
+
+func (m *ListPipelineVersionsResponse) GetNextPageToken() string {
+	if m != nil {
+		return m.NextPageToken
+	}
+	return ""
+}
+
+func (m *ListPipelineVersionsResponse) GetTotalSize() int32 {
+	if m != nil {
+		return m.TotalSize
+	}
+	return 0
+}
+
+type DeletePipelineVersionRequest struct {
+	VersionId            string   `protobuf:"bytes,1,opt,name=version_id,json=versionId,proto3" json:"version_id,omitempty"`
+	XXX_NoUnkeyedLiteral struct{} `json:"-"`
+	XXX_unrecognized     []byte   `json:"-"`
+	XXX_sizecache        int32    `json:"-"`
+}
+
+func (m *DeletePipelineVersionRequest) Reset()         { *m = DeletePipelineVersionRequest{} }
+func (m *DeletePipelineVersionRequest) String() string { return proto.CompactTextString(m) }
+func (*DeletePipelineVersionRequest) ProtoMessage()    {}
+func (*DeletePipelineVersionRequest) Descriptor() ([]byte, []int) {
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{13}
+}
+func (m *DeletePipelineVersionRequest) XXX_Unmarshal(b []byte) error {
+	return xxx_messageInfo_DeletePipelineVersionRequest.Unmarshal(m, b)
+}
+func (m *DeletePipelineVersionRequest) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
+	return xxx_messageInfo_DeletePipelineVersionRequest.Marshal(b, m, deterministic)
+}
+func (dst *DeletePipelineVersionRequest) XXX_Merge(src proto.Message) {
+	xxx_messageInfo_DeletePipelineVersionRequest.Merge(dst, src)
+}
+func (m *DeletePipelineVersionRequest) XXX_Size() int {
+	return xxx_messageInfo_DeletePipelineVersionRequest.Size(m)
+}
+func (m *DeletePipelineVersionRequest) XXX_DiscardUnknown() {
+	xxx_messageInfo_DeletePipelineVersionRequest.DiscardUnknown(m)
+}
+
+var xxx_messageInfo_DeletePipelineVersionRequest proto.InternalMessageInfo
+
+func (m *DeletePipelineVersionRequest) GetVersionId() string {
+	if m != nil {
+		return m.VersionId
+	}
+	return ""
+}
+
 type Pipeline struct {
 	Id                   string               `protobuf:"bytes,1,opt,name=id,proto3" json:"id,omitempty"`
 	CreatedAt            *timestamp.Timestamp `protobuf:"bytes,2,opt,name=created_at,json=createdAt,proto3" json:"created_at,omitempty"`
@@ -393,6 +669,7 @@ type Pipeline struct {
 	Parameters           []*Parameter         `protobuf:"bytes,5,rep,name=parameters,proto3" json:"parameters,omitempty"`
 	Url                  *Url                 `protobuf:"bytes,7,opt,name=url,proto3" json:"url,omitempty"`
 	Error                string               `protobuf:"bytes,6,opt,name=error,proto3" json:"error,omitempty"`
+	DefaultVersion       *PipelineVersion     `protobuf:"bytes,8,opt,name=default_version,json=defaultVersion,proto3" json:"default_version,omitempty"`
 	XXX_NoUnkeyedLiteral struct{}             `json:"-"`
 	XXX_unrecognized     []byte               `json:"-"`
 	XXX_sizecache        int32                `json:"-"`
@@ -402,7 +679,7 @@ func (m *Pipeline) Reset()         { *m = Pipeline{} }
 func (m *Pipeline) String() string { return proto.CompactTextString(m) }
 func (*Pipeline) ProtoMessage()    {}
 func (*Pipeline) Descriptor() ([]byte, []int) {
-	return fileDescriptor_pipeline_a461ac7e0daee5b3, []int{8}
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{14}
 }
 func (m *Pipeline) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_Pipeline.Unmarshal(m, b)
@@ -471,6 +748,99 @@ func (m *Pipeline) GetError() string {
 	return ""
 }
 
+func (m *Pipeline) GetDefaultVersion() *PipelineVersion {
+	if m != nil {
+		return m.DefaultVersion
+	}
+	return nil
+}
+
+type PipelineVersion struct {
+	Id                   string               `protobuf:"bytes,1,opt,name=id,proto3" json:"id,omitempty"`
+	Name                 string               `protobuf:"bytes,2,opt,name=name,proto3" json:"name,omitempty"`
+	CreatedAt            *timestamp.Timestamp `protobuf:"bytes,3,opt,name=created_at,json=createdAt,proto3" json:"created_at,omitempty"`
+	Parameters           []*Parameter         `protobuf:"bytes,4,rep,name=parameters,proto3" json:"parameters,omitempty"`
+	CodeSourceUrl        string               `protobuf:"bytes,5,opt,name=code_source_url,json=codeSourceUrl,proto3" json:"code_source_url,omitempty"`
+	PackageUrl           *Url                 `protobuf:"bytes,6,opt,name=package_url,json=packageUrl,proto3" json:"package_url,omitempty"`
+	ResourceReferences   []*ResourceReference `protobuf:"bytes,7,rep,name=resource_references,json=resourceReferences,proto3" json:"resource_references,omitempty"`
+	XXX_NoUnkeyedLiteral struct{}             `json:"-"`
+	XXX_unrecognized     []byte               `json:"-"`
+	XXX_sizecache        int32                `json:"-"`
+}
+
+func (m *PipelineVersion) Reset()         { *m = PipelineVersion{} }
+func (m *PipelineVersion) String() string { return proto.CompactTextString(m) }
+func (*PipelineVersion) ProtoMessage()    {}
+func (*PipelineVersion) Descriptor() ([]byte, []int) {
+	return fileDescriptor_pipeline_e46b3924128d1ae3, []int{15}
+}
+func (m *PipelineVersion) XXX_Unmarshal(b []byte) error {
+	return xxx_messageInfo_PipelineVersion.Unmarshal(m, b)
+}
+func (m *PipelineVersion) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
+	return xxx_messageInfo_PipelineVersion.Marshal(b, m, deterministic)
+}
+func (dst *PipelineVersion) XXX_Merge(src proto.Message) {
+	xxx_messageInfo_PipelineVersion.Merge(dst, src)
+}
+func (m *PipelineVersion) XXX_Size() int {
+	return xxx_messageInfo_PipelineVersion.Size(m)
+}
+func (m *PipelineVersion) XXX_DiscardUnknown() {
+	xxx_messageInfo_PipelineVersion.DiscardUnknown(m)
+}
+
+var xxx_messageInfo_PipelineVersion proto.InternalMessageInfo
+
+func (m *PipelineVersion) GetId() string {
+	if m != nil {
+		return m.Id
+	}
+	return ""
+}
+
+func (m *PipelineVersion) GetName() string {
+	if m != nil {
+		return m.Name
+	}
+	return ""
+}
+
+func (m *PipelineVersion) GetCreatedAt() *timestamp.Timestamp {
+	if m != nil {
+		return m.CreatedAt
+	}
+	return nil
+}
+
+func (m *PipelineVersion) GetParameters() []*Parameter {
+	if m != nil {
+		return m.Parameters
+	}
+	return nil
+}
+
+func (m *PipelineVersion) GetCodeSourceUrl() string {
+	if m != nil {
+		return m.CodeSourceUrl
+	}
+	return ""
+}
+
+func (m *PipelineVersion) GetPackageUrl() *Url {
+	if m != nil {
+		return m.PackageUrl
+	}
+	return nil
+}
+
+func (m *PipelineVersion) GetResourceReferences() []*ResourceReference {
+	if m != nil {
+		return m.ResourceReferences
+	}
+	return nil
+}
+
 func init() {
 	proto.RegisterType((*Url)(nil), "api.Url")
 	proto.RegisterType((*CreatePipelineRequest)(nil), "api.CreatePipelineRequest")
@@ -480,7 +850,14 @@ func init() {
 	proto.RegisterType((*DeletePipelineRequest)(nil), "api.DeletePipelineRequest")
 	proto.RegisterType((*GetTemplateRequest)(nil), "api.GetTemplateRequest")
 	proto.RegisterType((*GetTemplateResponse)(nil), "api.GetTemplateResponse")
+	proto.RegisterType((*GetPipelineVersionTemplateRequest)(nil), "api.GetPipelineVersionTemplateRequest")
+	proto.RegisterType((*CreatePipelineVersionRequest)(nil), "api.CreatePipelineVersionRequest")
+	proto.RegisterType((*GetPipelineVersionRequest)(nil), "api.GetPipelineVersionRequest")
+	proto.RegisterType((*ListPipelineVersionsRequest)(nil), "api.ListPipelineVersionsRequest")
+	proto.RegisterType((*ListPipelineVersionsResponse)(nil), "api.ListPipelineVersionsResponse")
+	proto.RegisterType((*DeletePipelineVersionRequest)(nil), "api.DeletePipelineVersionRequest")
 	proto.RegisterType((*Pipeline)(nil), "api.Pipeline")
+	proto.RegisterType((*PipelineVersion)(nil), "api.PipelineVersion")
 }
 
 // Reference imports to suppress errors if they are not otherwise used.
@@ -500,6 +877,11 @@ type PipelineServiceClient interface {
 	ListPipelines(ctx context.Context, in *ListPipelinesRequest, opts ...grpc.CallOption) (*ListPipelinesResponse, error)
 	DeletePipeline(ctx context.Context, in *DeletePipelineRequest, opts ...grpc.CallOption) (*empty.Empty, error)
 	GetTemplate(ctx context.Context, in *GetTemplateRequest, opts ...grpc.CallOption) (*GetTemplateResponse, error)
+	CreatePipelineVersion(ctx context.Context, in *CreatePipelineVersionRequest, opts ...grpc.CallOption) (*PipelineVersion, error)
+	GetPipelineVersion(ctx context.Context, in *GetPipelineVersionRequest, opts ...grpc.CallOption) (*PipelineVersion, error)
+	ListPipelineVersions(ctx context.Context, in *ListPipelineVersionsRequest, opts ...grpc.CallOption) (*ListPipelineVersionsResponse, error)
+	DeletePipelineVersion(ctx context.Context, in *DeletePipelineVersionRequest, opts ...grpc.CallOption) (*empty.Empty, error)
+	GetPipelineVersionTemplate(ctx context.Context, in *GetPipelineVersionTemplateRequest, opts ...grpc.CallOption) (*GetTemplateResponse, error)
 }
 
 type pipelineServiceClient struct {
@@ -555,6 +937,51 @@ func (c *pipelineServiceClient) GetTemplate(ctx context.Context, in *GetTemplate
 	return out, nil
 }
 
+func (c *pipelineServiceClient) CreatePipelineVersion(ctx context.Context, in *CreatePipelineVersionRequest, opts ...grpc.CallOption) (*PipelineVersion, error) {
+	out := new(PipelineVersion)
+	err := c.cc.Invoke(ctx, "/api.PipelineService/CreatePipelineVersion", in, out, opts...)
+	if err != nil {
+		return nil, err
+	}
+	return out, nil
+}
+
+func (c *pipelineServiceClient) GetPipelineVersion(ctx context.Context, in *GetPipelineVersionRequest, opts ...grpc.CallOption) (*PipelineVersion, error) {
+	out := new(PipelineVersion)
+	err := c.cc.Invoke(ctx, "/api.PipelineService/GetPipelineVersion", in, out, opts...)
+	if err != nil {
+		return nil, err
+	}
+	return out, nil
+}
+
+func (c *pipelineServiceClient) ListPipelineVersions(ctx context.Context, in *ListPipelineVersionsRequest, opts ...grpc.CallOption) (*ListPipelineVersionsResponse, error) {
+	out := new(ListPipelineVersionsResponse)
+	err := c.cc.Invoke(ctx, "/api.PipelineService/ListPipelineVersions", in, out, opts...)
+	if err != nil {
+		return nil, err
+	}
+	return out, nil
+}
+
+func (c *pipelineServiceClient) DeletePipelineVersion(ctx context.Context, in *DeletePipelineVersionRequest, opts ...grpc.CallOption) (*empty.Empty, error) {
+	out := new(empty.Empty)
+	err := c.cc.Invoke(ctx, "/api.PipelineService/DeletePipelineVersion", in, out, opts...)
+	if err != nil {
+		return nil, err
+	}
+	return out, nil
+}
+
+func (c *pipelineServiceClient) GetPipelineVersionTemplate(ctx context.Context, in *GetPipelineVersionTemplateRequest, opts ...grpc.CallOption) (*GetTemplateResponse, error) {
+	out := new(GetTemplateResponse)
+	err := c.cc.Invoke(ctx, "/api.PipelineService/GetPipelineVersionTemplate", in, out, opts...)
+	if err != nil {
+		return nil, err
+	}
+	return out, nil
+}
+
 // PipelineServiceServer is the server API for PipelineService service.
 type PipelineServiceServer interface {
 	CreatePipeline(context.Context, *CreatePipelineRequest) (*Pipeline, error)
@@ -562,6 +989,11 @@ type PipelineServiceServer interface {
 	ListPipelines(context.Context, *ListPipelinesRequest) (*ListPipelinesResponse, error)
 	DeletePipeline(context.Context, *DeletePipelineRequest) (*empty.Empty, error)
 	GetTemplate(context.Context, *GetTemplateRequest) (*GetTemplateResponse, error)
+	CreatePipelineVersion(context.Context, *CreatePipelineVersionRequest) (*PipelineVersion, error)
+	GetPipelineVersion(context.Context, *GetPipelineVersionRequest) (*PipelineVersion, error)
+	ListPipelineVersions(context.Context, *ListPipelineVersionsRequest) (*ListPipelineVersionsResponse, error)
+	DeletePipelineVersion(context.Context, *DeletePipelineVersionRequest) (*empty.Empty, error)
+	GetPipelineVersionTemplate(context.Context, *GetPipelineVersionTemplateRequest) (*GetTemplateResponse, error)
 }
 
 func RegisterPipelineServiceServer(s *grpc.Server, srv PipelineServiceServer) {
@@ -658,6 +1090,96 @@ func _PipelineService_GetTemplate_Handler(srv interface{}, ctx context.Context,
 	return interceptor(ctx, in, info, handler)
 }
 
+func _PipelineService_CreatePipelineVersion_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
+	in := new(CreatePipelineVersionRequest)
+	if err := dec(in); err != nil {
+		return nil, err
+	}
+	if interceptor == nil {
+		return srv.(PipelineServiceServer).CreatePipelineVersion(ctx, in)
+	}
+	info := &grpc.UnaryServerInfo{
+		Server:     srv,
+		FullMethod: "/api.PipelineService/CreatePipelineVersion",
+	}
+	handler := func(ctx context.Context, req interface{}) (interface{}, error) {
+		return srv.(PipelineServiceServer).CreatePipelineVersion(ctx, req.(*CreatePipelineVersionRequest))
+	}
+	return interceptor(ctx, in, info, handler)
+}
+
+func _PipelineService_GetPipelineVersion_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
+	in := new(GetPipelineVersionRequest)
+	if err := dec(in); err != nil {
+		return nil, err
+	}
+	if interceptor == nil {
+		return srv.(PipelineServiceServer).GetPipelineVersion(ctx, in)
+	}
+	info := &grpc.UnaryServerInfo{
+		Server:     srv,
+		FullMethod: "/api.PipelineService/GetPipelineVersion",
+	}
+	handler := func(ctx context.Context, req interface{}) (interface{}, error) {
+		return srv.(PipelineServiceServer).GetPipelineVersion(ctx, req.(*GetPipelineVersionRequest))
+	}
+	return interceptor(ctx, in, info, handler)
+}
+
+func _PipelineService_ListPipelineVersions_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
+	in := new(ListPipelineVersionsRequest)
+	if err := dec(in); err != nil {
+		return nil, err
+	}
+	if interceptor == nil {
+		return srv.(PipelineServiceServer).ListPipelineVersions(ctx, in)
+	}
+	info := &grpc.UnaryServerInfo{
+		Server:     srv,
+		FullMethod: "/api.PipelineService/ListPipelineVersions",
+	}
+	handler := func(ctx context.Context, req interface{}) (interface{}, error) {
+		return srv.(PipelineServiceServer).ListPipelineVersions(ctx, req.(*ListPipelineVersionsRequest))
+	}
+	return interceptor(ctx, in, info, handler)
+}
+
+func _PipelineService_DeletePipelineVersion_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
+	in := new(DeletePipelineVersionRequest)
+	if err := dec(in); err != nil {
+		return nil, err
+	}
+	if interceptor == nil {
+		return srv.(PipelineServiceServer).DeletePipelineVersion(ctx, in)
+	}
+	info := &grpc.UnaryServerInfo{
+		Server:     srv,
+		FullMethod: "/api.PipelineService/DeletePipelineVersion",
+	}
+	handler := func(ctx context.Context, req interface{}) (interface{}, error) {
+		return srv.(PipelineServiceServer).DeletePipelineVersion(ctx, req.(*DeletePipelineVersionRequest))
+	}
+	return interceptor(ctx, in, info, handler)
+}
+
+func _PipelineService_GetPipelineVersionTemplate_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
+	in := new(GetPipelineVersionTemplateRequest)
+	if err := dec(in); err != nil {
+		return nil, err
+	}
+	if interceptor == nil {
+		return srv.(PipelineServiceServer).GetPipelineVersionTemplate(ctx, in)
+	}
+	info := &grpc.UnaryServerInfo{
+		Server:     srv,
+		FullMethod: "/api.PipelineService/GetPipelineVersionTemplate",
+	}
+	handler := func(ctx context.Context, req interface{}) (interface{}, error) {
+		return srv.(PipelineServiceServer).GetPipelineVersionTemplate(ctx, req.(*GetPipelineVersionTemplateRequest))
+	}
+	return interceptor(ctx, in, info, handler)
+}
+
 var _PipelineService_serviceDesc = grpc.ServiceDesc{
 	ServiceName: "api.PipelineService",
 	HandlerType: (*PipelineServiceServer)(nil),
@@ -682,64 +1204,106 @@ var _PipelineService_serviceDesc = grpc.ServiceDesc{
 			MethodName: "GetTemplate",
 			Handler:    _PipelineService_GetTemplate_Handler,
 		},
+		{
+			MethodName: "CreatePipelineVersion",
+			Handler:    _PipelineService_CreatePipelineVersion_Handler,
+		},
+		{
+			MethodName: "GetPipelineVersion",
+			Handler:    _PipelineService_GetPipelineVersion_Handler,
+		},
+		{
+			MethodName: "ListPipelineVersions",
+			Handler:    _PipelineService_ListPipelineVersions_Handler,
+		},
+		{
+			MethodName: "DeletePipelineVersion",
+			Handler:    _PipelineService_DeletePipelineVersion_Handler,
+		},
+		{
+			MethodName: "GetPipelineVersionTemplate",
+			Handler:    _PipelineService_GetPipelineVersionTemplate_Handler,
+		},
 	},
 	Streams:  []grpc.StreamDesc{},
 	Metadata: "backend/api/pipeline.proto",
 }
 
 func init() {
-	proto.RegisterFile("backend/api/pipeline.proto", fileDescriptor_pipeline_a461ac7e0daee5b3)
-}
-
-var fileDescriptor_pipeline_a461ac7e0daee5b3 = []byte{
-	// 771 bytes of a gzipped FileDescriptorProto
-	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0x7c, 0x54, 0x4f, 0x53, 0x3b, 0x45,
-	0x10, 0x75, 0x13, 0x08, 0x49, 0xe7, 0x97, 0x50, 0x0e, 0x7f, 0xb2, 0x2c, 0x20, 0x71, 0xa5, 0x30,
-	0xa8, 0xec, 0x16, 0x70, 0xd2, 0x1b, 0x51, 0xcb, 0x8b, 0x56, 0x51, 0x01, 0x2e, 0x78, 0x48, 0xcd,
-	0x26, 0x9d, 0x65, 0x64, 0xb3, 0xb3, 0xce, 0xcc, 0x82, 0x60, 0x79, 0xd1, 0xf2, 0xe4, 0x4d, 0xcf,
-	0x7e, 0x2a, 0xbf, 0x82, 0x57, 0xbf, 0x83, 0xb5, 0xb3, 0x3b, 0x21, 0xff, 0xe0, 0x94, 0xf4, 0xeb,
-	0xb7, 0xd3, 0xfd, 0x7a, 0x5e, 0x0f, 0x38, 0x01, 0x1d, 0xdc, 0x63, 0x3c, 0xf4, 0x69, 0xc2, 0xfc,
-	0x84, 0x25, 0x18, 0xb1, 0x18, 0xbd, 0x44, 0x70, 0xc5, 0x49, 0x99, 0x26, 0xcc, 0xd9, 0x0b, 0x39,
-	0x0f, 0x23, 0xd4, 0x79, 0x1a, 0xc7, 0x5c, 0x51, 0xc5, 0x78, 0x2c, 0x73, 0x8a, 0x73, 0x50, 0x64,
-	0x75, 0x14, 0xa4, 0x23, 0x5f, 0xb1, 0x31, 0x4a, 0x45, 0xc7, 0x49, 0x41, 0xd8, 0x9d, 0x27, 0xe0,
-	0x38, 0x51, 0x4f, 0x26, 0x39, 0x53, 0x9c, 0x0a, 0x3a, 0x46, 0x85, 0xa2, 0x48, 0xb6, 0xa6, 0x93,
-	0x28, 0x04, 0x37, 0x89, 0xcf, 0xf4, 0xcf, 0xe0, 0x24, 0xc4, 0xf8, 0x44, 0x3e, 0xd2, 0x30, 0x44,
-	0xe1, 0xf3, 0x44, 0x77, 0xb5, 0xd8, 0xa1, 0xdb, 0x81, 0xf2, 0x8d, 0x88, 0xc8, 0x87, 0xf0, 0xce,
-	0xa8, 0xeb, 0xa7, 0x22, 0xb2, 0xad, 0xb6, 0xd5, 0xa9, 0xf5, 0xea, 0x06, 0xbb, 0x11, 0x91, 0xdb,
-	0x85, 0xad, 0x2f, 0x05, 0x52, 0x85, 0x97, 0x05, 0xd8, 0xc3, 0x1f, 0x53, 0x94, 0x8a, 0x1c, 0x43,
-	0xd5, 0xf0, 0xf4, 0x77, 0xf5, 0xb3, 0x86, 0x47, 0x13, 0xe6, 0x4d, 0x78, 0x93, 0xb4, 0x7b, 0x08,
-	0xe4, 0x1b, 0x54, 0xf3, 0x07, 0x34, 0xa1, 0xc4, 0x86, 0x45, 0xc9, 0x12, 0x1b, 0xba, 0xbf, 0x59,
-	0xb0, 0xf9, 0x2d, 0x93, 0x13, 0x9e, 0x34, 0xc4, 0x7d, 0x80, 0x84, 0x86, 0xd8, 0x57, 0xfc, 0x1e,
-	0xe3, 0xe2, 0x83, 0x5a, 0x86, 0x5c, 0x67, 0x00, 0xd9, 0x05, 0x1d, 0xf4, 0x25, 0x7b, 0x46, 0xbb,
-	0xd4, 0xb6, 0x3a, 0xab, 0xbd, 0x6a, 0x06, 0x5c, 0xb1, 0x67, 0x24, 0x2d, 0x58, 0x93, 0x5c, 0xa8,
-	0x7e, 0xf0, 0x64, 0x97, 0xf5, 0x87, 0x95, 0x2c, 0xec, 0x3e, 0x91, 0x6d, 0xa8, 0x8c, 0x58, 0xa4,
-	0x50, 0xd8, 0x2b, 0x39, 0x9e, 0x47, 0xee, 0x1f, 0x16, 0x6c, 0xcd, 0x75, 0x21, 0x13, 0x1e, 0x4b,
-	0x24, 0x9f, 0x42, 0xcd, 0x28, 0x92, 0xb6, 0xd5, 0x2e, 0x2f, 0x2a, 0x7e, 0xc9, 0x67, 0x3d, 0x2b,
-	0xae, 0x68, 0x94, 0x77, 0x55, 0xd6, 0x5d, 0xd5, 0x34, 0xa2, 0xdb, 0x3a, 0x82, 0xf5, 0x18, 0x7f,
-	0x52, 0xfd, 0x29, 0x5d, 0x25, 0xdd, 0x46, 0x23, 0x83, 0x2f, 0x8d, 0x36, 0xf7, 0x63, 0xd8, 0xfa,
-	0x0a, 0x23, 0x5c, 0x9c, 0xfe, 0xfc, 0xf0, 0xf2, 0x11, 0x5f, 0xe3, 0x38, 0x89, 0xa8, 0x7a, 0x95,
-	0x75, 0x0a, 0x1b, 0x33, 0xac, 0x42, 0x99, 0x03, 0x55, 0x55, 0x60, 0x05, 0x79, 0x12, 0xbb, 0xff,
-	0x59, 0x50, 0x35, 0xc5, 0xe7, 0xcf, 0x23, 0x9f, 0x03, 0x0c, 0xb4, 0x39, 0x86, 0x7d, 0xaa, 0xb4,
-	0x82, 0xfa, 0x99, 0xe3, 0xe5, 0xe6, 0xf6, 0x8c, 0xb9, 0xbd, 0x6b, 0xe3, 0xfe, 0x5e, 0xad, 0x60,
-	0x5f, 0x28, 0x42, 0x60, 0x25, 0xa6, 0x63, 0x2c, 0x6e, 0x45, 0xff, 0x27, 0x6d, 0xa8, 0x0f, 0x51,
-	0x0e, 0x04, 0xd3, 0xbe, 0x2d, 0x2e, 0x66, 0x1a, 0x22, 0x5e, 0x66, 0x85, 0x62, 0x23, 0xa4, 0xbd,
-	0xaa, 0x2f, 0xa1, 0x99, 0x5f, 0x82, 0x81, 0x7b, 0x53, 0x0c, 0xe2, 0x40, 0x39, 0xf3, 0xf5, 0x9a,
-	0xee, 0xac, 0xaa, 0x89, 0x37, 0x22, 0xea, 0x65, 0x20, 0xd9, 0x84, 0x55, 0xbd, 0x40, 0x76, 0x45,
-	0xd7, 0xc9, 0x83, 0xb3, 0xbf, 0x57, 0x60, 0xdd, 0xe8, 0xbd, 0x42, 0xf1, 0xc0, 0x06, 0x48, 0x46,
-	0xd0, 0x9c, 0xdd, 0x01, 0xe2, 0xe8, 0xa3, 0x96, 0x2e, 0x86, 0x33, 0x6b, 0x0a, 0xf7, 0xf8, 0xd7,
-	0x7f, 0xfe, 0xfd, 0xab, 0xf4, 0x91, 0xdb, 0xca, 0x56, 0x56, 0xfa, 0x0f, 0xa7, 0x01, 0x2a, 0x7a,
-	0x3a, 0x79, 0x55, 0xe4, 0x17, 0x93, 0x3d, 0x21, 0xdf, 0x43, 0x7d, 0x6a, 0x4f, 0x48, 0x4b, 0x1f,
-	0xb4, 0xb8, 0x39, 0xf3, 0x15, 0x0e, 0x75, 0x85, 0x0f, 0xc8, 0xde, 0x2b, 0x15, 0xfc, 0x9f, 0xd9,
-	0xf0, 0x17, 0x12, 0x42, 0x63, 0xc6, 0xd7, 0x64, 0x47, 0x9f, 0xb2, 0x6c, 0xe3, 0x1c, 0x67, 0x59,
-	0x2a, 0x37, 0x8b, 0x7b, 0xa0, 0xab, 0xed, 0x90, 0xd7, 0xf4, 0x90, 0x1f, 0xa0, 0x39, 0xeb, 0xd9,
-	0x62, 0x5a, 0x4b, 0x8d, 0xec, 0x6c, 0x2f, 0xd8, 0xe5, 0xeb, 0xec, 0x2d, 0x34, 0xa2, 0x3e, 0x79,
-	0x5b, 0x54, 0xa2, 0x27, 0x66, 0x0c, 0xfd, 0x32, 0xb1, 0xb9, 0x45, 0x70, 0xec, 0xc5, 0x44, 0x21,
-	0xc7, 0xd3, 0x75, 0x3a, 0xe4, 0xe8, 0xad, 0x3a, 0xbe, 0x59, 0x07, 0xd9, 0xfd, 0xdd, 0xfa, 0xf3,
-	0xe2, 0xbb, 0xde, 0x1e, 0xac, 0x0d, 0x71, 0x44, 0xd3, 0x48, 0x91, 0xf7, 0xc9, 0x3a, 0x34, 0x9c,
-	0xba, 0x2e, 0x70, 0xa5, 0xa8, 0x4a, 0xe5, 0xed, 0x01, 0xec, 0x43, 0xa5, 0x8b, 0x54, 0xa0, 0x20,
-	0x1b, 0xd5, 0x92, 0xd3, 0xa0, 0xa9, 0xba, 0xe3, 0x82, 0x3d, 0xeb, 0x37, 0xb8, 0x5d, 0x0a, 0xde,
-	0x01, 0x4c, 0x08, 0xef, 0xdd, 0x9e, 0x87, 0x4c, 0xdd, 0xa5, 0x81, 0x37, 0xe0, 0x63, 0xff, 0x3e,
-	0x0d, 0x70, 0x14, 0xf1, 0xc7, 0xa9, 0x06, 0xa6, 0x5f, 0xfc, 0x90, 0xf7, 0x07, 0x11, 0xc3, 0x58,
-	0x05, 0x15, 0x3d, 0xaf, 0xf3, 0xff, 0x03, 0x00, 0x00, 0xff, 0xff, 0x8f, 0x62, 0x5e, 0x5b, 0xab,
-	0x06, 0x00, 0x00,
+	proto.RegisterFile("backend/api/pipeline.proto", fileDescriptor_pipeline_e46b3924128d1ae3)
+}
+
+var fileDescriptor_pipeline_e46b3924128d1ae3 = []byte{
+	// 1127 bytes of a gzipped FileDescriptorProto
+	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0x94, 0x56, 0xdd, 0x6e, 0xe3, 0xc4,
+	0x17, 0x6f, 0x92, 0x36, 0x1f, 0x27, 0x9b, 0xf6, 0xff, 0x9f, 0xed, 0x47, 0xea, 0xa6, 0xdb, 0xd4,
+	0x54, 0xa5, 0x05, 0x36, 0xa1, 0xed, 0x15, 0x2b, 0xed, 0xc5, 0x16, 0xd0, 0x0a, 0xb1, 0xa0, 0x95,
+	0xdb, 0x72, 0xb1, 0x08, 0x99, 0x89, 0x73, 0x92, 0x35, 0x75, 0x6c, 0x33, 0x33, 0xe9, 0xd2, 0x22,
+	0x6e, 0x40, 0x5c, 0x71, 0x07, 0x17, 0xbc, 0x04, 0x8f, 0x80, 0xc4, 0x43, 0x20, 0xf1, 0x04, 0x3c,
+	0x08, 0xf2, 0x78, 0xc6, 0xb5, 0x9d, 0x8f, 0xed, 0x5e, 0x25, 0x73, 0xce, 0x6f, 0xe6, 0x9c, 0xf3,
+	0x9b, 0x9f, 0xcf, 0x19, 0x30, 0x7a, 0xd4, 0xb9, 0x44, 0xbf, 0xdf, 0xa5, 0xa1, 0xdb, 0x0d, 0xdd,
+	0x10, 0x3d, 0xd7, 0xc7, 0x4e, 0xc8, 0x02, 0x11, 0x90, 0x12, 0x0d, 0x5d, 0xa3, 0x35, 0x0c, 0x82,
+	0xa1, 0x87, 0xd2, 0x4f, 0x7d, 0x3f, 0x10, 0x54, 0xb8, 0x81, 0xcf, 0x63, 0x88, 0xb1, 0xa3, 0xbc,
+	0x72, 0xd5, 0x1b, 0x0f, 0xba, 0xc2, 0x1d, 0x21, 0x17, 0x74, 0x14, 0x2a, 0xc0, 0x56, 0x1e, 0x80,
+	0xa3, 0x50, 0x5c, 0x2b, 0xe7, 0x46, 0x3a, 0x38, 0x32, 0x16, 0x30, 0xbd, 0x2b, 0x93, 0x15, 0x65,
+	0x74, 0x84, 0x02, 0xb5, 0x73, 0x67, 0x5a, 0xca, 0x36, 0x0f, 0xd1, 0x51, 0x80, 0xbd, 0x34, 0x80,
+	0x21, 0x0f, 0xc6, 0xcc, 0x41, 0x9b, 0xe1, 0x00, 0x19, 0xfa, 0x8e, 0xaa, 0xce, 0x78, 0x4f, 0xfe,
+	0x38, 0x0f, 0x87, 0xe8, 0x3f, 0xe4, 0xaf, 0xe8, 0x70, 0x88, 0xac, 0x1b, 0x84, 0xb2, 0xb8, 0xc9,
+	0x42, 0xcd, 0x03, 0x28, 0x5d, 0x30, 0x8f, 0xec, 0xc2, 0xbd, 0x24, 0xe2, 0x98, 0x79, 0xcd, 0x42,
+	0xbb, 0x70, 0x50, 0xb3, 0xea, 0xda, 0x76, 0xc1, 0x3c, 0xf3, 0x14, 0xd6, 0x3e, 0x64, 0x48, 0x05,
+	0x3e, 0x57, 0x46, 0x0b, 0xbf, 0x1d, 0x23, 0x17, 0xe4, 0x10, 0xaa, 0x1a, 0x27, 0xf7, 0xd5, 0x8f,
+	0x1b, 0x1d, 0x1a, 0xba, 0x9d, 0x04, 0x97, 0xb8, 0xcd, 0x3d, 0x20, 0x4f, 0x51, 0xe4, 0x0f, 0x58,
+	0x86, 0xa2, 0xdb, 0x57, 0x21, 0x8b, 0x6e, 0xdf, 0xfc, 0xa9, 0x00, 0xab, 0xcf, 0x5c, 0x9e, 0xe0,
+	0xb8, 0x06, 0x6e, 0x03, 0x84, 0x74, 0x88, 0xb6, 0x08, 0x2e, 0xd1, 0x57, 0x1b, 0x6a, 0x91, 0xe5,
+	0x3c, 0x32, 0x90, 0x2d, 0x90, 0x0b, 0x9b, 0xbb, 0x37, 0xd8, 0x2c, 0xb6, 0x0b, 0x07, 0x4b, 0x56,
+	0x35, 0x32, 0x9c, 0xb9, 0x37, 0x48, 0x36, 0xa0, 0xc2, 0x03, 0x26, 0xec, 0xde, 0x75, 0xb3, 0x24,
+	0x37, 0x96, 0xa3, 0xe5, 0xe9, 0x35, 0x59, 0x87, 0xf2, 0xc0, 0xf5, 0x04, 0xb2, 0xe6, 0x62, 0x6c,
+	0x8f, 0x57, 0xe6, 0x2f, 0x05, 0x58, 0xcb, 0x65, 0xc1, 0xc3, 0xc0, 0xe7, 0x48, 0xde, 0x85, 0x9a,
+	0xae, 0x88, 0x37, 0x0b, 0xed, 0xd2, 0x64, 0xc5, 0xb7, 0xfe, 0x28, 0x67, 0x11, 0x08, 0xea, 0xc5,
+	0x59, 0x95, 0x64, 0x56, 0x35, 0x69, 0x91, 0x69, 0xed, 0xc3, 0x8a, 0x8f, 0xdf, 0x09, 0x3b, 0x55,
+	0x57, 0x51, 0xa6, 0xd1, 0x88, 0xcc, 0xcf, 0x75, 0x6d, 0xe6, 0xdb, 0xb0, 0xf6, 0x11, 0x7a, 0x38,
+	0xc9, 0x7e, 0x9e, 0xbc, 0x98, 0xe2, 0x73, 0x1c, 0x85, 0x1e, 0x15, 0x33, 0x51, 0x47, 0x70, 0x3f,
+	0x83, 0x52, 0x95, 0x19, 0x50, 0x15, 0xca, 0xa6, 0xc0, 0xc9, 0xda, 0x3c, 0x85, 0xdd, 0xd4, 0xdd,
+	0x7d, 0x81, 0x8c, 0xbb, 0x81, 0x9f, 0x8f, 0xb3, 0x0d, 0x70, 0x15, 0x7b, 0xec, 0x24, 0x5e, 0x4d,
+	0x59, 0x3e, 0xe9, 0x9b, 0x9f, 0x43, 0x2b, 0xab, 0x21, 0x75, 0x8c, 0xde, 0xde, 0x81, 0x8a, 0x02,
+	0x2b, 0x25, 0xad, 0x66, 0x78, 0xd5, 0x68, 0x0d, 0x32, 0x1f, 0xc1, 0xe6, 0x64, 0x4e, 0x77, 0xcc,
+	0xe5, 0xaf, 0x02, 0x6c, 0xa5, 0xef, 0x57, 0xed, 0x4e, 0xc4, 0x76, 0x02, 0xf7, 0x92, 0x6f, 0xec,
+	0x12, 0xaf, 0x55, 0x42, 0xff, 0x93, 0x09, 0x59, 0xca, 0xf1, 0x29, 0x5e, 0x5b, 0x75, 0x76, 0xbb,
+	0x98, 0x2f, 0xc1, 0xac, 0x7c, 0x4b, 0x79, 0xf9, 0xa6, 0x14, 0xba, 0x38, 0x43, 0xa1, 0x4b, 0x19,
+	0x85, 0xfe, 0x5e, 0x80, 0xd6, 0xf4, 0x0a, 0xd4, 0x75, 0xbe, 0x0f, 0x55, 0x55, 0xaf, 0xd6, 0xe9,
+	0x74, 0x3e, 0x13, 0xd4, 0x5d, 0xe5, 0xf8, 0x1a, 0x55, 0x9b, 0x8f, 0xa1, 0x95, 0x55, 0xeb, 0x9b,
+	0x5d, 0xcd, 0x1f, 0x45, 0xa8, 0xea, 0x9d, 0x79, 0xe9, 0x92, 0x0f, 0x00, 0x1c, 0xa9, 0xa1, 0xbe,
+	0x4d, 0x85, 0xcc, 0xae, 0x7e, 0x6c, 0x74, 0xe2, 0x76, 0xdc, 0xd1, 0xed, 0xb8, 0x73, 0xae, 0xfb,
+	0xb5, 0x55, 0x53, 0xe8, 0x27, 0x82, 0x10, 0x58, 0xf4, 0xe9, 0x08, 0x15, 0xf5, 0xf2, 0x3f, 0x69,
+	0x43, 0xbd, 0x8f, 0xdc, 0x61, 0xae, 0x6c, 0x91, 0x8a, 0xf9, 0xb4, 0x89, 0x74, 0xa2, 0x6b, 0x53,
+	0xad, 0x9a, 0x37, 0x97, 0x24, 0x8f, 0xcb, 0x31, 0x8f, 0xda, 0x6c, 0xa5, 0x10, 0xc4, 0x80, 0x52,
+	0xd4, 0x42, 0x2b, 0x32, 0xb3, 0xaa, 0x04, 0x5e, 0x30, 0xcf, 0x8a, 0x8c, 0x64, 0x15, 0x96, 0xe4,
+	0x3c, 0x68, 0x96, 0x65, 0x9c, 0x78, 0x41, 0x1e, 0xc3, 0x4a, 0x1f, 0x07, 0x74, 0xec, 0x09, 0x5b,
+	0xcb, 0xbf, 0x3a, 0x47, 0xfe, 0xcb, 0x0a, 0xac, 0xd6, 0xe6, 0x9f, 0x45, 0x58, 0xc9, 0x61, 0x26,
+	0x58, 0xd3, 0xa5, 0x17, 0x53, 0xa5, 0x67, 0x99, 0x2c, 0xbd, 0x09, 0x93, 0x59, 0x4e, 0x16, 0x5f,
+	0xcb, 0xc9, 0x3e, 0xac, 0x38, 0x41, 0x1f, 0x6d, 0xf5, 0x3d, 0x45, 0xfc, 0xc4, 0x5a, 0x6e, 0x44,
+	0xe6, 0x33, 0x69, 0x8d, 0xe6, 0xd0, 0x21, 0xd4, 0x43, 0xea, 0x5c, 0x46, 0xea, 0x8b, 0x30, 0xe5,
+	0x1c, 0x87, 0xa0, 0x9c, 0x11, 0xf4, 0x29, 0xdc, 0x9f, 0x9c, 0x81, 0xbc, 0x59, 0x91, 0xb9, 0xac,
+	0x67, 0x3e, 0x53, 0x4b, 0xbb, 0x2d, 0xc2, 0xf2, 0x26, 0x7e, 0xfc, 0x4f, 0xe5, 0x96, 0xbe, 0x33,
+	0x64, 0x57, 0xae, 0x83, 0x64, 0x00, 0xcb, 0xd9, 0x46, 0x45, 0x0c, 0x79, 0xe2, 0xd4, 0x09, 0x68,
+	0x64, 0xbb, 0xbf, 0x79, 0xf8, 0xe3, 0xdf, 0xff, 0xfe, 0x56, 0x7c, 0xcb, 0xdc, 0x88, 0x06, 0x35,
+	0xef, 0x5e, 0x1d, 0xf5, 0x50, 0xd0, 0xa3, 0x64, 0xa4, 0xf3, 0x47, 0xc9, 0x40, 0x24, 0x5f, 0x42,
+	0x3d, 0xd5, 0xc0, 0xc8, 0x86, 0x3c, 0x68, 0x72, 0x44, 0xe6, 0x23, 0xec, 0xc9, 0x08, 0x0f, 0x48,
+	0x6b, 0x46, 0x84, 0xee, 0xf7, 0x6e, 0xff, 0x07, 0x32, 0x84, 0x46, 0x66, 0x80, 0x91, 0x4d, 0x79,
+	0xca, 0xb4, 0xd1, 0x6a, 0x18, 0xd3, 0x5c, 0x71, 0x1b, 0x31, 0x77, 0x64, 0xb4, 0x4d, 0x32, 0xab,
+	0x1e, 0xf2, 0x0d, 0x2c, 0x67, 0x3f, 0x77, 0xc5, 0xd6, 0xd4, 0x89, 0x65, 0xac, 0x4f, 0x48, 0xec,
+	0xe3, 0xe8, 0xed, 0xa4, 0x8b, 0x7a, 0x67, 0x7e, 0x51, 0xa1, 0x64, 0x4c, 0xcf, 0x9d, 0x5b, 0xc6,
+	0x72, 0x93, 0xc8, 0x68, 0x4e, 0x3a, 0x54, 0x39, 0x1d, 0x19, 0xe7, 0x80, 0xec, 0xcf, 0x8b, 0xd3,
+	0xd5, 0x73, 0x8f, 0x13, 0x2b, 0xff, 0xf0, 0xd1, 0xdf, 0xd8, 0xee, 0x14, 0x49, 0x64, 0x1b, 0x9d,
+	0x31, 0xf5, 0x03, 0x36, 0x17, 0xc8, 0xb3, 0xcc, 0x43, 0x48, 0x1f, 0xf8, 0x20, 0x7f, 0xfd, 0x77,
+	0x3c, 0xed, 0xab, 0xec, 0x7b, 0x49, 0xcf, 0x01, 0xd2, 0x9e, 0xb8, 0xd4, 0xdc, 0x90, 0x33, 0x76,
+	0xe7, 0x20, 0x14, 0x5d, 0x0b, 0xe4, 0x3c, 0xff, 0xf6, 0xc8, 0x12, 0x30, 0xaf, 0xd3, 0xcf, 0xbc,
+	0xec, 0x05, 0xf2, 0x35, 0x18, 0xb3, 0xdf, 0x13, 0x64, 0x7f, 0x06, 0x15, 0x77, 0xbf, 0xe6, 0x85,
+	0xd3, 0x9f, 0x0b, 0xbf, 0x3e, 0xf9, 0xcc, 0x6a, 0x41, 0x45, 0xf5, 0x4b, 0xf2, 0x7f, 0xb2, 0x02,
+	0x0d, 0xa3, 0x2e, 0xb7, 0x9c, 0x09, 0x2a, 0xc6, 0xfc, 0xc5, 0x0e, 0x6c, 0x43, 0xf9, 0x14, 0x29,
+	0x43, 0x46, 0xee, 0x57, 0x8b, 0x46, 0x83, 0x8e, 0xc5, 0xcb, 0x80, 0xb9, 0x37, 0xf2, 0x95, 0xdc,
+	0x2e, 0xf6, 0xee, 0x01, 0x24, 0x80, 0x85, 0x17, 0x27, 0x43, 0x57, 0xbc, 0x1c, 0xf7, 0x3a, 0x4e,
+	0x30, 0xea, 0x5e, 0x8e, 0x7b, 0x38, 0xf0, 0x82, 0x57, 0x29, 0xe5, 0xa4, 0x1f, 0xe8, 0xc3, 0xc0,
+	0x76, 0x3c, 0x17, 0x7d, 0xd1, 0x2b, 0xcb, 0xda, 0x4f, 0xfe, 0x0b, 0x00, 0x00, 0xff, 0xff, 0xca,
+	0x2f, 0xa0, 0x4e, 0x94, 0x0c, 0x00, 0x00,
 }
diff --git a/backend/api/go_client/resource_reference.pb.go b/backend/api/go_client/resource_reference.pb.go
index 45fe30247b5c..2c3b693a6002 100755
--- a/backend/api/go_client/resource_reference.pb.go
+++ b/backend/api/go_client/resource_reference.pb.go
@@ -38,24 +38,30 @@ const (
 	ResourceType_UNKNOWN_RESOURCE_TYPE ResourceType = 0
 	ResourceType_EXPERIMENT            ResourceType = 1
 	ResourceType_JOB                   ResourceType = 2
+	ResourceType_PIPELINE              ResourceType = 3
+	ResourceType_PIPELINE_VERSION      ResourceType = 4
 )
 
 var ResourceType_name = map[int32]string{
 	0: "UNKNOWN_RESOURCE_TYPE",
 	1: "EXPERIMENT",
 	2: "JOB",
+	3: "PIPELINE",
+	4: "PIPELINE_VERSION",
 }
 var ResourceType_value = map[string]int32{
 	"UNKNOWN_RESOURCE_TYPE": 0,
 	"EXPERIMENT":            1,
 	"JOB":                   2,
+	"PIPELINE":              3,
+	"PIPELINE_VERSION":      4,
 }
 
 func (x ResourceType) String() string {
 	return proto.EnumName(ResourceType_name, int32(x))
 }
 func (ResourceType) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_resource_reference_05b185b0f444334d, []int{0}
+	return fileDescriptor_resource_reference_81a9849386131b93, []int{0}
 }
 
 type Relationship int32
@@ -81,7 +87,7 @@ func (x Relationship) String() string {
 	return proto.EnumName(Relationship_name, int32(x))
 }
 func (Relationship) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_resource_reference_05b185b0f444334d, []int{1}
+	return fileDescriptor_resource_reference_81a9849386131b93, []int{1}
 }
 
 type ResourceKey struct {
@@ -96,7 +102,7 @@ func (m *ResourceKey) Reset()         { *m = ResourceKey{} }
 func (m *ResourceKey) String() string { return proto.CompactTextString(m) }
 func (*ResourceKey) ProtoMessage()    {}
 func (*ResourceKey) Descriptor() ([]byte, []int) {
-	return fileDescriptor_resource_reference_05b185b0f444334d, []int{0}
+	return fileDescriptor_resource_reference_81a9849386131b93, []int{0}
 }
 func (m *ResourceKey) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_ResourceKey.Unmarshal(m, b)
@@ -143,7 +149,7 @@ func (m *ResourceReference) Reset()         { *m = ResourceReference{} }
 func (m *ResourceReference) String() string { return proto.CompactTextString(m) }
 func (*ResourceReference) ProtoMessage()    {}
 func (*ResourceReference) Descriptor() ([]byte, []int) {
-	return fileDescriptor_resource_reference_05b185b0f444334d, []int{1}
+	return fileDescriptor_resource_reference_81a9849386131b93, []int{1}
 }
 func (m *ResourceReference) XXX_Unmarshal(b []byte) error {
 	return xxx_messageInfo_ResourceReference.Unmarshal(m, b)
@@ -192,30 +198,31 @@ func init() {
 }
 
 func init() {
-	proto.RegisterFile("backend/api/resource_reference.proto", fileDescriptor_resource_reference_05b185b0f444334d)
-}
-
-var fileDescriptor_resource_reference_05b185b0f444334d = []byte{
-	// 325 bytes of a gzipped FileDescriptorProto
-	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0x54, 0x91, 0x41, 0x6b, 0xc2, 0x40,
-	0x10, 0x85, 0x4d, 0x62, 0x2b, 0x8e, 0x22, 0x71, 0x69, 0x21, 0xbd, 0x89, 0xb4, 0x20, 0x1e, 0x12,
-	0x50, 0xbc, 0x57, 0xed, 0x42, 0xad, 0x6d, 0x22, 0x6b, 0xc4, 0xb6, 0x97, 0x90, 0xc4, 0x51, 0x17,
-	0x63, 0x76, 0x89, 0x91, 0x92, 0x6b, 0x7f, 0x79, 0x31, 0x54, 0xa2, 0xb7, 0x81, 0xef, 0xf1, 0xcd,
-	0x83, 0x07, 0x8f, 0x81, 0x1f, 0xee, 0x30, 0x5e, 0x59, 0xbe, 0xe4, 0x56, 0x82, 0x07, 0x71, 0x4c,
-	0x42, 0xf4, 0x12, 0x5c, 0x63, 0x82, 0x71, 0x88, 0xa6, 0x4c, 0x44, 0x2a, 0x88, 0xe6, 0x4b, 0xde,
-	0x7e, 0x81, 0x1a, 0xfb, 0x0f, 0x4c, 0x31, 0x23, 0x4f, 0x50, 0x4e, 0x33, 0x89, 0x86, 0xd2, 0x52,
-	0x3a, 0x8d, 0x5e, 0xd3, 0xf4, 0x25, 0x37, 0xcf, 0xdc, 0xcd, 0x24, 0xb2, 0x1c, 0x93, 0x06, 0xa8,
-	0x7c, 0x65, 0xa8, 0x2d, 0xa5, 0x53, 0x65, 0x2a, 0x5f, 0xb5, 0x7f, 0x15, 0x68, 0x9e, 0x63, 0xec,
-	0xfc, 0x86, 0xb4, 0x41, 0xdb, 0x61, 0x96, 0xbb, 0x6a, 0x3d, 0xfd, 0xca, 0x35, 0xc5, 0x8c, 0x9d,
-	0x20, 0x21, 0x50, 0x8e, 0xfd, 0x3d, 0x1a, 0x5a, 0xee, 0xca, 0x6f, 0x32, 0x80, 0x7a, 0x82, 0x91,
-	0x9f, 0x72, 0x11, 0x1f, 0xb6, 0x5c, 0xe6, 0x7f, 0x8a, 0x32, 0x05, 0x60, 0x57, 0xb1, 0xee, 0x08,
-	0xea, 0x97, 0x55, 0xc9, 0x03, 0xdc, 0x2f, 0xec, 0xa9, 0xed, 0x2c, 0x6d, 0x8f, 0xd1, 0xb9, 0xb3,
-	0x60, 0x63, 0xea, 0xb9, 0x5f, 0x33, 0xaa, 0x97, 0x48, 0x03, 0x80, 0x7e, 0xce, 0x28, 0x9b, 0x7c,
-	0x50, 0xdb, 0xd5, 0x15, 0x52, 0x01, 0xed, 0xcd, 0x19, 0xe9, 0x6a, 0xf7, 0xf9, 0xe4, 0x28, 0x9c,
-	0xc4, 0x80, 0xbb, 0xc2, 0xf1, 0x3e, 0x74, 0x27, 0x8e, 0x3d, 0x7f, 0x9d, 0xcc, 0xf4, 0x12, 0xa9,
-	0xc2, 0x8d, 0xb3, 0xb4, 0x29, 0xd3, 0x15, 0x52, 0x83, 0xca, 0x98, 0xd1, 0xa1, 0xeb, 0x30, 0x5d,
-	0x1d, 0x0d, 0xbe, 0xfb, 0x1b, 0x9e, 0x6e, 0x8f, 0x81, 0x19, 0x8a, 0xbd, 0xb5, 0x3b, 0x06, 0xb8,
-	0x8e, 0xc4, 0x8f, 0x25, 0xb9, 0xc4, 0x88, 0xc7, 0x78, 0xb0, 0x2e, 0xb7, 0xd9, 0x08, 0x2f, 0x8c,
-	0x38, 0xc6, 0x69, 0x70, 0x9b, 0x6f, 0xd2, 0xff, 0x0b, 0x00, 0x00, 0xff, 0xff, 0xa6, 0xdd, 0xe5,
-	0xee, 0xbb, 0x01, 0x00, 0x00,
+	proto.RegisterFile("backend/api/resource_reference.proto", fileDescriptor_resource_reference_81a9849386131b93)
+}
+
+var fileDescriptor_resource_reference_81a9849386131b93 = []byte{
+	// 351 bytes of a gzipped FileDescriptorProto
+	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0x54, 0x91, 0x41, 0xab, 0xda, 0x40,
+	0x14, 0x85, 0x5f, 0x12, 0xdb, 0xd7, 0x77, 0x15, 0x99, 0x37, 0x58, 0x48, 0x77, 0x22, 0x2d, 0x88,
+	0x8b, 0x04, 0x14, 0xf7, 0x55, 0x3b, 0xd0, 0x54, 0x3b, 0x09, 0x63, 0xac, 0x6d, 0x37, 0x21, 0x89,
+	0x57, 0x1d, 0x8c, 0xc9, 0x10, 0x23, 0x25, 0xdb, 0xfe, 0xf2, 0x62, 0x68, 0x88, 0xee, 0x66, 0xf8,
+	0x0e, 0xe7, 0xbb, 0x70, 0xe0, 0x63, 0x14, 0xc6, 0x27, 0x4c, 0x77, 0x76, 0xa8, 0xa4, 0x9d, 0xe3,
+	0x25, 0xbb, 0xe6, 0x31, 0x06, 0x39, 0xee, 0x31, 0xc7, 0x34, 0x46, 0x4b, 0xe5, 0x59, 0x91, 0x51,
+	0x23, 0x54, 0x72, 0xf0, 0x05, 0xda, 0xe2, 0x7f, 0x60, 0x89, 0x25, 0xfd, 0x04, 0xad, 0xa2, 0x54,
+	0x68, 0x6a, 0x7d, 0x6d, 0xd8, 0x1d, 0xbf, 0x5a, 0xa1, 0x92, 0x56, 0xcd, 0xfd, 0x52, 0xa1, 0xa8,
+	0x30, 0xed, 0x82, 0x2e, 0x77, 0xa6, 0xde, 0xd7, 0x86, 0x2f, 0x42, 0x97, 0xbb, 0xc1, 0x5f, 0x0d,
+	0x5e, 0xeb, 0x98, 0xa8, 0x35, 0x74, 0x00, 0xc6, 0x09, 0xcb, 0xaa, 0xab, 0x3d, 0x26, 0x0f, 0x5d,
+	0x4b, 0x2c, 0xc5, 0x0d, 0x52, 0x0a, 0xad, 0x34, 0x3c, 0xa3, 0x69, 0x54, 0x5d, 0xd5, 0x9b, 0x4e,
+	0xa1, 0x93, 0x63, 0x12, 0x16, 0x32, 0x4b, 0x2f, 0x47, 0xa9, 0x2a, 0x4f, 0x73, 0x4c, 0x03, 0xc4,
+	0x43, 0x6c, 0xb4, 0x87, 0xce, 0xfd, 0xa9, 0xf4, 0x03, 0xbc, 0xdf, 0xf0, 0x25, 0x77, 0xb7, 0x3c,
+	0x10, 0x6c, 0xed, 0x6e, 0xc4, 0x82, 0x05, 0xfe, 0x2f, 0x8f, 0x91, 0x27, 0xda, 0x05, 0x60, 0x3f,
+	0x3d, 0x26, 0x9c, 0xef, 0x8c, 0xfb, 0x44, 0xa3, 0xcf, 0x60, 0x7c, 0x73, 0xe7, 0x44, 0xa7, 0x1d,
+	0x78, 0xe7, 0x39, 0x1e, 0x5b, 0x39, 0x9c, 0x11, 0x83, 0xf6, 0x80, 0xd4, 0xbf, 0xe0, 0x07, 0x13,
+	0x6b, 0xc7, 0xe5, 0xa4, 0x35, 0xfa, 0x7c, 0xf3, 0x34, 0x5e, 0x6a, 0x42, 0xaf, 0xf1, 0xac, 0x66,
+	0xbe, 0xe3, 0xf2, 0xf5, 0x57, 0xc7, 0x23, 0x4f, 0xf4, 0x05, 0xde, 0xb8, 0x5b, 0xce, 0x04, 0xd1,
+	0x68, 0x1b, 0x9e, 0x17, 0x82, 0xcd, 0x7c, 0x57, 0x10, 0x7d, 0x3e, 0xfd, 0x3d, 0x39, 0xc8, 0xe2,
+	0x78, 0x8d, 0xac, 0x38, 0x3b, 0xdb, 0xa7, 0x6b, 0x84, 0xfb, 0x24, 0xfb, 0x63, 0x2b, 0xa9, 0x30,
+	0x91, 0x29, 0x5e, 0xec, 0xfb, 0xfd, 0x0e, 0x59, 0x10, 0x27, 0x12, 0xd3, 0x22, 0x7a, 0x5b, 0xed,
+	0x36, 0xf9, 0x17, 0x00, 0x00, 0xff, 0xff, 0xa7, 0x32, 0x3a, 0x06, 0xdf, 0x01, 0x00, 0x00,
 }
diff --git a/backend/api/go_http_client/experiment_client/experiment_service/list_experiment_parameters.go b/backend/api/go_http_client/experiment_client/experiment_service/list_experiment_parameters.go
index 944ca118fa3a..18a39e3f3b15 100644
--- a/backend/api/go_http_client/experiment_client/experiment_service/list_experiment_parameters.go
+++ b/backend/api/go_http_client/experiment_client/experiment_service/list_experiment_parameters.go
@@ -77,7 +77,7 @@ for the list experiment operation typically these are written to a http.Request
 type ListExperimentParams struct {
 
 	/*Filter
-	  A base-64 encoded, JSON-serialized Filter protocol buffer (see
+	  A url-encoded, JSON-serialized Filter protocol buffer (see
 	filter.proto).
 
 	*/
diff --git a/backend/api/go_http_client/job_client/job_service/list_jobs_parameters.go b/backend/api/go_http_client/job_client/job_service/list_jobs_parameters.go
index 8b1e0acfb76b..9bde0a8072cd 100644
--- a/backend/api/go_http_client/job_client/job_service/list_jobs_parameters.go
+++ b/backend/api/go_http_client/job_client/job_service/list_jobs_parameters.go
@@ -89,7 +89,7 @@ for the list jobs operation typically these are written to a http.Request
 type ListJobsParams struct {
 
 	/*Filter
-	  A base-64 encoded, JSON-serialized Filter protocol buffer (see
+	  A url-encoded, JSON-serialized Filter protocol buffer (see
 	filter.proto).
 
 	*/
diff --git a/backend/api/go_http_client/job_model/api_cron_schedule.go b/backend/api/go_http_client/job_model/api_cron_schedule.go
index 2782d88bf82a..9d69899ea829 100644
--- a/backend/api/go_http_client/job_model/api_cron_schedule.go
+++ b/backend/api/go_http_client/job_model/api_cron_schedule.go
@@ -31,7 +31,8 @@ import (
 // swagger:model apiCronSchedule
 type APICronSchedule struct {
 
-	// The cron string. For details how to compose a cron, visit ttps://en.wikipedia.org/wiki/Cron
+	// The cron string. For details how to compose a cron, visit
+	// ttps://en.wikipedia.org/wiki/Cron
 	Cron string `json:"cron,omitempty"`
 
 	// The end time of the cron job
diff --git a/backend/api/go_http_client/job_model/api_resource_type.go b/backend/api/go_http_client/job_model/api_resource_type.go
index a3f511527986..cc2493d0627b 100644
--- a/backend/api/go_http_client/job_model/api_resource_type.go
+++ b/backend/api/go_http_client/job_model/api_resource_type.go
@@ -42,6 +42,12 @@ const (
 
 	// APIResourceTypeJOB captures enum value "JOB"
 	APIResourceTypeJOB APIResourceType = "JOB"
+
+	// APIResourceTypePIPELINE captures enum value "PIPELINE"
+	APIResourceTypePIPELINE APIResourceType = "PIPELINE"
+
+	// APIResourceTypePIPELINEVERSION captures enum value "PIPELINE_VERSION"
+	APIResourceTypePIPELINEVERSION APIResourceType = "PIPELINE_VERSION"
 )
 
 // for schema
@@ -49,7 +55,7 @@ var apiResourceTypeEnum []interface{}
 
 func init() {
 	var res []APIResourceType
-	if err := json.Unmarshal([]byte(`["UNKNOWN_RESOURCE_TYPE","EXPERIMENT","JOB"]`), &res); err != nil {
+	if err := json.Unmarshal([]byte(`["UNKNOWN_RESOURCE_TYPE","EXPERIMENT","JOB","PIPELINE","PIPELINE_VERSION"]`), &res); err != nil {
 		panic(err)
 	}
 	for _, v := range res {
diff --git a/backend/api/go_http_client/pipeline_client/pipeline_service/list_pipelines_parameters.go b/backend/api/go_http_client/pipeline_client/pipeline_service/list_pipelines_parameters.go
index 6375cecd1909..0336da5df203 100644
--- a/backend/api/go_http_client/pipeline_client/pipeline_service/list_pipelines_parameters.go
+++ b/backend/api/go_http_client/pipeline_client/pipeline_service/list_pipelines_parameters.go
@@ -77,7 +77,7 @@ for the list pipelines operation typically these are written to a http.Request
 type ListPipelinesParams struct {
 
 	/*Filter
-	  A base-64 encoded, JSON-serialized Filter protocol buffer (see
+	  A url-encoded, JSON-serialized Filter protocol buffer (see
 	filter.proto).
 
 	*/
diff --git a/backend/api/go_http_client/pipeline_model/BUILD.bazel b/backend/api/go_http_client/pipeline_model/BUILD.bazel
index a8aaa0c70009..a35b4bfea07c 100644
--- a/backend/api/go_http_client/pipeline_model/BUILD.bazel
+++ b/backend/api/go_http_client/pipeline_model/BUILD.bazel
@@ -4,9 +4,15 @@ go_library(
     name = "go_default_library",
     srcs = [
         "api_get_template_response.go",
+        "api_list_pipeline_versions_response.go",
         "api_list_pipelines_response.go",
         "api_parameter.go",
         "api_pipeline.go",
+        "api_pipeline_version.go",
+        "api_relationship.go",
+        "api_resource_key.go",
+        "api_resource_reference.go",
+        "api_resource_type.go",
         "api_status.go",
         "api_url.go",
         "protobuf_any.go",
diff --git a/backend/api/go_http_client/pipeline_model/api_list_pipeline_versions_response.go b/backend/api/go_http_client/pipeline_model/api_list_pipeline_versions_response.go
new file mode 100644
index 000000000000..14225bdbae98
--- /dev/null
+++ b/backend/api/go_http_client/pipeline_model/api_list_pipeline_versions_response.go
@@ -0,0 +1,100 @@
+// Copyright 2019 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Code generated by go-swagger; DO NOT EDIT.
+
+package pipeline_model
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"strconv"
+
+	strfmt "github.com/go-openapi/strfmt"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/swag"
+)
+
+// APIListPipelineVersionsResponse api list pipeline versions response
+// swagger:model apiListPipelineVersionsResponse
+type APIListPipelineVersionsResponse struct {
+
+	// next page token
+	NextPageToken string `json:"next_page_token,omitempty"`
+
+	// total size
+	TotalSize int32 `json:"total_size,omitempty"`
+
+	// versions
+	Versions []*APIPipelineVersion `json:"versions"`
+}
+
+// Validate validates this api list pipeline versions response
+func (m *APIListPipelineVersionsResponse) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateVersions(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *APIListPipelineVersionsResponse) validateVersions(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Versions) { // not required
+		return nil
+	}
+
+	for i := 0; i < len(m.Versions); i++ {
+		if swag.IsZero(m.Versions[i]) { // not required
+			continue
+		}
+
+		if m.Versions[i] != nil {
+			if err := m.Versions[i].Validate(formats); err != nil {
+				if ve, ok := err.(*errors.Validation); ok {
+					return ve.ValidateName("versions" + "." + strconv.Itoa(i))
+				}
+				return err
+			}
+		}
+
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *APIListPipelineVersionsResponse) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *APIListPipelineVersionsResponse) UnmarshalBinary(b []byte) error {
+	var res APIListPipelineVersionsResponse
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}
diff --git a/backend/api/go_http_client/pipeline_model/api_pipeline.go b/backend/api/go_http_client/pipeline_model/api_pipeline.go
index d8a8f8f5849c..4b40d15542b7 100644
--- a/backend/api/go_http_client/pipeline_model/api_pipeline.go
+++ b/backend/api/go_http_client/pipeline_model/api_pipeline.go
@@ -37,6 +37,12 @@ type APIPipeline struct {
 	// Format: date-time
 	CreatedAt strfmt.DateTime `json:"created_at,omitempty"`
 
+	// Output only. The default version of the pipeline. As of now, the latest
+	// version is used as default. (In the future, if desired by customers, we
+	// can allow them to set default version.)
+	// Read Only: true
+	DefaultVersion *APIPipelineVersion `json:"default_version,omitempty"`
+
 	// Optional input field. Describing the purpose of the job.
 	Description string `json:"description,omitempty"`
 
@@ -53,10 +59,16 @@ type APIPipeline struct {
 	Name string `json:"name,omitempty"`
 
 	// Output. The input parameters for this pipeline.
+	// TODO(jingzhang36): replace this parameters field with the parameters field
+	// inside PipelineVersion when all usage of the former has been changed to use
+	// the latter.
 	Parameters []*APIParameter `json:"parameters"`
 
 	// The URL to the source of the pipeline. This is required when creating the
 	// pipeine through CreatePipeline API.
+	// TODO(jingzhang36): replace this url field with the code_source_urls field
+	// inside PipelineVersion when all usage of the former has been changed to use
+	// the latter.
 	URL *APIURL `json:"url,omitempty"`
 }
 
@@ -68,6 +80,10 @@ func (m *APIPipeline) Validate(formats strfmt.Registry) error {
 		res = append(res, err)
 	}
 
+	if err := m.validateDefaultVersion(formats); err != nil {
+		res = append(res, err)
+	}
+
 	if err := m.validateParameters(formats); err != nil {
 		res = append(res, err)
 	}
@@ -95,6 +111,24 @@ func (m *APIPipeline) validateCreatedAt(formats strfmt.Registry) error {
 	return nil
 }
 
+func (m *APIPipeline) validateDefaultVersion(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.DefaultVersion) { // not required
+		return nil
+	}
+
+	if m.DefaultVersion != nil {
+		if err := m.DefaultVersion.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("default_version")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
 func (m *APIPipeline) validateParameters(formats strfmt.Registry) error {
 
 	if swag.IsZero(m.Parameters) { // not required
diff --git a/backend/api/go_http_client/pipeline_model/api_pipeline_version.go b/backend/api/go_http_client/pipeline_model/api_pipeline_version.go
new file mode 100644
index 000000000000..f071b3ab9a9c
--- /dev/null
+++ b/backend/api/go_http_client/pipeline_model/api_pipeline_version.go
@@ -0,0 +1,185 @@
+// Copyright 2019 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Code generated by go-swagger; DO NOT EDIT.
+
+package pipeline_model
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"strconv"
+
+	strfmt "github.com/go-openapi/strfmt"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/swag"
+	"github.com/go-openapi/validate"
+)
+
+// APIPipelineVersion api pipeline version
+// swagger:model apiPipelineVersion
+type APIPipelineVersion struct {
+
+	// Input. Optional. Pipeline version code source.
+	CodeSourceURL string `json:"code_source_url,omitempty"`
+
+	// Output. The time this pipeline version is created.
+	// Format: date-time
+	CreatedAt strfmt.DateTime `json:"created_at,omitempty"`
+
+	// Output. Unique version ID. Generated by API server.
+	ID string `json:"id,omitempty"`
+
+	// Optional input field. Version name provided by user.
+	Name string `json:"name,omitempty"`
+
+	// Input. Required. Pipeline version package url.
+	// Whe calling CreatePipelineVersion API method, need to provide one package
+	// file location.
+	PackageURL *APIURL `json:"package_url,omitempty"`
+
+	// Output. The input parameters for this pipeline.
+	Parameters []*APIParameter `json:"parameters"`
+
+	// Input. Required. E.g., specify which pipeline this pipeline version belongs
+	// to.
+	ResourceReferences []*APIResourceReference `json:"resource_references"`
+}
+
+// Validate validates this api pipeline version
+func (m *APIPipelineVersion) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateCreatedAt(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validatePackageURL(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateParameters(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateResourceReferences(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *APIPipelineVersion) validateCreatedAt(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.CreatedAt) { // not required
+		return nil
+	}
+
+	if err := validate.FormatOf("created_at", "body", "date-time", m.CreatedAt.String(), formats); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (m *APIPipelineVersion) validatePackageURL(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.PackageURL) { // not required
+		return nil
+	}
+
+	if m.PackageURL != nil {
+		if err := m.PackageURL.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("package_url")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
+func (m *APIPipelineVersion) validateParameters(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Parameters) { // not required
+		return nil
+	}
+
+	for i := 0; i < len(m.Parameters); i++ {
+		if swag.IsZero(m.Parameters[i]) { // not required
+			continue
+		}
+
+		if m.Parameters[i] != nil {
+			if err := m.Parameters[i].Validate(formats); err != nil {
+				if ve, ok := err.(*errors.Validation); ok {
+					return ve.ValidateName("parameters" + "." + strconv.Itoa(i))
+				}
+				return err
+			}
+		}
+
+	}
+
+	return nil
+}
+
+func (m *APIPipelineVersion) validateResourceReferences(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.ResourceReferences) { // not required
+		return nil
+	}
+
+	for i := 0; i < len(m.ResourceReferences); i++ {
+		if swag.IsZero(m.ResourceReferences[i]) { // not required
+			continue
+		}
+
+		if m.ResourceReferences[i] != nil {
+			if err := m.ResourceReferences[i].Validate(formats); err != nil {
+				if ve, ok := err.(*errors.Validation); ok {
+					return ve.ValidateName("resource_references" + "." + strconv.Itoa(i))
+				}
+				return err
+			}
+		}
+
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *APIPipelineVersion) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *APIPipelineVersion) UnmarshalBinary(b []byte) error {
+	var res APIPipelineVersion
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}
diff --git a/backend/api/go_http_client/pipeline_model/api_relationship.go b/backend/api/go_http_client/pipeline_model/api_relationship.go
new file mode 100644
index 000000000000..14793853f975
--- /dev/null
+++ b/backend/api/go_http_client/pipeline_model/api_relationship.go
@@ -0,0 +1,80 @@
+// Copyright 2019 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Code generated by go-swagger; DO NOT EDIT.
+
+package pipeline_model
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"encoding/json"
+
+	strfmt "github.com/go-openapi/strfmt"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/validate"
+)
+
+// APIRelationship api relationship
+// swagger:model apiRelationship
+type APIRelationship string
+
+const (
+
+	// APIRelationshipUNKNOWNRELATIONSHIP captures enum value "UNKNOWN_RELATIONSHIP"
+	APIRelationshipUNKNOWNRELATIONSHIP APIRelationship = "UNKNOWN_RELATIONSHIP"
+
+	// APIRelationshipOWNER captures enum value "OWNER"
+	APIRelationshipOWNER APIRelationship = "OWNER"
+
+	// APIRelationshipCREATOR captures enum value "CREATOR"
+	APIRelationshipCREATOR APIRelationship = "CREATOR"
+)
+
+// for schema
+var apiRelationshipEnum []interface{}
+
+func init() {
+	var res []APIRelationship
+	if err := json.Unmarshal([]byte(`["UNKNOWN_RELATIONSHIP","OWNER","CREATOR"]`), &res); err != nil {
+		panic(err)
+	}
+	for _, v := range res {
+		apiRelationshipEnum = append(apiRelationshipEnum, v)
+	}
+}
+
+func (m APIRelationship) validateAPIRelationshipEnum(path, location string, value APIRelationship) error {
+	if err := validate.Enum(path, location, value, apiRelationshipEnum); err != nil {
+		return err
+	}
+	return nil
+}
+
+// Validate validates this api relationship
+func (m APIRelationship) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	// value enum
+	if err := m.validateAPIRelationshipEnum("", "body", m); err != nil {
+		return err
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
diff --git a/backend/api/go_http_client/pipeline_model/api_resource_key.go b/backend/api/go_http_client/pipeline_model/api_resource_key.go
new file mode 100644
index 000000000000..b1dd0f9d6334
--- /dev/null
+++ b/backend/api/go_http_client/pipeline_model/api_resource_key.go
@@ -0,0 +1,86 @@
+// Copyright 2019 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Code generated by go-swagger; DO NOT EDIT.
+
+package pipeline_model
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	strfmt "github.com/go-openapi/strfmt"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/swag"
+)
+
+// APIResourceKey api resource key
+// swagger:model apiResourceKey
+type APIResourceKey struct {
+
+	// The ID of the resource that referred to.
+	ID string `json:"id,omitempty"`
+
+	// The type of the resource that referred to.
+	Type APIResourceType `json:"type,omitempty"`
+}
+
+// Validate validates this api resource key
+func (m *APIResourceKey) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateType(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *APIResourceKey) validateType(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Type) { // not required
+		return nil
+	}
+
+	if err := m.Type.Validate(formats); err != nil {
+		if ve, ok := err.(*errors.Validation); ok {
+			return ve.ValidateName("type")
+		}
+		return err
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *APIResourceKey) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *APIResourceKey) UnmarshalBinary(b []byte) error {
+	var res APIResourceKey
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}
diff --git a/backend/api/go_http_client/pipeline_model/api_resource_reference.go b/backend/api/go_http_client/pipeline_model/api_resource_reference.go
new file mode 100644
index 000000000000..1af1cedc6c02
--- /dev/null
+++ b/backend/api/go_http_client/pipeline_model/api_resource_reference.go
@@ -0,0 +1,111 @@
+// Copyright 2019 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Code generated by go-swagger; DO NOT EDIT.
+
+package pipeline_model
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	strfmt "github.com/go-openapi/strfmt"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/swag"
+)
+
+// APIResourceReference api resource reference
+// swagger:model apiResourceReference
+type APIResourceReference struct {
+
+	// key
+	Key *APIResourceKey `json:"key,omitempty"`
+
+	// The name of the resource that referred to.
+	Name string `json:"name,omitempty"`
+
+	// Required field. The relationship from referred resource to the object.
+	Relationship APIRelationship `json:"relationship,omitempty"`
+}
+
+// Validate validates this api resource reference
+func (m *APIResourceReference) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateKey(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateRelationship(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *APIResourceReference) validateKey(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Key) { // not required
+		return nil
+	}
+
+	if m.Key != nil {
+		if err := m.Key.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("key")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
+func (m *APIResourceReference) validateRelationship(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Relationship) { // not required
+		return nil
+	}
+
+	if err := m.Relationship.Validate(formats); err != nil {
+		if ve, ok := err.(*errors.Validation); ok {
+			return ve.ValidateName("relationship")
+		}
+		return err
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *APIResourceReference) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *APIResourceReference) UnmarshalBinary(b []byte) error {
+	var res APIResourceReference
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}
diff --git a/backend/api/go_http_client/pipeline_model/api_resource_type.go b/backend/api/go_http_client/pipeline_model/api_resource_type.go
new file mode 100644
index 000000000000..363e3e9b21d2
--- /dev/null
+++ b/backend/api/go_http_client/pipeline_model/api_resource_type.go
@@ -0,0 +1,86 @@
+// Copyright 2019 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Code generated by go-swagger; DO NOT EDIT.
+
+package pipeline_model
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"encoding/json"
+
+	strfmt "github.com/go-openapi/strfmt"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/validate"
+)
+
+// APIResourceType api resource type
+// swagger:model apiResourceType
+type APIResourceType string
+
+const (
+
+	// APIResourceTypeUNKNOWNRESOURCETYPE captures enum value "UNKNOWN_RESOURCE_TYPE"
+	APIResourceTypeUNKNOWNRESOURCETYPE APIResourceType = "UNKNOWN_RESOURCE_TYPE"
+
+	// APIResourceTypeEXPERIMENT captures enum value "EXPERIMENT"
+	APIResourceTypeEXPERIMENT APIResourceType = "EXPERIMENT"
+
+	// APIResourceTypeJOB captures enum value "JOB"
+	APIResourceTypeJOB APIResourceType = "JOB"
+
+	// APIResourceTypePIPELINE captures enum value "PIPELINE"
+	APIResourceTypePIPELINE APIResourceType = "PIPELINE"
+
+	// APIResourceTypePIPELINEVERSION captures enum value "PIPELINE_VERSION"
+	APIResourceTypePIPELINEVERSION APIResourceType = "PIPELINE_VERSION"
+)
+
+// for schema
+var apiResourceTypeEnum []interface{}
+
+func init() {
+	var res []APIResourceType
+	if err := json.Unmarshal([]byte(`["UNKNOWN_RESOURCE_TYPE","EXPERIMENT","JOB","PIPELINE","PIPELINE_VERSION"]`), &res); err != nil {
+		panic(err)
+	}
+	for _, v := range res {
+		apiResourceTypeEnum = append(apiResourceTypeEnum, v)
+	}
+}
+
+func (m APIResourceType) validateAPIResourceTypeEnum(path, location string, value APIResourceType) error {
+	if err := validate.Enum(path, location, value, apiResourceTypeEnum); err != nil {
+		return err
+	}
+	return nil
+}
+
+// Validate validates this api resource type
+func (m APIResourceType) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	// value enum
+	if err := m.validateAPIResourceTypeEnum("", "body", m); err != nil {
+		return err
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
diff --git a/backend/api/go_http_client/run_client/run_service/list_runs_parameters.go b/backend/api/go_http_client/run_client/run_service/list_runs_parameters.go
index a1ff43897854..213a42156030 100644
--- a/backend/api/go_http_client/run_client/run_service/list_runs_parameters.go
+++ b/backend/api/go_http_client/run_client/run_service/list_runs_parameters.go
@@ -89,7 +89,7 @@ for the list runs operation typically these are written to a http.Request
 type ListRunsParams struct {
 
 	/*Filter
-	  A base-64 encoded, JSON-serialized Filter protocol buffer (see
+	  A url-encoded, JSON-serialized Filter protocol buffer (see
 	filter.proto).
 
 	*/
diff --git a/backend/api/go_http_client/run_model/api_resource_type.go b/backend/api/go_http_client/run_model/api_resource_type.go
index d0fc5c2d1714..7e9c02d7db74 100644
--- a/backend/api/go_http_client/run_model/api_resource_type.go
+++ b/backend/api/go_http_client/run_model/api_resource_type.go
@@ -42,6 +42,12 @@ const (
 
 	// APIResourceTypeJOB captures enum value "JOB"
 	APIResourceTypeJOB APIResourceType = "JOB"
+
+	// APIResourceTypePIPELINE captures enum value "PIPELINE"
+	APIResourceTypePIPELINE APIResourceType = "PIPELINE"
+
+	// APIResourceTypePIPELINEVERSION captures enum value "PIPELINE_VERSION"
+	APIResourceTypePIPELINEVERSION APIResourceType = "PIPELINE_VERSION"
 )
 
 // for schema
@@ -49,7 +55,7 @@ var apiResourceTypeEnum []interface{}
 
 func init() {
 	var res []APIResourceType
-	if err := json.Unmarshal([]byte(`["UNKNOWN_RESOURCE_TYPE","EXPERIMENT","JOB"]`), &res); err != nil {
+	if err := json.Unmarshal([]byte(`["UNKNOWN_RESOURCE_TYPE","EXPERIMENT","JOB","PIPELINE","PIPELINE_VERSION"]`), &res); err != nil {
 		panic(err)
 	}
 	for _, v := range res {
diff --git a/backend/api/go_http_client/run_model/api_run_metric.go b/backend/api/go_http_client/run_model/api_run_metric.go
index fc3eddc2c9ce..2c5b92ec495c 100644
--- a/backend/api/go_http_client/run_model/api_run_metric.go
+++ b/backend/api/go_http_client/run_model/api_run_metric.go
@@ -33,14 +33,15 @@ type APIRunMetric struct {
 	// The display format of metric.
 	Format RunMetricFormat `json:"format,omitempty"`
 
-	// Required. The user defined name of the metric. It must between 1 and 63 characters
-	// long and must conform to the following regular expression:
+	// Required. The user defined name of the metric. It must between 1 and 63
+	// characters long and must conform to the following regular expression:
 	// `[a-z]([-a-z0-9]*[a-z0-9])?`.
 	Name string `json:"name,omitempty"`
 
-	// Required. The runtime node ID which reports the metric. The node ID can be found in
-	// the RunDetail.workflow.Status. Metric with same (node_id, name)
-	// are considerd as duplicate. Only the first reporting will be recorded. Max length is 128.
+	// Required. The runtime node ID which reports the metric. The node ID can be
+	// found in the RunDetail.workflow.Status. Metric with same (node_id, name)
+	// are considerd as duplicate. Only the first reporting will be recorded. Max
+	// length is 128.
 	NodeID string `json:"node_id,omitempty"`
 
 	// The number value of the metric.
diff --git a/backend/api/job.proto b/backend/api/job.proto
index 42829b82c7cb..c1dc076d5935 100644
--- a/backend/api/job.proto
+++ b/backend/api/job.proto
@@ -123,8 +123,9 @@ message ListJobsRequest {
   // resource_reference_key.type=EXPERIMENT&resource_reference_key.id=123
   ResourceKey resource_reference_key = 4;
 
-  // A base-64 encoded, JSON-serialized Filter protocol buffer (see
-  // filter.proto).
+  // A url-encoded, JSON-serialized Filter protocol buffer (see
+  // [filter.proto](https://github.com/kubeflow/pipelines/
+  // blob/master/backend/api/filter.proto)).
   string filter = 5;
 }
 
@@ -158,7 +159,8 @@ message CronSchedule {
   // The end time of the cron job
   google.protobuf.Timestamp end_time = 2;
 
-  // The cron string. For details how to compose a cron, visit ttps://en.wikipedia.org/wiki/Cron
+  // The cron string. For details how to compose a cron, visit
+  // ttps://en.wikipedia.org/wiki/Cron
   string cron = 3;
 }
 
diff --git a/backend/api/pipeline.proto b/backend/api/pipeline.proto
index fa775bed4f8e..d47385ee53c8 100644
--- a/backend/api/pipeline.proto
+++ b/backend/api/pipeline.proto
@@ -91,6 +91,45 @@ service PipelineService {
       get: "/apis/v1beta1/pipelines/{id}/templates"
     };
   }
+
+  rpc CreatePipelineVersion(CreatePipelineVersionRequest)
+      returns (PipelineVersion) {
+    // TODO(jingzhang36): uncomment when exposing this API method.
+    // option (google.api.http) = {
+    //   post: "/apis/v1beta1/pipeline_versions"
+    //   body: "version"
+    // };
+  }
+
+  rpc GetPipelineVersion(GetPipelineVersionRequest) returns (PipelineVersion) {
+    // TODO(jingzhang36): uncomment when exposing this API method.
+    // option (google.api.http) = {
+    //   get: "/apis/v1beta1/pipeline_versions/{version_id}"
+    // };
+  }
+
+  rpc ListPipelineVersions(ListPipelineVersionsRequest)
+      returns (ListPipelineVersionsResponse) {
+    // TODO(jingzhang36): uncomment when exposing this API method.
+    // option (google.api.http) = {
+    //   get: "/apis/v1beta1/pipeline_versions"
+    // };
+  }
+
+  rpc DeletePipelineVersion(DeletePipelineVersionRequest)
+      returns (google.protobuf.Empty) {
+    // TODO(jingzhang36): uncomment when exposing this API method.
+    // option (google.api.http) = {
+    //   delete: "/apis/v1beta1/pipeline_versions/{version_id}"
+    // };
+  }
+
+  rpc GetPipelineVersionTemplate(GetPipelineVersionTemplateRequest) returns (GetTemplateResponse) {
+    // TODO(jingzhang36): uncomment when exposing this API method.
+    // option (google.api.http) = {
+    //   get: "/apis/v1beta1/pipeline_versions/{version_id}/templates"
+    // };
+  }
 }
 
 message Url {
@@ -115,8 +154,9 @@ message ListPipelinesRequest {
   // Ascending by default.
   string sort_by = 3;
 
-  // A base-64 encoded, JSON-serialized Filter protocol buffer (see
-  // filter.proto).
+  // A url-encoded, JSON-serialized Filter protocol buffer (see
+  // [filter.proto](https://github.com/kubeflow/pipelines/
+  // blob/master/backend/api/filter.proto)).
   string filter = 4;
 }
 
@@ -138,7 +178,7 @@ message GetTemplateResponse {
   string template = 1;
 }
 
-message GetPipelineVersionTemplateRequest{
+message GetPipelineVersionTemplateRequest {
   string version_id = 1;
 }
 
@@ -157,11 +197,23 @@ message ListPipelineVersionsRequest {
   ResourceKey resource_key = 1;
   int32 page_size = 2;
   string page_token = 3;
+
+  // Can be format of "field_name", "field_name asc" or "field_name des"
+  // Ascending by default.
+  string sort_by = 4;
+  // A base-64 encoded, JSON-serialized Filter protocol buffer (see
+  // filter.proto).
+  string filter = 5;
 }
 
 message ListPipelineVersionsResponse {
   repeated PipelineVersion versions = 1;
   string next_page_token = 2;
+  int32 total_size = 3;
+}
+
+message DeletePipelineVersionRequest {
+  string version_id = 1;
 }
 
 message Pipeline {
@@ -199,8 +251,7 @@ message Pipeline {
   // Output only. The default version of the pipeline. As of now, the latest
   // version is used as default. (In the future, if desired by customers, we
   // can allow them to set default version.)
-  // TODO(jingzhang36): expose this in API pipeline definition with FE changes.
-  // PipelineVersion default_version = 8;
+  PipelineVersion default_version = 8;
 }
 
 message PipelineVersion {
@@ -228,4 +279,3 @@ message PipelineVersion {
   // to.
   repeated ResourceReference resource_references = 7;
 }
-
diff --git a/backend/api/resource_reference.proto b/backend/api/resource_reference.proto
index d866843d0631..f1ba7d70b420 100644
--- a/backend/api/resource_reference.proto
+++ b/backend/api/resource_reference.proto
@@ -22,6 +22,7 @@ enum ResourceType {
   EXPERIMENT = 1;
   JOB = 2;
   PIPELINE = 3;
+  PIPELINE_VERSION = 4;
 }
 
 enum Relationship {
diff --git a/backend/api/run.proto b/backend/api/run.proto
index bb1728f04084..2f01172b5c27 100644
--- a/backend/api/run.proto
+++ b/backend/api/run.proto
@@ -59,7 +59,9 @@ option (grpc.gateway.protoc_gen_swagger.options.openapiv2_swagger) = {
   }
 };
 
+//Initiate a run.
 service RunService {
+  // Creates a new run.
   rpc CreateRun(CreateRunRequest) returns (RunDetail) {
     option (google.api.http) = {
       post: "/apis/v1beta1/runs"
@@ -67,30 +69,35 @@ service RunService {
     };
   }
 
+  //Finds a specific run by ID.
   rpc GetRun(GetRunRequest) returns (RunDetail) {
     option (google.api.http) = {
       get: "/apis/v1beta1/runs/{run_id}"
     };
   }
 
+  //Finds all runs.
   rpc ListRuns(ListRunsRequest) returns (ListRunsResponse) {
     option (google.api.http) = {
       get: "/apis/v1beta1/runs"
     };
   }
 
+  //Archives a run.
   rpc ArchiveRun(ArchiveRunRequest) returns (google.protobuf.Empty) {
     option (google.api.http) = {
       post: "/apis/v1beta1/runs/{id}:archive"
     };
   }
 
+  //Restores an archived run.
   rpc UnarchiveRun(UnarchiveRunRequest) returns (google.protobuf.Empty) {
     option (google.api.http) = {
       post: "/apis/v1beta1/runs/{id}:unarchive"
     };
   }
 
+  //Deletes a run.
   rpc DeleteRun(DeleteRunRequest) returns (google.protobuf.Empty) {
     option (google.api.http) = {
       delete: "/apis/v1beta1/runs/{id}"
@@ -98,28 +105,32 @@ service RunService {
   }
 
   // ReportRunMetrics reports metrics of a run. Each metric is reported in its
-  // own transaction, so this API accepts partial failures. Metric can be uniquely
-  // identified by (run_id, node_id, name). Duplicate reporting will be
+  // own transaction, so this API accepts partial failures. Metric can be
+  // uniquely identified by (run_id, node_id, name). Duplicate reporting will be
   // ignored by the API. First reporting wins.
-  rpc ReportRunMetrics(ReportRunMetricsRequest) returns (ReportRunMetricsResponse) {
+  rpc ReportRunMetrics(ReportRunMetricsRequest)
+      returns (ReportRunMetricsResponse) {
     option (google.api.http) = {
       post: "/apis/v1beta1/runs/{run_id}:reportMetrics"
       body: "*"
     };
   }
 
+  //Finds a run's artifact data.
   rpc ReadArtifact(ReadArtifactRequest) returns (ReadArtifactResponse) {
     option (google.api.http) = {
       get: "/apis/v1beta1/runs/{run_id}/nodes/{node_id}/artifacts/{artifact_name}:read"
     };
   }
 
+  //Terminates an active run.
   rpc TerminateRun(TerminateRunRequest) returns (google.protobuf.Empty) {
     option (google.api.http) = {
       post: "/apis/v1beta1/runs/{run_id}/terminate"
     };
   }
 
+  //Re-initiates a failed or terminated run.
   rpc RetryRun(RetryRunRequest) returns (google.protobuf.Empty) {
     option (google.api.http) = {
       post: "/apis/v1beta1/runs/{run_id}/retry"
@@ -139,7 +150,7 @@ message ListRunsRequest {
   string page_token = 1;
   int32 page_size = 2;
   // Can be format of "field_name", "field_name asc" or "field_name des"
-  // Ascending by default.
+  // (Example, "name asc" or "id des"). Ascending by default.
   string sort_by = 3;
 
   // What resource reference to filter on.
@@ -147,8 +158,9 @@ message ListRunsRequest {
   // resource_reference_key.type=EXPERIMENT&resource_reference_key.id=123
   ResourceKey resource_reference_key = 4;
 
-  // A base-64 encoded, JSON-serialized Filter protocol buffer (see
-  // filter.proto).
+  // A url-encoded, JSON-serialized Filter protocol buffer (see
+  // [filter.proto](https://github.com/kubeflow/pipelines/
+  // blob/master/backend/api/filter.proto)).
   string filter = 5;
 }
 
@@ -245,14 +257,15 @@ message RunDetail {
 }
 
 message RunMetric {
-  // Required. The user defined name of the metric. It must between 1 and 63 characters
-  // long and must conform to the following regular expression:
+  // Required. The user defined name of the metric. It must between 1 and 63
+  // characters long and must conform to the following regular expression:
   // `[a-z]([-a-z0-9]*[a-z0-9])?`.
   string name = 1;
 
-  // Required. The runtime node ID which reports the metric. The node ID can be found in
-  // the RunDetail.workflow.Status. Metric with same (node_id, name)
-  // are considerd as duplicate. Only the first reporting will be recorded. Max length is 128.
+  // Required. The runtime node ID which reports the metric. The node ID can be
+  // found in the RunDetail.workflow.Status. Metric with same (node_id, name)
+  // are considerd as duplicate. Only the first reporting will be recorded. Max
+  // length is 128.
   string node_id = 2;
 
   oneof value {
diff --git a/backend/api/swagger/experiment.swagger.json b/backend/api/swagger/experiment.swagger.json
index 231960c43c7d..2c1e31bff018 100644
--- a/backend/api/swagger/experiment.swagger.json
+++ b/backend/api/swagger/experiment.swagger.json
@@ -55,7 +55,7 @@
           },
           {
             "name": "filter",
-            "description": "A base-64 encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
+            "description": "A url-encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
             "in": "query",
             "required": false,
             "type": "string"
diff --git a/backend/api/swagger/job.swagger.json b/backend/api/swagger/job.swagger.json
index 7e4ffb27192f..adfd13f0f2f7 100644
--- a/backend/api/swagger/job.swagger.json
+++ b/backend/api/swagger/job.swagger.json
@@ -62,7 +62,9 @@
             "enum": [
               "UNKNOWN_RESOURCE_TYPE",
               "EXPERIMENT",
-              "JOB"
+              "JOB",
+              "PIPELINE",
+              "PIPELINE_VERSION"
             ],
             "default": "UNKNOWN_RESOURCE_TYPE"
           },
@@ -75,7 +77,7 @@
           },
           {
             "name": "filter",
-            "description": "A base-64 encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
+            "description": "A url-encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
             "in": "query",
             "required": false,
             "type": "string"
@@ -266,7 +268,7 @@
         },
         "cron": {
           "type": "string",
-          "title": "The cron string. For details how to compose a cron, visit ttps://en.wikipedia.org/wiki/Cron"
+          "title": "The cron string. For details how to compose a cron, visit\nttps://en.wikipedia.org/wiki/Cron"
         }
       },
       "title": "CronSchedule allow scheduling the job with unix-like cron"
@@ -456,7 +458,9 @@
       "enum": [
         "UNKNOWN_RESOURCE_TYPE",
         "EXPERIMENT",
-        "JOB"
+        "JOB",
+        "PIPELINE",
+        "PIPELINE_VERSION"
       ],
       "default": "UNKNOWN_RESOURCE_TYPE"
     },
diff --git a/backend/api/swagger/kfp_api_single_file.swagger.json b/backend/api/swagger/kfp_api_single_file.swagger.json
index 88c96c352cf2..124fee5c6aef 100644
--- a/backend/api/swagger/kfp_api_single_file.swagger.json
+++ b/backend/api/swagger/kfp_api_single_file.swagger.json
@@ -63,7 +63,9 @@
             "enum": [
               "UNKNOWN_RESOURCE_TYPE",
               "EXPERIMENT",
-              "JOB"
+              "JOB",
+              "PIPELINE",
+              "PIPELINE_VERSION"
             ],
             "default": "UNKNOWN_RESOURCE_TYPE"
           },
@@ -76,7 +78,7 @@
           },
           {
             "name": "filter",
-            "description": "A base-64 encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
+            "description": "A url-encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
             "in": "query",
             "required": false,
             "type": "string"
@@ -344,7 +346,7 @@
     },
     "/apis/v1beta1/runs/{run_id}:reportMetrics": {
       "post": {
-        "summary": "ReportRunMetrics reports metrics of a run. Each metric is reported in its\nown transaction, so this API accepts partial failures. Metric can be uniquely\nidentified by (run_id, node_id, name). Duplicate reporting will be\nignored by the API. First reporting wins.",
+        "summary": "ReportRunMetrics reports metrics of a run. Each metric is reported in its\nown transaction, so this API accepts partial failures. Metric can be\nuniquely identified by (run_id, node_id, name). Duplicate reporting will be\nignored by the API. First reporting wins.",
         "operationId": "ReportRunMetrics",
         "responses": {
           "200": {
@@ -429,7 +431,9 @@
             "enum": [
               "UNKNOWN_RESOURCE_TYPE",
               "EXPERIMENT",
-              "JOB"
+              "JOB",
+              "PIPELINE",
+              "PIPELINE_VERSION"
             ],
             "default": "UNKNOWN_RESOURCE_TYPE"
           },
@@ -442,7 +446,7 @@
           },
           {
             "name": "filter",
-            "description": "A base-64 encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
+            "description": "A url-encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
             "in": "query",
             "required": false,
             "type": "string"
@@ -646,7 +650,7 @@
           },
           {
             "name": "filter",
-            "description": "A base-64 encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
+            "description": "A url-encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
             "in": "query",
             "required": false,
             "type": "string"
@@ -815,7 +819,7 @@
           },
           {
             "name": "filter",
-            "description": "A base-64 encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
+            "description": "A url-encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
             "in": "query",
             "required": false,
             "type": "string"
@@ -1163,7 +1167,9 @@
       "enum": [
         "UNKNOWN_RESOURCE_TYPE",
         "EXPERIMENT",
-        "JOB"
+        "JOB",
+        "PIPELINE",
+        "PIPELINE_VERSION"
       ],
       "default": "UNKNOWN_RESOURCE_TYPE"
     },
@@ -1244,11 +1250,11 @@
       "properties": {
         "name": {
           "type": "string",
-          "description": "Required. The user defined name of the metric. It must between 1 and 63 characters\nlong and must conform to the following regular expression:\n`[a-z]([-a-z0-9]*[a-z0-9])?`."
+          "description": "Required. The user defined name of the metric. It must between 1 and 63\ncharacters long and must conform to the following regular expression:\n`[a-z]([-a-z0-9]*[a-z0-9])?`."
         },
         "node_id": {
           "type": "string",
-          "description": "Required. The runtime node ID which reports the metric. The node ID can be found in\nthe RunDetail.workflow.Status. Metric with same (node_id, name)\nare considerd as duplicate. Only the first reporting will be recorded. Max length is 128."
+          "description": "Required. The runtime node ID which reports the metric. The node ID can be\nfound in the RunDetail.workflow.Status. Metric with same (node_id, name)\nare considerd as duplicate. Only the first reporting will be recorded. Max\nlength is 128."
         },
         "number_value": {
           "type": "number",
@@ -1319,7 +1325,7 @@
         },
         "cron": {
           "type": "string",
-          "title": "The cron string. For details how to compose a cron, visit ttps://en.wikipedia.org/wiki/Cron"
+          "title": "The cron string. For details how to compose a cron, visit\nttps://en.wikipedia.org/wiki/Cron"
         }
       },
       "title": "CronSchedule allow scheduling the job with unix-like cron"
@@ -1447,6 +1453,24 @@
         }
       }
     },
+    "apiListPipelineVersionsResponse": {
+      "type": "object",
+      "properties": {
+        "versions": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/apiPipelineVersion"
+          }
+        },
+        "next_page_token": {
+          "type": "string"
+        },
+        "total_size": {
+          "type": "integer",
+          "format": "int32"
+        }
+      }
+    },
     "apiListPipelinesResponse": {
       "type": "object",
       "properties": {
@@ -1490,15 +1514,60 @@
           "items": {
             "$ref": "#/definitions/apiParameter"
           },
-          "description": "Output. The input parameters for this pipeline."
+          "description": "Output. The input parameters for this pipeline.\nTODO(jingzhang36): replace this parameters field with the parameters field\ninside PipelineVersion when all usage of the former has been changed to use\nthe latter."
         },
         "url": {
           "$ref": "#/definitions/apiUrl",
-          "description": "The URL to the source of the pipeline. This is required when creating the\npipeine through CreatePipeline API."
+          "description": "The URL to the source of the pipeline. This is required when creating the\npipeine through CreatePipeline API.\nTODO(jingzhang36): replace this url field with the code_source_urls field\ninside PipelineVersion when all usage of the former has been changed to use\nthe latter."
         },
         "error": {
           "type": "string",
           "description": "In case any error happens retrieving a pipeline field, only pipeline ID\nand the error message is returned. Client has the flexibility of choosing\nhow to handle error. This is especially useful during listing call."
+        },
+        "default_version": {
+          "$ref": "#/definitions/apiPipelineVersion",
+          "title": "Output only. The default version of the pipeline. As of now, the latest\nversion is used as default. (In the future, if desired by customers, we\ncan allow them to set default version.)",
+          "readOnly": true
+        }
+      }
+    },
+    "apiPipelineVersion": {
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "Output. Unique version ID. Generated by API server."
+        },
+        "name": {
+          "type": "string",
+          "description": "Optional input field. Version name provided by user."
+        },
+        "created_at": {
+          "type": "string",
+          "format": "date-time",
+          "description": "Output. The time this pipeline version is created."
+        },
+        "parameters": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/apiParameter"
+          },
+          "description": "Output. The input parameters for this pipeline."
+        },
+        "code_source_url": {
+          "type": "string",
+          "description": "Input. Optional. Pipeline version code source."
+        },
+        "package_url": {
+          "$ref": "#/definitions/apiUrl",
+          "description": "Input. Required. Pipeline version package url.\nWhe calling CreatePipelineVersion API method, need to provide one package\nfile location."
+        },
+        "resource_references": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/apiResourceReference"
+          },
+          "description": "Input. Required. E.g., specify which pipeline this pipeline version belongs\nto."
         }
       }
     },
diff --git a/backend/api/swagger/pipeline.swagger.json b/backend/api/swagger/pipeline.swagger.json
index 5f77efa2d1ea..4b075c056021 100644
--- a/backend/api/swagger/pipeline.swagger.json
+++ b/backend/api/swagger/pipeline.swagger.json
@@ -55,7 +55,7 @@
           },
           {
             "name": "filter",
-            "description": "A base-64 encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
+            "description": "A url-encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
             "in": "query",
             "required": false,
             "type": "string"
@@ -194,6 +194,24 @@
         }
       }
     },
+    "apiListPipelineVersionsResponse": {
+      "type": "object",
+      "properties": {
+        "versions": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/apiPipelineVersion"
+          }
+        },
+        "next_page_token": {
+          "type": "string"
+        },
+        "total_size": {
+          "type": "integer",
+          "format": "int32"
+        }
+      }
+    },
     "apiListPipelinesResponse": {
       "type": "object",
       "properties": {
@@ -248,18 +266,112 @@
           "items": {
             "$ref": "#/definitions/apiParameter"
           },
-          "description": "Output. The input parameters for this pipeline."
+          "description": "Output. The input parameters for this pipeline.\nTODO(jingzhang36): replace this parameters field with the parameters field\ninside PipelineVersion when all usage of the former has been changed to use\nthe latter."
         },
         "url": {
           "$ref": "#/definitions/apiUrl",
-          "description": "The URL to the source of the pipeline. This is required when creating the\npipeine through CreatePipeline API."
+          "description": "The URL to the source of the pipeline. This is required when creating the\npipeine through CreatePipeline API.\nTODO(jingzhang36): replace this url field with the code_source_urls field\ninside PipelineVersion when all usage of the former has been changed to use\nthe latter."
         },
         "error": {
           "type": "string",
           "description": "In case any error happens retrieving a pipeline field, only pipeline ID\nand the error message is returned. Client has the flexibility of choosing\nhow to handle error. This is especially useful during listing call."
+        },
+        "default_version": {
+          "$ref": "#/definitions/apiPipelineVersion",
+          "title": "Output only. The default version of the pipeline. As of now, the latest\nversion is used as default. (In the future, if desired by customers, we\ncan allow them to set default version.)",
+          "readOnly": true
         }
       }
     },
+    "apiPipelineVersion": {
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "Output. Unique version ID. Generated by API server."
+        },
+        "name": {
+          "type": "string",
+          "description": "Optional input field. Version name provided by user."
+        },
+        "created_at": {
+          "type": "string",
+          "format": "date-time",
+          "description": "Output. The time this pipeline version is created."
+        },
+        "parameters": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/apiParameter"
+          },
+          "description": "Output. The input parameters for this pipeline."
+        },
+        "code_source_url": {
+          "type": "string",
+          "description": "Input. Optional. Pipeline version code source."
+        },
+        "package_url": {
+          "$ref": "#/definitions/apiUrl",
+          "description": "Input. Required. Pipeline version package url.\nWhe calling CreatePipelineVersion API method, need to provide one package\nfile location."
+        },
+        "resource_references": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/apiResourceReference"
+          },
+          "description": "Input. Required. E.g., specify which pipeline this pipeline version belongs\nto."
+        }
+      }
+    },
+    "apiRelationship": {
+      "type": "string",
+      "enum": [
+        "UNKNOWN_RELATIONSHIP",
+        "OWNER",
+        "CREATOR"
+      ],
+      "default": "UNKNOWN_RELATIONSHIP"
+    },
+    "apiResourceKey": {
+      "type": "object",
+      "properties": {
+        "type": {
+          "$ref": "#/definitions/apiResourceType",
+          "description": "The type of the resource that referred to."
+        },
+        "id": {
+          "type": "string",
+          "description": "The ID of the resource that referred to."
+        }
+      }
+    },
+    "apiResourceReference": {
+      "type": "object",
+      "properties": {
+        "key": {
+          "$ref": "#/definitions/apiResourceKey"
+        },
+        "name": {
+          "type": "string",
+          "description": "The name of the resource that referred to."
+        },
+        "relationship": {
+          "$ref": "#/definitions/apiRelationship",
+          "description": "Required field. The relationship from referred resource to the object."
+        }
+      }
+    },
+    "apiResourceType": {
+      "type": "string",
+      "enum": [
+        "UNKNOWN_RESOURCE_TYPE",
+        "EXPERIMENT",
+        "JOB",
+        "PIPELINE",
+        "PIPELINE_VERSION"
+      ],
+      "default": "UNKNOWN_RESOURCE_TYPE"
+    },
     "apiStatus": {
       "type": "object",
       "properties": {
diff --git a/backend/api/swagger/run.swagger.json b/backend/api/swagger/run.swagger.json
index d944bfa54e95..863278a88a8b 100644
--- a/backend/api/swagger/run.swagger.json
+++ b/backend/api/swagger/run.swagger.json
@@ -62,7 +62,9 @@
             "enum": [
               "UNKNOWN_RESOURCE_TYPE",
               "EXPERIMENT",
-              "JOB"
+              "JOB",
+              "PIPELINE",
+              "PIPELINE_VERSION"
             ],
             "default": "UNKNOWN_RESOURCE_TYPE"
           },
@@ -75,7 +77,7 @@
           },
           {
             "name": "filter",
-            "description": "A base-64 encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
+            "description": "A url-encoded, JSON-serialized Filter protocol buffer (see\nfilter.proto).",
             "in": "query",
             "required": false,
             "type": "string"
@@ -343,7 +345,7 @@
     },
     "/apis/v1beta1/runs/{run_id}:reportMetrics": {
       "post": {
-        "summary": "ReportRunMetrics reports metrics of a run. Each metric is reported in its\nown transaction, so this API accepts partial failures. Metric can be uniquely\nidentified by (run_id, node_id, name). Duplicate reporting will be\nignored by the API. First reporting wins.",
+        "summary": "ReportRunMetrics reports metrics of a run. Each metric is reported in its\nown transaction, so this API accepts partial failures. Metric can be\nuniquely identified by (run_id, node_id, name). Duplicate reporting will be\nignored by the API. First reporting wins.",
         "operationId": "ReportRunMetrics",
         "responses": {
           "200": {
@@ -584,7 +586,9 @@
       "enum": [
         "UNKNOWN_RESOURCE_TYPE",
         "EXPERIMENT",
-        "JOB"
+        "JOB",
+        "PIPELINE",
+        "PIPELINE_VERSION"
       ],
       "default": "UNKNOWN_RESOURCE_TYPE"
     },
@@ -665,11 +669,11 @@
       "properties": {
         "name": {
           "type": "string",
-          "description": "Required. The user defined name of the metric. It must between 1 and 63 characters\nlong and must conform to the following regular expression:\n`[a-z]([-a-z0-9]*[a-z0-9])?`."
+          "description": "Required. The user defined name of the metric. It must between 1 and 63\ncharacters long and must conform to the following regular expression:\n`[a-z]([-a-z0-9]*[a-z0-9])?`."
         },
         "node_id": {
           "type": "string",
-          "description": "Required. The runtime node ID which reports the metric. The node ID can be found in\nthe RunDetail.workflow.Status. Metric with same (node_id, name)\nare considerd as duplicate. Only the first reporting will be recorded. Max length is 128."
+          "description": "Required. The runtime node ID which reports the metric. The node ID can be\nfound in the RunDetail.workflow.Status. Metric with same (node_id, name)\nare considerd as duplicate. Only the first reporting will be recorded. Max\nlength is 128."
         },
         "number_value": {
           "type": "number",
diff --git a/backend/src/apiserver/BUILD.bazel b/backend/src/apiserver/BUILD.bazel
index 8489d944f59c..eaa254f7a64c 100644
--- a/backend/src/apiserver/BUILD.bazel
+++ b/backend/src/apiserver/BUILD.bazel
@@ -26,7 +26,6 @@ go_library(
         "@com_github_grpc_ecosystem_grpc_gateway//runtime:go_default_library",
         "@com_github_jinzhu_gorm//:go_default_library",
         "@com_github_jinzhu_gorm//dialects/sqlite:go_default_library",
-        "@com_github_masterminds_squirrel//:go_default_library",
         "@com_github_minio_minio_go//:go_default_library",
         "@com_github_spf13_viper//:go_default_library",
         "@io_k8s_client_go//kubernetes/typed/core/v1:go_default_library",
diff --git a/backend/src/apiserver/client/sql.go b/backend/src/apiserver/client/sql.go
index 949de2164910..a7a93bce7bf0 100644
--- a/backend/src/apiserver/client/sql.go
+++ b/backend/src/apiserver/client/sql.go
@@ -21,13 +21,18 @@ import (
 )
 
 func CreateMySQLConfig(user, password string, mysqlServiceHost string,
-		mysqlServicePort string, dbName string) *mysql.Config {
+		mysqlServicePort string, dbName string, mysqlGroupConcatMaxLen string) *mysql.Config {
 	return &mysql.Config{
 		User:                 user,
 		Passwd:               password,
 		Net:                  "tcp",
 		Addr:                 fmt.Sprintf("%s:%s", mysqlServiceHost, mysqlServicePort),
-		Params:               map[string]string{"charset": "utf8", "parseTime": "True", "loc": "Local"},
+		Params:               map[string]string{
+									"charset": "utf8",
+									"parseTime": "True",
+									"loc": "Local",
+									"group_concat_max_len": mysqlGroupConcatMaxLen,
+								},
 		DBName:               dbName,
 		AllowNativePasswords: true,
 	}
diff --git a/backend/src/apiserver/client_manager.go b/backend/src/apiserver/client_manager.go
index 4a81fbf6e784..179e9e728a51 100644
--- a/backend/src/apiserver/client_manager.go
+++ b/backend/src/apiserver/client_manager.go
@@ -44,6 +44,7 @@ const (
 	mysqlUser        = "DBConfig.User"
 	mysqlPassword    = "DBConfig.Password"
 	mysqlDBName      = "DBConfig.DBName"
+	mysqlGroupConcatMaxLen 	= "DBConfig.GroupConcatMaxLen"
 
 	visualizationServiceHost = "ML_PIPELINE_VISUALIZATIONSERVER_SERVICE_HOST"
 	visualizationServicePort = "ML_PIPELINE_VISUALIZATIONSERVER_SERVICE_PORT"
@@ -204,7 +205,7 @@ func initDBClient(initConnectionTimeout time.Duration) *storage.DB {
 		glog.Fatalf("Failed to initialize the databases.")
 	}
 
-	response = db.Model(&model.ResourceReference{}).ModifyColumn("Payload", "longtext")
+	response = db.Model(&model.ResourceReference{}).ModifyColumn("Payload", "longtext not null")
 	if response.Error != nil {
 		glog.Fatalf("Failed to update the resource reference payload type. Error: %s", response.Error)
 	}
@@ -226,6 +227,11 @@ func initDBClient(initConnectionTimeout time.Duration) *storage.DB {
 		initPipelineVersionsFromPipelines(db)
 	}
 
+	response = db.Model(&model.Pipeline{}).ModifyColumn("Description", "longtext not null")
+	if response.Error != nil {
+		glog.Fatalf("Failed to update pipeline description type. Error: %s", response.Error)
+	}
+
 	return storage.NewDB(db.DB(), storage.NewMySQLDialect())
 }
 
@@ -237,7 +243,9 @@ func initMysql(driverName string, initConnectionTimeout time.Duration) string {
 		common.GetStringConfigWithDefault(mysqlPassword, ""),
 		common.GetStringConfigWithDefault(mysqlServiceHost, "mysql"),
 		common.GetStringConfigWithDefault(mysqlServicePort, "3306"),
-		"")
+		"",
+		common.GetStringConfigWithDefault(mysqlGroupConcatMaxLen, "1024"),
+	)
 
 	var db *sql.DB
 	var err error
diff --git a/backend/src/apiserver/common/const.go b/backend/src/apiserver/common/const.go
index a1fcd849b5e2..5a27fa7ed759 100644
--- a/backend/src/apiserver/common/const.go
+++ b/backend/src/apiserver/common/const.go
@@ -23,10 +23,11 @@ type ResourceType string
 type Relationship string
 
 const (
-	Experiment ResourceType = "Experiment"
-	Job        ResourceType = "Job"
-	Run        ResourceType = "Run"
-	Pipeline   ResourceType = "pipeline"
+	Experiment      ResourceType = "Experiment"
+	Job             ResourceType = "Job"
+	Run             ResourceType = "Run"
+	Pipeline        ResourceType = "pipeline"
+	PipelineVersion ResourceType = "PipelineVersion"
 )
 
 const (
@@ -40,6 +41,8 @@ func ToModelResourceType(apiType api.ResourceType) (ResourceType, error) {
 		return Experiment, nil
 	case api.ResourceType_JOB:
 		return Job, nil
+	case api.ResourceType_PIPELINE_VERSION:
+		return PipelineVersion, nil
 	default:
 		return "", util.NewInvalidInputError("Unsupported resource type: %s", api.ResourceType_name[int32(apiType)])
 	}
diff --git a/backend/src/apiserver/config/config.json b/backend/src/apiserver/config/config.json
index 15ce69a2980b..7cf3bff7576b 100644
--- a/backend/src/apiserver/config/config.json
+++ b/backend/src/apiserver/config/config.json
@@ -2,7 +2,8 @@
   "DBConfig": {
     "DriverName": "mysql",
     "DataSourceName": "",
-    "DBName": "mlpipeline"
+    "DBName": "mlpipeline",
+    "GroupConcatMaxLen": "4194304"
   },
   "ObjectStoreConfig":{
     "AccessKey": "minio",
diff --git a/backend/src/apiserver/config/sample_config.json b/backend/src/apiserver/config/sample_config.json
index e61cf04dc95d..57077ccff8b6 100644
--- a/backend/src/apiserver/config/sample_config.json
+++ b/backend/src/apiserver/config/sample_config.json
@@ -1,27 +1,32 @@
 [
   {
-    "name":"[Sample] ML - XGBoost - Training with Confusion Matrix",
-    "description":"A trainer that does end-to-end distributed training for XGBoost models. For source code, refer to https://github.com/kubeflow/pipelines/tree/master/samples/core/xgboost-spark",
-    "file":"/samples/core/xgboost_training_cm/xgboost_training_cm.py.tar.gz"
+    "name": "[Sample] ML - XGBoost - Training with Confusion Matrix",
+    "description": "[GCP Permission requirements](https://github.com/kubeflow/pipelines/tree/master/samples/core/xgboost_training_cm#requirements). A trainer that does end-to-end distributed training for XGBoost models. [source code](https://github.com/kubeflow/pipelines/tree/master/samples/core/xgboost_training_cm)",
+    "file": "/samples/core/xgboost_training_cm/xgboost_training_cm.py.tar.gz"
   },
   {
-    "name":"[Sample] Basic - Sequential execution",
-    "description":"A pipeline with two sequential steps. For source code, refer to https://github.com/kubeflow/pipelines/blob/master/samples/core/sequential/sequential.py",
-    "file":"/samples/core/sequential/sequential.py.tar.gz"
+    "name": "[Sample] Unified DSL - Taxi Tip Prediction Model Trainer",
+    "description": "[GCP Permission requirements](https://github.com/kubeflow/pipelines/blob/master/samples/contrib/parameterized_tfx_oss#permission). Example pipeline that does classification with model analysis based on a public tax cab BigQuery dataset. [source code](https://github.com/kubeflow/pipelines/tree/master/samples/contrib/parameterized_tfx_oss)",
+    "file": "/samples/contrib/parameterized_tfx_oss/parameterized_tfx_oss.tar.gz"
   },
   {
-    "name":"[Sample] Basic - Parallel execution",
-    "description":"A pipeline that downloads two messages in parallel and prints the concatenated result. For source code, refer to https://github.com/kubeflow/pipelines/blob/master/samples/core/parallel_join/parallel_join.py",
-    "file":"/samples/core/parallel_join/parallel_join.py.tar.gz"
+    "name": "[Sample] Basic - Sequential execution",
+    "description": "A pipeline with two sequential steps. [source code](https://github.com/kubeflow/pipelines/blob/master/samples/core/sequential/sequential.py)",
+    "file": "/samples/core/sequential/sequential.py.tar.gz"
   },
   {
-    "name":"[Sample] Basic - Conditional execution",
-    "description":"A pipeline shows how to use dsl.Condition. For source code, refer to https://github.com/kubeflow/pipelines/blob/master/samples/core/condition/condition.py",
-    "file":"/samples/core/condition/condition.py.tar.gz"
+    "name": "[Sample] Basic - Parallel execution",
+    "description": "A pipeline that downloads two messages in parallel and prints the concatenated result. [source code](https://github.com/kubeflow/pipelines/blob/master/samples/core/parallel_join/parallel_join.py)",
+    "file": "/samples/core/parallel_join/parallel_join.py.tar.gz"
   },
   {
-    "name":"[Sample] Basic - Exit Handler",
-    "description":"A pipeline that downloads a message and prints it out. Exit Handler will run at the end. For source code, refer to https://github.com/kubeflow/pipelines/blob/master/samples/core/exit_handler/exit_handler.py",
-    "file":"/samples/core/exit_handler/exit_handler.py.tar.gz"
+    "name": "[Sample] Basic - Conditional execution",
+    "description": "A pipeline shows how to use dsl.Condition. [source code](https://github.com/kubeflow/pipelines/blob/master/samples/core/condition/condition.py)",
+    "file": "/samples/core/condition/condition.py.tar.gz"
+  },
+  {
+    "name": "[Sample] Basic - Exit Handler",
+    "description": "A pipeline that downloads a message and prints it out. Exit Handler will run at the end. [source code](https://github.com/kubeflow/pipelines/blob/master/samples/core/exit_handler/exit_handler.py)",
+    "file": "/samples/core/exit_handler/exit_handler.py.tar.gz"
   }
 ]
diff --git a/backend/src/apiserver/model/BUILD.bazel b/backend/src/apiserver/model/BUILD.bazel
index e6a15d7878f5..366879d57580 100644
--- a/backend/src/apiserver/model/BUILD.bazel
+++ b/backend/src/apiserver/model/BUILD.bazel
@@ -21,18 +21,13 @@ go_library(
 
 go_test(
     name = "go_default_test",
-    srcs = [
-        "pipeline_version_test.go",
-    ],
+    srcs = ["pipeline_version_test.go"],
+    embed = [":go_default_library"],
     importpath = "github.com/kubeflow/pipelines/backend/src/apiserver/model",
     visibility = ["//visibility:public"],
-    embed = [":go_default_library"],
     deps = [
         "//backend/api:go_default_library",
-        "//backend/src/apiserver/filter:go_default_library",
         "//backend/src/apiserver/list:go_default_library",
-        "@com_github_google_go_cmp//cmp:go_default_library",
-        "@com_github_google_go_cmp//cmp/cmpopts:go_default_library",
         "@com_github_masterminds_squirrel//:go_default_library",
         "@com_github_stretchr_testify//assert:go_default_library",
     ],
diff --git a/backend/src/apiserver/model/pipeline.go b/backend/src/apiserver/model/pipeline.go
index 5baec4caefce..08100e49ce19 100644
--- a/backend/src/apiserver/model/pipeline.go
+++ b/backend/src/apiserver/model/pipeline.go
@@ -30,7 +30,7 @@ type Pipeline struct {
 	UUID           string `gorm:"column:UUID; not null; primary_key"`
 	CreatedAtInSec int64  `gorm:"column:CreatedAtInSec; not null"`
 	Name           string `gorm:"column:Name; not null; unique"`
-	Description    string `gorm:"column:Description; not null"`
+	Description    string `gorm:"column:Description; not null; size:65535"` // Same as below, set size to large number so it will be stored as longtext
 	// TODO(jingzhang36): remove Parameters when no code is accessing this
 	// field. Should use PipelineVersion.Parameters instead.
 	/* Set size to 65535 so it will be stored as longtext. https://dev.mysql.com/doc/refman/8.0/en/column-count-limit.html */
diff --git a/backend/src/apiserver/resource/client_manager_fake.go b/backend/src/apiserver/resource/client_manager_fake.go
index a0e62ce9add6..2cbea55c72e2 100644
--- a/backend/src/apiserver/resource/client_manager_fake.go
+++ b/backend/src/apiserver/resource/client_manager_fake.go
@@ -25,6 +25,7 @@ import (
 
 const (
 	DefaultFakeUUID = "123e4567-e89b-12d3-a456-426655440000"
+	FakeUUIDOne     = "123e4567-e89b-12d3-a456-426655440001"
 )
 
 type FakeClientManager struct {
@@ -45,7 +46,7 @@ type FakeClientManager struct {
 }
 
 func NewFakeClientManager(time util.TimeInterface, uuid util.UUIDGeneratorInterface) (
-		*FakeClientManager, error) {
+	*FakeClientManager, error) {
 
 	if time == nil {
 		glog.Fatalf("The time parameter must not be null.") // Must never happen
diff --git a/backend/src/apiserver/resource/model_converter.go b/backend/src/apiserver/resource/model_converter.go
index 82f6d0b9e4e9..8f52b8fccfa1 100644
--- a/backend/src/apiserver/resource/model_converter.go
+++ b/backend/src/apiserver/resource/model_converter.go
@@ -37,17 +37,17 @@ func (r *ResourceManager) ToModelRunMetric(metric *api.RunMetric, runUUID string
 // The input run might not contain workflowSpecManifest, but instead a pipeline ID.
 // The caller would retrieve workflowSpecManifest and pass in.
 func (r *ResourceManager) ToModelRunDetail(run *api.Run, runId string, workflow *util.Workflow, workflowSpecManifest string) (*model.RunDetail, error) {
-	params, err := toModelParameters(run.PipelineSpec.Parameters)
+	params, err := toModelParameters(run.GetPipelineSpec().GetParameters())
 	if err != nil {
 		return nil, util.Wrap(err, "Unable to parse the parameter.")
 	}
-	resourceReferences, err := r.toModelResourceReferences(runId, common.Run, run.ResourceReferences)
+	resourceReferences, err := r.toModelResourceReferences(runId, common.Run, run.GetResourceReferences())
 	if err != nil {
 		return nil, util.Wrap(err, "Unable to convert resource references.")
 	}
 	var pipelineName string
-	if run.PipelineSpec.GetPipelineId() != "" {
-		pipelineName, err = r.getResourceName(common.Pipeline, run.PipelineSpec.GetPipelineId())
+	if run.GetPipelineSpec().GetPipelineId() != "" {
+		pipelineName, err = r.getResourceName(common.Pipeline, run.GetPipelineSpec().GetPipelineId())
 		if err != nil {
 			return nil, util.Wrap(err, "Error getting the pipeline name")
 		}
@@ -63,7 +63,7 @@ func (r *ResourceManager) ToModelRunDetail(run *api.Run, runId string, workflow
 			Description:        run.Description,
 			ResourceReferences: resourceReferences,
 			PipelineSpec: model.PipelineSpec{
-				PipelineId:           run.PipelineSpec.GetPipelineId(),
+				PipelineId:           run.GetPipelineSpec().GetPipelineId(),
 				PipelineName:         pipelineName,
 				WorkflowSpecManifest: workflowSpecManifest,
 				Parameters:           params,
@@ -76,17 +76,17 @@ func (r *ResourceManager) ToModelRunDetail(run *api.Run, runId string, workflow
 }
 
 func (r *ResourceManager) ToModelJob(job *api.Job, swf *util.ScheduledWorkflow, workflowSpecManifest string) (*model.Job, error) {
-	params, err := toModelParameters(job.PipelineSpec.Parameters)
+	params, err := toModelParameters(job.GetPipelineSpec().GetParameters())
 	if err != nil {
 		return nil, util.Wrap(err, "Error parsing the input job.")
 	}
-	resourceReferences, err := r.toModelResourceReferences(string(swf.UID), common.Job, job.ResourceReferences)
+	resourceReferences, err := r.toModelResourceReferences(string(swf.UID), common.Job, job.GetResourceReferences())
 	if err != nil {
 		return nil, util.Wrap(err, "Error to convert resource references.")
 	}
 	var pipelineName string
-	if job.PipelineSpec.GetPipelineId() != "" {
-		pipelineName, err = r.getResourceName(common.Pipeline, job.PipelineSpec.GetPipelineId())
+	if job.GetPipelineSpec().GetPipelineId() != "" {
+		pipelineName, err = r.getResourceName(common.Pipeline, job.GetPipelineSpec().GetPipelineId())
 		if err != nil {
 			return nil, util.Wrap(err, "Error getting the pipeline name")
 		}
@@ -103,7 +103,7 @@ func (r *ResourceManager) ToModelJob(job *api.Job, swf *util.ScheduledWorkflow,
 		MaxConcurrency:     job.MaxConcurrency,
 		ResourceReferences: resourceReferences,
 		PipelineSpec: model.PipelineSpec{
-			PipelineId:           job.PipelineSpec.GetPipelineId(),
+			PipelineId:           job.GetPipelineSpec().GetPipelineId(),
 			PipelineName:         pipelineName,
 			WorkflowSpecManifest: workflowSpecManifest,
 			Parameters:           params,
@@ -238,6 +238,12 @@ func (r *ResourceManager) getResourceName(resourceType common.ResourceType, reso
 			return "", util.Wrap(err, "Referred run not found.")
 		}
 		return run.DisplayName, nil
+	case common.PipelineVersion:
+		version, err := r.GetPipelineVersion(resourceId)
+		if err != nil {
+			return "", util.Wrap(err, "Referred pipeline version not found.")
+		}
+		return version.Name, nil
 	default:
 		return "", util.NewInvalidInputError("Unsupported resource type: %s", string(resourceType))
 	}
diff --git a/backend/src/apiserver/resource/resource_manager.go b/backend/src/apiserver/resource/resource_manager.go
index 57e617d1b8c4..b0f43f213621 100644
--- a/backend/src/apiserver/resource/resource_manager.go
+++ b/backend/src/apiserver/resource/resource_manager.go
@@ -230,10 +230,16 @@ func (r *ResourceManager) GetPipelineTemplate(pipelineId string) ([]byte, error)
 }
 
 func (r *ResourceManager) CreateRun(apiRun *api.Run) (*model.RunDetail, error) {
-	// Get workflow from pipeline spec, which might be pipeline ID or an argo workflow
+	// Get workflow from either of the two places:
+	// (1) raw pipeline manifest in pipeline_spec
+	// (2) pipeline version in resource_references
+	var workflowSpecManifestBytes []byte
 	workflowSpecManifestBytes, err := r.getWorkflowSpecBytes(apiRun.GetPipelineSpec())
 	if err != nil {
-		return nil, util.Wrap(err, "Failed to fetch workflow spec.")
+		workflowSpecManifestBytes, err = r.getWorkflowSpecBytesFromPipelineVersion(apiRun.GetResourceReferences())
+		if err != nil {
+			return nil, util.Wrap(err, "Failed to fetch workflow spec.")
+		}
 	}
 	uuid, err := r.uuid.NewRandom()
 	if err != nil {
@@ -282,7 +288,7 @@ func (r *ResourceManager) CreateRun(apiRun *api.Run) (*model.RunDetail, error) {
 	}
 
 	// Add a reference to the default experiment if run does not already have a containing experiment
-	ref, err := r.getDefaultExperimentIfNoExperiment(apiRun.ResourceReferences)
+	ref, err := r.getDefaultExperimentIfNoExperiment(apiRun.GetResourceReferences())
 	if err != nil {
 		return nil, err
 	}
@@ -441,11 +447,18 @@ func (r *ResourceManager) GetJob(id string) (*model.Job, error) {
 }
 
 func (r *ResourceManager) CreateJob(apiJob *api.Job) (*model.Job, error) {
-	// Get workflow from pipeline spec, which might be pipeline ID or an argo workflow
+	// Get workflow from either of the two places:
+	// (1) raw pipeline manifest in pipeline_spec
+	// (2) pipeline version in resource_references
+	var workflowSpecManifestBytes []byte
 	workflowSpecManifestBytes, err := r.getWorkflowSpecBytes(apiJob.GetPipelineSpec())
 	if err != nil {
-		return nil, util.Wrap(err, "Failed to fetch workflow spec.")
+		workflowSpecManifestBytes, err = r.getWorkflowSpecBytesFromPipelineVersion(apiJob.GetResourceReferences())
+		if err != nil {
+			return nil, util.Wrap(err, "Failed to fetch workflow spec.")
+		}
 	}
+
 	var workflow util.Workflow
 	err = json.Unmarshal(workflowSpecManifestBytes, &workflow)
 	if err != nil {
@@ -454,7 +467,7 @@ func (r *ResourceManager) CreateJob(apiJob *api.Job) (*model.Job, error) {
 	}
 
 	// Verify no additional parameter provided
-	err = workflow.VerifyParameters(toParametersMap(apiJob.PipelineSpec.Parameters))
+	err = workflow.VerifyParameters(toParametersMap(apiJob.GetPipelineSpec().GetParameters()))
 	if err != nil {
 		return nil, util.Wrap(err, "Create job failed")
 	}
@@ -473,7 +486,7 @@ func (r *ResourceManager) CreateJob(apiJob *api.Job) (*model.Job, error) {
 			MaxConcurrency: &apiJob.MaxConcurrency,
 			Trigger:        *toCRDTrigger(apiJob.Trigger),
 			Workflow: &scheduledworkflow.WorkflowResource{
-				Parameters: toCRDParameter(apiJob.PipelineSpec.Parameters),
+				Parameters: toCRDParameter(apiJob.GetPipelineSpec().GetParameters()),
 				Spec:       workflow.Spec,
 			},
 		},
@@ -484,12 +497,12 @@ func (r *ResourceManager) CreateJob(apiJob *api.Job) (*model.Job, error) {
 	}
 
 	// Add a reference to the default experiment if run does not already have a containing experiment
-	ref, err := r.getDefaultExperimentIfNoExperiment(apiJob.ResourceReferences)
+	ref, err := r.getDefaultExperimentIfNoExperiment(apiJob.GetResourceReferences())
 	if err != nil {
 		return nil, err
 	}
 	if ref != nil {
-		apiJob.ResourceReferences = append(apiJob.ResourceReferences, ref)
+		apiJob.ResourceReferences = append(apiJob.GetResourceReferences(), ref)
 	}
 
 	job, err := r.ToModelJob(apiJob, util.NewScheduledWorkflow(newScheduledWorkflow), string(workflowSpecManifestBytes))
@@ -688,6 +701,8 @@ func (r *ResourceManager) checkRunExist(runID string) (*model.RunDetail, error)
 }
 
 func (r *ResourceManager) getWorkflowSpecBytes(spec *api.PipelineSpec) ([]byte, error) {
+	// TODO(jingzhang36): after FE is enabled to use pipeline version to create
+	// run, we'll only check for the raw manifest in pipeline_spec.
 	if spec.GetPipelineId() != "" {
 		var workflow util.Workflow
 		err := r.objectStore.GetFromYamlFile(&workflow, storage.CreatePipelinePath(spec.GetPipelineId()))
@@ -702,6 +717,25 @@ func (r *ResourceManager) getWorkflowSpecBytes(spec *api.PipelineSpec) ([]byte,
 	return nil, util.NewInvalidInputError("Please provide a valid pipeline spec")
 }
 
+func (r *ResourceManager) getWorkflowSpecBytesFromPipelineVersion(references []*api.ResourceReference) ([]byte, error) {
+	var pipelineVersionId = ""
+	for _, reference := range references {
+		if reference.Key.Type == api.ResourceType_PIPELINE_VERSION && reference.Relationship == api.Relationship_CREATOR {
+			pipelineVersionId = reference.Key.Id
+		}
+	}
+	if len(pipelineVersionId) == 0 {
+		return nil, util.NewInvalidInputError("No pipeline version.")
+	}
+	var workflow util.Workflow
+	err := r.objectStore.GetFromYamlFile(&workflow, storage.CreatePipelinePath(pipelineVersionId))
+	if err != nil {
+		return nil, util.Wrap(err, "Get pipeline YAML failed.")
+	}
+
+	return []byte(workflow.ToStringForStore()), nil
+}
+
 // Used to initialize the Experiment database with a default to be used for runs
 func (r *ResourceManager) CreateDefaultExperiment() (string, error) {
 	// First check that we don't already have a default experiment ID in the DB.
@@ -814,3 +848,100 @@ func (r *ResourceManager) MarkSampleLoaded() error {
 func (r *ResourceManager) getDefaultSA() string {
 	return common.GetStringConfigWithDefault(defaultPipelineRunnerServiceAccountEnvVar, defaultPipelineRunnerServiceAccount)
 }
+
+func (r *ResourceManager) CreatePipelineVersion(apiVersion *api.PipelineVersion, pipelineFile []byte) (*model.PipelineVersion, error) {
+	// Extract the parameters from the pipeline
+	params, err := util.GetParameters(pipelineFile)
+	if err != nil {
+		return nil, util.Wrap(err, "Create pipeline version failed")
+	}
+
+	// Extract pipeline id
+	var pipelineId = ""
+	for _, resourceReference := range apiVersion.ResourceReferences {
+		if resourceReference.Key.Type == api.ResourceType_PIPELINE && resourceReference.Relationship == api.Relationship_OWNER {
+			pipelineId = resourceReference.Key.Id
+		}
+	}
+	if len(pipelineId) == 0 {
+		return nil, util.Wrap(err, "Create pipeline version failed due to missing pipeline id")
+	}
+
+	// Construct model.PipelineVersion
+	version := &model.PipelineVersion{
+		Name:          apiVersion.Name,
+		PipelineId:    pipelineId,
+		Status:        model.PipelineVersionCreating,
+		Parameters:    params,
+		CodeSourceUrl: apiVersion.CodeSourceUrl,
+	}
+	version, err = r.pipelineStore.CreatePipelineVersion(version)
+	if err != nil {
+		return nil, util.Wrap(err, "Create pipeline version failed")
+	}
+
+	// Store the pipeline file
+	err = r.objectStore.AddFile(pipelineFile, storage.CreatePipelinePath(fmt.Sprint(version.UUID)))
+	if err != nil {
+		return nil, util.Wrap(err, "Create pipeline version failed")
+	}
+
+	// After pipeline version being created in DB and pipeline file being
+	// saved in minio server, set this pieline version to status ready.
+	version.Status = model.PipelineVersionReady
+	err = r.pipelineStore.UpdatePipelineVersionStatus(version.UUID, version.Status)
+	if err != nil {
+		return nil, util.Wrap(err, "Create pipeline version failed")
+	}
+
+	return version, nil
+}
+
+func (r *ResourceManager) GetPipelineVersion(versionId string) (*model.PipelineVersion, error) {
+	return r.pipelineStore.GetPipelineVersion(versionId)
+}
+
+func (r *ResourceManager) ListPipelineVersions(pipelineId string, opts *list.Options) (pipelines []*model.PipelineVersion, total_size int, nextPageToken string, err error) {
+	return r.pipelineStore.ListPipelineVersions(pipelineId, opts)
+}
+
+func (r *ResourceManager) DeletePipelineVersion(pipelineVersionId string) error {
+	_, err := r.pipelineStore.GetPipelineVersion(pipelineVersionId)
+	if err != nil {
+		return util.Wrap(err, "Delete pipeline version failed")
+	}
+
+	// Mark pipeline as deleting so it's not visible to user.
+	err = r.pipelineStore.UpdatePipelineVersionStatus(pipelineVersionId, model.PipelineVersionDeleting)
+	if err != nil {
+		return util.Wrap(err, "Delete pipeline version failed")
+	}
+
+	err = r.objectStore.DeleteFile(storage.CreatePipelinePath(fmt.Sprint(pipelineVersionId)))
+	if err != nil {
+		glog.Errorf("%v", errors.Wrapf(err, "Failed to delete pipeline file for pipeline version %v", pipelineVersionId))
+		return util.Wrap(err, "Delete pipeline version failed")
+	}
+	err = r.pipelineStore.DeletePipelineVersion(pipelineVersionId)
+	if err != nil {
+		glog.Errorf("%v", errors.Wrapf(err, "Failed to delete pipeline DB entry for pipeline %v", pipelineVersionId))
+		return util.Wrap(err, "Delete pipeline version failed")
+	}
+
+	return nil
+}
+
+func (r *ResourceManager) GetPipelineVersionTemplate(versionId string) ([]byte, error) {
+	// Verify pipeline version exist
+	_, err := r.pipelineStore.GetPipelineVersion(versionId)
+	if err != nil {
+		return nil, util.Wrap(err, "Get pipeline version template failed")
+	}
+
+	template, err := r.objectStore.GetFile(storage.CreatePipelinePath(fmt.Sprint(versionId)))
+	if err != nil {
+		return nil, util.Wrap(err, "Get pipeline version template failed")
+	}
+
+	return template, nil
+}
diff --git a/backend/src/apiserver/resource/resource_manager_test.go b/backend/src/apiserver/resource/resource_manager_test.go
index 5416770adc71..716d48df8ce7 100644
--- a/backend/src/apiserver/resource/resource_manager_test.go
+++ b/backend/src/apiserver/resource/resource_manager_test.go
@@ -376,6 +376,96 @@ func TestCreateRun_ThroughWorkflowSpec(t *testing.T) {
 	assert.Equal(t, expectedRunDetail, runDetail, "CreateRun stored invalid data in database")
 }
 
+func TestCreateRun_ThroughPipelineVersion(t *testing.T) {
+	// Create experiment, pipeline, and pipeline version.
+	store, manager, experiment, pipeline := initWithExperimentAndPipeline(t)
+	defer store.Close()
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(FakeUUIDOne, nil))
+	version, err := manager.CreatePipelineVersion(&api.PipelineVersion{
+		Name: "version_for_run",
+		ResourceReferences: []*api.ResourceReference{
+			&api.ResourceReference{
+				Key: &api.ResourceKey{
+					Id:   pipeline.UUID,
+					Type: api.ResourceType_PIPELINE,
+				},
+				Relationship: api.Relationship_OWNER,
+			},
+		},
+	}, []byte(testWorkflow.ToStringForStore()))
+	assert.Nil(t, err)
+
+	apiRun := &api.Run{
+		Name: "run1",
+		PipelineSpec: &api.PipelineSpec{
+			Parameters: []*api.Parameter{
+				{Name: "param1", Value: "world"},
+			},
+		},
+		ResourceReferences: []*api.ResourceReference{
+			{
+				Key:          &api.ResourceKey{Type: api.ResourceType_EXPERIMENT, Id: experiment.UUID},
+				Relationship: api.Relationship_OWNER,
+			},
+			{
+				Key:          &api.ResourceKey{Type: api.ResourceType_PIPELINE_VERSION, Id: version.UUID},
+				Relationship: api.Relationship_CREATOR,
+			},
+		},
+	}
+	runDetail, err := manager.CreateRun(apiRun)
+	assert.Nil(t, err)
+
+	expectedRuntimeWorkflow := testWorkflow.DeepCopy()
+	expectedRuntimeWorkflow.Spec.Arguments.Parameters = []v1alpha1.Parameter{
+		{Name: "param1", Value: util.StringPointer("world")}}
+	expectedRuntimeWorkflow.Labels = map[string]string{util.LabelKeyWorkflowRunId: "123e4567-e89b-12d3-a456-426655440000"}
+	expectedRuntimeWorkflow.Spec.ServiceAccountName = defaultPipelineRunnerServiceAccount
+
+	expectedRunDetail := &model.RunDetail{
+		Run: model.Run{
+			UUID:           "123e4567-e89b-12d3-a456-426655440000",
+			DisplayName:    "run1",
+			Name:           "workflow-name",
+			StorageState:   api.Run_STORAGESTATE_AVAILABLE.String(),
+			CreatedAtInSec: 4,
+			Conditions:     "Running",
+			PipelineSpec: model.PipelineSpec{
+				WorkflowSpecManifest: testWorkflow.ToStringForStore(),
+				Parameters:           "[{\"name\":\"param1\",\"value\":\"world\"}]",
+			},
+			ResourceReferences: []*model.ResourceReference{
+				{
+					ResourceUUID:  "123e4567-e89b-12d3-a456-426655440000",
+					ResourceType:  common.Run,
+					ReferenceUUID: experiment.UUID,
+					ReferenceName: "e1",
+					ReferenceType: common.Experiment,
+					Relationship:  common.Owner,
+				},
+				{
+					ResourceUUID:  "123e4567-e89b-12d3-a456-426655440000",
+					ResourceType:  common.Run,
+					ReferenceUUID: version.UUID,
+					ReferenceName: "version_for_run",
+					ReferenceType: common.PipelineVersion,
+					Relationship:  common.Creator,
+				},
+			},
+		},
+		PipelineRuntime: model.PipelineRuntime{
+			WorkflowRuntimeManifest: util.NewWorkflow(expectedRuntimeWorkflow).ToStringForStore(),
+		},
+	}
+	assert.Equal(t, expectedRunDetail, runDetail, "The CreateRun return has unexpected value.")
+	assert.Equal(t, 1, store.workflowClientFake.GetWorkflowCount(), "Workflow CRD is not created.")
+	runDetail, err = manager.GetRun(runDetail.UUID)
+	assert.Nil(t, err)
+	assert.Equal(t, expectedRunDetail, runDetail, "CreateRun stored invalid data in database")
+}
+
 func TestCreateRun_NoExperiment(t *testing.T) {
 	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
 	manager := NewResourceManager(store)
@@ -764,6 +854,83 @@ func TestCreateJob_ThroughPipelineID(t *testing.T) {
 	assert.Equal(t, expectedJob, newJob)
 }
 
+func TestCreateJob_ThroughPipelineVersion(t *testing.T) {
+	// Create experiment, pipeline and pipeline version.
+	store, manager, experiment, pipeline := initWithExperimentAndPipeline(t)
+	defer store.Close()
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(FakeUUIDOne, nil))
+	version, err := manager.CreatePipelineVersion(&api.PipelineVersion{
+		Name: "version_for_job",
+		ResourceReferences: []*api.ResourceReference{
+			&api.ResourceReference{
+				Key: &api.ResourceKey{
+					Id:   pipeline.UUID,
+					Type: api.ResourceType_PIPELINE,
+				},
+				Relationship: api.Relationship_OWNER,
+			},
+		},
+	}, []byte(testWorkflow.ToStringForStore()))
+	assert.Nil(t, err)
+
+	job := &api.Job{
+		Name:    "j1",
+		Enabled: true,
+		PipelineSpec: &api.PipelineSpec{
+			Parameters: []*api.Parameter{
+				{Name: "param1", Value: "world"},
+			},
+		},
+		ResourceReferences: []*api.ResourceReference{
+			{
+				Key:          &api.ResourceKey{Type: api.ResourceType_EXPERIMENT, Id: experiment.UUID},
+				Relationship: api.Relationship_OWNER,
+			},
+			{
+				Key:          &api.ResourceKey{Type: api.ResourceType_PIPELINE_VERSION, Id: version.UUID},
+				Relationship: api.Relationship_CREATOR,
+			},
+		},
+	}
+	newJob, err := manager.CreateJob(job)
+	expectedJob := &model.Job{
+		UUID:           "123",
+		DisplayName:    "j1",
+		Name:           "j1",
+		Namespace:      "default",
+		Enabled:        true,
+		CreatedAtInSec: 4,
+		UpdatedAtInSec: 4,
+		Conditions:     "NO_STATUS",
+		PipelineSpec: model.PipelineSpec{
+			WorkflowSpecManifest: testWorkflow.ToStringForStore(),
+			Parameters:           "[{\"name\":\"param1\",\"value\":\"world\"}]",
+		},
+		ResourceReferences: []*model.ResourceReference{
+			{
+				ResourceUUID:  "123",
+				ResourceType:  common.Job,
+				ReferenceUUID: experiment.UUID,
+				ReferenceName: "e1",
+				ReferenceType: common.Experiment,
+				Relationship:  common.Owner,
+			},
+			{
+				ResourceUUID:  "123",
+				ResourceType:  common.Job,
+				ReferenceUUID: version.UUID,
+				ReferenceName: "version_for_job",
+				ReferenceType: common.PipelineVersion,
+				Relationship:  common.Creator,
+			},
+		},
+	}
+	assert.Nil(t, err)
+	assert.Equal(t, expectedJob, newJob)
+}
+
 func TestCreateJob_EmptyPipelineSpec(t *testing.T) {
 	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
 	defer store.Close()
@@ -1759,3 +1926,266 @@ spec:
         valueFrom:
           path: /output.txt`
 )
+
+func TestCreatePipelineVersion(t *testing.T) {
+	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	manager := NewResourceManager(store)
+
+	// Create a pipeline before versions.
+	_, err := manager.CreatePipeline("p", "", []byte(testWorkflow.ToStringForStore()))
+	assert.Nil(t, err)
+
+	// Create a version under the above pipeline.
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(FakeUUIDOne, nil))
+	version, err := manager.CreatePipelineVersion(
+		&api.PipelineVersion{
+			Name: "p_v",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   DefaultFakeUUID,
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				},
+			},
+		},
+		[]byte(testWorkflow.ToStringForStore()))
+	assert.Nil(t, err)
+
+	defer store.Close()
+	pipelineVersionExpected := &model.PipelineVersion{
+		UUID:           FakeUUIDOne,
+		CreatedAtInSec: 2,
+		Name:           "p_v",
+		Parameters:     "[{\"name\":\"param1\"}]",
+		Status:         model.PipelineVersionReady,
+		PipelineId:     DefaultFakeUUID,
+	}
+	assert.Equal(t, pipelineVersionExpected, version)
+}
+
+func TestCreatePipelineVersion_ComplexPipelineVersion(t *testing.T) {
+	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	defer store.Close()
+	manager := NewResourceManager(store)
+
+	// Create a pipeline.
+	createdPipeline, err := manager.CreatePipeline("pipeline", "", []byte(strings.TrimSpace(complexPipeline)))
+	assert.Nil(t, err)
+
+	// Create a version under the above pipeline.
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(FakeUUIDOne, nil))
+	version, err := manager.CreatePipelineVersion(
+		&api.PipelineVersion{
+			Name: "pipeline_version",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   DefaultFakeUUID,
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				},
+			},
+		},
+		[]byte(strings.TrimSpace(complexPipeline)))
+	assert.Nil(t, err)
+
+	_, err = manager.GetPipeline(createdPipeline.UUID)
+	assert.Nil(t, err)
+
+	_, err = manager.GetPipelineVersion(version.UUID)
+	assert.Nil(t, err)
+}
+
+func TestCreatePipelineVersion_CreatePipelineVersionFileError(t *testing.T) {
+	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	defer store.Close()
+	manager := NewResourceManager(store)
+
+	// Create a pipeline.
+	_, err := manager.CreatePipeline("pipeline", "", []byte(strings.TrimSpace(complexPipeline)))
+	assert.Nil(t, err)
+
+	// Switch to a bad object store
+	manager.objectStore = &FakeBadObjectStore{}
+
+	// Create a version under the above pipeline.
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(FakeUUIDOne, nil))
+	_, err = manager.CreatePipelineVersion(
+		&api.PipelineVersion{
+			Name: "pipeline_version",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   DefaultFakeUUID,
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				},
+			},
+		},
+		[]byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode())
+	assert.Contains(t, err.Error(), "bad object store")
+
+	// Verify the pipeline version in DB is in status PipelineVersionCreating.
+	version, err := manager.pipelineStore.GetPipelineVersionWithStatus(FakeUUIDOne, model.PipelineVersionCreating)
+	assert.Nil(t, err)
+	assert.NotNil(t, version)
+}
+
+func TestCreatePipelineVersion_GetParametersError(t *testing.T) {
+	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	defer store.Close()
+	manager := NewResourceManager(store)
+
+	// Create a pipeline.
+	_, err := manager.CreatePipeline("pipeline", "", []byte(testWorkflow.ToStringForStore()))
+	assert.Nil(t, err)
+
+	// Create a version under the above pipeline.
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(FakeUUIDOne, nil))
+	_, err = manager.CreatePipelineVersion(
+		&api.PipelineVersion{
+			Name: "pipeline_version",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   DefaultFakeUUID,
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				},
+			},
+		},
+		[]byte("I am invalid yaml"))
+	assert.Equal(t, codes.InvalidArgument, err.(*util.UserError).ExternalStatusCode())
+	assert.Contains(t, err.Error(), "Failed to parse the parameter")
+}
+
+func TestCreatePipelineVersion_StorePipelineVersionMetadataError(t *testing.T) {
+	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	defer store.Close()
+	manager := NewResourceManager(store)
+
+	// Create a pipeline.
+	_, err := manager.CreatePipeline(
+		"pipeline",
+		"",
+		[]byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+	assert.Nil(t, err)
+
+	// Close db.
+	store.DB().Close()
+
+	// Create a version under the above pipeline, resulting in error because of
+	// closed db.
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(
+		FakeUUIDOne, nil))
+	_, err = manager.CreatePipelineVersion(
+		&api.PipelineVersion{
+			Name: "pipeline_version",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   DefaultFakeUUID,
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				},
+			},
+		},
+		[]byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode())
+	assert.Contains(t, err.Error(), "database is closed")
+}
+
+func TestDeletePipelineVersion(t *testing.T) {
+	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	defer store.Close()
+	manager := NewResourceManager(store)
+
+	// Create a pipeline.
+	_, err := manager.CreatePipeline("pipeline", "", []byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+	assert.Nil(t, err)
+
+	// Create a version under the above pipeline.
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(FakeUUIDOne, nil))
+	_, err = manager.CreatePipelineVersion(
+		&api.PipelineVersion{
+			Name: "pipeline_version",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   DefaultFakeUUID,
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				},
+			},
+		},
+		[]byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+
+	// Delete the above pipeline_version.
+	err = manager.DeletePipelineVersion(FakeUUIDOne)
+	assert.Nil(t, err)
+
+	// Verify the version doesn't exist.
+	_, err = manager.GetPipelineVersion(FakeUUIDOne)
+	assert.Equal(t, codes.NotFound, err.(*util.UserError).ExternalStatusCode())
+}
+
+func TestDeletePipelineVersion_FileError(t *testing.T) {
+	store := NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	defer store.Close()
+	manager := NewResourceManager(store)
+
+	// Create a pipeline.
+	_, err := manager.CreatePipeline("pipeline", "", []byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+	assert.Nil(t, err)
+
+	// Create a version under the above pipeline.
+	pipelineStore, ok := store.pipelineStore.(*storage.PipelineStore)
+	assert.True(t, ok)
+	pipelineStore.SetUUIDGenerator(util.NewFakeUUIDGeneratorOrFatal(FakeUUIDOne, nil))
+	_, err = manager.CreatePipelineVersion(
+		&api.PipelineVersion{
+			Name: "pipeline_version",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   DefaultFakeUUID,
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				},
+			},
+		},
+		[]byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+
+	// Switch to a bad object store
+	manager.objectStore = &FakeBadObjectStore{}
+
+	// Delete the above pipeline_version.
+	err = manager.DeletePipelineVersion(FakeUUIDOne)
+	assert.NotNil(t, err)
+
+	// Verify the version in deleting status.
+	version, err := manager.pipelineStore.GetPipelineVersionWithStatus(FakeUUIDOne, model.PipelineVersionDeleting)
+	assert.Nil(t, err)
+	assert.NotNil(t, version)
+}
diff --git a/backend/src/apiserver/server/BUILD.bazel b/backend/src/apiserver/server/BUILD.bazel
index 3ffdcea74834..83c307b0b8a4 100644
--- a/backend/src/apiserver/server/BUILD.bazel
+++ b/backend/src/apiserver/server/BUILD.bazel
@@ -27,7 +27,6 @@ go_library(
         "//backend/src/common/util:go_default_library",
         "//backend/src/crd/pkg/apis/scheduledworkflow/v1beta1:go_default_library",
         "@com_github_argoproj_argo//pkg/apis/workflow/v1alpha1:go_default_library",
-        "@com_github_cenkalti_backoff//:go_default_library",
         "@com_github_golang_glog//:go_default_library",
         "@com_github_golang_protobuf//jsonpb:go_default_library_gen",
         "@com_github_robfig_cron//:go_default_library",
diff --git a/backend/src/apiserver/server/api_converter.go b/backend/src/apiserver/server/api_converter.go
index 20da9ee97d31..9bc42b010c47 100644
--- a/backend/src/apiserver/server/api_converter.go
+++ b/backend/src/apiserver/server/api_converter.go
@@ -58,22 +58,21 @@ func ToApiPipeline(pipeline *model.Pipeline) *api.Pipeline {
 		}
 	}
 
-	// TODO(jingzhang36): uncomment when exposing versions to API.
-	// defaultVersion, err := ToApiPipelineVersion(pipeline.DefaultVersion)
-	// if err != nil {
-	// 	return &api.Pipeline{
-	// 		Id:    pipeline.UUID,
-	// 		Error: err.Error(),
-	// 	}
-	// }
+	defaultVersion, err := ToApiPipelineVersion(pipeline.DefaultVersion)
+	if err != nil {
+		return &api.Pipeline{
+			Id:    pipeline.UUID,
+			Error: err.Error(),
+		}
+	}
 
 	return &api.Pipeline{
-		Id:          pipeline.UUID,
-		CreatedAt:   &timestamp.Timestamp{Seconds: pipeline.CreatedAtInSec},
-		Name:        pipeline.Name,
-		Description: pipeline.Description,
-		Parameters:  params,
-		// DefaultVersion: defaultVersion,
+		Id:             pipeline.UUID,
+		CreatedAt:      &timestamp.Timestamp{Seconds: pipeline.CreatedAtInSec},
+		Name:           pipeline.Name,
+		Description:    pipeline.Description,
+		Parameters:     params,
+		DefaultVersion: defaultVersion,
 	}
 }
 
diff --git a/backend/src/apiserver/server/api_converter_test.go b/backend/src/apiserver/server/api_converter_test.go
index e123a2ccf9e3..940589a77865 100644
--- a/backend/src/apiserver/server/api_converter_test.go
+++ b/backend/src/apiserver/server/api_converter_test.go
@@ -30,36 +30,34 @@ func TestToApiPipeline(t *testing.T) {
 		UUID:           "pipeline1",
 		CreatedAtInSec: 1,
 		Parameters:     "[]",
-		// TODO(jingzhang36): uncomment when exposing versions to API.
-		// DefaultVersion: &model.PipelineVersion{
-		// 	UUID:           "pipelineversion1",
-		// 	CreatedAtInSec: 1,
-		// 	Parameters:     "[]",
-		// 	PipelineId:     "pipeline1",
-		// 	CodeSourceUrl: "http://repo/22222",
-		// },
+		DefaultVersion: &model.PipelineVersion{
+			UUID:           "pipelineversion1",
+			CreatedAtInSec: 1,
+			Parameters:     "[]",
+			PipelineId:     "pipeline1",
+			CodeSourceUrl:  "http://repo/22222",
+		},
 	}
 	apiPipeline := ToApiPipeline(modelPipeline)
 	expectedApiPipeline := &api.Pipeline{
 		Id:         "pipeline1",
 		CreatedAt:  &timestamp.Timestamp{Seconds: 1},
 		Parameters: []*api.Parameter{},
-		// TODO(jingzhang36): uncomment when exposing versions to API.
-		// DefaultVersion: &api.PipelineVersion{
-		// 	Id:             "pipelineversion1",
-		// 	CreatedAt:      &timestamp.Timestamp{Seconds: 1},
-		// 	Parameters:     []*api.Parameter{},
-		// 	CodeSourceUrl:  "http://repo/22222",
-		// 	ResourceReferences: []*api.ResourceReference{
-		// 		&api.ResourceReference{
-		// 			Key: &api.ResourceKey{
-		// 				Id:   "pipeline1",
-		// 				Type: api.ResourceType_PIPELINE,
-		// 			},
-		// 			Relationship: api.Relationship_OWNER,
-		// 		},
-		// 	},
-		// },
+		DefaultVersion: &api.PipelineVersion{
+			Id:            "pipelineversion1",
+			CreatedAt:     &timestamp.Timestamp{Seconds: 1},
+			Parameters:    []*api.Parameter{},
+			CodeSourceUrl: "http://repo/22222",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   "pipeline1",
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				},
+			},
+		},
 	}
 	assert.Equal(t, expectedApiPipeline, apiPipeline)
 }
@@ -69,8 +67,7 @@ func TestToApiPipeline_ErrorParsingField(t *testing.T) {
 		UUID:           "pipeline1",
 		CreatedAtInSec: 1,
 		Parameters:     "[invalid parameter",
-		// TODO(jingzhang36): uncomment when exposing versions to API.
-		// DefaultVersion: &model.PipelineVersion{},
+		DefaultVersion: &model.PipelineVersion{},
 	}
 	apiPipeline := ToApiPipeline(modelPipeline)
 	expectedApiPipeline := &api.Pipeline{
diff --git a/backend/src/apiserver/server/job_server.go b/backend/src/apiserver/server/job_server.go
index 40858ede950a..759826c80c1f 100644
--- a/backend/src/apiserver/server/job_server.go
+++ b/backend/src/apiserver/server/job_server.go
@@ -87,7 +87,9 @@ func (s *JobServer) validateCreateJobRequest(request *api.CreateJobRequest) erro
 	job := request.Job
 
 	if err := ValidatePipelineSpec(s.resourceManager, job.PipelineSpec); err != nil {
-		return util.Wrap(err, "The pipeline spec is invalid.")
+		if _, errResourceReference := CheckPipelineVersionReference(s.resourceManager, job.ResourceReferences); errResourceReference != nil {
+			return util.Wrap(err, "Neither pipeline spec nor pipeline version is valid."+errResourceReference.Error())
+		}
 	}
 
 	if job.MaxConcurrency > 10 || job.MaxConcurrency < 1 {
diff --git a/backend/src/apiserver/server/job_server_test.go b/backend/src/apiserver/server/job_server_test.go
index 125a15775184..e40e7f7e4ff9 100644
--- a/backend/src/apiserver/server/job_server_test.go
+++ b/backend/src/apiserver/server/job_server_test.go
@@ -36,6 +36,26 @@ func TestValidateApiJob(t *testing.T) {
 	assert.Nil(t, err)
 }
 
+func TestValidateApiJob_WithPipelineVersion(t *testing.T) {
+	clients, manager, _ := initWithExperimentAndPipelineVersion(t)
+	defer clients.Close()
+	server := NewJobServer(manager)
+	apiJob := &api.Job{
+		Id:             "job1",
+		Name:           "name1",
+		Enabled:        true,
+		MaxConcurrency: 1,
+		Trigger: &api.Trigger{
+			Trigger: &api.Trigger_CronSchedule{CronSchedule: &api.CronSchedule{
+				StartTime: &timestamp.Timestamp{Seconds: 1},
+				Cron:      "1 * * * *",
+			}}},
+		ResourceReferences: validReferencesOfExperimentAndPipelineVersion,
+	}
+	err := server.validateCreateJobRequest(&api.CreateJobRequest{Job: apiJob})
+	assert.Nil(t, err)
+}
+
 func TestValidateApiJob_ValidateNoExperimentResourceReferenceSucceeds(t *testing.T) {
 	clients, manager, _ := initWithExperiment(t)
 	defer clients.Close()
@@ -87,6 +107,27 @@ func TestValidateApiJob_ValidatePipelineSpecFailed(t *testing.T) {
 	assert.Contains(t, err.Error(), "Pipeline not_exist_pipeline not found")
 }
 
+func TestValidateApiJob_NoValidPipelineSpecOrPipelineVersion(t *testing.T) {
+	clients, manager, _ := initWithExperimentAndPipelineVersion(t)
+	defer clients.Close()
+	server := NewJobServer(manager)
+	apiJob := &api.Job{
+		Id:             "job1",
+		Name:           "name1",
+		Enabled:        true,
+		MaxConcurrency: 1,
+		Trigger: &api.Trigger{
+			Trigger: &api.Trigger_CronSchedule{CronSchedule: &api.CronSchedule{
+				StartTime: &timestamp.Timestamp{Seconds: 1},
+				Cron:      "1 * * * *",
+			}}},
+		ResourceReferences: validReference,
+	}
+	err := server.validateCreateJobRequest(&api.CreateJobRequest{Job: apiJob})
+	assert.Equal(t, codes.InvalidArgument, err.(*util.UserError).ExternalStatusCode())
+	assert.Contains(t, err.Error(), "Neither pipeline spec nor pipeline version is valid")
+}
+
 func TestValidateApiJob_InvalidCron(t *testing.T) {
 	clients, manager, experiment := initWithExperiment(t)
 	defer clients.Close()
diff --git a/backend/src/apiserver/server/pipeline_server.go b/backend/src/apiserver/server/pipeline_server.go
index 8c3641440e60..635b5e0b35a7 100644
--- a/backend/src/apiserver/server/pipeline_server.go
+++ b/backend/src/apiserver/server/pipeline_server.go
@@ -118,3 +118,81 @@ func ValidateCreatePipelineRequest(request *api.CreatePipelineRequest) error {
 func NewPipelineServer(resourceManager *resource.ResourceManager) *PipelineServer {
 	return &PipelineServer{resourceManager: resourceManager, httpClient: http.DefaultClient}
 }
+
+func (s *PipelineServer) CreatePipelineVersion(ctx context.Context, request *api.CreatePipelineVersionRequest) (*api.PipelineVersion, error) {
+	// Read pipeline file.
+	if request.Version == nil || request.Version.PackageUrl == nil ||
+		len(request.Version.PackageUrl.PipelineUrl) == 0 {
+		return nil, util.NewInvalidInputError("Pipeline URL is empty. Please specify a valid URL.")
+	}
+	pipelineUrl := request.Version.PackageUrl.PipelineUrl
+	if _, err := url.ParseRequestURI(request.Version.PackageUrl.PipelineUrl); err != nil {
+		return nil, util.NewInvalidInputError("Invalid Pipeline URL %v. Please specify a valid URL", request.Version.PackageUrl.PipelineUrl)
+	}
+	resp, err := s.httpClient.Get(pipelineUrl)
+	if err != nil || resp.StatusCode != http.StatusOK {
+		return nil, util.NewInternalServerError(err, "Failed to download the pipeline from %v. Please double check the URL is valid and can be accessed by the pipeline system.", pipelineUrl)
+	}
+	pipelineFileName := path.Base(pipelineUrl)
+	pipelineFile, err := ReadPipelineFile(pipelineFileName, resp.Body, MaxFileLength)
+	if err != nil {
+		return nil, util.Wrap(err, "The URL is valid but pipeline system failed to read the file.")
+	}
+
+	version, err := s.resourceManager.CreatePipelineVersion(request.Version, pipelineFile)
+	if err != nil {
+		return nil, util.Wrap(err, "Failed to create a version.")
+	}
+	return ToApiPipelineVersion(version)
+}
+
+func (s *PipelineServer) GetPipelineVersion(ctx context.Context, request *api.GetPipelineVersionRequest) (*api.PipelineVersion, error) {
+	version, err := s.resourceManager.GetPipelineVersion(request.VersionId)
+	if err != nil {
+		return nil, util.Wrap(err, "Get pipeline version failed.")
+	}
+	return ToApiPipelineVersion(version)
+}
+
+func (s *PipelineServer) ListPipelineVersions(ctx context.Context, request *api.ListPipelineVersionsRequest) (*api.ListPipelineVersionsResponse, error) {
+	opts, err := validatedListOptions(
+		&model.PipelineVersion{},
+		request.PageToken,
+		int(request.PageSize),
+		request.SortBy,
+		request.Filter)
+
+	if err != nil {
+		return nil, util.Wrap(err, "Failed to create list options")
+	}
+
+	pipelineVersions, total_size, nextPageToken, err :=
+		s.resourceManager.ListPipelineVersions(request.ResourceKey.Id, opts)
+	if err != nil {
+		return nil, util.Wrap(err, "List pipeline versions failed.")
+	}
+	apiPipelineVersions, _ := ToApiPipelineVersions(pipelineVersions)
+
+	return &api.ListPipelineVersionsResponse{
+		Versions:      apiPipelineVersions,
+		NextPageToken: nextPageToken,
+		TotalSize:     int32(total_size)}, nil
+}
+
+func (s *PipelineServer) DeletePipelineVersion(ctx context.Context, request *api.DeletePipelineVersionRequest) (*empty.Empty, error) {
+	err := s.resourceManager.DeletePipelineVersion(request.VersionId)
+	if err != nil {
+		return nil, util.Wrap(err, "Delete pipeline versions failed.")
+	}
+
+	return &empty.Empty{}, nil
+}
+
+func (s *PipelineServer) GetPipelineVersionTemplate(ctx context.Context, request *api.GetPipelineVersionTemplateRequest) (*api.GetTemplateResponse, error) {
+	template, err := s.resourceManager.GetPipelineVersionTemplate(request.VersionId)
+	if err != nil {
+		return nil, util.Wrap(err, "Get pipeline template failed.")
+	}
+
+	return &api.GetTemplateResponse{Template: string(template)}, nil
+}
diff --git a/backend/src/apiserver/server/pipeline_server_test.go b/backend/src/apiserver/server/pipeline_server_test.go
index 300284463164..62679969f89c 100644
--- a/backend/src/apiserver/server/pipeline_server_test.go
+++ b/backend/src/apiserver/server/pipeline_server_test.go
@@ -27,8 +27,8 @@ func TestCreatePipeline_YAML(t *testing.T) {
 	pipelineServer := PipelineServer{resourceManager: resourceManager, httpClient: httpServer.Client()}
 	pipeline, err := pipelineServer.CreatePipeline(context.Background(), &api.CreatePipelineRequest{
 		Pipeline: &api.Pipeline{
-			Url:&api.Url{PipelineUrl: httpServer.URL + "/arguments-parameters.yaml"},
-			Name:"argument-parameters",
+			Url:  &api.Url{PipelineUrl: httpServer.URL + "/arguments-parameters.yaml"},
+			Name: "argument-parameters",
 		}})
 
 	assert.Nil(t, err)
@@ -54,8 +54,8 @@ func TestCreatePipeline_Tarball(t *testing.T) {
 	pipelineServer := PipelineServer{resourceManager: resourceManager, httpClient: httpServer.Client()}
 	pipeline, err := pipelineServer.CreatePipeline(context.Background(), &api.CreatePipelineRequest{
 		Pipeline: &api.Pipeline{
-			Url:&api.Url{PipelineUrl: httpServer.URL + "/arguments_tarball/arguments.tar.gz"},
-			Name:"argument-parameters",
+			Url:  &api.Url{PipelineUrl: httpServer.URL + "/arguments_tarball/arguments.tar.gz"},
+			Name: "argument-parameters",
 		}})
 
 	assert.Nil(t, err)
@@ -81,8 +81,8 @@ func TestCreatePipeline_InvalidYAML(t *testing.T) {
 	pipelineServer := PipelineServer{resourceManager: resourceManager, httpClient: httpServer.Client()}
 	_, err := pipelineServer.CreatePipeline(context.Background(), &api.CreatePipelineRequest{
 		Pipeline: &api.Pipeline{
-			Url:&api.Url{PipelineUrl: httpServer.URL + "/invalid-workflow.yaml"},
-			Name:"argument-parameters",
+			Url:  &api.Url{PipelineUrl: httpServer.URL + "/invalid-workflow.yaml"},
+			Name: "argument-parameters",
 		}})
 
 	assert.NotNil(t, err)
@@ -101,12 +101,145 @@ func TestCreatePipeline_InvalidURL(t *testing.T) {
 	pipelineServer := PipelineServer{resourceManager: resourceManager, httpClient: httpServer.Client()}
 	_, err := pipelineServer.CreatePipeline(context.Background(), &api.CreatePipelineRequest{
 		Pipeline: &api.Pipeline{
-			Url:&api.Url{PipelineUrl: httpServer.URL + "/invalid-workflow.yaml"},
-			Name:"argument-parameters",
+			Url:  &api.Url{PipelineUrl: httpServer.URL + "/invalid-workflow.yaml"},
+			Name: "argument-parameters",
 		}})
 	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode())
 }
 
+func TestCreatePipelineVersion_YAML(t *testing.T) {
+	httpServer := getMockServer(t)
+	// Close the server when test finishes
+	defer httpServer.Close()
+
+	clientManager := resource.NewFakeClientManagerOrFatal(
+		util.NewFakeTimeForEpoch())
+	resourceManager := resource.NewResourceManager(clientManager)
+
+	pipelineServer := PipelineServer{
+		resourceManager: resourceManager, httpClient: httpServer.Client()}
+	pipelineVersion, err := pipelineServer.CreatePipelineVersion(
+		context.Background(), &api.CreatePipelineVersionRequest{
+			Version: &api.PipelineVersion{
+				PackageUrl: &api.Url{
+					PipelineUrl: httpServer.URL + "/arguments-parameters.yaml"},
+				Name: "argument-parameters",
+				ResourceReferences: []*api.ResourceReference{
+					&api.ResourceReference{
+						Key: &api.ResourceKey{
+							Id:   "pipeline",
+							Type: api.ResourceType_PIPELINE,
+						},
+						Relationship: api.Relationship_OWNER,
+					}}}})
+
+	assert.Nil(t, err)
+	assert.NotNil(t, pipelineVersion)
+	assert.Equal(t, "argument-parameters", pipelineVersion.Name)
+	newPipelineVersion, err := resourceManager.GetPipelineVersion(
+		pipelineVersion.Id)
+	assert.Nil(t, err)
+	assert.NotNil(t, newPipelineVersion)
+	var params []api.Parameter
+	err = json.Unmarshal([]byte(newPipelineVersion.Parameters), &params)
+	assert.Nil(t, err)
+	assert.Equal(t, []api.Parameter{
+		{Name: "param1", Value: "hello"}, {Name: "param2"}}, params)
+}
+
+func TestCreatePipelineVersion_InvalidYAML(t *testing.T) {
+	httpServer := getMockServer(t)
+	// Close the server when test finishes
+	defer httpServer.Close()
+
+	clientManager := resource.NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	resourceManager := resource.NewResourceManager(clientManager)
+
+	pipelineServer := PipelineServer{resourceManager: resourceManager, httpClient: httpServer.Client()}
+	_, err := pipelineServer.CreatePipelineVersion(
+		context.Background(), &api.CreatePipelineVersionRequest{
+			Version: &api.PipelineVersion{
+				PackageUrl: &api.Url{
+					PipelineUrl: httpServer.URL + "/invalid-workflow.yaml"},
+				Name: "argument-parameters",
+				ResourceReferences: []*api.ResourceReference{
+					&api.ResourceReference{
+						Key: &api.ResourceKey{
+							Id:   "pipeline",
+							Type: api.ResourceType_PIPELINE,
+						},
+						Relationship: api.Relationship_OWNER,
+					}}}})
+
+	assert.NotNil(t, err)
+	assert.Equal(t, codes.InvalidArgument, err.(*util.UserError).ExternalStatusCode())
+	assert.Contains(t, err.Error(), "Unexpected resource type")
+}
+
+func TestCreatePipelineVersion_Tarball(t *testing.T) {
+	httpServer := getMockServer(t)
+	// Close the server when test finishes
+	defer httpServer.Close()
+
+	clientManager := resource.NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	resourceManager := resource.NewResourceManager(clientManager)
+
+	pipelineServer := PipelineServer{resourceManager: resourceManager, httpClient: httpServer.Client()}
+	pipelineVersion, err := pipelineServer.CreatePipelineVersion(
+		context.Background(), &api.CreatePipelineVersionRequest{
+			Version: &api.PipelineVersion{
+				PackageUrl: &api.Url{
+					PipelineUrl: httpServer.URL +
+						"/arguments_tarball/arguments.tar.gz"},
+				Name: "argument-parameters",
+				ResourceReferences: []*api.ResourceReference{
+					&api.ResourceReference{
+						Key: &api.ResourceKey{
+							Id:   "pipeline",
+							Type: api.ResourceType_PIPELINE,
+						},
+						Relationship: api.Relationship_OWNER,
+					}}}})
+
+	assert.Nil(t, err)
+	assert.NotNil(t, pipelineVersion)
+	assert.Equal(t, "argument-parameters", pipelineVersion.Name)
+	newPipelineVersion, err := resourceManager.GetPipelineVersion(pipelineVersion.Id)
+	assert.Nil(t, err)
+	assert.NotNil(t, newPipelineVersion)
+	var params []api.Parameter
+	err = json.Unmarshal([]byte(newPipelineVersion.Parameters), &params)
+	assert.Nil(t, err)
+	assert.Equal(t, []api.Parameter{{Name: "param1", Value: "hello"}, {Name: "param2"}}, params)
+}
+
+func TestCreatePipelineVersion_InvalidURL(t *testing.T) {
+	// Use a bad mock server
+	httpServer := getBadMockServer()
+	// Close the server when test finishes
+	defer httpServer.Close()
+
+	clientManager := resource.NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	resourceManager := resource.NewResourceManager(clientManager)
+
+	pipelineServer := PipelineServer{resourceManager: resourceManager, httpClient: httpServer.Client()}
+	_, err := pipelineServer.CreatePipelineVersion(context.Background(), &api.CreatePipelineVersionRequest{
+		Version: &api.PipelineVersion{
+			PackageUrl: &api.Url{
+				PipelineUrl: httpServer.URL + "/invalid-workflow.yaml"},
+			Name: "argument-parameters",
+			ResourceReferences: []*api.ResourceReference{
+				&api.ResourceReference{
+					Key: &api.ResourceKey{
+						Id:   "pipeline",
+						Type: api.ResourceType_PIPELINE,
+					},
+					Relationship: api.Relationship_OWNER,
+				}}}})
+
+	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode())
+}
+
 func getMockServer(t *testing.T) *httptest.Server {
 	httpServer := httptest.NewServer(http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
 		// Send response to be tested
diff --git a/backend/src/apiserver/server/run_server.go b/backend/src/apiserver/server/run_server.go
index e39b780485d3..9d09c23dbdb8 100644
--- a/backend/src/apiserver/server/run_server.go
+++ b/backend/src/apiserver/server/run_server.go
@@ -16,6 +16,7 @@ package server
 
 import (
 	"context"
+
 	"github.com/golang/protobuf/ptypes/empty"
 	api "github.com/kubeflow/pipelines/backend/api/go_client"
 	"github.com/kubeflow/pipelines/backend/src/apiserver/model"
@@ -128,7 +129,10 @@ func (s *RunServer) validateCreateRunRequest(request *api.CreateRunRequest) erro
 	}
 
 	if err := ValidatePipelineSpec(s.resourceManager, run.PipelineSpec); err != nil {
-		return util.Wrap(err, "The pipeline spec is invalid.")
+		if _, errResourceReference := CheckPipelineVersionReference(s.resourceManager, run.ResourceReferences); errResourceReference != nil {
+			return util.Wrap(err, "Neither pipeline spec nor pipeline version is valid. "+errResourceReference.Error())
+		}
+		return nil
 	}
 	return nil
 }
diff --git a/backend/src/apiserver/server/run_server_test.go b/backend/src/apiserver/server/run_server_test.go
index 2dd81bd09bdb..44dac875b13d 100644
--- a/backend/src/apiserver/server/run_server_test.go
+++ b/backend/src/apiserver/server/run_server_test.go
@@ -112,6 +112,18 @@ func TestValidateCreateRunRequest(t *testing.T) {
 	assert.Nil(t, err)
 }
 
+func TestValidateCreateRunRequest_WithPipelineVersionReference(t *testing.T) {
+	clients, manager, _ := initWithExperimentAndPipelineVersion(t)
+	defer clients.Close()
+	server := NewRunServer(manager)
+	run := &api.Run{
+		Name:               "123",
+		ResourceReferences: validReferencesOfExperimentAndPipelineVersion,
+	}
+	err := server.validateCreateRunRequest(&api.CreateRunRequest{Run: run})
+	assert.Nil(t, err)
+}
+
 func TestValidateCreateRunRequest_EmptyName(t *testing.T) {
 	clients, manager, _ := initWithExperiment(t)
 	defer clients.Close()
@@ -144,7 +156,7 @@ func TestValidateCreateRunRequest_NoExperiment(t *testing.T) {
 	assert.Nil(t, err)
 }
 
-func TestValidateCreateRunRequest_EmptyPipelineSpec(t *testing.T) {
+func TestValidateCreateRunRequest_EmptyPipelineSpecAndEmptyPipelineVersion(t *testing.T) {
 	clients, manager, _ := initWithExperiment(t)
 	defer clients.Close()
 	server := NewRunServer(manager)
@@ -154,7 +166,7 @@ func TestValidateCreateRunRequest_EmptyPipelineSpec(t *testing.T) {
 	}
 	err := server.validateCreateRunRequest(&api.CreateRunRequest{Run: run})
 	assert.NotNil(t, err)
-	assert.Contains(t, err.Error(), "Please specify a pipeline by providing a pipeline ID or workflow manifest")
+	assert.Contains(t, err.Error(), "Neither pipeline spec nor pipeline version is valid")
 }
 
 func TestValidateCreateRunRequest_TooMuchParameters(t *testing.T) {
diff --git a/backend/src/apiserver/server/test_util.go b/backend/src/apiserver/server/test_util.go
index 1712f5719910..890e992ce971 100644
--- a/backend/src/apiserver/server/test_util.go
+++ b/backend/src/apiserver/server/test_util.go
@@ -47,6 +47,23 @@ var validReference = []*api.ResourceReference{
 	},
 }
 
+var validReferencesOfExperimentAndPipelineVersion = []*api.ResourceReference{
+	{
+		Key: &api.ResourceKey{
+			Type: api.ResourceType_EXPERIMENT,
+			Id:   resource.DefaultFakeUUID,
+		},
+		Relationship: api.Relationship_OWNER,
+	},
+	{
+		Key: &api.ResourceKey{
+			Type: api.ResourceType_PIPELINE_VERSION,
+			Id:   resource.DefaultFakeUUID,
+		},
+		Relationship: api.Relationship_CREATOR,
+	},
+}
+
 func initWithExperiment(t *testing.T) (*resource.FakeClientManager, *resource.ResourceManager, *model.Experiment) {
 	clientManager := resource.NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
 	resourceManager := resource.NewResourceManager(clientManager)
@@ -56,6 +73,35 @@ func initWithExperiment(t *testing.T) (*resource.FakeClientManager, *resource.Re
 	return clientManager, resourceManager, experiment
 }
 
+func initWithExperimentAndPipelineVersion(t *testing.T) (*resource.FakeClientManager, *resource.ResourceManager, *model.Experiment) {
+	clientManager := resource.NewFakeClientManagerOrFatal(util.NewFakeTimeForEpoch())
+	resourceManager := resource.NewResourceManager(clientManager)
+
+	// Create an experiment.
+	experiment := &model.Experiment{Name: "123"}
+	experiment, err := resourceManager.CreateExperiment(experiment)
+	assert.Nil(t, err)
+
+	// Create a pipeline and then a pipeline version.
+	_, err = resourceManager.CreatePipeline("pipeline", "", []byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+	assert.Nil(t, err)
+	_, err = resourceManager.CreatePipelineVersion(&api.PipelineVersion{
+		Name: "pipeline_version",
+		ResourceReferences: []*api.ResourceReference{
+			&api.ResourceReference{
+				Key: &api.ResourceKey{
+					Id:   resource.DefaultFakeUUID,
+					Type: api.ResourceType_PIPELINE,
+				},
+				Relationship: api.Relationship_OWNER,
+			},
+		},
+	},
+		[]byte("apiVersion: argoproj.io/v1alpha1\nkind: Workflow"))
+
+	return clientManager, resourceManager, experiment
+}
+
 func initWithOneTimeRun(t *testing.T) (*resource.FakeClientManager, *resource.ResourceManager, *model.RunDetail) {
 	clientManager, manager, exp := initWithExperiment(t)
 	apiRun := &api.Run{
diff --git a/backend/src/apiserver/server/util.go b/backend/src/apiserver/server/util.go
index bd274c18e501..bffd1d52960a 100644
--- a/backend/src/apiserver/server/util.go
+++ b/backend/src/apiserver/server/util.go
@@ -7,6 +7,7 @@ import (
 	"bytes"
 	"compress/gzip"
 	"encoding/json"
+
 	api "github.com/kubeflow/pipelines/backend/api/go_client"
 	"github.com/kubeflow/pipelines/backend/src/apiserver/resource"
 	"github.com/kubeflow/pipelines/backend/src/common/util"
@@ -239,4 +240,31 @@ func ValidatePipelineSpec(resourceManager *resource.ResourceManager, spec *api.P
 		return util.NewInvalidInputError("The input parameter length exceed maximum size of %v.", util.MaxParameterBytes)
 	}
 	return nil
-}
\ No newline at end of file
+}
+
+// Verify that
+// (1) a pipeline version is specified in references as a creator.
+// (2) the above pipeline version does exists in pipeline version store and is
+// in ready status.
+func CheckPipelineVersionReference(resourceManager *resource.ResourceManager, references []*api.ResourceReference) (*string, error) {
+	if references == nil {
+		return nil, util.NewInvalidInputError("Please specify a pipeline version in Run's resource references")
+	}
+
+	var pipelineVersionId = ""
+	for _, reference := range references {
+		if reference.Key.Type == api.ResourceType_PIPELINE_VERSION && reference.Relationship == api.Relationship_CREATOR {
+			pipelineVersionId = reference.Key.Id
+		}
+	}
+	if len(pipelineVersionId) == 0 {
+		return nil, util.NewInvalidInputError("Please specify a pipeline version in Run's resource references")
+	}
+
+	// Verify pipeline version exists
+	if _, err := resourceManager.GetPipelineVersion(pipelineVersionId); err != nil {
+		return nil, util.Wrap(err, "Please specify a  valid pipeline version in Run's resource references.")
+	}
+
+	return &pipelineVersionId, nil
+}
diff --git a/backend/src/apiserver/storage/pipeline_store.go b/backend/src/apiserver/storage/pipeline_store.go
index 02dce6aaf74f..0b70051afc9e 100644
--- a/backend/src/apiserver/storage/pipeline_store.go
+++ b/backend/src/apiserver/storage/pipeline_store.go
@@ -43,6 +43,16 @@ var pipelineColumns = []string{
 	"pipeline_versions.CodeSourceUrl",
 }
 
+var pipelineVersionColumns = []string{
+	"pipeline_versions.UUID",
+	"pipeline_versions.CreatedAtInSec",
+	"pipeline_versions.Name",
+	"pipeline_versions.Parameters",
+	"pipeline_versions.PipelineId",
+	"pipeline_versions.Status",
+	"pipeline_versions.CodeSourceUrl",
+}
+
 type PipelineStoreInterface interface {
 	ListPipelines(opts *list.Options) ([]*model.Pipeline, int, string, error)
 	GetPipeline(pipelineId string) (*model.Pipeline, error)
@@ -50,7 +60,13 @@ type PipelineStoreInterface interface {
 	DeletePipeline(pipelineId string) error
 	CreatePipeline(*model.Pipeline) (*model.Pipeline, error)
 	UpdatePipelineStatus(string, model.PipelineStatus) error
+	UpdatePipelineDefaultVersion(string, string) error
 
+	CreatePipelineVersion(*model.PipelineVersion) (*model.PipelineVersion, error)
+	GetPipelineVersion(versionId string) (*model.PipelineVersion, error)
+	GetPipelineVersionWithStatus(versionId string, status model.PipelineVersionStatus) (*model.PipelineVersion, error)
+	ListPipelineVersions(pipelineId string, opts *list.Options) ([]*model.PipelineVersion, int, string, error)
+	DeletePipelineVersion(pipelineVersionId string) error
 	// Change status of a particular version.
 	UpdatePipelineVersionStatus(pipelineVersionId string, status model.PipelineVersionStatus) error
 	// TODO(jingzhang36): remove this temporary method after resource manager's
@@ -206,8 +222,7 @@ func (s *PipelineStore) GetPipelineWithStatus(id string, status model.PipelineSt
 		Select(pipelineColumns...).
 		From("pipelines").
 		LeftJoin("pipeline_versions on pipelines.DefaultVersionId = pipeline_versions.UUID").
-		Where(sq.Eq{"pipelines.uuid": id}).
-		Where(sq.Eq{"pipelines.Status": status}).
+		Where(sq.And{sq.Eq{"pipelines.uuid": id}, sq.Eq{"pipelines.Status": status}}).
 		Limit(1).ToSql()
 	if err != nil {
 		return nil, util.NewInternalServerError(err, "Failed to create query to get pipeline: %v", err.Error())
@@ -381,6 +396,12 @@ func (s *PipelineStore) UpdatePipelineVersionStatus(id string, status model.Pipe
 
 func (s *PipelineStore) UpdatePipelineAndVersionsStatus(id string, status model.PipelineStatus, pipelineVersionId string, pipelineVersionStatus model.PipelineVersionStatus) error {
 	tx, err := s.db.Begin()
+	if err != nil {
+		return util.NewInternalServerError(
+			err,
+			"Failed to start a transaction: %s",
+			err.Error())
+	}
 
 	sql, args, err := sq.
 		Update("pipelines").
@@ -425,3 +446,348 @@ func (s *PipelineStore) UpdatePipelineAndVersionsStatus(id string, status model.
 func NewPipelineStore(db *DB, time util.TimeInterface, uuid util.UUIDGeneratorInterface) *PipelineStore {
 	return &PipelineStore{db: db, time: time, uuid: uuid}
 }
+
+func (s *PipelineStore) CreatePipelineVersion(v *model.PipelineVersion) (*model.PipelineVersion, error) {
+	newPipelineVersion := *v
+	newPipelineVersion.CreatedAtInSec = s.time.Now().Unix()
+	id, err := s.uuid.NewRandom()
+	if err != nil {
+		return nil, util.NewInternalServerError(err, "Failed to create a pipeline version id.")
+	}
+	newPipelineVersion.UUID = id.String()
+
+	// Prepare queries of inserting new version and updating default version.
+	versionSql, versionArgs, versionErr := sq.
+		Insert("pipeline_versions").
+		SetMap(
+			sq.Eq{
+				"UUID":           newPipelineVersion.UUID,
+				"CreatedAtInSec": newPipelineVersion.CreatedAtInSec,
+				"Name":           newPipelineVersion.Name,
+				"Parameters":     newPipelineVersion.Parameters,
+				"PipelineId":     newPipelineVersion.PipelineId,
+				"Status":         string(newPipelineVersion.Status),
+				"CodeSourceUrl":  newPipelineVersion.CodeSourceUrl}).
+		ToSql()
+	if versionErr != nil {
+		return nil, util.NewInternalServerError(
+			versionErr,
+			"Failed to create query to insert version to pipeline version table: %v",
+			versionErr.Error())
+	}
+	pipelineSql, pipelineArgs, pipelineErr := sq.
+		Update("pipelines").
+		SetMap(sq.Eq{"DefaultVersionId": newPipelineVersion.UUID}).
+		Where(sq.Eq{"UUID": newPipelineVersion.PipelineId}).
+		ToSql()
+	if pipelineErr != nil {
+		return nil, util.NewInternalServerError(
+			pipelineErr,
+			"Failed to create query to update pipeline default version id: %v",
+			pipelineErr.Error())
+	}
+
+	// In a single transaction, insert new version and update default version.
+	tx, err := s.db.Begin()
+	if err != nil {
+		return nil, util.NewInternalServerError(
+			err,
+			"Failed to start a transaction: %v",
+			err.Error())
+	}
+
+	_, err = tx.Exec(versionSql, versionArgs...)
+	if err != nil {
+		tx.Rollback()
+		if s.db.IsDuplicateError(err) {
+			return nil, util.NewInvalidInputError(
+				"Failed to create a new pipeline version. The name %v already exist. Please specify a new name.", v.Name)
+		}
+		return nil, util.NewInternalServerError(err, "Failed to add version to pipeline version table: %v",
+			err.Error())
+	}
+	_, err = tx.Exec(pipelineSql, pipelineArgs...)
+	if err != nil {
+		tx.Rollback()
+		return nil, util.NewInternalServerError(err, "Failed to update pipeline default version id: %v",
+			err.Error())
+	}
+	if err := tx.Commit(); err != nil {
+		return nil, util.NewInternalServerError(err, "Failed to create new pipeline version: %v",
+			err.Error())
+	}
+
+	return &newPipelineVersion, nil
+}
+
+func (s *PipelineStore) UpdatePipelineDefaultVersion(pipelineId string, versionId string) error {
+	sql, args, err := sq.
+		Update("pipelines").
+		SetMap(sq.Eq{"DefaultVersionId": versionId}).
+		Where(sq.Eq{"UUID": pipelineId}).
+		ToSql()
+	if err != nil {
+		return util.NewInternalServerError(err, "Failed to create query to update the pipeline default version: %s", err.Error())
+	}
+	_, err = s.db.Exec(sql, args...)
+	if err != nil {
+		return util.NewInternalServerError(err, "Failed to update the pipeline default version: %s", err.Error())
+	}
+
+	return nil
+}
+
+func (s *PipelineStore) GetPipelineVersion(versionId string) (*model.PipelineVersion, error) {
+	return s.GetPipelineVersionWithStatus(versionId, model.PipelineVersionReady)
+}
+
+func (s *PipelineStore) GetPipelineVersionWithStatus(versionId string, status model.PipelineVersionStatus) (*model.PipelineVersion, error) {
+	sql, args, err := sq.
+		Select(pipelineVersionColumns...).
+		From("pipeline_versions").
+		Where(sq.And{sq.Eq{"UUID": versionId}, sq.Eq{"Status": status}}).
+		Limit(1).
+		ToSql()
+	if err != nil {
+		return nil, util.NewInternalServerError(err, "Failed to create query to get pipeline version: %v", err.Error())
+	}
+	r, err := s.db.Query(sql, args...)
+	if err != nil {
+		return nil, util.NewInternalServerError(err, "Failed to get pipeline version: %v", err.Error())
+	}
+	defer r.Close()
+	versions, err := s.scanPipelineVersionRows(r)
+
+	if err != nil || len(versions) > 1 {
+		return nil, util.NewInternalServerError(err, "Failed to get pipeline version: %v", err.Error())
+	}
+	if len(versions) == 0 {
+		return nil, util.NewResourceNotFoundError("Version", fmt.Sprint(versionId))
+	}
+	return versions[0], nil
+}
+
+func (s *PipelineStore) scanPipelineVersionRows(rows *sql.Rows) ([]*model.PipelineVersion, error) {
+	var pipelineVersions []*model.PipelineVersion
+	for rows.Next() {
+		var uuid, name, parameters, pipelineId, codeSourceUrl, status sql.NullString
+		var createdAtInSec sql.NullInt64
+		if err := rows.Scan(
+			&uuid,
+			&createdAtInSec,
+			&name,
+			&parameters,
+			&pipelineId,
+			&status,
+			&codeSourceUrl,
+		); err != nil {
+			return nil, err
+		}
+		if uuid.Valid {
+			pipelineVersions = append(pipelineVersions, &model.PipelineVersion{
+				UUID:           uuid.String,
+				CreatedAtInSec: createdAtInSec.Int64,
+				Name:           name.String,
+				Parameters:     parameters.String,
+				PipelineId:     pipelineId.String,
+				CodeSourceUrl:  codeSourceUrl.String,
+				Status:         model.PipelineVersionStatus(status.String)})
+		}
+	}
+	return pipelineVersions, nil
+}
+
+func (s *PipelineStore) ListPipelineVersions(pipelineId string, opts *list.Options) ([]*model.PipelineVersion, int, string, error) {
+	errorF := func(err error) ([]*model.PipelineVersion, int, string, error) {
+		return nil, 0, "", util.NewInternalServerError(err, "Failed to list pipeline versions: %v", err)
+	}
+
+	buildQuery := func(sqlBuilder sq.SelectBuilder) sq.SelectBuilder {
+		return sqlBuilder.
+			From("pipeline_versions").
+			Where(sq.And{sq.Eq{"PipelineId": pipelineId}, sq.Eq{"status": model.PipelineVersionReady}})
+	}
+
+	// SQL for pipeline version list
+	rowsSql, rowsArgs, err := opts.AddPaginationToSelect(
+		buildQuery(sq.Select(pipelineVersionColumns...))).ToSql()
+	if err != nil {
+		return errorF(err)
+	}
+
+	// SQL for getting total size of pipeline versions.
+	sizeSql, sizeArgs, err := buildQuery(sq.Select("count(*)")).ToSql()
+	if err != nil {
+		return errorF(err)
+	}
+
+	// Use a transaction to make sure we're returning the total_size of the same
+	// rows queried.
+	tx, err := s.db.Begin()
+	if err != nil {
+		glog.Errorf("Failed to start transaction to list pipelines")
+		return errorF(err)
+	}
+
+	rows, err := tx.Query(rowsSql, rowsArgs...)
+	if err != nil {
+		tx.Rollback()
+		return errorF(err)
+	}
+	pipelineVersions, err := s.scanPipelineVersionRows(rows)
+	if err != nil {
+		tx.Rollback()
+		return errorF(err)
+	}
+	rows.Close()
+
+	sizeRow, err := tx.Query(sizeSql, sizeArgs...)
+	if err != nil {
+		tx.Rollback()
+		return errorF(err)
+	}
+	total_size, err := list.ScanRowToTotalSize(sizeRow)
+	if err != nil {
+		tx.Rollback()
+		return errorF(err)
+	}
+	sizeRow.Close()
+
+	err = tx.Commit()
+	if err != nil {
+		glog.Errorf("Failed to commit transaction to list pipelines")
+		return errorF(err)
+	}
+
+	if len(pipelineVersions) <= opts.PageSize {
+		return pipelineVersions, total_size, "", nil
+	}
+
+	npt, err := opts.NextPageToken(pipelineVersions[opts.PageSize])
+	return pipelineVersions[:opts.PageSize], total_size, npt, err
+}
+
+func (s *PipelineStore) DeletePipelineVersion(versionId string) error {
+	// If this version is used as default version for a pipeline, we have to
+	// find a new default version for that pipeline, which is usually the latest
+	// version of that pipeline. Then we'll have 3 operations in a single
+	// transactions: (1) delete version (2) get new default version id (3) use
+	// new default version id to update pipeline.
+	tx, err := s.db.Begin()
+	if err != nil {
+		return util.NewInternalServerError(
+			err,
+			"Failed to start an transaction while trying to delete pipeline version: %v",
+			err.Error())
+	}
+
+	// (1) delete version.
+	_, err = tx.Exec(
+		"delete from pipeline_versions where UUID = ?",
+		versionId)
+	if err != nil {
+		tx.Rollback()
+		return util.NewInternalServerError(
+			err,
+			"Failed to delete pipeline version: %v",
+			err.Error())
+	}
+
+	// (2) check whether this version is used as default version.
+	r, err := tx.Query(
+		"select UUID from pipelines where DefaultVersionId = ?",
+		versionId)
+	if err != nil {
+		tx.Rollback()
+		return util.NewInternalServerError(
+			err,
+			`Failed to query pipelines table while deleting pipeline version:
+			%v`,
+			err.Error())
+	}
+	var pipelineId = ""
+	if r.Next() {
+		if err := r.Scan(&pipelineId); err != nil {
+			tx.Rollback()
+			return util.NewInternalServerError(
+				err,
+				"Failed to get pipeline id for version id: %v",
+				err.Error())
+		}
+	}
+	if len(pipelineId) == 0 {
+		// The deleted version is not used as a default version. So no extra
+		// work is needed. We commit the deletion now.
+		if err := tx.Commit(); err != nil {
+			return util.NewInternalServerError(
+				err,
+				"Failed to delete pipeline version: %v",
+				err.Error())
+		}
+	}
+
+	// (3) find a new default version.
+	r, err = tx.Query(
+		`select UUID from pipeline_versions
+		where PipelineId = ? and Status = ?
+		order by CreatedAtInSec DESC
+		limit 1`,
+		pipelineId,
+		model.PipelineVersionReady)
+	if err != nil {
+		tx.Rollback()
+		return util.NewInternalServerError(
+			err,
+			"Failed to get a new default version id: %v",
+			err.Error())
+	}
+	var newDefaultVersionId = ""
+	if r.Next() {
+		if err := r.Scan(&newDefaultVersionId); err != nil {
+			tx.Rollback()
+			return util.NewInternalServerError(
+				err,
+				"Failed to get a new default version id: %v",
+				err.Error())
+		}
+	}
+	if len(newDefaultVersionId) == 0 {
+		// No new default version. The pipeline's default version id will be
+		// null.
+		_, err = tx.Exec(
+			"update pipelines set DefaultVerionId = null where UUID = ?",
+			pipelineId)
+		if err != nil {
+			tx.Rollback()
+			return util.NewInternalServerError(
+				err,
+				"Failed to update pipeline's default version id: %v",
+				err.Error())
+		}
+	} else {
+		_, err = tx.Exec(
+			"update pipelines set DefaultVersionId = ? where UUID = ?",
+			newDefaultVersionId, pipelineId)
+		if err != nil {
+			tx.Rollback()
+			return util.NewInternalServerError(
+				err,
+				"Failed to update pipeline's default version id: %v",
+				err.Error())
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		return util.NewInternalServerError(
+			err,
+			"Failed to delete pipeline version: %v",
+			err.Error())
+	}
+	return nil
+}
+
+// SetUUIDGenerator is for unit tests in other packages who need to set uuid,
+// since uuid is not exported.
+func (s *PipelineStore) SetUUIDGenerator(new_uuid util.UUIDGeneratorInterface) {
+	s.uuid = new_uuid
+}
diff --git a/backend/src/apiserver/storage/pipeline_store_test.go b/backend/src/apiserver/storage/pipeline_store_test.go
index 980acff52c3a..cc8ddbfcb4b3 100644
--- a/backend/src/apiserver/storage/pipeline_store_test.go
+++ b/backend/src/apiserver/storage/pipeline_store_test.go
@@ -29,6 +29,7 @@ const (
 	fakeUUIDTwo   = "123e4567-e89b-12d3-a456-426655440001"
 	fakeUUIDThree = "123e4567-e89b-12d3-a456-426655440002"
 	fakeUUIDFour  = "123e4567-e89b-12d3-a456-426655440003"
+	fakeUUIDFive  = "123e4567-e89b-12d3-a456-426655440004"
 )
 
 func createPipeline(name string) *model.Pipeline {
@@ -505,3 +506,721 @@ func TestUpdatePipelineStatusError(t *testing.T) {
 	err := pipelineStore.UpdatePipelineStatus(fakeUUID, model.PipelineDeleting)
 	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode())
 }
+
+func TestCreatePipelineVersion(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline first.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a version under the above pipeline.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineVersion := &model.PipelineVersion{
+		Name:          "pipeline_version_1",
+		Parameters:    `[{"Name": "param1"}]`,
+		PipelineId:    fakeUUID,
+		Status:        model.PipelineVersionCreating,
+		CodeSourceUrl: "code_source_url",
+	}
+	pipelineVersionCreated, err := pipelineStore.CreatePipelineVersion(
+		pipelineVersion)
+
+	// Check whether created pipeline version is as expected.
+	pipelineVersionExpected := model.PipelineVersion{
+		UUID:           fakeUUIDTwo,
+		CreatedAtInSec: 2,
+		Name:           "pipeline_version_1",
+		Parameters:     `[{"Name": "param1"}]`,
+		Status:         model.PipelineVersionCreating,
+		PipelineId:     fakeUUID,
+		CodeSourceUrl:  "code_source_url",
+	}
+	assert.Nil(t, err)
+	assert.Equal(
+		t,
+		pipelineVersionExpected,
+		*pipelineVersionCreated,
+		"Got unexpected pipeline.")
+
+	// Check whether pipeline has updated default version id.
+	pipeline, err := pipelineStore.GetPipeline(fakeUUID)
+	assert.Nil(t, err)
+	assert.Equal(t, pipeline.DefaultVersionId, fakeUUIDTwo, "Got unexpected default version id.")
+}
+
+func TestCreatePipelineVersion_DuplicateKey(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a version under the above pipeline.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionCreating,
+		})
+
+	// Create another new version with same name.
+	_, err := pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param2"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionCreating,
+		})
+	assert.NotNil(t, err)
+	assert.Contains(t, err.Error(), "The name pipeline_version_1 already exist")
+}
+
+func TestCreatePipelineVersion_InternalServerError_DBClosed(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	db.Close()
+	// Try to create a new version but db is closed.
+	_, err := pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+		})
+	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode(),
+		"Expected create pipeline version to return error")
+}
+
+func TestDeletePipelineVersion(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a version under the above pipeline.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create a second version, which will become the default version.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDThree, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_2",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Delete version with id being fakeUUIDThree.
+	err := pipelineStore.DeletePipelineVersion(fakeUUIDThree)
+	assert.Nil(t, err)
+
+	// Check version removed.
+	_, err = pipelineStore.GetPipelineVersion(fakeUUIDThree)
+	assert.Equal(t, codes.NotFound, err.(*util.UserError).ExternalStatusCode())
+
+	// Check new default version is version with id being fakeUUIDTwo.
+	pipeline, err := pipelineStore.GetPipeline(fakeUUID)
+	assert.Nil(t, err)
+	assert.Equal(t, pipeline.DefaultVersionId, fakeUUIDTwo)
+}
+
+func TestDeletePipelineVersionError(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a version under the above pipeline.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	db.Close()
+	// On closed db, create pipeline version ends in internal error.
+	err := pipelineStore.DeletePipelineVersion(fakeUUIDTwo)
+	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode())
+}
+
+func TestGetPipelineVersion(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a version under the above pipeline.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Get pipeline version.
+	pipelineVersion, err := pipelineStore.GetPipelineVersion(fakeUUIDTwo)
+	assert.Nil(t, err)
+	assert.Equal(
+		t,
+		model.PipelineVersion{
+			UUID:           fakeUUIDTwo,
+			Name:           "pipeline_version_1",
+			CreatedAtInSec: 2,
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+		*pipelineVersion, "Got unexpected pipeline version.")
+}
+
+func TestGetPipelineVersion_InternalError(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	db.Close()
+	// Internal error because of closed DB.
+	_, err := pipelineStore.GetPipelineVersion("123")
+	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode(),
+		"Expected get pipeline to return internal error")
+}
+
+func TestGetPipelineVersion_NotFound_VersionStatusCreating(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a version under the above pipeline.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionCreating,
+		})
+
+	_, err := pipelineStore.GetPipelineVersion(fakeUUIDTwo)
+	assert.Equal(t, codes.NotFound, err.(*util.UserError).ExternalStatusCode(),
+		"Expected get pipeline to return not found")
+}
+
+func TestGetPipelineVersion_NotFoundError(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	_, err := pipelineStore.GetPipelineVersion(fakeUUID)
+	assert.Equal(t, codes.NotFound, err.(*util.UserError).ExternalStatusCode(),
+		"Expected get pipeline to return not found")
+}
+
+func TestListPipelineVersion_FilterOutNotReady(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a first version with status ready.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create a second version with status ready.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDThree, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_2",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create a third version with status creating.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDFour, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_3",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionCreating,
+		})
+
+	pipelineVersionsExpected := []*model.PipelineVersion{
+		&model.PipelineVersion{
+			UUID:           fakeUUIDTwo,
+			CreatedAtInSec: 2,
+			Name:           "pipeline_version_1",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady},
+		&model.PipelineVersion{
+			UUID:           fakeUUIDThree,
+			CreatedAtInSec: 3,
+			Name:           "pipeline_version_2",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady}}
+
+	opts, err := list.NewOptions(&model.PipelineVersion{}, 10, "id", nil)
+	assert.Nil(t, err)
+
+	pipelineVersions, total_size, nextPageToken, err :=
+		pipelineStore.ListPipelineVersions(fakeUUID, opts)
+
+	assert.Nil(t, err)
+	assert.Equal(t, "", nextPageToken)
+	assert.Equal(t, 2, total_size)
+	assert.Equal(t, pipelineVersionsExpected, pipelineVersions)
+}
+
+func TestListPipelineVersions_Pagination(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create "version_1" with fakeUUIDTwo.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create "version_3" with fakeUUIDThree.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDThree, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_3",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create "version_2" with fakeUUIDFour.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDFour, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_2",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create "version_4" with fakeUUIDFive.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDFive, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_4",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// List results in 2 pages: first page containing version_1 and version_2;
+	// and second page containing verion_3 and version_4.
+	opts, err := list.NewOptions(&model.PipelineVersion{}, 2, "name", nil)
+	assert.Nil(t, err)
+	pipelineVersions, total_size, nextPageToken, err :=
+		pipelineStore.ListPipelineVersions(fakeUUID, opts)
+	assert.Nil(t, err)
+	assert.NotEmpty(t, nextPageToken)
+	assert.Equal(t, 4, total_size)
+
+	// First page.
+	assert.Equal(t, pipelineVersions, []*model.PipelineVersion{
+		&model.PipelineVersion{
+			UUID:           fakeUUIDTwo,
+			CreatedAtInSec: 2,
+			Name:           "pipeline_version_1",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+		&model.PipelineVersion{
+			UUID:           fakeUUIDFour,
+			CreatedAtInSec: 4,
+			Name:           "pipeline_version_2",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+	})
+
+	opts, err = list.NewOptionsFromToken(nextPageToken, 2)
+	assert.Nil(t, err)
+	pipelineVersions, total_size, nextPageToken, err =
+		pipelineStore.ListPipelineVersions(fakeUUID, opts)
+	assert.Nil(t, err)
+
+	// Second page.
+	assert.Empty(t, nextPageToken)
+	assert.Equal(t, 4, total_size)
+	assert.Equal(t, pipelineVersions, []*model.PipelineVersion{
+		&model.PipelineVersion{
+			UUID:           fakeUUIDThree,
+			CreatedAtInSec: 3,
+			Name:           "pipeline_version_3",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+		&model.PipelineVersion{
+			UUID:           fakeUUIDFive,
+			CreatedAtInSec: 5,
+			Name:           "pipeline_version_4",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+	})
+}
+
+func TestListPipelineVersions_Pagination_Descend(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create "version_1" with fakeUUIDTwo.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create "version_3" with fakeUUIDThree.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDThree, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_3",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create "version_2" with fakeUUIDFour.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDFour, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_2",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Create "version_4" with fakeUUIDFive.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDFive, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_4",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// List result in 2 pages: first page "version_4" and "version_3"; second
+	// page "version_2" and "version_1".
+	opts, err := list.NewOptions(&model.PipelineVersion{}, 2, "name desc", nil)
+	assert.Nil(t, err)
+	pipelineVersions, total_size, nextPageToken, err :=
+		pipelineStore.ListPipelineVersions(fakeUUID, opts)
+	assert.Nil(t, err)
+	assert.NotEmpty(t, nextPageToken)
+	assert.Equal(t, 4, total_size)
+
+	// First page.
+	assert.Equal(t, pipelineVersions, []*model.PipelineVersion{
+		&model.PipelineVersion{
+			UUID:           fakeUUIDFive,
+			CreatedAtInSec: 5,
+			Name:           "pipeline_version_4",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+		&model.PipelineVersion{
+			UUID:           fakeUUIDThree,
+			CreatedAtInSec: 3,
+			Name:           "pipeline_version_3",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+	})
+
+	opts, err = list.NewOptionsFromToken(nextPageToken, 2)
+	assert.Nil(t, err)
+	pipelineVersions, total_size, nextPageToken, err =
+		pipelineStore.ListPipelineVersions(fakeUUID, opts)
+	assert.Nil(t, err)
+	assert.Empty(t, nextPageToken)
+	assert.Equal(t, 4, total_size)
+
+	// Second Page.
+	assert.Equal(t, pipelineVersions, []*model.PipelineVersion{
+		&model.PipelineVersion{
+			UUID:           fakeUUIDFour,
+			CreatedAtInSec: 4,
+			Name:           "pipeline_version_2",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+		&model.PipelineVersion{
+			UUID:           fakeUUIDTwo,
+			CreatedAtInSec: 2,
+			Name:           "pipeline_version_1",
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+	})
+}
+
+func TestListPipelineVersions_Pagination_LessThanPageSize(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a version under the above pipeline.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	opts, err := list.NewOptions(&model.PipelineVersion{}, 2, "", nil)
+	assert.Nil(t, err)
+	pipelineVersions, total_size, nextPageToken, err :=
+		pipelineStore.ListPipelineVersions(fakeUUID, opts)
+	assert.Nil(t, err)
+	assert.Equal(t, "", nextPageToken)
+	assert.Equal(t, 1, total_size)
+	assert.Equal(t, pipelineVersions, []*model.PipelineVersion{
+		&model.PipelineVersion{
+			UUID:           fakeUUIDTwo,
+			Name:           "pipeline_version_1",
+			CreatedAtInSec: 2,
+			Parameters:     `[{"Name": "param1"}]`,
+			PipelineId:     fakeUUID,
+			Status:         model.PipelineVersionReady,
+		},
+	})
+}
+
+func TestListPipelineVersionsError(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	db.Close()
+	// Internal error because of closed DB.
+	opts, err := list.NewOptions(&model.PipelineVersion{}, 2, "", nil)
+	assert.Nil(t, err)
+	_, _, _, err = pipelineStore.ListPipelineVersions(fakeUUID, opts)
+	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode())
+}
+
+func TestUpdatePipelineVersionStatus(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	// Create a pipeline.
+	pipelineStore.CreatePipeline(
+		&model.Pipeline{
+			Name:       "pipeline_1",
+			Parameters: `[{"Name": "param1"}]`,
+			Status:     model.PipelineReady,
+		})
+
+	// Create a version under the above pipeline.
+	pipelineStore.uuid = util.NewFakeUUIDGeneratorOrFatal(fakeUUIDTwo, nil)
+	pipelineVersion, _ := pipelineStore.CreatePipelineVersion(
+		&model.PipelineVersion{
+			Name:       "pipeline_version_1",
+			Parameters: `[{"Name": "param1"}]`,
+			PipelineId: fakeUUID,
+			Status:     model.PipelineVersionReady,
+		})
+
+	// Change version to deleting status
+	err := pipelineStore.UpdatePipelineVersionStatus(
+		pipelineVersion.UUID, model.PipelineVersionDeleting)
+	assert.Nil(t, err)
+
+	// Check the new status by retrieving this pipeline version.
+	retrievedPipelineVersion, err :=
+		pipelineStore.GetPipelineVersionWithStatus(
+			pipelineVersion.UUID, model.PipelineVersionDeleting)
+	assert.Nil(t, err)
+	assert.Equal(t, *retrievedPipelineVersion, model.PipelineVersion{
+		UUID:           fakeUUIDTwo,
+		Name:           "pipeline_version_1",
+		CreatedAtInSec: 2,
+		Parameters:     `[{"Name": "param1"}]`,
+		PipelineId:     fakeUUID,
+		Status:         model.PipelineVersionDeleting,
+	})
+}
+
+func TestUpdatePipelineVersionStatusError(t *testing.T) {
+	db := NewFakeDbOrFatal()
+	defer db.Close()
+	pipelineStore := NewPipelineStore(
+		db,
+		util.NewFakeTimeForEpoch(),
+		util.NewFakeUUIDGeneratorOrFatal(fakeUUID, nil))
+
+	db.Close()
+	// Internal error because of closed DB.
+	err := pipelineStore.UpdatePipelineVersionStatus(
+		fakeUUID, model.PipelineVersionDeleting)
+	assert.Equal(t, codes.Internal, err.(*util.UserError).ExternalStatusCode())
+}
diff --git a/backend/src/apiserver/storage/resource_reference_store.go b/backend/src/apiserver/storage/resource_reference_store.go
index b0dab45cf53b..3a43dbfa32ee 100644
--- a/backend/src/apiserver/storage/resource_reference_store.go
+++ b/backend/src/apiserver/storage/resource_reference_store.go
@@ -18,7 +18,7 @@ var resourceReferenceColumns = []string{"ResourceUUID", "ResourceType", "Referen
 type ResourceReferenceStoreInterface interface {
 	// Retrieve the resource reference for a given resource id, type and a reference type.
 	GetResourceReference(resourceId string, resourceType common.ResourceType,
-			referenceType common.ResourceType) (*model.ResourceReference, error)
+		referenceType common.ResourceType) (*model.ResourceReference, error)
 }
 
 type ResourceReferenceStore struct {
@@ -62,6 +62,8 @@ func (s *ResourceReferenceStore) checkReferenceExist(tx *sql.Tx, referenceId str
 		selectBuilder = sq.Select("1").From("jobs").Where(sq.Eq{"uuid": referenceId})
 	case common.Experiment:
 		selectBuilder = sq.Select("1").From("experiments").Where(sq.Eq{"uuid": referenceId})
+	case common.PipelineVersion:
+		selectBuilder = sq.Select("1").From("pipeline_versions").Where(sq.Eq{"uuid": referenceId})
 	default:
 		return false
 	}
@@ -82,9 +84,9 @@ func (s *ResourceReferenceStore) checkReferenceExist(tx *sql.Tx, referenceId str
 func (s *ResourceReferenceStore) DeleteResourceReferences(tx *sql.Tx, id string, resourceType common.ResourceType) error {
 	refSql, refArgs, err := sq.
 		Delete("resource_references").
-			Where(sq.Or{
-				sq.Eq{"ResourceUUID": id, "ResourceType": resourceType},
-				sq.Eq{"ReferenceUUID": id, "ReferenceType": resourceType}}).
+		Where(sq.Or{
+			sq.Eq{"ResourceUUID": id, "ResourceType": resourceType},
+			sq.Eq{"ReferenceUUID": id, "ReferenceType": resourceType}}).
 		ToSql()
 	_, err = tx.Exec(refSql, refArgs...)
 	if err != nil {
@@ -94,24 +96,24 @@ func (s *ResourceReferenceStore) DeleteResourceReferences(tx *sql.Tx, id string,
 }
 
 func (s *ResourceReferenceStore) GetResourceReference(resourceId string, resourceType common.ResourceType,
-		referenceType common.ResourceType) (*model.ResourceReference, error) {
+	referenceType common.ResourceType) (*model.ResourceReference, error) {
 	sql, args, err := sq.Select(resourceReferenceColumns...).
 		From("resource_references").
-			Where(sq.Eq{
-				"ResourceUUID":  resourceId,
-				"ResourceType":  resourceType,
-				"ReferenceType": referenceType}).
+		Where(sq.Eq{
+			"ResourceUUID":  resourceId,
+			"ResourceType":  resourceType,
+			"ReferenceType": referenceType}).
 		Limit(1).ToSql()
 	if err != nil {
 		return nil, util.NewInternalServerError(err,
 			"Failed to create query to get resource reference. "+
-					"Resource ID: %s. Resource Type: %s. Reference Type: %s", resourceId, resourceType, referenceType)
+				"Resource ID: %s. Resource Type: %s. Reference Type: %s", resourceId, resourceType, referenceType)
 	}
 	row, err := s.db.Query(sql, args...)
 	if err != nil {
 		return nil, util.NewInternalServerError(err,
 			"Failed to get resource reference. "+
-					"Resource ID: %s. Resource Type: %s. Reference Type: %s", resourceId, resourceType, referenceType)
+				"Resource ID: %s. Resource Type: %s. Reference Type: %s", resourceId, resourceType, referenceType)
 	}
 	defer row.Close()
 	reference, err := s.scanRows(row)
diff --git a/backend/src/apiserver/visualization/third_party_licenses.csv b/backend/src/apiserver/visualization/third_party_licenses.csv
index b91b98f5e219..b213938a29dd 100644
--- a/backend/src/apiserver/visualization/third_party_licenses.csv
+++ b/backend/src/apiserver/visualization/third_party_licenses.csv
@@ -49,6 +49,7 @@ h5py,https://github.com/h5py/h5py/blob/master/LICENSE,BSD-3
 hdfs,https://github.com/mtth/hdfs/blob/master/LICENSE,MIT
 httplib2,https://github.com/httplib2/httplib2/blob/master/LICENSE,MIT
 idna,https://github.com/kjd/idna/blob/master/LICENSE.rst,BSD-3
+importlib-metadata,https://gitlab.com/python-devs/importlib_metadata/blob/master/LICENSE,Apache 2.0
 ipykernel,https://github.com/ipython/ipykernel/blob/master/COPYING.md,BSD-3
 ipython,https://github.com/ipython/ipython/blob/master/LICENSE,BSD-3
 ipython-genutils,https://github.com/ipython/ipython_genutils/blob/master/COPYING.md,BSD-3
@@ -56,6 +57,7 @@ ipywidgets,https://github.com/jupyter-widgets/ipywidgets/blob/master/LICENSE,BSD
 itables,https://github.com/mwouts/itables/blob/master/LICENSE,MIT
 jedi,https://github.com/davidhalter/jedi/blob/master/LICENSE.txt,MIT
 joblib,https://github.com/joblib/joblib/blob/master/LICENSE.txt,BSD-3
+js-regex,https://github.com/Zac-HD/js-regex/blob/master/LICENSE,Mozilla 2.0
 jsonschema,https://github.com/Julian/jsonschema/blob/master/COPYING,MIT
 jupyter,https://github.com/jupyter/jupyter/blob/master/LICENSE,BSD-3
 jupyter-client,https://github.com/jupyter/jupyter_client/blob/master/COPYING.md,BSD-3
@@ -64,9 +66,10 @@ jupyter-core,https://github.com/jupyter/jupyter_core/blob/master/COPYING.md,BSD-
 mistune,https://github.com/lepture/mistune/blob/master/LICENSE,BSD-3
 mock,https://github.com/testing-cabal/mock/blob/master/LICENSE.txt,BSD-2
 monotonic,https://github.com/atdt/monotonic/blob/master/LICENSE,Apache 2.0
+more-itertools,https://github.com/erikrose/more-itertools/blob/master/LICENSE,MIT
 nbconvert,https://github.com/jupyter/nbconvert/blob/master/LICENSE,BSD-3
 nbformat,https://github.com/jupyter/nbformat/blob/master/COPYING.md,BSD-3
-notebook,https://github.com/jupyter/notebook/blob/master/COPYING.md,BSD-3
+notebook,https://github.com/jupyter/notebook/blob/master/LICENSE,BSD-3
 numpy,https://github.com/numpy/numpy/blob/master/LICENSE.txt,BSD-3
 oauth2client,https://github.com/googleapis/oauth2client/blob/master/LICENSE,Apache 2.0
 oauthlib,https://github.com/oauthlib/oauthlib/blob/master/LICENSE,BSD-3
@@ -116,3 +119,4 @@ urllib3,https://github.com/urllib3/urllib3/blob/master/LICENSE.txt,MIT
 wcwidth,https://github.com/jquast/wcwidth/blob/master/LICENSE.txt,MIT
 webencodings,https://github.com/gsnedders/python-webencodings/blob/master/LICENSE,BSD-3
 widgetsnbextension,https://github.com/jupyter-widgets/ipywidgets/blob/master/widgetsnbextension/LICENSE,BSD-3
+zipp,https://github.com/jaraco/zipp/blob/master/LICENSE,MIT
diff --git a/backend/src/crd/controller/viewer/reconciler/reconciler.go b/backend/src/crd/controller/viewer/reconciler/reconciler.go
index a6287e651bc1..1792f47dd5f2 100644
--- a/backend/src/crd/controller/viewer/reconciler/reconciler.go
+++ b/backend/src/crd/controller/viewer/reconciler/reconciler.go
@@ -165,11 +165,14 @@ func setPodSpecForTensorboard(view *viewerV1beta1.Viewer, s *corev1.PodSpec) {
 
 	c := &s.Containers[0]
 	c.Name = view.Name + "-pod"
-	c.Image = "tensorflow/tensorflow"
+	c.Image = "tensorflow/tensorflow:1.13.2"
 	c.Args = []string{
 		"tensorboard",
 		fmt.Sprintf("--logdir=%s", view.Spec.TensorboardSpec.LogDir),
 		fmt.Sprintf("--path_prefix=/tensorboard/%s/", view.Name),
+		// This is needed for tf 2.0. We need to optionally add it
+		// when https://github.com/kubeflow/pipelines/issues/2514 is done
+		// "--bind_all",
 	}
 	c.Ports = []corev1.ContainerPort{
 		corev1.ContainerPort{ContainerPort: viewerTargetPort},
diff --git a/backend/src/crd/controller/viewer/reconciler/reconciler_test.go b/backend/src/crd/controller/viewer/reconciler/reconciler_test.go
index 19df04a4254e..c6a996eb67df 100644
--- a/backend/src/crd/controller/viewer/reconciler/reconciler_test.go
+++ b/backend/src/crd/controller/viewer/reconciler/reconciler_test.go
@@ -174,7 +174,7 @@ func TestReconcile_EachViewerCreatesADeployment(t *testing.T) {
 				Spec: corev1.PodSpec{
 					Containers: []corev1.Container{{
 						Name:  "viewer-123-pod",
-						Image: "tensorflow/tensorflow",
+						Image: "tensorflow/tensorflow:1.13.2",
 						Args: []string{
 							"tensorboard",
 							"--logdir=gs://tensorboard/logdir",
@@ -271,7 +271,7 @@ func TestReconcile_ViewerUsesSpecifiedVolumeMountsForDeployment(t *testing.T) {
 				Spec: corev1.PodSpec{
 					Containers: []corev1.Container{{
 						Name:  "viewer-123-pod",
-						Image: "tensorflow/tensorflow",
+						Image: "tensorflow/tensorflow:1.13.2",
 						Args: []string{
 							"tensorboard",
 							"--logdir=gs://tensorboard/logdir",
diff --git a/backend/test/integration/pipeline_api_test.go b/backend/test/integration/pipeline_api_test.go
index 4ad99ca07d19..f0f427413d6d 100644
--- a/backend/test/integration/pipeline_api_test.go
+++ b/backend/test/integration/pipeline_api_test.go
@@ -195,6 +195,19 @@ func verifyPipeline(t *testing.T, pipeline *model.APIPipeline) {
 			{Name: "param1", Value: "hello"}, // Default value in the pipeline template
 			{Name: "param2"},                 // No default value in the pipeline
 		},
+		// TODO(jingzhang36): after version API launch, remove the following field.
+		// This is because after the version API launch, we won't have defautl
+		// version produced automatically when creating pipeline.
+		DefaultVersion: &model.APIPipelineVersion{
+			CreatedAt: pipeline.CreatedAt,
+			ID:        pipeline.ID,
+			Name:      "arguments-parameters.yaml",
+			Parameters: []*model.APIParameter{
+				{Name: "param1", Value: "hello"},
+				{Name: "param2"}},
+			ResourceReferences: []*model.APIResourceReference{{
+				Key:          &model.APIResourceKey{ID: pipeline.ID, Type: model.APIResourceTypePIPELINE},
+				Relationship: model.APIRelationshipOWNER}}},
 	}
 	assert.Equal(t, expected, *pipeline)
 }
diff --git a/components/gcp/automl/export_data_to_gcs/component.py b/components/gcp/automl/export_data_to_gcs/component.py
new file mode 100644
index 000000000000..499129f7635d
--- /dev/null
+++ b/components/gcp/automl/export_data_to_gcs/component.py
@@ -0,0 +1,53 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from typing import NamedTuple
+
+
+def automl_export_data_to_gcs(
+    dataset_path: str,
+    gcs_output_uri_prefix: str = None,
+    #retry=None, #=google.api_core.gapic_v1.method.DEFAULT,
+    timeout: float = None, #=google.api_core.gapic_v1.method.DEFAULT,
+    metadata: dict = {},
+) -> NamedTuple('Outputs', [('gcs_output_uri_prefix', str)]):
+    """Exports dataset data to GCS."""
+    import sys
+    import subprocess
+    subprocess.run([sys.executable, "-m", "pip", "install", "google-cloud-automl==0.4.0", "--quiet", "--no-warn-script-location"], env={"PIP_DISABLE_PIP_VERSION_CHECK": "1"}, check=True)
+
+    import google
+    from google.cloud import automl
+    client = automl.AutoMlClient()
+
+    output_config = {"gcs_destination": {"output_uri_prefix": gcs_output_uri_prefix}}
+
+    response = client.export_data(
+        name=dataset_path,
+        output_config=output_config,
+        #retry=retry or google.api_core.gapic_v1.method.DEFAULT
+        timeout=timeout or google.api_core.gapic_v1.method.DEFAULT,
+        metadata=metadata,
+    )
+    print('Operation started:')
+    print(response.operation)
+    result = response.result()
+    metadata = response.metadata
+    print('Operation finished:')
+    print(metadata)
+    return (gcs_output_uri_prefix, )
+
+if __name__ == '__main__':
+    import kfp
+    kfp.components.func_to_container_op(automl_export_data_to_gcs, output_component_file='component.yaml', base_image='python:3.7')
diff --git a/components/gcp/automl/export_data_to_gcs/component.yaml b/components/gcp/automl/export_data_to_gcs/component.yaml
new file mode 100644
index 000000000000..2a7778eb0d72
--- /dev/null
+++ b/components/gcp/automl/export_data_to_gcs/component.yaml
@@ -0,0 +1,113 @@
+name: Automl export data to gcs
+description: |
+  Exports dataset data to GCS.
+inputs:
+- name: dataset_path
+  type: String
+- name: gcs_output_uri_prefix
+  optional: true
+  type: String
+- name: timeout
+  optional: true
+  type: Float
+- default: '{}'
+  name: metadata
+  optional: true
+  type: JsonObject
+outputs:
+- name: gcs_output_uri_prefix
+  type: String
+implementation:
+  container:
+    image: python:3.7
+    command:
+    - python3
+    - -u
+    - -c
+    - |
+      from typing import NamedTuple
+
+      def automl_export_data_to_gcs(
+          dataset_path: str,
+          gcs_output_uri_prefix: str = None,
+          #retry=None, #=google.api_core.gapic_v1.method.DEFAULT,
+          timeout: float = None, #=google.api_core.gapic_v1.method.DEFAULT,
+          metadata: dict = {},
+      ) -> NamedTuple('Outputs', [('gcs_output_uri_prefix', str)]):
+          """Exports dataset data to GCS."""
+          import sys
+          import subprocess
+          subprocess.run([sys.executable, "-m", "pip", "install", "google-cloud-automl==0.4.0", "--quiet", "--no-warn-script-location"], env={"PIP_DISABLE_PIP_VERSION_CHECK": "1"}, check=True)
+
+          import google
+          from google.cloud import automl
+          client = automl.AutoMlClient()
+
+          output_config = {"gcs_destination": {"output_uri_prefix": gcs_output_uri_prefix}}
+
+          response = client.export_data(
+              name=dataset_path,
+              output_config=output_config,
+              #retry=retry or google.api_core.gapic_v1.method.DEFAULT
+              timeout=timeout or google.api_core.gapic_v1.method.DEFAULT,
+              metadata=metadata,
+          )
+          print('Operation started:')
+          print(response.operation)
+          result = response.result()
+          metadata = response.metadata
+          print('Operation finished:')
+          print(metadata)
+          return (gcs_output_uri_prefix, )
+
+      import json
+      import argparse
+      _parser = argparse.ArgumentParser(prog='Automl export data to gcs', description='Exports dataset data to GCS.\n')
+      _parser.add_argument("--dataset-path", dest="dataset_path", type=str, required=True, default=argparse.SUPPRESS)
+      _parser.add_argument("--gcs-output-uri-prefix", dest="gcs_output_uri_prefix", type=str, required=False, default=argparse.SUPPRESS)
+      _parser.add_argument("--timeout", dest="timeout", type=float, required=False, default=argparse.SUPPRESS)
+      _parser.add_argument("--metadata", dest="metadata", type=json.loads, required=False, default=argparse.SUPPRESS)
+      _parser.add_argument("----output-paths", dest="_output_paths", type=str, nargs=1)
+      _parsed_args = vars(_parser.parse_args())
+      _output_files = _parsed_args.pop("_output_paths", [])
+
+      _outputs = automl_export_data_to_gcs(**_parsed_args)
+
+      if not hasattr(_outputs, '__getitem__') or isinstance(_outputs, str):
+          _outputs = [_outputs]
+
+      _output_serializers = [
+          str
+      ]
+
+      import os
+      for idx, output_file in enumerate(_output_files):
+          try:
+              os.makedirs(os.path.dirname(output_file))
+          except OSError:
+              pass
+          with open(output_file, 'w') as f:
+              f.write(_output_serializers[idx](_outputs[idx]))
+    args:
+    - --dataset-path
+    - inputValue: dataset_path
+    - if:
+        cond:
+          isPresent: gcs_output_uri_prefix
+        then:
+        - --gcs-output-uri-prefix
+        - inputValue: gcs_output_uri_prefix
+    - if:
+        cond:
+          isPresent: timeout
+        then:
+        - --timeout
+        - inputValue: timeout
+    - if:
+        cond:
+          isPresent: metadata
+        then:
+        - --metadata
+        - inputValue: metadata
+    - '----output-paths'
+    - outputPath: gcs_output_uri_prefix
diff --git a/components/gcp/bigquery/query/README.md b/components/gcp/bigquery/query/README.md
index 4e1f738b2fbb..dcfff192646f 100644
--- a/components/gcp/bigquery/query/README.md
+++ b/components/gcp/bigquery/query/README.md
@@ -89,7 +89,7 @@ KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar
 import kfp.components as comp
 
 bigquery_query_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/bigquery/query/component.yaml')
+    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/bigquery/query/component.yaml')
 help(bigquery_query_op)
 ```
 
diff --git a/components/gcp/bigquery/query/component.yaml b/components/gcp/bigquery/query/component.yaml
index da9cd3f334ed..28b1374ebf48 100644
--- a/components/gcp/bigquery/query/component.yaml
+++ b/components/gcp/bigquery/query/component.yaml
@@ -59,7 +59,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.bigquery, query,
       --query, {inputValue: query},
diff --git a/components/gcp/bigquery/query/sample.ipynb b/components/gcp/bigquery/query/sample.ipynb
index 02a12e7be451..40548462536c 100644
--- a/components/gcp/bigquery/query/sample.ipynb
+++ b/components/gcp/bigquery/query/sample.ipynb
@@ -108,7 +108,7 @@
     "import kfp.components as comp\n",
     "\n",
     "bigquery_query_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/bigquery/query/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/bigquery/query/component.yaml')\n",
     "help(bigquery_query_op)"
    ]
   },
diff --git a/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_common_ops.py b/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_common_ops.py
index fd3949fddbdf..d60a30e173ae 100644
--- a/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_common_ops.py
+++ b/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_common_ops.py
@@ -68,7 +68,7 @@ def wait_for_operation_done(ml_client, operation_name, action, wait_interval):
         ))
     return operation
 
-def wait_for_job_done(ml_client, project_id, job_id, wait_interval):
+def wait_for_job_done(ml_client, project_id, job_id, wait_interval, show_tensorboard=True):
     """Waits for a CMLE job done.
 
     Args:
@@ -76,6 +76,7 @@ def wait_for_job_done(ml_client, project_id, job_id, wait_interval):
         project_id: the ID of the project which has the job
         job_id: the ID of the job to wait
         wait_interval: the interval in seconds to wait between polls.
+        show_tensorboard: True to dump Tensorboard metadata.
 
     Returns:
         The completed job.
@@ -88,7 +89,7 @@ def wait_for_job_done(ml_client, project_id, job_id, wait_interval):
         job = ml_client.get_job(project_id, job_id)
         print(job)
         if not metadata_dumped:
-            _dump_job_metadata(project_id, job_id, job)
+            _dump_job_metadata(project_id, job_id, job, show_tensorboard=show_tensorboard)
             metadata_dumped = True
         if job.get('state', None) in ['SUCCEEDED', 'FAILED', 'CANCELLED']:
             break
@@ -104,7 +105,7 @@ def wait_for_job_done(ml_client, project_id, job_id, wait_interval):
             job['state'], job.get('errorMessage', '')))
     return job
 
-def _dump_job_metadata(project_id, job_id, job):
+def _dump_job_metadata(project_id, job_id, job, show_tensorboard=True):
     display.display(display.Link(
         'https://console.cloud.google.com/mlengine/jobs/{}?project={}'.format(
             job_id, project_id),
@@ -115,7 +116,7 @@ def _dump_job_metadata(project_id, job_id, job):
             project_id, job_id),
         'Logs'
     ))
-    if 'trainingInput' in job and 'jobDir' in job['trainingInput']:
+    if show_tensorboard and 'trainingInput' in job and 'jobDir' in job['trainingInput']:
         display.display(display.Tensorboard(
             job['trainingInput']['jobDir']))
 
diff --git a/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_wait_job.py b/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_wait_job.py
index 472ba2c14c50..b6d9c2e53910 100644
--- a/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_wait_job.py
+++ b/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_wait_job.py
@@ -18,7 +18,7 @@
 from ._client import MLEngineClient
 from .. import common as gcp_common
 
-def wait_job(project_id, job_id, wait_interval=30):
+def wait_job(project_id, job_id, wait_interval=30, show_tensorboard=True):
     """Waits a MLEngine job.
 
     Args:
@@ -26,6 +26,7 @@ def wait_job(project_id, job_id, wait_interval=30):
         job_id (str): Required. The ID of the job to wait.
         wait_interval (int): optional wait interval between calls
             to get job status. Defaults to 30.
+        show_tensorboard (bool): optional. True to dump Tensorboard metadata.
 
     Outputs:
         /tmp/kfp/output/ml_engine/job.json: The json payload of the waiting job.
@@ -34,4 +35,4 @@ def wait_job(project_id, job_id, wait_interval=30):
     """
     ml_client = MLEngineClient()
     with KfpExecutionContext(on_cancel=lambda: cancel_job(ml_client, project_id, job_id)):
-        return wait_for_job_done(ml_client, project_id, job_id, wait_interval)
\ No newline at end of file
+        return wait_for_job_done(ml_client, project_id, job_id, wait_interval, show_tensorboard = show_tensorboard)
\ No newline at end of file
diff --git a/components/gcp/container/component_sdk/python/setup.py b/components/gcp/container/component_sdk/python/setup.py
index 31367f1000ca..6c52292a3cc5 100644
--- a/components/gcp/container/component_sdk/python/setup.py
+++ b/components/gcp/container/component_sdk/python/setup.py
@@ -15,7 +15,7 @@
 from setuptools import setup
 
 PACKAGE_NAME = 'kfp-component'
-VERSION = '0.1.31'
+VERSION = '0.1.34'
 
 setup(
     name=PACKAGE_NAME,
diff --git a/components/gcp/dataflow/launch_python/README.md b/components/gcp/dataflow/launch_python/README.md
index be57d9e729be..28ef1e287d13 100644
--- a/components/gcp/dataflow/launch_python/README.md
+++ b/components/gcp/dataflow/launch_python/README.md
@@ -1,12 +1,34 @@
 
 # Name
-Data preparation by executing an Apache Beam job in Cloud Dataflow
+Component: Data preparation by executing an Apache Beam job in Cloud Dataflow
 
 # Labels
-GCP, Cloud Dataflow, Apache Beam, Python, Kubeflow
+Cloud Dataflow, Apache Beam, Kubeflow
 
 # Summary
-A Kubeflow Pipeline component that prepares data by submitting an Apache Beam job (authored in Python) to Cloud Dataflow for execution. The Python Beam code is run with Cloud Dataflow Runner.
+A Kubeflow pipeline component that prepares data by submitting an Apache Beam job (authored in Python) to Cloud Dataflow for execution. The Python Beam code is run with Cloud Dataflow Runner.
+
+# Facets
+<!--Make sure the asset has data for the following facets:
+Use case
+Technique
+Input data type
+ML workflow
+
+The data must map to the acceptable values for these facets, as documented on the “taxonomy” sheet of go/aihub-facets
+https://gitlab.aihub-content-external.com/aihubbot/kfp-components/commit/fe387ab46181b5d4c7425dcb8032cb43e70411c1
+--->
+Use case:
+Other
+
+Technique: 
+Other
+
+Input data type:
+Tabular
+
+ML workflow: 
+Data preparation
 
 # Details
 ## Intended use
@@ -16,12 +38,12 @@ Use this component to run a Python Beam code to submit a Cloud Dataflow job as a
 ## Runtime arguments
 Name | Description | Optional |  Data type| Accepted values | Default |
 :--- | :----------| :----------| :----------| :----------| :---------- |
-python_file_path |  The path to the Cloud Storage bucket or local directory containing the Python file to be run. |  |  GCSPath |  |  |
-project_id |  The ID of the Google Cloud Platform (GCP) project  containing the Cloud Dataflow job.| | GCPProjectID | | |
-staging_dir  |   The path to the Cloud Storage directory where the staging files are stored. A random subdirectory will be created under the staging directory to keep the  job information.This is done so that you can resume the job in case of failure. `staging_dir` is passed as the command line arguments (`staging_location` and `temp_location`) of the Beam code. |   Yes  |   GCSPath  |   |   None  |
-requirements_file_path |   The path to the Cloud Storage bucket or local directory containing the pip requirements file. | Yes | GCSPath |  | None |
+python_file_path |  The path to the Cloud Storage bucket or local directory containing the Python file to be run. | - |  GCSPath | - | - |
+project_id |  The ID of the Google Cloud Platform (GCP) project  containing the Cloud Dataflow job.| -| GCPProjectID | -| -|
+staging_dir  |   The path to the Cloud Storage directory where the staging files are stored. A random subdirectory will be created under the staging directory to keep the  job information.This is done so that you can resume the job in case of failure. The command line arguments, `staging_location` and `temp_location`, of the Beam code are passed through `staging_dir`. |   Yes  |   GCSPath  |  - |   None  |
+requirements_file_path |   The path to the Cloud Storage bucket or local directory containing the pip requirements file. | Yes | GCSPath | - | None |
 args |  The list of arguments to pass to the Python file. | No |  List | A list of string arguments | None |
-wait_interval |  The number of seconds to wait between calls to get the status of the job. | Yes | Integer  |  | 30 |
+wait_interval |  The number of seconds to wait between calls to get the status of the job. | Yes | Integer  | - | 30 |
 
 ## Input data schema
 
@@ -31,21 +53,20 @@ Before you use the component, the following files must be ready in a Cloud Stora
 
 The Beam Python code should follow the [Beam programming guide](https://beam.apache.org/documentation/programming-guide/) as well as the following additional requirements to be compatible with this component:
 - It accepts the command line arguments `--project`, `--temp_location`, `--staging_location`, which are [standard Dataflow Runner options](https://cloud.google.com/dataflow/docs/guides/specifying-exec-params#setting-other-cloud-pipeline-options).
-- It enables `info logging` before the start of a Cloud Dataflow job in the Python code. This is important to allow the component to track the status and ID of the job that is created. For example, calling `logging.getLogger().setLevel(logging.INFO)` before any other code.
-
+- It enables `info logging` before the start of a Cloud Dataflow job in the Python code. This allows the component to track the status and ID of the job that is created. For example, calling `logging.getLogger().setLevel(logging.INFO)` before any other code.
 
 ## Output
 Name | Description
 :--- | :----------
-job_id | The id of the Cloud Dataflow job that is created.
+job_id | The ID of the Cloud Dataflow job that is created.
 
 ## Cautions & requirements
 To use the components, the following requirements must be met:
 - Cloud Dataflow API is enabled.
-- The component is running under a secret Kubeflow user service account in a Kubeflow Pipeline cluster.  For example:
-```
-component_op(...).apply(gcp.use_gcp_secret('user-gcp-sa'))
-```
+- The component is running under a secret Kubeflow user service account in a Kubeflow Pipelines cluster.  For example:
+    ```
+    component_op(...).apply(gcp.use_gcp_secret('user-gcp-sa'))
+    ```
 The Kubeflow user service account is a member of:
 - `roles/dataflow.developer` role of the project.
 - `roles/storage.objectViewer` role of the Cloud Storage Objects `python_file_path` and `requirements_file_path`.
@@ -59,83 +80,49 @@ The component does several things during the execution:
 - Stores the Cloud Dataflow job information in `staging_dir` so the job can be resumed in case of failure.
 - Waits for the job to finish.
 The steps to use the component in a pipeline are:
-1. Install the Kubeflow Pipelines SDK:
+1. Install the Kubeflow pipeline's SDK:
 
+    ```python
+    %%capture --no-stderr
 
+    KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
+    !pip3 install $KFP_PACKAGE --upgrade
+    ```
 
-```python
-%%capture --no-stderr
-
-KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
-!pip3 install $KFP_PACKAGE --upgrade
-```
-
-2. Load the component using KFP SDK
+2. Load the component using the Kubeflow pipeline's SDK:
 
+    ```python
+    import kfp.components as comp
 
-```python
-import kfp.components as comp
-
-dataflow_python_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataflow/launch_python/component.yaml')
-help(dataflow_python_op)
-```
+    dataflow_python_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataflow/launch_python/component.yaml')
+    help(dataflow_python_op)
+    ```
 
 ### Sample
-Note: The following sample code works in an IPython notebook or directly in Python code. See the sample code below to learn how to execute the template.
-In this sample, we run a wordcount sample code in a Kubeflow Pipeline. The output will be stored in a Cloud Storage bucket. Here is the sample code:
-
+The following sample code works in an IPython notebook or directly in Python code. See the sample code below to learn how to execute the template.
+In this sample, we run a wordcount sample code in a Kubeflow pipeline. The output will be stored in a Cloud Storage bucket. Here is the sample code:
 
 ```python
 !gsutil cat gs://ml-pipeline-playground/samples/dataflow/wc/wc.py
 ```
-
-    #
-    # Licensed to the Apache Software Foundation (ASF) under one or more
-    # contributor license agreements.  See the NOTICE file distributed with
-    # this work for additional information regarding copyright ownership.
-    # The ASF licenses this file to You under the Apache License, Version 2.0
-    # (the "License"); you may not use this file except in compliance with
-    # the License.  You may obtain a copy of the License at
-    #
-    #    http://www.apache.org/licenses/LICENSE-2.0
-    #
-    # Unless required by applicable law or agreed to in writing, software
-    # distributed under the License is distributed on an "AS IS" BASIS,
-    # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    # See the License for the specific language governing permissions and
-    # limitations under the License.
-    #
-    
-    """A minimalist word-counting workflow that counts words in Shakespeare.
-    
-    This is the first in a series of successively more detailed 'word count'
-    examples.
-    
-    Next, see the wordcount pipeline, then the wordcount_debugging pipeline, for
-    more detailed examples that introduce additional concepts.
     
-    Concepts:
+Concepts:
     
-    1. Reading data from text files
-    2. Specifying 'inline' transforms
-    3. Counting a PCollection
-    4. Writing data to Cloud Storage as text files
-    
-    To execute this pipeline locally, first edit the code to specify the output
-    location. Output location could be a local file path or an output prefix
-    on GCS. (Only update the output location marked with the first CHANGE comment.)
+1. Reading data from text files.
+2. Specifying inline transforms.
+3. Counting a PCollection.
+4. Writing data to Cloud Storage as text files.
+
+Notes: 
+
+To execute this pipeline locally, first edit the code to specify the output location. Output location could be a local file path or an output prefix on Cloud Storage. (Only update the output location marked with the first CHANGE comment in the following code.)
     
-    To execute this pipeline remotely, first edit the code to set your project ID,
-    runner type, the staging location, the temp location, and the output location.
-    The specified GCS bucket(s) must already exist. (Update all the places marked
-    with a CHANGE comment.)
+To execute this pipeline remotely, first edit the code to set your project ID, runner type, the staging location, the temp location, and the output location.
+The specified Cloud Storage bucket(s) must already exist. (Update all the places marked with a CHANGE comment in the following code.)
     
-    Then, run the pipeline as described in the README. It will be deployed and run
-    using the Google Cloud Dataflow Service. No args are required to run the
-    pipeline. You can see the results in your output bucket in the GCS browser.
-    """
+Then, run the pipeline as described in the README. It will be deployed and run using the Cloud Dataflow service. No arguments are required to run the pipeline. You can see the results in your output bucket in the Cloud Storage browser.
     
+```python
     from __future__ import absolute_import
     
     import argparse
@@ -161,22 +148,22 @@ In this sample, we run a wordcount sample code in a Kubeflow Pipeline. The outpu
                           help='Input file to process.')
       parser.add_argument('--output',
                           dest='output',
-                          # CHANGE 1/5: The Google Cloud Storage path is required
-                          # for outputting the results.
+                          # CHANGE 1/5: The Cloud Storage path is required
+                          # to output the results.
                           default='gs://YOUR_OUTPUT_BUCKET/AND_OUTPUT_PREFIX',
                           help='Output file to write results to.')
       known_args, pipeline_args = parser.parse_known_args(argv)
       # pipeline_args.extend([
       #     # CHANGE 2/5: (OPTIONAL) Change this to DataflowRunner to
-      #     # run your pipeline on the Google Cloud Dataflow Service.
+      #     # run your pipeline on the Cloud Dataflow Service.
       #     '--runner=DirectRunner',
       #     # CHANGE 3/5: Your project ID is required in order to run your pipeline on
-      #     # the Google Cloud Dataflow Service.
+      #     # the Cloud Dataflow Service.
       #     '--project=SET_YOUR_PROJECT_ID_HERE',
-      #     # CHANGE 4/5: Your Google Cloud Storage path is required for staging local
+      #     # CHANGE 4/5: Your Cloud Storage path is required for staging local
       #     # files.
       #     '--staging_location=gs://YOUR_BUCKET_NAME/AND_STAGING_DIRECTORY',
-      #     # CHANGE 5/5: Your Google Cloud Storage path is required for temporary
+      #     # CHANGE 5/5: Your Cloud Storage path is required for temporary
       #     # files.
       #     '--temp_location=gs://YOUR_BUCKET_NAME/AND_TEMP_DIRECTORY',
       #     '--job_name=your-wordcount-job',
@@ -214,27 +201,24 @@ In this sample, we run a wordcount sample code in a Kubeflow Pipeline. The outpu
     if __name__ == '__main__':
       logging.getLogger().setLevel(logging.INFO)
       run()
-
+```
 
 #### Set sample parameters
 
-
 ```python
-# Required Parameters
-PROJECT_ID = '<Please put your project ID here>'
-GCS_STAGING_DIR = 'gs://<Please put your GCS path here>' # No ending slash
+# Required parameters
+PROJECT_ID = '<Put your project ID here>'
+GCS_STAGING_DIR = 'gs://<Put your GCS path here>' # No ending slash
 ```
 
-
 ```python
-# Optional Parameters
+# Optional parameters
 EXPERIMENT_NAME = 'Dataflow - Launch Python'
 OUTPUT_FILE = '{}/wc/wordcount.out'.format(GCS_STAGING_DIR)
 ```
 
 #### Example pipeline that uses the component
 
-
 ```python
 import kfp.dsl as dsl
 import kfp.gcp as gcp
@@ -264,7 +248,6 @@ def pipeline(
 
 #### Compile the pipeline
 
-
 ```python
 pipeline_func = pipeline
 pipeline_filename = pipeline_func.__name__ + '.zip'
@@ -274,12 +257,11 @@ compiler.Compiler().compile(pipeline_func, pipeline_filename)
 
 #### Submit the pipeline for execution
 
-
 ```python
-#Specify pipeline argument values
+#Specify values for the pipeline's arguments
 arguments = {}
 
-#Get or create an experiment and submit a pipeline run
+#Get or create an experiment
 import kfp
 client = kfp.Client()
 experiment = client.create_experiment(EXPERIMENT_NAME)
@@ -291,14 +273,13 @@ run_result = client.run_pipeline(experiment.id, run_name, pipeline_filename, arg
 
 #### Inspect the output
 
-
 ```python
 !gsutil cat $OUTPUT_FILE
 ```
 
 ## References
-* [Component python code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/dataflow/_launch_python.py)
-* [Component docker file](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/Dockerfile)
+* [Component Python code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/dataflow/_launch_python.py)
+* [Component Docker file](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/Dockerfile)
 * [Sample notebook](https://github.com/kubeflow/pipelines/blob/master/components/gcp/dataflow/launch_python/sample.ipynb)
 * [Dataflow Python Quickstart](https://cloud.google.com/dataflow/docs/quickstarts/quickstart-python)
 
diff --git a/components/gcp/dataflow/launch_python/component.yaml b/components/gcp/dataflow/launch_python/component.yaml
index e3f1978ef143..fedee29d94f0 100644
--- a/components/gcp/dataflow/launch_python/component.yaml
+++ b/components/gcp/dataflow/launch_python/component.yaml
@@ -53,7 +53,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataflow, launch_python,
       --python_file_path, {inputValue: python_file_path},
diff --git a/components/gcp/dataflow/launch_python/sample.ipynb b/components/gcp/dataflow/launch_python/sample.ipynb
index 80adefc4f370..0a216fa92955 100644
--- a/components/gcp/dataflow/launch_python/sample.ipynb
+++ b/components/gcp/dataflow/launch_python/sample.ipynb
@@ -95,7 +95,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataflow_python_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataflow/launch_python/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataflow/launch_python/component.yaml')\n",
     "help(dataflow_python_op)"
    ]
   },
diff --git a/components/gcp/dataflow/launch_template/README.md b/components/gcp/dataflow/launch_template/README.md
index 32773fcfa6c3..5a2f6f4c05ad 100644
--- a/components/gcp/dataflow/launch_template/README.md
+++ b/components/gcp/dataflow/launch_template/README.md
@@ -67,7 +67,7 @@ KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar
 import kfp.components as comp
 
 dataflow_template_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataflow/launch_template/component.yaml')
+    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataflow/launch_template/component.yaml')
 help(dataflow_template_op)
 ```
 
diff --git a/components/gcp/dataflow/launch_template/component.yaml b/components/gcp/dataflow/launch_template/component.yaml
index 071033f0961f..baa7b8960544 100644
--- a/components/gcp/dataflow/launch_template/component.yaml
+++ b/components/gcp/dataflow/launch_template/component.yaml
@@ -63,7 +63,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataflow, launch_template,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataflow/launch_template/sample.ipynb b/components/gcp/dataflow/launch_template/sample.ipynb
index 8e8ab9605708..767f7e5d8273 100644
--- a/components/gcp/dataflow/launch_template/sample.ipynb
+++ b/components/gcp/dataflow/launch_template/sample.ipynb
@@ -85,7 +85,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataflow_template_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataflow/launch_template/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataflow/launch_template/component.yaml')\n",
     "help(dataflow_template_op)"
    ]
   },
diff --git a/components/gcp/dataproc/create_cluster/README.md b/components/gcp/dataproc/create_cluster/README.md
index 743e1159b77f..7c40a5185d95 100644
--- a/components/gcp/dataproc/create_cluster/README.md
+++ b/components/gcp/dataproc/create_cluster/README.md
@@ -92,7 +92,7 @@ Follow these steps to use the component in a pipeline:
     ```python
     import kfp.components as comp
 
-    dataproc_create_cluster_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/create_cluster/component.yaml')
+    dataproc_create_cluster_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/create_cluster/component.yaml')
     help(dataproc_create_cluster_op)
     ```
 
diff --git a/components/gcp/dataproc/create_cluster/component.yaml b/components/gcp/dataproc/create_cluster/component.yaml
index 555c9f394a92..f251d3b23c5e 100644
--- a/components/gcp/dataproc/create_cluster/component.yaml
+++ b/components/gcp/dataproc/create_cluster/component.yaml
@@ -70,7 +70,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataproc, create_cluster,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataproc/create_cluster/sample.ipynb b/components/gcp/dataproc/create_cluster/sample.ipynb
index d5295ce6bc75..b7ee5167fa5b 100644
--- a/components/gcp/dataproc/create_cluster/sample.ipynb
+++ b/components/gcp/dataproc/create_cluster/sample.ipynb
@@ -92,7 +92,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataproc_create_cluster_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/create_cluster/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/create_cluster/component.yaml')\n",
     "help(dataproc_create_cluster_op)"
    ]
   },
diff --git a/components/gcp/dataproc/delete_cluster/README.md b/components/gcp/dataproc/delete_cluster/README.md
index 56f409789a02..62fb340ceafa 100644
--- a/components/gcp/dataproc/delete_cluster/README.md
+++ b/components/gcp/dataproc/delete_cluster/README.md
@@ -70,7 +70,7 @@ Follow these steps to use the component in a pipeline:
     ```python
     import kfp.components as comp
 
-    dataproc_delete_cluster_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/delete_cluster/component.yaml')
+    dataproc_delete_cluster_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/delete_cluster/component.yaml')
     help(dataproc_delete_cluster_op)
     ```
 
diff --git a/components/gcp/dataproc/delete_cluster/component.yaml b/components/gcp/dataproc/delete_cluster/component.yaml
index 6f97e1c46a3f..408f67bb0e94 100644
--- a/components/gcp/dataproc/delete_cluster/component.yaml
+++ b/components/gcp/dataproc/delete_cluster/component.yaml
@@ -36,7 +36,7 @@ inputs:
     type: Integer
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataproc, delete_cluster,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataproc/delete_cluster/sample.ipynb b/components/gcp/dataproc/delete_cluster/sample.ipynb
index feda7414e002..debc67411185 100644
--- a/components/gcp/dataproc/delete_cluster/sample.ipynb
+++ b/components/gcp/dataproc/delete_cluster/sample.ipynb
@@ -75,7 +75,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataproc_delete_cluster_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/delete_cluster/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/delete_cluster/component.yaml')\n",
     "help(dataproc_delete_cluster_op)"
    ]
   },
diff --git a/components/gcp/dataproc/submit_hadoop_job/README.md b/components/gcp/dataproc/submit_hadoop_job/README.md
index e9e784efbcaa..038a1c23721f 100644
--- a/components/gcp/dataproc/submit_hadoop_job/README.md
+++ b/components/gcp/dataproc/submit_hadoop_job/README.md
@@ -1,33 +1,52 @@
 
 # Name
-Data preparation using Hadoop MapReduce on YARN with Cloud Dataproc
+Component: Data preparation using Hadoop MapReduce on YARN with Cloud Dataproc
 
-# Label
-Cloud Dataproc, GCP, Cloud Storage, Hadoop, YARN, Apache, MapReduce
+# Labels
+Cloud Dataproc, Hadoop, YARN, Apache, MapReduce
 
 
 # Summary
-A Kubeflow Pipeline component to prepare data by submitting an Apache Hadoop MapReduce job on Apache Hadoop YARN to Cloud Dataproc.
+A Kubeflow pipeline component to prepare data by submitting an Apache Hadoop MapReduce job on Apache Hadoop YARN to Cloud Dataproc.
+
+# Facets
+<!--Make sure the asset has data for the following facets:
+Use case
+Technique
+Input data type
+ML workflow
+
+The data must map to the acceptable values for these facets, as documented on the “taxonomy” sheet of go/aihub-facets
+https://gitlab.aihub-content-external.com/aihubbot/kfp-components/commit/fe387ab46181b5d4c7425dcb8032cb43e70411c1
+--->
+Use case:
+
+Technique: 
+
+Input data type:
+
+ML workflow: 
 
 # Details
 ## Intended use
-Use the component to run an Apache Hadoop MapReduce job as one preprocessing step in a Kubeflow  Pipeline. 
+Use the component to run an Apache Hadoop MapReduce job as one preprocessing step in a Kubeflow pipeline. 
 
 ## Runtime arguments
 | Argument | Description | Optional | Data type | Accepted values | Default |
 |----------|-------------|----------|-----------|-----------------|---------|
-| project_id | The Google Cloud Platform (GCP) project ID that the cluster belongs to. | No | GCPProjectID |  |  |
-| region | The Dataproc region to handle the request. | No | GCPRegion |  |  |
-| cluster_name | The name of the cluster to run the job. | No | String |  |  |
-| main_jar_file_uri | The Hadoop Compatible Filesystem (HCFS) URI of the JAR file containing the main class to execute. | No | List |  |  |
-| main_class | The name of the driver's main class. The JAR file that contains the class must be either in the default CLASSPATH or specified in `hadoop_job.jarFileUris`. | No | String |  |  |
-| args | The arguments to pass to the driver. Do not include arguments, such as -libjars or -Dfoo=bar, that can be set as job properties, since a collision may occur that causes an incorrect job submission. | Yes | List |  | None |
-| hadoop_job | The payload of a [HadoopJob](https://cloud.google.com/dataproc/docs/reference/rest/v1/HadoopJob). | Yes | Dict |  | None |
-| job | The payload of a [Dataproc job](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs). | Yes | Dict |  | None |
-| wait_interval | The number of seconds to pause between polling the operation. | Yes | Integer |  | 30 |
-
-Note: 
-`main_jar_file_uri`: The examples for the files are : 
+| project_id | The Google Cloud Platform (GCP) project ID that the cluster belongs to. | No | GCPProjectID | - | - |
+| region | The Dataproc region to handle the request. | No | GCPRegion | - | - |
+| cluster_name | The name of the cluster to run the job. | No | String | - | - |
+| main_jar_file_uri | The Hadoop Compatible Filesystem (HCFS) URI of the JAR file containing the main class to execute. | No | List |-  |-  |
+| main_class | The name of the driver's main class. The JAR file that contains the class must be either in the default CLASSPATH or specified in `hadoop_job.jarFileUris`. | No | String |-  | - |
+| args | The arguments to pass to the driver. Do not include arguments, such as -libjars or -Dfoo=bar, that can be set as job properties, since a collision may occur that causes an incorrect job submission. | Yes | List | - | None |
+| hadoop_job | The payload of a [HadoopJob](https://cloud.google.com/dataproc/docs/reference/rest/v1/HadoopJob). | Yes | Dict | - | None |
+| job | The payload of a [Dataproc job](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs). | Yes | Dict |  -| None |
+| wait_interval | The number of seconds to pause between polling the operation. | Yes | Integer | - | 30 |
+
+Note:
+
+`main_jar_file_uri`: The examples for the files are: 
 - `gs://foo-bucket/analytics-binaries/extract-useful-metrics-mr.jar` 
 - `hdfs:/tmp/test-samples/custom-wordcount.jarfile:///home/usr/lib/hadoop-mapreduce/hadoop-mapreduce-examples.jar`
 
@@ -46,78 +65,67 @@ To use the component, you must:
     ```python
     component_op(...).apply(gcp.use_gcp_secret('user-gcp-sa'))
     ```
-*   Grant the Kubeflow user service account the role `roles/dataproc.editor` on the project.
+*   Grant the Kubeflow user service account the role, `roles/dataproc.editor`, on the project.
 
 ## Detailed description
 
-This component creates a Hadoop job from [Dataproc submit job REST API](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs/submit).
+This component creates a Hadoop job from the [Dataproc submit job REST API](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs/submit).
 
 Follow these steps to use the component in a pipeline:
 
-1.  Install the Kubeflow Pipeline SDK:
-
+1.  Install the Kubeflow pipeline's SDK:
 
+    ```python
+    %%capture --no-stderr
 
-```python
-%%capture --no-stderr
-
-KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
-!pip3 install $KFP_PACKAGE --upgrade
-```
-
-2. Load the component using KFP SDK
-
+    KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
+    !pip3 install $KFP_PACKAGE --upgrade
+    ```
 
-```python
-import kfp.components as comp
+2. Load the component using the Kubeflow pipeline's SDK:
 
-dataproc_submit_hadoop_job_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_hadoop_job/component.yaml')
-help(dataproc_submit_hadoop_job_op)
-```
+    ```python
+    import kfp.components as comp
 
-## Sample
-Note: The following sample code works in an IPython notebook or directly in Python code. See the sample code below to learn how to execute the template.
+    dataproc_submit_hadoop_job_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_hadoop_job/component.yaml')
+    help(dataproc_submit_hadoop_job_op)
+    ```
 
+### Sample
+The following sample code works in an IPython notebook or directly in Python code. See the sample code below to learn how to execute the template.
 
-### Setup a Dataproc cluster
+#### Setup a Dataproc cluster
 [Create a new Dataproc cluster](https://cloud.google.com/dataproc/docs/guides/create-cluster) (or reuse an existing one) before running the sample code.
 
 
 ### Prepare a Hadoop job
-Upload your Hadoop JAR file to a Cloud Storage bucket. In the sample, we will use a JAR file that is preinstalled in the main cluster, so there is no need to provide `main_jar_file_uri`. 
-
-Here is the [WordCount example source code](https://github.com/apache/hadoop/blob/trunk/hadoop-mapreduce-project/hadoop-mapreduce-examples/src/main/java/org/apache/hadoop/examples/WordCount.java).
+Upload your Hadoop JAR file to a Cloud Storage bucket. In the sample, we will use a JAR file that is preinstalled in the main cluster, so you don't have to provide the argument, `main_jar_file_uri`. 
 
-To package a self-contained Hadoop MapReduce application from the source code, follow the [MapReduce Tutorial](https://hadoop.apache.org/docs/current/hadoop-mapreduce-client/hadoop-mapreduce-client-core/MapReduceTutorial.html).
-
-
-### Set sample parameters
+To package a self-contained Hadoop MapReduce application from the [WordCount example source code](https://github.com/apache/hadoop/blob/trunk/hadoop-mapreduce-project/hadoop-mapreduce-examples/src/main/java/org/apache/hadoop/examples/WordCount.java), follow the [MapReduce Tutorial](https://hadoop.apache.org/docs/current/hadoop-mapreduce-client/hadoop-mapreduce-client-core/MapReduceTutorial.html).
 
+#### Set sample parameters
 
 ```python
-PROJECT_ID = '<Please put your project ID here>'
-CLUSTER_NAME = '<Please put your existing cluster name here>'
-OUTPUT_GCS_PATH = '<Please put your output GCS path here>'
+PROJECT_ID = '<Put your project ID here>'
+CLUSTER_NAME = '<Put your existing cluster name here>'
+OUTPUT_GCS_PATH = '<Put your output GCS path here>'
 REGION = 'us-central1'
 MAIN_CLASS = 'org.apache.hadoop.examples.WordCount'
 INTPUT_GCS_PATH = 'gs://ml-pipeline-playground/shakespeare1.txt'
 EXPERIMENT_NAME = 'Dataproc - Submit Hadoop Job'
 ```
 
-#### Insepct Input Data
+#### Inspect the input data
 The input file is a simple text file:
 
-
 ```python
 !gsutil cat $INTPUT_GCS_PATH
 ```
 
-### Clean up the existing output files (optional)
-This is needed because the sample code requires the output folder to be a clean folder. To continue to run the sample, make sure that the service account of the notebook server has access to the `OUTPUT_GCS_PATH`.
-
-CAUTION: This will remove all blob files under `OUTPUT_GCS_PATH`.
+#### Clean up the existing output files (optional)
+This is needed because the sample code requires the output folder to be a clean folder. To continue to run the sample, make sure that the service account of the notebook server has access to `OUTPUT_GCS_PATH`.
 
+Caution: This will remove all blob files under `OUTPUT_GCS_PATH`.
 
 ```python
 !gsutil rm $OUTPUT_GCS_PATH/**
@@ -125,7 +133,6 @@ CAUTION: This will remove all blob files under `OUTPUT_GCS_PATH`.
 
 #### Example pipeline that uses the component
 
-
 ```python
 import kfp.dsl as dsl
 import kfp.gcp as gcp
@@ -174,10 +181,10 @@ compiler.Compiler().compile(pipeline_func, pipeline_filename)
 
 
 ```python
-#Specify pipeline argument values
+#Specify values for the pipeline's arguments
 arguments = {}
 
-#Get or create an experiment and submit a pipeline run
+#Get or create an experiment
 import kfp
 client = kfp.Client()
 experiment = client.create_experiment(EXPERIMENT_NAME)
@@ -187,10 +194,9 @@ run_name = pipeline_func.__name__ + ' run'
 run_result = client.run_pipeline(experiment.id, run_name, pipeline_filename, arguments)
 ```
 
-### Inspect the output
+#### Inspect the output
 The sample in the notebook will count the words in the input text and save them in sharded files. The command to inspect the output is:
 
-
 ```python
 !gsutil cat $OUTPUT_GCS_PATH/*
 ```
@@ -201,5 +207,5 @@ The sample in the notebook will count the words in the input text and save them
 *   [Sample notebook](https://github.com/kubeflow/pipelines/blob/master/components/gcp/dataproc/submit_hadoop_job/sample.ipynb)
 *   [Dataproc HadoopJob](https://cloud.google.com/dataproc/docs/reference/rest/v1/HadoopJob)
 
-## License
+# License
 By deploying or using this software you agree to comply with the [AI Hub Terms of Service](https://aihub.cloud.google.com/u/0/aihub-tos) and the [Google APIs Terms of Service](https://developers.google.com/terms/). To the extent of a direct conflict of terms, the AI Hub Terms of Service will control.
diff --git a/components/gcp/dataproc/submit_hadoop_job/component.yaml b/components/gcp/dataproc/submit_hadoop_job/component.yaml
index f18d11ab9a21..4b39fd921f36 100644
--- a/components/gcp/dataproc/submit_hadoop_job/component.yaml
+++ b/components/gcp/dataproc/submit_hadoop_job/component.yaml
@@ -80,7 +80,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataproc, submit_hadoop_job,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataproc/submit_hadoop_job/sample.ipynb b/components/gcp/dataproc/submit_hadoop_job/sample.ipynb
index 653b1e06d52e..14da69202c4a 100644
--- a/components/gcp/dataproc/submit_hadoop_job/sample.ipynb
+++ b/components/gcp/dataproc/submit_hadoop_job/sample.ipynb
@@ -90,7 +90,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataproc_submit_hadoop_job_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_hadoop_job/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_hadoop_job/component.yaml')\n",
     "help(dataproc_submit_hadoop_job_op)"
    ]
   },
diff --git a/components/gcp/dataproc/submit_hive_job/README.md b/components/gcp/dataproc/submit_hive_job/README.md
index 9c15b6e83f28..910c24cb12aa 100644
--- a/components/gcp/dataproc/submit_hive_job/README.md
+++ b/components/gcp/dataproc/submit_hive_job/README.md
@@ -1,16 +1,34 @@
 
 # Name
-Data preparation using Apache Hive on YARN with Cloud Dataproc
+Component: Data preparation using Apache Hive on YARN with Cloud Dataproc
 
 # Label
-Cloud Dataproc, GCP, Cloud Storage, YARN, Hive, Apache
+Cloud Dataproc, YARN, Apache Hive
 
 # Summary
-A Kubeflow Pipeline component to prepare data by submitting an Apache Hive job on YARN to Cloud Dataproc.
+A Kubeflow pipeline component to prepare data by submitting an Apache Hive job on YARN to Cloud Dataproc.
+
+# Facets
+<!--Make sure the asset has data for the following facets:
+Use case
+Technique
+Input data type
+ML workflow
+
+The data must map to the acceptable values for these facets, as documented on the “taxonomy” sheet of go/aihub-facets
+https://gitlab.aihub-content-external.com/aihubbot/kfp-components/commit/fe387ab46181b5d4c7425dcb8032cb43e70411c1
+--->
+Use case:
+
+Technique: 
+
+Input data type:
+
+ML workflow: 
 
 # Details
 ## Intended use
-Use the component to run an Apache Hive job as one preprocessing step in a Kubeflow Pipeline.
+Use the component to run an Apache Hive job as one preprocessing step in a Kubeflow pipeline.
 
 ## Runtime arguments
 | Argument | Description | Optional | Data type | Accepted values | Default |
@@ -19,9 +37,9 @@ Use the component to run an Apache Hive job as one preprocessing step in a Kubef
 | region | The Cloud Dataproc region to handle the request. | No | GCPRegion |  |  |
 | cluster_name | The name of the cluster to run the job. | No | String |  |  |
 | queries | The queries to execute the Hive job. Specify multiple queries in one string by separating them with semicolons. You do not need to terminate queries with semicolons. | Yes | List |  | None |
-| query_file_uri | The HCFS URI of the script that contains the Hive queries. | Yes | GCSPath |  | None |
+| query_file_uri | The Hadoop Compatible Filesystem (HCFS) URI of the script that contains the Hive queries. | Yes | GCSPath |  | None |
 | script_variables | Mapping of the query’s variable names to their values (equivalent to the Hive command: SET name="value";). | Yes | Dict |  | None |
-| hive_job | The payload of a [HiveJob](https://cloud.google.com/dataproc/docs/reference/rest/v1/HiveJob) | Yes | Dict |  | None |
+| hive_job | The payload of a [Hive job](https://cloud.google.com/dataproc/docs/reference/rest/v1/HiveJob) | Yes | Dict |  | None |
 | job | The payload of a [Dataproc job](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs). | Yes | Dict |  | None |
 | wait_interval | The number of seconds to pause between polling the operation. | Yes | Integer |  | 30 |
 
@@ -42,34 +60,30 @@ To use the component, you must:
 *   Grant the Kubeflow user service account the role `roles/dataproc.editor` on the project.
 
 ## Detailed description
-This component creates a Hive job from [Dataproc submit job REST API](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs/submit).
+This component creates a Hive job from the [Dataproc submit job REST API](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs/submit).
 
 Follow these steps to use the component in a pipeline:
-1.  Install the Kubeflow Pipeline SDK:
-
-
-
-```python
-%%capture --no-stderr
+1.  Install the Kubeflow pipeline's SDK:
 
-KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
-!pip3 install $KFP_PACKAGE --upgrade
-```
+    ```python
+    %%capture --no-stderr
 
-2. Load the component using KFP SDK
+    KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
+    !pip3 install $KFP_PACKAGE --upgrade
+    ```
 
+2. Load the component using the Kubeflow pipeline's SDK:
 
-```python
-import kfp.components as comp
+    ```python
+    import kfp.components as comp
 
-dataproc_submit_hive_job_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_hive_job/component.yaml')
-help(dataproc_submit_hive_job_op)
-```
+    dataproc_submit_hive_job_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_hive_job/component.yaml')
+    help(dataproc_submit_hive_job_op)
+    ```
 
 ### Sample
 
-Note: The following sample code works in an IPython notebook or directly in Python code. See the sample code below to learn how to execute the template.
+The following sample code works in an IPython notebook or directly in Python code. See the sample code below to learn how to execute the template.
 
 
 #### Setup a Dataproc cluster
@@ -78,17 +92,15 @@ Note: The following sample code works in an IPython notebook or directly in Pyth
 
 #### Prepare a Hive query
 
-Put your Hive queries in the queries list, or upload your Hive queries into a file saved in a Cloud Storage bucket and then enter the Cloud Storage bucket’s path  in `query_file_uri.` In this sample, we will use a hard coded query in the queries list to select data from a public CSV file from Cloud Storage.
+You can put your Hive queries in the `queries` list, or you can use `query_file_uri`. In this sample, we will use a hard coded query in the `queries` list to select data from a public CSV file in Cloud Storage.
 
 For more details, see the [Hive language manual.](https://cwiki.apache.org/confluence/display/Hive/LanguageManual)
 
-
 #### Set sample parameters
 
-
 ```python
-PROJECT_ID = '<Please put your project ID here>'
-CLUSTER_NAME = '<Please put your existing cluster name here>'
+PROJECT_ID = '<Put your project ID here>'
+CLUSTER_NAME = '<Put your existing cluster name here>'
 REGION = 'us-central1'
 QUERY = '''
 DROP TABLE IF EXISTS natality_csv;
@@ -160,10 +172,10 @@ compiler.Compiler().compile(pipeline_func, pipeline_filename)
 
 
 ```python
-#Specify pipeline argument values
+#Specify values for the pipeline's arguments
 arguments = {}
 
-#Get or create an experiment and submit a pipeline run
+#Get or create an experiment 
 import kfp
 client = kfp.Client()
 experiment = client.create_experiment(EXPERIMENT_NAME)
@@ -174,8 +186,8 @@ run_result = client.run_pipeline(experiment.id, run_name, pipeline_filename, arg
 ```
 
 ## References
-*   [Component python code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/dataproc/_submit_hive_job.py)
-*   [Component docker file](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/Dockerfile)
+*   [Component Python code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/dataproc/_submit_hive_job.py)
+*   [Component Docker file](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/Dockerfile)
 *   [Sample notebook](https://github.com/kubeflow/pipelines/blob/master/components/gcp/dataproc/submit_hive_job/sample.ipynb)
 *   [Dataproc HiveJob](https://cloud.google.com/dataproc/docs/reference/rest/v1/HiveJob)
 
diff --git a/components/gcp/dataproc/submit_hive_job/component.yaml b/components/gcp/dataproc/submit_hive_job/component.yaml
index 5120514f0582..5245ec6a7945 100644
--- a/components/gcp/dataproc/submit_hive_job/component.yaml
+++ b/components/gcp/dataproc/submit_hive_job/component.yaml
@@ -75,7 +75,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataproc, submit_hive_job,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataproc/submit_hive_job/sample.ipynb b/components/gcp/dataproc/submit_hive_job/sample.ipynb
index 27e1e4f4eb62..1523cef3ec31 100644
--- a/components/gcp/dataproc/submit_hive_job/sample.ipynb
+++ b/components/gcp/dataproc/submit_hive_job/sample.ipynb
@@ -81,7 +81,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataproc_submit_hive_job_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_hive_job/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_hive_job/component.yaml')\n",
     "help(dataproc_submit_hive_job_op)"
    ]
   },
diff --git a/components/gcp/dataproc/submit_pig_job/README.md b/components/gcp/dataproc/submit_pig_job/README.md
index 921a6efc1713..2b9b81275fb5 100644
--- a/components/gcp/dataproc/submit_pig_job/README.md
+++ b/components/gcp/dataproc/submit_pig_job/README.md
@@ -86,7 +86,7 @@ Follow these steps to use the component in a pipeline:
     ```python
     import kfp.components as comp
 
-    dataproc_submit_pig_job_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_pig_job/component.yaml')
+    dataproc_submit_pig_job_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_pig_job/component.yaml')
     help(dataproc_submit_pig_job_op)
     ```
 
diff --git a/components/gcp/dataproc/submit_pig_job/component.yaml b/components/gcp/dataproc/submit_pig_job/component.yaml
index f7df48896b4e..a5ed8de7029c 100644
--- a/components/gcp/dataproc/submit_pig_job/component.yaml
+++ b/components/gcp/dataproc/submit_pig_job/component.yaml
@@ -75,7 +75,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataproc, submit_pig_job,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataproc/submit_pig_job/sample.ipynb b/components/gcp/dataproc/submit_pig_job/sample.ipynb
index e3a518b5e899..1f672c2ce567 100644
--- a/components/gcp/dataproc/submit_pig_job/sample.ipynb
+++ b/components/gcp/dataproc/submit_pig_job/sample.ipynb
@@ -84,7 +84,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataproc_submit_pig_job_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_pig_job/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_pig_job/component.yaml')\n",
     "help(dataproc_submit_pig_job_op)"
    ]
   },
diff --git a/components/gcp/dataproc/submit_pyspark_job/README.md b/components/gcp/dataproc/submit_pyspark_job/README.md
index e2f1340f5729..b5a430826e66 100644
--- a/components/gcp/dataproc/submit_pyspark_job/README.md
+++ b/components/gcp/dataproc/submit_pyspark_job/README.md
@@ -83,7 +83,7 @@ Follow these steps to use the component in a pipeline:
     ```python
     import kfp.components as comp
 
-    dataproc_submit_pyspark_job_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_pyspark_job/component.yaml')
+    dataproc_submit_pyspark_job_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_pyspark_job/component.yaml')
     help(dataproc_submit_pyspark_job_op)
     ```
 
diff --git a/components/gcp/dataproc/submit_pyspark_job/component.yaml b/components/gcp/dataproc/submit_pyspark_job/component.yaml
index 526b0bf71581..87ab605b4f12 100644
--- a/components/gcp/dataproc/submit_pyspark_job/component.yaml
+++ b/components/gcp/dataproc/submit_pyspark_job/component.yaml
@@ -69,7 +69,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataproc, submit_pyspark_job,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataproc/submit_pyspark_job/sample.ipynb b/components/gcp/dataproc/submit_pyspark_job/sample.ipynb
index c79de4ae1ec7..a5c7b050d17b 100644
--- a/components/gcp/dataproc/submit_pyspark_job/sample.ipynb
+++ b/components/gcp/dataproc/submit_pyspark_job/sample.ipynb
@@ -86,7 +86,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataproc_submit_pyspark_job_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_pyspark_job/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_pyspark_job/component.yaml')\n",
     "help(dataproc_submit_pyspark_job_op)"
    ]
   },
diff --git a/components/gcp/dataproc/submit_spark_job/README.md b/components/gcp/dataproc/submit_spark_job/README.md
index 7b0fbd23bf79..cca22ec06a81 100644
--- a/components/gcp/dataproc/submit_spark_job/README.md
+++ b/components/gcp/dataproc/submit_spark_job/README.md
@@ -101,7 +101,7 @@ Follow these steps to use the component in a pipeline:
     import kfp.components as comp
 
     dataproc_submit_spark_job_op = comp.load_component_from_url(
-        'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_spark_job/component.yaml')
+        'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_spark_job/component.yaml')
     help(dataproc_submit_spark_job_op)
     ```
 
diff --git a/components/gcp/dataproc/submit_spark_job/component.yaml b/components/gcp/dataproc/submit_spark_job/component.yaml
index 1a8f2b052108..267695312db6 100644
--- a/components/gcp/dataproc/submit_spark_job/component.yaml
+++ b/components/gcp/dataproc/submit_spark_job/component.yaml
@@ -76,7 +76,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataproc, submit_spark_job,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataproc/submit_spark_job/sample.ipynb b/components/gcp/dataproc/submit_spark_job/sample.ipynb
index 907c2ba8ca51..e11c83e64389 100644
--- a/components/gcp/dataproc/submit_spark_job/sample.ipynb
+++ b/components/gcp/dataproc/submit_spark_job/sample.ipynb
@@ -99,7 +99,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataproc_submit_spark_job_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_spark_job/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_spark_job/component.yaml')\n",
     "help(dataproc_submit_spark_job_op)"
    ]
   },
diff --git a/components/gcp/dataproc/submit_sparksql_job/README.md b/components/gcp/dataproc/submit_sparksql_job/README.md
index 2d1256a357b1..ad7ba209f57e 100644
--- a/components/gcp/dataproc/submit_sparksql_job/README.md
+++ b/components/gcp/dataproc/submit_sparksql_job/README.md
@@ -1,30 +1,48 @@
 
 # Name
-Data preparation using SparkSQL  on YARN with Cloud Dataproc
+Component: Data preparation using SparkSQL on YARN with Cloud Dataproc
 
 # Label
-Cloud Dataproc, GCP, Cloud Storage, YARN, SparkSQL, Kubeflow, pipelines, components 
+Cloud Dataproc, YARN, SparkSQL, Kubeflow
 
 # Summary
-A Kubeflow Pipeline component to prepare data by submitting a SparkSql job on YARN to Cloud Dataproc.
+A Kubeflow pipeline component to prepare data by submitting a SparkSql job on YARN to Cloud Dataproc.
+
+# Facets
+<!--Make sure the asset has data for the following facets:
+Use case
+Technique
+Input data type
+ML workflow
+
+The data must map to the acceptable values for these facets, as documented on the “taxonomy” sheet of go/aihub-facets
+https://gitlab.aihub-content-external.com/aihubbot/kfp-components/commit/fe387ab46181b5d4c7425dcb8032cb43e70411c1
+--->
+Use case:
+
+Technique: 
+
+Input data type:
+
+ML workflow: 
 
 # Details
 
 ## Intended use
-Use the component to run an Apache SparkSql job as one preprocessing step in a Kubeflow Pipeline.
+Use the component to run an Apache SparkSql job as one preprocessing step in a Kubeflow pipeline.
 
 ## Runtime arguments
 Argument| Description | Optional | Data type| Accepted values| Default |
 :--- | :---------- | :--- | :------- | :------ | :------
-project_id | The ID of the Google Cloud Platform (GCP) project that the cluster belongs to. | No| GCPProjectID |   | |
-region | The Cloud Dataproc region to handle the request. | No | GCPRegion|
-cluster_name | The name of the cluster to run the job. | No | String| | |
-queries | The queries to execute the SparkSQL job. Specify multiple queries in one string by separating them with semicolons. You do not need to terminate queries with semicolons. | Yes | List |  | None | 
-query_file_uri | The HCFS URI of the script that contains the SparkSQL queries.| Yes | GCSPath |  | None |
-script_variables | Mapping of the query’s variable names to their values (equivalent to the SparkSQL command: SET name="value";).| Yes| Dict | | None |
-sparksql_job | The payload of a [SparkSqlJob](https://cloud.google.com/dataproc/docs/reference/rest/v1/SparkSqlJob). | Yes | Dict |  | None |
-job | The payload of a [Dataproc job](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs). | Yes | Dict |  | None |
-wait_interval | The number of seconds to pause between polling the operation. | Yes |Integer |  | 30 |
+project_id | The ID of the Google Cloud Platform (GCP) project that the cluster belongs to. | No| GCPProjectID | -  | -|
+region | The Cloud Dataproc region to handle the request. | No | GCPRegion|-|-
+cluster_name | The name of the cluster to run the job. | No | String| -| -|
+queries | The queries to execute the SparkSQL job. Specify multiple queries in one string by separating them with semicolons. You do not need to terminate queries with semicolons. | Yes | List | - | None | 
+query_file_uri | The Hadoop Compatible Filesystem (HCFS) URI of the script that contains the SparkSQL queries. The SparkSQL queries are listed in a CSV file that is stored in a Cloud Storage bucket.| Yes | GCSPath | - | None |
+script_variables | Mapping of the query’s variable names to their values (equivalent to the SparkSQL command: SET name="value";).| Yes| Dict |- | None |
+sparksql_job | The payload of a [SparkSql job](https://cloud.google.com/dataproc/docs/reference/rest/v1/SparkSqlJob). | Yes | Dict | - | None |
+job | The payload of a [Dataproc job](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs). | Yes | Dict | - | None |
+wait_interval | The number of seconds to pause between polling the operation. | Yes |Integer | - | 30 |
 
 ## Output
 Name | Description | Type
@@ -36,54 +54,50 @@ To use the component, you must:
 * Set up a GCP project by following this [guide](https://cloud.google.com/dataproc/docs/guides/setup-project).
 * [Create a new cluster](https://cloud.google.com/dataproc/docs/guides/create-cluster).
 * Run the component under a secret [Kubeflow user service account](https://www.kubeflow.org/docs/started/getting-started-gke/#gcp-service-accounts) in a Kubeflow cluster. For example:
-```
-component_op(...).apply(gcp.use_gcp_secret('user-gcp-sa'))
-```
-* Grant the Kubeflow user service account the role `roles/dataproc.editor` on the project.
+    ```
+    component_op(...).apply(gcp.use_gcp_secret('user-gcp-sa'))
+    ```
+* Grant the Kubeflow user service account the role, `roles/dataproc.editor`, on the project.
 
 ## Detailed Description
-This component creates a Pig job from [Dataproc submit job REST API](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs/submit).
+This component creates a SparkSql job from the [Dataproc submit job REST API](https://cloud.google.com/dataproc/docs/reference/rest/v1/projects.regions.jobs/submit).
 
 Follow these steps to use the component in a pipeline:
-1. Install the Kubeflow Pipeline SDK:
+1. Install the Kubeflow pipeline's SDK:
 
+    ```python
+    %%capture --no-stderr
 
-```python
-%%capture --no-stderr
+    KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
+    !pip3 install $KFP_PACKAGE --upgrade
+    ```
 
-KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
-!pip3 install $KFP_PACKAGE --upgrade
-```
+2. Load the component using the Kubeflow pipeline's SDK:
 
-2. Load the component using KFP SDK
+    ```python
+    import kfp.components as comp
 
-
-```python
-import kfp.components as comp
-
-dataproc_submit_sparksql_job_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_sparksql_job/component.yaml')
-help(dataproc_submit_sparksql_job_op)
-```
+    dataproc_submit_sparksql_job_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_sparksql_job/component.yaml')
+    help(dataproc_submit_sparksql_job_op)
+    ```
 
 ### Sample
 
-Note: The following sample code works in an IPython notebook or directly in Python code. See the sample code below to learn how to execute the template.
+The following sample code works in an IPython notebook or directly in Python code. See the sample code below to learn how to execute the template.
 
 #### Setup a Dataproc cluster
 [Create a new Dataproc cluster](https://cloud.google.com/dataproc/docs/guides/create-cluster) (or reuse an existing one) before running the sample code.
 
 #### Prepare a SparkSQL job
-Either put your SparkSQL queries in the `queires` list, or upload your SparkSQL queries into a file to a Cloud Storage bucket and then enter the Cloud Storage bucket’s path in `query_file_uri`. In this sample, we will use a hard coded query in the `queries` list to select data from a public CSV file from Cloud Storage.
+You can put your SparkSQL queries in the `queries` list, or you can use `query_file_uri`. In this sample, we will use a hard coded query in the `queries` list to select data from a public CSV file in Cloud Storage.
 
-For more details about Spark SQL, see [Spark SQL, DataFrames and Datasets Guide](https://spark.apache.org/docs/latest/sql-programming-guide.html)
+For more details about Spark SQL, see [Spark SQL, DataFrames and Datasets Guide](https://spark.apache.org/docs/latest/sql-programming-guide.html).
 
 #### Set sample parameters
 
-
 ```python
-PROJECT_ID = '<Please put your project ID here>'
-CLUSTER_NAME = '<Please put your existing cluster name here>'
+PROJECT_ID = '<Put your project ID here>'
+CLUSTER_NAME = '<Put your existing cluster name here>'
 REGION = 'us-central1'
 QUERY = '''
 DROP TABLE IF EXISTS natality_csv;
@@ -108,7 +122,6 @@ EXPERIMENT_NAME = 'Dataproc - Submit SparkSQL Job'
 
 #### Example pipeline that uses the component
 
-
 ```python
 import kfp.dsl as dsl
 import kfp.gcp as gcp
@@ -143,7 +156,6 @@ def dataproc_submit_sparksql_job_pipeline(
 
 #### Compile the pipeline
 
-
 ```python
 pipeline_func = dataproc_submit_sparksql_job_pipeline
 pipeline_filename = pipeline_func.__name__ + '.zip'
@@ -153,12 +165,11 @@ compiler.Compiler().compile(pipeline_func, pipeline_filename)
 
 #### Submit the pipeline for execution
 
-
 ```python
-#Specify pipeline argument values
+#Specify values for the pipeline's arguments
 arguments = {}
 
-#Get or create an experiment and submit a pipeline run
+#Get or create an experiment 
 import kfp
 client = kfp.Client()
 experiment = client.create_experiment(EXPERIMENT_NAME)
diff --git a/components/gcp/dataproc/submit_sparksql_job/component.yaml b/components/gcp/dataproc/submit_sparksql_job/component.yaml
index f53f6859ab7c..b909bc996971 100644
--- a/components/gcp/dataproc/submit_sparksql_job/component.yaml
+++ b/components/gcp/dataproc/submit_sparksql_job/component.yaml
@@ -75,7 +75,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.dataproc, submit_sparksql_job,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/dataproc/submit_sparksql_job/sample.ipynb b/components/gcp/dataproc/submit_sparksql_job/sample.ipynb
index b037c2cf0e83..06f5362f6bb3 100644
--- a/components/gcp/dataproc/submit_sparksql_job/sample.ipynb
+++ b/components/gcp/dataproc/submit_sparksql_job/sample.ipynb
@@ -81,7 +81,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataproc_submit_sparksql_job_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataproc/submit_sparksql_job/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_sparksql_job/component.yaml')\n",
     "help(dataproc_submit_sparksql_job_op)"
    ]
   },
diff --git a/components/gcp/ml_engine/batch_predict/README.md b/components/gcp/ml_engine/batch_predict/README.md
index a3f2d21a0caa..d5a82198b80d 100644
--- a/components/gcp/ml_engine/batch_predict/README.md
+++ b/components/gcp/ml_engine/batch_predict/README.md
@@ -94,7 +94,7 @@ KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar
 import kfp.components as comp
 
 mlengine_batch_predict_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/ml_engine/batch_predict/component.yaml')
+    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/ml_engine/batch_predict/component.yaml')
 help(mlengine_batch_predict_op)
 ```
 
diff --git a/components/gcp/ml_engine/batch_predict/component.yaml b/components/gcp/ml_engine/batch_predict/component.yaml
index 06afc0f9b300..4e1cf51c4378 100644
--- a/components/gcp/ml_engine/batch_predict/component.yaml
+++ b/components/gcp/ml_engine/batch_predict/component.yaml
@@ -69,7 +69,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.ml_engine, batch_predict,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/ml_engine/batch_predict/sample.ipynb b/components/gcp/ml_engine/batch_predict/sample.ipynb
index 99980c832bc5..f08bd38c4c8b 100644
--- a/components/gcp/ml_engine/batch_predict/sample.ipynb
+++ b/components/gcp/ml_engine/batch_predict/sample.ipynb
@@ -112,7 +112,7 @@
     "import kfp.components as comp\n",
     "\n",
     "mlengine_batch_predict_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/ml_engine/batch_predict/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/ml_engine/batch_predict/component.yaml')\n",
     "help(mlengine_batch_predict_op)"
    ]
   },
diff --git a/components/gcp/ml_engine/deploy/README.md b/components/gcp/ml_engine/deploy/README.md
index 25f038acaf90..ead3f346dd40 100644
--- a/components/gcp/ml_engine/deploy/README.md
+++ b/components/gcp/ml_engine/deploy/README.md
@@ -110,7 +110,7 @@ KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar
 import kfp.components as comp
 
 mlengine_deploy_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/ml_engine/deploy/component.yaml')
+    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/ml_engine/deploy/component.yaml')
 help(mlengine_deploy_op)
 ```
 
diff --git a/components/gcp/ml_engine/deploy/component.yaml b/components/gcp/ml_engine/deploy/component.yaml
index 216b7d5f3470..6ef1d8c43aa3 100644
--- a/components/gcp/ml_engine/deploy/component.yaml
+++ b/components/gcp/ml_engine/deploy/component.yaml
@@ -95,7 +95,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.ml_engine, deploy,
       --model_uri, {inputValue: model_uri},
diff --git a/components/gcp/ml_engine/deploy/sample.ipynb b/components/gcp/ml_engine/deploy/sample.ipynb
index 43858ff6e93a..e5831a244c48 100644
--- a/components/gcp/ml_engine/deploy/sample.ipynb
+++ b/components/gcp/ml_engine/deploy/sample.ipynb
@@ -128,7 +128,7 @@
     "import kfp.components as comp\n",
     "\n",
     "mlengine_deploy_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/ml_engine/deploy/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/ml_engine/deploy/component.yaml')\n",
     "help(mlengine_deploy_op)"
    ]
   },
diff --git a/components/gcp/ml_engine/train/README.md b/components/gcp/ml_engine/train/README.md
index 81c11e0f3aa4..97679c073efd 100644
--- a/components/gcp/ml_engine/train/README.md
+++ b/components/gcp/ml_engine/train/README.md
@@ -1,33 +1,55 @@
 
 # Name
-Submitting a Cloud Machine Learning Engine training job as a pipeline step
+Component: Submitting an AI Platform training job as a pipeline step
 
 # Label
-GCP, Cloud ML Engine, Machine Learning, pipeline, component, Kubeflow, Kubeflow Pipeline
+ AI Platform, Kubeflow
 
 # Summary
-A Kubeflow Pipeline component to submit a Cloud ML Engine training job as a step in a pipeline.
+A Kubeflow pipeline component to submit an AI Platform training job as a step in a pipeline.
+
+# Facets
+<!--Make sure the asset has data for the following facets:
+Use case
+Technique
+Input data type
+ML workflow
+
+The data must map to the acceptable values for these facets, as documented on the “taxonomy” sheet of go/aihub-facets
+https://gitlab.aihub-content-external.com/aihubbot/kfp-components/commit/fe387ab46181b5d4c7425dcb8032cb43e70411c1
+--->
+Use case:
+Other
+
+Technique: 
+Other
+
+Input data type:
+Tabular
+
+ML workflow: 
+Training
 
 # Details
 ## Intended use
-Use this component to submit a training job to Cloud ML Engine from a Kubeflow Pipeline. 
+Use this component to submit a training job to AI Platform from a Kubeflow pipeline. 
 
 ## Runtime arguments
 | Argument | Description | Optional | Data type | Accepted values | Default |
 |:------------------|:------------------|:----------|:--------------|:-----------------|:-------------|
-| project_id | The ID of the Google Cloud Platform (GCP) project of the job. | No | GCPProjectID |  |  |
-| python_module | The name of the Python module to run after installing the training program. | Yes | String |  | None |
-| package_uris | The Cloud Storage location of the packages that contain the training program and any additional dependencies. The maximum number of package URIs is 100. | Yes | List |  | None |
-| region | The Compute Engine region in which the training job is run. | Yes | GCPRegion |  | us-central1 |
-| args | The command line arguments to pass to the training program. | Yes | List |  | None |
-| job_dir | A Cloud Storage path in which to store the training outputs and other data needed for training. This path is passed to your TensorFlow program as the `job-dir` command-line argument. The benefit of specifying this field is that Cloud ML validates the path for use in training. | Yes | GCSPath |  | None |
-| python_version | The version of Python used in training. If it is not set, the default version is 2.7. Python 3.5 is available when the runtime version is set to 1.4 and above. | Yes | String |  | None |
-| runtime_version | The runtime version of Cloud ML Engine to use for training. If it is not set, Cloud ML Engine uses the default. | Yes | String |  | 1 |
-| master_image_uri | The Docker image to run on the master replica. This image must be in Container Registry. | Yes | GCRPath |  | None |
-| worker_image_uri | The Docker image to run on the worker replica. This image must be in Container Registry. | Yes | GCRPath |  | None |
+| project_id | The Google Cloud Platform (GCP) project ID of the job. | No | GCPProjectID | - | - |
+| python_module | The name of the Python module to run after installing the training program. | Yes | String | - | None |
+| package_uris | The Cloud Storage location of the packages that contain the training program and any additional dependencies. The maximum number of package URIs is 100. | Yes | List |  -| None |
+| region | The Compute Engine region in which the training job is run. | Yes | GCPRegion |  -| us-central1 |
+| args | The command line arguments to pass to the training program. | Yes | List | - | None |
+| job_dir | A Cloud Storage path in which to store the training outputs and other data needed for training. This path is passed to your TensorFlow program as the command-line argument, `job-dir`. The benefit of specifying this field is that Cloud ML validates the path for use in training. | Yes | GCSPath | - | None |
+| python_version | The version of Python used in training. If it is not set, the default version is 2.7. Python 3.5 is available when the runtime version is set to 1.4 and above. | Yes | String | - | None |
+| runtime_version | The runtime version of AI Platform to use for training. If it is not set, AI Platform uses the default. | Yes | String | - | 1 |
+| master_image_uri | The Docker image to run on the master replica. This image must be in Container Registry. | Yes | GCRPath | - | None |
+| worker_image_uri | The Docker image to run on the worker replica. This image must be in Container Registry. | Yes | GCRPath |-  | None |
 | training_input | The input parameters to create a training job. | Yes | Dict | [TrainingInput](https://cloud.google.com/ml-engine/reference/rest/v1/projects.jobs#TrainingInput) | None |
-| job_id_prefix | The prefix of the job ID that is generated. | Yes | String |  | None |
-| wait_interval | The number of seconds to wait between API calls to get the status of the job. | Yes | Integer |  | 30 |
+| job_id_prefix | The prefix of the job ID that is generated. | Yes | String | - | None |
+| wait_interval | The number of seconds to wait between API calls to get the status of the job. | Yes | Integer | - | 30 |
 
 
 
@@ -43,7 +65,7 @@ The component accepts two types of inputs:
 | Name    | Description                 | Type      |
 |:------- |:----                        | :---      |
 | job_id  | The ID of the created job.  |  String   |
-| job_dir | The Cloud Storage path that contains the trained model output files. |  GCSPath  |
+| job_dir | The Cloud Storage path that contains the output files with the trained model. |  GCSPath  |
 
 
 ## Cautions & requirements
@@ -63,51 +85,45 @@ To use the component, you must:
 
 ## Detailed description
 
-The component builds the [TrainingInput](https://cloud.google.com/ml-engine/reference/rest/v1/projects.jobs#TrainingInput) payload and submits a job via the [Cloud ML Engine REST API](https://cloud.google.com/ml-engine/reference/rest/v1/projects.jobs).
+The component builds the [TrainingInput](https://cloud.google.com/ml-engine/reference/rest/v1/projects.jobs#TrainingInput) payload and submits a job via the [AI Platform REST API](https://cloud.google.com/ml-engine/reference/rest/v1/projects.jobs).
 
 The steps to use the component in a pipeline are:
 
 
-1.  Install the Kubeflow Pipeline SDK:
-
+1.  Install the Kubeflow pipeline's SDK:
 
+    ```python
+    %%capture --no-stderr
 
-```python
-%%capture --no-stderr
-
-KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
-!pip3 install $KFP_PACKAGE --upgrade
-```
-
-2. Load the component using KFP SDK
-
+    KFP_PACKAGE = 'https://storage.googleapis.com/ml-pipeline/release/0.1.14/kfp.tar.gz'
+    !pip3 install $KFP_PACKAGE --upgrade
+    ```
 
-```python
-import kfp.components as comp
+2. Load the component using the Kubeflow pipeline's SDK:
 
-mlengine_train_op = comp.load_component_from_url(
-    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/ml_engine/train/component.yaml')
-help(mlengine_train_op)
-```
+    ```python
+    import kfp.components as comp
 
+    mlengine_train_op = comp.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/ml_engine/train/component.yaml')
+    help(mlengine_train_op)
+    ```
 ### Sample
-Note: The following sample code works in an IPython notebook or directly in Python code.
+The following sample code works in an IPython notebook or directly in Python code.
 
-In this sample, you use the code from the [census estimator sample](https://github.com/GoogleCloudPlatform/cloudml-samples/tree/master/census/estimator) to train a model in Cloud ML Engine. To upload the code to Cloud ML Engine, package the Python code and upload it to a Cloud Storage bucket. 
+In this sample, you use the code from the [census estimator sample](https://github.com/GoogleCloudPlatform/cloudml-samples/tree/master/census/estimator) to train a model on AI Platform. To upload the code to AI Platform, package the Python code and upload it to a Cloud Storage bucket. 
 
 Note: You must have read and write permissions on the bucket that you use as the working directory.
-#### Set sample parameters
 
+#### Set sample parameters
 
 ```python
-# Required Parameters
-PROJECT_ID = '<Please put your project ID here>'
-GCS_WORKING_DIR = 'gs://<Please put your GCS path here>' # No ending slash
+# Required parameters
+PROJECT_ID = '<Put your project ID here>'
+GCS_WORKING_DIR = 'gs://<Put your GCS path here>' # No ending slash
 ```
 
-
 ```python
-# Optional Parameters
+# Optional parameters
 EXPERIMENT_NAME = 'CLOUDML - Train'
 TRAINER_GCS_PATH = GCS_WORKING_DIR + '/train/trainer.tar.gz'
 OUTPUT_GCS_PATH = GCS_WORKING_DIR + '/train/output/'
@@ -115,14 +131,12 @@ OUTPUT_GCS_PATH = GCS_WORKING_DIR + '/train/output/'
 
 #### Clean up the working directory
 
-
 ```python
 %%capture --no-stderr
 !gsutil rm -r $GCS_WORKING_DIR
 ```
 
-#### Download the sample trainer code to local
-
+#### Download the sample trainer code to a local directory
 
 ```python
 %%capture --no-stderr
@@ -132,7 +146,6 @@ OUTPUT_GCS_PATH = GCS_WORKING_DIR + '/train/output/'
 
 #### Package code and upload the package to Cloud Storage
 
-
 ```python
 %%capture --no-stderr
 %%bash -s "$TRAINER_GCS_PATH"
@@ -145,7 +158,6 @@ rm -fr ./cloudml-samples-master/ ./master.zip ./dist
 
 #### Example pipeline that uses the component
 
-
 ```python
 import kfp.dsl as dsl
 import kfp.gcp as gcp
@@ -192,7 +204,6 @@ def pipeline(
 
 #### Compile the pipeline
 
-
 ```python
 pipeline_func = pipeline
 pipeline_filename = pipeline_func.__name__ + '.zip'
@@ -202,12 +213,11 @@ compiler.Compiler().compile(pipeline_func, pipeline_filename)
 
 #### Submit the pipeline for execution
 
-
 ```python
-#Specify pipeline argument values
+#Specify values for the pipeline's arguments
 arguments = {}
 
-#Get or create an experiment and submit a pipeline run
+#Get or create an experiment 
 import kfp
 client = kfp.Client()
 experiment = client.create_experiment(EXPERIMENT_NAME)
@@ -221,16 +231,15 @@ run_result = client.run_pipeline(experiment.id, run_name, pipeline_filename, arg
 
 Use the following command to inspect the contents in the output directory:
 
-
 ```python
 !gsutil ls $OUTPUT_GCS_PATH
 ```
 
 ## References
-* [Component python code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_train.py)
-* [Component docker file](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/Dockerfile)
+* [Component Python code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/ml_engine/_train.py)
+* [Component Docker file](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/Dockerfile)
 * [Sample notebook](https://github.com/kubeflow/pipelines/blob/master/components/gcp/ml_engine/train/sample.ipynb)
-* [Cloud Machine Learning Engine job REST API](https://cloud.google.com/ml-engine/reference/rest/v1/projects.jobs)
+* [AI Platform REST API - Resource: Job](https://cloud.google.com/ml-engine/reference/rest/v1/projects.jobs)
 
 ## License
 By deploying or using this software you agree to comply with the [AI Hub Terms of Service](https://aihub.cloud.google.com/u/0/aihub-tos) and the [Google APIs Terms of Service](https://developers.google.com/terms/). To the extent of a direct conflict of terms, the AI Hub Terms of Service will control.
diff --git a/components/gcp/ml_engine/train/component.yaml b/components/gcp/ml_engine/train/component.yaml
index e7d6d3842456..06ad40e9a4ea 100644
--- a/components/gcp/ml_engine/train/component.yaml
+++ b/components/gcp/ml_engine/train/component.yaml
@@ -103,7 +103,7 @@ outputs:
     type: UI metadata
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-gcp:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-gcp:d6d9d8da19f7110fff3a5ba713710402edaeee65
     args: [
       kfp_component.google.ml_engine, train,
       --project_id, {inputValue: project_id},
diff --git a/components/gcp/ml_engine/train/sample.ipynb b/components/gcp/ml_engine/train/sample.ipynb
index 319e7abce166..fe74118995c0 100644
--- a/components/gcp/ml_engine/train/sample.ipynb
+++ b/components/gcp/ml_engine/train/sample.ipynb
@@ -104,7 +104,7 @@
     "import kfp.components as comp\n",
     "\n",
     "mlengine_train_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/ml_engine/train/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/ml_engine/train/component.yaml')\n",
     "help(mlengine_train_op)"
    ]
   },
diff --git a/components/ibm-components/watson/train/component.yaml b/components/ibm-components/watson/train/component.yaml
index 97efa4a4c4f3..7344ed1189c3 100644
--- a/components/ibm-components/watson/train/component.yaml
+++ b/components/ibm-components/watson/train/component.yaml
@@ -20,9 +20,9 @@ inputs:
   - {name: execution_command, description: 'Required. Execution command to start the model training.'}
   - {name: config,            description: 'Credential configfile is properly created.', default: 'secret_name'}
   - {name: framework,         description: 'ML/DL Model Framework', default: 'tensorflow'}
-  - {name: framework_version, description: 'Model Framework version', default: '1.5'}
+  - {name: framework_version, description: 'Model Framework version', default: '1.13'}
   - {name: runtime,           description: 'Model Code runtime language', default: 'python'}
-  - {name: runtime_version,   description: 'Model Code runtime version', default: '3.5'}
+  - {name: runtime_version,   description: 'Model Code runtime version', default: '3.6'}
   - {name: run_definition,    description: 'Name for the Watson Machine Learning training definition', default: 'python-tensorflow-definition'}
   - {name: run_name,          description: 'Name for the Watson Machine Learning training-runs', default: 'python-tensorflow-run'}
   - {name: author_name,       description: 'Name of this training job author', default: 'default-author'}
diff --git a/components/ibm-components/watson/train/src/wml-train.py b/components/ibm-components/watson/train/src/wml-train.py
index 018f66ca2d88..f0eb1703cc11 100644
--- a/components/ibm-components/watson/train/src/wml-train.py
+++ b/components/ibm-components/watson/train/src/wml-train.py
@@ -27,9 +27,9 @@ def train(args):
     wml_train_code = args.train_code
     wml_execution_command = args.execution_command.strip('\'')
     wml_framework_name = args.framework if args.framework else 'tensorflow'
-    wml_framework_version = args.framework_version if args.framework_version else '1.5'
+    wml_framework_version = args.framework_version if args.framework_version else '1.13'
     wml_runtime_name = args.runtime if args.runtime else 'python'
-    wml_runtime_version = args.runtime_version if args.runtime_version else '3.5'
+    wml_runtime_version = args.runtime_version if args.runtime_version else '3.6'
     wml_run_definition = args.run_definition if args.run_definition else 'python-tensorflow-definition'
     wml_run_name = args.run_name if args.run_name else 'python-tensorflow-run'
     wml_author_name = args.author_name if args.author_name else 'default-author'
diff --git a/components/kubeflow/deployer/component.yaml b/components/kubeflow/deployer/component.yaml
index 2386f046ccd7..2ea0176f622f 100644
--- a/components/kubeflow/deployer/component.yaml
+++ b/components/kubeflow/deployer/component.yaml
@@ -11,7 +11,7 @@ inputs:
 #  - {name: Endppoint URI, type: Serving URI,                      description: 'URI of the deployed prediction service..'}
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-deployer:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-deployer:d6d9d8da19f7110fff3a5ba713710402edaeee65
     command: [/bin/deploy.sh]
     args: [
       --model-export-path,  {inputValue: Model dir},
diff --git a/components/kubeflow/dnntrainer/component.yaml b/components/kubeflow/dnntrainer/component.yaml
index 927ff2cabcc3..4ca9d46f057b 100644
--- a/components/kubeflow/dnntrainer/component.yaml
+++ b/components/kubeflow/dnntrainer/component.yaml
@@ -16,7 +16,7 @@ outputs:
   - {name: MLPipeline UI metadata, type: UI metadata}
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf-trainer:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf-trainer:d6d9d8da19f7110fff3a5ba713710402edaeee65
     command: [python2, -m, trainer.task]
     args: [
       --transformed-data-dir, {inputValue: Transformed data dir},
diff --git a/components/kubeflow/kfserving/Dockerfile b/components/kubeflow/kfserving/Dockerfile
index 1b66dcb2a714..82f655f0a84c 100644
--- a/components/kubeflow/kfserving/Dockerfile
+++ b/components/kubeflow/kfserving/Dockerfile
@@ -1,6 +1,6 @@
 FROM python:3.6-slim
 
-RUN pip3 install kubernetes==9.0.0 kfserving==0.1.1 requests==2.22.0 Flask==1.1.1 flask-cors==3.0.8
+RUN pip3 install kubernetes==10.0.1 kfserving==0.2.1 requests==2.22.0 Flask==1.1.1 flask-cors==3.0.8
 
 ENV APP_HOME /app
 COPY src $APP_HOME
diff --git a/components/kubeflow/kfserving/OWNERS b/components/kubeflow/kfserving/OWNERS
new file mode 100644
index 000000000000..78d93353d16d
--- /dev/null
+++ b/components/kubeflow/kfserving/OWNERS
@@ -0,0 +1,5 @@
+approvers:
+  - animeshsingh
+reviewers:
+  - animeshsingh
+  - Tomcli
diff --git a/components/kubeflow/kfserving/component.yaml b/components/kubeflow/kfserving/component.yaml
index a3eded2dbd20..ea59664ae871 100644
--- a/components/kubeflow/kfserving/component.yaml
+++ b/components/kubeflow/kfserving/component.yaml
@@ -13,10 +13,10 @@ inputs:
   - {name: Autoscaling Target,              type: String, default: '0',        description: 'Autoscaling Target Number'}
   - {name: KFServing Endpoint,              type: String, default: '', description: 'KFServing remote deployer API endpoint'}
 outputs:
-  - {name: Endpoint URI, type: String,                      description: 'URI of the deployed prediction service..'}
+  - {name: Service Endpoint URI, type: String,                      description: 'URI of the deployed prediction service..'}
 implementation:
   container:
-    image: aipipeline/kfserving-component:v0.1.0
+    image: aipipeline/kfserving-component:v0.2.1
     command: ['python']
     args: [
       -u, kfservingdeployer.py,
@@ -29,7 +29,7 @@ implementation:
       --framework,                {inputValue: Framework},
       --default-custom-model-spec,{inputValue: Default Custom Model Spec},
       --canary-custom-model-spec, {inputValue: Canary Custom Model Spec},
-      --kfserving-deployer-api,   {inputValue: KFServing Endpoint},
+      --kfserving-endpoint,       {inputValue: KFServing Endpoint},
       --autoscaling-target,       {inputValue: Autoscaling Target},
-      --output_path,              {outputPath: Endpoint URI}
+      --output_path,              {outputPath: Service Endpoint URI}
     ]
diff --git a/components/kubeflow/kfserving/sample-pipeline.py b/components/kubeflow/kfserving/sample-pipeline.py
deleted file mode 100644
index a3b1e14c2883..000000000000
--- a/components/kubeflow/kfserving/sample-pipeline.py
+++ /dev/null
@@ -1,53 +0,0 @@
-# Copyright 2019 IBM Corporation
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#     http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-import kfp.dsl as dsl
-from kfp import components
-import json
-
-kfserving_op = components.load_component_from_file('component.yaml')
-
-@dsl.pipeline(
-  name='kfserving pipeline',
-  description='A pipeline for kfserving.'
-)
-def kfservingPipeline(
-    action = 'create',
-    model_name='tensorflow-sample',
-    default_model_uri='gs://kfserving-samples/models/tensorflow/flowers',
-    canary_model_uri='gs://kfserving-samples/models/tensorflow/flowers-2',
-    canary_model_traffic_percentage='10',
-    namespace='kubeflow',
-    framework='tensorflow',
-    default_custom_model_spec='{}',
-    canary_custom_model_spec='{}',
-    autoscaling_target=0,
-    kfserving_endpoint=''
-):
-
-    # define workflow
-    kfserving = kfserving_op(action = action,
-                             model_name=model_name,
-                             default_model_uri=default_model_uri,
-                             canary_model_uri=canary_model_uri,
-                             canary_model_traffic_percentage=canary_model_traffic_percentage,
-                             namespace=namespace,
-                             framework=framework,
-                             default_custom_model_spec=default_custom_model_spec,
-                             canary_custom_model_spec=canary_custom_model_spec,
-                             autoscaling_target=autoscaling_target,
-                             kfserving_endpoint=kfserving_endpoint)
-
-if __name__ == '__main__':
-    import kfp.compiler as compiler
-    compiler.Compiler().compile(kfservingPipeline, __file__ + '.tar.gz')
diff --git a/components/kubeflow/kfserving/src/app.py b/components/kubeflow/kfserving/src/app.py
index 1423c8fcad8e..21aa7f0d6874 100644
--- a/components/kubeflow/kfserving/src/app.py
+++ b/components/kubeflow/kfserving/src/app.py
@@ -1,3 +1,17 @@
+# Copyright 2019 kubeflow.org.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
 from flask import Flask, request, abort
 from flask_cors import CORS
 import json
diff --git a/components/kubeflow/kfserving/src/kfservingdeployer.py b/components/kubeflow/kfserving/src/kfservingdeployer.py
index 6ae807bfcaa5..4803c85b8966 100644
--- a/components/kubeflow/kfserving/src/kfservingdeployer.py
+++ b/components/kubeflow/kfserving/src/kfservingdeployer.py
@@ -1,16 +1,17 @@
-# Copyright 2019 IBM Corporation
+# Copyright 2019 kubeflow.org.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
 # You may obtain a copy of the License at
 #
-#     http://www.apache.org/licenses/LICENSE-2.0
+#    http://www.apache.org/licenses/LICENSE-2.0
 #
 # Unless required by applicable law or agreed to in writing, software
 # distributed under the License is distributed on an "AS IS" BASIS,
 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 # See the License for the specific language governing permissions and
 # limitations under the License.
+
 import json
 import argparse
 import os
@@ -21,33 +22,36 @@
 
 from kfserving import KFServingClient
 from kfserving import constants
-from kfserving import V1alpha1ModelSpec
-from kfserving import V1alpha1TensorflowSpec
-from kfserving import V1alpha1PyTorchSpec
-from kfserving import V1alpha1SKLearnSpec
-from kfserving import V1alpha1XGBoostSpec
-from kfserving import V1alpha1TensorRTSpec
-from kfserving import V1alpha1CustomSpec
-from kfserving import V1alpha1KFServiceSpec
-from kfserving import V1alpha1KFService
-
-
-def ModelSpec(framework, model_uri):
+from kfserving import V1alpha2EndpointSpec
+from kfserving import V1alpha2PredictorSpec
+from kfserving import V1alpha2TensorflowSpec
+from kfserving import V1alpha2PyTorchSpec
+from kfserving import V1alpha2SKLearnSpec
+from kfserving import V1alpha2XGBoostSpec
+from kfserving.models.v1alpha2_onnx_spec import V1alpha2ONNXSpec
+from kfserving import V1alpha2TensorRTSpec
+from kfserving import V1alpha2CustomSpec
+from kfserving import V1alpha2InferenceServiceSpec
+from kfserving import V1alpha2InferenceService
+
+def EndpointSpec(framework, storage_uri):
     if framework == 'tensorflow':
-        return V1alpha1ModelSpec(tensorflow=V1alpha1TensorflowSpec(model_uri=model_uri))
+        return V1alpha2EndpointSpec(predictor=V1alpha2PredictorSpec(tensorflow=V1alpha2TensorflowSpec(storage_uri=storage_uri)))
     elif framework == 'pytorch':
-        return V1alpha1ModelSpec(pytorch=V1alpha1PyTorchSpec(model_uri=model_uri))
+        return V1alpha2EndpointSpec(predictor=V1alpha2PredictorSpec(pytorch=V1alpha2PyTorchSpec(storage_uri=storage_uri)))
     elif framework == 'sklearn':
-        return V1alpha1ModelSpec(sklearn=V1alpha1SKLearnSpec(model_uri=model_uri))
+        return V1alpha2EndpointSpec(predictor=V1alpha2PredictorSpec(sklearn=V1alpha2SKLearnSpec(storage_uri=storage_uri)))
     elif framework == 'xgboost':
-        return V1alpha1ModelSpec(xgboost=V1alpha1XGBoostSpec(model_uri=model_uri))
+        return V1alpha2EndpointSpec(predictor=V1alpha2PredictorSpec(xgboost=V1alpha2XGBoostSpec(storage_uri=storage_uri)))
+    elif framework == 'onnx':
+        return V1alpha2EndpointSpec(predictor=V1alpha2PredictorSpec(onnx=V1alpha2ONNXSpec(storage_uri=storage_uri)))
     elif framework == 'tensorrt':
-        return V1alpha1ModelSpec(tensorrt=V1alpha1TensorRTSpec(model_uri=model_uri))
+        return V1alpha2EndpointSpec(predictor=V1alpha2PredictorSpec(tensorrt=V1alpha2TensorRTSpec(storage_uri=storage_uri)))
     else:
         raise("Error: No matching framework: " + framework)
 
 
-def customModelSpec(custom_model_spec):
+def customEndpointSpec(custom_model_spec):
     env = [client.V1EnvVar(name=i['name'], value=i['value']) for i in custom_model_spec['env']] if custom_model_spec.get('env', '') else None
     ports = [client.V1ContainerPort(container_port=int(custom_model_spec.get('port', '')))] if custom_model_spec.get('port', '') else None
     containerSpec = client.V1Container(
@@ -60,16 +64,16 @@ def customModelSpec(custom_model_spec):
         image_pull_policy=custom_model_spec.get('image_pull_policy', None),
         working_dir=custom_model_spec.get('working_dir', None)
     )
-    return V1alpha1ModelSpec(custom=V1alpha1CustomSpec(container=containerSpec))
+    return V1alpha2EndpointSpec(predictor=V1alpha2PredictorSpec(custom=V1alpha2CustomSpec(container=containerSpec)))
 
 
-def kfserving_deployment(metadata, default_model_spec, canary_model_spec=None, canary_model_traffic=None):
-    return V1alpha1KFService(api_version=constants.KFSERVING_GROUP + '/' + constants.KFSERVING_VERSION,
+def InferenceService(metadata, default_model_spec, canary_model_spec=None, canary_model_traffic=None):
+    return V1alpha2InferenceService(api_version=constants.KFSERVING_GROUP + '/' + constants.KFSERVING_VERSION,
                              kind=constants.KFSERVING_KIND,
                              metadata=metadata,
-                             spec=V1alpha1KFServiceSpec(default=default_model_spec,
-                                                        canary=canary_model_spec,
-                                                        canary_traffic_percent=canary_model_traffic))
+                             spec=V1alpha2InferenceServiceSpec(default=default_model_spec,
+                                                               canary=canary_model_spec,
+                                                               canary_traffic_percent=canary_model_traffic))
 
 
 def deploy_model(action, model_name, default_model_uri, canary_model_uri, canary_model_traffic, namespace, framework, default_custom_model_spec, canary_custom_model_spec, autoscaling_target=0):
@@ -78,26 +82,33 @@ def deploy_model(action, model_name, default_model_uri, canary_model_uri, canary
     else:
         annotations = None
     metadata = client.V1ObjectMeta(name=model_name, namespace=namespace, annotations=annotations)
-    if framework != 'custom':
-        default_model_spec = ModelSpec(framework, default_model_uri)
-    else:
-        default_model_spec = customModelSpec(default_custom_model_spec)
+    
+    # Create Default deployment if default model uri is provided.
+    if framework != 'custom' and default_model_uri:
+        default_model_spec = EndpointSpec(framework, default_model_uri)
+    elif framework == 'custom' and default_custom_model_spec:
+        default_model_spec = customEndpointSpec(default_custom_model_spec)
+    
     # Create Canary deployment if canary model uri is provided.
     if framework != 'custom' and canary_model_uri:
-        canary_model_spec = ModelSpec(framework, canary_model_uri)
-        kfsvc = kfserving_deployment(metadata, default_model_spec, canary_model_spec, canary_model_traffic)
+        canary_model_spec = EndpointSpec(framework, canary_model_uri)
+        kfsvc = InferenceService(metadata, default_model_spec, canary_model_spec, canary_model_traffic)
     elif framework == 'custom' and canary_custom_model_spec:
-        canary_model_spec = customModelSpec(canary_custom_model_spec)
-        kfsvc = kfserving_deployment(metadata, default_model_spec, canary_model_spec, canary_model_traffic)
+        canary_model_spec = customEndpointSpec(canary_custom_model_spec)
+        kfsvc = InferenceService(metadata, default_model_spec, canary_model_spec, canary_model_traffic)
     else:
-        kfsvc = kfserving_deployment(metadata, default_model_spec)
+        kfsvc = InferenceService(metadata, default_model_spec)
 
     KFServing = KFServingClient()
 
     if action == 'create':
-        KFServing.create(kfsvc)
+        KFServing.create(kfsvc, watch=True, timeout_seconds=120)
     elif action == 'update':
         KFServing.patch(model_name, kfsvc)
+    elif action == 'rollout':
+        KFServing.rollout_canary(model_name, canary=canary_model_spec, percent=canary_model_traffic, namespace=namespace, watch=True, timeout_seconds=120)
+    elif action == 'promote':
+        KFServing.promote(model_name, namespace=namespace, watch=True, timeout_seconds=120)
     elif action == 'delete':
         KFServing.delete(model_name, namespace=namespace)
     else:
@@ -117,7 +128,7 @@ def deploy_model(action, model_name, default_model_uri, canary_model_uri, canary
     parser.add_argument('--framework', type=str, help='Model Serving Framework', default='tensorflow')
     parser.add_argument('--default-custom-model-spec', type=json.loads, help='Custom runtime default custom model container spec', default={})
     parser.add_argument('--canary-custom-model-spec', type=json.loads, help='Custom runtime canary custom model container spec', default={})
-    parser.add_argument('--kfserving-deployer-api', type=str, help='kfserving remote deployer api endpoint', default='')
+    parser.add_argument('--kfserving-endpoint', type=str, help='kfserving remote deployer api endpoint', default='')
     parser.add_argument('--autoscaling-target', type=str, help='Autoscaling target number', default='0')
     parser.add_argument('--output_path', type=str, help='Path to store URI output')
     args = parser.parse_args()
@@ -134,10 +145,10 @@ def deploy_model(action, model_name, default_model_uri, canary_model_uri, canary
     output_path = args.output_path
     default_custom_model_spec = args.default_custom_model_spec
     canary_custom_model_spec = args.canary_custom_model_spec
-    kfserving_deployer_api = url.sub('', args.kfserving_deployer_api)
+    kfserving_endpoint = url.sub('', args.kfserving_endpoint)
     autoscaling_target = int(args.autoscaling_target)
 
-    if kfserving_deployer_api:
+    if kfserving_endpoint:
         formData = {
             "action": action,
             "model_name": model_name,
@@ -150,7 +161,7 @@ def deploy_model(action, model_name, default_model_uri, canary_model_uri, canary
             "canary_custom_model_spec": canary_custom_model_spec,
             "autoscaling_target": autoscaling_target
             }
-        response = requests.post("http://" + kfserving_deployer_api + "/deploy-model", json=formData)
+        response = requests.post("http://" + kfserving_endpoint + "/deploy-model", json=formData)
         model_status = response.json()
     else:
         model_status = deploy_model(
@@ -171,7 +182,9 @@ def deploy_model(action, model_name, default_model_uri, canary_model_uri, canary
         print('Sample test commands: ')
         print('# Note: If Istio Ingress gateway is not served with LoadBalancer, use $CLUSTER_NODE_IP:31380 as the ISTIO_INGRESS_ENDPOINT')
         print('ISTIO_INGRESS_ENDPOINT=$(kubectl -n istio-system get service istio-ingressgateway -o jsonpath=\'{.status.loadBalancer.ingress[0].ip}\')')
-        print('curl -X GET -H "Host: ' + url.sub('', model_status['status']['url']) + '" $ISTIO_INGRESS_ENDPOINT')
+        # model_status['status']['url'] is like http://flowers-sample.kubeflow.example.com/v1/models/flowers-sample
+        host, path = url.sub('', model_status['status']['url']).split("/", 1)
+        print('curl -X GET -H "Host: ' + host + '" http://$ISTIO_INGRESS_ENDPOINT/' + path)
     except:
         print('Model is not ready, check the logs for the Knative URL status.')
     if not os.path.exists(os.path.dirname(output_path)):
diff --git a/components/kubeflow/launcher/kubeflow_tfjob_launcher_op.py b/components/kubeflow/launcher/kubeflow_tfjob_launcher_op.py
index b5a7c7fd357e..afaa3bddbc0d 100644
--- a/components/kubeflow/launcher/kubeflow_tfjob_launcher_op.py
+++ b/components/kubeflow/launcher/kubeflow_tfjob_launcher_op.py
@@ -17,7 +17,7 @@
 def kubeflow_tfjob_launcher_op(container_image, command, number_of_workers: int, number_of_parameter_servers: int, tfjob_timeout_minutes: int, output_dir=None, step_name='TFJob-launcher'):
     return dsl.ContainerOp(
         name = step_name,
-        image = 'gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf:57d9f7f1cfd458e945d297957621716062d89a49',
+        image = 'gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf:d6d9d8da19f7110fff3a5ba713710402edaeee65',
         arguments = [
             '--workers', number_of_workers,
             '--pss', number_of_parameter_servers,
diff --git a/components/kubeflow/launcher/src/train.template.yaml b/components/kubeflow/launcher/src/train.template.yaml
index 72e04d63bd80..42cecf8e30bc 100644
--- a/components/kubeflow/launcher/src/train.template.yaml
+++ b/components/kubeflow/launcher/src/train.template.yaml
@@ -26,7 +26,7 @@ spec:
         spec:
           containers:
           - name: tensorflow
-            image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf-trainer:57d9f7f1cfd458e945d297957621716062d89a49
+            image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf-trainer:d6d9d8da19f7110fff3a5ba713710402edaeee65
             command:
               - python
               - -m
@@ -49,7 +49,7 @@ spec:
         spec:
           containers:
           - name: tensorflow
-            image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf-trainer:57d9f7f1cfd458e945d297957621716062d89a49
+            image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf-trainer:d6d9d8da19f7110fff3a5ba713710402edaeee65
             command:
               - python
               - -m
@@ -72,7 +72,7 @@ spec:
             spec:
               containers:
               - name: tensorflow
-                image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf-trainer:57d9f7f1cfd458e945d297957621716062d89a49
+                image: gcr.io/ml-pipeline/ml-pipeline-kubeflow-tf-trainer:d6d9d8da19f7110fff3a5ba713710402edaeee65
                 command:
                   - python
                   - -m
diff --git a/components/local/confusion_matrix/component.yaml b/components/local/confusion_matrix/component.yaml
index 025d4818ec11..fbb965879652 100644
--- a/components/local/confusion_matrix/component.yaml
+++ b/components/local/confusion_matrix/component.yaml
@@ -9,7 +9,7 @@ outputs:
   - {name: MLPipeline Metrics,     type: Metrics}
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-local-confusion-matrix:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-local-confusion-matrix:d6d9d8da19f7110fff3a5ba713710402edaeee65
     command: [python2, /ml/confusion_matrix.py]
     args: [
       --predictions, {inputValue: Predictions},
diff --git a/components/local/roc/component.yaml b/components/local/roc/component.yaml
index 9e46900f7b34..e9d67ee65de6 100644
--- a/components/local/roc/component.yaml
+++ b/components/local/roc/component.yaml
@@ -11,7 +11,7 @@ outputs:
   - {name: MLPipeline Metrics,     type: Metrics}
 implementation:
   container:
-    image: gcr.io/ml-pipeline/ml-pipeline-local-confusion-matrix:57d9f7f1cfd458e945d297957621716062d89a49
+    image: gcr.io/ml-pipeline/ml-pipeline-local-confusion-matrix:d6d9d8da19f7110fff3a5ba713710402edaeee65
     command: [python2, /ml/roc.py]
     args: [
       --predictions,        {inputValue: Predictions dir},
diff --git a/components/third_party_licenses.csv b/components/third_party_licenses.csv
index a86a2338b803..693ffdcb7836 100644
--- a/components/third_party_licenses.csv
+++ b/components/third_party_licenses.csv
@@ -137,8 +137,8 @@ ipython-genutils,https://raw.githubusercontent.com/ipython/ipython_genutils/mast
 ipywidgets,https://raw.githubusercontent.com/jupyter-widgets/ipywidgets/master/LICENSE,3-Clause BSD
 Jinja2,https://raw.githubusercontent.com/pallets/jinja/master/LICENSE.rst,BSD
 jsonschema,https://raw.githubusercontent.com/Julian/jsonschema/master/COPYING,MIT
-jupyter,https://raw.githubusercontent.com/jupyter/notebook/master/COPYING.md,BSD
-notebook,https://raw.githubusercontent.com/jupyter/notebook/master/COPYING.md,BSD
+jupyter,https://raw.githubusercontent.com/jupyter/notebook/master/LICENSE,BSD
+notebook,https://raw.githubusercontent.com/jupyter/notebook/master/LICENSE,BSD
 jupyter-client,https://raw.githubusercontent.com/jupyter/jupyter_client/master/COPYING.md,BSD
 jupyter-console,https://raw.githubusercontent.com/jupyter/jupyter_console/master/COPYING.md,BSD
 jupyter-core,https://raw.githubusercontent.com/jupyter/jupyter_core/master/COPYING.md,BSD
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
new file mode 100644
index 000000000000..650570754b35
--- /dev/null
+++ b/frontend/.prettierignore
@@ -0,0 +1,2 @@
+src/generated
+server
diff --git a/frontend/.prettierrc.yaml b/frontend/.prettierrc.yaml
new file mode 100644
index 000000000000..960e71e6ab5a
--- /dev/null
+++ b/frontend/.prettierrc.yaml
@@ -0,0 +1,4 @@
+trailingComma: all
+singleQuote: true
+jsxSingleQuote: true
+printWidth: 100
diff --git a/frontend/OWNERS b/frontend/OWNERS
index 98a0efa00141..e4115faf230c 100644
--- a/frontend/OWNERS
+++ b/frontend/OWNERS
@@ -1,10 +1,6 @@
 approvers:
-  - rileyjbauer
   - bobgy
   - jingzhang36
   - rmgogogo
 reviewers:
-  - rileyjbauer
   - bobgy
-  - jingzhang36
-  - rmgogogo
diff --git a/frontend/README.md b/frontend/README.md
index 1a2f816d606d..edf9b769791d 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,6 +1,7 @@
 # Kubeflow Pipelines Management Frontend
 
-**Develop:**
+## Develop
+
 You need `npm`, install dependencies using `npm install`.
 
 If you made any changes to protos (see backend/README), you'll need to
@@ -23,9 +24,19 @@ database.
 
 ### Using a real cluster as backend
 
-1. First configure your `kubectl` to talk to your kfp lite cluster.
-2. `npm run start:proxies` to start proxy servers that port forwards to your cluster.
-3. `npm start` to start a webpack dev server, it has already been configured to talk to aforementioned proxies.
+#### Common steps
+
+1. First configure your `kubectl` to talk to your KFP standalone cluster.
+2. `npm start` to start a webpack dev server, it is configured to proxy api requests to localhost:3001. The following step will start a proxy that handles api requests proxied to localhost:3001.
+
+#### Special step that depend on what you want to do
+
+| What to develop?        | Who handles API requests? | Script to run                                                  | Extra notes                                                        |
+| ----------------------- | ------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------ |
+| Client UI               | standalone deployment     | `NAMESPACE=kubeflow npm run start:proxy-standalone`            |                                                                    |
+| Client UI + Node server | standalone deployment     | `NAMESPACE=kubeflow npm run start:proxy-standalone-and-server` | You need to rerun the script every time you edit node server code. |
+
+TODO: figure out and document how to use a Kubeflow deployment to develop UI.
 
 **Production Build:**
 You can do `npm run build` to build the frontend code for production, which
@@ -45,3 +56,34 @@ this image, you'll need to port forward 3000, and pass the environment
 variables `ML_PIPELINE_SERVICE_HOST` and
 `ML_PIPELINE_SERVICE_PORT` with the details of the API server, which
 you can run using `npm run api` separately.
+
+## Code Style
+
+We use [prettier](https://prettier.io/) for code formatting, our prettier config
+is [here](https://github.com/kubeflow/pipelines/blob/master/frontend/.prettierrc.yaml).
+
+To understand more what prettier is: [What is Prettier](https://prettier.io/docs/en/index.html).
+
+### IDE Integration
+
+- For vscode, install the plugin "Prettier - Code formatter" and it will pick
+  this project's config automatically.
+  Recommend setting the following for vscode to autoformat + organize import on save.
+  ```
+  "[typescript]": {
+      "editor.codeActionsOnSave": {
+          "source.organizeImports": true,
+      },
+      "editor.formatOnSave": true,
+  },
+  ```
+- For others, refer to https://prettier.io/docs/en/editors.html
+
+### Format Code Manually
+
+Run `npm run format`.
+
+### Escape hatch
+
+If there's some code that you don't want being formatted by prettier, follow
+guide [here](https://prettier.io/docs/en/ignore.html). (Most likely you don't need this.)
diff --git a/frontend/mock-backend/fixed-data.ts b/frontend/mock-backend/fixed-data.ts
index 8f5e273091d0..415afb2512ff 100644
--- a/frontend/mock-backend/fixed-data.ts
+++ b/frontend/mock-backend/fixed-data.ts
@@ -12,16 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { ApiExperiment } from '../src/apis/experiment';
+import { ApiJob } from '../src/apis/job';
+import { ApiPipeline } from '../src/apis/pipeline';
+import { ApiRelationship, ApiResourceType, ApiRunDetail, RunMetricFormat } from '../src/apis/run';
 import helloWorldRun from './hello-world-runtime';
 import helloWorldWithStepsRun from './hello-world-with-steps-runtime';
+import jsonRun from './json-runtime';
 import coinflipRun from './mock-coinflip-runtime';
 import errorRun from './mock-error-runtime';
 import xgboostRun from './mock-xgboost-runtime';
-import jsonRun from './json-runtime';
-import { ApiExperiment } from '../src/apis/experiment';
-import { ApiJob } from '../src/apis/job';
-import { ApiPipeline } from '../src/apis/pipeline';
-import { ApiRunDetail, ApiResourceType, ApiRelationship, RunMetricFormat } from '../src/apis/run';
 
 function padStartTwoZeroes(str: string): string {
   let padded = str || '';
@@ -51,8 +51,8 @@ const pipelines: ApiPipeline[] = [
       },
       {
         name: 'output',
-      }
-    ]
+      },
+    ],
   },
   {
     created_at: new Date('2018-04-02T20:59:29.000Z'),
@@ -71,8 +71,8 @@ const pipelines: ApiPipeline[] = [
       },
       {
         name: 'output',
-      }
-    ]
+      },
+    ],
   },
   {
     created_at: new Date('2018-04-03T20:58:23.000Z'),
@@ -102,8 +102,16 @@ const pipelines: ApiPipeline[] = [
       },
       {
         name: 'output',
-      }
-    ]
+      },
+    ],
+  },
+  {
+    created_at: new Date('2019-10-25T20:59:23.000Z'),
+    description:
+      'A pipeline using [markdown](https://en.wikipedia.org/wiki/Markdown) for description.',
+    id: '8fbe3bd6-a01f-11e8-98d0-529269fb1461',
+    name: 'Markdown description',
+    parameters: [],
   },
 ];
 
@@ -134,25 +142,27 @@ const jobs: ApiJob[] = [
         {
           name: 'output',
           value: 'gs://path-to-my-project',
-        }
+        },
       ],
       pipeline_id: pipelines[0].id,
       pipeline_name: pipelines[0].name,
     },
-    resource_references: [{
-      key: {
-        id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
-        type: ApiResourceType.EXPERIMENT,
+    resource_references: [
+      {
+        key: {
+          id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
+          type: ApiResourceType.EXPERIMENT,
+        },
+        relationship: ApiRelationship.OWNER,
       },
-      relationship: ApiRelationship.OWNER,
-    }],
+    ],
     status: 'Failed:Succeeded',
     trigger: {
       cron_schedule: {
         cron: '30 1 * * * ?',
         end_time: new Date('2018-04-01T21:58:23.000Z'),
         start_time: new Date('2018-03-01T21:58:23.000Z'),
-      }
+      },
     },
     updated_at: new Date('2018-03-01T21:58:23.000Z'),
   },
@@ -176,18 +186,20 @@ const jobs: ApiJob[] = [
         {
           name: 'output',
           value: 'some-output-path',
-        }
+        },
       ],
       pipeline_id: pipelines[1].id,
       pipeline_name: pipelines[1].name,
     },
-    resource_references: [{
-      key: {
-        id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
-        type: ApiResourceType.EXPERIMENT,
+    resource_references: [
+      {
+        key: {
+          id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
+          type: ApiResourceType.EXPERIMENT,
+        },
+        relationship: ApiRelationship.OWNER,
       },
-      relationship: ApiRelationship.OWNER,
-    }],
+    ],
     status: 'Succeeded',
     trigger: {
       cron_schedule: {
@@ -221,24 +233,26 @@ const jobs: ApiJob[] = [
         {
           name: 'output',
           value: 'gs://path-to-my-other-project',
-        }
+        },
       ],
       pipeline_id: pipelines[2].id,
       pipeline_name: pipelines[2].name,
     },
-    resource_references: [{
-      key: {
-        id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
-        type: ApiResourceType.EXPERIMENT,
+    resource_references: [
+      {
+        key: {
+          id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
+          type: ApiResourceType.EXPERIMENT,
+        },
+        relationship: ApiRelationship.OWNER,
       },
-      relationship: ApiRelationship.OWNER,
-    }],
+    ],
     status: 'Succeeded',
     trigger: {
       periodic_schedule: {
         end_time: new Date('2018-03-03T23:58:23.000Z'),
         interval_second: '439652',
-      }
+      },
     },
     updated_at: new Date('2018-03-03T23:58:23.000Z'),
   },
@@ -258,7 +272,8 @@ const experiments: ApiExperiment[] = [
     name: 'Kubeflow Pipelines Experiment',
   },
   {
-    description: 'A different Pipeline experiment used to group runs. ' +
+    description:
+      'A different Pipeline experiment used to group runs. ' +
       'This experiment also has a very long description, which should overflow the container card.',
     id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
     name: 'Experiment Number 2',
@@ -287,7 +302,7 @@ const runs: ApiRunDetail[] = [
           name: 'log_loss',
           node_id: 'coinflip-recursive-q7dqb',
           number_value: -0.573,
-        }
+        },
       ],
       name: 'coinflip-recursive-run-lknlfs3',
       pipeline_spec: {
@@ -298,13 +313,15 @@ const runs: ApiRunDetail[] = [
         pipeline_id: pipelines[0].id,
         pipeline_name: pipelines[0].name,
       },
-      resource_references: [{
-        key: {
-          id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
-          type: ApiResourceType.EXPERIMENT,
+      resource_references: [
+        {
+          key: {
+            id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
+            type: ApiResourceType.EXPERIMENT,
+          },
+          relationship: ApiRelationship.OWNER,
         },
-        relationship: ApiRelationship.OWNER,
-      }],
+      ],
       scheduled_at: new Date('2018-03-17T20:58:23.000Z'),
       status: 'Failed:Succeeded',
     },
@@ -337,13 +354,15 @@ const runs: ApiRunDetail[] = [
         pipeline_id: pipelines[0].id,
         pipeline_name: pipelines[0].name,
       },
-      resource_references: [{
-        key: {
-          id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
-          type: ApiResourceType.EXPERIMENT,
+      resource_references: [
+        {
+          key: {
+            id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
+            type: ApiResourceType.EXPERIMENT,
+          },
+          relationship: ApiRelationship.OWNER,
         },
-        relationship: ApiRelationship.OWNER,
-      }],
+      ],
       scheduled_at: new Date('2018-04-17T21:00:00.000Z'),
       status: 'Error',
     },
@@ -356,12 +375,14 @@ const runs: ApiRunDetail[] = [
       created_at: new Date('2018-05-17T21:58:23.000Z'),
       description: 'A simple run with json input',
       id: '183ac01f-dc26-4ebf-b817-7b3f96fdc3ac',
-      metrics: [{
-        format: RunMetricFormat.PERCENTAGE,
-        name: 'accuracy',
-        node_id: 'json-12abc',
-        number_value: 0.5423,
-      }],
+      metrics: [
+        {
+          format: RunMetricFormat.PERCENTAGE,
+          name: 'accuracy',
+          node_id: 'json-12abc',
+          number_value: 0.5423,
+        },
+      ],
       name: 'json-12abc',
       pipeline_spec: {
         parameters: [
@@ -371,16 +392,18 @@ const runs: ApiRunDetail[] = [
         pipeline_id: pipelines[2].id,
         pipeline_name: pipelines[2].name,
       },
-      resource_references: [{
-        key: {
-          id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
-          type: ApiResourceType.EXPERIMENT,
+      resource_references: [
+        {
+          key: {
+            id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
+            type: ApiResourceType.EXPERIMENT,
+          },
+          relationship: ApiRelationship.OWNER,
         },
-        relationship: ApiRelationship.OWNER,
-      }],
+      ],
       scheduled_at: new Date('2018-05-17T21:58:23.000Z'),
       status: 'Running',
-    }
+    },
   },
   {
     pipeline_runtime: {
@@ -390,12 +413,14 @@ const runs: ApiRunDetail[] = [
       created_at: new Date('2018-05-17T21:58:23.000Z'),
       description: 'A simple hello world run',
       id: 'fa5d897e-88d3-4dfc-b189-9dea6947c9bc',
-      metrics: [{
-        format: RunMetricFormat.PERCENTAGE,
-        name: 'accuracy',
-        node_id: 'hello-world-7sm94',
-        number_value: 0.5423,
-      }],
+      metrics: [
+        {
+          format: RunMetricFormat.PERCENTAGE,
+          name: 'accuracy',
+          node_id: 'hello-world-7sm94',
+          number_value: 0.5423,
+        },
+      ],
       name: 'hello-world-7sm94',
       pipeline_spec: {
         parameters: [
@@ -405,13 +430,15 @@ const runs: ApiRunDetail[] = [
         pipeline_id: pipelines[2].id,
         pipeline_name: pipelines[2].name,
       },
-      resource_references: [{
-        key: {
-          id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
-          type: ApiResourceType.EXPERIMENT,
+      resource_references: [
+        {
+          key: {
+            id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
+            type: ApiResourceType.EXPERIMENT,
+          },
+          relationship: ApiRelationship.OWNER,
         },
-        relationship: ApiRelationship.OWNER,
-      }],
+      ],
       scheduled_at: new Date('2018-05-17T21:58:23.000Z'),
       status: 'Running',
     },
@@ -425,12 +452,14 @@ const runs: ApiRunDetail[] = [
       description: 'A simple hello world run, but with steps. Not attached to any experiment',
       finished_at: new Date('2018-06-18T21:00:33.000Z'),
       id: '21afb688-7597-47e9-b6c3-35d3145fe5e1',
-      metrics: [{
-        format: RunMetricFormat.PERCENTAGE,
-        name: 'accuracy',
-        node_id: 'hello-world-61985dbf-4299-458b-a183-1f2c2436c21c',
-        number_value: 0.43,
-      }],
+      metrics: [
+        {
+          format: RunMetricFormat.PERCENTAGE,
+          name: 'accuracy',
+          node_id: 'hello-world-61985dbf-4299-458b-a183-1f2c2436c21c',
+          number_value: 0.43,
+        },
+      ],
       name: 'hello-world-with-steps-kajnkv4',
       pipeline_spec: {
         parameters: [
@@ -487,13 +516,15 @@ const runs: ApiRunDetail[] = [
         pipeline_id: pipelines[1].id,
         pipeline_name: pipelines[1].name,
       },
-      resource_references: [{
-        key: {
-          id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
-          type: ApiResourceType.EXPERIMENT,
+      resource_references: [
+        {
+          key: {
+            id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
+            type: ApiResourceType.EXPERIMENT,
+          },
+          relationship: ApiRelationship.OWNER,
         },
-        relationship: ApiRelationship.OWNER,
-      }],
+      ],
       scheduled_at: new Date('2018-07-17T23:58:23.000Z'),
       status: 'Pending',
     },
@@ -504,14 +535,15 @@ const runs: ApiRunDetail[] = [
     },
     run: {
       created_at: new Date('2018-08-18T20:58:23.000Z'),
-      description: 'An xgboost evaluation run with a very long description that includes:'
-        + ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum commodo'
-        + ' libero, a imperdiet ipsum cursus id. Nullam odio sem, ornare id sollicitudin ac,'
-        + ' rutrum in dolor. Integer interdum lacus in ex rutrum elementum. Mauris gravida feugiat'
-        + ' enim, ac dapibus augue rhoncus in. Integer vel tempus nulla. Cras sed ultrices dolor.'
-        + ' Ut nec dapibus eros, vitae iaculis nunc. In aliquet accumsan rhoncus. Donec vitae'
-        + ' ipsum a tellus fermentum pharetra in in neque. Pellentesque consequat felis non est'
-        + ' vulputate pellentesque. Aliquam eget cursus enim.',
+      description:
+        'An xgboost evaluation run with a very long description that includes:' +
+        ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum commodo' +
+        ' libero, a imperdiet ipsum cursus id. Nullam odio sem, ornare id sollicitudin ac,' +
+        ' rutrum in dolor. Integer interdum lacus in ex rutrum elementum. Mauris gravida feugiat' +
+        ' enim, ac dapibus augue rhoncus in. Integer vel tempus nulla. Cras sed ultrices dolor.' +
+        ' Ut nec dapibus eros, vitae iaculis nunc. In aliquet accumsan rhoncus. Donec vitae' +
+        ' ipsum a tellus fermentum pharetra in in neque. Pellentesque consequat felis non est' +
+        ' vulputate pellentesque. Aliquam eget cursus enim.',
       finished_at: new Date('2018-08-20T21:01:23.000Z'),
       id: '7fc01714-4a13-4c05-8044-a8a72c14253b',
       metrics: [
@@ -526,9 +558,10 @@ const runs: ApiRunDetail[] = [
           name: 'log_loss',
           node_id: 'xgboost-training-gzkm9-2365787662',
           number_value: -0.123,
-        }
+        },
       ],
-      name: 'xgboost-run-with-a-veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-' +
+      name:
+        'xgboost-run-with-a-veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-' +
         'loooooooooooooooooooooooooooong-name-aifk298',
       pipeline_spec: {
         parameters: [
@@ -538,13 +571,15 @@ const runs: ApiRunDetail[] = [
         pipeline_id: pipelines[1].id,
         pipeline_name: pipelines[1].name,
       },
-      resource_references: [{
-        key: {
-          id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
-          type: ApiResourceType.EXPERIMENT,
+      resource_references: [
+        {
+          key: {
+            id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
+            type: ApiResourceType.EXPERIMENT,
+          },
+          relationship: ApiRelationship.OWNER,
         },
-        relationship: ApiRelationship.OWNER,
-      }],
+      ],
       scheduled_at: new Date('2018-08-18T20:58:23.000Z'),
       status: 'Succeeded',
     },
@@ -570,7 +605,7 @@ const runs: ApiRunDetail[] = [
           name: 'log_loss',
           node_id: 'hello-world-7sm94',
           number_value: -0.223,
-        }
+        },
       ],
       name: 'hello-world-with-pipeline',
       pipeline_spec: {
@@ -580,13 +615,15 @@ const runs: ApiRunDetail[] = [
         ],
         workflow_manifest: JSON.stringify(helloWorldRun),
       },
-      resource_references: [{
-        key: {
-          id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
-          type: ApiResourceType.EXPERIMENT,
+      resource_references: [
+        {
+          key: {
+            id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
+            type: ApiResourceType.EXPERIMENT,
+          },
+          relationship: ApiRelationship.OWNER,
         },
-        relationship: ApiRelationship.OWNER,
-      }],
+      ],
       scheduled_at: new Date('2018-08-18T20:58:23.000Z'),
       status: 'Succeeded',
     },
@@ -624,7 +661,9 @@ function generateNRuns(): ApiRunDetail[] {
       run: {
         created_at: new Date('2018-02-12T20:' + padStartTwoZeroes(i.toString()) + ':23.000Z'),
         description: 'The description of a dummy run',
-        finished_at: new Date('2018-02-12T20:' + padStartTwoZeroes(((2 * i) % 60).toString()) + ':25.000Z'),
+        finished_at: new Date(
+          '2018-02-12T20:' + padStartTwoZeroes(((2 * i) % 60).toString()) + ':25.000Z',
+        ),
         id: 'Some-run-id-' + i,
         metrics: [
           {
@@ -655,13 +694,15 @@ function generateNRuns(): ApiRunDetail[] {
           pipeline_id: 'Some-pipeline-id-' + i,
           pipeline_name: 'Kubeflow Pipeline number ' + i,
         },
-        resource_references: [{
-          key: {
-            id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
-            type: ApiResourceType.EXPERIMENT,
+        resource_references: [
+          {
+            key: {
+              id: '275ea11d-ac63-4ce3-bc33-ec81981ed56a',
+              type: ApiResourceType.EXPERIMENT,
+            },
+            relationship: ApiRelationship.OWNER,
           },
-          relationship: ApiRelationship.OWNER,
-        }],
+        ],
         scheduled_at: new Date('2018-02-12T20:' + padStartTwoZeroes(i.toString()) + ':23.000Z'),
         status: 'Succeeded',
       },
@@ -697,17 +738,19 @@ function generateNJobs(): ApiJob[] {
           {
             name: 'output',
             value: 'gs://path-to-my-project',
-          }
+          },
         ],
         pipeline_id: pipelines[i % pipelines.length].id,
       },
-      resource_references: [{
-        key: {
-          id: '7fc01714-4a13-4c05-5902-a8a72c14253b',
-          type: ApiResourceType.EXPERIMENT,
+      resource_references: [
+        {
+          key: {
+            id: '7fc01714-4a13-4c05-5902-a8a72c14253b',
+            type: ApiResourceType.EXPERIMENT,
+          },
+          relationship: ApiRelationship.OWNER,
         },
-        relationship: ApiRelationship.OWNER,
-      }],
+      ],
       status: 'Succeeded',
       trigger: undefined,
       updated_at: new Date('2018-02-01T20:' + padStartTwoZeroes(i.toString()) + ':23.000Z'),
diff --git a/frontend/mock-backend/mock-api-server.ts b/frontend/mock-backend/mock-api-server.ts
index acc3e714867e..82a7377ecca4 100644
--- a/frontend/mock-backend/mock-api-server.ts
+++ b/frontend/mock-backend/mock-api-server.ts
@@ -18,6 +18,9 @@ import mockApiMiddleware from './mock-api-middleware';
 const app = express();
 const port = process.argv[2] || 3001;
 
+// Uncomment the following line to get 1000ms delay to all requests
+// app.use((req, res, next) => { setTimeout(next, 1000); });
+
 app.use((_, res, next) => {
   res.header('Access-Control-Allow-Origin', '*');
   res.header('Access-Control-Allow-Headers', 'X-Requested-With, content-type');
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d939c24ca742..8f5ca589faf6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -63,6 +63,24 @@
         "regenerator-runtime": "^0.12.0"
       }
     },
+    "@grpc/proto-loader": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.3.0.tgz",
+      "integrity": "sha512-9b8S/V+3W4Gv7G/JKSZ48zApgyYbfIR7mAC9XNnaSWme3zj57MIESu0ELzm9j5oxNIpFG8DgO00iJMIUZ5luqw==",
+      "requires": {
+        "@types/lodash": "^4.14.104",
+        "@types/node": "^9.4.6",
+        "lodash": "^4.17.5",
+        "protobufjs": "^6.8.6"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "9.6.52",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.52.tgz",
+          "integrity": "sha512-d6UdHtc8HKe3NTruj9mHk2B8EiHZyuG/00aYbUedHvy9sBhtLAX1gaxSNgvcheOvIZavvmpJYlwfHjjxlU/Few=="
+        }
+      }
+    },
     "@material-ui/core": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.7.1.tgz",
@@ -144,6 +162,60 @@
         "react-is": "^16.6.3"
       }
     },
+    "@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
+    },
+    "@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
+    },
+    "@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+      "requires": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
+    },
+    "@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
+    },
+    "@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
+    },
+    "@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
+    },
+    "@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
+    },
     "@types/body-parser": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.17.0.tgz",
@@ -155,10 +227,13 @@
       }
     },
     "@types/cheerio": {
-      "version": "0.22.10",
-      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.10.tgz",
-      "integrity": "sha512-fOM/Jhv51iyugY7KOBZz2ThfT1gwvsGCfWxpLpZDgkGjpEO4Le9cld07OdskikLjDUQJ43dzDaVRSFwQlpdqVg==",
-      "dev": true
+      "version": "0.22.13",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.13.tgz",
+      "integrity": "sha512-OZd7dCUOUkiTorf97vJKwZnSja/DmHfuBAroe1kREZZTCf/tlFecwHhsOos3uVHxeKGZDwzolIrCUApClkdLuA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
     },
     "@types/connect": {
       "version": "3.4.32",
@@ -442,9 +517,9 @@
       "dev": true
     },
     "@types/enzyme": {
-      "version": "3.1.15",
-      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.1.15.tgz",
-      "integrity": "sha512-6b4JWgV+FNec1c4+8HauGbXg5gRc1oQK93t2+4W+bHjG/PzO+iPvagY6d6bXAZ+t+ps51Zb2F9LQ4vl0S0Epog==",
+      "version": "3.10.3",
+      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.3.tgz",
+      "integrity": "sha512-f/Kcb84sZOSZiBPCkr4He9/cpuSLcKRyQaEE20Q30Prx0Dn6wcyMAWI0yofL6yvd9Ht9G7EVkQeRqK0n5w8ILw==",
       "dev": true,
       "requires": {
         "@types/cheerio": "*",
@@ -452,9 +527,9 @@
       }
     },
     "@types/enzyme-adapter-react-16": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.3.tgz",
-      "integrity": "sha512-9eRLBsC/Djkys05BdTWgav8v6fSCjyzjNuLwG2sfa2b2g/VAN10luP0zB0VwtOWFQ0LGjIboJJvIsVdU5gqRmg==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.5.tgz",
+      "integrity": "sha512-K7HLFTkBDN5RyRmU90JuYt8OWEY2iKUn43SDWEoBOXd/PowUWjLZ3Q6qMBiQuZeFYK/TOstaZxsnI0fXoAfLpg==",
       "dev": true,
       "requires": {
         "@types/enzyme": "*"
@@ -549,8 +624,21 @@
     "@types/lodash": {
       "version": "4.14.119",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.119.tgz",
-      "integrity": "sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw==",
-      "dev": true
+      "integrity": "sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw=="
+    },
+    "@types/long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-1w52Nyx4Gq47uuu0EVcsHBxZFJgurQ+rTKS3qMHxR1GY2T8c2AJYd6vZoZ9q1rupaDjU0yT+Jc2XTyXkjeMA+Q=="
+    },
+    "@types/markdown-to-jsx": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/@types/markdown-to-jsx/-/markdown-to-jsx-6.9.0.tgz",
+      "integrity": "sha512-LO/oxz+ZfwBDciiVGqLhhdyeWt196kgICe0QS88K1a2u/FgUF1QkeMAm4zdnAo1kNgo2KgFP1Uqy2IiPJLWppA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
     },
     "@types/mime": {
       "version": "2.0.0",
@@ -567,8 +655,7 @@
     "@types/node": {
       "version": "10.12.18",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz",
-      "integrity": "sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ==",
-      "dev": true
+      "integrity": "sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ=="
     },
     "@types/prop-types": {
       "version": "15.5.8",
@@ -744,6 +831,43 @@
         "es6-promisify": "^5.0.0"
       }
     },
+    "airbnb-prop-types": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz",
+      "integrity": "sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==",
+      "dev": true,
+      "requires": {
+        "array.prototype.find": "^2.1.0",
+        "function.prototype.name": "^1.1.1",
+        "has": "^1.0.3",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.0",
+        "prop-types": "^15.7.2",
+        "prop-types-exact": "^1.2.0",
+        "react-is": "^16.9.0"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.7.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.8.1"
+          }
+        },
+        "react-is": {
+          "version": "16.10.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
+          "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==",
+          "dev": true
+        }
+      }
+    },
     "ajv": {
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
@@ -1006,15 +1130,51 @@
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
+    "array.prototype.find": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.0.tgz",
+      "integrity": "sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.13.0"
+      }
+    },
     "array.prototype.flat": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz",
-      "integrity": "sha512-rVqIs330nLJvfC7JqYvEWwqVr5QjYF1ib02i3YJtR/fICO6527Tjpc/e4Mvmxh3GIePPreRXMdaGyC99YphWEw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.2.tgz",
+      "integrity": "sha512-VXjh7lAL4KXKF2hY4FnEW9eRW6IhdvFW1sN/JwLbmECbCgACCnBHNyP3lFiYuttr0jxRN9Bsc5+G27dMseSWqQ==",
       "dev": true,
       "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.10.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.15.0",
         "function-bind": "^1.1.1"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.15.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.15.0.tgz",
+          "integrity": "sha512-bhkEqWJ2t2lMeaJDuk7okMkJWI/yqgH/EoGwpcvv0XW9RWQsRspI4wt6xuyuvMvvQE3gg/D9HXppgk21w78GyQ==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.0",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.0",
+            "is-callable": "^1.1.4",
+            "is-regex": "^1.0.4",
+            "object-inspect": "^1.6.0",
+            "object-keys": "^1.1.1",
+            "string.prototype.trimleft": "^2.1.0",
+            "string.prototype.trimright": "^2.1.0"
+          }
+        },
+        "object-keys": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+          "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+          "dev": true
+        }
       }
     },
     "arrify": {
@@ -1027,6 +1187,15 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
+    "ascli": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ascli/-/ascli-1.0.1.tgz",
+      "integrity": "sha1-vPpZdKYvGOgcq660lzKrSoj5Brw=",
+      "requires": {
+        "colour": "~0.7.1",
+        "optjs": "~3.2.2"
+      }
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -2148,15 +2317,23 @@
       }
     },
     "bfj": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.1.tgz",
-      "integrity": "sha512-+GUNvzHR4nRyGybQc2WpNJL4MJazMuvf92ueIyA0bIkPRwhhQu3IfZQ2PSoVPpCBJfmoSdOxu5rnotfFLlvYRQ==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
+      "integrity": "sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==",
       "dev": true,
       "requires": {
-        "bluebird": "^3.5.1",
-        "check-types": "^7.3.0",
-        "hoopy": "^0.1.2",
-        "tryer": "^1.0.0"
+        "bluebird": "^3.5.5",
+        "check-types": "^8.0.3",
+        "hoopy": "^0.1.4",
+        "tryer": "^1.0.1"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "3.7.1",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.1.tgz",
+          "integrity": "sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==",
+          "dev": true
+        }
       }
     },
     "big.js": {
@@ -2471,6 +2648,21 @@
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
     },
+    "bytebuffer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/bytebuffer/-/bytebuffer-5.0.1.tgz",
+      "integrity": "sha1-WC7qSxqHO20CCkjVjfhfC7ps/d0=",
+      "requires": {
+        "long": "~3"
+      },
+      "dependencies": {
+        "long": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
+          "integrity": "sha1-2CG3E4yhy1gcFymQ7xTbIAtcR0s="
+        }
+      }
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -2695,25 +2887,35 @@
       "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
     },
     "check-types": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
-      "integrity": "sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
+      "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
       "dev": true
     },
     "cheerio": {
-      "version": "1.0.0-rc.2",
-      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
-      "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=",
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz",
+      "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==",
       "dev": true,
       "requires": {
         "css-select": "~1.2.0",
-        "dom-serializer": "~0.1.0",
+        "dom-serializer": "~0.1.1",
         "entities": "~1.1.1",
         "htmlparser2": "^3.9.1",
         "lodash": "^4.15.0",
         "parse5": "^3.0.1"
       },
       "dependencies": {
+        "dom-serializer": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "entities": "^1.1.1"
+          }
+        },
         "domhandler": {
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
@@ -2724,17 +2926,17 @@
           }
         },
         "htmlparser2": {
-          "version": "3.10.0",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.0.tgz",
-          "integrity": "sha512-J1nEUGv+MkXS0weHNWVKJJ+UrLfePxRWpN3C9bEi9fLxL2+ggW94DQvgYVXsaT30PGwYRIZKNZXuyMhp3Di4bQ==",
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+          "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
           "dev": true,
           "requires": {
-            "domelementtype": "^1.3.0",
+            "domelementtype": "^1.3.1",
             "domhandler": "^2.3.0",
             "domutils": "^1.5.1",
             "entities": "^1.1.1",
             "inherits": "^2.0.1",
-            "readable-stream": "^3.0.6"
+            "readable-stream": "^3.1.1"
           }
         },
         "parse5": {
@@ -2747,9 +2949,9 @@
           }
         },
         "readable-stream": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
-          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
+          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.3",
@@ -3073,6 +3275,11 @@
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM="
     },
+    "colour": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/colour/-/colour-0.7.1.tgz",
+      "integrity": "sha1-nLFpkX7F0SwHNtPoaFdG3xyt93g="
+    },
     "combined-stream": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
@@ -4327,9 +4534,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "ejs": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
-      "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.1.tgz",
+      "integrity": "sha512-kS/gEPzZs3Y1rRsbGX4UOSjtP/CeJP0CxSNZHYxGfVM/VgLcv0ZqM7C45YyTj2DI2g7+P9Dd24C+IMIg6D0nYQ==",
       "dev": true
     },
     "electron-to-chromium": {
@@ -4394,18 +4601,20 @@
       "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
     },
     "enzyme": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.8.0.tgz",
-      "integrity": "sha512-bfsWo5nHyZm1O1vnIsbwdfhU989jk+squU9NKvB+Puwo5j6/Wg9pN5CO0YJelm98Dao3NPjkDZk+vvgwpMwYxw==",
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.10.0.tgz",
+      "integrity": "sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==",
       "dev": true,
       "requires": {
         "array.prototype.flat": "^1.2.1",
         "cheerio": "^1.0.0-rc.2",
         "function.prototype.name": "^1.1.0",
         "has": "^1.0.3",
+        "html-element-map": "^1.0.0",
         "is-boolean-object": "^1.0.0",
         "is-callable": "^1.1.4",
         "is-number-object": "^1.0.3",
+        "is-regex": "^1.0.4",
         "is-string": "^1.0.4",
         "is-subset": "^0.1.1",
         "lodash.escape": "^4.0.1",
@@ -4421,30 +4630,94 @@
       }
     },
     "enzyme-adapter-react-16": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.7.1.tgz",
-      "integrity": "sha512-OQXKgfHWyHN3sFu2nKj3mhgRcqIPIJX6aOzq5AHVFES4R9Dw/vCBZFMPyaG81g2AZ5DogVh39P3MMNUbqNLTcw==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.1.tgz",
+      "integrity": "sha512-yMPxrP3vjJP+4wL/qqfkT6JAIctcwKF+zXO6utlGPgUJT2l4tzrdjMDWGd/Pp1BjHBcljhN24OzNEGRteibJhA==",
       "dev": true,
       "requires": {
-        "enzyme-adapter-utils": "^1.9.0",
-        "function.prototype.name": "^1.1.0",
+        "enzyme-adapter-utils": "^1.12.1",
+        "enzyme-shallow-equal": "^1.0.0",
+        "has": "^1.0.3",
         "object.assign": "^4.1.0",
-        "object.values": "^1.0.4",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.1",
-        "react-test-renderer": "^16.0.0-0"
+        "object.values": "^1.1.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.10.2",
+        "react-test-renderer": "^16.0.0-0",
+        "semver": "^5.7.0"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.7.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.8.1"
+          }
+        },
+        "react-is": {
+          "version": "16.10.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
+          "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==",
+          "dev": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
       }
     },
     "enzyme-adapter-utils": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.9.1.tgz",
-      "integrity": "sha512-LWc88BbKztLXlpRf5Ba/pSMJRaNezAwZBvis3N/IuB65ltZEh2E2obWU9B36pAbw7rORYeBUuqc79OL17ZzN1A==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.1.tgz",
+      "integrity": "sha512-KWiHzSjZaLEoDCOxY8Z1RAbUResbqKN5bZvenPbfKtWorJFVETUw754ebkuCQ3JKm0adx1kF8JaiR+PHPiP47g==",
       "dev": true,
       "requires": {
-        "function.prototype.name": "^1.1.0",
+        "airbnb-prop-types": "^2.15.0",
+        "function.prototype.name": "^1.1.1",
         "object.assign": "^4.1.0",
-        "prop-types": "^15.6.2",
-        "semver": "^5.6.0"
+        "object.fromentries": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "semver": "^5.7.0"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.7.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.8.1"
+          }
+        },
+        "react-is": {
+          "version": "16.10.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
+          "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==",
+          "dev": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "enzyme-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-VUf+q5o1EIv2ZaloNQQtWCJM9gpeux6vudGVH6vLmfPXFLRuxl5+Aq3U260wof9nn0b0i+P5OEUXm1vnxkRpXQ==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3",
+        "object-is": "^1.0.1"
       }
     },
     "enzyme-to-json": {
@@ -5323,13 +5596,13 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz",
-      "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
+      "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
       "optional": true,
       "requires": {
-        "nan": "^2.9.2",
-        "node-pre-gyp": "^0.10.0"
+        "nan": "^2.12.1",
+        "node-pre-gyp": "^0.12.0"
       },
       "dependencies": {
         "abbrev": {
@@ -5347,7 +5620,7 @@
           "optional": true
         },
         "are-we-there-yet": {
-          "version": "1.1.4",
+          "version": "1.1.5",
           "bundled": true,
           "optional": true,
           "requires": {
@@ -5368,7 +5641,7 @@
           }
         },
         "chownr": {
-          "version": "1.0.1",
+          "version": "1.1.1",
           "bundled": true,
           "optional": true
         },
@@ -5390,15 +5663,15 @@
           "optional": true
         },
         "debug": {
-          "version": "2.6.9",
+          "version": "4.1.1",
           "bundled": true,
           "optional": true,
           "requires": {
-            "ms": "2.0.0"
+            "ms": "^2.1.1"
           }
         },
         "deep-extend": {
-          "version": "0.5.1",
+          "version": "0.6.0",
           "bundled": true,
           "optional": true
         },
@@ -5441,7 +5714,7 @@
           }
         },
         "glob": {
-          "version": "7.1.2",
+          "version": "7.1.3",
           "bundled": true,
           "optional": true,
           "requires": {
@@ -5459,11 +5732,11 @@
           "optional": true
         },
         "iconv-lite": {
-          "version": "0.4.21",
+          "version": "0.4.24",
           "bundled": true,
           "optional": true,
           "requires": {
-            "safer-buffer": "^2.1.0"
+            "safer-buffer": ">= 2.1.2 < 3"
           }
         },
         "ignore-walk": {
@@ -5516,15 +5789,15 @@
           "bundled": true
         },
         "minipass": {
-          "version": "2.2.4",
+          "version": "2.3.5",
           "bundled": true,
           "requires": {
-            "safe-buffer": "^5.1.1",
+            "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
           }
         },
         "minizlib": {
-          "version": "1.1.0",
+          "version": "1.2.1",
           "bundled": true,
           "optional": true,
           "requires": {
@@ -5539,32 +5812,32 @@
           }
         },
         "ms": {
-          "version": "2.0.0",
+          "version": "2.1.1",
           "bundled": true,
           "optional": true
         },
         "needle": {
-          "version": "2.2.0",
+          "version": "2.3.0",
           "bundled": true,
           "optional": true,
           "requires": {
-            "debug": "^2.1.2",
+            "debug": "^4.1.0",
             "iconv-lite": "^0.4.4",
             "sax": "^1.2.4"
           }
         },
         "node-pre-gyp": {
-          "version": "0.10.0",
+          "version": "0.12.0",
           "bundled": true,
           "optional": true,
           "requires": {
             "detect-libc": "^1.0.2",
             "mkdirp": "^0.5.1",
-            "needle": "^2.2.0",
+            "needle": "^2.2.1",
             "nopt": "^4.0.1",
             "npm-packlist": "^1.1.6",
             "npmlog": "^4.0.2",
-            "rc": "^1.1.7",
+            "rc": "^1.2.7",
             "rimraf": "^2.6.1",
             "semver": "^5.3.0",
             "tar": "^4"
@@ -5580,12 +5853,12 @@
           }
         },
         "npm-bundled": {
-          "version": "1.0.3",
+          "version": "1.0.6",
           "bundled": true,
           "optional": true
         },
         "npm-packlist": {
-          "version": "1.1.10",
+          "version": "1.4.1",
           "bundled": true,
           "optional": true,
           "requires": {
@@ -5650,11 +5923,11 @@
           "optional": true
         },
         "rc": {
-          "version": "1.2.7",
+          "version": "1.2.8",
           "bundled": true,
           "optional": true,
           "requires": {
-            "deep-extend": "^0.5.1",
+            "deep-extend": "^0.6.0",
             "ini": "~1.3.0",
             "minimist": "^1.2.0",
             "strip-json-comments": "~2.0.1"
@@ -5682,15 +5955,15 @@
           }
         },
         "rimraf": {
-          "version": "2.6.2",
+          "version": "2.6.3",
           "bundled": true,
           "optional": true,
           "requires": {
-            "glob": "^7.0.5"
+            "glob": "^7.1.3"
           }
         },
         "safe-buffer": {
-          "version": "5.1.1",
+          "version": "5.1.2",
           "bundled": true
         },
         "safer-buffer": {
@@ -5704,7 +5977,7 @@
           "optional": true
         },
         "semver": {
-          "version": "5.5.0",
+          "version": "5.7.0",
           "bundled": true,
           "optional": true
         },
@@ -5748,16 +6021,16 @@
           "optional": true
         },
         "tar": {
-          "version": "4.4.1",
+          "version": "4.4.8",
           "bundled": true,
           "optional": true,
           "requires": {
-            "chownr": "^1.0.1",
+            "chownr": "^1.1.1",
             "fs-minipass": "^1.2.5",
-            "minipass": "^2.2.4",
-            "minizlib": "^1.1.0",
+            "minipass": "^2.3.4",
+            "minizlib": "^1.1.1",
             "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.1",
+            "safe-buffer": "^5.1.2",
             "yallist": "^3.0.2"
           }
         },
@@ -5767,11 +6040,11 @@
           "optional": true
         },
         "wide-align": {
-          "version": "1.1.2",
+          "version": "1.1.3",
           "bundled": true,
           "optional": true,
           "requires": {
-            "string-width": "^1.0.2"
+            "string-width": "^1.0.2 || 2"
           }
         },
         "wrappy": {
@@ -5779,7 +6052,7 @@
           "bundled": true
         },
         "yallist": {
-          "version": "3.0.2",
+          "version": "3.0.3",
           "bundled": true
         }
       }
@@ -5790,16 +6063,23 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "function.prototype.name": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.0.tgz",
-      "integrity": "sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.1.tgz",
+      "integrity": "sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==",
       "dev": true,
       "requires": {
-        "define-properties": "^1.1.2",
+        "define-properties": "^1.1.3",
         "function-bind": "^1.1.1",
-        "is-callable": "^1.1.3"
+        "functions-have-names": "^1.1.1",
+        "is-callable": "^1.1.4"
       }
     },
+    "functions-have-names": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.1.1.tgz",
+      "integrity": "sha512-U0kNHUoxwPNPWOJaMG7Z00d4a/qZVrFtzWJRaK8V9goaVOCXBSQSJpt3MYGNtkScKEBKovxLjnNdC9MlXwo5Pw==",
+      "dev": true
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@@ -5912,95 +6192,580 @@
         }
       }
     },
-    "global-dirs": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
-      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
-      "requires": {
-        "ini": "^1.3.4"
-      }
-    },
-    "global-modules": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
-      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
-      "requires": {
-        "global-prefix": "^1.0.1",
-        "is-windows": "^1.0.1",
-        "resolve-dir": "^1.0.0"
-      }
-    },
-    "global-prefix": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
-      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
-      "requires": {
-        "expand-tilde": "^2.0.2",
-        "homedir-polyfill": "^1.0.1",
-        "ini": "^1.3.4",
-        "is-windows": "^1.0.1",
-        "which": "^1.2.14"
-      }
-    },
-    "globals": {
-      "version": "9.18.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
-    },
-    "globby": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
-      "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=",
-      "requires": {
-        "array-union": "^1.0.1",
-        "arrify": "^1.0.0",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      }
-    },
-    "got": {
-      "version": "6.7.1",
-      "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
-      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
-      "requires": {
-        "create-error-class": "^3.0.0",
-        "duplexer3": "^0.1.4",
-        "get-stream": "^3.0.0",
-        "is-redirect": "^1.0.0",
-        "is-retry-allowed": "^1.0.0",
-        "is-stream": "^1.0.0",
-        "lowercase-keys": "^1.0.0",
-        "safe-buffer": "^5.0.1",
-        "timed-out": "^4.0.0",
-        "unzip-response": "^2.0.1",
-        "url-parse-lax": "^1.0.0"
-      }
-    },
-    "graceful-fs": {
-      "version": "4.1.15",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
-      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
-    },
-    "graphlib": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.7.tgz",
-      "integrity": "sha512-TyI9jIy2J4j0qgPmOOrHTCtpPqJGN/aurBwc6ZT+bRii+di1I+Wv3obRhVrmBEXet+qkMaEX67dXrwsd3QQM6w==",
-      "requires": {
-        "lodash": "^4.17.5"
-      }
-    },
-    "growl": {
-      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
-      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
-      "dev": true
-    },
-    "growly": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
+    "global-dirs": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
+      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
+      "requires": {
+        "ini": "^1.3.4"
+      }
+    },
+    "global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "requires": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+      "requires": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      }
+    },
+    "globals": {
+      "version": "9.18.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
+      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
+    },
+    "globby": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
+      "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=",
+      "requires": {
+        "array-union": "^1.0.1",
+        "arrify": "^1.0.0",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      }
+    },
+    "google-protobuf": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/google-protobuf/-/google-protobuf-3.10.0.tgz",
+      "integrity": "sha512-d0cMO8TJ6xtB/WrVHCv5U81L2ulX+aCD58IljyAN6mHwdHHJ2jbcauX5glvivi3s3hx7EYEo7eUA9WftzamMnw=="
+    },
+    "got": {
+      "version": "6.7.1",
+      "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
+      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
+      "requires": {
+        "create-error-class": "^3.0.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^3.0.0",
+        "is-redirect": "^1.0.0",
+        "is-retry-allowed": "^1.0.0",
+        "is-stream": "^1.0.0",
+        "lowercase-keys": "^1.0.0",
+        "safe-buffer": "^5.0.1",
+        "timed-out": "^4.0.0",
+        "unzip-response": "^2.0.1",
+        "url-parse-lax": "^1.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.1.15",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
+      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
+    },
+    "graphlib": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.7.tgz",
+      "integrity": "sha512-TyI9jIy2J4j0qgPmOOrHTCtpPqJGN/aurBwc6ZT+bRii+di1I+Wv3obRhVrmBEXet+qkMaEX67dXrwsd3QQM6w==",
+      "requires": {
+        "lodash": "^4.17.5"
+      }
+    },
+    "growl": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
+      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
+      "dev": true
+    },
+    "growly": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
+      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
+    },
+    "grpc": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/grpc/-/grpc-1.24.0.tgz",
+      "integrity": "sha512-zq1rUh2uzfMqSfQ3bZvlQuX5yKfd/2vob+l9sK5Qma6P33m7UvyMCVW70+Wz0WTzy9W2A94eQD5XIOxKnZhsYQ==",
+      "requires": {
+        "lodash.camelcase": "^4.3.0",
+        "lodash.clone": "^4.5.0",
+        "nan": "^2.13.2",
+        "node-pre-gyp": "^0.13.0",
+        "protobufjs": "^5.0.3"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.1",
+          "bundled": true
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true
+        },
+        "aproba": {
+          "version": "1.2.0",
+          "bundled": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.5",
+          "bundled": true,
+          "requires": {
+            "delegates": "^1.0.0",
+            "readable-stream": "^2.0.6"
+          }
+        },
+        "balanced-match": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "brace-expansion": {
+          "version": "1.1.11",
+          "bundled": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+        },
+        "chownr": {
+          "version": "1.1.2",
+          "bundled": true
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "debug": {
+          "version": "3.2.6",
+          "bundled": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "deep-extend": {
+          "version": "0.6.0",
+          "bundled": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "detect-libc": {
+          "version": "1.0.3",
+          "bundled": true
+        },
+        "fs-minipass": {
+          "version": "1.2.6",
+          "bundled": true,
+          "requires": {
+            "minipass": "^2.2.1"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "requires": {
+            "aproba": "^1.0.3",
+            "console-control-strings": "^1.0.0",
+            "has-unicode": "^2.0.0",
+            "object-assign": "^4.1.0",
+            "signal-exit": "^3.0.0",
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wide-align": "^1.1.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.4",
+          "bundled": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "iconv-lite": {
+          "version": "0.4.24",
+          "bundled": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        },
+        "ignore-walk": {
+          "version": "3.0.1",
+          "bundled": true,
+          "requires": {
+            "minimatch": "^3.0.4"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "requires": {
+            "once": "^1.3.0",
+            "wrappy": "1"
+          }
+        },
+        "inherits": {
+          "version": "2.0.4",
+          "bundled": true
+        },
+        "ini": {
+          "version": "1.3.5",
+          "bundled": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "bundled": true
+        },
+        "minipass": {
+          "version": "2.3.5",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "^5.1.2",
+            "yallist": "^3.0.0"
+          }
+        },
+        "minizlib": {
+          "version": "1.2.1",
+          "bundled": true,
+          "requires": {
+            "minipass": "^2.2.1"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "requires": {
+            "minimist": "0.0.8"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "0.0.8",
+              "bundled": true
+            }
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "bundled": true
+        },
+        "nan": {
+          "version": "2.14.0",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
+          "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
+        },
+        "needle": {
+          "version": "2.4.0",
+          "bundled": true,
+          "requires": {
+            "debug": "^3.2.6",
+            "iconv-lite": "^0.4.4",
+            "sax": "^1.2.4"
+          }
+        },
+        "node-pre-gyp": {
+          "version": "0.13.0",
+          "bundled": true,
+          "requires": {
+            "detect-libc": "^1.0.2",
+            "mkdirp": "^0.5.1",
+            "needle": "^2.2.1",
+            "nopt": "^4.0.1",
+            "npm-packlist": "^1.1.6",
+            "npmlog": "^4.0.2",
+            "rc": "^1.2.7",
+            "rimraf": "^2.6.1",
+            "semver": "^5.3.0",
+            "tar": "^4"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "requires": {
+            "abbrev": "1",
+            "osenv": "^0.1.4"
+          }
+        },
+        "npm-bundled": {
+          "version": "1.0.6",
+          "bundled": true
+        },
+        "npm-packlist": {
+          "version": "1.4.4",
+          "bundled": true,
+          "requires": {
+            "ignore-walk": "^3.0.1",
+            "npm-bundled": "^1.0.1"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.2",
+          "bundled": true,
+          "requires": {
+            "are-we-there-yet": "~1.1.2",
+            "console-control-strings": "~1.1.0",
+            "gauge": "~2.7.3",
+            "set-blocking": "~2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "requires": {
+            "wrappy": "1"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "^1.0.0"
+          }
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "osenv": {
+          "version": "0.1.5",
+          "bundled": true,
+          "requires": {
+            "os-homedir": "^1.0.0",
+            "os-tmpdir": "^1.0.0"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "protobufjs": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-5.0.3.tgz",
+          "integrity": "sha512-55Kcx1MhPZX0zTbVosMQEO5R6/rikNXd9b6RQK4KSPcrSIIwoXTtebIczUrXlwaSrbz4x8XUVThGPob1n8I4QA==",
+          "requires": {
+            "ascli": "~1",
+            "bytebuffer": "~5",
+            "glob": "^7.0.5",
+            "yargs": "^3.10.0"
+          }
+        },
+        "rc": {
+          "version": "1.2.8",
+          "bundled": true,
+          "requires": {
+            "deep-extend": "^0.6.0",
+            "ini": "~1.3.0",
+            "minimist": "^1.2.0",
+            "strip-json-comments": "~2.0.1"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "bundled": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "bundled": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "bundled": true
+        },
+        "safer-buffer": {
+          "version": "2.1.2",
+          "bundled": true
+        },
+        "sax": {
+          "version": "1.2.4",
+          "bundled": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "bundled": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true
+        },
+        "tar": {
+          "version": "4.4.10",
+          "bundled": true,
+          "requires": {
+            "chownr": "^1.1.1",
+            "fs-minipass": "^1.2.5",
+            "minipass": "^2.3.5",
+            "minizlib": "^1.2.1",
+            "mkdirp": "^0.5.0",
+            "safe-buffer": "^5.1.2",
+            "yallist": "^3.0.3"
+          }
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "wide-align": {
+          "version": "1.1.3",
+          "bundled": true,
+          "requires": {
+            "string-width": "^1.0.2 || 2"
+          }
+        },
+        "window-size": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
+          "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY="
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "yallist": {
+          "version": "3.0.3",
+          "bundled": true
+        },
+        "yargs": {
+          "version": "3.32.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
+          "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
+          "requires": {
+            "camelcase": "^2.0.1",
+            "cliui": "^3.0.3",
+            "decamelize": "^1.1.1",
+            "os-locale": "^1.4.0",
+            "string-width": "^1.0.1",
+            "window-size": "^0.1.4",
+            "y18n": "^3.2.0"
+          }
+        }
+      }
+    },
+    "grpc-web": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/grpc-web/-/grpc-web-1.0.6.tgz",
+      "integrity": "sha512-iwqchQXNsA8bcJwuYEv/A8ScEaf5nA5+vtptEv2KN646KW94tsq7O+Q7hy5+gADOg6XhmJqPhSlvTMdiHlVfcw=="
     },
     "gzip-size": {
       "version": "3.0.0",
@@ -6016,11 +6781,11 @@
       "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ="
     },
     "handlebars": {
-      "version": "4.0.12",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz",
-      "integrity": "sha512-RhmTekP+FZL+XNhwS1Wf+bTTZpdLougwt5pcgA1tuz6Jcx0fpH/7z0qd71RKnZHBCxIRBHfBOnio4gViPemNzA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.3.tgz",
+      "integrity": "sha512-B0W4A2U1ww3q7VVthTKfh+epHx+q4mCt6iK+zEAzbMBpWQAwxCeKxEGpj/1oQTpzPXDNSOG7hmG14TsISH50yw==",
       "requires": {
-        "async": "^2.5.0",
+        "neo-async": "^2.6.0",
         "optimist": "^0.6.1",
         "source-map": "^0.6.1",
         "uglify-js": "^3.1.4"
@@ -6257,6 +7022,23 @@
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
     },
+    "html-element-map": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.1.0.tgz",
+      "integrity": "sha512-iqiG3dTZmy+uUaTmHarTL+3/A2VW9ox/9uasKEZC+R/wAtUrTcRlXPSaPqsnWPfIu8wqn09jQNwMRqzL54jSYA==",
+      "dev": true,
+      "requires": {
+        "array-filter": "^1.0.0"
+      },
+      "dependencies": {
+        "array-filter": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
+          "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=",
+          "dev": true
+        }
+      }
+    },
     "html-encoding-sniffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
@@ -7939,9 +8721,9 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
-      "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==",
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -8246,14 +9028,6 @@
         }
       }
     },
-    "linkify-it": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.1.0.tgz",
-      "integrity": "sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg==",
-      "requires": {
-        "uc.micro": "^1.0.1"
-      }
-    },
     "load-bmfont": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.0.tgz",
@@ -8307,9 +9081,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.11",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
     "lodash._arraycopy": {
       "version": "3.0.0",
@@ -8376,17 +9150,16 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
-    "lodash.assign": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
-      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
-      "dev": true
-    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
+    "lodash.clone": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
+      "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y="
+    },
     "lodash.clonedeep": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-3.0.2.tgz",
@@ -8397,11 +9170,6 @@
         "lodash._bindcallback": "^3.0.0"
       }
     },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
-    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -8521,6 +9289,11 @@
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
       "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po="
     },
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
     "longest": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@@ -8618,16 +9391,13 @@
         "object-visit": "^1.0.0"
       }
     },
-    "markdown-it": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
-      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+    "markdown-to-jsx": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.10.3.tgz",
+      "integrity": "sha512-PSoUyLnW/xoW6RsxZrquSSz5eGEOTwa15H5eqp3enmrp8esmgDJmhzd6zmQ9tgAA9TxJzx1Hmf3incYU/IamoQ==",
       "requires": {
-        "argparse": "^1.0.7",
-        "entities": "~1.1.1",
-        "linkify-it": "^2.0.0",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
+        "prop-types": "^15.6.2",
+        "unquote": "^1.1.0"
       }
     },
     "marked": {
@@ -8637,22 +9407,23 @@
       "dev": true
     },
     "marked-terminal": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-3.1.1.tgz",
-      "integrity": "sha512-7UBFww1rdx0w9HehLMCVYa8/AxXaiDigDfMsJcj82/wgLQG9cj+oiMAVlJpeWD57VFJY2OYY+bKeEVIjIlxi+w==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-3.3.0.tgz",
+      "integrity": "sha512-+IUQJ5VlZoAFsM5MHNT7g3RHSkA3eETqhRCdXv4niUMAKHQ7lb1yvAcuGPmm4soxhmtX13u4Li6ZToXtvSEH+A==",
       "dev": true,
       "requires": {
+        "ansi-escapes": "^3.1.0",
         "cardinal": "^2.1.1",
         "chalk": "^2.4.1",
         "cli-table": "^0.3.1",
-        "lodash.assign": "^4.2.0",
-        "node-emoji": "^1.4.1"
+        "node-emoji": "^1.4.1",
+        "supports-hyperlinks": "^1.0.1"
       },
       "dependencies": {
         "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
           "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
@@ -8688,11 +9459,6 @@
         "safe-buffer": "^5.1.2"
       }
     },
-    "mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8856,9 +9622,9 @@
       }
     },
     "mixin-deep": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
-      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
       "requires": {
         "for-in": "^1.0.2",
         "is-extendable": "^1.0.1"
@@ -8962,9 +9728,9 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
     },
     "nearley": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.16.0.tgz",
-      "integrity": "sha512-Tr9XD3Vt/EujXbZBv6UAHYoLUSMQAxSsTnm9K3koXzjzNWY195NqALeyrzLZBKzAkL3gl92BcSogqrHjD8QuUg==",
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.19.0.tgz",
+      "integrity": "sha512-2v52FTw7RPqieZr3Gth1luAXZR7Je6q3KaDHY5bjl/paDUdMu35fZ8ICNgiYJRr3tf3NMvIQQR1r27AvEr9CRA==",
       "dev": true,
       "requires": {
         "commander": "^2.19.0",
@@ -8998,9 +9764,9 @@
       }
     },
     "node-emoji": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz",
-      "integrity": "sha512-+ktMAh1Jwas+TnGodfCfjUbJKoANqPaJFN0z0iqh41eqD8dvguNzcitVSBSVK1pidz0AqGbLKcoVuVLRVZ/aVg==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
       "dev": true,
       "requires": {
         "lodash.toarray": "^4.4.0"
@@ -9255,6 +10021,44 @@
         "has": "^1.0.3"
       }
     },
+    "object.fromentries": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.1.tgz",
+      "integrity": "sha512-PUQv8Hbg3j2QX0IQYv3iAGCbGcu4yY4KQ92/dhA4sFSixBmSmp13UpDLs6jGK8rBtbmhNNIK99LD2k293jpiGA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.15.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.15.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.15.0.tgz",
+          "integrity": "sha512-bhkEqWJ2t2lMeaJDuk7okMkJWI/yqgH/EoGwpcvv0XW9RWQsRspI4wt6xuyuvMvvQE3gg/D9HXppgk21w78GyQ==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.0",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.0",
+            "is-callable": "^1.1.4",
+            "is-regex": "^1.0.4",
+            "object-inspect": "^1.6.0",
+            "object-keys": "^1.1.1",
+            "string.prototype.trimleft": "^2.1.0",
+            "string.prototype.trimright": "^2.1.0"
+          }
+        },
+        "object-keys": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+          "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+          "dev": true
+        }
+      }
+    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
@@ -9377,6 +10181,11 @@
         }
       }
     },
+    "optjs": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/optjs/-/optjs-3.2.2.tgz",
+      "integrity": "sha1-aabOicRCpEQDFBrS+bNwvVu29O4="
+    },
     "original": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
@@ -10865,6 +11674,12 @@
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
+    "prettier": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
+      "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
@@ -10938,6 +11753,37 @@
         "object-assign": "^4.1.1"
       }
     },
+    "prop-types-exact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
+      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "reflect.ownkeys": "^0.2.0"
+      }
+    },
+    "protobufjs": {
+      "version": "6.8.8",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.8.8.tgz",
+      "integrity": "sha512-AAmHtD5pXgZfi7GMpllpO3q1Xw1OYldr+dMUlAnffGTAhqkg72WdmSY71uKBF/JuyiKs8psYbtKrhi0ASCD8qw==",
+      "requires": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/long": "^4.0.0",
+        "@types/node": "^10.1.0",
+        "long": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
@@ -11006,9 +11852,9 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "puppeteer": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.11.0.tgz",
-      "integrity": "sha512-iG4iMOHixc2EpzqRV+pv7o3GgmU2dNYEMkvKwSaQO/vMZURakwSOn/EYJ6OIRFYOque1qorzIBvrytPIQB3YzQ==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.20.0.tgz",
+      "integrity": "sha512-bt48RDBy2eIwZPrkgbcwHtb51mj2nKvHOPMaSH2IsWiv7lOG9k9zhaRzpDZafrk05ajMc3cu+lSQYYOfH2DkVQ==",
       "dev": true,
       "requires": {
         "debug": "^4.1.0",
@@ -11031,15 +11877,15 @@
           }
         },
         "mime": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz",
-          "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==",
+          "version": "2.4.4",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
+          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
           "dev": true
         },
         "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
         },
         "progress": {
@@ -11049,9 +11895,9 @@
           "dev": true
         },
         "ws": {
-          "version": "6.1.2",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.2.tgz",
-          "integrity": "sha512-rfUqzvz0WxmSXtJpPMX2EeASXabOrSMk1ruMOV3JBTBjo4ac2lDjGGsbQSyxj8Odhw5fBib8ZKEjDNvgouNKYw==",
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
           "dev": true,
           "requires": {
             "async-limiter": "~1.0.0"
@@ -11648,6 +12494,12 @@
         "balanced-match": "^0.4.2"
       }
     },
+    "reflect.ownkeys": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
+      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=",
+      "dev": true
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -12179,9 +13031,9 @@
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
     "set-value": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
-      "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
       "requires": {
         "extend-shallow": "^2.0.1",
         "is-extendable": "^0.1.1",
@@ -12728,14 +13580,34 @@
       }
     },
     "string.prototype.trim": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
-      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz",
+      "integrity": "sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==",
       "dev": true,
       "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.5.0",
-        "function-bind": "^1.0.2"
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.13.0",
+        "function-bind": "^1.1.1"
+      }
+    },
+    "string.prototype.trimleft": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz",
+      "integrity": "sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "function-bind": "^1.1.1"
+      }
+    },
+    "string.prototype.trimright": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz",
+      "integrity": "sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "function-bind": "^1.1.1"
       }
     },
     "string_decoder": {
@@ -12814,6 +13686,24 @@
         "has-flag": "^3.0.0"
       }
     },
+    "supports-hyperlinks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-1.0.1.tgz",
+      "integrity": "sha512-HHi5kVSefKaJkGYXbDuKbUGRVxqnWGn3J2e39CYcNJEfWciGq2zYtOhXLTlvrOZW1QU7VX67w7fMmWafHX9Pfw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^2.0.0",
+        "supports-color": "^5.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
+          "dev": true
+        }
+      }
+    },
     "svgo": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
@@ -13448,9 +14338,9 @@
       }
     },
     "tslint-config-prettier": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/tslint-config-prettier/-/tslint-config-prettier-1.17.0.tgz",
-      "integrity": "sha512-NKWNkThwqE4Snn4Cm6SZB7lV5RMDDFsBwz6fWUkTxOKGjMx8ycOHnjIbhn7dZd5XmssW3CwqUjlANR6EhP9YQw=="
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz",
+      "integrity": "sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg=="
     },
     "tslint-react": {
       "version": "3.6.0",
@@ -13509,9 +14399,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.1.tgz",
-      "integrity": "sha512-cTmIDFW7O0IHbn1DPYjkiebHxwtCMU+eTy30ZtJNBPF9j2O1ITu5XH2YnBeVRKWHqF+3JQwWJv0Q0aUgX8W7IA==",
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.4.tgz",
+      "integrity": "sha512-unoCll1+l+YK4i4F8f22TaNVPRHcD9PA3yCuZ8g5e0qGqlVlJ/8FSateOLLSagn+Yg5+ZwuPkL8LFUc0Jcvksg==",
       "dev": true
     },
     "typestyle": {
@@ -13528,11 +14418,6 @@
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
       "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
     },
-    "uc.micro": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
-    },
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
@@ -13633,35 +14518,14 @@
       "dev": true
     },
     "union-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
-      "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
       "requires": {
         "arr-union": "^3.1.0",
         "get-value": "^2.0.6",
         "is-extendable": "^0.1.1",
-        "set-value": "^0.4.3"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "set-value": {
-          "version": "0.4.3",
-          "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
-          "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-extendable": "^0.1.1",
-            "is-plain-object": "^2.0.1",
-            "to-object-path": "^0.3.0"
-          }
-        }
+        "set-value": "^2.0.1"
       }
     },
     "uniq": {
@@ -13708,6 +14572,11 @@
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
     },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ="
+    },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -13749,11 +14618,6 @@
       "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
       "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c="
     },
-    "upath": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.0.tgz",
-      "integrity": "sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw=="
-    },
     "update-notifier": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-2.5.0.tgz",
@@ -14004,23 +14868,34 @@
           }
         },
         "chokidar": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
-          "integrity": "sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==",
+          "version": "2.1.8",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
           "requires": {
             "anymatch": "^2.0.0",
-            "async-each": "^1.0.0",
-            "braces": "^2.3.0",
-            "fsevents": "^1.2.2",
+            "async-each": "^1.0.1",
+            "braces": "^2.3.2",
+            "fsevents": "^1.2.7",
             "glob-parent": "^3.1.0",
-            "inherits": "^2.0.1",
+            "inherits": "^2.0.3",
             "is-binary-path": "^1.0.0",
             "is-glob": "^4.0.0",
-            "lodash.debounce": "^4.0.8",
-            "normalize-path": "^2.1.1",
+            "normalize-path": "^3.0.0",
             "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.0.0",
-            "upath": "^1.0.5"
+            "readdirp": "^2.2.1",
+            "upath": "^1.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+              "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+            },
+            "upath": {
+              "version": "1.2.0",
+              "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+              "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
+            }
           }
         },
         "glob-parent": {
@@ -14280,12 +15155,13 @@
       }
     },
     "webpack-bundle-analyzer": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.0.3.tgz",
-      "integrity": "sha512-naLWiRfmtH4UJgtUktRTLw6FdoZJ2RvCR9ePbwM9aRMsS/KjFerkPZG9epEvXRAw5d5oPdrs9+3p+afNjxW8Xw==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.6.0.tgz",
+      "integrity": "sha512-orUfvVYEfBMDXgEKAKVvab5iQ2wXneIEorGNsyuOyVYpjYrI7CUOhhXNDd3huMwQ3vNNWWlGP+hzflMFYNzi2g==",
       "dev": true,
       "requires": {
-        "acorn": "^5.7.3",
+        "acorn": "^6.0.7",
+        "acorn-walk": "^6.1.1",
         "bfj": "^6.1.1",
         "chalk": "^2.4.1",
         "commander": "^2.18.0",
@@ -14293,16 +15169,22 @@
         "express": "^4.16.3",
         "filesize": "^3.6.1",
         "gzip-size": "^5.0.0",
-        "lodash": "^4.17.10",
+        "lodash": "^4.17.15",
         "mkdirp": "^0.5.1",
         "opener": "^1.5.1",
         "ws": "^6.0.0"
       },
       "dependencies": {
+        "acorn": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
+          "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
+          "dev": true
+        },
         "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
           "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
@@ -14317,25 +15199,25 @@
           "dev": true
         },
         "gzip-size": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
-          "integrity": "sha512-5iI7omclyqrnWw4XbXAmGhPsABkSIDQonv2K0h61lybgofWa6iZyvrI3r2zsJH4P8Nb64fFVzlvfhs0g7BBxAA==",
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
+          "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
           "dev": true,
           "requires": {
             "duplexer": "^0.1.1",
-            "pify": "^3.0.0"
+            "pify": "^4.0.1"
           }
         },
         "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
           "dev": true
         },
         "ws": {
-          "version": "6.1.2",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.2.tgz",
-          "integrity": "sha512-rfUqzvz0WxmSXtJpPMX2EeASXabOrSMk1ruMOV3JBTBjo4ac2lDjGGsbQSyxj8Odhw5fBib8ZKEjDNvgouNKYw==",
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
           "dev": true,
           "requires": {
             "async-limiter": "~1.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 1756ea907a19..60c4088c8cd5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,9 +16,9 @@
     "grpc-web": "^1.0.0",
     "http-proxy-middleware": "^0.19.0",
     "immer": "^1.7.4",
-    "js-yaml": "^3.12.0",
-    "lodash": ">=4.17.11",
-    "markdown-it": "^8.4.2",
+    "js-yaml": "^3.13.1",
+    "lodash": "^4.17.15",
+    "markdown-to-jsx": "^6.10.3",
     "portable-fetch": "^3.0.0",
     "re-resizable": "^4.9.0",
     "react": "^16.7.0",
@@ -41,18 +41,23 @@
     "apis:run": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/run.swagger.json -l typescript-fetch -o ./src/apis/run -c ./swagger-config.json",
     "apis:filter": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/filter.swagger.json -l typescript-fetch -o ./src/apis/filter -c ./swagger-config.json",
     "apis:visualization": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/visualization.swagger.json -l typescript-fetch -o ./src/apis/visualization -c ./swagger-config.json",
-    "build": "react-scripts-ts build",
+    "build": "npm run lint && react-scripts-ts build",
     "docker": "COMMIT_HASH=`git rev-parse HEAD`; docker build -q -t ml-pipelines-frontend:${COMMIT_HASH} --build-arg COMMIT_HASH=${COMMIT_HASH} --build-arg DATE=\"`date -u`\" -f Dockerfile ..",
     "eject": "react-scripts-ts eject",
+    "format": "prettier --write 'src/**/*.{ts,tsx}'",
+    "format:check": "prettier --check 'src/**/*.{ts,tsx}' || node ./scripts/check-format-error-info.js",
     "java": "java -version",
+    "lint": "tslint -c ./tslint.prod.json -p .",
     "mock:api": "ts-node-dev -O '{\"module\": \"commonjs\"}' mock-backend/mock-api-server.ts 3001",
     "mock:server": "node server/dist/server.js build",
     "postinstall": "cd ./server && npm i && cd ../mock-backend && npm i && cd ../src/generated/src/apis/metadata && npm i",
-    "start:proxies": "./start-proxies.sh",
+    "start:proxy-standalone": "./start-proxy-standalone.sh",
+    "start:proxy-standalone-and-server": "./start-proxy-standalone-and-server.sh",
     "start": "react-scripts-ts start",
     "test": "react-scripts-ts test --env=jsdom",
     "test:coverage": "npm test -- --env=jsdom --coverage",
     "test:coveralls": "npm run test:coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
+    "test:ci": "npm run format:check && npm run lint && npm run test:coveralls",
     "vr-approve": "backstop approve",
     "vr-test": "ts-node -O '{\"module\": \"commonjs\"}' backstop.ts"
   },
@@ -60,13 +65,14 @@
     "@types/d3": "^5.0.0",
     "@types/d3-dsv": "^1.0.33",
     "@types/dagre": "^0.7.40",
-    "@types/enzyme": "^3.1.15",
-    "@types/enzyme-adapter-react-16": "^1.0.3",
+    "@types/enzyme": "^3.10.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/express": "^4.16.0",
     "@types/http-proxy-middleware": "^0.17.5",
     "@types/jest": "^23.3.2",
     "@types/js-yaml": "^3.11.2",
     "@types/lodash": ">=4.14.117",
+    "@types/markdown-to-jsx": "^6.9.0",
     "@types/node": "^10.10.1",
     "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.7",
@@ -75,16 +81,18 @@
     "@types/react-virtualized": "^9.18.7",
     "backstopjs": "^3.5.16",
     "coveralls": "^3.0.2",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.5.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.3.4",
+    "prettier": "1.18.2",
     "react-router-test-context": "^0.1.0",
     "react-test-renderer": "^16.5.2",
     "swagger-ts-client": "^0.9.6",
     "ts-node": "^7.0.1",
     "ts-node-dev": "^1.0.0-pre.30",
-    "typescript": "^3.3.1",
-    "webpack-bundle-analyzer": "^3.0.2"
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^3.6.4",
+    "webpack-bundle-analyzer": "^3.6.0"
   },
   "homepage": "./",
   "jest": {
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 5fbffbcb1fa9..7c22b06dff7c 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -20,8 +20,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="%PUBLIC_URL%/static/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico">
     <title>Kubeflow Pipelines</title>
   </head>
   <body>
diff --git a/frontend/public/favicon.ico b/frontend/public/static/favicon.ico
similarity index 100%
rename from frontend/public/favicon.ico
rename to frontend/public/static/favicon.ico
diff --git a/frontend/public/manifest.json b/frontend/public/static/manifest.json
similarity index 100%
rename from frontend/public/manifest.json
rename to frontend/public/static/manifest.json
diff --git a/frontend/scripts/check-format-error-info.js b/frontend/scripts/check-format-error-info.js
new file mode 100644
index 000000000000..8b644f7a1cca
--- /dev/null
+++ b/frontend/scripts/check-format-error-info.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+console.error();
+console.error('=================');
+console.error('Please use `npm run format` to format your code.');
+console.error(
+  'Refer to https://github.com/kubeflow/pipelines/tree/master/frontend#code-style for our code style guidance.',
+);
+console.error();
+process.exit(1);
diff --git a/frontend/src/Css.tsx b/frontend/src/Css.tsx
index 6e21e619ab7a..5fae050dc319 100644
--- a/frontend/src/Css.tsx
+++ b/frontend/src/Css.tsx
@@ -122,7 +122,7 @@ export const theme = createMuiTheme({
         },
         color: color.theme,
         marginRight: 10,
-        padding: '0 8px'
+        padding: '0 8px',
       },
     },
     MuiDialogActions: {
@@ -162,7 +162,7 @@ export const theme = createMuiTheme({
     },
     MuiInput: {
       input: { padding: 0 },
-      root: { padding: 0 }
+      root: { padding: 0 },
     },
     MuiInputAdornment: {
       positionEnd: {
@@ -175,13 +175,13 @@ export const theme = createMuiTheme({
         backgroundColor: '#666',
         color: '#f1f1f1',
         fontSize: 12,
-      }
+      },
     },
   },
   palette,
   typography: {
     fontFamily: fonts.main,
-    fontSize: fontsize.base + ' !important' as any,
+    fontSize: (fontsize.base + ' !important') as any,
     useNextVariants: true,
   },
 });
@@ -247,7 +247,7 @@ export const commonCss = stylesheet({
   infoIcon: {
     color: color.lowContrast,
     height: 16,
-    width: 16
+    width: 16,
   },
   link: {
     $nest: {
@@ -280,8 +280,7 @@ export const commonCss = stylesheet({
     whiteSpace: 'pre-wrap',
   },
   scrollContainer: {
-    background:
-      `linear-gradient(white 30%, rgba(255,255,255,0)),
+    background: `linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
        radial-gradient(farthest-corner at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-corner at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%`,
diff --git a/frontend/src/TestUtils.tsx b/frontend/src/TestUtils.tsx
index 4b8c9611e4c7..7aa594f0afcd 100644
--- a/frontend/src/TestUtils.tsx
+++ b/frontend/src/TestUtils.tsx
@@ -50,7 +50,7 @@ export default class TestUtils {
    * Adds a one-time mock implementation to the provided spy that mimics an error
    * network response
    */
-  public static makeErrorResponseOnce(spy: jest.MockInstance<{}>, message: string): void {
+  public static makeErrorResponseOnce(spy: jest.MockInstance<unknown>, message: string): void {
     spy.mockImplementationOnce(() => {
       throw {
         text: () => Promise.resolve(message),
@@ -64,11 +64,16 @@ export default class TestUtils {
    * to be set after component initialization.
    */
   // tslint:disable-next-line:variable-name
-  public static generatePageProps(PageElement: new (_: PageProps) => Page<any, any>,
-    location: Location, matchValue: match,
-    historyPushSpy: jest.SpyInstance | null, updateBannerSpy: jest.SpyInstance | null,
-    updateDialogSpy: jest.SpyInstance | null, updateToolbarSpy: jest.SpyInstance | null,
-    updateSnackbarSpy: jest.SpyInstance | null): PageProps {
+  public static generatePageProps(
+    PageElement: new (_: PageProps) => Page<any, any>,
+    location: Location,
+    matchValue: match,
+    historyPushSpy: jest.SpyInstance<unknown> | null,
+    updateBannerSpy: jest.SpyInstance<unknown> | null,
+    updateDialogSpy: jest.SpyInstance<unknown> | null,
+    updateToolbarSpy: jest.SpyInstance<unknown> | null,
+    updateSnackbarSpy: jest.SpyInstance<unknown> | null,
+  ): PageProps {
     const pageProps = {
       history: { push: historyPushSpy } as any,
       location: location as any,
@@ -88,7 +93,10 @@ export default class TestUtils {
     return pageProps;
   }
 
-  public static getToolbarButton(updateToolbarSpy: jest.SpyInstance, buttonKey: string): ToolbarActionConfig {
+  public static getToolbarButton(
+    updateToolbarSpy: jest.SpyInstance<unknown>,
+    buttonKey: string,
+  ): ToolbarActionConfig {
     const lastCallIdx = updateToolbarSpy.mock.calls.length - 1;
     const lastCall = updateToolbarSpy.mock.calls[lastCallIdx][0];
     return lastCall.actions[buttonKey];
diff --git a/frontend/src/apis/experiment/.swagger-codegen/VERSION b/frontend/src/apis/experiment/.swagger-codegen/VERSION
index a6254504e401..48a6b508dc9f 100644
--- a/frontend/src/apis/experiment/.swagger-codegen/VERSION
+++ b/frontend/src/apis/experiment/.swagger-codegen/VERSION
@@ -1 +1 @@
-2.3.1
\ No newline at end of file
+2.4.7
\ No newline at end of file
diff --git a/frontend/src/apis/experiment/api.ts b/frontend/src/apis/experiment/api.ts
index 7e85bbca7324..a168703c6571 100644
--- a/frontend/src/apis/experiment/api.ts
+++ b/frontend/src/apis/experiment/api.ts
@@ -5,29 +5,28 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
+import * as url from 'url';
+import * as portableFetch from 'portable-fetch';
+import { Configuration } from './configuration';
 
-import * as url from "url";
-import * as portableFetch from "portable-fetch";
-import { Configuration } from "./configuration";
-
-const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+const BASE_PATH = 'http://localhost'.replace(/\/+$/, '');
 
 /**
  *
  * @export
  */
 export const COLLECTION_FORMATS = {
-    csv: ",",
-    ssv: " ",
-    tsv: "\t",
-    pipes: "|",
+  csv: ',',
+  ssv: ' ',
+  tsv: '\t',
+  pipes: '|',
 };
 
 /**
@@ -36,130 +35,134 @@ export const COLLECTION_FORMATS = {
  * @interface FetchAPI
  */
 export interface FetchAPI {
-    (url: string, init?: any): Promise<Response>;
+  (url: string, init?: any): Promise<Response>;
 }
 
 /**
- *  
+ *
  * @export
  * @interface FetchArgs
  */
 export interface FetchArgs {
-    url: string;
-    options: any;
+  url: string;
+  options: any;
 }
 
 /**
- * 
+ *
  * @export
  * @class BaseAPI
  */
 export class BaseAPI {
-    protected configuration: Configuration;
-
-    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected fetch: FetchAPI = portableFetch) {
-        if (configuration) {
-            this.configuration = configuration;
-            this.basePath = configuration.basePath || this.basePath;
-        }
+  protected configuration: Configuration;
+
+  constructor(
+    configuration?: Configuration,
+    protected basePath: string = BASE_PATH,
+    protected fetch: FetchAPI = portableFetch,
+  ) {
+    if (configuration) {
+      this.configuration = configuration;
+      this.basePath = configuration.basePath || this.basePath;
     }
-};
+  }
+}
 
 /**
- * 
+ *
  * @export
  * @class RequiredError
  * @extends {Error}
  */
 export class RequiredError extends Error {
-    name: "RequiredError"
-    constructor(public field: string, msg?: string) {
-        super(msg);
-    }
+  name: 'RequiredError';
+  constructor(public field: string, msg?: string) {
+    super(msg);
+  }
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiExperiment
  */
 export interface ApiExperiment {
-    /**
-     * Output. Unique experiment ID. Generated by API server.
-     * @type {string}
-     * @memberof ApiExperiment
-     */
-    id?: string;
-    /**
-     * Required input field. Unique experiment name provided by user.
-     * @type {string}
-     * @memberof ApiExperiment
-     */
-    name?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiExperiment
-     */
-    description?: string;
-    /**
-     * Output. The time that the experiment created.
-     * @type {Date}
-     * @memberof ApiExperiment
-     */
-    created_at?: Date;
+  /**
+   * Output. Unique experiment ID. Generated by API server.
+   * @type {string}
+   * @memberof ApiExperiment
+   */
+  id?: string;
+  /**
+   * Required input field. Unique experiment name provided by user.
+   * @type {string}
+   * @memberof ApiExperiment
+   */
+  name?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiExperiment
+   */
+  description?: string;
+  /**
+   * Output. The time that the experiment created.
+   * @type {Date}
+   * @memberof ApiExperiment
+   */
+  created_at?: Date;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiListExperimentsResponse
  */
 export interface ApiListExperimentsResponse {
-    /**
-     * A list of experiments returned.
-     * @type {Array&lt;ApiExperiment&gt;}
-     * @memberof ApiListExperimentsResponse
-     */
-    experiments?: Array<ApiExperiment>;
-    /**
-     * The total number of experiments for the given query.
-     * @type {number}
-     * @memberof ApiListExperimentsResponse
-     */
-    total_size?: number;
-    /**
-     * The token to list the next page of experiments.
-     * @type {string}
-     * @memberof ApiListExperimentsResponse
-     */
-    next_page_token?: string;
+  /**
+   * A list of experiments returned.
+   * @type {Array<ApiExperiment>}
+   * @memberof ApiListExperimentsResponse
+   */
+  experiments?: Array<ApiExperiment>;
+  /**
+   * The total number of experiments for the given query.
+   * @type {number}
+   * @memberof ApiListExperimentsResponse
+   */
+  total_size?: number;
+  /**
+   * The token to list the next page of experiments.
+   * @type {string}
+   * @memberof ApiListExperimentsResponse
+   */
+  next_page_token?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiStatus
  */
 export interface ApiStatus {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiStatus
-     */
-    error?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiStatus
-     */
-    code?: number;
-    /**
-     * 
-     * @type {Array&lt;ProtobufAny&gt;}
-     * @memberof ApiStatus
-     */
-    details?: Array<ProtobufAny>;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiStatus
+   */
+  error?: string;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiStatus
+   */
+  code?: number;
+  /**
+   *
+   * @type {Array<ProtobufAny>}
+   * @memberof ApiStatus
+   */
+  details?: Array<ProtobufAny>;
 }
 
 /**
@@ -168,189 +171,233 @@ export interface ApiStatus {
  * @interface ProtobufAny
  */
 export interface ProtobufAny {
-    /**
-     * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    type_url?: string;
-    /**
-     * Must be a valid serialized protocol buffer of the above specified type.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    value?: string;
+  /**
+   * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  type_url?: string;
+  /**
+   * Must be a valid serialized protocol buffer of the above specified type.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  value?: string;
 }
 
-
 /**
  * ExperimentServiceApi - fetch parameter creator
  * @export
  */
-export const ExperimentServiceApiFetchParamCreator = function (configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {ApiExperiment} body The experiment to be created
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createExperiment(body: ApiExperiment, options: any = {}): FetchArgs {
-            // verify required parameter 'body' is not null or undefined
-            if (body === null || body === undefined) {
-                throw new RequiredError('body','Required parameter body was null or undefined when calling createExperiment.');
-            }
-            const localVarPath = `/apis/v1beta1/experiments`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarHeaderParameter['Content-Type'] = 'application/json';
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-            const needsSerialization = (<any>"ApiExperiment" !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
-            localVarRequestOptions.body =  needsSerialization ? JSON.stringify(body || {}) : (body || "");
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the experiment to be deleted.
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteExperiment(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling deleteExperiment.');
-            }
-            const localVarPath = `/apis/v1beta1/experiments/{id}`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'DELETE' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the experiment to be retrieved
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getExperiment(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling getExperiment.');
-            }
-            const localVarPath = `/apis/v1beta1/experiments/{id}`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listExperiment(page_token?: string, page_size?: number, sort_by?: string, filter?: string, options: any = {}): FetchArgs {
-            const localVarPath = `/apis/v1beta1/experiments`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            if (page_token !== undefined) {
-                localVarQueryParameter['page_token'] = page_token;
-            }
-
-            if (page_size !== undefined) {
-                localVarQueryParameter['page_size'] = page_size;
-            }
-
-            if (sort_by !== undefined) {
-                localVarQueryParameter['sort_by'] = sort_by;
-            }
-
-            if (filter !== undefined) {
-                localVarQueryParameter['filter'] = filter;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-    }
+export const ExperimentServiceApiFetchParamCreator = function(configuration?: Configuration) {
+  return {
+    /**
+     *
+     * @param {ApiExperiment} body The experiment to be created
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createExperiment(body: ApiExperiment, options: any = {}): FetchArgs {
+      // verify required parameter 'body' is not null or undefined
+      if (body === null || body === undefined) {
+        throw new RequiredError(
+          'body',
+          'Required parameter body was null or undefined when calling createExperiment.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/experiments`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarHeaderParameter['Content-Type'] = 'application/json';
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+      const needsSerialization =
+        <any>'ApiExperiment' !== 'string' ||
+        localVarRequestOptions.headers['Content-Type'] === 'application/json';
+      localVarRequestOptions.body = needsSerialization ? JSON.stringify(body || {}) : body || '';
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the experiment to be deleted.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    deleteExperiment(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling deleteExperiment.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/experiments/{id}`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'DELETE' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the experiment to be retrieved
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getExperiment(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling getExperiment.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/experiments/{id}`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    listExperiment(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      filter?: string,
+      options: any = {},
+    ): FetchArgs {
+      const localVarPath = `/apis/v1beta1/experiments`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      if (page_token !== undefined) {
+        localVarQueryParameter['page_token'] = page_token;
+      }
+
+      if (page_size !== undefined) {
+        localVarQueryParameter['page_size'] = page_size;
+      }
+
+      if (sort_by !== undefined) {
+        localVarQueryParameter['sort_by'] = sort_by;
+      }
+
+      if (filter !== undefined) {
+        localVarQueryParameter['filter'] = filter;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+  };
 };
 
 /**
@@ -358,186 +405,249 @@ export const ExperimentServiceApiFetchParamCreator = function (configuration?: C
  * @export
  */
 export const ExperimentServiceApiFp = function(configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {ApiExperiment} body The experiment to be created
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createExperiment(body: ApiExperiment, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiExperiment> {
-            const localVarFetchArgs = ExperimentServiceApiFetchParamCreator(configuration).createExperiment(body, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the experiment to be deleted.
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteExperiment(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = ExperimentServiceApiFetchParamCreator(configuration).deleteExperiment(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the experiment to be retrieved
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getExperiment(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiExperiment> {
-            const localVarFetchArgs = ExperimentServiceApiFetchParamCreator(configuration).getExperiment(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listExperiment(page_token?: string, page_size?: number, sort_by?: string, filter?: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiListExperimentsResponse> {
-            const localVarFetchArgs = ExperimentServiceApiFetchParamCreator(configuration).listExperiment(page_token, page_size, sort_by, filter, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-    }
+  return {
+    /**
+     *
+     * @param {ApiExperiment} body The experiment to be created
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createExperiment(
+      body: ApiExperiment,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiExperiment> {
+      const localVarFetchArgs = ExperimentServiceApiFetchParamCreator(
+        configuration,
+      ).createExperiment(body, options);
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the experiment to be deleted.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    deleteExperiment(
+      id: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = ExperimentServiceApiFetchParamCreator(
+        configuration,
+      ).deleteExperiment(id, options);
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the experiment to be retrieved
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getExperiment(
+      id: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiExperiment> {
+      const localVarFetchArgs = ExperimentServiceApiFetchParamCreator(configuration).getExperiment(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    listExperiment(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      filter?: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiListExperimentsResponse> {
+      const localVarFetchArgs = ExperimentServiceApiFetchParamCreator(configuration).listExperiment(
+        page_token,
+        page_size,
+        sort_by,
+        filter,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+  };
 };
 
 /**
  * ExperimentServiceApi - factory interface
  * @export
  */
-export const ExperimentServiceApiFactory = function (configuration?: Configuration, fetch?: FetchAPI, basePath?: string) {
-    return {
-        /**
-         * 
-         * @param {ApiExperiment} body The experiment to be created
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createExperiment(body: ApiExperiment, options?: any) {
-            return ExperimentServiceApiFp(configuration).createExperiment(body, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id The ID of the experiment to be deleted.
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteExperiment(id: string, options?: any) {
-            return ExperimentServiceApiFp(configuration).deleteExperiment(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id The ID of the experiment to be retrieved
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getExperiment(id: string, options?: any) {
-            return ExperimentServiceApiFp(configuration).getExperiment(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listExperiment(page_token?: string, page_size?: number, sort_by?: string, filter?: string, options?: any) {
-            return ExperimentServiceApiFp(configuration).listExperiment(page_token, page_size, sort_by, filter, options)(fetch, basePath);
-        },
-    };
-};
-
-/**
- * ExperimentServiceApi - object-oriented interface
- * @export
- * @class ExperimentServiceApi
- * @extends {BaseAPI}
- */
-export class ExperimentServiceApi extends BaseAPI {
+export const ExperimentServiceApiFactory = function(
+  configuration?: Configuration,
+  fetch?: FetchAPI,
+  basePath?: string,
+) {
+  return {
     /**
-     * 
-     * @param {} body The experiment to be created
+     *
+     * @param {ApiExperiment} body The experiment to be created
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof ExperimentServiceApi
      */
-    public createExperiment(body: ApiExperiment, options?: any) {
-        return ExperimentServiceApiFp(this.configuration).createExperiment(body, options)(this.fetch, this.basePath);
-    }
-
+    createExperiment(body: ApiExperiment, options?: any) {
+      return ExperimentServiceApiFp(configuration).createExperiment(body, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id The ID of the experiment to be deleted.
+     *
+     * @param {string} id The ID of the experiment to be deleted.
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof ExperimentServiceApi
      */
-    public deleteExperiment(id: string, options?: any) {
-        return ExperimentServiceApiFp(this.configuration).deleteExperiment(id, options)(this.fetch, this.basePath);
-    }
-
+    deleteExperiment(id: string, options?: any) {
+      return ExperimentServiceApiFp(configuration).deleteExperiment(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id The ID of the experiment to be retrieved
+     *
+     * @param {string} id The ID of the experiment to be retrieved
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof ExperimentServiceApi
      */
-    public getExperiment(id: string, options?: any) {
-        return ExperimentServiceApiFp(this.configuration).getExperiment(id, options)(this.fetch, this.basePath);
-    }
-
+    getExperiment(id: string, options?: any) {
+      return ExperimentServiceApiFp(configuration).getExperiment(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} [page_token] 
-     * @param {} [page_size] 
-     * @param {} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-     * @param {} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof ExperimentServiceApi
      */
-    public listExperiment(page_token?: string, page_size?: number, sort_by?: string, filter?: string, options?: any) {
-        return ExperimentServiceApiFp(this.configuration).listExperiment(page_token, page_size, sort_by, filter, options)(this.fetch, this.basePath);
-    }
+    listExperiment(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      filter?: string,
+      options?: any,
+    ) {
+      return ExperimentServiceApiFp(configuration).listExperiment(
+        page_token,
+        page_size,
+        sort_by,
+        filter,
+        options,
+      )(fetch, basePath);
+    },
+  };
+};
 
+/**
+ * ExperimentServiceApi - object-oriented interface
+ * @export
+ * @class ExperimentServiceApi
+ * @extends {BaseAPI}
+ */
+export class ExperimentServiceApi extends BaseAPI {
+  /**
+   *
+   * @param {ApiExperiment} body The experiment to be created
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof ExperimentServiceApi
+   */
+  public createExperiment(body: ApiExperiment, options?: any) {
+    return ExperimentServiceApiFp(this.configuration).createExperiment(body, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} id The ID of the experiment to be deleted.
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof ExperimentServiceApi
+   */
+  public deleteExperiment(id: string, options?: any) {
+    return ExperimentServiceApiFp(this.configuration).deleteExperiment(id, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} id The ID of the experiment to be retrieved
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof ExperimentServiceApi
+   */
+  public getExperiment(id: string, options?: any) {
+    return ExperimentServiceApiFp(this.configuration).getExperiment(id, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} [page_token]
+   * @param {number} [page_size]
+   * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+   * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof ExperimentServiceApi
+   */
+  public listExperiment(
+    page_token?: string,
+    page_size?: number,
+    sort_by?: string,
+    filter?: string,
+    options?: any,
+  ) {
+    return ExperimentServiceApiFp(this.configuration).listExperiment(
+      page_token,
+      page_size,
+      sort_by,
+      filter,
+      options,
+    )(this.fetch, this.basePath);
+  }
 }
-
diff --git a/frontend/src/apis/experiment/configuration.ts b/frontend/src/apis/experiment/configuration.ts
index c3a35f9d5756..5a5190e39a09 100644
--- a/frontend/src/apis/experiment/configuration.ts
+++ b/frontend/src/apis/experiment/configuration.ts
@@ -4,63 +4,62 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
 export interface ConfigurationParameters {
-    apiKey?: string | ((name: string) => string);
-    username?: string;
-    password?: string;
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    basePath?: string;
+  apiKey?: string | ((name: string) => string);
+  username?: string;
+  password?: string;
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  basePath?: string;
 }
 
 export class Configuration {
-    /**
-     * parameter for apiKey security
-     * @param name security name
-     * @memberof Configuration
-     */
-    apiKey?: string | ((name: string) => string);
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    username?: string;
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    password?: string;
-    /**
-     * parameter for oauth2 security
-     * @param name security name
-     * @param scopes oauth2 scope
-     * @memberof Configuration
-     */
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    /**
-     * override base path
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    basePath?: string;
+  /**
+   * parameter for apiKey security
+   * @param name security name
+   * @memberof Configuration
+   */
+  apiKey?: string | ((name: string) => string);
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  username?: string;
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  password?: string;
+  /**
+   * parameter for oauth2 security
+   * @param name security name
+   * @param scopes oauth2 scope
+   * @memberof Configuration
+   */
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  /**
+   * override base path
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  basePath?: string;
 
-    constructor(param: ConfigurationParameters = {}) {
-        this.apiKey = param.apiKey;
-        this.username = param.username;
-        this.password = param.password;
-        this.accessToken = param.accessToken;
-        this.basePath = param.basePath;
-    }
+  constructor(param: ConfigurationParameters = {}) {
+    this.apiKey = param.apiKey;
+    this.username = param.username;
+    this.password = param.password;
+    this.accessToken = param.accessToken;
+    this.basePath = param.basePath;
+  }
 }
diff --git a/frontend/src/apis/experiment/custom.d.ts b/frontend/src/apis/experiment/custom.d.ts
index 02f969575e37..4c611cc3216e 100644
--- a/frontend/src/apis/experiment/custom.d.ts
+++ b/frontend/src/apis/experiment/custom.d.ts
@@ -1 +1,2 @@
-declare module 'portable-fetch';
\ No newline at end of file
+declare module 'portable-fetch';
+declare module 'url';
diff --git a/frontend/src/apis/experiment/index.ts b/frontend/src/apis/experiment/index.ts
index e6234477c372..bc15ccfbc1d6 100644
--- a/frontend/src/apis/experiment/index.ts
+++ b/frontend/src/apis/experiment/index.ts
@@ -4,13 +4,12 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
-export * from "./api";
-export * from "./configuration";
+export * from './api';
+export * from './configuration';
diff --git a/frontend/src/apis/filter/.swagger-codegen/VERSION b/frontend/src/apis/filter/.swagger-codegen/VERSION
index a6254504e401..48a6b508dc9f 100644
--- a/frontend/src/apis/filter/.swagger-codegen/VERSION
+++ b/frontend/src/apis/filter/.swagger-codegen/VERSION
@@ -1 +1 @@
-2.3.1
\ No newline at end of file
+2.4.7
\ No newline at end of file
diff --git a/frontend/src/apis/filter/api.ts b/frontend/src/apis/filter/api.ts
index 65f3eee5cea4..c35fc87ad68e 100644
--- a/frontend/src/apis/filter/api.ts
+++ b/frontend/src/apis/filter/api.ts
@@ -5,28 +5,28 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
+import * as url from 'url';
+import * as portableFetch from 'portable-fetch';
+import { Configuration } from './configuration';
 
-import * as portableFetch from "portable-fetch";
-import { Configuration } from "./configuration";
-
-const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+const BASE_PATH = 'http://localhost'.replace(/\/+$/, '');
 
 /**
  *
  * @export
  */
 export const COLLECTION_FORMATS = {
-    csv: ",",
-    ssv: " ",
-    tsv: "\t",
-    pipes: "|",
+  csv: ',',
+  ssv: ' ',
+  tsv: '\t',
+  pipes: '|',
 };
 
 /**
@@ -35,46 +35,50 @@ export const COLLECTION_FORMATS = {
  * @interface FetchAPI
  */
 export interface FetchAPI {
-    (url: string, init?: any): Promise<Response>;
+  (url: string, init?: any): Promise<Response>;
 }
 
 /**
- *  
+ *
  * @export
  * @interface FetchArgs
  */
 export interface FetchArgs {
-    url: string;
-    options: any;
+  url: string;
+  options: any;
 }
 
 /**
- * 
+ *
  * @export
  * @class BaseAPI
  */
 export class BaseAPI {
-    protected configuration: Configuration;
-
-    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected fetch: FetchAPI = portableFetch) {
-        if (configuration) {
-            this.configuration = configuration;
-            this.basePath = configuration.basePath || this.basePath;
-        }
+  protected configuration: Configuration;
+
+  constructor(
+    configuration?: Configuration,
+    protected basePath: string = BASE_PATH,
+    protected fetch: FetchAPI = portableFetch,
+  ) {
+    if (configuration) {
+      this.configuration = configuration;
+      this.basePath = configuration.basePath || this.basePath;
     }
-};
+  }
+}
 
 /**
- * 
+ *
  * @export
  * @class RequiredError
  * @extends {Error}
  */
 export class RequiredError extends Error {
-    name: "RequiredError"
-    constructor(public field: string, msg?: string) {
-        super(msg);
-    }
+  name: 'RequiredError';
+  constructor(public field: string, msg?: string) {
+    super(msg);
+  }
 }
 
 /**
@@ -83,40 +87,40 @@ export class RequiredError extends Error {
  * @interface ApiFilter
  */
 export interface ApiFilter {
-    /**
-     * All predicates are AND-ed when this filter is applied.
-     * @type {Array&lt;ApiPredicate&gt;}
-     * @memberof ApiFilter
-     */
-    predicates?: Array<ApiPredicate>;
+  /**
+   * All predicates are AND-ed when this filter is applied.
+   * @type {Array<ApiPredicate>}
+   * @memberof ApiFilter
+   */
+  predicates?: Array<ApiPredicate>;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiIntValues
  */
 export interface ApiIntValues {
-    /**
-     * 
-     * @type {Array&lt;number&gt;}
-     * @memberof ApiIntValues
-     */
-    values?: Array<number>;
+  /**
+   *
+   * @type {Array<number>}
+   * @memberof ApiIntValues
+   */
+  values?: Array<number>;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiLongValues
  */
 export interface ApiLongValues {
-    /**
-     * 
-     * @type {Array&lt;string&gt;}
-     * @memberof ApiLongValues
-     */
-    values?: Array<string>;
+  /**
+   *
+   * @type {Array<string>}
+   * @memberof ApiLongValues
+   */
+  values?: Array<string>;
 }
 
 /**
@@ -125,74 +129,74 @@ export interface ApiLongValues {
  * @interface ApiPredicate
  */
 export interface ApiPredicate {
-    /**
-     * 
-     * @type {PredicateOp}
-     * @memberof ApiPredicate
-     */
-    op?: PredicateOp;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiPredicate
-     */
-    key?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiPredicate
-     */
-    int_value?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiPredicate
-     */
-    long_value?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiPredicate
-     */
-    string_value?: string;
-    /**
-     * Timestamp values will be converted to Unix time (seconds since the epoch) prior to being used in a filtering operation.
-     * @type {Date}
-     * @memberof ApiPredicate
-     */
-    timestamp_value?: Date;
-    /**
-     * Array values below are only meant to be used by the IN operator.
-     * @type {ApiIntValues}
-     * @memberof ApiPredicate
-     */
-    int_values?: ApiIntValues;
-    /**
-     * 
-     * @type {ApiLongValues}
-     * @memberof ApiPredicate
-     */
-    long_values?: ApiLongValues;
-    /**
-     * 
-     * @type {ApiStringValues}
-     * @memberof ApiPredicate
-     */
-    string_values?: ApiStringValues;
+  /**
+   *
+   * @type {PredicateOp}
+   * @memberof ApiPredicate
+   */
+  op?: PredicateOp;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiPredicate
+   */
+  key?: string;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiPredicate
+   */
+  int_value?: number;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiPredicate
+   */
+  long_value?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiPredicate
+   */
+  string_value?: string;
+  /**
+   * Timestamp values will be converted to Unix time (seconds since the epoch) prior to being used in a filtering operation.
+   * @type {Date}
+   * @memberof ApiPredicate
+   */
+  timestamp_value?: Date;
+  /**
+   * Array values below are only meant to be used by the IN operator.
+   * @type {ApiIntValues}
+   * @memberof ApiPredicate
+   */
+  int_values?: ApiIntValues;
+  /**
+   *
+   * @type {ApiLongValues}
+   * @memberof ApiPredicate
+   */
+  long_values?: ApiLongValues;
+  /**
+   *
+   * @type {ApiStringValues}
+   * @memberof ApiPredicate
+   */
+  string_values?: ApiStringValues;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiStringValues
  */
 export interface ApiStringValues {
-    /**
-     * 
-     * @type {Array&lt;string&gt;}
-     * @memberof ApiStringValues
-     */
-    values?: Array<string>;
+  /**
+   *
+   * @type {Array<string>}
+   * @memberof ApiStringValues
+   */
+  values?: Array<string>;
 }
 
 /**
@@ -201,15 +205,13 @@ export interface ApiStringValues {
  * @enum {string}
  */
 export enum PredicateOp {
-    UNKNOWN = <any> 'UNKNOWN',
-    EQUALS = <any> 'EQUALS',
-    NOTEQUALS = <any> 'NOT_EQUALS',
-    GREATERTHAN = <any> 'GREATER_THAN',
-    GREATERTHANEQUALS = <any> 'GREATER_THAN_EQUALS',
-    LESSTHAN = <any> 'LESS_THAN',
-    LESSTHANEQUALS = <any> 'LESS_THAN_EQUALS',
-    IN = <any> 'IN',
-    ISSUBSTRING = <any> 'IS_SUBSTRING'
+  UNKNOWN = <any>'UNKNOWN',
+  EQUALS = <any>'EQUALS',
+  NOTEQUALS = <any>'NOT_EQUALS',
+  GREATERTHAN = <any>'GREATER_THAN',
+  GREATERTHANEQUALS = <any>'GREATER_THAN_EQUALS',
+  LESSTHAN = <any>'LESS_THAN',
+  LESSTHANEQUALS = <any>'LESS_THAN_EQUALS',
+  IN = <any>'IN',
+  ISSUBSTRING = <any>'IS_SUBSTRING',
 }
-
-
diff --git a/frontend/src/apis/filter/configuration.ts b/frontend/src/apis/filter/configuration.ts
index 841b58ae17a5..78b88fb36946 100644
--- a/frontend/src/apis/filter/configuration.ts
+++ b/frontend/src/apis/filter/configuration.ts
@@ -4,63 +4,62 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
 export interface ConfigurationParameters {
-    apiKey?: string | ((name: string) => string);
-    username?: string;
-    password?: string;
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    basePath?: string;
+  apiKey?: string | ((name: string) => string);
+  username?: string;
+  password?: string;
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  basePath?: string;
 }
 
 export class Configuration {
-    /**
-     * parameter for apiKey security
-     * @param name security name
-     * @memberof Configuration
-     */
-    apiKey?: string | ((name: string) => string);
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    username?: string;
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    password?: string;
-    /**
-     * parameter for oauth2 security
-     * @param name security name
-     * @param scopes oauth2 scope
-     * @memberof Configuration
-     */
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    /**
-     * override base path
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    basePath?: string;
+  /**
+   * parameter for apiKey security
+   * @param name security name
+   * @memberof Configuration
+   */
+  apiKey?: string | ((name: string) => string);
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  username?: string;
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  password?: string;
+  /**
+   * parameter for oauth2 security
+   * @param name security name
+   * @param scopes oauth2 scope
+   * @memberof Configuration
+   */
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  /**
+   * override base path
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  basePath?: string;
 
-    constructor(param: ConfigurationParameters = {}) {
-        this.apiKey = param.apiKey;
-        this.username = param.username;
-        this.password = param.password;
-        this.accessToken = param.accessToken;
-        this.basePath = param.basePath;
-    }
+  constructor(param: ConfigurationParameters = {}) {
+    this.apiKey = param.apiKey;
+    this.username = param.username;
+    this.password = param.password;
+    this.accessToken = param.accessToken;
+    this.basePath = param.basePath;
+  }
 }
diff --git a/frontend/src/apis/filter/custom.d.ts b/frontend/src/apis/filter/custom.d.ts
index 02f969575e37..4c611cc3216e 100644
--- a/frontend/src/apis/filter/custom.d.ts
+++ b/frontend/src/apis/filter/custom.d.ts
@@ -1 +1,2 @@
-declare module 'portable-fetch';
\ No newline at end of file
+declare module 'portable-fetch';
+declare module 'url';
diff --git a/frontend/src/apis/filter/index.ts b/frontend/src/apis/filter/index.ts
index 693743ee8e82..2d6272712dbf 100644
--- a/frontend/src/apis/filter/index.ts
+++ b/frontend/src/apis/filter/index.ts
@@ -4,13 +4,12 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
-export * from "./api";
-export * from "./configuration";
+export * from './api';
+export * from './configuration';
diff --git a/frontend/src/apis/job/.swagger-codegen/VERSION b/frontend/src/apis/job/.swagger-codegen/VERSION
index a6254504e401..48a6b508dc9f 100644
--- a/frontend/src/apis/job/.swagger-codegen/VERSION
+++ b/frontend/src/apis/job/.swagger-codegen/VERSION
@@ -1 +1 @@
-2.3.1
\ No newline at end of file
+2.4.7
\ No newline at end of file
diff --git a/frontend/src/apis/job/api.ts b/frontend/src/apis/job/api.ts
index f278e2b7db59..399181f7df36 100644
--- a/frontend/src/apis/job/api.ts
+++ b/frontend/src/apis/job/api.ts
@@ -5,29 +5,28 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
+import * as url from 'url';
+import * as portableFetch from 'portable-fetch';
+import { Configuration } from './configuration';
 
-import * as url from "url";
-import * as portableFetch from "portable-fetch";
-import { Configuration } from "./configuration";
-
-const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+const BASE_PATH = 'http://localhost'.replace(/\/+$/, '');
 
 /**
  *
  * @export
  */
 export const COLLECTION_FORMATS = {
-    csv: ",",
-    ssv: " ",
-    tsv: "\t",
-    pipes: "|",
+  csv: ',',
+  ssv: ' ',
+  tsv: '\t',
+  pipes: '|',
 };
 
 /**
@@ -36,362 +35,366 @@ export const COLLECTION_FORMATS = {
  * @interface FetchAPI
  */
 export interface FetchAPI {
-    (url: string, init?: any): Promise<Response>;
+  (url: string, init?: any): Promise<Response>;
 }
 
 /**
- *  
+ *
  * @export
  * @interface FetchArgs
  */
 export interface FetchArgs {
-    url: string;
-    options: any;
+  url: string;
+  options: any;
 }
 
 /**
- * 
+ *
  * @export
  * @class BaseAPI
  */
 export class BaseAPI {
-    protected configuration: Configuration;
+  protected configuration: Configuration;
 
-    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected fetch: FetchAPI = portableFetch) {
-        if (configuration) {
-            this.configuration = configuration;
-            this.basePath = configuration.basePath || this.basePath;
-        }
+  constructor(
+    configuration?: Configuration,
+    protected basePath: string = BASE_PATH,
+    protected fetch: FetchAPI = portableFetch,
+  ) {
+    if (configuration) {
+      this.configuration = configuration;
+      this.basePath = configuration.basePath || this.basePath;
     }
-};
+  }
+}
 
 /**
- * 
+ *
  * @export
  * @class RequiredError
  * @extends {Error}
  */
 export class RequiredError extends Error {
-    name: "RequiredError"
-    constructor(public field: string, msg?: string) {
-        super(msg);
-    }
+  name: 'RequiredError';
+  constructor(public field: string, msg?: string) {
+    super(msg);
+  }
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiCronSchedule
  */
 export interface ApiCronSchedule {
-    /**
-     * 
-     * @type {Date}
-     * @memberof ApiCronSchedule
-     */
-    start_time?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof ApiCronSchedule
-     */
-    end_time?: Date;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiCronSchedule
-     */
-    cron?: string;
+  /**
+   *
+   * @type {Date}
+   * @memberof ApiCronSchedule
+   */
+  start_time?: Date;
+  /**
+   *
+   * @type {Date}
+   * @memberof ApiCronSchedule
+   */
+  end_time?: Date;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiCronSchedule
+   */
+  cron?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiJob
  */
 export interface ApiJob {
-    /**
-     * Output. Unique run ID. Generated by API server.
-     * @type {string}
-     * @memberof ApiJob
-     */
-    id?: string;
-    /**
-     * Required input field. Job name provided by user. Not unique.
-     * @type {string}
-     * @memberof ApiJob
-     */
-    name?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiJob
-     */
-    description?: string;
-    /**
-     * Required input field. Describing what the pipeline manifest and parameters to use for the scheduled job.
-     * @type {ApiPipelineSpec}
-     * @memberof ApiJob
-     */
-    pipeline_spec?: ApiPipelineSpec;
-    /**
-     * Optional input field. Specify which resource this run belongs to.
-     * @type {Array&lt;ApiResourceReference&gt;}
-     * @memberof ApiJob
-     */
-    resource_references?: Array<ApiResourceReference>;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiJob
-     */
-    max_concurrency?: string;
-    /**
-     * Required input field. Specify how a run is triggered. Support cron mode or periodic mode.
-     * @type {ApiTrigger}
-     * @memberof ApiJob
-     */
-    trigger?: ApiTrigger;
-    /**
-     * 
-     * @type {JobMode}
-     * @memberof ApiJob
-     */
-    mode?: JobMode;
-    /**
-     * Output. The time this job is created.
-     * @type {Date}
-     * @memberof ApiJob
-     */
-    created_at?: Date;
-    /**
-     * Output. The last time this job is updated.
-     * @type {Date}
-     * @memberof ApiJob
-     */
-    updated_at?: Date;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiJob
-     */
-    status?: string;
-    /**
-     * In case any error happens retrieving a job field, only job ID and the error message is returned. Client has the flexibility of choosing how to handle error. This is especially useful during listing call.
-     * @type {string}
-     * @memberof ApiJob
-     */
-    error?: string;
-    /**
-     * Input. Whether the job is enabled or not.
-     * @type {boolean}
-     * @memberof ApiJob
-     */
-    enabled?: boolean;
+  /**
+   * Output. Unique run ID. Generated by API server.
+   * @type {string}
+   * @memberof ApiJob
+   */
+  id?: string;
+  /**
+   * Required input field. Job name provided by user. Not unique.
+   * @type {string}
+   * @memberof ApiJob
+   */
+  name?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiJob
+   */
+  description?: string;
+  /**
+   * Required input field. Describing what the pipeline manifest and parameters to use for the scheduled job.
+   * @type {ApiPipelineSpec}
+   * @memberof ApiJob
+   */
+  pipeline_spec?: ApiPipelineSpec;
+  /**
+   * Optional input field. Specify which resource this run belongs to.
+   * @type {Array<ApiResourceReference>}
+   * @memberof ApiJob
+   */
+  resource_references?: Array<ApiResourceReference>;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiJob
+   */
+  max_concurrency?: string;
+  /**
+   * Required input field. Specify how a run is triggered. Support cron mode or periodic mode.
+   * @type {ApiTrigger}
+   * @memberof ApiJob
+   */
+  trigger?: ApiTrigger;
+  /**
+   *
+   * @type {JobMode}
+   * @memberof ApiJob
+   */
+  mode?: JobMode;
+  /**
+   * Output. The time this job is created.
+   * @type {Date}
+   * @memberof ApiJob
+   */
+  created_at?: Date;
+  /**
+   * Output. The last time this job is updated.
+   * @type {Date}
+   * @memberof ApiJob
+   */
+  updated_at?: Date;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiJob
+   */
+  status?: string;
+  /**
+   * In case any error happens retrieving a job field, only job ID and the error message is returned. Client has the flexibility of choosing how to handle error. This is especially useful during listing call.
+   * @type {string}
+   * @memberof ApiJob
+   */
+  error?: string;
+  /**
+   * Input. Whether the job is enabled or not.
+   * @type {boolean}
+   * @memberof ApiJob
+   */
+  enabled?: boolean;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiListJobsResponse
  */
 export interface ApiListJobsResponse {
-    /**
-     * A list of jobs returned.
-     * @type {Array&lt;ApiJob&gt;}
-     * @memberof ApiListJobsResponse
-     */
-    jobs?: Array<ApiJob>;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiListJobsResponse
-     */
-    total_size?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiListJobsResponse
-     */
-    next_page_token?: string;
+  /**
+   * A list of jobs returned.
+   * @type {Array<ApiJob>}
+   * @memberof ApiListJobsResponse
+   */
+  jobs?: Array<ApiJob>;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiListJobsResponse
+   */
+  total_size?: number;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiListJobsResponse
+   */
+  next_page_token?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiParameter
  */
 export interface ApiParameter {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiParameter
-     */
-    name?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiParameter
-     */
-    value?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiParameter
+   */
+  name?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiParameter
+   */
+  value?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiPeriodicSchedule
  */
 export interface ApiPeriodicSchedule {
-    /**
-     * 
-     * @type {Date}
-     * @memberof ApiPeriodicSchedule
-     */
-    start_time?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof ApiPeriodicSchedule
-     */
-    end_time?: Date;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiPeriodicSchedule
-     */
-    interval_second?: string;
+  /**
+   *
+   * @type {Date}
+   * @memberof ApiPeriodicSchedule
+   */
+  start_time?: Date;
+  /**
+   *
+   * @type {Date}
+   * @memberof ApiPeriodicSchedule
+   */
+  end_time?: Date;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiPeriodicSchedule
+   */
+  interval_second?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiPipelineSpec
  */
 export interface ApiPipelineSpec {
-    /**
-     * Optional input field. The ID of the pipeline user uploaded before.
-     * @type {string}
-     * @memberof ApiPipelineSpec
-     */
-    pipeline_id?: string;
-    /**
-     * Optional output field. The name of the pipeline. Not empty if the pipeline id is not empty.
-     * @type {string}
-     * @memberof ApiPipelineSpec
-     */
-    pipeline_name?: string;
-    /**
-     * Optional input field. The marshalled raw argo JSON workflow. This will be deprecated when pipeline_manifest is in use.
-     * @type {string}
-     * @memberof ApiPipelineSpec
-     */
-    workflow_manifest?: string;
-    /**
-     * Optional input field. The raw pipeline JSON spec.
-     * @type {string}
-     * @memberof ApiPipelineSpec
-     */
-    pipeline_manifest?: string;
-    /**
-     * The parameter user provide to inject to the pipeline JSON. If a default value of a parameter exist in the JSON, the value user provided here will replace.
-     * @type {Array&lt;ApiParameter&gt;}
-     * @memberof ApiPipelineSpec
-     */
-    parameters?: Array<ApiParameter>;
+  /**
+   * Optional input field. The ID of the pipeline user uploaded before.
+   * @type {string}
+   * @memberof ApiPipelineSpec
+   */
+  pipeline_id?: string;
+  /**
+   * Optional output field. The name of the pipeline. Not empty if the pipeline id is not empty.
+   * @type {string}
+   * @memberof ApiPipelineSpec
+   */
+  pipeline_name?: string;
+  /**
+   * Optional input field. The marshalled raw argo JSON workflow. This will be deprecated when pipeline_manifest is in use.
+   * @type {string}
+   * @memberof ApiPipelineSpec
+   */
+  workflow_manifest?: string;
+  /**
+   * Optional input field. The raw pipeline JSON spec.
+   * @type {string}
+   * @memberof ApiPipelineSpec
+   */
+  pipeline_manifest?: string;
+  /**
+   * The parameter user provide to inject to the pipeline JSON. If a default value of a parameter exist in the JSON, the value user provided here will replace.
+   * @type {Array<ApiParameter>}
+   * @memberof ApiPipelineSpec
+   */
+  parameters?: Array<ApiParameter>;
 }
 
 /**
- * 
+ *
  * @export
  * @enum {string}
  */
 export enum ApiRelationship {
-    UNKNOWNRELATIONSHIP = <any> 'UNKNOWN_RELATIONSHIP',
-    OWNER = <any> 'OWNER',
-    CREATOR = <any> 'CREATOR'
+  UNKNOWNRELATIONSHIP = <any>'UNKNOWN_RELATIONSHIP',
+  OWNER = <any>'OWNER',
+  CREATOR = <any>'CREATOR',
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiResourceKey
  */
 export interface ApiResourceKey {
-    /**
-     * The type of the resource that referred to.
-     * @type {ApiResourceType}
-     * @memberof ApiResourceKey
-     */
-    type?: ApiResourceType;
-    /**
-     * The ID of the resource that referred to.
-     * @type {string}
-     * @memberof ApiResourceKey
-     */
-    id?: string;
+  /**
+   * The type of the resource that referred to.
+   * @type {ApiResourceType}
+   * @memberof ApiResourceKey
+   */
+  type?: ApiResourceType;
+  /**
+   * The ID of the resource that referred to.
+   * @type {string}
+   * @memberof ApiResourceKey
+   */
+  id?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiResourceReference
  */
 export interface ApiResourceReference {
-    /**
-     * 
-     * @type {ApiResourceKey}
-     * @memberof ApiResourceReference
-     */
-    key?: ApiResourceKey;
-    /**
-     * The name of the resource that referred to.
-     * @type {string}
-     * @memberof ApiResourceReference
-     */
-    name?: string;
-    /**
-     * Required field. The relationship from referred resource to the object.
-     * @type {ApiRelationship}
-     * @memberof ApiResourceReference
-     */
-    relationship?: ApiRelationship;
+  /**
+   *
+   * @type {ApiResourceKey}
+   * @memberof ApiResourceReference
+   */
+  key?: ApiResourceKey;
+  /**
+   * The name of the resource that referred to.
+   * @type {string}
+   * @memberof ApiResourceReference
+   */
+  name?: string;
+  /**
+   * Required field. The relationship from referred resource to the object.
+   * @type {ApiRelationship}
+   * @memberof ApiResourceReference
+   */
+  relationship?: ApiRelationship;
 }
 
 /**
- * 
+ *
  * @export
  * @enum {string}
  */
 export enum ApiResourceType {
-    UNKNOWNRESOURCETYPE = <any> 'UNKNOWN_RESOURCE_TYPE',
-    EXPERIMENT = <any> 'EXPERIMENT',
-    JOB = <any> 'JOB'
+  UNKNOWNRESOURCETYPE = <any>'UNKNOWN_RESOURCE_TYPE',
+  EXPERIMENT = <any>'EXPERIMENT',
+  JOB = <any>'JOB',
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiStatus
  */
 export interface ApiStatus {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiStatus
-     */
-    error?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiStatus
-     */
-    code?: number;
-    /**
-     * 
-     * @type {Array&lt;ProtobufAny&gt;}
-     * @memberof ApiStatus
-     */
-    details?: Array<ProtobufAny>;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiStatus
+   */
+  error?: string;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiStatus
+   */
+  code?: number;
+  /**
+   *
+   * @type {Array<ProtobufAny>}
+   * @memberof ApiStatus
+   */
+  details?: Array<ProtobufAny>;
 }
 
 /**
@@ -400,18 +403,18 @@ export interface ApiStatus {
  * @interface ApiTrigger
  */
 export interface ApiTrigger {
-    /**
-     * 
-     * @type {ApiCronSchedule}
-     * @memberof ApiTrigger
-     */
-    cron_schedule?: ApiCronSchedule;
-    /**
-     * 
-     * @type {ApiPeriodicSchedule}
-     * @memberof ApiTrigger
-     */
-    periodic_schedule?: ApiPeriodicSchedule;
+  /**
+   *
+   * @type {ApiCronSchedule}
+   * @memberof ApiTrigger
+   */
+  cron_schedule?: ApiCronSchedule;
+  /**
+   *
+   * @type {ApiPeriodicSchedule}
+   * @memberof ApiTrigger
+   */
+  periodic_schedule?: ApiPeriodicSchedule;
 }
 
 /**
@@ -420,9 +423,9 @@ export interface ApiTrigger {
  * @enum {string}
  */
 export enum JobMode {
-    UNKNOWNMODE = <any> 'UNKNOWN_MODE',
-    ENABLED = <any> 'ENABLED',
-    DISABLED = <any> 'DISABLED'
+  UNKNOWNMODE = <any>'UNKNOWN_MODE',
+  ENABLED = <any>'ENABLED',
+  DISABLED = <any>'DISABLED',
 }
 
 /**
@@ -431,271 +434,339 @@ export enum JobMode {
  * @interface ProtobufAny
  */
 export interface ProtobufAny {
-    /**
-     * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    type_url?: string;
-    /**
-     * Must be a valid serialized protocol buffer of the above specified type.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    value?: string;
+  /**
+   * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  type_url?: string;
+  /**
+   * Must be a valid serialized protocol buffer of the above specified type.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  value?: string;
 }
 
-
 /**
  * JobServiceApi - fetch parameter creator
  * @export
  */
-export const JobServiceApiFetchParamCreator = function (configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {ApiJob} body The job to be created
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createJob(body: ApiJob, options: any = {}): FetchArgs {
-            // verify required parameter 'body' is not null or undefined
-            if (body === null || body === undefined) {
-                throw new RequiredError('body','Required parameter body was null or undefined when calling createJob.');
-            }
-            const localVarPath = `/apis/v1beta1/jobs`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarHeaderParameter['Content-Type'] = 'application/json';
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-            const needsSerialization = (<any>"ApiJob" !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
-            localVarRequestOptions.body =  needsSerialization ? JSON.stringify(body || {}) : (body || "");
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be deleted
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteJob(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling deleteJob.');
-            }
-            const localVarPath = `/apis/v1beta1/jobs/{id}`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'DELETE' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be disabled
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        disableJob(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling disableJob.');
-            }
-            const localVarPath = `/apis/v1beta1/jobs/{id}/disable`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be enabled
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        enableJob(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling enableJob.');
-            }
-            const localVarPath = `/apis/v1beta1/jobs/{id}/enable`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be retrieved
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getJob(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling getJob.');
-            }
-            const localVarPath = `/apis/v1beta1/jobs/{id}`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [resource_reference_key_type] The type of the resource that referred to.
-         * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listJobs(page_token?: string, page_size?: number, sort_by?: string, resource_reference_key_type?: string, resource_reference_key_id?: string, filter?: string, options: any = {}): FetchArgs {
-            const localVarPath = `/apis/v1beta1/jobs`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            if (page_token !== undefined) {
-                localVarQueryParameter['page_token'] = page_token;
-            }
-
-            if (page_size !== undefined) {
-                localVarQueryParameter['page_size'] = page_size;
-            }
-
-            if (sort_by !== undefined) {
-                localVarQueryParameter['sort_by'] = sort_by;
-            }
-
-            if (resource_reference_key_type !== undefined) {
-                localVarQueryParameter['resource_reference_key.type'] = resource_reference_key_type;
-            }
-
-            if (resource_reference_key_id !== undefined) {
-                localVarQueryParameter['resource_reference_key.id'] = resource_reference_key_id;
-            }
-
-            if (filter !== undefined) {
-                localVarQueryParameter['filter'] = filter;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-    }
+export const JobServiceApiFetchParamCreator = function(configuration?: Configuration) {
+  return {
+    /**
+     *
+     * @param {ApiJob} body The job to be created
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createJob(body: ApiJob, options: any = {}): FetchArgs {
+      // verify required parameter 'body' is not null or undefined
+      if (body === null || body === undefined) {
+        throw new RequiredError(
+          'body',
+          'Required parameter body was null or undefined when calling createJob.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/jobs`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarHeaderParameter['Content-Type'] = 'application/json';
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+      const needsSerialization =
+        <any>'ApiJob' !== 'string' ||
+        localVarRequestOptions.headers['Content-Type'] === 'application/json';
+      localVarRequestOptions.body = needsSerialization ? JSON.stringify(body || {}) : body || '';
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the job to be deleted
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    deleteJob(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling deleteJob.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/jobs/{id}`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'DELETE' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the job to be disabled
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    disableJob(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling disableJob.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/jobs/{id}/disable`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the job to be enabled
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    enableJob(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling enableJob.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/jobs/{id}/enable`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the job to be retrieved
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getJob(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling getJob.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/jobs/{id}`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB'} [resource_reference_key_type] The type of the resource that referred to.
+     * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    listJobs(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      resource_reference_key_type?: 'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB',
+      resource_reference_key_id?: string,
+      filter?: string,
+      options: any = {},
+    ): FetchArgs {
+      const localVarPath = `/apis/v1beta1/jobs`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      if (page_token !== undefined) {
+        localVarQueryParameter['page_token'] = page_token;
+      }
+
+      if (page_size !== undefined) {
+        localVarQueryParameter['page_size'] = page_size;
+      }
+
+      if (sort_by !== undefined) {
+        localVarQueryParameter['sort_by'] = sort_by;
+      }
+
+      if (resource_reference_key_type !== undefined) {
+        localVarQueryParameter['resource_reference_key.type'] = resource_reference_key_type;
+      }
+
+      if (resource_reference_key_id !== undefined) {
+        localVarQueryParameter['resource_reference_key.id'] = resource_reference_key_id;
+      }
+
+      if (filter !== undefined) {
+        localVarQueryParameter['filter'] = filter;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+  };
 };
 
 /**
@@ -703,268 +774,333 @@ export const JobServiceApiFetchParamCreator = function (configuration?: Configur
  * @export
  */
 export const JobServiceApiFp = function(configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {ApiJob} body The job to be created
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createJob(body: ApiJob, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiJob> {
-            const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).createJob(body, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be deleted
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteJob(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).deleteJob(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be disabled
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        disableJob(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).disableJob(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be enabled
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        enableJob(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).enableJob(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be retrieved
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getJob(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiJob> {
-            const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).getJob(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [resource_reference_key_type] The type of the resource that referred to.
-         * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listJobs(page_token?: string, page_size?: number, sort_by?: string, resource_reference_key_type?: string, resource_reference_key_id?: string, filter?: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiListJobsResponse> {
-            const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).listJobs(page_token, page_size, sort_by, resource_reference_key_type, resource_reference_key_id, filter, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-    }
+  return {
+    /**
+     *
+     * @param {ApiJob} body The job to be created
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createJob(
+      body: ApiJob,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiJob> {
+      const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).createJob(
+        body,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the job to be deleted
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    deleteJob(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).deleteJob(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the job to be disabled
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    disableJob(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).disableJob(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the job to be enabled
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    enableJob(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).enableJob(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id The ID of the job to be retrieved
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getJob(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiJob> {
+      const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).getJob(id, options);
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB'} [resource_reference_key_type] The type of the resource that referred to.
+     * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    listJobs(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      resource_reference_key_type?: 'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB',
+      resource_reference_key_id?: string,
+      filter?: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiListJobsResponse> {
+      const localVarFetchArgs = JobServiceApiFetchParamCreator(configuration).listJobs(
+        page_token,
+        page_size,
+        sort_by,
+        resource_reference_key_type,
+        resource_reference_key_id,
+        filter,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+  };
 };
 
 /**
  * JobServiceApi - factory interface
  * @export
  */
-export const JobServiceApiFactory = function (configuration?: Configuration, fetch?: FetchAPI, basePath?: string) {
-    return {
-        /**
-         * 
-         * @param {ApiJob} body The job to be created
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createJob(body: ApiJob, options?: any) {
-            return JobServiceApiFp(configuration).createJob(body, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be deleted
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteJob(id: string, options?: any) {
-            return JobServiceApiFp(configuration).deleteJob(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be disabled
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        disableJob(id: string, options?: any) {
-            return JobServiceApiFp(configuration).disableJob(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be enabled
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        enableJob(id: string, options?: any) {
-            return JobServiceApiFp(configuration).enableJob(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id The ID of the job to be retrieved
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getJob(id: string, options?: any) {
-            return JobServiceApiFp(configuration).getJob(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [resource_reference_key_type] The type of the resource that referred to.
-         * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listJobs(page_token?: string, page_size?: number, sort_by?: string, resource_reference_key_type?: string, resource_reference_key_id?: string, filter?: string, options?: any) {
-            return JobServiceApiFp(configuration).listJobs(page_token, page_size, sort_by, resource_reference_key_type, resource_reference_key_id, filter, options)(fetch, basePath);
-        },
-    };
-};
-
-/**
- * JobServiceApi - object-oriented interface
- * @export
- * @class JobServiceApi
- * @extends {BaseAPI}
- */
-export class JobServiceApi extends BaseAPI {
+export const JobServiceApiFactory = function(
+  configuration?: Configuration,
+  fetch?: FetchAPI,
+  basePath?: string,
+) {
+  return {
     /**
-     * 
-     * @param {} body The job to be created
+     *
+     * @param {ApiJob} body The job to be created
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof JobServiceApi
      */
-    public createJob(body: ApiJob, options?: any) {
-        return JobServiceApiFp(this.configuration).createJob(body, options)(this.fetch, this.basePath);
-    }
-
+    createJob(body: ApiJob, options?: any) {
+      return JobServiceApiFp(configuration).createJob(body, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id The ID of the job to be deleted
+     *
+     * @param {string} id The ID of the job to be deleted
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof JobServiceApi
      */
-    public deleteJob(id: string, options?: any) {
-        return JobServiceApiFp(this.configuration).deleteJob(id, options)(this.fetch, this.basePath);
-    }
-
+    deleteJob(id: string, options?: any) {
+      return JobServiceApiFp(configuration).deleteJob(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id The ID of the job to be disabled
+     *
+     * @param {string} id The ID of the job to be disabled
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof JobServiceApi
      */
-    public disableJob(id: string, options?: any) {
-        return JobServiceApiFp(this.configuration).disableJob(id, options)(this.fetch, this.basePath);
-    }
-
+    disableJob(id: string, options?: any) {
+      return JobServiceApiFp(configuration).disableJob(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id The ID of the job to be enabled
+     *
+     * @param {string} id The ID of the job to be enabled
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof JobServiceApi
      */
-    public enableJob(id: string, options?: any) {
-        return JobServiceApiFp(this.configuration).enableJob(id, options)(this.fetch, this.basePath);
-    }
-
+    enableJob(id: string, options?: any) {
+      return JobServiceApiFp(configuration).enableJob(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id The ID of the job to be retrieved
+     *
+     * @param {string} id The ID of the job to be retrieved
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof JobServiceApi
      */
-    public getJob(id: string, options?: any) {
-        return JobServiceApiFp(this.configuration).getJob(id, options)(this.fetch, this.basePath);
-    }
-
+    getJob(id: string, options?: any) {
+      return JobServiceApiFp(configuration).getJob(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} [page_token] 
-     * @param {} [page_size] 
-     * @param {} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-     * @param {} [resource_reference_key_type] The type of the resource that referred to.
-     * @param {} [resource_reference_key_id] The ID of the resource that referred to.
-     * @param {} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB'} [resource_reference_key_type] The type of the resource that referred to.
+     * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof JobServiceApi
      */
-    public listJobs(page_token?: string, page_size?: number, sort_by?: string, resource_reference_key_type?: string, resource_reference_key_id?: string, filter?: string, options?: any) {
-        return JobServiceApiFp(this.configuration).listJobs(page_token, page_size, sort_by, resource_reference_key_type, resource_reference_key_id, filter, options)(this.fetch, this.basePath);
-    }
+    listJobs(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      resource_reference_key_type?: 'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB',
+      resource_reference_key_id?: string,
+      filter?: string,
+      options?: any,
+    ) {
+      return JobServiceApiFp(configuration).listJobs(
+        page_token,
+        page_size,
+        sort_by,
+        resource_reference_key_type,
+        resource_reference_key_id,
+        filter,
+        options,
+      )(fetch, basePath);
+    },
+  };
+};
 
-}
+/**
+ * JobServiceApi - object-oriented interface
+ * @export
+ * @class JobServiceApi
+ * @extends {BaseAPI}
+ */
+export class JobServiceApi extends BaseAPI {
+  /**
+   *
+   * @param {ApiJob} body The job to be created
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof JobServiceApi
+   */
+  public createJob(body: ApiJob, options?: any) {
+    return JobServiceApiFp(this.configuration).createJob(body, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} id The ID of the job to be deleted
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof JobServiceApi
+   */
+  public deleteJob(id: string, options?: any) {
+    return JobServiceApiFp(this.configuration).deleteJob(id, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} id The ID of the job to be disabled
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof JobServiceApi
+   */
+  public disableJob(id: string, options?: any) {
+    return JobServiceApiFp(this.configuration).disableJob(id, options)(this.fetch, this.basePath);
+  }
 
+  /**
+   *
+   * @param {string} id The ID of the job to be enabled
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof JobServiceApi
+   */
+  public enableJob(id: string, options?: any) {
+    return JobServiceApiFp(this.configuration).enableJob(id, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} id The ID of the job to be retrieved
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof JobServiceApi
+   */
+  public getJob(id: string, options?: any) {
+    return JobServiceApiFp(this.configuration).getJob(id, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} [page_token]
+   * @param {number} [page_size]
+   * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+   * @param {'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB'} [resource_reference_key_type] The type of the resource that referred to.
+   * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
+   * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof JobServiceApi
+   */
+  public listJobs(
+    page_token?: string,
+    page_size?: number,
+    sort_by?: string,
+    resource_reference_key_type?: 'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB',
+    resource_reference_key_id?: string,
+    filter?: string,
+    options?: any,
+  ) {
+    return JobServiceApiFp(this.configuration).listJobs(
+      page_token,
+      page_size,
+      sort_by,
+      resource_reference_key_type,
+      resource_reference_key_id,
+      filter,
+      options,
+    )(this.fetch, this.basePath);
+  }
+}
diff --git a/frontend/src/apis/job/configuration.ts b/frontend/src/apis/job/configuration.ts
index 8624aa60db0e..09fcdb80ac7f 100644
--- a/frontend/src/apis/job/configuration.ts
+++ b/frontend/src/apis/job/configuration.ts
@@ -4,63 +4,62 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
 export interface ConfigurationParameters {
-    apiKey?: string | ((name: string) => string);
-    username?: string;
-    password?: string;
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    basePath?: string;
+  apiKey?: string | ((name: string) => string);
+  username?: string;
+  password?: string;
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  basePath?: string;
 }
 
 export class Configuration {
-    /**
-     * parameter for apiKey security
-     * @param name security name
-     * @memberof Configuration
-     */
-    apiKey?: string | ((name: string) => string);
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    username?: string;
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    password?: string;
-    /**
-     * parameter for oauth2 security
-     * @param name security name
-     * @param scopes oauth2 scope
-     * @memberof Configuration
-     */
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    /**
-     * override base path
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    basePath?: string;
+  /**
+   * parameter for apiKey security
+   * @param name security name
+   * @memberof Configuration
+   */
+  apiKey?: string | ((name: string) => string);
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  username?: string;
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  password?: string;
+  /**
+   * parameter for oauth2 security
+   * @param name security name
+   * @param scopes oauth2 scope
+   * @memberof Configuration
+   */
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  /**
+   * override base path
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  basePath?: string;
 
-    constructor(param: ConfigurationParameters = {}) {
-        this.apiKey = param.apiKey;
-        this.username = param.username;
-        this.password = param.password;
-        this.accessToken = param.accessToken;
-        this.basePath = param.basePath;
-    }
+  constructor(param: ConfigurationParameters = {}) {
+    this.apiKey = param.apiKey;
+    this.username = param.username;
+    this.password = param.password;
+    this.accessToken = param.accessToken;
+    this.basePath = param.basePath;
+  }
 }
diff --git a/frontend/src/apis/job/custom.d.ts b/frontend/src/apis/job/custom.d.ts
index 02f969575e37..4c611cc3216e 100644
--- a/frontend/src/apis/job/custom.d.ts
+++ b/frontend/src/apis/job/custom.d.ts
@@ -1 +1,2 @@
-declare module 'portable-fetch';
\ No newline at end of file
+declare module 'portable-fetch';
+declare module 'url';
diff --git a/frontend/src/apis/job/index.ts b/frontend/src/apis/job/index.ts
index 2e9b45facf04..f8a1f06048ab 100644
--- a/frontend/src/apis/job/index.ts
+++ b/frontend/src/apis/job/index.ts
@@ -4,13 +4,12 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
-export * from "./api";
-export * from "./configuration";
+export * from './api';
+export * from './configuration';
diff --git a/frontend/src/apis/metadata/BUILD.bazel b/frontend/src/apis/metadata/BUILD.bazel
new file mode 100644
index 000000000000..b53786f08e34
--- /dev/null
+++ b/frontend/src/apis/metadata/BUILD.bazel
@@ -0,0 +1,28 @@
+load("@io_bazel_rules_go//go:def.bzl", "go_library")
+load("@io_bazel_rules_go//proto:def.bzl", "go_proto_library")
+
+proto_library(
+    name = "ml_metadata_proto",
+    srcs = [
+        "metadata_store.proto",
+        "metadata_store_service.proto",
+    ],
+    visibility = ["//visibility:public"],
+    deps = ["//src/apis/metadata:metadata_proto"],
+)
+
+go_proto_library(
+    name = "ml_metadata_go_proto",
+    compilers = ["@io_bazel_rules_go//proto:go_grpc"],
+    importpath = "github.com/kubeflow/pipelines/frontend/src/apis/metadata",
+    proto = ":ml_metadata_proto",
+    visibility = ["//visibility:public"],
+    deps = ["//src/apis/metadata:go_default_library"],
+)
+
+go_library(
+    name = "go_default_library",
+    embed = [":ml_metadata_go_proto"],
+    importpath = "github.com/kubeflow/pipelines/frontend/src/apis/metadata",
+    visibility = ["//visibility:public"],
+)
diff --git a/frontend/src/apis/pipeline/.swagger-codegen/VERSION b/frontend/src/apis/pipeline/.swagger-codegen/VERSION
index a6254504e401..48a6b508dc9f 100644
--- a/frontend/src/apis/pipeline/.swagger-codegen/VERSION
+++ b/frontend/src/apis/pipeline/.swagger-codegen/VERSION
@@ -1 +1 @@
-2.3.1
\ No newline at end of file
+2.4.7
\ No newline at end of file
diff --git a/frontend/src/apis/pipeline/api.ts b/frontend/src/apis/pipeline/api.ts
index a11484a22723..c82cd9fca383 100644
--- a/frontend/src/apis/pipeline/api.ts
+++ b/frontend/src/apis/pipeline/api.ts
@@ -5,29 +5,28 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
+import * as url from 'url';
+import * as portableFetch from 'portable-fetch';
+import { Configuration } from './configuration';
 
-import * as url from "url";
-import * as portableFetch from "portable-fetch";
-import { Configuration } from "./configuration";
-
-const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+const BASE_PATH = 'http://localhost'.replace(/\/+$/, '');
 
 /**
  *
  * @export
  */
 export const COLLECTION_FORMATS = {
-    csv: ",",
-    ssv: " ",
-    tsv: "\t",
-    pipes: "|",
+  csv: ',',
+  ssv: ' ',
+  tsv: '\t',
+  pipes: '|',
 };
 
 /**
@@ -36,196 +35,200 @@ export const COLLECTION_FORMATS = {
  * @interface FetchAPI
  */
 export interface FetchAPI {
-    (url: string, init?: any): Promise<Response>;
+  (url: string, init?: any): Promise<Response>;
 }
 
 /**
- *  
+ *
  * @export
  * @interface FetchArgs
  */
 export interface FetchArgs {
-    url: string;
-    options: any;
+  url: string;
+  options: any;
 }
 
 /**
- * 
+ *
  * @export
  * @class BaseAPI
  */
 export class BaseAPI {
-    protected configuration: Configuration;
-
-    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected fetch: FetchAPI = portableFetch) {
-        if (configuration) {
-            this.configuration = configuration;
-            this.basePath = configuration.basePath || this.basePath;
-        }
+  protected configuration: Configuration;
+
+  constructor(
+    configuration?: Configuration,
+    protected basePath: string = BASE_PATH,
+    protected fetch: FetchAPI = portableFetch,
+  ) {
+    if (configuration) {
+      this.configuration = configuration;
+      this.basePath = configuration.basePath || this.basePath;
     }
-};
+  }
+}
 
 /**
- * 
+ *
  * @export
  * @class RequiredError
  * @extends {Error}
  */
 export class RequiredError extends Error {
-    name: "RequiredError"
-    constructor(public field: string, msg?: string) {
-        super(msg);
-    }
+  name: 'RequiredError';
+  constructor(public field: string, msg?: string) {
+    super(msg);
+  }
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiGetTemplateResponse
  */
 export interface ApiGetTemplateResponse {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiGetTemplateResponse
-     */
-    template?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiGetTemplateResponse
+   */
+  template?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiListPipelinesResponse
  */
 export interface ApiListPipelinesResponse {
-    /**
-     * 
-     * @type {Array&lt;ApiPipeline&gt;}
-     * @memberof ApiListPipelinesResponse
-     */
-    pipelines?: Array<ApiPipeline>;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiListPipelinesResponse
-     */
-    total_size?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiListPipelinesResponse
-     */
-    next_page_token?: string;
+  /**
+   *
+   * @type {Array<ApiPipeline>}
+   * @memberof ApiListPipelinesResponse
+   */
+  pipelines?: Array<ApiPipeline>;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiListPipelinesResponse
+   */
+  total_size?: number;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiListPipelinesResponse
+   */
+  next_page_token?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiParameter
  */
 export interface ApiParameter {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiParameter
-     */
-    name?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiParameter
-     */
-    value?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiParameter
+   */
+  name?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiParameter
+   */
+  value?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiPipeline
  */
 export interface ApiPipeline {
-    /**
-     * Output. Unique pipeline ID. Generated by API server.
-     * @type {string}
-     * @memberof ApiPipeline
-     */
-    id?: string;
-    /**
-     * Output. The time this pipeline is created.
-     * @type {Date}
-     * @memberof ApiPipeline
-     */
-    created_at?: Date;
-    /**
-     * Optional input field. Pipeline name provided by user. If not specified, file name is used as pipeline name.
-     * @type {string}
-     * @memberof ApiPipeline
-     */
-    name?: string;
-    /**
-     * Optional input field. Describing the purpose of the job.
-     * @type {string}
-     * @memberof ApiPipeline
-     */
-    description?: string;
-    /**
-     * Output. The input parameters for this pipeline.
-     * @type {Array&lt;ApiParameter&gt;}
-     * @memberof ApiPipeline
-     */
-    parameters?: Array<ApiParameter>;
-    /**
-     * The URL to the source of the pipeline. This is required when creating the pipeine through CreatePipeline API.
-     * @type {ApiUrl}
-     * @memberof ApiPipeline
-     */
-    url?: ApiUrl;
-    /**
-     * In case any error happens retrieving a pipeline field, only pipeline ID and the error message is returned. Client has the flexibility of choosing how to handle error. This is especially useful during listing call.
-     * @type {string}
-     * @memberof ApiPipeline
-     */
-    error?: string;
+  /**
+   * Output. Unique pipeline ID. Generated by API server.
+   * @type {string}
+   * @memberof ApiPipeline
+   */
+  id?: string;
+  /**
+   * Output. The time this pipeline is created.
+   * @type {Date}
+   * @memberof ApiPipeline
+   */
+  created_at?: Date;
+  /**
+   * Optional input field. Pipeline name provided by user. If not specified, file name is used as pipeline name.
+   * @type {string}
+   * @memberof ApiPipeline
+   */
+  name?: string;
+  /**
+   * Optional input field. Describing the purpose of the job.
+   * @type {string}
+   * @memberof ApiPipeline
+   */
+  description?: string;
+  /**
+   * Output. The input parameters for this pipeline.
+   * @type {Array<ApiParameter>}
+   * @memberof ApiPipeline
+   */
+  parameters?: Array<ApiParameter>;
+  /**
+   * The URL to the source of the pipeline. This is required when creating the pipeine through CreatePipeline API.
+   * @type {ApiUrl}
+   * @memberof ApiPipeline
+   */
+  url?: ApiUrl;
+  /**
+   * In case any error happens retrieving a pipeline field, only pipeline ID and the error message is returned. Client has the flexibility of choosing how to handle error. This is especially useful during listing call.
+   * @type {string}
+   * @memberof ApiPipeline
+   */
+  error?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiStatus
  */
 export interface ApiStatus {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiStatus
-     */
-    error?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiStatus
-     */
-    code?: number;
-    /**
-     * 
-     * @type {Array&lt;ProtobufAny&gt;}
-     * @memberof ApiStatus
-     */
-    details?: Array<ProtobufAny>;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiStatus
+   */
+  error?: string;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiStatus
+   */
+  code?: number;
+  /**
+   *
+   * @type {Array<ProtobufAny>}
+   * @memberof ApiStatus
+   */
+  details?: Array<ProtobufAny>;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiUrl
  */
 export interface ApiUrl {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiUrl
-     */
-    pipeline_url?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiUrl
+   */
+  pipeline_url?: string;
 }
 
 /**
@@ -234,225 +237,280 @@ export interface ApiUrl {
  * @interface ProtobufAny
  */
 export interface ProtobufAny {
-    /**
-     * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    type_url?: string;
-    /**
-     * Must be a valid serialized protocol buffer of the above specified type.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    value?: string;
+  /**
+   * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  type_url?: string;
+  /**
+   * Must be a valid serialized protocol buffer of the above specified type.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  value?: string;
 }
 
-
 /**
  * PipelineServiceApi - fetch parameter creator
  * @export
  */
-export const PipelineServiceApiFetchParamCreator = function (configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {ApiPipeline} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createPipeline(body: ApiPipeline, options: any = {}): FetchArgs {
-            // verify required parameter 'body' is not null or undefined
-            if (body === null || body === undefined) {
-                throw new RequiredError('body','Required parameter body was null or undefined when calling createPipeline.');
-            }
-            const localVarPath = `/apis/v1beta1/pipelines`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarHeaderParameter['Content-Type'] = 'application/json';
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-            const needsSerialization = (<any>"ApiPipeline" !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
-            localVarRequestOptions.body =  needsSerialization ? JSON.stringify(body || {}) : (body || "");
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deletePipeline(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling deletePipeline.');
-            }
-            const localVarPath = `/apis/v1beta1/pipelines/{id}`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'DELETE' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getPipeline(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling getPipeline.');
-            }
-            const localVarPath = `/apis/v1beta1/pipelines/{id}`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getTemplate(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling getTemplate.');
-            }
-            const localVarPath = `/apis/v1beta1/pipelines/{id}/templates`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listPipelines(page_token?: string, page_size?: number, sort_by?: string, filter?: string, options: any = {}): FetchArgs {
-            const localVarPath = `/apis/v1beta1/pipelines`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            if (page_token !== undefined) {
-                localVarQueryParameter['page_token'] = page_token;
-            }
-
-            if (page_size !== undefined) {
-                localVarQueryParameter['page_size'] = page_size;
-            }
-
-            if (sort_by !== undefined) {
-                localVarQueryParameter['sort_by'] = sort_by;
-            }
-
-            if (filter !== undefined) {
-                localVarQueryParameter['filter'] = filter;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-    }
+export const PipelineServiceApiFetchParamCreator = function(configuration?: Configuration) {
+  return {
+    /**
+     *
+     * @param {ApiPipeline} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createPipeline(body: ApiPipeline, options: any = {}): FetchArgs {
+      // verify required parameter 'body' is not null or undefined
+      if (body === null || body === undefined) {
+        throw new RequiredError(
+          'body',
+          'Required parameter body was null or undefined when calling createPipeline.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/pipelines`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarHeaderParameter['Content-Type'] = 'application/json';
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+      const needsSerialization =
+        <any>'ApiPipeline' !== 'string' ||
+        localVarRequestOptions.headers['Content-Type'] === 'application/json';
+      localVarRequestOptions.body = needsSerialization ? JSON.stringify(body || {}) : body || '';
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    deletePipeline(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling deletePipeline.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/pipelines/{id}`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'DELETE' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getPipeline(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling getPipeline.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/pipelines/{id}`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getTemplate(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling getTemplate.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/pipelines/{id}/templates`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    listPipelines(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      filter?: string,
+      options: any = {},
+    ): FetchArgs {
+      const localVarPath = `/apis/v1beta1/pipelines`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      if (page_token !== undefined) {
+        localVarQueryParameter['page_token'] = page_token;
+      }
+
+      if (page_size !== undefined) {
+        localVarQueryParameter['page_size'] = page_size;
+      }
+
+      if (sort_by !== undefined) {
+        localVarQueryParameter['sort_by'] = sort_by;
+      }
+
+      if (filter !== undefined) {
+        localVarQueryParameter['filter'] = filter;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+  };
 };
 
 /**
@@ -460,224 +518,298 @@ export const PipelineServiceApiFetchParamCreator = function (configuration?: Con
  * @export
  */
 export const PipelineServiceApiFp = function(configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {ApiPipeline} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createPipeline(body: ApiPipeline, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiPipeline> {
-            const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).createPipeline(body, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deletePipeline(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).deletePipeline(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getPipeline(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiPipeline> {
-            const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).getPipeline(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getTemplate(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiGetTemplateResponse> {
-            const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).getTemplate(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listPipelines(page_token?: string, page_size?: number, sort_by?: string, filter?: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiListPipelinesResponse> {
-            const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).listPipelines(page_token, page_size, sort_by, filter, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-    }
+  return {
+    /**
+     *
+     * @param {ApiPipeline} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createPipeline(
+      body: ApiPipeline,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiPipeline> {
+      const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).createPipeline(
+        body,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    deletePipeline(
+      id: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).deletePipeline(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getPipeline(
+      id: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiPipeline> {
+      const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).getPipeline(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getTemplate(
+      id: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiGetTemplateResponse> {
+      const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).getTemplate(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    listPipelines(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      filter?: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiListPipelinesResponse> {
+      const localVarFetchArgs = PipelineServiceApiFetchParamCreator(configuration).listPipelines(
+        page_token,
+        page_size,
+        sort_by,
+        filter,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+  };
 };
 
 /**
  * PipelineServiceApi - factory interface
  * @export
  */
-export const PipelineServiceApiFactory = function (configuration?: Configuration, fetch?: FetchAPI, basePath?: string) {
-    return {
-        /**
-         * 
-         * @param {ApiPipeline} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createPipeline(body: ApiPipeline, options?: any) {
-            return PipelineServiceApiFp(configuration).createPipeline(body, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deletePipeline(id: string, options?: any) {
-            return PipelineServiceApiFp(configuration).deletePipeline(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getPipeline(id: string, options?: any) {
-            return PipelineServiceApiFp(configuration).getPipeline(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getTemplate(id: string, options?: any) {
-            return PipelineServiceApiFp(configuration).getTemplate(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listPipelines(page_token?: string, page_size?: number, sort_by?: string, filter?: string, options?: any) {
-            return PipelineServiceApiFp(configuration).listPipelines(page_token, page_size, sort_by, filter, options)(fetch, basePath);
-        },
-    };
-};
-
-/**
- * PipelineServiceApi - object-oriented interface
- * @export
- * @class PipelineServiceApi
- * @extends {BaseAPI}
- */
-export class PipelineServiceApi extends BaseAPI {
+export const PipelineServiceApiFactory = function(
+  configuration?: Configuration,
+  fetch?: FetchAPI,
+  basePath?: string,
+) {
+  return {
     /**
-     * 
-     * @param {} body 
+     *
+     * @param {ApiPipeline} body
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof PipelineServiceApi
      */
-    public createPipeline(body: ApiPipeline, options?: any) {
-        return PipelineServiceApiFp(this.configuration).createPipeline(body, options)(this.fetch, this.basePath);
-    }
-
+    createPipeline(body: ApiPipeline, options?: any) {
+      return PipelineServiceApiFp(configuration).createPipeline(body, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id 
+     *
+     * @param {string} id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof PipelineServiceApi
      */
-    public deletePipeline(id: string, options?: any) {
-        return PipelineServiceApiFp(this.configuration).deletePipeline(id, options)(this.fetch, this.basePath);
-    }
-
+    deletePipeline(id: string, options?: any) {
+      return PipelineServiceApiFp(configuration).deletePipeline(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id 
+     *
+     * @param {string} id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof PipelineServiceApi
      */
-    public getPipeline(id: string, options?: any) {
-        return PipelineServiceApiFp(this.configuration).getPipeline(id, options)(this.fetch, this.basePath);
-    }
-
+    getPipeline(id: string, options?: any) {
+      return PipelineServiceApiFp(configuration).getPipeline(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id 
+     *
+     * @param {string} id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof PipelineServiceApi
      */
-    public getTemplate(id: string, options?: any) {
-        return PipelineServiceApiFp(this.configuration).getTemplate(id, options)(this.fetch, this.basePath);
-    }
-
+    getTemplate(id: string, options?: any) {
+      return PipelineServiceApiFp(configuration).getTemplate(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} [page_token] 
-     * @param {} [page_size] 
-     * @param {} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-     * @param {} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof PipelineServiceApi
      */
-    public listPipelines(page_token?: string, page_size?: number, sort_by?: string, filter?: string, options?: any) {
-        return PipelineServiceApiFp(this.configuration).listPipelines(page_token, page_size, sort_by, filter, options)(this.fetch, this.basePath);
-    }
+    listPipelines(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      filter?: string,
+      options?: any,
+    ) {
+      return PipelineServiceApiFp(configuration).listPipelines(
+        page_token,
+        page_size,
+        sort_by,
+        filter,
+        options,
+      )(fetch, basePath);
+    },
+  };
+};
 
+/**
+ * PipelineServiceApi - object-oriented interface
+ * @export
+ * @class PipelineServiceApi
+ * @extends {BaseAPI}
+ */
+export class PipelineServiceApi extends BaseAPI {
+  /**
+   *
+   * @param {ApiPipeline} body
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof PipelineServiceApi
+   */
+  public createPipeline(body: ApiPipeline, options?: any) {
+    return PipelineServiceApiFp(this.configuration).createPipeline(body, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof PipelineServiceApi
+   */
+  public deletePipeline(id: string, options?: any) {
+    return PipelineServiceApiFp(this.configuration).deletePipeline(id, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof PipelineServiceApi
+   */
+  public getPipeline(id: string, options?: any) {
+    return PipelineServiceApiFp(this.configuration).getPipeline(id, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof PipelineServiceApi
+   */
+  public getTemplate(id: string, options?: any) {
+    return PipelineServiceApiFp(this.configuration).getTemplate(id, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} [page_token]
+   * @param {number} [page_size]
+   * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+   * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof PipelineServiceApi
+   */
+  public listPipelines(
+    page_token?: string,
+    page_size?: number,
+    sort_by?: string,
+    filter?: string,
+    options?: any,
+  ) {
+    return PipelineServiceApiFp(this.configuration).listPipelines(
+      page_token,
+      page_size,
+      sort_by,
+      filter,
+      options,
+    )(this.fetch, this.basePath);
+  }
 }
-
diff --git a/frontend/src/apis/pipeline/configuration.ts b/frontend/src/apis/pipeline/configuration.ts
index 575aa7f40e93..c0ded69e6793 100644
--- a/frontend/src/apis/pipeline/configuration.ts
+++ b/frontend/src/apis/pipeline/configuration.ts
@@ -4,63 +4,62 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
 export interface ConfigurationParameters {
-    apiKey?: string | ((name: string) => string);
-    username?: string;
-    password?: string;
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    basePath?: string;
+  apiKey?: string | ((name: string) => string);
+  username?: string;
+  password?: string;
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  basePath?: string;
 }
 
 export class Configuration {
-    /**
-     * parameter for apiKey security
-     * @param name security name
-     * @memberof Configuration
-     */
-    apiKey?: string | ((name: string) => string);
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    username?: string;
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    password?: string;
-    /**
-     * parameter for oauth2 security
-     * @param name security name
-     * @param scopes oauth2 scope
-     * @memberof Configuration
-     */
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    /**
-     * override base path
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    basePath?: string;
+  /**
+   * parameter for apiKey security
+   * @param name security name
+   * @memberof Configuration
+   */
+  apiKey?: string | ((name: string) => string);
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  username?: string;
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  password?: string;
+  /**
+   * parameter for oauth2 security
+   * @param name security name
+   * @param scopes oauth2 scope
+   * @memberof Configuration
+   */
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  /**
+   * override base path
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  basePath?: string;
 
-    constructor(param: ConfigurationParameters = {}) {
-        this.apiKey = param.apiKey;
-        this.username = param.username;
-        this.password = param.password;
-        this.accessToken = param.accessToken;
-        this.basePath = param.basePath;
-    }
+  constructor(param: ConfigurationParameters = {}) {
+    this.apiKey = param.apiKey;
+    this.username = param.username;
+    this.password = param.password;
+    this.accessToken = param.accessToken;
+    this.basePath = param.basePath;
+  }
 }
diff --git a/frontend/src/apis/pipeline/custom.d.ts b/frontend/src/apis/pipeline/custom.d.ts
index 02f969575e37..4c611cc3216e 100644
--- a/frontend/src/apis/pipeline/custom.d.ts
+++ b/frontend/src/apis/pipeline/custom.d.ts
@@ -1 +1,2 @@
-declare module 'portable-fetch';
\ No newline at end of file
+declare module 'portable-fetch';
+declare module 'url';
diff --git a/frontend/src/apis/pipeline/index.ts b/frontend/src/apis/pipeline/index.ts
index 8494a2d56fdb..b51112ddb2e3 100644
--- a/frontend/src/apis/pipeline/index.ts
+++ b/frontend/src/apis/pipeline/index.ts
@@ -4,13 +4,12 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
-export * from "./api";
-export * from "./configuration";
+export * from './api';
+export * from './configuration';
diff --git a/frontend/src/apis/run/.swagger-codegen/VERSION b/frontend/src/apis/run/.swagger-codegen/VERSION
index a6254504e401..48a6b508dc9f 100644
--- a/frontend/src/apis/run/.swagger-codegen/VERSION
+++ b/frontend/src/apis/run/.swagger-codegen/VERSION
@@ -1 +1 @@
-2.3.1
\ No newline at end of file
+2.4.7
\ No newline at end of file
diff --git a/frontend/src/apis/run/api.ts b/frontend/src/apis/run/api.ts
index e75829739e90..fbd58d4f297e 100644
--- a/frontend/src/apis/run/api.ts
+++ b/frontend/src/apis/run/api.ts
@@ -5,29 +5,28 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
+import * as url from 'url';
+import * as portableFetch from 'portable-fetch';
+import { Configuration } from './configuration';
 
-import * as url from "url";
-import * as portableFetch from "portable-fetch";
-import { Configuration } from "./configuration";
-
-const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+const BASE_PATH = 'http://localhost'.replace(/\/+$/, '');
 
 /**
  *
  * @export
  */
 export const COLLECTION_FORMATS = {
-    csv: ",",
-    ssv: " ",
-    tsv: "\t",
-    pipes: "|",
+  csv: ',',
+  ssv: ' ',
+  tsv: '\t',
+  pipes: '|',
 };
 
 /**
@@ -36,424 +35,428 @@ export const COLLECTION_FORMATS = {
  * @interface FetchAPI
  */
 export interface FetchAPI {
-    (url: string, init?: any): Promise<Response>;
+  (url: string, init?: any): Promise<Response>;
 }
 
 /**
- *  
+ *
  * @export
  * @interface FetchArgs
  */
 export interface FetchArgs {
-    url: string;
-    options: any;
+  url: string;
+  options: any;
 }
 
 /**
- * 
+ *
  * @export
  * @class BaseAPI
  */
 export class BaseAPI {
-    protected configuration: Configuration;
-
-    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected fetch: FetchAPI = portableFetch) {
-        if (configuration) {
-            this.configuration = configuration;
-            this.basePath = configuration.basePath || this.basePath;
-        }
+  protected configuration: Configuration;
+
+  constructor(
+    configuration?: Configuration,
+    protected basePath: string = BASE_PATH,
+    protected fetch: FetchAPI = portableFetch,
+  ) {
+    if (configuration) {
+      this.configuration = configuration;
+      this.basePath = configuration.basePath || this.basePath;
     }
-};
+  }
+}
 
 /**
- * 
+ *
  * @export
  * @class RequiredError
  * @extends {Error}
  */
 export class RequiredError extends Error {
-    name: "RequiredError"
-    constructor(public field: string, msg?: string) {
-        super(msg);
-    }
+  name: 'RequiredError';
+  constructor(public field: string, msg?: string) {
+    super(msg);
+  }
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiListRunsResponse
  */
 export interface ApiListRunsResponse {
-    /**
-     * 
-     * @type {Array&lt;ApiRun&gt;}
-     * @memberof ApiListRunsResponse
-     */
-    runs?: Array<ApiRun>;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiListRunsResponse
-     */
-    total_size?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiListRunsResponse
-     */
-    next_page_token?: string;
+  /**
+   *
+   * @type {Array<ApiRun>}
+   * @memberof ApiListRunsResponse
+   */
+  runs?: Array<ApiRun>;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiListRunsResponse
+   */
+  total_size?: number;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiListRunsResponse
+   */
+  next_page_token?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiParameter
  */
 export interface ApiParameter {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiParameter
-     */
-    name?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiParameter
-     */
-    value?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiParameter
+   */
+  name?: string;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiParameter
+   */
+  value?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiPipelineRuntime
  */
 export interface ApiPipelineRuntime {
-    /**
-     * Output. The runtime JSON manifest of the pipeline, including the status of pipeline steps and fields need for UI visualization etc.
-     * @type {string}
-     * @memberof ApiPipelineRuntime
-     */
-    pipeline_manifest?: string;
-    /**
-     * Output. The runtime JSON manifest of the argo workflow. This is deprecated after pipeline_runtime_manifest is in use.
-     * @type {string}
-     * @memberof ApiPipelineRuntime
-     */
-    workflow_manifest?: string;
+  /**
+   * Output. The runtime JSON manifest of the pipeline, including the status of pipeline steps and fields need for UI visualization etc.
+   * @type {string}
+   * @memberof ApiPipelineRuntime
+   */
+  pipeline_manifest?: string;
+  /**
+   * Output. The runtime JSON manifest of the argo workflow. This is deprecated after pipeline_runtime_manifest is in use.
+   * @type {string}
+   * @memberof ApiPipelineRuntime
+   */
+  workflow_manifest?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiPipelineSpec
  */
 export interface ApiPipelineSpec {
-    /**
-     * Optional input field. The ID of the pipeline user uploaded before.
-     * @type {string}
-     * @memberof ApiPipelineSpec
-     */
-    pipeline_id?: string;
-    /**
-     * Optional output field. The name of the pipeline. Not empty if the pipeline id is not empty.
-     * @type {string}
-     * @memberof ApiPipelineSpec
-     */
-    pipeline_name?: string;
-    /**
-     * Optional input field. The marshalled raw argo JSON workflow. This will be deprecated when pipeline_manifest is in use.
-     * @type {string}
-     * @memberof ApiPipelineSpec
-     */
-    workflow_manifest?: string;
-    /**
-     * Optional input field. The raw pipeline JSON spec.
-     * @type {string}
-     * @memberof ApiPipelineSpec
-     */
-    pipeline_manifest?: string;
-    /**
-     * The parameter user provide to inject to the pipeline JSON. If a default value of a parameter exist in the JSON, the value user provided here will replace.
-     * @type {Array&lt;ApiParameter&gt;}
-     * @memberof ApiPipelineSpec
-     */
-    parameters?: Array<ApiParameter>;
+  /**
+   * Optional input field. The ID of the pipeline user uploaded before.
+   * @type {string}
+   * @memberof ApiPipelineSpec
+   */
+  pipeline_id?: string;
+  /**
+   * Optional output field. The name of the pipeline. Not empty if the pipeline id is not empty.
+   * @type {string}
+   * @memberof ApiPipelineSpec
+   */
+  pipeline_name?: string;
+  /**
+   * Optional input field. The marshalled raw argo JSON workflow. This will be deprecated when pipeline_manifest is in use.
+   * @type {string}
+   * @memberof ApiPipelineSpec
+   */
+  workflow_manifest?: string;
+  /**
+   * Optional input field. The raw pipeline JSON spec.
+   * @type {string}
+   * @memberof ApiPipelineSpec
+   */
+  pipeline_manifest?: string;
+  /**
+   * The parameter user provide to inject to the pipeline JSON. If a default value of a parameter exist in the JSON, the value user provided here will replace.
+   * @type {Array<ApiParameter>}
+   * @memberof ApiPipelineSpec
+   */
+  parameters?: Array<ApiParameter>;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiReadArtifactResponse
  */
 export interface ApiReadArtifactResponse {
-    /**
-     * The bytes of the artifact content.
-     * @type {string}
-     * @memberof ApiReadArtifactResponse
-     */
-    data?: string;
+  /**
+   * The bytes of the artifact content.
+   * @type {string}
+   * @memberof ApiReadArtifactResponse
+   */
+  data?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @enum {string}
  */
 export enum ApiRelationship {
-    UNKNOWNRELATIONSHIP = <any> 'UNKNOWN_RELATIONSHIP',
-    OWNER = <any> 'OWNER',
-    CREATOR = <any> 'CREATOR'
+  UNKNOWNRELATIONSHIP = <any>'UNKNOWN_RELATIONSHIP',
+  OWNER = <any>'OWNER',
+  CREATOR = <any>'CREATOR',
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiReportRunMetricsRequest
  */
 export interface ApiReportRunMetricsRequest {
-    /**
-     * Required. The parent run ID of the metric.
-     * @type {string}
-     * @memberof ApiReportRunMetricsRequest
-     */
-    run_id?: string;
-    /**
-     * List of metrics to report.
-     * @type {Array&lt;ApiRunMetric&gt;}
-     * @memberof ApiReportRunMetricsRequest
-     */
-    metrics?: Array<ApiRunMetric>;
+  /**
+   * Required. The parent run ID of the metric.
+   * @type {string}
+   * @memberof ApiReportRunMetricsRequest
+   */
+  run_id?: string;
+  /**
+   * List of metrics to report.
+   * @type {Array<ApiRunMetric>}
+   * @memberof ApiReportRunMetricsRequest
+   */
+  metrics?: Array<ApiRunMetric>;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiReportRunMetricsResponse
  */
 export interface ApiReportRunMetricsResponse {
-    /**
-     * 
-     * @type {Array&lt;ReportRunMetricsResponseReportRunMetricResult&gt;}
-     * @memberof ApiReportRunMetricsResponse
-     */
-    results?: Array<ReportRunMetricsResponseReportRunMetricResult>;
+  /**
+   *
+   * @type {Array<ReportRunMetricsResponseReportRunMetricResult>}
+   * @memberof ApiReportRunMetricsResponse
+   */
+  results?: Array<ReportRunMetricsResponseReportRunMetricResult>;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiResourceKey
  */
 export interface ApiResourceKey {
-    /**
-     * The type of the resource that referred to.
-     * @type {ApiResourceType}
-     * @memberof ApiResourceKey
-     */
-    type?: ApiResourceType;
-    /**
-     * The ID of the resource that referred to.
-     * @type {string}
-     * @memberof ApiResourceKey
-     */
-    id?: string;
+  /**
+   * The type of the resource that referred to.
+   * @type {ApiResourceType}
+   * @memberof ApiResourceKey
+   */
+  type?: ApiResourceType;
+  /**
+   * The ID of the resource that referred to.
+   * @type {string}
+   * @memberof ApiResourceKey
+   */
+  id?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiResourceReference
  */
 export interface ApiResourceReference {
-    /**
-     * 
-     * @type {ApiResourceKey}
-     * @memberof ApiResourceReference
-     */
-    key?: ApiResourceKey;
-    /**
-     * The name of the resource that referred to.
-     * @type {string}
-     * @memberof ApiResourceReference
-     */
-    name?: string;
-    /**
-     * Required field. The relationship from referred resource to the object.
-     * @type {ApiRelationship}
-     * @memberof ApiResourceReference
-     */
-    relationship?: ApiRelationship;
+  /**
+   *
+   * @type {ApiResourceKey}
+   * @memberof ApiResourceReference
+   */
+  key?: ApiResourceKey;
+  /**
+   * The name of the resource that referred to.
+   * @type {string}
+   * @memberof ApiResourceReference
+   */
+  name?: string;
+  /**
+   * Required field. The relationship from referred resource to the object.
+   * @type {ApiRelationship}
+   * @memberof ApiResourceReference
+   */
+  relationship?: ApiRelationship;
 }
 
 /**
- * 
+ *
  * @export
  * @enum {string}
  */
 export enum ApiResourceType {
-    UNKNOWNRESOURCETYPE = <any> 'UNKNOWN_RESOURCE_TYPE',
-    EXPERIMENT = <any> 'EXPERIMENT',
-    JOB = <any> 'JOB'
+  UNKNOWNRESOURCETYPE = <any>'UNKNOWN_RESOURCE_TYPE',
+  EXPERIMENT = <any>'EXPERIMENT',
+  JOB = <any>'JOB',
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiRun
  */
 export interface ApiRun {
-    /**
-     * Output. Unique run ID. Generated by API server.
-     * @type {string}
-     * @memberof ApiRun
-     */
-    id?: string;
-    /**
-     * Required input field. Name provided by user, or auto generated if run is created by scheduled job. Not unique.
-     * @type {string}
-     * @memberof ApiRun
-     */
-    name?: string;
-    /**
-     * 
-     * @type {RunStorageState}
-     * @memberof ApiRun
-     */
-    storage_state?: RunStorageState;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiRun
-     */
-    description?: string;
-    /**
-     * Required input field. Describing what the pipeline manifest and parameters to use for the run.
-     * @type {ApiPipelineSpec}
-     * @memberof ApiRun
-     */
-    pipeline_spec?: ApiPipelineSpec;
-    /**
-     * Optional input field. Specify which resource this run belongs to.
-     * @type {Array&lt;ApiResourceReference&gt;}
-     * @memberof ApiRun
-     */
-    resource_references?: Array<ApiResourceReference>;
-    /**
-     * Output. The time that the run created.
-     * @type {Date}
-     * @memberof ApiRun
-     */
-    created_at?: Date;
-    /**
-     * Output. When this run is scheduled to run. This could be different from created_at. For example, if a run is from a backfilling job that was supposed to run 2 month ago, the scheduled_at is 2 month ago, v.s. created_at is the current time.
-     * @type {Date}
-     * @memberof ApiRun
-     */
-    scheduled_at?: Date;
-    /**
-     * Output. The time this run is finished.
-     * @type {Date}
-     * @memberof ApiRun
-     */
-    finished_at?: Date;
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiRun
-     */
-    status?: string;
-    /**
-     * In case any error happens retrieving a run field, only run ID and the error message is returned. Client has the flexibility of choosing how to handle error. This is especially useful during listing call.
-     * @type {string}
-     * @memberof ApiRun
-     */
-    error?: string;
-    /**
-     * Output. The metrics of the run. The metrics are reported by ReportMetrics API.
-     * @type {Array&lt;ApiRunMetric&gt;}
-     * @memberof ApiRun
-     */
-    metrics?: Array<ApiRunMetric>;
+  /**
+   * Output. Unique run ID. Generated by API server.
+   * @type {string}
+   * @memberof ApiRun
+   */
+  id?: string;
+  /**
+   * Required input field. Name provided by user, or auto generated if run is created by scheduled job. Not unique.
+   * @type {string}
+   * @memberof ApiRun
+   */
+  name?: string;
+  /**
+   *
+   * @type {RunStorageState}
+   * @memberof ApiRun
+   */
+  storage_state?: RunStorageState;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiRun
+   */
+  description?: string;
+  /**
+   * Required input field. Describing what the pipeline manifest and parameters to use for the run.
+   * @type {ApiPipelineSpec}
+   * @memberof ApiRun
+   */
+  pipeline_spec?: ApiPipelineSpec;
+  /**
+   * Optional input field. Specify which resource this run belongs to.
+   * @type {Array<ApiResourceReference>}
+   * @memberof ApiRun
+   */
+  resource_references?: Array<ApiResourceReference>;
+  /**
+   * Output. The time that the run created.
+   * @type {Date}
+   * @memberof ApiRun
+   */
+  created_at?: Date;
+  /**
+   * Output. When this run is scheduled to run. This could be different from created_at. For example, if a run is from a backfilling job that was supposed to run 2 month ago, the scheduled_at is 2 month ago, v.s. created_at is the current time.
+   * @type {Date}
+   * @memberof ApiRun
+   */
+  scheduled_at?: Date;
+  /**
+   * Output. The time this run is finished.
+   * @type {Date}
+   * @memberof ApiRun
+   */
+  finished_at?: Date;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiRun
+   */
+  status?: string;
+  /**
+   * In case any error happens retrieving a run field, only run ID and the error message is returned. Client has the flexibility of choosing how to handle error. This is especially useful during listing call.
+   * @type {string}
+   * @memberof ApiRun
+   */
+  error?: string;
+  /**
+   * Output. The metrics of the run. The metrics are reported by ReportMetrics API.
+   * @type {Array<ApiRunMetric>}
+   * @memberof ApiRun
+   */
+  metrics?: Array<ApiRunMetric>;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiRunDetail
  */
 export interface ApiRunDetail {
-    /**
-     * 
-     * @type {ApiRun}
-     * @memberof ApiRunDetail
-     */
-    run?: ApiRun;
-    /**
-     * 
-     * @type {ApiPipelineRuntime}
-     * @memberof ApiRunDetail
-     */
-    pipeline_runtime?: ApiPipelineRuntime;
+  /**
+   *
+   * @type {ApiRun}
+   * @memberof ApiRunDetail
+   */
+  run?: ApiRun;
+  /**
+   *
+   * @type {ApiPipelineRuntime}
+   * @memberof ApiRunDetail
+   */
+  pipeline_runtime?: ApiPipelineRuntime;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiRunMetric
  */
 export interface ApiRunMetric {
-    /**
-     * Required. The user defined name of the metric. It must between 1 and 63 characters long and must conform to the following regular expression: `[a-z]([-a-z0-9]*[a-z0-9])?`.
-     * @type {string}
-     * @memberof ApiRunMetric
-     */
-    name?: string;
-    /**
-     * Required. The runtime node ID which reports the metric. The node ID can be found in the RunDetail.workflow.Status. Metric with same (node_id, name) are considerd as duplicate. Only the first reporting will be recorded. Max length is 128.
-     * @type {string}
-     * @memberof ApiRunMetric
-     */
-    node_id?: string;
-    /**
-     * The number value of the metric.
-     * @type {number}
-     * @memberof ApiRunMetric
-     */
-    number_value?: number;
-    /**
-     * The display format of metric.
-     * @type {RunMetricFormat}
-     * @memberof ApiRunMetric
-     */
-    format?: RunMetricFormat;
+  /**
+   * Required. The user defined name of the metric. It must between 1 and 63 characters long and must conform to the following regular expression: `[a-z]([-a-z0-9]*[a-z0-9])?`.
+   * @type {string}
+   * @memberof ApiRunMetric
+   */
+  name?: string;
+  /**
+   * Required. The runtime node ID which reports the metric. The node ID can be found in the RunDetail.workflow.Status. Metric with same (node_id, name) are considerd as duplicate. Only the first reporting will be recorded. Max length is 128.
+   * @type {string}
+   * @memberof ApiRunMetric
+   */
+  node_id?: string;
+  /**
+   * The number value of the metric.
+   * @type {number}
+   * @memberof ApiRunMetric
+   */
+  number_value?: number;
+  /**
+   * The display format of metric.
+   * @type {RunMetricFormat}
+   * @memberof ApiRunMetric
+   */
+  format?: RunMetricFormat;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiStatus
  */
 export interface ApiStatus {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiStatus
-     */
-    error?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiStatus
-     */
-    code?: number;
-    /**
-     * 
-     * @type {Array&lt;ProtobufAny&gt;}
-     * @memberof ApiStatus
-     */
-    details?: Array<ProtobufAny>;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiStatus
+   */
+  error?: string;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiStatus
+   */
+  code?: number;
+  /**
+   *
+   * @type {Array<ProtobufAny>}
+   * @memberof ApiStatus
+   */
+  details?: Array<ProtobufAny>;
 }
 
 /**
@@ -462,50 +465,50 @@ export interface ApiStatus {
  * @interface ProtobufAny
  */
 export interface ProtobufAny {
-    /**
-     * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    type_url?: string;
-    /**
-     * Must be a valid serialized protocol buffer of the above specified type.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    value?: string;
+  /**
+   * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  type_url?: string;
+  /**
+   * Must be a valid serialized protocol buffer of the above specified type.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  value?: string;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ReportRunMetricsResponseReportRunMetricResult
  */
 export interface ReportRunMetricsResponseReportRunMetricResult {
-    /**
-     * Output. The name of the metric.
-     * @type {string}
-     * @memberof ReportRunMetricsResponseReportRunMetricResult
-     */
-    metric_name?: string;
-    /**
-     * Output. The ID of the node which reports the metric.
-     * @type {string}
-     * @memberof ReportRunMetricsResponseReportRunMetricResult
-     */
-    metric_node_id?: string;
-    /**
-     * Output. The status of the metric reporting.
-     * @type {ReportRunMetricsResponseReportRunMetricResultStatus}
-     * @memberof ReportRunMetricsResponseReportRunMetricResult
-     */
-    status?: ReportRunMetricsResponseReportRunMetricResultStatus;
-    /**
-     * Output. The detailed message of the error of the reporting.
-     * @type {string}
-     * @memberof ReportRunMetricsResponseReportRunMetricResult
-     */
-    message?: string;
+  /**
+   * Output. The name of the metric.
+   * @type {string}
+   * @memberof ReportRunMetricsResponseReportRunMetricResult
+   */
+  metric_name?: string;
+  /**
+   * Output. The ID of the node which reports the metric.
+   * @type {string}
+   * @memberof ReportRunMetricsResponseReportRunMetricResult
+   */
+  metric_node_id?: string;
+  /**
+   * Output. The status of the metric reporting.
+   * @type {ReportRunMetricsResponseReportRunMetricResultStatus}
+   * @memberof ReportRunMetricsResponseReportRunMetricResult
+   */
+  status?: ReportRunMetricsResponseReportRunMetricResultStatus;
+  /**
+   * Output. The detailed message of the error of the reporting.
+   * @type {string}
+   * @memberof ReportRunMetricsResponseReportRunMetricResult
+   */
+  message?: string;
 }
 
 /**
@@ -514,11 +517,11 @@ export interface ReportRunMetricsResponseReportRunMetricResult {
  * @enum {string}
  */
 export enum ReportRunMetricsResponseReportRunMetricResultStatus {
-    UNSPECIFIED = <any> 'UNSPECIFIED',
-    OK = <any> 'OK',
-    INVALIDARGUMENT = <any> 'INVALID_ARGUMENT',
-    DUPLICATEREPORTING = <any> 'DUPLICATE_REPORTING',
-    INTERNALERROR = <any> 'INTERNAL_ERROR'
+  UNSPECIFIED = <any>'UNSPECIFIED',
+  OK = <any>'OK',
+  INVALIDARGUMENT = <any>'INVALID_ARGUMENT',
+  DUPLICATEREPORTING = <any>'DUPLICATE_REPORTING',
+  INTERNALERROR = <any>'INTERNAL_ERROR',
 }
 
 /**
@@ -527,438 +530,568 @@ export enum ReportRunMetricsResponseReportRunMetricResultStatus {
  * @enum {string}
  */
 export enum RunMetricFormat {
-    UNSPECIFIED = <any> 'UNSPECIFIED',
-    RAW = <any> 'RAW',
-    PERCENTAGE = <any> 'PERCENTAGE'
+  UNSPECIFIED = <any>'UNSPECIFIED',
+  RAW = <any>'RAW',
+  PERCENTAGE = <any>'PERCENTAGE',
 }
 
 /**
- * 
+ *
  * @export
  * @enum {string}
  */
 export enum RunStorageState {
-    AVAILABLE = <any> 'STORAGESTATE_AVAILABLE',
-    ARCHIVED = <any> 'STORAGESTATE_ARCHIVED'
+  AVAILABLE = <any>'STORAGESTATE_AVAILABLE',
+  ARCHIVED = <any>'STORAGESTATE_ARCHIVED',
 }
 
-
 /**
  * RunServiceApi - fetch parameter creator
  * @export
  */
-export const RunServiceApiFetchParamCreator = function (configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        archiveRun(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling archiveRun.');
-            }
-            const localVarPath = `/apis/v1beta1/runs/{id}:archive`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {ApiRun} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createRun(body: ApiRun, options: any = {}): FetchArgs {
-            // verify required parameter 'body' is not null or undefined
-            if (body === null || body === undefined) {
-                throw new RequiredError('body','Required parameter body was null or undefined when calling createRun.');
-            }
-            const localVarPath = `/apis/v1beta1/runs`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarHeaderParameter['Content-Type'] = 'application/json';
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-            const needsSerialization = (<any>"ApiRun" !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
-            localVarRequestOptions.body =  needsSerialization ? JSON.stringify(body || {}) : (body || "");
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteRun(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling deleteRun.');
-            }
-            const localVarPath = `/apis/v1beta1/runs/{id}`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'DELETE' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getRun(run_id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'run_id' is not null or undefined
-            if (run_id === null || run_id === undefined) {
-                throw new RequiredError('run_id','Required parameter run_id was null or undefined when calling getRun.');
-            }
-            const localVarPath = `/apis/v1beta1/runs/{run_id}`
-                .replace(`{${"run_id"}}`, encodeURIComponent(String(run_id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [resource_reference_key_type] The type of the resource that referred to.
-         * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listRuns(page_token?: string, page_size?: number, sort_by?: string, resource_reference_key_type?: string, resource_reference_key_id?: string, filter?: string, options: any = {}): FetchArgs {
-            const localVarPath = `/apis/v1beta1/runs`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            if (page_token !== undefined) {
-                localVarQueryParameter['page_token'] = page_token;
-            }
-
-            if (page_size !== undefined) {
-                localVarQueryParameter['page_size'] = page_size;
-            }
-
-            if (sort_by !== undefined) {
-                localVarQueryParameter['sort_by'] = sort_by;
-            }
-
-            if (resource_reference_key_type !== undefined) {
-                localVarQueryParameter['resource_reference_key.type'] = resource_reference_key_type;
-            }
-
-            if (resource_reference_key_id !== undefined) {
-                localVarQueryParameter['resource_reference_key.id'] = resource_reference_key_id;
-            }
-
-            if (filter !== undefined) {
-                localVarQueryParameter['filter'] = filter;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} run_id The ID of the run.
-         * @param {string} node_id The ID of the running node.
-         * @param {string} artifact_name The name of the artifact.
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        readArtifact(run_id: string, node_id: string, artifact_name: string, options: any = {}): FetchArgs {
-            // verify required parameter 'run_id' is not null or undefined
-            if (run_id === null || run_id === undefined) {
-                throw new RequiredError('run_id','Required parameter run_id was null or undefined when calling readArtifact.');
-            }
-            // verify required parameter 'node_id' is not null or undefined
-            if (node_id === null || node_id === undefined) {
-                throw new RequiredError('node_id','Required parameter node_id was null or undefined when calling readArtifact.');
-            }
-            // verify required parameter 'artifact_name' is not null or undefined
-            if (artifact_name === null || artifact_name === undefined) {
-                throw new RequiredError('artifact_name','Required parameter artifact_name was null or undefined when calling readArtifact.');
-            }
-            const localVarPath = `/apis/v1beta1/runs/{run_id}/nodes/{node_id}/artifacts/{artifact_name}:read`
-                .replace(`{${"run_id"}}`, encodeURIComponent(String(run_id)))
-                .replace(`{${"node_id"}}`, encodeURIComponent(String(node_id)))
-                .replace(`{${"artifact_name"}}`, encodeURIComponent(String(artifact_name)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @summary ReportRunMetrics reports metrics of a run. Each metric is reported in its own transaction, so this API accepts partial failures. Metric can be uniquely identified by (run_id, node_id, name). Duplicate reporting will be ignored by the API. First reporting wins.
-         * @param {string} run_id Required. The parent run ID of the metric.
-         * @param {ApiReportRunMetricsRequest} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        reportRunMetrics(run_id: string, body: ApiReportRunMetricsRequest, options: any = {}): FetchArgs {
-            // verify required parameter 'run_id' is not null or undefined
-            if (run_id === null || run_id === undefined) {
-                throw new RequiredError('run_id','Required parameter run_id was null or undefined when calling reportRunMetrics.');
-            }
-            // verify required parameter 'body' is not null or undefined
-            if (body === null || body === undefined) {
-                throw new RequiredError('body','Required parameter body was null or undefined when calling reportRunMetrics.');
-            }
-            const localVarPath = `/apis/v1beta1/runs/{run_id}:reportMetrics`
-                .replace(`{${"run_id"}}`, encodeURIComponent(String(run_id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarHeaderParameter['Content-Type'] = 'application/json';
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-            const needsSerialization = (<any>"ApiReportRunMetricsRequest" !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
-            localVarRequestOptions.body =  needsSerialization ? JSON.stringify(body || {}) : (body || "");
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        retryRun(run_id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'run_id' is not null or undefined
-            if (run_id === null || run_id === undefined) {
-                throw new RequiredError('run_id','Required parameter run_id was null or undefined when calling retryRun.');
-            }
-            const localVarPath = `/apis/v1beta1/runs/{run_id}/retry`
-                .replace(`{${"run_id"}}`, encodeURIComponent(String(run_id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        terminateRun(run_id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'run_id' is not null or undefined
-            if (run_id === null || run_id === undefined) {
-                throw new RequiredError('run_id','Required parameter run_id was null or undefined when calling terminateRun.');
-            }
-            const localVarPath = `/apis/v1beta1/runs/{run_id}/terminate`
-                .replace(`{${"run_id"}}`, encodeURIComponent(String(run_id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        unarchiveRun(id: string, options: any = {}): FetchArgs {
-            // verify required parameter 'id' is not null or undefined
-            if (id === null || id === undefined) {
-                throw new RequiredError('id','Required parameter id was null or undefined when calling unarchiveRun.');
-            }
-            const localVarPath = `/apis/v1beta1/runs/{id}:unarchive`
-                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
-
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
-
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-    }
+export const RunServiceApiFetchParamCreator = function(configuration?: Configuration) {
+  return {
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    archiveRun(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling archiveRun.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs/{id}:archive`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {ApiRun} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createRun(body: ApiRun, options: any = {}): FetchArgs {
+      // verify required parameter 'body' is not null or undefined
+      if (body === null || body === undefined) {
+        throw new RequiredError(
+          'body',
+          'Required parameter body was null or undefined when calling createRun.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarHeaderParameter['Content-Type'] = 'application/json';
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+      const needsSerialization =
+        <any>'ApiRun' !== 'string' ||
+        localVarRequestOptions.headers['Content-Type'] === 'application/json';
+      localVarRequestOptions.body = needsSerialization ? JSON.stringify(body || {}) : body || '';
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    deleteRun(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling deleteRun.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs/{id}`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'DELETE' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} run_id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getRun(run_id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'run_id' is not null or undefined
+      if (run_id === null || run_id === undefined) {
+        throw new RequiredError(
+          'run_id',
+          'Required parameter run_id was null or undefined when calling getRun.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs/{run_id}`.replace(
+        `{${'run_id'}}`,
+        encodeURIComponent(String(run_id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB'} [resource_reference_key_type] The type of the resource that referred to.
+     * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    listRuns(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      resource_reference_key_type?: 'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB',
+      resource_reference_key_id?: string,
+      filter?: string,
+      options: any = {},
+    ): FetchArgs {
+      const localVarPath = `/apis/v1beta1/runs`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      if (page_token !== undefined) {
+        localVarQueryParameter['page_token'] = page_token;
+      }
+
+      if (page_size !== undefined) {
+        localVarQueryParameter['page_size'] = page_size;
+      }
+
+      if (sort_by !== undefined) {
+        localVarQueryParameter['sort_by'] = sort_by;
+      }
+
+      if (resource_reference_key_type !== undefined) {
+        localVarQueryParameter['resource_reference_key.type'] = resource_reference_key_type;
+      }
+
+      if (resource_reference_key_id !== undefined) {
+        localVarQueryParameter['resource_reference_key.id'] = resource_reference_key_id;
+      }
+
+      if (filter !== undefined) {
+        localVarQueryParameter['filter'] = filter;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} run_id The ID of the run.
+     * @param {string} node_id The ID of the running node.
+     * @param {string} artifact_name The name of the artifact.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    readArtifact(
+      run_id: string,
+      node_id: string,
+      artifact_name: string,
+      options: any = {},
+    ): FetchArgs {
+      // verify required parameter 'run_id' is not null or undefined
+      if (run_id === null || run_id === undefined) {
+        throw new RequiredError(
+          'run_id',
+          'Required parameter run_id was null or undefined when calling readArtifact.',
+        );
+      }
+      // verify required parameter 'node_id' is not null or undefined
+      if (node_id === null || node_id === undefined) {
+        throw new RequiredError(
+          'node_id',
+          'Required parameter node_id was null or undefined when calling readArtifact.',
+        );
+      }
+      // verify required parameter 'artifact_name' is not null or undefined
+      if (artifact_name === null || artifact_name === undefined) {
+        throw new RequiredError(
+          'artifact_name',
+          'Required parameter artifact_name was null or undefined when calling readArtifact.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs/{run_id}/nodes/{node_id}/artifacts/{artifact_name}:read`
+        .replace(`{${'run_id'}}`, encodeURIComponent(String(run_id)))
+        .replace(`{${'node_id'}}`, encodeURIComponent(String(node_id)))
+        .replace(`{${'artifact_name'}}`, encodeURIComponent(String(artifact_name)));
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'GET' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @summary ReportRunMetrics reports metrics of a run. Each metric is reported in its own transaction, so this API accepts partial failures. Metric can be uniquely identified by (run_id, node_id, name). Duplicate reporting will be ignored by the API. First reporting wins.
+     * @param {string} run_id Required. The parent run ID of the metric.
+     * @param {ApiReportRunMetricsRequest} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    reportRunMetrics(
+      run_id: string,
+      body: ApiReportRunMetricsRequest,
+      options: any = {},
+    ): FetchArgs {
+      // verify required parameter 'run_id' is not null or undefined
+      if (run_id === null || run_id === undefined) {
+        throw new RequiredError(
+          'run_id',
+          'Required parameter run_id was null or undefined when calling reportRunMetrics.',
+        );
+      }
+      // verify required parameter 'body' is not null or undefined
+      if (body === null || body === undefined) {
+        throw new RequiredError(
+          'body',
+          'Required parameter body was null or undefined when calling reportRunMetrics.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs/{run_id}:reportMetrics`.replace(
+        `{${'run_id'}}`,
+        encodeURIComponent(String(run_id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarHeaderParameter['Content-Type'] = 'application/json';
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+      const needsSerialization =
+        <any>'ApiReportRunMetricsRequest' !== 'string' ||
+        localVarRequestOptions.headers['Content-Type'] === 'application/json';
+      localVarRequestOptions.body = needsSerialization ? JSON.stringify(body || {}) : body || '';
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} run_id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    retryRun(run_id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'run_id' is not null or undefined
+      if (run_id === null || run_id === undefined) {
+        throw new RequiredError(
+          'run_id',
+          'Required parameter run_id was null or undefined when calling retryRun.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs/{run_id}/retry`.replace(
+        `{${'run_id'}}`,
+        encodeURIComponent(String(run_id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} run_id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    terminateRun(run_id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'run_id' is not null or undefined
+      if (run_id === null || run_id === undefined) {
+        throw new RequiredError(
+          'run_id',
+          'Required parameter run_id was null or undefined when calling terminateRun.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs/{run_id}/terminate`.replace(
+        `{${'run_id'}}`,
+        encodeURIComponent(String(run_id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    unarchiveRun(id: string, options: any = {}): FetchArgs {
+      // verify required parameter 'id' is not null or undefined
+      if (id === null || id === undefined) {
+        throw new RequiredError(
+          'id',
+          'Required parameter id was null or undefined when calling unarchiveRun.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/runs/{id}:unarchive`.replace(
+        `{${'id'}}`,
+        encodeURIComponent(String(id)),
+      );
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
+
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+  };
 };
 
 /**
@@ -966,432 +1099,547 @@ export const RunServiceApiFetchParamCreator = function (configuration?: Configur
  * @export
  */
 export const RunServiceApiFp = function(configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        archiveRun(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).archiveRun(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {ApiRun} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createRun(body: ApiRun, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiRunDetail> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).createRun(body, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteRun(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).deleteRun(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getRun(run_id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiRunDetail> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).getRun(run_id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [resource_reference_key_type] The type of the resource that referred to.
-         * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listRuns(page_token?: string, page_size?: number, sort_by?: string, resource_reference_key_type?: string, resource_reference_key_id?: string, filter?: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiListRunsResponse> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).listRuns(page_token, page_size, sort_by, resource_reference_key_type, resource_reference_key_id, filter, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} run_id The ID of the run.
-         * @param {string} node_id The ID of the running node.
-         * @param {string} artifact_name The name of the artifact.
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        readArtifact(run_id: string, node_id: string, artifact_name: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiReadArtifactResponse> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).readArtifact(run_id, node_id, artifact_name, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @summary ReportRunMetrics reports metrics of a run. Each metric is reported in its own transaction, so this API accepts partial failures. Metric can be uniquely identified by (run_id, node_id, name). Duplicate reporting will be ignored by the API. First reporting wins.
-         * @param {string} run_id Required. The parent run ID of the metric.
-         * @param {ApiReportRunMetricsRequest} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        reportRunMetrics(run_id: string, body: ApiReportRunMetricsRequest, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiReportRunMetricsResponse> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).reportRunMetrics(run_id, body, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        retryRun(run_id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).retryRun(run_id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        terminateRun(run_id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).terminateRun(run_id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        unarchiveRun(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
-            const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).unarchiveRun(id, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-    }
+  return {
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    archiveRun(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).archiveRun(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {ApiRun} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createRun(
+      body: ApiRun,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiRunDetail> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).createRun(
+        body,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    deleteRun(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).deleteRun(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} run_id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    getRun(
+      run_id: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiRunDetail> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).getRun(
+        run_id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB'} [resource_reference_key_type] The type of the resource that referred to.
+     * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    listRuns(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      resource_reference_key_type?: 'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB',
+      resource_reference_key_id?: string,
+      filter?: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiListRunsResponse> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).listRuns(
+        page_token,
+        page_size,
+        sort_by,
+        resource_reference_key_type,
+        resource_reference_key_id,
+        filter,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} run_id The ID of the run.
+     * @param {string} node_id The ID of the running node.
+     * @param {string} artifact_name The name of the artifact.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    readArtifact(
+      run_id: string,
+      node_id: string,
+      artifact_name: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiReadArtifactResponse> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).readArtifact(
+        run_id,
+        node_id,
+        artifact_name,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @summary ReportRunMetrics reports metrics of a run. Each metric is reported in its own transaction, so this API accepts partial failures. Metric can be uniquely identified by (run_id, node_id, name). Duplicate reporting will be ignored by the API. First reporting wins.
+     * @param {string} run_id Required. The parent run ID of the metric.
+     * @param {ApiReportRunMetricsRequest} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    reportRunMetrics(
+      run_id: string,
+      body: ApiReportRunMetricsRequest,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiReportRunMetricsResponse> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).reportRunMetrics(
+        run_id,
+        body,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} run_id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    retryRun(run_id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).retryRun(
+        run_id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} run_id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    terminateRun(
+      run_id: string,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).terminateRun(
+        run_id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+    /**
+     *
+     * @param {string} id
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    unarchiveRun(id: string, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<any> {
+      const localVarFetchArgs = RunServiceApiFetchParamCreator(configuration).unarchiveRun(
+        id,
+        options,
+      );
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+  };
 };
 
 /**
  * RunServiceApi - factory interface
  * @export
  */
-export const RunServiceApiFactory = function (configuration?: Configuration, fetch?: FetchAPI, basePath?: string) {
-    return {
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        archiveRun(id: string, options?: any) {
-            return RunServiceApiFp(configuration).archiveRun(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {ApiRun} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createRun(body: ApiRun, options?: any) {
-            return RunServiceApiFp(configuration).createRun(body, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        deleteRun(id: string, options?: any) {
-            return RunServiceApiFp(configuration).deleteRun(id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        getRun(run_id: string, options?: any) {
-            return RunServiceApiFp(configuration).getRun(run_id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} [page_token] 
-         * @param {number} [page_size] 
-         * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-         * @param {string} [resource_reference_key_type] The type of the resource that referred to.
-         * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
-         * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        listRuns(page_token?: string, page_size?: number, sort_by?: string, resource_reference_key_type?: string, resource_reference_key_id?: string, filter?: string, options?: any) {
-            return RunServiceApiFp(configuration).listRuns(page_token, page_size, sort_by, resource_reference_key_type, resource_reference_key_id, filter, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} run_id The ID of the run.
-         * @param {string} node_id The ID of the running node.
-         * @param {string} artifact_name The name of the artifact.
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        readArtifact(run_id: string, node_id: string, artifact_name: string, options?: any) {
-            return RunServiceApiFp(configuration).readArtifact(run_id, node_id, artifact_name, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @summary ReportRunMetrics reports metrics of a run. Each metric is reported in its own transaction, so this API accepts partial failures. Metric can be uniquely identified by (run_id, node_id, name). Duplicate reporting will be ignored by the API. First reporting wins.
-         * @param {string} run_id Required. The parent run ID of the metric.
-         * @param {ApiReportRunMetricsRequest} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        reportRunMetrics(run_id: string, body: ApiReportRunMetricsRequest, options?: any) {
-            return RunServiceApiFp(configuration).reportRunMetrics(run_id, body, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        retryRun(run_id: string, options?: any) {
-            return RunServiceApiFp(configuration).retryRun(run_id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} run_id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        terminateRun(run_id: string, options?: any) {
-            return RunServiceApiFp(configuration).terminateRun(run_id, options)(fetch, basePath);
-        },
-        /**
-         * 
-         * @param {string} id 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        unarchiveRun(id: string, options?: any) {
-            return RunServiceApiFp(configuration).unarchiveRun(id, options)(fetch, basePath);
-        },
-    };
-};
-
-/**
- * RunServiceApi - object-oriented interface
- * @export
- * @class RunServiceApi
- * @extends {BaseAPI}
- */
-export class RunServiceApi extends BaseAPI {
+export const RunServiceApiFactory = function(
+  configuration?: Configuration,
+  fetch?: FetchAPI,
+  basePath?: string,
+) {
+  return {
     /**
-     * 
-     * @param {} id 
+     *
+     * @param {string} id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public archiveRun(id: string, options?: any) {
-        return RunServiceApiFp(this.configuration).archiveRun(id, options)(this.fetch, this.basePath);
-    }
-
+    archiveRun(id: string, options?: any) {
+      return RunServiceApiFp(configuration).archiveRun(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} body 
+     *
+     * @param {ApiRun} body
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public createRun(body: ApiRun, options?: any) {
-        return RunServiceApiFp(this.configuration).createRun(body, options)(this.fetch, this.basePath);
-    }
-
+    createRun(body: ApiRun, options?: any) {
+      return RunServiceApiFp(configuration).createRun(body, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id 
+     *
+     * @param {string} id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public deleteRun(id: string, options?: any) {
-        return RunServiceApiFp(this.configuration).deleteRun(id, options)(this.fetch, this.basePath);
-    }
-
+    deleteRun(id: string, options?: any) {
+      return RunServiceApiFp(configuration).deleteRun(id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} run_id 
+     *
+     * @param {string} run_id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public getRun(run_id: string, options?: any) {
-        return RunServiceApiFp(this.configuration).getRun(run_id, options)(this.fetch, this.basePath);
-    }
-
+    getRun(run_id: string, options?: any) {
+      return RunServiceApiFp(configuration).getRun(run_id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} [page_token] 
-     * @param {} [page_size] 
-     * @param {} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
-     * @param {} [resource_reference_key_type] The type of the resource that referred to.
-     * @param {} [resource_reference_key_id] The ID of the resource that referred to.
-     * @param {} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+     *
+     * @param {string} [page_token]
+     * @param {number} [page_size]
+     * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+     * @param {'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB'} [resource_reference_key_type] The type of the resource that referred to.
+     * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
+     * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public listRuns(page_token?: string, page_size?: number, sort_by?: string, resource_reference_key_type?: string, resource_reference_key_id?: string, filter?: string, options?: any) {
-        return RunServiceApiFp(this.configuration).listRuns(page_token, page_size, sort_by, resource_reference_key_type, resource_reference_key_id, filter, options)(this.fetch, this.basePath);
-    }
-
+    listRuns(
+      page_token?: string,
+      page_size?: number,
+      sort_by?: string,
+      resource_reference_key_type?: 'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB',
+      resource_reference_key_id?: string,
+      filter?: string,
+      options?: any,
+    ) {
+      return RunServiceApiFp(configuration).listRuns(
+        page_token,
+        page_size,
+        sort_by,
+        resource_reference_key_type,
+        resource_reference_key_id,
+        filter,
+        options,
+      )(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} run_id The ID of the run.
-     * @param {} node_id The ID of the running node.
-     * @param {} artifact_name The name of the artifact.
+     *
+     * @param {string} run_id The ID of the run.
+     * @param {string} node_id The ID of the running node.
+     * @param {string} artifact_name The name of the artifact.
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public readArtifact(run_id: string, node_id: string, artifact_name: string, options?: any) {
-        return RunServiceApiFp(this.configuration).readArtifact(run_id, node_id, artifact_name, options)(this.fetch, this.basePath);
-    }
-
+    readArtifact(run_id: string, node_id: string, artifact_name: string, options?: any) {
+      return RunServiceApiFp(configuration).readArtifact(run_id, node_id, artifact_name, options)(
+        fetch,
+        basePath,
+      );
+    },
     /**
-     * 
+     *
      * @summary ReportRunMetrics reports metrics of a run. Each metric is reported in its own transaction, so this API accepts partial failures. Metric can be uniquely identified by (run_id, node_id, name). Duplicate reporting will be ignored by the API. First reporting wins.
-     * @param {} run_id Required. The parent run ID of the metric.
-     * @param {} body 
+     * @param {string} run_id Required. The parent run ID of the metric.
+     * @param {ApiReportRunMetricsRequest} body
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public reportRunMetrics(run_id: string, body: ApiReportRunMetricsRequest, options?: any) {
-        return RunServiceApiFp(this.configuration).reportRunMetrics(run_id, body, options)(this.fetch, this.basePath);
-    }
-
+    reportRunMetrics(run_id: string, body: ApiReportRunMetricsRequest, options?: any) {
+      return RunServiceApiFp(configuration).reportRunMetrics(run_id, body, options)(
+        fetch,
+        basePath,
+      );
+    },
     /**
-     * 
-     * @param {} run_id 
+     *
+     * @param {string} run_id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public retryRun(run_id: string, options?: any) {
-        return RunServiceApiFp(this.configuration).retryRun(run_id, options)(this.fetch, this.basePath);
-    }
-
+    retryRun(run_id: string, options?: any) {
+      return RunServiceApiFp(configuration).retryRun(run_id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} run_id 
+     *
+     * @param {string} run_id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public terminateRun(run_id: string, options?: any) {
-        return RunServiceApiFp(this.configuration).terminateRun(run_id, options)(this.fetch, this.basePath);
-    }
-
+    terminateRun(run_id: string, options?: any) {
+      return RunServiceApiFp(configuration).terminateRun(run_id, options)(fetch, basePath);
+    },
     /**
-     * 
-     * @param {} id 
+     *
+     * @param {string} id
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
-     * @memberof RunServiceApi
      */
-    public unarchiveRun(id: string, options?: any) {
-        return RunServiceApiFp(this.configuration).unarchiveRun(id, options)(this.fetch, this.basePath);
-    }
+    unarchiveRun(id: string, options?: any) {
+      return RunServiceApiFp(configuration).unarchiveRun(id, options)(fetch, basePath);
+    },
+  };
+};
 
+/**
+ * RunServiceApi - object-oriented interface
+ * @export
+ * @class RunServiceApi
+ * @extends {BaseAPI}
+ */
+export class RunServiceApi extends BaseAPI {
+  /**
+   *
+   * @param {string} id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public archiveRun(id: string, options?: any) {
+    return RunServiceApiFp(this.configuration).archiveRun(id, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {ApiRun} body
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public createRun(body: ApiRun, options?: any) {
+    return RunServiceApiFp(this.configuration).createRun(body, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public deleteRun(id: string, options?: any) {
+    return RunServiceApiFp(this.configuration).deleteRun(id, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} run_id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public getRun(run_id: string, options?: any) {
+    return RunServiceApiFp(this.configuration).getRun(run_id, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} [page_token]
+   * @param {number} [page_size]
+   * @param {string} [sort_by] Can be format of \&quot;field_name\&quot;, \&quot;field_name asc\&quot; or \&quot;field_name des\&quot; Ascending by default.
+   * @param {'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB'} [resource_reference_key_type] The type of the resource that referred to.
+   * @param {string} [resource_reference_key_id] The ID of the resource that referred to.
+   * @param {string} [filter] A base-64 encoded, JSON-serialized Filter protocol buffer (see filter.proto).
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public listRuns(
+    page_token?: string,
+    page_size?: number,
+    sort_by?: string,
+    resource_reference_key_type?: 'UNKNOWN_RESOURCE_TYPE' | 'EXPERIMENT' | 'JOB',
+    resource_reference_key_id?: string,
+    filter?: string,
+    options?: any,
+  ) {
+    return RunServiceApiFp(this.configuration).listRuns(
+      page_token,
+      page_size,
+      sort_by,
+      resource_reference_key_type,
+      resource_reference_key_id,
+      filter,
+      options,
+    )(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} run_id The ID of the run.
+   * @param {string} node_id The ID of the running node.
+   * @param {string} artifact_name The name of the artifact.
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public readArtifact(run_id: string, node_id: string, artifact_name: string, options?: any) {
+    return RunServiceApiFp(this.configuration).readArtifact(
+      run_id,
+      node_id,
+      artifact_name,
+      options,
+    )(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @summary ReportRunMetrics reports metrics of a run. Each metric is reported in its own transaction, so this API accepts partial failures. Metric can be uniquely identified by (run_id, node_id, name). Duplicate reporting will be ignored by the API. First reporting wins.
+   * @param {string} run_id Required. The parent run ID of the metric.
+   * @param {ApiReportRunMetricsRequest} body
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public reportRunMetrics(run_id: string, body: ApiReportRunMetricsRequest, options?: any) {
+    return RunServiceApiFp(this.configuration).reportRunMetrics(run_id, body, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} run_id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public retryRun(run_id: string, options?: any) {
+    return RunServiceApiFp(this.configuration).retryRun(run_id, options)(this.fetch, this.basePath);
+  }
+
+  /**
+   *
+   * @param {string} run_id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public terminateRun(run_id: string, options?: any) {
+    return RunServiceApiFp(this.configuration).terminateRun(run_id, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
+
+  /**
+   *
+   * @param {string} id
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof RunServiceApi
+   */
+  public unarchiveRun(id: string, options?: any) {
+    return RunServiceApiFp(this.configuration).unarchiveRun(id, options)(this.fetch, this.basePath);
+  }
 }
-
diff --git a/frontend/src/apis/run/configuration.ts b/frontend/src/apis/run/configuration.ts
index 27904f8b5d4a..885b3ec7edc9 100644
--- a/frontend/src/apis/run/configuration.ts
+++ b/frontend/src/apis/run/configuration.ts
@@ -4,63 +4,62 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
 export interface ConfigurationParameters {
-    apiKey?: string | ((name: string) => string);
-    username?: string;
-    password?: string;
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    basePath?: string;
+  apiKey?: string | ((name: string) => string);
+  username?: string;
+  password?: string;
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  basePath?: string;
 }
 
 export class Configuration {
-    /**
-     * parameter for apiKey security
-     * @param name security name
-     * @memberof Configuration
-     */
-    apiKey?: string | ((name: string) => string);
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    username?: string;
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    password?: string;
-    /**
-     * parameter for oauth2 security
-     * @param name security name
-     * @param scopes oauth2 scope
-     * @memberof Configuration
-     */
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    /**
-     * override base path
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    basePath?: string;
+  /**
+   * parameter for apiKey security
+   * @param name security name
+   * @memberof Configuration
+   */
+  apiKey?: string | ((name: string) => string);
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  username?: string;
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  password?: string;
+  /**
+   * parameter for oauth2 security
+   * @param name security name
+   * @param scopes oauth2 scope
+   * @memberof Configuration
+   */
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  /**
+   * override base path
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  basePath?: string;
 
-    constructor(param: ConfigurationParameters = {}) {
-        this.apiKey = param.apiKey;
-        this.username = param.username;
-        this.password = param.password;
-        this.accessToken = param.accessToken;
-        this.basePath = param.basePath;
-    }
+  constructor(param: ConfigurationParameters = {}) {
+    this.apiKey = param.apiKey;
+    this.username = param.username;
+    this.password = param.password;
+    this.accessToken = param.accessToken;
+    this.basePath = param.basePath;
+  }
 }
diff --git a/frontend/src/apis/run/custom.d.ts b/frontend/src/apis/run/custom.d.ts
index 02f969575e37..4c611cc3216e 100644
--- a/frontend/src/apis/run/custom.d.ts
+++ b/frontend/src/apis/run/custom.d.ts
@@ -1 +1,2 @@
-declare module 'portable-fetch';
\ No newline at end of file
+declare module 'portable-fetch';
+declare module 'url';
diff --git a/frontend/src/apis/run/index.ts b/frontend/src/apis/run/index.ts
index 04238c0fb2c8..7466271c64c1 100644
--- a/frontend/src/apis/run/index.ts
+++ b/frontend/src/apis/run/index.ts
@@ -4,13 +4,12 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
-export * from "./api";
-export * from "./configuration";
+export * from './api';
+export * from './configuration';
diff --git a/frontend/src/apis/visualization/.swagger-codegen/VERSION b/frontend/src/apis/visualization/.swagger-codegen/VERSION
index a6254504e401..48a6b508dc9f 100644
--- a/frontend/src/apis/visualization/.swagger-codegen/VERSION
+++ b/frontend/src/apis/visualization/.swagger-codegen/VERSION
@@ -1 +1 @@
-2.3.1
\ No newline at end of file
+2.4.7
\ No newline at end of file
diff --git a/frontend/src/apis/visualization/api.ts b/frontend/src/apis/visualization/api.ts
index 573f9b6f99ea..6d0c3e6b3580 100644
--- a/frontend/src/apis/visualization/api.ts
+++ b/frontend/src/apis/visualization/api.ts
@@ -5,29 +5,28 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
+import * as url from 'url';
+import * as portableFetch from 'portable-fetch';
+import { Configuration } from './configuration';
 
-import * as url from "url";
-import * as portableFetch from "portable-fetch";
-import { Configuration } from "./configuration";
-
-const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+const BASE_PATH = 'http://localhost'.replace(/\/+$/, '');
 
 /**
  *
  * @export
  */
 export const COLLECTION_FORMATS = {
-    csv: ",",
-    ssv: " ",
-    tsv: "\t",
-    pipes: "|",
+  csv: ',',
+  ssv: ' ',
+  tsv: '\t',
+  pipes: '|',
 };
 
 /**
@@ -36,110 +35,114 @@ export const COLLECTION_FORMATS = {
  * @interface FetchAPI
  */
 export interface FetchAPI {
-    (url: string, init?: any): Promise<Response>;
+  (url: string, init?: any): Promise<Response>;
 }
 
 /**
- *  
+ *
  * @export
  * @interface FetchArgs
  */
 export interface FetchArgs {
-    url: string;
-    options: any;
+  url: string;
+  options: any;
 }
 
 /**
- * 
+ *
  * @export
  * @class BaseAPI
  */
 export class BaseAPI {
-    protected configuration: Configuration;
+  protected configuration: Configuration;
 
-    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected fetch: FetchAPI = portableFetch) {
-        if (configuration) {
-            this.configuration = configuration;
-            this.basePath = configuration.basePath || this.basePath;
-        }
+  constructor(
+    configuration?: Configuration,
+    protected basePath: string = BASE_PATH,
+    protected fetch: FetchAPI = portableFetch,
+  ) {
+    if (configuration) {
+      this.configuration = configuration;
+      this.basePath = configuration.basePath || this.basePath;
     }
-};
+  }
+}
 
 /**
- * 
+ *
  * @export
  * @class RequiredError
  * @extends {Error}
  */
 export class RequiredError extends Error {
-    name: "RequiredError"
-    constructor(public field: string, msg?: string) {
-        super(msg);
-    }
+  name: 'RequiredError';
+  constructor(public field: string, msg?: string) {
+    super(msg);
+  }
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiStatus
  */
 export interface ApiStatus {
-    /**
-     * 
-     * @type {string}
-     * @memberof ApiStatus
-     */
-    error?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof ApiStatus
-     */
-    code?: number;
-    /**
-     * 
-     * @type {Array&lt;ProtobufAny&gt;}
-     * @memberof ApiStatus
-     */
-    details?: Array<ProtobufAny>;
+  /**
+   *
+   * @type {string}
+   * @memberof ApiStatus
+   */
+  error?: string;
+  /**
+   *
+   * @type {number}
+   * @memberof ApiStatus
+   */
+  code?: number;
+  /**
+   *
+   * @type {Array<ProtobufAny>}
+   * @memberof ApiStatus
+   */
+  details?: Array<ProtobufAny>;
 }
 
 /**
- * 
+ *
  * @export
  * @interface ApiVisualization
  */
 export interface ApiVisualization {
-    /**
-     * 
-     * @type {ApiVisualizationType}
-     * @memberof ApiVisualization
-     */
-    type?: ApiVisualizationType;
-    /**
-     * Path pattern of input data to be used during generation of visualizations. This is required when creating the pipeline through CreateVisualization API.
-     * @type {string}
-     * @memberof ApiVisualization
-     */
-    source?: string;
-    /**
-     * Variables to be used during generation of a visualization. This should be provided as a JSON string. This is required when creating the pipeline through CreateVisualization API.
-     * @type {string}
-     * @memberof ApiVisualization
-     */
-    arguments?: string;
-    /**
-     * Output. Generated visualization html.
-     * @type {string}
-     * @memberof ApiVisualization
-     */
-    html?: string;
-    /**
-     * In case any error happens when generating visualizations, only visualization ID and the error message are returned. Client has the flexibility of choosing how to handle the error.
-     * @type {string}
-     * @memberof ApiVisualization
-     */
-    error?: string;
+  /**
+   *
+   * @type {ApiVisualizationType}
+   * @memberof ApiVisualization
+   */
+  type?: ApiVisualizationType;
+  /**
+   * Path pattern of input data to be used during generation of visualizations. This is required when creating the pipeline through CreateVisualization API.
+   * @type {string}
+   * @memberof ApiVisualization
+   */
+  source?: string;
+  /**
+   * Variables to be used during generation of a visualization. This should be provided as a JSON string. This is required when creating the pipeline through CreateVisualization API.
+   * @type {string}
+   * @memberof ApiVisualization
+   */
+  arguments?: string;
+  /**
+   * Output. Generated visualization html.
+   * @type {string}
+   * @memberof ApiVisualization
+   */
+  html?: string;
+  /**
+   * In case any error happens when generating visualizations, only visualization ID and the error message are returned. Client has the flexibility of choosing how to handle the error.
+   * @type {string}
+   * @memberof ApiVisualization
+   */
+  error?: string;
 }
 
 /**
@@ -148,11 +151,11 @@ export interface ApiVisualization {
  * @enum {string}
  */
 export enum ApiVisualizationType {
-    ROCCURVE = <any> 'ROC_CURVE',
-    TFDV = <any> 'TFDV',
-    TFMA = <any> 'TFMA',
-    TABLE = <any> 'TABLE',
-    CUSTOM = <any> 'CUSTOM'
+  ROCCURVE = <any>'ROC_CURVE',
+  TFDV = <any>'TFDV',
+  TFMA = <any>'TFMA',
+  TABLE = <any>'TABLE',
+  CUSTOM = <any>'CUSTOM',
 }
 
 /**
@@ -161,67 +164,77 @@ export enum ApiVisualizationType {
  * @interface ProtobufAny
  */
 export interface ProtobufAny {
-    /**
-     * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    type_url?: string;
-    /**
-     * Must be a valid serialized protocol buffer of the above specified type.
-     * @type {string}
-     * @memberof ProtobufAny
-     */
-    value?: string;
+  /**
+   * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted).  In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows:  * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][]   value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the   URL, or have them precompiled into a binary to avoid any   lookup. Therefore, binary compatibility needs to be preserved   on changes to types. (Use versioned type names to manage   breaking changes.)  Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com.  Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  type_url?: string;
+  /**
+   * Must be a valid serialized protocol buffer of the above specified type.
+   * @type {string}
+   * @memberof ProtobufAny
+   */
+  value?: string;
 }
 
-
 /**
  * VisualizationServiceApi - fetch parameter creator
  * @export
  */
-export const VisualizationServiceApiFetchParamCreator = function (configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {ApiVisualization} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createVisualization(body: ApiVisualization, options: any = {}): FetchArgs {
-            // verify required parameter 'body' is not null or undefined
-            if (body === null || body === undefined) {
-                throw new RequiredError('body','Required parameter body was null or undefined when calling createVisualization.');
-            }
-            const localVarPath = `/apis/v1beta1/visualizations`;
-            const localVarUrlObj = url.parse(localVarPath, true);
-            const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
-            const localVarHeaderParameter = {} as any;
-            const localVarQueryParameter = {} as any;
+export const VisualizationServiceApiFetchParamCreator = function(configuration?: Configuration) {
+  return {
+    /**
+     *
+     * @param {ApiVisualization} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createVisualization(body: ApiVisualization, options: any = {}): FetchArgs {
+      // verify required parameter 'body' is not null or undefined
+      if (body === null || body === undefined) {
+        throw new RequiredError(
+          'body',
+          'Required parameter body was null or undefined when calling createVisualization.',
+        );
+      }
+      const localVarPath = `/apis/v1beta1/visualizations`;
+      const localVarUrlObj = url.parse(localVarPath, true);
+      const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
 
-            // authentication Bearer required
-            if (configuration && configuration.apiKey) {
-                const localVarApiKeyValue = typeof configuration.apiKey === 'function'
-					? configuration.apiKey("authorization")
-					: configuration.apiKey;
-                localVarHeaderParameter["authorization"] = localVarApiKeyValue;
-            }
+      // authentication Bearer required
+      if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue =
+          typeof configuration.apiKey === 'function'
+            ? configuration.apiKey('authorization')
+            : configuration.apiKey;
+        localVarHeaderParameter['authorization'] = localVarApiKeyValue;
+      }
 
-            localVarHeaderParameter['Content-Type'] = 'application/json';
+      localVarHeaderParameter['Content-Type'] = 'application/json';
 
-            localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
-            // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
-            delete localVarUrlObj.search;
-            localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
-            const needsSerialization = (<any>"ApiVisualization" !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
-            localVarRequestOptions.body =  needsSerialization ? JSON.stringify(body || {}) : (body || "");
+      localVarUrlObj.query = Object.assign(
+        {},
+        localVarUrlObj.query,
+        localVarQueryParameter,
+        options.query,
+      );
+      // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+      delete localVarUrlObj.search;
+      localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+      const needsSerialization =
+        <any>'ApiVisualization' !== 'string' ||
+        localVarRequestOptions.headers['Content-Type'] === 'application/json';
+      localVarRequestOptions.body = needsSerialization ? JSON.stringify(body || {}) : body || '';
 
-            return {
-                url: url.format(localVarUrlObj),
-                options: localVarRequestOptions,
-            };
-        },
-    }
+      return {
+        url: url.format(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+  };
 };
 
 /**
@@ -229,44 +242,56 @@ export const VisualizationServiceApiFetchParamCreator = function (configuration?
  * @export
  */
 export const VisualizationServiceApiFp = function(configuration?: Configuration) {
-    return {
-        /**
-         * 
-         * @param {ApiVisualization} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createVisualization(body: ApiVisualization, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise<ApiVisualization> {
-            const localVarFetchArgs = VisualizationServiceApiFetchParamCreator(configuration).createVisualization(body, options);
-            return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
-                return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
-                    if (response.status >= 200 && response.status < 300) {
-                        return response.json();
-                    } else {
-                        throw response;
-                    }
-                });
-            };
-        },
-    }
+  return {
+    /**
+     *
+     * @param {ApiVisualization} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createVisualization(
+      body: ApiVisualization,
+      options?: any,
+    ): (fetch?: FetchAPI, basePath?: string) => Promise<ApiVisualization> {
+      const localVarFetchArgs = VisualizationServiceApiFetchParamCreator(
+        configuration,
+      ).createVisualization(body, options);
+      return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+        return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.json();
+          } else {
+            throw response;
+          }
+        });
+      };
+    },
+  };
 };
 
 /**
  * VisualizationServiceApi - factory interface
  * @export
  */
-export const VisualizationServiceApiFactory = function (configuration?: Configuration, fetch?: FetchAPI, basePath?: string) {
-    return {
-        /**
-         * 
-         * @param {ApiVisualization} body 
-         * @param {*} [options] Override http request option.
-         * @throws {RequiredError}
-         */
-        createVisualization(body: ApiVisualization, options?: any) {
-            return VisualizationServiceApiFp(configuration).createVisualization(body, options)(fetch, basePath);
-        },
-    };
+export const VisualizationServiceApiFactory = function(
+  configuration?: Configuration,
+  fetch?: FetchAPI,
+  basePath?: string,
+) {
+  return {
+    /**
+     *
+     * @param {ApiVisualization} body
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    createVisualization(body: ApiVisualization, options?: any) {
+      return VisualizationServiceApiFp(configuration).createVisualization(body, options)(
+        fetch,
+        basePath,
+      );
+    },
+  };
 };
 
 /**
@@ -276,16 +301,17 @@ export const VisualizationServiceApiFactory = function (configuration?: Configur
  * @extends {BaseAPI}
  */
 export class VisualizationServiceApi extends BaseAPI {
-    /**
-     * 
-     * @param {} body 
-     * @param {*} [options] Override http request option.
-     * @throws {RequiredError}
-     * @memberof VisualizationServiceApi
-     */
-    public createVisualization(body: ApiVisualization, options?: any) {
-        return VisualizationServiceApiFp(this.configuration).createVisualization(body, options)(this.fetch, this.basePath);
-    }
-
+  /**
+   *
+   * @param {ApiVisualization} body
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof VisualizationServiceApi
+   */
+  public createVisualization(body: ApiVisualization, options?: any) {
+    return VisualizationServiceApiFp(this.configuration).createVisualization(body, options)(
+      this.fetch,
+      this.basePath,
+    );
+  }
 }
-
diff --git a/frontend/src/apis/visualization/configuration.ts b/frontend/src/apis/visualization/configuration.ts
index d81fb1744b9e..f560abd043e3 100644
--- a/frontend/src/apis/visualization/configuration.ts
+++ b/frontend/src/apis/visualization/configuration.ts
@@ -4,63 +4,62 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
 export interface ConfigurationParameters {
-    apiKey?: string | ((name: string) => string);
-    username?: string;
-    password?: string;
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    basePath?: string;
+  apiKey?: string | ((name: string) => string);
+  username?: string;
+  password?: string;
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  basePath?: string;
 }
 
 export class Configuration {
-    /**
-     * parameter for apiKey security
-     * @param name security name
-     * @memberof Configuration
-     */
-    apiKey?: string | ((name: string) => string);
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    username?: string;
-    /**
-     * parameter for basic security
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    password?: string;
-    /**
-     * parameter for oauth2 security
-     * @param name security name
-     * @param scopes oauth2 scope
-     * @memberof Configuration
-     */
-    accessToken?: string | ((name: string, scopes?: string[]) => string);
-    /**
-     * override base path
-     * 
-     * @type {string}
-     * @memberof Configuration
-     */
-    basePath?: string;
+  /**
+   * parameter for apiKey security
+   * @param name security name
+   * @memberof Configuration
+   */
+  apiKey?: string | ((name: string) => string);
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  username?: string;
+  /**
+   * parameter for basic security
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  password?: string;
+  /**
+   * parameter for oauth2 security
+   * @param name security name
+   * @param scopes oauth2 scope
+   * @memberof Configuration
+   */
+  accessToken?: string | ((name: string, scopes?: string[]) => string);
+  /**
+   * override base path
+   *
+   * @type {string}
+   * @memberof Configuration
+   */
+  basePath?: string;
 
-    constructor(param: ConfigurationParameters = {}) {
-        this.apiKey = param.apiKey;
-        this.username = param.username;
-        this.password = param.password;
-        this.accessToken = param.accessToken;
-        this.basePath = param.basePath;
-    }
+  constructor(param: ConfigurationParameters = {}) {
+    this.apiKey = param.apiKey;
+    this.username = param.username;
+    this.password = param.password;
+    this.accessToken = param.accessToken;
+    this.basePath = param.basePath;
+  }
 }
diff --git a/frontend/src/apis/visualization/custom.d.ts b/frontend/src/apis/visualization/custom.d.ts
index 02f969575e37..4c611cc3216e 100644
--- a/frontend/src/apis/visualization/custom.d.ts
+++ b/frontend/src/apis/visualization/custom.d.ts
@@ -1 +1,2 @@
-declare module 'portable-fetch';
\ No newline at end of file
+declare module 'portable-fetch';
+declare module 'url';
diff --git a/frontend/src/apis/visualization/index.ts b/frontend/src/apis/visualization/index.ts
index 349871961dd4..37241e7909f4 100644
--- a/frontend/src/apis/visualization/index.ts
+++ b/frontend/src/apis/visualization/index.ts
@@ -4,13 +4,12 @@
  * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
  *
  * OpenAPI spec version: version not set
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
 
-
-export * from "./api";
-export * from "./configuration";
+export * from './api';
+export * from './configuration';
diff --git a/frontend/src/assets.d.ts b/frontend/src/assets.d.ts
new file mode 100644
index 000000000000..8cf0c373804e
--- /dev/null
+++ b/frontend/src/assets.d.ts
@@ -0,0 +1,3 @@
+// Needed to import png files directly.
+// Reference: https://github.com/wmonk/create-react-app-typescript/tree/master/template#adding-images-fonts-and-files
+declare module '*.png';
diff --git a/frontend/src/atoms/BusyButton.tsx b/frontend/src/atoms/BusyButton.tsx
index bd1cc2f57257..4b39a9e4d040 100644
--- a/frontend/src/atoms/BusyButton.tsx
+++ b/frontend/src/atoms/BusyButton.tsx
@@ -57,17 +57,20 @@ class BusyButton extends React.Component<BusyButtonProps> {
   public render(): JSX.Element {
     const { title, busy, className, disabled, icon, outlined, ...rest } = this.props;
 
-    return <Button {...rest} color={outlined ? 'primary' : 'secondary'}
-      className={classes(
-        css.root,
-        busy && css.rootBusy,
-        className)}
-      disabled={busy || disabled}>
-      {!!icon && <this.props.icon className={css.icon} />}
-      <span>{title}</span>
-      {busy === true && <CircularProgress size={15}
-        className={classes(css.spinner, busy && css.spinnerBusy)} />}
-    </Button>;
+    return (
+      <Button
+        {...rest}
+        color={outlined ? 'primary' : 'secondary'}
+        className={classes(css.root, busy && css.rootBusy, className)}
+        disabled={busy || disabled}
+      >
+        {!!icon && <this.props.icon className={css.icon} />}
+        <span>{title}</span>
+        {busy === true && (
+          <CircularProgress size={15} className={classes(css.spinner, busy && css.spinnerBusy)} />
+        )}
+      </Button>
+    );
   }
 }
 
diff --git a/frontend/src/atoms/ExternalLink.tsx b/frontend/src/atoms/ExternalLink.tsx
new file mode 100644
index 000000000000..1e851c7ff185
--- /dev/null
+++ b/frontend/src/atoms/ExternalLink.tsx
@@ -0,0 +1,19 @@
+import React, { DetailedHTMLProps, AnchorHTMLAttributes } from 'react';
+import { stylesheet } from 'typestyle';
+import { color } from '../Css';
+
+const css = stylesheet({
+  link: {
+    $nest: {
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
+    color: color.theme,
+    textDecoration: 'none',
+  },
+});
+
+export const ExternalLink: React.FC<
+  DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+> = props => <a {...props} className={css.link} target='_blank' rel='noreferrer noopener' />;
diff --git a/frontend/src/atoms/IconWithTooltip.test.tsx b/frontend/src/atoms/IconWithTooltip.test.tsx
index a59f595b1f85..6b440691dca1 100644
--- a/frontend/src/atoms/IconWithTooltip.test.tsx
+++ b/frontend/src/atoms/IconWithTooltip.test.tsx
@@ -22,15 +22,20 @@ import { create } from 'react-test-renderer';
 describe('IconWithTooltip', () => {
   it('renders without height or weight', () => {
     const tree = create(
-      <IconWithTooltip Icon={TestIcon} iconColor='green' tooltip='test icon tooltip' />
+      <IconWithTooltip Icon={TestIcon} iconColor='green' tooltip='test icon tooltip' />,
     );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders with height and weight', () => {
     const tree = create(
-      <IconWithTooltip Icon={TestIcon} height={20} width={20} iconColor='green'
-        tooltip='test icon tooltip' />
+      <IconWithTooltip
+        Icon={TestIcon}
+        height={20}
+        width={20}
+        iconColor='green'
+        tooltip='test icon tooltip'
+      />,
     );
     expect(tree).toMatchSnapshot();
   });
diff --git a/frontend/src/atoms/IconWithTooltip.tsx b/frontend/src/atoms/IconWithTooltip.tsx
index 6c3b4c761067..3f2d9fb69bae 100644
--- a/frontend/src/atoms/IconWithTooltip.tsx
+++ b/frontend/src/atoms/IconWithTooltip.tsx
@@ -31,11 +31,13 @@ export default (props: IconWithTooltipProps) => {
 
   return (
     <Tooltip title={tooltip}>
-      <Icon style={{
-        color: iconColor,
-        height: height || 16,
-        width: width || 16
-      }}/>
+      <Icon
+        style={{
+          color: iconColor,
+          height: height || 16,
+          width: width || 16,
+        }}
+      />
     </Tooltip>
   );
 };
diff --git a/frontend/src/atoms/Input.test.tsx b/frontend/src/atoms/Input.test.tsx
index 256ec37ae3f6..bc4b9018d1b2 100644
--- a/frontend/src/atoms/Input.test.tsx
+++ b/frontend/src/atoms/Input.test.tsx
@@ -20,18 +20,27 @@ import Input from './Input';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
-
 describe('Input', () => {
   const handleChange = jest.fn();
   const value = 'some input value';
 
   it('renders with the right styles by default', () => {
-    const tree = shallow(<Input onChange={handleChange('fieldname')} value={value} variant='outlined' />);
+    const tree = shallow(
+      <Input onChange={handleChange('fieldname')} value={value} variant='outlined' />,
+    );
     expect(toJson(tree)).toMatchSnapshot();
   });
 
   it('accepts height and width as prop overrides', () => {
-    const tree = shallow(<Input height={123} width={456} onChange={handleChange('fieldname')} value={value} variant='outlined' />);
+    const tree = shallow(
+      <Input
+        height={123}
+        width={456}
+        onChange={handleChange('fieldname')}
+        value={value}
+        variant='outlined'
+      />,
+    );
     expect(toJson(tree)).toMatchSnapshot();
   });
 });
diff --git a/frontend/src/atoms/Input.tsx b/frontend/src/atoms/Input.tsx
index f23396c8b6f3..ff6ffe954fb3 100644
--- a/frontend/src/atoms/Input.tsx
+++ b/frontend/src/atoms/Input.tsx
@@ -27,12 +27,17 @@ interface InputProps extends OutlinedTextFieldProps {
 export default (props: InputProps) => {
   const { height, maxWidth, variant, width, ...rest } = props;
   return (
-    <TextField variant={variant} className={commonCss.textField} spellCheck={false}
-        style={{
-          height: !!props.multiline ? 'auto' : (height || 40),
-          maxWidth: maxWidth || 600,
-          width: width || '100%' }}
-        {...rest}>
+    <TextField
+      variant={variant}
+      className={commonCss.textField}
+      spellCheck={false}
+      style={{
+        height: !!props.multiline ? 'auto' : height || 40,
+        maxWidth: maxWidth || 600,
+        width: width || '100%',
+      }}
+      {...rest}
+    >
       {props.children}
     </TextField>
   );
diff --git a/frontend/src/atoms/MD2Tabs.test.tsx b/frontend/src/atoms/MD2Tabs.test.tsx
index 3acc1b5193c2..0c371ebb235e 100644
--- a/frontend/src/atoms/MD2Tabs.test.tsx
+++ b/frontend/src/atoms/MD2Tabs.test.tsx
@@ -29,20 +29,33 @@ describe('Input', () => {
 
   it('does not try to call the onSwitch handler if it is not defined', () => {
     const tree = shallow(<MD2Tabs tabs={['tab1', 'tab2']} selectedTab={0} />);
-    tree.find(buttonSelector).at(1).simulate('click');
+    tree
+      .find(buttonSelector)
+      .at(1)
+      .simulate('click');
   });
 
   it('calls the onSwitch function if an unselected button is clicked', () => {
     const switchHandler = jest.fn();
-    const tree = shallow(<MD2Tabs tabs={['tab1', 'tab2']} selectedTab={0} onSwitch={switchHandler} />);
-    tree.find(buttonSelector).at(1).simulate('click');
+    const tree = shallow(
+      <MD2Tabs tabs={['tab1', 'tab2']} selectedTab={0} onSwitch={switchHandler} />,
+    );
+    tree
+      .find(buttonSelector)
+      .at(1)
+      .simulate('click');
     expect(switchHandler).toHaveBeenCalled();
   });
 
   it('does not the onSwitch function if the already selected button is clicked', () => {
     const switchHandler = jest.fn();
-    const tree = shallow(<MD2Tabs tabs={['tab1', 'tab2']} selectedTab={1} onSwitch={switchHandler} />);
-    tree.find(buttonSelector).at(1).simulate('click');
+    const tree = shallow(
+      <MD2Tabs tabs={['tab1', 'tab2']} selectedTab={1} onSwitch={switchHandler} />,
+    );
+    tree
+      .find(buttonSelector)
+      .at(1)
+      .simulate('click');
     expect(switchHandler).not.toHaveBeenCalled();
   });
 
diff --git a/frontend/src/atoms/MD2Tabs.tsx b/frontend/src/atoms/MD2Tabs.tsx
index 1ccb77e35ef8..8e461dd8c2cc 100644
--- a/frontend/src/atoms/MD2Tabs.tsx
+++ b/frontend/src/atoms/MD2Tabs.tsx
@@ -66,7 +66,6 @@ const css = stylesheet({
 });
 
 class MD2Tabs extends React.Component<MD2TabsProps, any> {
-
   private _rootRef = React.createRef<any>();
   private _indicatorRef = React.createRef<any>();
   private _tabRefs = this.props.tabs.map(t => React.createRef<HTMLSpanElement>());
@@ -80,8 +79,15 @@ class MD2Tabs extends React.Component<MD2TabsProps, any> {
         <div className={css.indicator} ref={this._indicatorRef} />
         <Separator units={20} />
         {this.props.tabs.map((tab, i) => (
-          <Button className={classes(css.button, i === selected ? css.active : '')} key={i}
-            onClick={() => { if (i !== selected) { switchHandler(i); } }}>
+          <Button
+            className={classes(css.button, i === selected ? css.active : '')}
+            key={i}
+            onClick={() => {
+              if (i !== selected) {
+                switchHandler(i);
+              }
+            }}
+          >
             <span ref={this._tabRefs[i]}>{tab}</span>
           </Button>
         ))}
@@ -116,12 +122,13 @@ class MD2Tabs extends React.Component<MD2TabsProps, any> {
     if (!activeLabelElement) {
       return;
     }
-    const leftOffset = activeLabelElement.getBoundingClientRect().left -
+    const leftOffset =
+      activeLabelElement.getBoundingClientRect().left -
       this._rootRef.current.getBoundingClientRect().left;
 
     const tabIndicator = this._indicatorRef.current;
-    tabIndicator.style.left = (leftOffset - 5) + 'px';
-    tabIndicator.style.width = (activeLabelElement.getBoundingClientRect().width + 5) + 'px';
+    tabIndicator.style.left = leftOffset - 5 + 'px';
+    tabIndicator.style.width = activeLabelElement.getBoundingClientRect().width + 5 + 'px';
     tabIndicator.style.display = 'block';
   }
 }
diff --git a/frontend/src/atoms/Separator.tsx b/frontend/src/atoms/Separator.tsx
index 85509acbfde6..70647ccb0dfe 100644
--- a/frontend/src/atoms/Separator.tsx
+++ b/frontend/src/atoms/Separator.tsx
@@ -23,18 +23,20 @@ interface SeparatorProps {
 }
 
 const style = (orientation: Orientation, units: number) => {
-  return orientation === 'horizontal' ? {
-    display: 'inline-block',
-    minWidth: units,
-    width: units,
-  } : {
-      display: 'block',
-      flexShrink: 0,
-      height: units,
-      minHeight: units,
-    };
+  return orientation === 'horizontal'
+    ? {
+        display: 'inline-block',
+        minWidth: units,
+        width: units,
+      }
+    : {
+        display: 'block',
+        flexShrink: 0,
+        height: units,
+        minHeight: units,
+      };
 };
 
-export default (props: SeparatorProps) => <span style={
-  style(props.orientation || 'horizontal', props.units || 10)
-} />;
+export default (props: SeparatorProps) => (
+  <span style={style(props.orientation || 'horizontal', props.units || 10)} />
+);
diff --git a/frontend/src/components/ArtifactLink.tsx b/frontend/src/components/ArtifactLink.tsx
new file mode 100644
index 000000000000..b30ff99b7df7
--- /dev/null
+++ b/frontend/src/components/ArtifactLink.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { generateGcsConsoleUri } from '../lib/Utils';
+
+/**
+ * A component that renders an artifact URL as clickable link if URL is correct
+ */
+export const ArtifactLink: React.FC<{ artifactUri?: string }> = ({ artifactUri }) => {
+  let clickableUrl: string | undefined;
+  if (artifactUri) {
+    if (artifactUri.startsWith('gs:')) {
+      const gcsConsoleUrl = generateGcsConsoleUri(artifactUri);
+      if (gcsConsoleUrl) {
+        clickableUrl = gcsConsoleUrl;
+      }
+    } else if (artifactUri.startsWith('http:') || artifactUri.startsWith('https:')) {
+      clickableUrl = artifactUri;
+    }
+  }
+
+  if (clickableUrl) {
+    // Opens in new window safely
+    return (
+      <a href={clickableUrl} target={'_blank'} rel={'noreferrer noopener'}>
+        {artifactUri}
+      </a>
+    );
+  } else {
+    return <>{artifactUri}</>;
+  }
+};
diff --git a/frontend/src/components/Banner.test.tsx b/frontend/src/components/Banner.test.tsx
index 3cede5c48f99..cbffb075f952 100644
--- a/frontend/src/components/Banner.test.tsx
+++ b/frontend/src/components/Banner.test.tsx
@@ -41,19 +41,32 @@ describe('Banner', () => {
   });
 
   it('shows "Refresh" button when passed a refresh function', () => {
-    const tree = shallow(<Banner message={'Some message'} refresh={() => { /* do nothing */}} />);
+    const tree = shallow(
+      <Banner
+        message={'Some message'}
+        refresh={() => {
+          /* do nothing */
+        }}
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('opens details dialog when button is clicked', () => {
     const tree = shallow(<Banner message='hello' additionalInfo='world' />);
-    tree.find('WithStyles(Button)').at(0).simulate('click');
+    tree
+      .find('WithStyles(Button)')
+      .at(0)
+      .simulate('click');
     expect(tree.state()).toHaveProperty('dialogOpen', true);
   });
 
   it('closes details dialog when cancel button is clicked', () => {
     const tree = shallow(<Banner message='hello' additionalInfo='world' />);
-    tree.find('WithStyles(Button)').at(0).simulate('click');
+    tree
+      .find('WithStyles(Button)')
+      .at(0)
+      .simulate('click');
     expect(tree.state()).toHaveProperty('dialogOpen', true);
     tree.find('#dismissDialogBtn').simulate('click');
     expect(tree.state()).toHaveProperty('dialogOpen', false);
@@ -62,7 +75,10 @@ describe('Banner', () => {
   it('calls refresh callback', () => {
     const spy = jest.fn();
     const tree = shallow(<Banner message='hello' refresh={spy} />);
-    tree.find('.' + css.refreshButton).at(0).simulate('click');
+    tree
+      .find('.' + css.refreshButton)
+      .at(0)
+      .simulate('click');
     expect(spy).toHaveBeenCalled();
   });
 });
diff --git a/frontend/src/components/Banner.tsx b/frontend/src/components/Banner.tsx
index 466895ae3f71..1d2c1d56d9d4 100644
--- a/frontend/src/components/Banner.tsx
+++ b/frontend/src/components/Banner.tsx
@@ -68,7 +68,6 @@ interface BannerState {
 }
 
 class Banner extends React.Component<BannerProps, BannerState> {
-
   constructor(props: any) {
     super(props);
 
@@ -78,20 +77,25 @@ class Banner extends React.Component<BannerProps, BannerState> {
   }
 
   public render(): JSX.Element {
-
     // Default to error styles.
-    let bannerModeCss = stylesheet({ mode: { backgroundColor: color.errorBg, color: color.errorText, } });
+    let bannerModeCss = stylesheet({
+      mode: { backgroundColor: color.errorBg, color: color.errorText },
+    });
     let bannerIcon = <ErrorIcon className={css.icon} />;
     let dialogTitle = 'An error occurred';
 
     switch (this.props.mode) {
       case 'error':
-        bannerModeCss = stylesheet({ mode: { backgroundColor: color.errorBg, color: color.errorText, } });
+        bannerModeCss = stylesheet({
+          mode: { backgroundColor: color.errorBg, color: color.errorText },
+        });
         bannerIcon = <ErrorIcon className={css.icon} />;
         dialogTitle = 'An error occurred';
         break;
       case 'warning':
-        bannerModeCss = stylesheet({ mode: { backgroundColor: color.warningBg, color: color.warningText, } });
+        bannerModeCss = stylesheet({
+          mode: { backgroundColor: color.warningBg, color: color.warningText },
+        });
         bannerIcon = <WarningIcon className={css.icon} />;
         dialogTitle = 'Warning';
         break;
@@ -107,26 +111,32 @@ class Banner extends React.Component<BannerProps, BannerState> {
           {this.props.message}
         </div>
         <div className={commonCss.flex}>
-          {this.props.additionalInfo &&
+          {this.props.additionalInfo && (
             <Button className={css.button} onClick={this._showAdditionalInfo.bind(this)}>
               Details
             </Button>
-          }
-          {this.props.refresh &&
-            <Button className={classes(css.button, css.refreshButton)} onClick={this._refresh.bind(this)}>
+          )}
+          {this.props.refresh && (
+            <Button
+              className={classes(css.button, css.refreshButton)}
+              onClick={this._refresh.bind(this)}
+            >
               Refresh
             </Button>
-          }
+          )}
         </div>
 
-        {this.props.additionalInfo
-          && <Dialog open={this.state.dialogOpen} onClose={this._dialogClosed.bind(this)}>
+        {this.props.additionalInfo && (
+          <Dialog open={this.state.dialogOpen} onClose={this._dialogClosed.bind(this)}>
             <DialogTitle>{dialogTitle}</DialogTitle>
             <DialogContent className={commonCss.prewrap}>{this.props.additionalInfo}</DialogContent>
             <DialogActions>
-              <Button id='dismissDialogBtn' onClick={this._dialogClosed.bind(this)}>Dismiss</Button>
+              <Button id='dismissDialogBtn' onClick={this._dialogClosed.bind(this)}>
+                Dismiss
+              </Button>
             </DialogActions>
-          </Dialog>}
+          </Dialog>
+        )}
       </div>
     );
   }
diff --git a/frontend/src/components/CollapseButton.test.tsx b/frontend/src/components/CollapseButton.test.tsx
index 3afdfba94485..f0302fc3f874 100644
--- a/frontend/src/components/CollapseButton.test.tsx
+++ b/frontend/src/components/CollapseButton.test.tsx
@@ -26,39 +26,57 @@ describe('CollapseButton', () => {
     },
   } as any;
 
-  afterEach(() => compareComponent.state.collapseSections = {});
+  afterEach(() => (compareComponent.state.collapseSections = {}));
 
   it('initial render', () => {
     const tree = shallow(
-      <CollapseButton collapseSections={compareComponent.state.collapseSections}
-        compareSetState={compareComponent.setState} sectionName='testSection' />);
+      <CollapseButton
+        collapseSections={compareComponent.state.collapseSections}
+        compareSetState={compareComponent.setState}
+        sectionName='testSection'
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders the button collapsed if in collapsedSections', () => {
     compareComponent.state.collapseSections.testSection = true;
     const tree = shallow(
-      <CollapseButton collapseSections={compareComponent.state.collapseSections}
-        compareSetState={compareComponent.setState} sectionName='testSection' />);
+      <CollapseButton
+        collapseSections={compareComponent.state.collapseSections}
+        compareSetState={compareComponent.setState}
+        sectionName='testSection'
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('collapses given section when clicked', () => {
     const tree = shallow(
-      <CollapseButton collapseSections={compareComponent.state.collapseSections}
-        compareSetState={compareComponent.setState} sectionName='testSection' />);
+      <CollapseButton
+        collapseSections={compareComponent.state.collapseSections}
+        compareSetState={compareComponent.setState}
+        sectionName='testSection'
+      />,
+    );
     tree.find('WithStyles(Button)').simulate('click');
-    expect(compareComponent.setState).toHaveBeenCalledWith(
-      { collapseSections: { testSection: true } });
+    expect(compareComponent.setState).toHaveBeenCalledWith({
+      collapseSections: { testSection: true },
+    });
   });
 
   it('expands given section when clicked if it is collapsed', () => {
     compareComponent.state.collapseSections.testSection = true;
     const tree = shallow(
-      <CollapseButton collapseSections={compareComponent.state.collapseSections}
-        compareSetState={compareComponent.setState} sectionName='testSection' />);
+      <CollapseButton
+        collapseSections={compareComponent.state.collapseSections}
+        compareSetState={compareComponent.setState}
+        sectionName='testSection'
+      />,
+    );
     tree.find('WithStyles(Button)').simulate('click');
-    expect(compareComponent.setState).toHaveBeenCalledWith(
-      { collapseSections: { testSection: false } });
+    expect(compareComponent.setState).toHaveBeenCalledWith({
+      collapseSections: { testSection: false },
+    });
   });
 });
diff --git a/frontend/src/components/CollapseButton.tsx b/frontend/src/components/CollapseButton.tsx
index adddab6bc644..e0daede3fa0e 100644
--- a/frontend/src/components/CollapseButton.tsx
+++ b/frontend/src/components/CollapseButton.tsx
@@ -44,22 +44,26 @@ interface CollapseButtonProps {
 }
 
 class CollapseButton extends React.Component<CollapseButtonProps> {
-
   public render(): JSX.Element {
     const { collapseSections, compareSetState } = this.props;
     const sectionName = this.props.sectionName;
-    return <div>
-      <Button onClick={() => {
-        collapseSections[sectionName] = !collapseSections[sectionName];
-        compareSetState({ collapseSections });
-      }} title='Expand/Collapse this section' className={css.collapseBtn}>
-        <ExpandedIcon className={classes(
-          css.icon,
-          collapseSections[sectionName] ? css.collapsed : '',
-        )} />
-        {sectionName}
-      </Button>
-    </div>;
+    return (
+      <div>
+        <Button
+          onClick={() => {
+            collapseSections[sectionName] = !collapseSections[sectionName];
+            compareSetState({ collapseSections });
+          }}
+          title='Expand/Collapse this section'
+          className={css.collapseBtn}
+        >
+          <ExpandedIcon
+            className={classes(css.icon, collapseSections[sectionName] ? css.collapsed : '')}
+          />
+          {sectionName}
+        </Button>
+      </div>
+    );
   }
 }
 
diff --git a/frontend/src/components/CompareTable.test.tsx b/frontend/src/components/CompareTable.test.tsx
index e004b65a3334..63f76b39ce20 100644
--- a/frontend/src/components/CompareTable.test.tsx
+++ b/frontend/src/components/CompareTable.test.tsx
@@ -37,18 +37,15 @@ describe('CompareTable', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  const rows = [
-    ['1', '2', '3'],
-    ['4', '5', '6'],
-    ['cell7', 'cell8', 'cell9'],
-  ];
+  const rows = [['1', '2', '3'], ['4', '5', '6'], ['cell7', 'cell8', 'cell9']];
   const xLabels = ['col1', 'col2', 'col3'];
   const yLabels = ['row1', 'row2', 'row3'];
 
   it('logs error if ylabels and rows have different lengths', () => {
     shallow(<CompareTable rows={[rows[0], rows[1]]} xLabels={xLabels} yLabels={yLabels} />);
     expect(consoleSpy).toHaveBeenCalledWith(
-      'Number of rows (2) should match the number of Y labels (3).');
+      'Number of rows (2) should match the number of Y labels (3).',
+    );
   });
 
   it('renders one row with three columns', () => {
diff --git a/frontend/src/components/CompareTable.tsx b/frontend/src/components/CompareTable.tsx
index 26edb18b8f1f..fda6a2ee6010 100644
--- a/frontend/src/components/CompareTable.tsx
+++ b/frontend/src/components/CompareTable.tsx
@@ -60,7 +60,8 @@ class CompareTable extends React.PureComponent<CompareTableProps> {
     const { rows, xLabels, yLabels } = this.props;
     if (rows.length !== yLabels.length) {
       logger.error(
-        `Number of rows (${rows.length}) should match the number of Y labels (${yLabels.length}).`);
+        `Number of rows (${rows.length}) should match the number of Y labels (${yLabels.length}).`,
+      );
     }
     if (!rows || rows.length === 0) {
       return null;
@@ -73,16 +74,24 @@ class CompareTable extends React.PureComponent<CompareTableProps> {
             <td className={css.labelCell} />
             {/* X labels row */}
             {xLabels.map((label, i) => (
-              <td key={i} className={classes(css.cell, css.labelCell)} title={label}>{label}</td>
+              <td key={i} className={classes(css.cell, css.labelCell)} title={label}>
+                {label}
+              </td>
             ))}
           </tr>
           {rows.map((row, i) => (
             <tr key={i} className={css.row}>
               {/* Y label */}
-              <td className={classes(css.cell, css.labelCell)} title={yLabels[i]}>{yLabels[i]}</td>
+              <td className={classes(css.cell, css.labelCell)} title={yLabels[i]}>
+                {yLabels[i]}
+              </td>
 
               {/* Row cells */}
-              {row.map((cell, j) => <td key={j} className={css.cell} title={cell}>{cell}</td>)}
+              {row.map((cell, j) => (
+                <td key={j} className={css.cell} title={cell}>
+                  {cell}
+                </td>
+              ))}
             </tr>
           ))}
         </tbody>
diff --git a/frontend/src/components/CustomTable.test.tsx b/frontend/src/components/CustomTable.test.tsx
index 0daec384f52c..53f9f8a80100 100644
--- a/frontend/src/components/CustomTable.test.tsx
+++ b/frontend/src/components/CustomTable.test.tsx
@@ -102,33 +102,44 @@ describe('CustomTable', () => {
   });
 
   it('renders some columns with equal widths without rows', async () => {
-    const tree = shallow(<CustomTable {...props} columns={[{ label: 'col1' }, { label: 'col2' }]} />);
+    const tree = shallow(
+      <CustomTable {...props} columns={[{ label: 'col1' }, { label: 'col2' }]} />,
+    );
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders without the checkboxes if disableSelection is true', async () => {
-    const tree = shallow(<CustomTable {...props} rows={rows} columns={columns}
-      disableSelection={true} />);
+    const tree = shallow(
+      <CustomTable {...props} rows={rows} columns={columns} disableSelection={true} />,
+    );
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders some columns with descending sort order on first column', async () => {
-    const tree = shallow(<CustomTable {...props} initialSortOrder='desc'
-      columns={[{ label: 'col1', sortKey: 'col1sortkey' }, { label: 'col2' }]} />);
+    const tree = shallow(
+      <CustomTable
+        {...props}
+        initialSortOrder='desc'
+        columns={[{ label: 'col1', sortKey: 'col1sortkey' }, { label: 'col2' }]}
+      />,
+    );
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders columns with specified widths', async () => {
-    const testcolumns = [{
-      flex: 3,
-      label: 'col1',
-    }, {
-      flex: 1,
-      label: 'col2',
-    }];
+    const testcolumns = [
+      {
+        flex: 3,
+        label: 'col1',
+      },
+      {
+        flex: 1,
+        label: 'col2',
+      },
+    ];
     const tree = shallow(<CustomTable {...props} columns={testcolumns} />);
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
@@ -147,15 +158,18 @@ describe('CustomTable', () => {
   });
 
   it('calls reload function with sort key of clicked column, while keeping same page', () => {
-    const testcolumns = [{
-      flex: 3,
-      label: 'col1',
-      sortKey: 'col1sortkey',
-    }, {
-      flex: 1,
-      label: 'col2',
-      sortKey: 'col2sortkey',
-    }];
+    const testcolumns = [
+      {
+        flex: 3,
+        label: 'col1',
+        sortKey: 'col1sortkey',
+      },
+      {
+        flex: 1,
+        label: 'col2',
+        sortKey: 'col2sortkey',
+      },
+    ];
     const reload = jest.fn();
     const tree = shallow(<CustomTable {...props} reload={reload} columns={testcolumns} />);
     expect(reload).toHaveBeenLastCalledWith({
@@ -166,7 +180,10 @@ describe('CustomTable', () => {
       sortBy: 'col1sortkey desc',
     });
 
-    tree.find('WithStyles(TableSortLabel)').at(1).simulate('click');
+    tree
+      .find('WithStyles(TableSortLabel)')
+      .at(1)
+      .simulate('click');
     expect(reload).toHaveBeenLastCalledWith({
       filter: '',
       orderAscending: true,
@@ -177,15 +194,18 @@ describe('CustomTable', () => {
   });
 
   it('calls reload function with same sort key in reverse order if same column is clicked twice', () => {
-    const testcolumns = [{
-      flex: 3,
-      label: 'col1',
-      sortKey: 'col1sortkey',
-    }, {
-      flex: 1,
-      label: 'col2',
-      sortKey: 'col2sortkey',
-    }];
+    const testcolumns = [
+      {
+        flex: 3,
+        label: 'col1',
+        sortKey: 'col1sortkey',
+      },
+      {
+        flex: 1,
+        label: 'col2',
+        sortKey: 'col2sortkey',
+      },
+    ];
     const reload = jest.fn();
     const tree = shallow(<CustomTable {...props} reload={reload} columns={testcolumns} />);
     expect(reload).toHaveBeenLastCalledWith({
@@ -196,7 +216,10 @@ describe('CustomTable', () => {
       sortBy: 'col1sortkey desc',
     });
 
-    tree.find('WithStyles(TableSortLabel)').at(1).simulate('click');
+    tree
+      .find('WithStyles(TableSortLabel)')
+      .at(1)
+      .simulate('click');
     expect(reload).toHaveBeenLastCalledWith({
       filter: '',
       orderAscending: true,
@@ -205,7 +228,10 @@ describe('CustomTable', () => {
       sortBy: 'col2sortkey',
     });
     tree.setProps({ sortBy: 'col1sortkey' });
-    tree.find('WithStyles(TableSortLabel)').at(1).simulate('click');
+    tree
+      .find('WithStyles(TableSortLabel)')
+      .at(1)
+      .simulate('click');
     expect(reload).toHaveBeenLastCalledWith({
       filter: '',
       orderAscending: false,
@@ -216,13 +242,16 @@ describe('CustomTable', () => {
   });
 
   it('does not call reload if clicked column has no sort key', () => {
-    const testcolumns = [{
-      flex: 3,
-      label: 'col1',
-    }, {
-      flex: 1,
-      label: 'col2',
-    }];
+    const testcolumns = [
+      {
+        flex: 3,
+        label: 'col1',
+      },
+      {
+        flex: 1,
+        label: 'col2',
+      },
+    ];
     const reload = jest.fn();
     const tree = shallow(<CustomTable {...props} reload={reload} columns={testcolumns} />);
     expect(reload).toHaveBeenLastCalledWith({
@@ -233,7 +262,10 @@ describe('CustomTable', () => {
       sortBy: '',
     });
 
-    tree.find('WithStyles(TableSortLabel)').at(0).simulate('click');
+    tree
+      .find('WithStyles(TableSortLabel)')
+      .at(0)
+      .simulate('click');
     expect(reload).toHaveBeenLastCalledWith({
       filter: '',
       orderAscending: false,
@@ -246,14 +278,16 @@ describe('CustomTable', () => {
   it('logs error if row has more cells than columns', () => {
     shallow(<CustomTable {...props} rows={rows} />);
     expect(consoleSpy).toHaveBeenLastCalledWith(
-      'Rows must have the same number of cells defined in columns');
+      'Rows must have the same number of cells defined in columns',
+    );
   });
 
   it('logs error if row has fewer cells than columns', () => {
     const testcolumns = [{ label: 'col1' }, { label: 'col2' }, { label: 'col3' }];
     shallow(<CustomTable {...props} rows={rows} columns={testcolumns} />);
     expect(consoleSpy).toHaveBeenLastCalledWith(
-      'Rows must have the same number of cells defined in columns');
+      'Rows must have the same number of cells defined in columns',
+    );
   });
 
   it('renders some rows', async () => {
@@ -270,17 +304,30 @@ describe('CustomTable', () => {
 
   it('calls update selection callback when items are selected', () => {
     const spy = jest.fn();
-    const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />);
-    tree.find('.row').at(0).simulate('click', { stopPropagation: () => null });
+    const tree = shallow(
+      <CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />,
+    );
+    tree
+      .find('.row')
+      .at(0)
+      .simulate('click', { stopPropagation: () => null });
     expect(spy).toHaveBeenLastCalledWith(['row1']);
   });
 
   it('does not add items to selection when multiple rows are clicked', () => {
     // Keeping track of selection is the parent's job.
     const spy = jest.fn();
-    const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />);
-    tree.find('.row').at(0).simulate('click', { stopPropagation: () => null });
-    tree.find('.row').at(1).simulate('click', { stopPropagation: () => null });
+    const tree = shallow(
+      <CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />,
+    );
+    tree
+      .find('.row')
+      .at(0)
+      .simulate('click', { stopPropagation: () => null });
+    tree
+      .find('.row')
+      .at(1)
+      .simulate('click', { stopPropagation: () => null });
     expect(spy).toHaveBeenLastCalledWith(['row2']);
   });
 
@@ -288,57 +335,108 @@ describe('CustomTable', () => {
     // Keeping track of selection is the parent's job.
     const selectedIds = ['previouslySelectedRow'];
     const spy = jest.fn();
-    const tree = shallow(<CustomTable {...props} selectedIds={selectedIds} rows={rows} columns={columns} updateSelection={spy} />);
-    tree.find('.row').at(0).simulate('click', { stopPropagation: () => null });
+    const tree = shallow(
+      <CustomTable
+        {...props}
+        selectedIds={selectedIds}
+        rows={rows}
+        columns={columns}
+        updateSelection={spy}
+      />,
+    );
+    tree
+      .find('.row')
+      .at(0)
+      .simulate('click', { stopPropagation: () => null });
     expect(spy).toHaveBeenLastCalledWith(['previouslySelectedRow', 'row1']);
   });
 
   it('does not call selectionCallback if disableSelection is true', () => {
     const spy = jest.fn();
-    const tree = shallow(<CustomTable {...props} rows={rows} columns={columns}
-      updateSelection={spy} disableSelection={true} />);
-    tree.find('.row').at(0).simulate('click', { stopPropagation: () => null });
-    tree.find('.row').at(1).simulate('click', { stopPropagation: () => null });
+    const tree = shallow(
+      <CustomTable
+        {...props}
+        rows={rows}
+        columns={columns}
+        updateSelection={spy}
+        disableSelection={true}
+      />,
+    );
+    tree
+      .find('.row')
+      .at(0)
+      .simulate('click', { stopPropagation: () => null });
+    tree
+      .find('.row')
+      .at(1)
+      .simulate('click', { stopPropagation: () => null });
     expect(spy).not.toHaveBeenCalled();
   });
 
   it('handles no updateSelection method being passed', () => {
     const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} />);
-    tree.find('.row').at(0).simulate('click', { stopPropagation: () => null });
-    tree.find('.columnName WithStyles(Checkbox)').at(0).simulate('change', {
-      target: { checked: true },
-    });
+    tree
+      .find('.row')
+      .at(0)
+      .simulate('click', { stopPropagation: () => null });
+    tree
+      .find('.columnName WithStyles(Checkbox)')
+      .at(0)
+      .simulate('change', {
+        target: { checked: true },
+      });
   });
 
   it('selects all items when head checkbox is clicked', () => {
     const spy = jest.fn();
-    const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />);
-    tree.find('.columnName WithStyles(Checkbox)').at(0).simulate('change', {
-      target: { checked: true },
-    });
+    const tree = shallow(
+      <CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />,
+    );
+    tree
+      .find('.columnName WithStyles(Checkbox)')
+      .at(0)
+      .simulate('change', {
+        target: { checked: true },
+      });
     expect(spy).toHaveBeenLastCalledWith(['row1', 'row2']);
   });
 
   it('unselects all items when head checkbox is clicked and all items are selected', () => {
     const spy = jest.fn();
-    const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />);
-    tree.find('.columnName WithStyles(Checkbox)').at(0).simulate('change', {
-      target: { checked: true },
-    });
+    const tree = shallow(
+      <CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />,
+    );
+    tree
+      .find('.columnName WithStyles(Checkbox)')
+      .at(0)
+      .simulate('change', {
+        target: { checked: true },
+      });
     expect(spy).toHaveBeenLastCalledWith(['row1', 'row2']);
-    tree.find('.columnName WithStyles(Checkbox)').at(0).simulate('change', {
-      target: { checked: false },
-    });
+    tree
+      .find('.columnName WithStyles(Checkbox)')
+      .at(0)
+      .simulate('change', {
+        target: { checked: false },
+      });
     expect(spy).toHaveBeenLastCalledWith([]);
   });
 
   it('selects all items if one item was checked then the head checkbox is clicked', () => {
     const spy = jest.fn();
-    const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />);
-    tree.find('.row').at(0).simulate('click', { stopPropagation: () => null });
-    tree.find('.columnName WithStyles(Checkbox)').at(0).simulate('change', {
-      target: { checked: true },
-    });
+    const tree = shallow(
+      <CustomTable {...props} rows={rows} columns={columns} updateSelection={spy} />,
+    );
+    tree
+      .find('.row')
+      .at(0)
+      .simulate('click', { stopPropagation: () => null });
+    tree
+      .find('.columnName WithStyles(Checkbox)')
+      .at(0)
+      .simulate('change', {
+        target: { checked: true },
+      });
     expect(spy).toHaveBeenLastCalledWith(['row1', 'row2']);
   });
 
@@ -347,8 +445,20 @@ describe('CustomTable', () => {
     // work here because the parent is where the selectedIds state is kept
     const selectedIds = ['previouslySelectedRow'];
     const spy = jest.fn();
-    const tree = shallow(<CustomTable {...props} useRadioButtons={true} selectedIds={selectedIds} rows={rows} columns={columns} updateSelection={spy} />);
-    tree.find('.row').at(0).simulate('click', { stopPropagation: () => null });
+    const tree = shallow(
+      <CustomTable
+        {...props}
+        useRadioButtons={true}
+        selectedIds={selectedIds}
+        rows={rows}
+        columns={columns}
+        updateSelection={spy}
+      />,
+    );
+    tree
+      .find('.row')
+      .at(0)
+      .simulate('click', { stopPropagation: () => null });
     expect(spy).toHaveBeenLastCalledWith(['row1']);
   });
 
@@ -358,8 +468,18 @@ describe('CustomTable', () => {
     const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} reload={spy} />);
     await TestUtils.flushPromises();
     expect(tree.state()).toHaveProperty('maxPageIndex', 0);
-    expect(tree.find('WithStyles(IconButton)').at(0).prop('disabled')).toBeTruthy();
-    expect(tree.find('WithStyles(IconButton)').at(1).prop('disabled')).toBeTruthy();
+    expect(
+      tree
+        .find('WithStyles(IconButton)')
+        .at(0)
+        .prop('disabled'),
+    ).toBeTruthy();
+    expect(
+      tree
+        .find('WithStyles(IconButton)')
+        .at(1)
+        .prop('disabled'),
+    ).toBeTruthy();
   });
 
   it('enables next page button if next page token is given', async () => {
@@ -368,8 +488,18 @@ describe('CustomTable', () => {
     const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} reload={spy} />);
     await reloadResult;
     expect(tree.state()).toHaveProperty('maxPageIndex', Number.MAX_SAFE_INTEGER);
-    expect(tree.find('WithStyles(IconButton)').at(0).prop('disabled')).toBeTruthy();
-    expect(tree.find('WithStyles(IconButton)').at(1).prop('disabled')).not.toBeTruthy();
+    expect(
+      tree
+        .find('WithStyles(IconButton)')
+        .at(0)
+        .prop('disabled'),
+    ).toBeTruthy();
+    expect(
+      tree
+        .find('WithStyles(IconButton)')
+        .at(1)
+        .prop('disabled'),
+    ).not.toBeTruthy();
   });
 
   it('calls reload with next page token when next page button is clicked', async () => {
@@ -378,7 +508,10 @@ describe('CustomTable', () => {
     const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} reload={spy} />);
     await TestUtils.flushPromises();
 
-    tree.find('WithStyles(IconButton)').at(1).simulate('click');
+    tree
+      .find('WithStyles(IconButton)')
+      .at(1)
+      .simulate('click');
     expect(spy).toHaveBeenLastCalledWith({
       filter: '',
       orderAscending: false,
@@ -394,7 +527,10 @@ describe('CustomTable', () => {
     const tree = shallow(<CustomTable {...props} rows={[]} columns={columns} reload={spy} />);
     await TestUtils.flushPromises();
 
-    tree.find('WithStyles(IconButton)').at(1).simulate('click');
+    tree
+      .find('WithStyles(IconButton)')
+      .at(1)
+      .simulate('click');
     await TestUtils.flushPromises();
     expect(spy).toHaveBeenLastCalledWith({
       filter: '',
@@ -406,7 +542,12 @@ describe('CustomTable', () => {
     expect(tree.state()).toHaveProperty('currentPage', 1);
     tree.setProps({ rows: [rows[1]] });
     expect(tree).toMatchSnapshot();
-    expect(tree.find('WithStyles(IconButton)').at(0).prop('disabled')).not.toBeTruthy();
+    expect(
+      tree
+        .find('WithStyles(IconButton)')
+        .at(0)
+        .prop('disabled'),
+    ).not.toBeTruthy();
   });
 
   it('renders new rows after clicking previous page, and enables next page button', async () => {
@@ -415,10 +556,16 @@ describe('CustomTable', () => {
     const tree = shallow(<CustomTable {...props} rows={[]} columns={columns} reload={spy} />);
     await reloadResult;
 
-    tree.find('WithStyles(IconButton)').at(1).simulate('click');
+    tree
+      .find('WithStyles(IconButton)')
+      .at(1)
+      .simulate('click');
     await reloadResult;
 
-    tree.find('WithStyles(IconButton)').at(0).simulate('click');
+    tree
+      .find('WithStyles(IconButton)')
+      .at(0)
+      .simulate('click');
     await TestUtils.flushPromises();
     expect(spy).toHaveBeenLastCalledWith({
       filter: '',
@@ -429,7 +576,12 @@ describe('CustomTable', () => {
     });
 
     tree.setProps({ rows });
-    expect(tree.find('WithStyles(IconButton)').at(0).prop('disabled')).toBeTruthy();
+    expect(
+      tree
+        .find('WithStyles(IconButton)')
+        .at(0)
+        .prop('disabled'),
+    ).toBeTruthy();
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
   });
@@ -471,8 +623,9 @@ describe('CustomTable', () => {
   it('renders a collapsed row', async () => {
     const row = { ...rows[0] };
     row.expandState = ExpandState.COLLAPSED;
-    const tree = shallow(<CustomTable {...props} rows={[row]} columns={columns}
-      getExpandComponent={() => null} />);
+    const tree = shallow(
+      <CustomTable {...props} rows={[row]} columns={columns} getExpandComponent={() => null} />,
+    );
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
   });
@@ -480,8 +633,15 @@ describe('CustomTable', () => {
   it('renders a collapsed row when selection is disabled', async () => {
     const row = { ...rows[0] };
     row.expandState = ExpandState.COLLAPSED;
-    const tree = shallow(<CustomTable {...props} rows={[row]} columns={columns}
-      getExpandComponent={() => null} disableSelection={true} />);
+    const tree = shallow(
+      <CustomTable
+        {...props}
+        rows={[row]}
+        columns={columns}
+        getExpandComponent={() => null}
+        disableSelection={true}
+      />,
+    );
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
   });
@@ -497,8 +657,14 @@ describe('CustomTable', () => {
   it('renders an expanded row with expanded component below it', async () => {
     const row = { ...rows[0] };
     row.expandState = ExpandState.EXPANDED;
-    const tree = shallow(<CustomTable {...props} rows={[row]} columns={columns}
-      getExpandComponent={() => <span>Hello World</span>} />);
+    const tree = shallow(
+      <CustomTable
+        {...props}
+        rows={[row]}
+        columns={columns}
+        getExpandComponent={() => <span>Hello World</span>}
+      />,
+    );
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
   });
@@ -508,15 +674,27 @@ describe('CustomTable', () => {
     const toggleSpy = jest.fn();
     const stopPropagationSpy = jest.fn();
     row.expandState = ExpandState.EXPANDED;
-    const tree = shallow(<CustomTable {...props} rows={[row, row, row]} columns={columns}
-      getExpandComponent={() => <span>Hello World</span>} toggleExpansion={toggleSpy} />);
-    tree.find('.' + css.expandButton).at(1).simulate('click', { stopPropagation: stopPropagationSpy });
+    const tree = shallow(
+      <CustomTable
+        {...props}
+        rows={[row, row, row]}
+        columns={columns}
+        getExpandComponent={() => <span>Hello World</span>}
+        toggleExpansion={toggleSpy}
+      />,
+    );
+    tree
+      .find('.' + css.expandButton)
+      .at(1)
+      .simulate('click', { stopPropagation: stopPropagationSpy });
     expect(toggleSpy).toHaveBeenCalledWith(1);
     expect(stopPropagationSpy).toHaveBeenCalledWith();
   });
 
   it('renders a table with sorting disabled', async () => {
-    const tree = shallow(<CustomTable {...props} rows={rows} columns={columns} disableSorting={true} />);
+    const tree = shallow(
+      <CustomTable {...props} rows={rows} columns={columns} disableSorting={true} />,
+    );
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
   });
@@ -531,17 +709,23 @@ describe('CustomTable', () => {
 
   it('reloads the table with the encoded filter object', async () => {
     const reload = jest.fn();
-    const tree = shallow(<CustomTableTest {...props} reload={reload} rows={rows} columns={columns} />);
+    const tree = shallow(
+      <CustomTableTest {...props} reload={reload} rows={rows} columns={columns} />,
+    );
     // lodash's debounce function doesn't play nice with Jest, so we skip the handleChange function
     // and call _requestFilter directly.
     (tree.instance() as CustomTableTest)._requestFilter('test filter');
-    const expectedEncodedFilter = encodeURIComponent(JSON.stringify({
-      predicates: [{
-        key: 'name',
-        op: PredicateOp.ISSUBSTRING,
-        string_value: 'test filter',
-      }]
-    }));
+    const expectedEncodedFilter = encodeURIComponent(
+      JSON.stringify({
+        predicates: [
+          {
+            key: 'name',
+            op: PredicateOp.ISSUBSTRING,
+            string_value: 'test filter',
+          },
+        ],
+      }),
+    );
     expect(tree.state('filterStringEncoded')).toEqual(expectedEncodedFilter);
     expect(reload).toHaveBeenLastCalledWith({
       filter: expectedEncodedFilter,
diff --git a/frontend/src/components/CustomTable.tsx b/frontend/src/components/CustomTable.tsx
index 804f0411d5df..cf4252c306af 100644
--- a/frontend/src/components/CustomTable.tsx
+++ b/frontend/src/components/CustomTable.tsx
@@ -89,6 +89,9 @@ export const css = stylesheet({
     fontWeight: 'bold',
     letterSpacing: 0.25,
     marginRight: 20,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
   },
   emptyMessage: {
     padding: 20,
@@ -165,7 +168,7 @@ export const css = stylesheet({
   },
   selectionToggle: {
     marginRight: 12,
-    minWidth: 32,
+    overflow: 'initial', // Resets overflow from 'hidden'
   },
   verticalAlignInitial: {
     verticalAlign: 'initial',
@@ -206,8 +209,10 @@ interface CustomTableState {
 export default class CustomTable extends React.Component<CustomTableProps, CustomTableState> {
   private _isMounted = true;
 
-  private _debouncedFilterRequest =
-    debounce((filterString: string) => this._requestFilter(filterString), 300);
+  private _debouncedFilterRequest = debounce(
+    (filterString: string) => this._requestFilter(filterString),
+    300,
+  );
 
   constructor(props: CustomTableProps) {
     super(props);
@@ -219,8 +224,8 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
       isBusy: false,
       maxPageIndex: Number.MAX_SAFE_INTEGER,
       pageSize: 10,
-      sortBy: props.initialSortColumn ||
-        (props.columns.length ? props.columns[0].sortKey || '' : ''),
+      sortBy:
+        props.initialSortColumn || (props.columns.length ? props.columns[0].sortKey || '' : ''),
       sortOrder: props.initialSortOrder || 'desc',
       tokenList: [''],
     };
@@ -231,8 +236,9 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
       // This should be impossible to reach
       return;
     }
-    const selectedIds =
-      (event.target as CheckboxProps).checked ? this.props.rows.map((v) => v.id) : [];
+    const selectedIds = (event.target as CheckboxProps).checked
+      ? this.props.rows.map(v => v.id)
+      : [];
     if (this.props.updateSelection) {
       this.props.updateSelection(selectedIds);
     }
@@ -249,9 +255,10 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     } else {
       const selectedIds = this.props.selectedIds || [];
       const selectedIndex = selectedIds.indexOf(id);
-      newSelected = selectedIndex === -1 ?
-        selectedIds.concat(id) :
-        selectedIds.slice(0, selectedIndex).concat(selectedIds.slice(selectedIndex + 1));
+      newSelected =
+        selectedIndex === -1
+          ? selectedIds.concat(id)
+          : selectedIds.slice(0, selectedIndex).concat(selectedIds.slice(selectedIndex + 1));
     }
 
     if (this.props.updateSelection) {
@@ -277,18 +284,23 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
   public render(): JSX.Element {
     const { filterString, pageSize, sortBy, sortOrder } = this.state;
     const numSelected = (this.props.selectedIds || []).length;
-    const totalFlex = this.props.columns.reduce((total, c) => total += (c.flex || 1), 0);
-    const widths = this.props.columns.map(c => (c.flex || 1) / totalFlex * 100);
+    const totalFlex = this.props.columns.reduce((total, c) => (total += c.flex || 1), 0);
+    const widths = this.props.columns.map(c => ((c.flex || 1) / totalFlex) * 100);
 
     return (
       <div className={commonCss.pageOverflowHidden}>
-
         {/* Filter/Search bar */}
         {!this.props.noFilterBox && (
           <div>
-            <Input id='tableFilterBox' label={this.props.filterLabel || 'Filter'} height={48} maxWidth={'100%'}
-              className={css.filterBox} InputLabelProps={{ classes: { root: css.noMargin } }}
-              onChange={this.handleFilterChange} value={filterString}
+            <Input
+              id='tableFilterBox'
+              label={this.props.filterLabel || 'Filter'}
+              height={48}
+              maxWidth={'100%'}
+              className={css.filterBox}
+              InputLabelProps={{ classes: { root: css.noMargin } }}
+              onChange={this.handleFilterChange}
+              value={filterString}
               variant='outlined'
               InputProps={{
                 classes: {
@@ -299,38 +311,49 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
                   <InputAdornment position='end'>
                     <FilterIcon style={{ color: color.lowContrast, paddingRight: 16 }} />
                   </InputAdornment>
-                )
-              }} />
+                ),
+              }}
+            />
           </div>
         )}
 
         {/* Header */}
-        <div className={classes(
-          css.header, (this.props.disableSelection || this.props.useRadioButtons) && padding(20, 'l'))}>
-          {(this.props.disableSelection !== true && this.props.useRadioButtons !== true) && (
-            <div className={classes(css.columnName, css.cell, css.selectionToggle)}>
-              <Checkbox indeterminate={!!numSelected && numSelected < this.props.rows.length}
-                color='primary' checked={!!numSelected && numSelected === this.props.rows.length}
-                onChange={this.handleSelectAllClick.bind(this)} />
-            </div>
-          )}
-          {/* Shift cells to account for expand button */}
-          {!!this.props.getExpandComponent && (
-            <Separator orientation='horizontal' units={40} />
-          )}
+        <div className={classes(css.header, this.props.disableSelection && padding(20, 'l'))}>
+          {// Called as function to avoid breaking shallow rendering tests.
+          HeaderRowSelectionSection({
+            disableSelection: this.props.disableSelection,
+            indeterminate: !!numSelected && numSelected < this.props.rows.length,
+            isSelected: !!numSelected && numSelected === this.props.rows.length,
+            onSelectAll: this.handleSelectAllClick.bind(this),
+            showExpandButton: !!this.props.getExpandComponent,
+            useRadioButtons: this.props.useRadioButtons,
+          })}
           {this.props.columns.map((col, i) => {
             const isColumnSortable = !!this.props.columns[i].sortKey;
             const isCurrentSortColumn = sortBy === this.props.columns[i].sortKey;
             return (
-              <div key={i} style={{ width: widths[i] + '%' }}
-                className={css.columnName}>
-                {this.props.disableSorting === true && <div>{col.label}</div>}
+              <div
+                key={i}
+                style={{ width: widths[i] + '%' }}
+                className={css.columnName}
+                title={
+                  // Browser shows an info popup on hover.
+                  // It helps when there's not enough space for full text.
+                  col.label
+                }
+              >
+                {this.props.disableSorting === true && col.label}
                 {!this.props.disableSorting && (
-                  <Tooltip title={isColumnSortable ? 'Sort' : 'Cannot sort by this column'}
-                    enterDelay={300}>
-                    <TableSortLabel active={isCurrentSortColumn} className={commonCss.ellipsis}
+                  <Tooltip
+                    title={isColumnSortable ? 'Sort' : 'Cannot sort by this column'}
+                    enterDelay={300}
+                  >
+                    <TableSortLabel
+                      active={isCurrentSortColumn}
+                      className={commonCss.ellipsis}
                       direction={isColumnSortable ? sortOrder : undefined}
-                      onClick={() => this._requestSort(this.props.columns[i].sortKey)}>
+                      onClick={() => this._requestSort(this.props.columns[i].sortKey)}
+                    >
                       {col.label}
                     </TableSortLabel>
                   </Tooltip>
@@ -343,11 +366,16 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
         {/* Body */}
         <div className={commonCss.scrollContainer} style={{ minHeight: 60 }}>
           {/* Busy experience */}
-          {this.state.isBusy && (<React.Fragment>
-            <div className={commonCss.busyOverlay} />
-            <CircularProgress size={25} className={commonCss.absoluteCenter}
-              style={{ zIndex: zIndex.BUSY_OVERLAY }} />
-          </React.Fragment>)}
+          {this.state.isBusy && (
+            <React.Fragment>
+              <div className={commonCss.busyOverlay} />
+              <CircularProgress
+                size={25}
+                className={commonCss.absoluteCenter}
+                style={{ zIndex: zIndex.BUSY_OVERLAY }}
+              />
+            </React.Fragment>
+          )}
 
           {/* Empty experience */}
           {this.props.rows.length === 0 && !!this.props.emptyMessage && !this.state.isBusy && (
@@ -358,49 +386,42 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
               logger.error('Rows must have the same number of cells defined in columns');
               return null;
             }
-            return (<div className={classes(css.expandableContainer,
-              row.expandState === ExpandState.EXPANDED && css.expandedContainer)} key={i}>
-              <div role='checkbox' tabIndex={-1} className={
-                classes(
-                  'tableRow',
-                  css.row,
-                  this.props.disableSelection === true && padding(20, 'l'),
-                  this.isSelected(row.id) && css.selected,
-                  row.expandState === ExpandState.EXPANDED && css.expandedRow
-                )}
-                onClick={e => this.handleClick(e, row.id)}>
-                {/* Expansion toggle button */}
-                {((this.props.disableSelection !== true || !!this.props.getExpandComponent) && row.expandState !== ExpandState.NONE) && (
-                  <div className={classes(css.cell, css.selectionToggle)}>
-                    {/* If using checkboxes */}
-                    {(this.props.disableSelection !== true && this.props.useRadioButtons !== true) && (
-                      <Checkbox color='primary' checked={this.isSelected(row.id)} />)}
-                    {/* If using radio buttons */}
-                    {(this.props.disableSelection !== true && this.props.useRadioButtons) && (
-                      <Radio color='primary' checked={this.isSelected(row.id)} />)}
-                    {!!this.props.getExpandComponent && (
-                      <IconButton className={classes(css.expandButton,
-                        row.expandState === ExpandState.EXPANDED && css.expandButtonExpanded)}
-                        onClick={(e) => this._expandButtonToggled(e, i)}>
-                        <ArrowRight />
-                      </IconButton>
-                    )}
-                  </div>
+            return (
+              <div
+                className={classes(
+                  css.expandableContainer,
+                  row.expandState === ExpandState.EXPANDED && css.expandedContainer,
                 )}
-
-                {/* Placeholder for non-expandable rows */}
-                {row.expandState === ExpandState.NONE && (
-                  <div className={css.expandButtonPlaceholder} />
+                key={i}
+              >
+                <div
+                  role='checkbox'
+                  tabIndex={-1}
+                  className={classes(
+                    'tableRow',
+                    css.row,
+                    this.props.disableSelection === true && padding(20, 'l'),
+                    this.isSelected(row.id) && css.selected,
+                    row.expandState === ExpandState.EXPANDED && css.expandedRow,
+                  )}
+                  onClick={e => this.handleClick(e, row.id)}
+                >
+                  {// Called as function to avoid breaking shallow rendering tests.
+                  BodyRowSelectionSection({
+                    disableSelection: this.props.disableSelection,
+                    expandState: row.expandState,
+                    isSelected: this.isSelected(row.id),
+                    onExpand: e => this._expandButtonToggled(e, i),
+                    showExpandButton: !!this.props.getExpandComponent,
+                    useRadioButtons: this.props.useRadioButtons,
+                  })}
+                  <CustomTableRow row={row} columns={this.props.columns} />
+                </div>
+                {row.expandState === ExpandState.EXPANDED && this.props.getExpandComponent && (
+                  <div>{this.props.getExpandComponent(i)}</div>
                 )}
-
-                {<CustomTableRow row={row} columns={this.props.columns} />}
               </div>
-              {row.expandState === ExpandState.EXPANDED && this.props.getExpandComponent && (
-                <div>
-                  {this.props.getExpandComponent(i)}
-                </div>
-              )}
-            </div>);
+            );
           })}
         </div>
 
@@ -408,20 +429,29 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
         {!this.props.disablePaging && (
           <div className={css.footer}>
             <span className={padding(10, 'r')}>Rows per page:</span>
-            <TextField select={true} variant='standard' className={css.rowsPerPage}
+            <TextField
+              select={true}
+              variant='standard'
+              className={css.rowsPerPage}
               classes={{ root: css.verticalAlignInitial }}
-              InputProps={{ disableUnderline: true }} onChange={this._requestRowsPerPage.bind(this)}
-              value={pageSize}>
+              InputProps={{ disableUnderline: true }}
+              onChange={this._requestRowsPerPage.bind(this)}
+              value={pageSize}
+            >
               {[10, 20, 50, 100].map((size, i) => (
-                <MenuItem key={i} value={size}>{size}</MenuItem>
+                <MenuItem key={i} value={size}>
+                  {size}
+                </MenuItem>
               ))}
             </TextField>
 
             <IconButton onClick={() => this._pageChanged(-1)} disabled={!this.state.currentPage}>
               <ChevronLeft />
             </IconButton>
-            <IconButton onClick={() => this._pageChanged(1)}
-              disabled={this.state.currentPage >= this.state.maxPageIndex}>
+            <IconButton
+              onClick={() => this._pageChanged(1)}
+              disabled={this.state.currentPage >= this.state.maxPageIndex}
+            >
               <ChevronRight />
             </IconButton>
           </div>
@@ -432,13 +462,16 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
 
   public async reload(loadRequest?: ListRequest): Promise<string> {
     // Override the current state with incoming request
-    const request: ListRequest = Object.assign({
-      filter: this.state.filterStringEncoded,
-      orderAscending: this.state.sortOrder === 'asc',
-      pageSize: this.state.pageSize,
-      pageToken: this.state.tokenList[this.state.currentPage],
-      sortBy: this.state.sortBy,
-    }, loadRequest);
+    const request: ListRequest = Object.assign(
+      {
+        filter: this.state.filterStringEncoded,
+        orderAscending: this.state.sortOrder === 'asc',
+        pageSize: this.state.pageSize,
+        pageToken: this.state.tokenList[this.state.currentPage],
+        sortBy: this.state.sortBy,
+      },
+      loadRequest,
+    );
 
     let result = '';
     try {
@@ -466,9 +499,9 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     // Set state here so that the UI will be updated even if the actual filter request is debounced
     this.setStateSafe(
       { filterString: value } as any,
-      async () => await this._debouncedFilterRequest(value as string)
+      async () => await this._debouncedFilterRequest(value as string),
     );
-  }
+  };
 
   // Exposed for testing
   protected async _requestFilter(filterString?: string): Promise<void> {
@@ -479,12 +512,14 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
 
   private _createAndEncodeFilter(filterString: string): string {
     const filter: ApiFilter = {
-      predicates: [{
-        // TODO: remove this hardcoding once more sophisticated filtering is supported
-        key: 'name',
-        op: PredicateOp.ISSUBSTRING,
-        string_value: filterString,
-      }],
+      predicates: [
+        {
+          // TODO: remove this hardcoding once more sophisticated filtering is supported
+          key: 'name',
+          op: PredicateOp.ISSUBSTRING,
+          string_value: filterString,
+        },
+      ],
     };
     return encodeURIComponent(JSON.stringify(filter));
   }
@@ -500,12 +535,11 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
       // Set the sort column to the provided column if it's different, and
       // invert the sort order it if it's the same column
       const sortOrder =
-        this.state.sortBy === sortBy
-          ? (this.state.sortOrder === 'asc' ? 'desc' : 'asc')
-          : 'asc';
+        this.state.sortBy === sortBy ? (this.state.sortOrder === 'asc' ? 'desc' : 'asc') : 'asc';
       this.setStateSafe({ sortOrder, sortBy }, async () => {
         this._resetToFirstPage(
-          await this.reload({ pageToken: '', orderAscending: sortOrder === 'asc', sortBy }));
+          await this.reload({ pageToken: '', orderAscending: sortOrder === 'asc', sortBy }),
+        );
       });
     }
   }
@@ -563,3 +597,91 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     }
   }
 }
+
+interface SelectionSectionCommonProps {
+  disableSelection?: boolean;
+  isSelected: boolean;
+  showExpandButton: boolean;
+  useRadioButtons?: boolean;
+}
+
+interface HeaderRowSelectionSectionProps extends SelectionSectionCommonProps {
+  indeterminate?: boolean;
+  onSelectAll: React.ChangeEventHandler;
+}
+const HeaderRowSelectionSection: React.FC<HeaderRowSelectionSectionProps> = ({
+  disableSelection,
+  indeterminate,
+  isSelected,
+  onSelectAll,
+  showExpandButton,
+  useRadioButtons,
+}) => {
+  const nonEmpty = disableSelection !== true || showExpandButton;
+  if (!nonEmpty) {
+    return null;
+  }
+
+  return (
+    <div className={classes(css.columnName, css.cell, css.selectionToggle)}>
+      {/* If using checkboxes */}
+      {disableSelection !== true && useRadioButtons !== true && (
+        <Checkbox
+          indeterminate={indeterminate}
+          color='primary'
+          checked={isSelected}
+          onChange={onSelectAll}
+        />
+      )}
+      {/* If using radio buttons */}
+      {disableSelection !== true && useRadioButtons && (
+        // Placeholder for radio button horizontal space.
+        <Separator orientation='horizontal' units={42} />
+      )}
+      {showExpandButton && <Separator orientation='horizontal' units={40} />}
+    </div>
+  );
+};
+
+interface BodyRowSelectionSectionProps extends SelectionSectionCommonProps {
+  expandState?: ExpandState;
+  onExpand: React.MouseEventHandler;
+}
+const BodyRowSelectionSection: React.FC<BodyRowSelectionSectionProps> = ({
+  disableSelection,
+  expandState,
+  isSelected,
+  onExpand,
+  showExpandButton,
+  useRadioButtons,
+}) => (
+  <>
+    {/* Expansion toggle button */}
+    {(disableSelection !== true || showExpandButton) && expandState !== ExpandState.NONE && (
+      <div className={classes(css.cell, css.selectionToggle)}>
+        {/* If using checkboxes */}
+        {disableSelection !== true && useRadioButtons !== true && (
+          <Checkbox color='primary' checked={isSelected} />
+        )}
+        {/* If using radio buttons */}
+        {disableSelection !== true && useRadioButtons && (
+          <Radio color='primary' checked={isSelected} />
+        )}
+        {showExpandButton && (
+          <IconButton
+            className={classes(
+              css.expandButton,
+              expandState === ExpandState.EXPANDED && css.expandButtonExpanded,
+            )}
+            onClick={onExpand}
+          >
+            <ArrowRight />
+          </IconButton>
+        )}
+      </div>
+    )}
+
+    {/* Placeholder for non-expandable rows */}
+    {expandState === ExpandState.NONE && <div className={css.expandButtonPlaceholder} />}
+  </>
+);
diff --git a/frontend/src/components/CustomTableRow.test.tsx b/frontend/src/components/CustomTableRow.test.tsx
index 88cdf08b00eb..a1318907db17 100644
--- a/frontend/src/components/CustomTableRow.test.tsx
+++ b/frontend/src/components/CustomTableRow.test.tsx
@@ -43,7 +43,7 @@ describe('CustomTable', () => {
   };
 
   it('renders some rows using a custom renderer', async () => {
-    columns[0].customRenderer = () => (<span>this is custom output</span>) as any;
+    columns[0].customRenderer = () => <span>this is custom output</span> as any;
     const tree = shallow(<CustomTableRow {...props} row={row} columns={columns} />);
     await TestUtils.flushPromises();
     expect(tree).toMatchSnapshot();
diff --git a/frontend/src/components/CustomTableRow.tsx b/frontend/src/components/CustomTableRow.tsx
index 4af1e1852833..773ee0315971 100644
--- a/frontend/src/components/CustomTableRow.tsx
+++ b/frontend/src/components/CustomTableRow.tsx
@@ -66,8 +66,8 @@ interface CustomTableRowProps {
 }
 
 function calculateColumnWidths(columns: Column[]): number[] {
-  const totalFlex = columns.reduce((total, c) => total += (c.flex || 1), 0);
-  return columns.map(c => (c.flex || 1) / totalFlex * 100);
+  const totalFlex = columns.reduce((total, c) => (total += c.flex || 1), 0);
+  return columns.map(c => ((c.flex || 1) / totalFlex) * 100);
 }
 
 // tslint:disable-next-line:variable-name
@@ -76,17 +76,18 @@ export const CustomTableRow: React.FC<CustomTableRowProps> = (props: CustomTable
   const widths = calculateColumnWidths(columns);
   return (
     <React.Fragment>
-      {
-        row.otherFields.map((cell, i) => (
-          <div key={i} style={{ width: widths[i] + '%' }} className={css.cell}>
-            {i === 0 && row.error && (
-              <Tooltip title={row.error}><WarningIcon className={css.icon} /></Tooltip>
-            )}
-            {columns[i].customRenderer ?
-              columns[i].customRenderer!({ value: cell, id: row.id }) : cell}
-          </div>
-        ))
-      }
+      {row.otherFields.map((cell, i) => (
+        <div key={i} style={{ width: widths[i] + '%' }} className={css.cell}>
+          {i === 0 && row.error && (
+            <Tooltip title={row.error}>
+              <WarningIcon className={css.icon} />
+            </Tooltip>
+          )}
+          {columns[i].customRenderer
+            ? columns[i].customRenderer!({ value: cell, id: row.id })
+            : cell}
+        </div>
+      ))}
     </React.Fragment>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/components/Description.test.tsx b/frontend/src/components/Description.test.tsx
new file mode 100644
index 000000000000..a70239cf2785
--- /dev/null
+++ b/frontend/src/components/Description.test.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+
+import { mount } from 'enzyme';
+import { Description } from './Description';
+
+describe('Description', () => {
+  describe('When in normal mode', () => {
+    it('renders empty string', () => {
+      const tree = mount(<Description description='' />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders pure text', () => {
+      const tree = mount(<Description description='this is a line of pure text' />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders raw link', () => {
+      const description = 'https://www.google.com';
+      const tree = mount(<Description description={description} />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders markdown link', () => {
+      const description = '[google](https://www.google.com)';
+      const tree = mount(<Description description={description} />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders paragraphs', () => {
+      const description = 'Paragraph 1\n' + '\n' + 'Paragraph 2';
+      const tree = mount(<Description description={description} />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders markdown list as list', () => {
+      const description = `
+* abc
+* def`;
+      const tree = mount(<Description description={description} />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('When in inline mode', () => {
+    it('renders paragraphs separated by space', () => {
+      const description = `
+Paragraph 1
+
+Paragraph 2
+`;
+      const tree = mount(<Description description={description} forceInline={true} />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders pure text', () => {
+      const tree = mount(
+        <Description description='this is a line of pure text' forceInline={true} />,
+      ).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders raw link', () => {
+      const description = 'https://www.google.com';
+      const tree = mount(<Description description={description} forceInline={true} />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders markdown link', () => {
+      const description = '[google](https://www.google.com)';
+      const tree = mount(<Description description={description} forceInline={true} />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders markdown list as pure text', () => {
+      const description = `
+* abc
+* def`;
+      const tree = mount(<Description description={description} forceInline={true} />).getDOMNode();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});
diff --git a/frontend/src/components/Description.tsx b/frontend/src/components/Description.tsx
new file mode 100644
index 000000000000..d9abafc1b8b3
--- /dev/null
+++ b/frontend/src/components/Description.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import { ExternalLink } from '../atoms/ExternalLink';
+
+function preventEventBubbling(e: React.MouseEvent): void {
+  e.stopPropagation();
+}
+
+const renderExternalLink = (props: {}) => (
+  <ExternalLink {...props} onClick={preventEventBubbling} />
+);
+
+const options = {
+  overrides: { a: { component: renderExternalLink } },
+};
+
+const optionsForceInline = {
+  ...options,
+  forceInline: true,
+};
+
+export const Description: React.FC<{ description: string; forceInline?: boolean }> = ({
+  description,
+  forceInline,
+}) => {
+  return <Markdown options={forceInline ? optionsForceInline : options}>{description}</Markdown>;
+};
diff --git a/frontend/src/components/DetailsTable.test.tsx b/frontend/src/components/DetailsTable.test.tsx
index cb91e1de7639..dae438e77da0 100644
--- a/frontend/src/components/DetailsTable.test.tsx
+++ b/frontend/src/components/DetailsTable.test.tsx
@@ -36,8 +36,12 @@ describe('DetailsTable', () => {
   });
 
   it('shows key and value for large values', () => {
-    const tree = shallow(<DetailsTable fields={[
-      ['key', `Lorem Ipsum is simply dummy text of the printing and typesetting
+    const tree = shallow(
+      <DetailsTable
+        fields={[
+          [
+            'key',
+            `Lorem Ipsum is simply dummy text of the printing and typesetting
       industry. Lorem Ipsum has been the industry's standard dummy text ever
       since the 1500s, when an unknown printer took a galley of type and
       scrambled it to make a type specimen book. It has survived not only five
@@ -45,8 +49,11 @@ describe('DetailsTable', () => {
       essentially unchanged. It was popularised in the 1960s with the release
       of Letraset sheets containing Lorem Ipsum passages, and more recently
       with desktop publishing software like Aldus PageMaker including versions
-      of Lorem Ipsum.`]
-    ]} />);
+      of Lorem Ipsum.`,
+          ],
+        ]}
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -56,7 +63,9 @@ describe('DetailsTable', () => {
   });
 
   it('shows key and JSON value in row', () => {
-    const tree = shallow(<DetailsTable fields={[['key', JSON.stringify([{ jsonKey: 'jsonValue' }])]]} />);
+    const tree = shallow(
+      <DetailsTable fields={[['key', JSON.stringify([{ jsonKey: 'jsonValue' }])]]} />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -86,24 +95,32 @@ describe('DetailsTable', () => {
   });
 
   it('does not render booleans as JSON', () => {
-    const tree = shallow(<DetailsTable fields={[
-      ['key1', 'true'],
-      ['key2', 'false']
-    ]} />);
+    const tree = shallow(<DetailsTable fields={[['key1', 'true'], ['key2', 'false']]} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('shows keys and values for multiple rows', () => {
-    const tree = shallow(<DetailsTable fields={[
-      ['key1', 'value1'],
-      ['key2', JSON.stringify([{ jsonKey: 'jsonValue2' }])],
-      ['key3', 'value3'],
-      ['key4', 'value4'],
-      ['key5', JSON.stringify({ jsonKey: { nestedJsonKey: 'jsonValue' } })],
-      ['key6', 'value6'],
-      ['key6', 'value7'],
-    ]} />);
+    const tree = shallow(
+      <DetailsTable
+        fields={[
+          ['key1', 'value1'],
+          ['key2', JSON.stringify([{ jsonKey: 'jsonValue2' }])],
+          ['key3', 'value3'],
+          ['key4', 'value4'],
+          ['key5', JSON.stringify({ jsonKey: { nestedJsonKey: 'jsonValue' } })],
+          ['key6', 'value6'],
+          ['key6', 'value7'],
+        ]}
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
+  it('does render values with the provided valueComponent', () => {
+    const valueComponent: React.FC<any> = ({ key }) => <a>{key}</a>;
+    const tree = shallow(
+      <DetailsTable fields={[['key', { key: 'foobar' } as any]]} valueComponent={valueComponent} />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/frontend/src/components/DetailsTable.tsx b/frontend/src/components/DetailsTable.tsx
index 3f43b955c5b5..b2a56025c4c5 100644
--- a/frontend/src/components/DetailsTable.tsx
+++ b/frontend/src/components/DetailsTable.tsx
@@ -17,11 +17,13 @@
 import * as React from 'react';
 import { stylesheet } from 'typestyle';
 import { color, spacing, commonCss } from '../Css';
+import { KeyValue } from '../lib/StaticGraphParser';
 import Editor from './Editor';
 import 'brace';
 import 'brace/ext/language_tools';
 import 'brace/mode/json';
 import 'brace/theme/github';
+import { S3Artifact } from 'third_party/argo-ui/argo_template';
 
 export const css = stylesheet({
   key: {
@@ -40,45 +42,73 @@ export const css = stylesheet({
   },
   valueText: {
     maxWidth: 400,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
   },
 });
 
 interface DetailsTableProps {
-  fields: string[][];
+  fields: Array<KeyValue<string | S3Artifact>>;
   title?: string;
+  valueComponent?: React.FC<S3Artifact>;
+}
+
+function isString(x: any): x is string {
+  return typeof x === 'string';
 }
 
 export default (props: DetailsTableProps) => {
-  return (<React.Fragment>
-    {!!props.title && <div className={commonCss.header}>{props.title}</div>}
-    <div>
-      {props.fields.map((f, i) => {
-        try {
-          const parsedJson = JSON.parse(f[1]);
-          // Nulls, booleans, strings, and numbers can all be parsed as JSON, but we don't care
-          // about rendering. Note that `typeOf null` returns 'object'
-          if (parsedJson === null || typeof parsedJson !== 'object') {
-            throw new Error('Parsed JSON was neither an array nor an object. Using default renderer');
+  return (
+    <React.Fragment>
+      {!!props.title && <div className={commonCss.header}>{props.title}</div>}
+      <div>
+        {props.fields.map((f, i) => {
+          const [key, value] = f;
+
+          // only try to parse json if value is a string
+          if (isString(value)) {
+            try {
+              const parsedJson = JSON.parse(value);
+              // Nulls, booleans, strings, and numbers can all be parsed as JSON, but we don't care
+              // about rendering. Note that `typeOf null` returns 'object'
+              if (parsedJson === null || typeof parsedJson !== 'object') {
+                throw new Error(
+                  'Parsed JSON was neither an array nor an object. Using default renderer',
+                );
+              }
+              return (
+                <div key={i} className={css.row}>
+                  <span className={css.key}>{key}</span>
+                  <Editor
+                    width='100%'
+                    height='300px'
+                    mode='json'
+                    theme='github'
+                    highlightActiveLine={true}
+                    showGutter={true}
+                    readOnly={true}
+                    value={JSON.stringify(parsedJson, null, 2) || ''}
+                  />
+                </div>
+              );
+            } catch (err) {
+              // do nothing
+            }
           }
-          return (
-            <div key={i} className={css.row}>
-              <span className={css.key}>{f[0]}</span>
-              <Editor width='100%' height='300px' mode='json' theme='github'
-                highlightActiveLine={true} showGutter={true} readOnly={true}
-                value={JSON.stringify(parsedJson, null, 2) || ''} />
-            </div>
-          );
-        } catch (err) {
           // If the value isn't a JSON object, just display it as is
           return (
             <div key={i} className={css.row}>
-              <span className={css.key}>{f[0]}</span>
-              <span className={css.valueText}>{f[1]}</span>
+              <span className={css.key}>{key}</span>
+              <span className={css.valueText}>
+                {props.valueComponent && !!value && !isString(value)
+                  ? props.valueComponent(value)
+                  : value}
+              </span>
             </div>
           );
-        }
-      })}
-    </div>
-  </React.Fragment>
+        })}
+      </div>
+    </React.Fragment>
   );
 };
diff --git a/frontend/src/components/Editor.test.tsx b/frontend/src/components/Editor.test.tsx
index 2245fb6ba66b..30afeb2609ec 100644
--- a/frontend/src/components/Editor.test.tsx
+++ b/frontend/src/components/Editor.test.tsx
@@ -36,7 +36,7 @@ describe('Editor', () => {
     expect(tree.html()).toMatchSnapshot();
   });
 
-  it ('renders a placeholder that contains HTML', () => {
+  it('renders a placeholder that contains HTML', () => {
     const placeholder = 'I am a placeholder with <strong>HTML</strong>.';
     const tree = mount(<Editor placeholder={placeholder} />);
     expect(tree.html()).toMatchSnapshot();
@@ -49,4 +49,4 @@ describe('Editor', () => {
     const editor = (tree.instance() as any).editor;
     expect(editor.getValue()).toBe(value);
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/components/Editor.tsx b/frontend/src/components/Editor.tsx
index 11dec1c990d9..ee73e46ac902 100644
--- a/frontend/src/components/Editor.tsx
+++ b/frontend/src/components/Editor.tsx
@@ -42,4 +42,4 @@ class Editor extends AceEditor {
   }
 }
 
-export default Editor;
\ No newline at end of file
+export default Editor;
diff --git a/frontend/src/components/GcsLink.tsx b/frontend/src/components/GcsLink.tsx
deleted file mode 100644
index f0f7635141bc..000000000000
--- a/frontend/src/components/GcsLink.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { generateGcsConsoleUri } from '../lib/Utils';
-
-/**
- * A component that renders a gcs console link when gcsUri is gs:// and pure
- * text if it is not a valid gs:// uri.
- */
-export const GcsLink: React.FC<{ gcsUri?: string }> = ({ gcsUri }) => {
-  const gcsConsoleUri = gcsUri ? generateGcsConsoleUri(gcsUri) : undefined;
-  if (gcsConsoleUri) {
-    // Opens in new window safely
-    return <a href={gcsConsoleUri} target={'_blank'} rel={'noreferrer noopener'}>{gcsUri}</a>;
-  } else {
-    return <>{gcsUri}</>;
-  }
-};
diff --git a/frontend/src/components/Graph.test.tsx b/frontend/src/components/Graph.test.tsx
index 4de7c1baefd1..96340be29cbf 100644
--- a/frontend/src/components/Graph.test.tsx
+++ b/frontend/src/components/Graph.test.tsx
@@ -127,7 +127,10 @@ describe('Graph', () => {
     graph.setEdge('node2', 'node1');
     const spy = jest.fn();
     const tree = shallow(<Graph graph={graph} onClick={spy} />);
-    tree.find('.node').at(0).simulate('click');
+    tree
+      .find('.node')
+      .at(0)
+      .simulate('click');
     expect(spy).toHaveBeenCalledWith('node1');
   });
 
diff --git a/frontend/src/components/Graph.tsx b/frontend/src/components/Graph.tsx
index 07ab344932f6..ed8ebe51aeb7 100644
--- a/frontend/src/components/Graph.tsx
+++ b/frontend/src/components/Graph.tsx
@@ -89,7 +89,7 @@ const css = stylesheet({
     margin: 10,
     position: 'absolute',
     // TODO: can this be calculated?
-    transform: 'translate(71px, 14px)'
+    transform: 'translate(71px, 14px)',
   },
   root: {
     backgroundColor: color.graphBg,
@@ -133,13 +133,12 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
     const displayEdges: Edge[] = [];
 
     // Creates the lines that constitute the edges connecting the graph.
-    graph.edges().forEach((edgeInfo) => {
+    graph.edges().forEach(edgeInfo => {
       const edge = graph.edge(edgeInfo);
       const segments: Segment[] = [];
 
       if (edge.points.length > 1) {
         for (let i = 1; i < edge.points.length; i++) {
-
           let xStart = edge.points[i - 1].x;
           let yStart = edge.points[i - 1].y;
           let xEnd = edge.points[i].x;
@@ -157,8 +156,8 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
 
             // Set the edge's first segment to start at the bottom or top of the source node.
             yStart = downwardPointingSegment
-              ? sourceNode.y + (sourceNode.height / 2) - 3
-              : sourceNode.y - (sourceNode.height / 2);
+              ? sourceNode.y + sourceNode.height / 2 - 3
+              : sourceNode.y - sourceNode.height / 2;
 
             xStart = this._ensureXIsWithinNode(sourceNode, xStart);
           }
@@ -184,7 +183,7 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
               // node.
               yEnd = downwardPointingSegment
                 ? destinationNode.y - this.TOP_OFFSET + 5
-                : destinationNode.y + (destinationNode.height / 2) + 3;
+                : destinationNode.y + destinationNode.height / 2 + 3;
 
               xEnd = this._ensureXIsWithinNode(destinationNode, xEnd);
             }
@@ -226,7 +225,7 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
         from: edgeInfo.v,
         isPlaceholder: edge.isPlaceholder,
         segments,
-        to: edgeInfo.w
+        to: edgeInfo.w,
       });
     });
 
@@ -235,36 +234,50 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
 
     return (
       <div className={css.root}>
-        {graph.nodes().map(id => Object.assign(graph.node(id), { id })).map((node, i) => (
-          <div className={classes(node.isPlaceholder ? css.placeholderNode : css.node, 'graphNode',
-            node.id === this.props.selectedNodeId ? css.nodeSelected : '')} key={i}
-            onMouseEnter={() => {
-              if (!this.props.selectedNodeId) {
-                this.setState({ hoveredNode: node.id });
-              }
-            }}
-            onMouseLeave={() => {
-              if (this.state.hoveredNode === node.id) {
-                this.setState({ hoveredNode: undefined });
+        {graph
+          .nodes()
+          .map(id => Object.assign(graph.node(id), { id }))
+          .map((node, i) => (
+            <div
+              className={classes(
+                node.isPlaceholder ? css.placeholderNode : css.node,
+                'graphNode',
+                node.id === this.props.selectedNodeId ? css.nodeSelected : '',
+              )}
+              key={i}
+              onMouseEnter={() => {
+                if (!this.props.selectedNodeId) {
+                  this.setState({ hoveredNode: node.id });
+                }
+              }}
+              onMouseLeave={() => {
+                if (this.state.hoveredNode === node.id) {
+                  this.setState({ hoveredNode: undefined });
+                }
+              }}
+              onClick={() =>
+                !node.isPlaceholder && this.props.onClick && this.props.onClick(node.id)
               }
-            }}
-            onClick={() => (!node.isPlaceholder && this.props.onClick) && this.props.onClick(node.id)}
-            style={{
-              backgroundColor: node.bgColor, left: node.x,
-              maxHeight: node.height,
-              minHeight: node.height,
-              top: node.y,
-              transition: 'left 0.5s, top 0.5s',
-              width: node.width,
-            }}>
-            {!node.isPlaceholder && (
-              <Tooltip title={node.label} enterDelay={300}>
-                <div className={css.label}>{node.label}</div>
-              </Tooltip>
-            )}
-            <div className={css.icon} style={{ background: node.statusColoring }}>{node.icon}</div>
-          </div>
-        ))}
+              style={{
+                backgroundColor: node.bgColor,
+                left: node.x,
+                maxHeight: node.height,
+                minHeight: node.height,
+                top: node.y,
+                transition: 'left 0.5s, top 0.5s',
+                width: node.width,
+              }}
+            >
+              {!node.isPlaceholder && (
+                <Tooltip title={node.label} enterDelay={300}>
+                  <div className={css.label}>{node.label}</div>
+                </Tooltip>
+              )}
+              <div className={css.icon} style={{ background: node.statusColoring }}>
+                {node.icon}
+              </div>
+            </div>
+          ))}
 
         {displayEdges.map((edge, i) => {
           const edgeColor = this._getEdgeColor(edge, highlightNode);
@@ -272,8 +285,10 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
           return (
             <div key={i}>
               {edge.segments.map((segment, l) => (
-                <div className={css.line}
-                  key={l} style={{
+                <div
+                  className={css.line}
+                  key={l}
+                  style={{
                     backgroundColor: edgeColor,
                     height: this.EDGE_THICKNESS,
                     left: segment.x1 + this.LEFT_OFFSET,
@@ -281,16 +296,20 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
                     transform: `rotate(${segment.angle}deg)`,
                     transition: 'left 0.5s, top 0.5s',
                     width: segment.length,
-                  }} />
+                  }}
+                />
               ))}
               {/* Arrowhead */}
               {!edge.isPlaceholder && lastSegment.x2 !== undefined && lastSegment.y2 !== undefined && (
-                <div className={css.arrowHead} style={{
-                  borderTopColor: edgeColor,
-                  left: lastSegment.x2 + this.LEFT_OFFSET - 6,
-                  top: lastSegment.y2 + this.TOP_OFFSET - 3,
-                  transform: `rotate(${lastSegment.angle + 90}deg)`,
-                }} />
+                <div
+                  className={css.arrowHead}
+                  style={{
+                    borderTopColor: edgeColor,
+                    left: lastSegment.x2 + this.LEFT_OFFSET - 6,
+                    top: lastSegment.y2 + this.TOP_OFFSET - 3,
+                    transform: `rotate(${lastSegment.angle + 90}deg)`,
+                  }}
+                />
               )}
             </div>
           );
@@ -300,17 +319,18 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
   }
 
   private _addDiagonalSegment(
-      segments: Segment[],
-      xStart: number,
-      yStart: number,
-      xEnd: number,
-      yEnd: number): void {
+    segments: Segment[],
+    xStart: number,
+    yStart: number,
+    xEnd: number,
+    yEnd: number,
+  ): void {
     const xMid = (xStart + xEnd) / 2;
     // The + 0.5 at the end of 'length' helps fill out the elbows of the edges.
     const length = Math.sqrt(Math.pow(xStart - xEnd, 2) + Math.pow(yStart - yEnd, 2)) + 0.5;
-    const x1 = xMid - (length / 2);
+    const x1 = xMid - length / 2;
     const y1 = (yStart + yEnd) / 2;
-    const angle = Math.atan2(yStart - yEnd, xStart - xEnd) * 180 / Math.PI;
+    const angle = (Math.atan2(yStart - yEnd, xStart - xEnd) * 180) / Math.PI;
     segments.push({
       angle,
       length,
diff --git a/frontend/src/components/LogViewer.test.tsx b/frontend/src/components/LogViewer.test.tsx
index eaadb2317df1..262b54caed84 100644
--- a/frontend/src/components/LogViewer.test.tsx
+++ b/frontend/src/components/LogViewer.test.tsx
@@ -26,19 +26,20 @@ describe('LogViewer', () => {
   it('renders one log line', () => {
     const logLines = ['first line'];
     const logViewer = new LogViewer({ logLines });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders two log lines', () => {
     const logLines = ['first line', 'second line'];
     const logViewer = new LogViewer({ logLines });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders one long line without breaking', () => {
-    const line = `Lorem Ipsum is simply dummy text of the printing and typesetting` +
+    const line =
+      `Lorem Ipsum is simply dummy text of the printing and typesetting` +
       `industry. Lorem Ipsum has been the industry's standard dummy text ever` +
       `since the 1500s, when an unknown printer took a galley of type and` +
       `scrambled it to make a type specimen book. It has survived not only five` +
@@ -48,7 +49,7 @@ describe('LogViewer', () => {
       `with desktop publishing software like Aldus PageMaker including versions` +
       `of Lorem Ipsum.`;
     const logViewer = new LogViewer({ logLines: [line] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
@@ -63,35 +64,35 @@ describe('LogViewer', () => {
     with desktop publishing software like Aldus PageMaker including versions
     of Lorem Ipsum.`;
     const logViewer = new LogViewer({ logLines: line.split('\n') });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('linkifies standalone urls', () => {
     const logLines = ['this string: http://path.com is a url'];
     const logViewer = new LogViewer({ logLines });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('linkifies standalone https urls', () => {
     const logLines = ['this string: https://path.com is a url'];
     const logViewer = new LogViewer({ logLines });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('linkifies substring urls', () => {
     const logLines = ['this string:http://path.com is a url'];
     const logViewer = new LogViewer({ logLines });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('does not linkify non http/https urls', () => {
     const logLines = ['this string: gs://path is a GCS path'];
     const logViewer = new LogViewer({ logLines });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
@@ -105,49 +106,49 @@ describe('LogViewer', () => {
 
   it('renders a row with given index as line number', () => {
     const logViewer = new LogViewer({ logLines: ['line1', 'line2'] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders a row with error', () => {
     const logViewer = new LogViewer({ logLines: ['line1 with error', 'line2'] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders a row with upper case error', () => {
     const logViewer = new LogViewer({ logLines: ['line1 with ERROR', 'line2'] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders a row with error word as substring', () => {
     const logViewer = new LogViewer({ logLines: ['line1 with errorWord', 'line2'] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders a row with warning', () => {
     const logViewer = new LogViewer({ logLines: ['line1 with warning', 'line2'] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders a row with warn', () => {
     const logViewer = new LogViewer({ logLines: ['line1 with warn', 'line2'] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders a row with upper case warning', () => {
     const logViewer = new LogViewer({ logLines: ['line1 with WARNING', 'line2'] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders a row with warning word as substring', () => {
     const logViewer = new LogViewer({ logLines: ['line1 with warning:something', 'line2'] });
-    const tree = shallow((logViewer as any)._rowRenderer({ index: 0 }));
+    const tree = mount((logViewer as any)._rowRenderer({ index: 0 })).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/frontend/src/components/LogViewer.tsx b/frontend/src/components/LogViewer.tsx
index 4030dc2bb151..235d0ff9f829 100644
--- a/frontend/src/components/LogViewer.tsx
+++ b/frontend/src/components/LogViewer.tsx
@@ -18,6 +18,7 @@ import * as React from 'react';
 import { List, AutoSizer, ListRowProps } from 'react-virtualized';
 import { fontsize, fonts } from '../Css';
 import { stylesheet } from 'typestyle';
+import { OverscanIndicesGetter } from 'react-virtualized/dist/es/Grid';
 
 const css = stylesheet({
   a: {
@@ -47,46 +48,118 @@ const css = stylesheet({
     userSelect: 'none',
   },
   root: {
-    $nest: {
-      '& .ReactVirtualized__Grid__innerScrollContainer': {
-        overflow: 'auto !important',
-      },
-    },
+    // We cannot easily add padding here without breaking react-virtualized size calculation, for
+    // details: https://github.com/bvaughn/react-virtualized/issues/992
+    // Specifically, a complex solution was proposed in https://github.com/bvaughn/react-virtualized/issues/992#issuecomment-371145943.
+    // We may consider that later.
     backgroundColor: '#222',
     color: '#fff',
     fontFamily: fonts.code,
     fontSize: fontsize.small,
-    padding: '10px 0',
+    // This override and listContainerStyleOverride workarounds to allow horizontal scroll.
+    // Reference: https://github.com/bvaughn/react-virtualized/issues/1248
+    overflow: 'auto !important',
     whiteSpace: 'pre',
   },
 });
 
+const listContainerStyleOverride = {
+  overflow: 'visible',
+};
+
 interface LogViewerProps {
-  classes?: string;
   logLines: string[];
 }
 
-class LogViewer extends React.Component<LogViewerProps> {
+// Use the same amount of overscan above and below visible rows.
+//
+// Why:
+// * Default behavior is that when we scroll to one direction, content off
+// screen on the other direction is unmounted from browser immediately. This
+// caused a bug when selecting lines + scrolling.
+// * With new behavior implemented below: we are now overscanning on both
+// directions disregard of which direction user is scrolling to, we can ensure
+// lines not exceeding maximum overscanRowCount lines off screen are still
+// selectable.
+const overscanOnBothDirections: OverscanIndicesGetter = ({
+  direction, // One of "horizontal" or "vertical"
+  cellCount, // Number of rows or columns in the current axis
+  scrollDirection, // 1 (forwards) or -1 (backwards)
+  overscanCellsCount, // Maximum number of cells to over-render in either direction
+  startIndex, // Begin of range of visible cells
+  stopIndex, // End of range of visible cells
+}) => {
+  return {
+    overscanStartIndex: Math.max(0, startIndex - overscanCellsCount),
+    overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount),
+  };
+};
+
+interface LogViewerState {
+  followNewLogs: boolean;
+}
+
+class LogViewer extends React.Component<LogViewerProps, LogViewerState> {
+  public state = {
+    followNewLogs: true,
+  };
+
   private _rootRef = React.createRef<List>();
 
   public componentDidMount(): void {
-    this._scrollToEnd();
+    // Wait until the next frame to scroll to bottom, because doms haven't been
+    // rendered when running this.
+    setTimeout(() => {
+      this._scrollToEnd();
+    });
   }
 
   public componentDidUpdate(): void {
-    this._scrollToEnd();
+    if (this.state.followNewLogs) {
+      this._scrollToEnd();
+    }
   }
 
   public render(): JSX.Element {
-    return <AutoSizer>
-      {({ height, width }) => (
-        <List id='logViewer' width={width} height={height} rowCount={this.props.logLines.length}
-          rowHeight={15} className={css.root} ref={this._rootRef}
-          rowRenderer={this._rowRenderer.bind(this)} />
-      )}
-    </AutoSizer>;
+    return (
+      <AutoSizer>
+        {({ height, width }) => (
+          <List
+            id='logViewer'
+            containerStyle={listContainerStyleOverride}
+            width={width}
+            height={height}
+            rowCount={this.props.logLines.length}
+            rowHeight={15}
+            className={css.root}
+            ref={this._rootRef}
+            overscanIndicesGetter={overscanOnBothDirections}
+            overscanRowCount={
+              400 /* make this large, so selecting maximum 400 lines is supported */
+            }
+            rowRenderer={this._rowRenderer.bind(this)}
+            onScroll={this.handleScroll}
+          />
+        )}
+      </AutoSizer>
+    );
   }
 
+  private handleScroll = (info: {
+    clientHeight: number;
+    scrollHeight: number;
+    scrollTop: number;
+  }) => {
+    const offsetTolerance = 20; // pixels
+    const isScrolledToBottom =
+      info.scrollHeight - info.scrollTop - info.clientHeight <= offsetTolerance;
+    if (isScrolledToBottom !== this.state.followNewLogs) {
+      this.setState({
+        followNewLogs: isScrolledToBottom,
+      });
+    }
+  };
+
   private _scrollToEnd(): void {
     const root = this._rootRef.current;
     if (root) {
@@ -96,56 +169,69 @@ class LogViewer extends React.Component<LogViewerProps> {
 
   private _rowRenderer(props: ListRowProps): React.ReactNode {
     const { style, key, index } = props;
+    const line = this.props.logLines[index];
     return (
       <div key={key} className={css.line} style={style}>
-        <span className={css.number} style={this._getLineStyle(index)}>{index + 1}</span>
-
-        <span className={css.line} style={this._getLineStyle(index)}>
-          {this._parseLine(this.props.logLines[index]).map((piece, p) => (
-            <span key={p}>{piece}</span>
-          ))}
-        </span>
+        <MemoedLogLine index={index} line={line} />
       </div>
     );
   }
+}
 
-  private _getLineStyle(index: number): React.CSSProperties {
-    const line = this.props.logLines[index];
-    const lineLowerCase = line.toLowerCase();
-    if (lineLowerCase.indexOf('error') > -1 || lineLowerCase.indexOf('fail') > -1) {
-      return {
-        backgroundColor: '#700000',
-        color: 'white',
-      };
-    } else if (lineLowerCase.indexOf('warn') > -1) {
-      return {
-        backgroundColor: '#545400',
-        color: 'white',
-      };
-    } else {
-      return {};
-    }
+const LogLine: React.FC<{ index: number; line: string }> = ({ index, line }) => (
+  <>
+    <span className={css.number} style={getLineStyle(line)}>
+      {index + 1}
+    </span>
+    <span className={css.line} style={getLineStyle(line)}>
+      {parseLine(line).map((piece, p) => (
+        <span key={p}>{piece}</span>
+      ))}
+    </span>
+  </>
+);
+// improve performance when rerendering, because we render a lot of logs
+const MemoedLogLine = React.memo(LogLine);
+
+function getLineStyle(line: string): React.CSSProperties {
+  const lineLowerCase = line.toLowerCase();
+  if (lineLowerCase.indexOf('error') > -1 || lineLowerCase.indexOf('fail') > -1) {
+    return {
+      backgroundColor: '#700000',
+      color: 'white',
+    };
+  } else if (lineLowerCase.indexOf('warn') > -1) {
+    return {
+      backgroundColor: '#545400',
+      color: 'white',
+    };
+  } else {
+    return {};
   }
+}
 
-  private _parseLine(line: string): React.ReactNode[] {
-    // Linkify URLs starting with http:// or https://
-    const urlPattern = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
-    let lastMatch = 0;
-    let match = urlPattern.exec(line);
-    const nodes = [];
-    while (match) {
-      // Append all text before URL match
-      nodes.push(<span>{line.substr(lastMatch, match.index)}</span>);
-      // Append URL via an anchor element
-      nodes.push(<a href={match[0]} target='_blank' className={css.a}>{match[0]}</a>);
-
-      lastMatch = match.index + match[0].length;
-      match = urlPattern.exec(line);
-    }
-    // Append all text after final URL
-    nodes.push(<span>{line.substr(lastMatch)}</span>);
-    return nodes;
+function parseLine(line: string): React.ReactNode[] {
+  // Linkify URLs starting with http:// or https://
+  const urlPattern = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+  let lastMatch = 0;
+  let match = urlPattern.exec(line);
+  const nodes = [];
+  while (match) {
+    // Append all text before URL match
+    nodes.push(<span>{line.substr(lastMatch, match.index)}</span>);
+    // Append URL via an anchor element
+    nodes.push(
+      <a href={match[0]} target='_blank' className={css.a}>
+        {match[0]}
+      </a>,
+    );
+
+    lastMatch = match.index + match[0].length;
+    match = urlPattern.exec(line);
   }
+  // Append all text after final URL
+  nodes.push(<span>{line.substr(lastMatch)}</span>);
+  return nodes;
 }
 
 export default LogViewer;
diff --git a/frontend/src/components/Metric.test.tsx b/frontend/src/components/Metric.test.tsx
index 5ba52b77c180..958bbeb7f535 100644
--- a/frontend/src/components/Metric.test.tsx
+++ b/frontend/src/components/Metric.test.tsx
@@ -67,7 +67,8 @@ describe('Metric', () => {
       <Metric
         metadata={{ name: 'some metric', count: 1, maxValue: 0, minValue: 0 }}
         metric={{ format: RunMetricFormat.RAW, number_value: 0.54 }}
-      />);
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -77,7 +78,8 @@ describe('Metric', () => {
       <Metric
         metadata={{ name: 'some metric', count: 1, maxValue: 1, minValue: 0 }}
         metric={{ format: RunMetricFormat.RAW, number_value: 0.54 }}
-      />);
+      />,
+    );
     expect(consoleSpy).toHaveBeenCalledTimes(0);
     expect(tree).toMatchSnapshot();
   });
@@ -88,7 +90,8 @@ describe('Metric', () => {
       <Metric
         metadata={{ name: 'some metric', count: 1, maxValue: 1, minValue: 0 }}
         metric={{ format: RunMetricFormat.RAW, number_value: -0.54 }}
-      />);
+      />,
+    );
     expect(consoleSpy).toHaveBeenCalled();
     expect(tree).toMatchSnapshot();
   });
@@ -99,7 +102,8 @@ describe('Metric', () => {
       <Metric
         metadata={{ name: 'some metric', count: 1, maxValue: 1, minValue: 0 }}
         metric={{ format: RunMetricFormat.RAW, number_value: 2 }}
-      />);
+      />,
+    );
     expect(consoleSpy).toHaveBeenCalled();
     expect(tree).toMatchSnapshot();
   });
diff --git a/frontend/src/components/Metric.tsx b/frontend/src/components/Metric.tsx
index f3bd85269c47..a64f5fe15acf 100644
--- a/frontend/src/components/Metric.tsx
+++ b/frontend/src/components/Metric.tsx
@@ -43,7 +43,6 @@ interface MetricProps {
 }
 
 class Metric extends React.PureComponent<MetricProps> {
-
   public render(): JSX.Element {
     const { metric, metadata } = this.props;
     if (!metric || metric.number_value === undefined) {
@@ -68,23 +67,25 @@ class Metric extends React.PureComponent<MetricProps> {
       }
 
       if (metric.number_value - metadata.minValue < 0) {
-        logger.error(`Metric ${metadata.name}'s value:`
-          + ` (${metric.number_value}) was lower than the supposed minimum of`
-          + ` (${metadata.minValue})`);
+        logger.error(
+          `Metric ${metadata.name}'s value:` +
+            ` (${metric.number_value}) was lower than the supposed minimum of` +
+            ` (${metadata.minValue})`,
+        );
         return <div style={{ paddingLeft: leftSpace }}>{displayString}</div>;
       }
 
       if (metadata.maxValue - metric.number_value < 0) {
-        logger.error(`Metric ${metadata.name}'s value:`
-          + ` (${metric.number_value}) was greater than the supposed maximum of`
-          + ` (${metadata.maxValue})`);
+        logger.error(
+          `Metric ${metadata.name}'s value:` +
+            ` (${metric.number_value}) was greater than the supposed maximum of` +
+            ` (${metadata.maxValue})`,
+        );
         return <div style={{ paddingLeft: leftSpace }}>{displayString}</div>;
       }
 
       const barWidth =
-        (metric.number_value - metadata.minValue)
-        / (metadata.maxValue - metadata.minValue)
-        * 100;
+        ((metric.number_value - metadata.minValue) / (metadata.maxValue - metadata.minValue)) * 100;
 
       width = `calc(${barWidth}%)`;
     }
diff --git a/frontend/src/components/MinioArtifactLink.test.tsx b/frontend/src/components/MinioArtifactLink.test.tsx
new file mode 100644
index 000000000000..7ecbd9ceb76a
--- /dev/null
+++ b/frontend/src/components/MinioArtifactLink.test.tsx
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MinioArtifactLink from './MinioArtifactLink';
+
+describe('MinioArtifactLink', () => {
+  it('handles undefined artifact', () => {
+    expect(MinioArtifactLink(undefined as any)).toMatchSnapshot();
+  });
+
+  it('handles null artifact', () => {
+    expect(MinioArtifactLink(null as any)).toMatchSnapshot();
+  });
+
+  it('handles empty artifact', () => {
+    expect(MinioArtifactLink({} as any)).toMatchSnapshot();
+  });
+
+  it('handles invalid artifact: no bucket', () => {
+    const s3artifact = {
+      accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+      bucket: '',
+      endpoint: 'minio.kubeflow',
+      key: 'bar',
+      secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+    };
+    expect(MinioArtifactLink(s3artifact)).toMatchSnapshot();
+  });
+
+  it('handles invalid artifact: no key', () => {
+    const s3artifact = {
+      accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+      bucket: 'foo',
+      endpoint: 'minio.kubeflow',
+      key: '',
+      secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+    };
+    expect(MinioArtifactLink(s3artifact)).toMatchSnapshot();
+  });
+
+  it('handles s3 artifact', () => {
+    const s3artifact = {
+      accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+      bucket: 'foo',
+      endpoint: 's3.amazonaws.com',
+      key: 'bar',
+      secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+    };
+    expect(MinioArtifactLink(s3artifact)).toMatchSnapshot();
+  });
+
+  it('handles minio artifact', () => {
+    const minioartifact = {
+      accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+      bucket: 'foo',
+      endpoint: 'minio.kubeflow',
+      key: 'bar',
+      secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+    };
+    expect(MinioArtifactLink(minioartifact)).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/components/MinioArtifactLink.tsx b/frontend/src/components/MinioArtifactLink.tsx
new file mode 100644
index 000000000000..a1682b5d9596
--- /dev/null
+++ b/frontend/src/components/MinioArtifactLink.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { StoragePath, StorageService } from '../lib/WorkflowParser';
+import { S3Artifact } from '../../third_party/argo-ui/argo_template';
+
+const artifactApiUri = ({ source, bucket, key }: StoragePath) =>
+  'artifacts/get' + `?source=${source}&bucket=${bucket}&key=${encodeURIComponent(key)}`;
+
+/**
+ * A component that renders an artifact link.
+ */
+const MinioArtifactLink: React.FC<S3Artifact> = s3artifact => {
+  if (!s3artifact || !s3artifact.key || !s3artifact.bucket) {
+    return null;
+  }
+
+  const { key, bucket, endpoint } = s3artifact;
+  const source = endpoint === 's3.amazonaws.com' ? StorageService.S3 : StorageService.MINIO;
+  const linkText = `${source.toString()}://${bucket}/${key}`;
+  // Opens in new window safely
+  return (
+    <a
+      href={artifactApiUri({ key, bucket, source })}
+      target={'_blank'}
+      rel={'noreferrer noopener'}
+      title={linkText}
+    >
+      {linkText}
+    </a>
+  );
+};
+
+export default MinioArtifactLink;
diff --git a/frontend/src/components/NewRunParameters.test.tsx b/frontend/src/components/NewRunParameters.test.tsx
index 9e0e4e851223..9b552fde87ce 100644
--- a/frontend/src/components/NewRunParameters.test.tsx
+++ b/frontend/src/components/NewRunParameters.test.tsx
@@ -43,12 +43,14 @@ describe('NewRunParameters', () => {
       handleParamChange,
       initialParams: [
         { name: 'testParam1', value: 'testVal1' },
-        { name: 'testParam2', value: 'testVal2' }
+        { name: 'testParam2', value: 'testVal2' },
       ],
       titleMessage: 'Specify parameters required by the pipeline',
     } as NewRunParametersProps;
     const tree = shallow(<NewRunParameters {...props} />);
-    tree.find('#newRunPipelineParam1').simulate('change', { target: { value: 'test param value' } });
+    tree
+      .find('#newRunPipelineParam1')
+      .simulate('change', { target: { value: 'test param value' } });
     expect(handleParamChange).toHaveBeenCalledTimes(1);
     expect(handleParamChange).toHaveBeenLastCalledWith(1, 'test param value');
   });
diff --git a/frontend/src/components/NewRunParameters.tsx b/frontend/src/components/NewRunParameters.tsx
index 52a2c653063e..f90955f7568b 100644
--- a/frontend/src/components/NewRunParameters.tsx
+++ b/frontend/src/components/NewRunParameters.tsx
@@ -39,11 +39,18 @@ class NewRunParameters extends React.Component<NewRunParametersProps> {
         <div>{titleMessage}</div>
         {!!initialParams.length && (
           <div>
-            {initialParams.map((param, i) =>
-              <TextField id={`newRunPipelineParam${i}`} key={i} variant='outlined'
-                label={param.name} value={param.value || ''}
-                onChange={(ev) => handleParamChange(i, ev.target.value || '')}
-                style={{ maxWidth: 600 }} className={commonCss.textField}/>)}
+            {initialParams.map((param, i) => (
+              <TextField
+                id={`newRunPipelineParam${i}`}
+                key={i}
+                variant='outlined'
+                label={param.name}
+                value={param.value || ''}
+                onChange={ev => handleParamChange(i, ev.target.value || '')}
+                style={{ maxWidth: 600 }}
+                className={commonCss.textField}
+              />
+            ))}
           </div>
         )}
       </div>
diff --git a/frontend/src/components/PlotCard.tsx b/frontend/src/components/PlotCard.tsx
index aa7e45e93950..e1d53ca114e5 100644
--- a/frontend/src/components/PlotCard.tsx
+++ b/frontend/src/components/PlotCard.tsx
@@ -100,8 +100,10 @@ class PlotCard extends React.Component<PlotCardProps, PlotCardState> {
   }
 
   public shouldComponentUpdate(nextProps: PlotCardProps, nextState: PlotCardState): boolean {
-    return JSON.stringify(nextProps) !== JSON.stringify(this.props) ||
-      nextState.fullscreenDialogOpen !== this.state.fullscreenDialogOpen;
+    return (
+      JSON.stringify(nextProps) !== JSON.stringify(this.props) ||
+      nextState.fullscreenDialogOpen !== this.state.fullscreenDialogOpen
+    );
   }
 
   public render(): JSX.Element | null {
@@ -111,38 +113,50 @@ class PlotCard extends React.Component<PlotCardProps, PlotCardState> {
       return null;
     }
 
-    return <div>
-      <Paper {...otherProps} className={classes(css.plotCard, 'plotCard')}>
-        <div className={css.plotHeader}>
-          <div className={css.plotTitle} title={title}>{title}</div>
-          <div>
-            <Button onClick={() => this.setState({ fullscreenDialogOpen: true })}
-              style={{ padding: 4, minHeight: 0, minWidth: 0 }} className='popOutButton'>
-              <Tooltip title='Pop out'>
-                <PopOutIcon classes={{ root: css.popoutIcon }} />
-              </Tooltip>
-            </Button>
+    return (
+      <div>
+        <Paper {...otherProps} className={classes(css.plotCard, 'plotCard')}>
+          <div className={css.plotHeader}>
+            <div className={css.plotTitle} title={title}>
+              {title}
+            </div>
+            <div>
+              <Button
+                onClick={() => this.setState({ fullscreenDialogOpen: true })}
+                style={{ padding: 4, minHeight: 0, minWidth: 0 }}
+                className='popOutButton'
+              >
+                <Tooltip title='Pop out'>
+                  <PopOutIcon classes={{ root: css.popoutIcon }} />
+                </Tooltip>
+              </Button>
+            </div>
           </div>
-        </div>
-        <ViewerContainer configs={configs} maxDimension={maxDimension} />
-      </Paper>
+          <ViewerContainer configs={configs} maxDimension={maxDimension} />
+        </Paper>
 
-      <Dialog open={!!this.state.fullscreenDialogOpen} classes={{ paper: css.fullscreenDialog }}
-        onClose={() => this.setState({ fullscreenDialogOpen: false })}>
-        <div className={css.dialogTitle}>
-          <Button onClick={() => this.setState({ fullscreenDialogOpen: false })}
-            className={classes(css.fullscreenCloseBtn, 'fullscreenCloseButton')}>
-            <CloseIcon />
-          </Button>
-          {componentMap[configs[0].type].prototype.getDisplayName()}
-          <Separator />
-          <span style={{ color: color.inactive }}>({title})</span>
-        </div>
-        <div className={css.fullscreenViewerContainer}>
-          <ViewerContainer configs={configs} />
-        </div>
-      </Dialog>
-    </div>;
+        <Dialog
+          open={!!this.state.fullscreenDialogOpen}
+          classes={{ paper: css.fullscreenDialog }}
+          onClose={() => this.setState({ fullscreenDialogOpen: false })}
+        >
+          <div className={css.dialogTitle}>
+            <Button
+              onClick={() => this.setState({ fullscreenDialogOpen: false })}
+              className={classes(css.fullscreenCloseBtn, 'fullscreenCloseButton')}
+            >
+              <CloseIcon />
+            </Button>
+            {componentMap[configs[0].type].prototype.getDisplayName()}
+            <Separator />
+            <span style={{ color: color.inactive }}>({title})</span>
+          </div>
+          <div className={css.fullscreenViewerContainer}>
+            <ViewerContainer configs={configs} />
+          </div>
+        </Dialog>
+      </div>
+    );
   }
 }
 
diff --git a/frontend/src/components/ResourceInfo.tsx b/frontend/src/components/ResourceInfo.tsx
index 1a7906b9bc90..91a609561f1c 100644
--- a/frontend/src/components/ResourceInfo.tsx
+++ b/frontend/src/components/ResourceInfo.tsx
@@ -18,7 +18,7 @@ import { stylesheet } from 'typestyle';
 import { color, commonCss } from '../Css';
 import { getMetadataValue } from '../lib/Utils';
 import { Artifact, Execution } from '../generated/src/apis/metadata/metadata_store_pb';
-import { GcsLink } from './GcsLink';
+import { ArtifactLink } from './ArtifactLink';
 
 export const css = stylesheet({
   field: {
@@ -41,7 +41,7 @@ export const css = stylesheet({
     fontSize: '14px',
     letterSpacing: '0.2px',
     lineHeight: '20px',
-  }
+  },
 });
 
 export enum ResourceType {
@@ -64,7 +64,6 @@ interface ExecutionProps {
 export type ResourceInfoProps = ArtifactProps | ExecutionProps;
 
 export class ResourceInfo extends React.Component<ResourceInfoProps, {}> {
-
   public render(): JSX.Element {
     const { resource } = this.props;
     const propertyMap = resource.getPropertiesMap();
@@ -74,38 +73,43 @@ export class ResourceInfo extends React.Component<ResourceInfoProps, {}> {
         <h1 className={commonCss.header}>Type: {this.props.typeName}</h1>
         {(() => {
           if (this.props.resourceType === ResourceType.ARTIFACT) {
-            return <>
-              <dt className={css.term}>URI</dt>
-              <dd className={css.value}>
-                <GcsLink gcsUri={this.props.resource.getUri()} />
-              </dd>
-            </>;
+            return (
+              <>
+                <dt className={css.term}>URI</dt>
+                <dd className={css.value}>
+                  <ArtifactLink artifactUri={this.props.resource.getUri()} />
+                </dd>
+              </>
+            );
           }
           return null;
         })()}
         <h2 className={commonCss.header2}>Properties</h2>
         <dl className={css.resourceInfo}>
-          {propertyMap.getEntryList()
+          {propertyMap
+            .getEntryList()
             // TODO: __ALL_META__ is something of a hack, is redundant, and can be ignored
             .filter(k => k[0] !== '__ALL_META__')
-            .map(k =>
+            .map(k => (
               <div className={css.field} key={k[0]}>
                 <dt className={css.term}>{k[0]}</dt>
-                <dd className={css.value}>{propertyMap && prettyPrintJsonValue(getMetadataValue(propertyMap.get(k[0])))}</dd>
+                <dd className={css.value}>
+                  {propertyMap && prettyPrintJsonValue(getMetadataValue(propertyMap.get(k[0])))}
+                </dd>
               </div>
-            )
-          }
+            ))}
         </dl>
         <h2 className={commonCss.header2}>Custom Properties</h2>
         <dl className={css.resourceInfo}>
-          {customPropertyMap.getEntryList().map(k =>
+          {customPropertyMap.getEntryList().map(k => (
             <div className={css.field} key={k[0]}>
               <dt className={css.term}>{k[0]}</dt>
               <dd className={css.value}>
-                {customPropertyMap && prettyPrintJsonValue(getMetadataValue(customPropertyMap.get(k[0])))}
+                {customPropertyMap &&
+                  prettyPrintJsonValue(getMetadataValue(customPropertyMap.get(k[0])))}
               </dd>
             </div>
-          )}
+          ))}
         </dl>
       </section>
     );
diff --git a/frontend/src/components/Router.tsx b/frontend/src/components/Router.tsx
index 521f5ead63ac..cb58522ede55 100644
--- a/frontend/src/components/Router.tsx
+++ b/frontend/src/components/Router.tsx
@@ -97,17 +97,23 @@ export const RoutePage = {
   RUN_DETAILS: `/runs/details/:${RouteParams.runId}`,
 };
 
-// tslint:disable-next-line:variable-name
 export const RoutePageFactory = {
   artifactDetails: (artifactType: string, artifactId: number) => {
-    return RoutePage.ARTIFACT_DETAILS
-      .replace(`:${RouteParams.ARTIFACT_TYPE}+`, artifactType)
-      .replace(`:${RouteParams.ID}`, '' + artifactId);
-  }
+    return RoutePage.ARTIFACT_DETAILS.replace(
+      `:${RouteParams.ARTIFACT_TYPE}+`,
+      artifactType,
+    ).replace(`:${RouteParams.ID}`, '' + artifactId);
+  },
+};
+
+export const ExternalLinks = {
+  AI_HUB: 'https://aihub.cloud.google.com/u/0/s?category=pipeline',
+  DOCUMENTATION: 'https://www.kubeflow.org/docs/pipelines/',
+  GITHUB: 'https://github.com/kubeflow/pipelines',
 };
 
 export interface DialogProps {
-  buttons?: Array<{ onClick?: () => any, text: string }>;
+  buttons?: Array<{ onClick?: () => any; text: string }>;
   // TODO: This should be generalized to any react component.
   content?: string;
   onClose?: () => any;
@@ -123,7 +129,6 @@ interface RouteComponentState {
 }
 
 class Router extends React.Component<{}, RouteComponentState> {
-
   constructor(props: any) {
     super(props);
 
@@ -144,13 +149,17 @@ class Router extends React.Component<{}, RouteComponentState> {
       updateToolbar: this._updateToolbar.bind(this),
     };
 
-    const routes: Array<{ path: string, Component: React.ComponentClass, view?: any }> = [
+    const routes: Array<{ path: string; Component: React.ComponentClass; view?: any }> = [
       { 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 },
+      {
+        Component: ExperimentsAndRuns,
+        path: RoutePage.EXPERIMENTS,
+        view: ExperimentsAndRunsTab.EXPERIMENTS,
+      },
       { path: RoutePage.EXPERIMENT_DETAILS, Component: ExperimentDetails },
       { path: RoutePage.NEW_EXPERIMENT, Component: NewExperiment },
       { path: RoutePage.NEW_RUN, Component: NewRun },
@@ -166,24 +175,39 @@ class Router extends React.Component<{}, RouteComponentState> {
       <HashRouter>
         <div className={commonCss.page}>
           <div className={commonCss.flexGrow}>
-            <Route render={({ ...props }) => (<SideNav page={props.location.pathname} {...props} />)} />
+            <Route
+              render={({ ...props }) => <SideNav page={props.location.pathname} {...props} />}
+            />
             <div className={classes(commonCss.page)}>
-              <Route render={({ ...props }) => (<Toolbar {...this.state.toolbarProps} {...props} />)} />
-              {this.state.bannerProps.message
-                && <Banner
+              <Route
+                render={({ ...props }) => <Toolbar {...this.state.toolbarProps} {...props} />}
+              />
+              {this.state.bannerProps.message && (
+                <Banner
                   message={this.state.bannerProps.message}
                   mode={this.state.bannerProps.mode}
                   additionalInfo={this.state.bannerProps.additionalInfo}
-                  refresh={this.state.bannerProps.refresh} />}
+                  refresh={this.state.bannerProps.refresh}
+                />
+              )}
               <Switch>
-                <Route exact={true} path={'/'} render={({ ...props }) => (
-                  <Redirect to={RoutePage.PIPELINES} {...props} />
-                )} />
+                <Route
+                  exact={true}
+                  path={'/'}
+                  render={({ ...props }) => <Redirect to={RoutePage.PIPELINES} {...props} />}
+                />
                 {routes.map((route, i) => {
                   const { path, Component, ...otherProps } = { ...route };
-                  return <Route key={i} exact={true} path={path} render={({ ...props }) => (
-                    <Component {...props} {...childProps} {...otherProps} />
-                  )} />;
+                  return (
+                    <Route
+                      key={i}
+                      exact={true}
+                      path={path}
+                      render={({ ...props }) => (
+                        <Component {...props} {...childProps} {...otherProps} />
+                      )}
+                    />
+                  );
                 })}
 
                 {/* 404 */}
@@ -199,8 +223,12 @@ class Router extends React.Component<{}, RouteComponentState> {
             </div>
           </div>
 
-          <Dialog open={this.state.dialogProps.open !== false} classes={{ paper: css.dialog }}
-            className='dialog' onClose={() => this._handleDialogClosed()}>
+          <Dialog
+            open={this.state.dialogProps.open !== false}
+            classes={{ paper: css.dialog }}
+            className='dialog'
+            onClose={() => this._handleDialogClosed()}
+          >
             {this.state.dialogProps.title && (
               <DialogTitle> {this.state.dialogProps.title}</DialogTitle>
             )}
@@ -211,11 +239,16 @@ class Router extends React.Component<{}, RouteComponentState> {
             )}
             {this.state.dialogProps.buttons && (
               <DialogActions>
-                {this.state.dialogProps.buttons.map((b, i) =>
-                  <Button key={i} onClick={() => this._handleDialogClosed(b.onClick)}
-                    className='dialogButton' color='secondary'>
+                {this.state.dialogProps.buttons.map((b, i) => (
+                  <Button
+                    key={i}
+                    onClick={() => this._handleDialogClosed(b.onClick)}
+                    className='dialogButton'
+                    color='secondary'
+                  >
                     {b.text}
-                  </Button>)}
+                  </Button>
+                ))}
               </DialogActions>
             )}
           </Dialog>
diff --git a/frontend/src/components/SideNav.test.tsx b/frontend/src/components/SideNav.test.tsx
index 3e779895d61c..a68c5549be41 100644
--- a/frontend/src/components/SideNav.test.tsx
+++ b/frontend/src/components/SideNav.test.tsx
@@ -20,7 +20,7 @@ import SideNav, { css } from './SideNav';
 import TestUtils from '../TestUtils';
 import { Apis } from '../lib/Apis';
 import { LocalStorage } from '../lib/LocalStorage';
-import { ReactWrapper, ShallowWrapper, shallow, } from 'enzyme';
+import { ReactWrapper, ShallowWrapper, shallow } from 'enzyme';
 import { RoutePage } from './Router';
 import { RouterProps } from 'react-router';
 
@@ -48,7 +48,7 @@ describe('SideNav', () => {
       apiServerCommitHash: 'd3c4add0a95e930c70a330466d0923827784eb9a',
       apiServerReady: true,
       buildDate: 'Wed Jan 9 19:40:24 UTC 2019',
-      frontendCommitHash: '8efb2fcff9f666ba5b101647e909dc9c6889cecb'
+      frontendCommitHash: '8efb2fcff9f666ba5b101647e909dc9c6889cecb',
     }));
     checkHubSpy.mockImplementation(() => ({ ok: true }));
 
@@ -229,9 +229,9 @@ describe('SideNav', () => {
       apiServerCommitHash: '0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5',
       apiServerReady: true,
       buildDate: 'Tue Oct 23 14:23:53 UTC 2018',
-      frontendCommitHash: '302e93ce99099173f387c7e0635476fe1b69ea98'
+      frontendCommitHash: '302e93ce99099173f387c7e0635476fe1b69ea98',
     };
-    buildInfoSpy.mockImplementationOnce(() => (buildInfo));
+    buildInfoSpy.mockImplementationOnce(() => buildInfo);
 
     tree = shallow(<SideNav page={RoutePage.PIPELINES} {...routerProps} />);
     await TestUtils.flushPromises();
@@ -239,7 +239,8 @@ describe('SideNav', () => {
 
     expect(tree.state('displayBuildInfo')).toEqual({
       commitHash: buildInfo.apiServerCommitHash.substring(0, 7),
-      commitUrl: 'https://www.github.com/kubeflow/pipelines/commit/' + buildInfo.apiServerCommitHash,
+      commitUrl:
+        'https://www.github.com/kubeflow/pipelines/commit/' + buildInfo.apiServerCommitHash,
       date: new Date(buildInfo.buildDate).toLocaleDateString(),
     });
   });
@@ -249,16 +250,18 @@ describe('SideNav', () => {
       apiServerReady: true,
       // No apiServerCommitHash
       buildDate: 'Tue Oct 23 14:23:53 UTC 2018',
-      frontendCommitHash: '302e93ce99099173f387c7e0635476fe1b69ea98'
+      frontendCommitHash: '302e93ce99099173f387c7e0635476fe1b69ea98',
     };
-    buildInfoSpy.mockImplementationOnce(() => (buildInfo));
+    buildInfoSpy.mockImplementationOnce(() => buildInfo);
 
     tree = shallow(<SideNav page={RoutePage.PIPELINES} {...routerProps} />);
     await TestUtils.flushPromises();
 
-    expect(tree.state('displayBuildInfo')).toEqual(expect.objectContaining({
-      commitHash: buildInfo.frontendCommitHash.substring(0, 7),
-    }));
+    expect(tree.state('displayBuildInfo')).toEqual(
+      expect.objectContaining({
+        commitHash: buildInfo.frontendCommitHash.substring(0, 7),
+      }),
+    );
   });
 
   it('uses the frontend commit hash for the link URL if the api server hash is not returned', async () => {
@@ -266,33 +269,38 @@ describe('SideNav', () => {
       apiServerReady: true,
       // No apiServerCommitHash
       buildDate: 'Tue Oct 23 14:23:53 UTC 2018',
-      frontendCommitHash: '302e93ce99099173f387c7e0635476fe1b69ea98'
+      frontendCommitHash: '302e93ce99099173f387c7e0635476fe1b69ea98',
     };
-    buildInfoSpy.mockImplementationOnce(() => (buildInfo));
+    buildInfoSpy.mockImplementationOnce(() => buildInfo);
 
     tree = shallow(<SideNav page={RoutePage.PIPELINES} {...routerProps} />);
     await TestUtils.flushPromises();
 
-    expect(tree.state('displayBuildInfo')).toEqual(expect.objectContaining({
-      commitUrl: 'https://www.github.com/kubeflow/pipelines/commit/' + buildInfo.frontendCommitHash,
-    }));
+    expect(tree.state('displayBuildInfo')).toEqual(
+      expect.objectContaining({
+        commitUrl:
+          'https://www.github.com/kubeflow/pipelines/commit/' + buildInfo.frontendCommitHash,
+      }),
+    );
   });
 
-  it('displays \'unknown\' if the frontend and api server commit hashes are not returned', async () => {
+  it("displays 'unknown' if the frontend and api server commit hashes are not returned", async () => {
     const buildInfo = {
       apiServerReady: true,
       // No apiServerCommitHash
       buildDate: 'Tue Oct 23 14:23:53 UTC 2018',
       // No frontendCommitHash
     };
-    buildInfoSpy.mockImplementationOnce(() => (buildInfo));
+    buildInfoSpy.mockImplementationOnce(() => buildInfo);
 
     tree = shallow(<SideNav page={RoutePage.PIPELINES} {...routerProps} />);
     await TestUtils.flushPromises();
 
-    expect(tree.state('displayBuildInfo')).toEqual(expect.objectContaining({
-      commitHash: 'unknown',
-    }));
+    expect(tree.state('displayBuildInfo')).toEqual(
+      expect.objectContaining({
+        commitHash: 'unknown',
+      }),
+    );
   });
 
   it('links to the github repo root if the frontend and api server commit hashes are not returned', async () => {
@@ -302,31 +310,35 @@ describe('SideNav', () => {
       buildDate: 'Tue Oct 23 14:23:53 UTC 2018',
       // No frontendCommitHash
     };
-    buildInfoSpy.mockImplementationOnce(() => (buildInfo));
+    buildInfoSpy.mockImplementationOnce(() => buildInfo);
 
     tree = shallow(<SideNav page={RoutePage.PIPELINES} {...routerProps} />);
     await TestUtils.flushPromises();
 
-    expect(tree.state('displayBuildInfo')).toEqual(expect.objectContaining({
-      commitUrl: 'https://www.github.com/kubeflow/pipelines',
-    }));
+    expect(tree.state('displayBuildInfo')).toEqual(
+      expect.objectContaining({
+        commitUrl: 'https://www.github.com/kubeflow/pipelines',
+      }),
+    );
   });
 
-  it('displays \'unknown\' if the date is not returned', async () => {
+  it("displays 'unknown' if the date is not returned", async () => {
     const buildInfo = {
       apiServerCommitHash: '0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5',
       apiServerReady: true,
       // No buildDate
-      frontendCommitHash: '302e93ce99099173f387c7e0635476fe1b69ea98'
+      frontendCommitHash: '302e93ce99099173f387c7e0635476fe1b69ea98',
     };
-    buildInfoSpy.mockImplementationOnce(() => (buildInfo));
+    buildInfoSpy.mockImplementationOnce(() => buildInfo);
 
     tree = shallow(<SideNav page={RoutePage.PIPELINES} {...routerProps} />);
     await TestUtils.flushPromises();
 
-    expect(tree.state('displayBuildInfo')).toEqual(expect.objectContaining({
-      date: 'unknown',
-    }));
+    expect(tree.state('displayBuildInfo')).toEqual(
+      expect.objectContaining({
+        date: 'unknown',
+      }),
+    );
   });
 
   it('logs an error if the call getBuildInfo fails', async () => {
diff --git a/frontend/src/components/SideNav.tsx b/frontend/src/components/SideNav.tsx
index 9a607e3e9092..c4eeeb3b301a 100644
--- a/frontend/src/components/SideNav.tsx
+++ b/frontend/src/components/SideNav.tsx
@@ -24,12 +24,14 @@ import ExperimentsIcon from '../icons/experiments';
 import IconButton from '@material-ui/core/IconButton';
 import JupyterhubIcon from '@material-ui/icons/Code';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import DescriptionIcon from '@material-ui/icons/Description';
+import GitHubIcon from '../icons/GitHub-Mark-120px-plus.png';
 import PipelinesIcon from '../icons/pipelines';
 import Tooltip from '@material-ui/core/Tooltip';
 import { Apis } from '../lib/Apis';
 import { Link } from 'react-router-dom';
 import { LocalStorage, LocalStorageKey } from '../lib/LocalStorage';
-import { RoutePage, RoutePrefix } from '../components/Router';
+import { RoutePage, RoutePrefix, ExternalLinks } from '../components/Router';
 import { RouterProps } from 'react-router';
 import { classes, stylesheet } from 'typestyle';
 import { fontsize, commonCss } from '../Css';
@@ -91,6 +93,12 @@ export const css = stylesheet({
   collapsedChevron: {
     transform: 'rotate(180deg)',
   },
+  collapsedExternalLabel: {
+    // Hide text when collapsing, but do it with a transition of both height and
+    // opacity
+    height: 0,
+    opacity: 0,
+  },
   collapsedLabel: {
     // Hide text when collapsing, but do it with a transition
     opacity: 0,
@@ -101,6 +109,13 @@ export const css = stylesheet({
   collapsedSeparator: {
     margin: '20px !important',
   },
+  icon: {
+    height: 20,
+    width: 20,
+  },
+  iconImage: {
+    opacity: 0.6, // Images are too colorful there by default, reduce their color.
+  },
   indicator: {
     borderBottom: '3px solid transparent',
     borderLeft: `3px solid ${sideNavColors.fgActive}`,
@@ -131,7 +146,7 @@ export const css = stylesheet({
     verticalAlign: 'super',
   },
   link: {
-    color: '#77abda'
+    color: '#77abda',
   },
   openInNewTabIcon: {
     height: 12,
@@ -199,15 +214,15 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
       const commitHash = buildInfo.apiServerCommitHash || buildInfo.frontendCommitHash || '';
       displayBuildInfo = {
         commitHash: commitHash ? commitHash.substring(0, 7) : 'unknown',
-        commitUrl: 'https://www.github.com/kubeflow/pipelines'
-          + (commitHash ? `/commit/${commitHash}` : ''),
+        commitUrl:
+          'https://www.github.com/kubeflow/pipelines' + (commitHash ? `/commit/${commitHash}` : ''),
         date: buildInfo.buildDate ? new Date(buildInfo.buildDate).toLocaleDateString() : 'unknown',
       };
     } catch (err) {
       logger.error('Failed to retrieve build info', err);
     }
 
-    this.setStateSafe({ displayBuildInfo});
+    this.setStateSafe({ displayBuildInfo });
   }
 
   public componentWillUnmount(): void {
@@ -223,118 +238,255 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
     };
 
     return (
-      <div id='sideNav' className={classes(css.root, commonCss.flexColumn, commonCss.noShrink, collapsed && css.collapsedRoot)}>
+      <div
+        id='sideNav'
+        className={classes(
+          css.root,
+          commonCss.flexColumn,
+          commonCss.noShrink,
+          collapsed && css.collapsedRoot,
+        )}
+      >
         <div style={{ flexGrow: 1 }}>
-          <div className={classes(css.indicator, !page.startsWith(RoutePage.PIPELINES) && css.indicatorHidden)} />
-          <Tooltip title={'Pipeline List'} enterDelay={300} placement={'right-start'}
-            disableFocusListener={!collapsed} disableHoverListener={!collapsed}
-            disableTouchListener={!collapsed}>
+          <div
+            className={classes(
+              css.indicator,
+              !page.startsWith(RoutePage.PIPELINES) && css.indicatorHidden,
+            )}
+          />
+          <Tooltip
+            title={'Pipeline List'}
+            enterDelay={300}
+            placement={'right-start'}
+            disableFocusListener={!collapsed}
+            disableHoverListener={!collapsed}
+            disableTouchListener={!collapsed}
+          >
             <Link id='pipelinesBtn' to={RoutePage.PIPELINES} className={commonCss.unstyled}>
-              <Button className={classes(css.button,
-                page.startsWith(RoutePage.PIPELINES) && css.active,
-                collapsed && css.collapsedButton)}>
-                <PipelinesIcon color={page.startsWith(RoutePage.PIPELINES) ? iconColor.active : iconColor.inactive} />
-                <span className={classes(collapsed && css.collapsedLabel, css.label)}>Pipelines</span>
+              <Button
+                className={classes(
+                  css.button,
+                  page.startsWith(RoutePage.PIPELINES) && css.active,
+                  collapsed && css.collapsedButton,
+                )}
+              >
+                <PipelinesIcon
+                  color={
+                    page.startsWith(RoutePage.PIPELINES) ? iconColor.active : iconColor.inactive
+                  }
+                />
+                <span className={classes(collapsed && css.collapsedLabel, css.label)}>
+                  Pipelines
+                </span>
               </Button>
             </Link>
           </Tooltip>
-          <div className={classes(css.indicator, !this._highlightExperimentsButton(page) && css.indicatorHidden)} />
-          <Tooltip title={'Experiment List'} enterDelay={300} placement={'right-start'}
-            disableFocusListener={!collapsed} disableHoverListener={!collapsed}
-            disableTouchListener={!collapsed}>
+          <div
+            className={classes(
+              css.indicator,
+              !this._highlightExperimentsButton(page) && css.indicatorHidden,
+            )}
+          />
+          <Tooltip
+            title={'Experiment List'}
+            enterDelay={300}
+            placement={'right-start'}
+            disableFocusListener={!collapsed}
+            disableHoverListener={!collapsed}
+            disableTouchListener={!collapsed}
+          >
             <Link id='experimentsBtn' to={RoutePage.EXPERIMENTS} className={commonCss.unstyled}>
-              <Button className={
-                classes(
+              <Button
+                className={classes(
                   css.button,
                   this._highlightExperimentsButton(page) && css.active,
-                  collapsed && css.collapsedButton)}>
-                <ExperimentsIcon color={this._highlightExperimentsButton(page) ? iconColor.active : iconColor.inactive} />
-                <span className={classes(collapsed && css.collapsedLabel, css.label)}>Experiments</span>
+                  collapsed && css.collapsedButton,
+                )}
+              >
+                <ExperimentsIcon
+                  color={
+                    this._highlightExperimentsButton(page) ? iconColor.active : iconColor.inactive
+                  }
+                />
+                <span className={classes(collapsed && css.collapsedLabel, css.label)}>
+                  Experiments
+                </span>
               </Button>
             </Link>
           </Tooltip>
-          <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}>
+          <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}
+          >
             <Link id='artifactsBtn' to={RoutePage.ARTIFACTS} className={commonCss.unstyled}>
-              <Button className={classes(css.button,
-                this._highlightArtifactsButton(page) && css.active,
-                collapsed && css.collapsedButton)}>
+              <Button
+                className={classes(
+                  css.button,
+                  this._highlightArtifactsButton(page) && css.active,
+                  collapsed && css.collapsedButton,
+                )}
+              >
                 <ArtifactsIcon />
-                <span className={classes(collapsed && css.collapsedLabel, css.label)}>Artifacts</span>
+                <span className={classes(collapsed && css.collapsedLabel, css.label)}>
+                  Artifacts
+                </span>
               </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}>
+          <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)}>
+              <Button
+                className={classes(
+                  css.button,
+                  this._highlightExecutionsButton(page) && css.active,
+                  collapsed && css.collapsedButton,
+                )}
+              >
                 <ExecutionsIcon />
-                <span className={classes(collapsed && css.collapsedLabel, css.label)}>Executions</span>
+                <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}
-              disableTouchListener={!collapsed}>
-              <a id='jupyterhubBtn' href={this._HUB_ADDRESS} className={commonCss.unstyled} target='_blank'>
-                <Button className={
-                  classes(css.button, collapsed && css.collapsedButton)}>
+            <Tooltip
+              title={'Open Jupyter Notebook'}
+              enterDelay={300}
+              placement={'right-start'}
+              disableFocusListener={!collapsed}
+              disableHoverListener={!collapsed}
+              disableTouchListener={!collapsed}
+            >
+              <a
+                id='jupyterhubBtn'
+                href={this._HUB_ADDRESS}
+                className={commonCss.unstyled}
+                target='_blank'
+              >
+                <Button className={classes(css.button, collapsed && css.collapsedButton)}>
                   <JupyterhubIcon style={{ height: 20, width: 20 }} />
-                  <span className={classes(collapsed && css.collapsedLabel, css.label)}>Notebooks</span>
+                  <span className={classes(collapsed && css.collapsedLabel, css.label)}>
+                    Notebooks
+                  </span>
                   <OpenInNewIcon className={css.openInNewTabIcon} />
                 </Button>
               </a>
             </Tooltip>
           )}
           <hr className={classes(css.separator, collapsed && css.collapsedSeparator)} />
-          <div className={classes(css.indicator, (page !== RoutePage.ARCHIVE) && css.indicatorHidden)} />
-          <Tooltip title={'Archive'} enterDelay={300} placement={'right-start'}
-            disableFocusListener={!collapsed} disableHoverListener={!collapsed}
-            disableTouchListener={!collapsed}>
+          <div
+            className={classes(css.indicator, page !== RoutePage.ARCHIVE && css.indicatorHidden)}
+          />
+          <Tooltip
+            title={'Archive'}
+            enterDelay={300}
+            placement={'right-start'}
+            disableFocusListener={!collapsed}
+            disableHoverListener={!collapsed}
+            disableTouchListener={!collapsed}
+          >
             <Link id='archiveBtn' to={RoutePage.ARCHIVE} className={commonCss.unstyled}>
-              <Button className={classes(css.button,
-                page === RoutePage.ARCHIVE && css.active,
-                collapsed && css.collapsedButton)}>
+              <Button
+                className={classes(
+                  css.button,
+                  page === RoutePage.ARCHIVE && css.active,
+                  collapsed && css.collapsedButton,
+                )}
+              >
                 <ArchiveIcon style={{ height: 20, width: 20 }} />
                 <span className={classes(collapsed && css.collapsedLabel, css.label)}>Archive</span>
               </Button>
             </Link>
           </Tooltip>
           <hr className={classes(css.separator, collapsed && css.collapsedSeparator)} />
-          <IconButton className={classes(css.chevron, collapsed && css.collapsedChevron)}
-            onClick={this._toggleNavClicked.bind(this)}>
+          <ExternalUri
+            title={'Documentation'}
+            to={ExternalLinks.DOCUMENTATION}
+            collapsed={collapsed}
+            icon={className => <DescriptionIcon className={className} />}
+          />
+          <ExternalUri
+            title={'Github Repo'}
+            to={ExternalLinks.GITHUB}
+            collapsed={collapsed}
+            icon={className => (
+              <img src={GitHubIcon} className={classes(className, css.iconImage)} />
+            )}
+          />
+          <ExternalUri
+            title={'AI Hub Samples'}
+            to={ExternalLinks.AI_HUB}
+            collapsed={collapsed}
+            icon={className => (
+              <img
+                src='https://www.gstatic.com/aihub/aihub_favicon.png'
+                className={classes(className, css.iconImage)}
+              />
+            )}
+          />
+          <hr className={classes(css.separator, collapsed && css.collapsedSeparator)} />
+          <IconButton
+            className={classes(css.chevron, collapsed && css.collapsedChevron)}
+            onClick={this._toggleNavClicked.bind(this)}
+          >
             <ChevronLeftIcon />
           </IconButton>
         </div>
         <div className={collapsed ? css.infoHidden : css.infoVisible}>
           {displayBuildInfo && (
-            <Tooltip title={'Build date: ' + displayBuildInfo.date} enterDelay={300} placement={'top-start'}>
+            <Tooltip
+              title={'Build date: ' + displayBuildInfo.date}
+              enterDelay={300}
+              placement={'top-start'}
+            >
               <div className={css.buildInfo}>
                 <span>Build commit: </span>
-                <a href={displayBuildInfo.commitUrl} className={classes(css.link, commonCss.unstyled)}
-                  target='_blank'>
+                <a
+                  href={displayBuildInfo.commitUrl}
+                  className={classes(css.link, commonCss.unstyled)}
+                  target='_blank'
+                >
                   {displayBuildInfo.commitHash}
                 </a>
               </div>
             </Tooltip>
           )}
         </div>
-      </div >
+      </div>
     );
   }
 
   private _highlightExperimentsButton(page: string): boolean {
-    return page.startsWith(RoutePage.EXPERIMENTS)
-      || page.startsWith(RoutePage.RUNS)
-      || page.startsWith(RoutePrefix.RECURRING_RUN)
-      || page.startsWith(RoutePage.COMPARE);
+    return (
+      page.startsWith(RoutePage.EXPERIMENTS) ||
+      page.startsWith(RoutePage.RUNS) ||
+      page.startsWith(RoutePrefix.RECURRING_RUN) ||
+      page.startsWith(RoutePage.COMPARE)
+    );
   }
 
   private _highlightArtifactsButton(page: string): boolean {
@@ -346,10 +498,13 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
   }
 
   private _toggleNavClicked(): void {
-    this.setStateSafe({
-      collapsed: !this.state.collapsed,
-      manualCollapseState: true,
-    }, () => LocalStorage.saveNavbarCollapsed(this.state.collapsed));
+    this.setStateSafe(
+      {
+        collapsed: !this.state.collapsed,
+        manualCollapseState: true,
+      },
+      () => LocalStorage.saveNavbarCollapsed(this.state.collapsed),
+    );
     this._toggleNavCollapsed();
   }
 
@@ -371,3 +526,30 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
     }
   }
 }
+
+interface ExternalUriProps {
+  title: string;
+  to: string;
+  collapsed: boolean;
+  icon: (className: string) => React.ReactNode;
+}
+
+// tslint:disable-next-line:variable-name
+const ExternalUri: React.FC<ExternalUriProps> = ({ title, to, collapsed, icon }) => (
+  <Tooltip
+    title={title}
+    enterDelay={300}
+    placement={'right-start'}
+    disableFocusListener={!collapsed}
+    disableHoverListener={!collapsed}
+    disableTouchListener={!collapsed}
+  >
+    <a href={to} className={commonCss.unstyled} target='_blank' rel='noopener noreferrer'>
+      <Button className={classes(css.button, collapsed && css.collapsedButton)}>
+        {icon(css.icon)}
+        <span className={classes(collapsed && css.collapsedLabel, css.label)}>{title}</span>
+        <OpenInNewIcon className={css.openInNewTabIcon} />
+      </Button>
+    </a>
+  </Tooltip>
+);
diff --git a/frontend/src/components/SidePanel.tsx b/frontend/src/components/SidePanel.tsx
index c5991f12b079..a33be7dde5e8 100644
--- a/frontend/src/components/SidePanel.tsx
+++ b/frontend/src/components/SidePanel.tsx
@@ -58,38 +58,44 @@ interface SidePanelProps {
 class SidePanel extends React.Component<SidePanelProps> {
   public render(): JSX.Element {
     const { isBusy, isOpen, onClose, title } = this.props;
-    return <Slide in={isOpen} direction='left'>
-      <Resizable className={css.sidepane} defaultSize={{ width: '70%' }} maxWidth='90%'
-        minWidth={100} enable={{
-          bottom: false,
-          bottomLeft: false,
-          bottomRight: false,
-          left: true,
-          right: false,
-          top: false,
-          topLeft: false,
-          topRight: false,
-        }}>
-        {isOpen && (
-          <div className={commonCss.page}>
-            <div className={commonCss.flex}>
-              <Button className={css.closeButton} onClick={onClose}><CloseIcon /></Button>
-              <div className={css.nodeName}>{title}</div>
-            </div>
+    return (
+      <Slide in={isOpen} direction='left'>
+        <Resizable
+          className={css.sidepane}
+          defaultSize={{ width: '70%' }}
+          maxWidth='90%'
+          minWidth={100}
+          enable={{
+            bottom: false,
+            bottomLeft: false,
+            bottomRight: false,
+            left: true,
+            right: false,
+            top: false,
+            topLeft: false,
+            topRight: false,
+          }}
+        >
+          {isOpen && (
             <div className={commonCss.page}>
-
-              {isBusy === true && (
-                <CircularProgress size={30} className={commonCss.absoluteCenter} />
-              )}
-
+              <div className={commonCss.flex}>
+                <Button className={css.closeButton} onClick={onClose}>
+                  <CloseIcon />
+                </Button>
+                <div className={css.nodeName}>{title}</div>
+              </div>
               <div className={commonCss.page}>
-                {this.props.children}
+                {isBusy === true && (
+                  <CircularProgress size={30} className={commonCss.absoluteCenter} />
+                )}
+
+                <div className={commonCss.page}>{this.props.children}</div>
               </div>
             </div>
-          </div>
-        )}
-      </Resizable>
-    </Slide>;
+          )}
+        </Resizable>
+      </Slide>
+    );
   }
 }
 
diff --git a/frontend/src/components/StaticNodeDetails.tsx b/frontend/src/components/StaticNodeDetails.tsx
index 44be8eb901f1..3b3bb8105731 100644
--- a/frontend/src/components/StaticNodeDetails.tsx
+++ b/frontend/src/components/StaticNodeDetails.tsx
@@ -41,44 +41,53 @@ class StaticNodeDetails extends React.Component<StaticNodeDetailsProps> {
   public render(): JSX.Element {
     const nodeInfo = this.props.nodeInfo;
 
-    return <div>
-      {(nodeInfo.nodeType === 'container') && (
-	<div>
-          <DetailsTable title='Input parameters' fields={nodeInfo.inputs} />
-
-          <DetailsTable title='Output parameters' fields={nodeInfo.outputs} />
-
-          <div className={classes(commonCss.header, css.fontSizeTitle)}>Arguments</div>
-          {nodeInfo.args.map((arg, i) =>
-            <div key={i} style={{ fontFamily: 'monospace' }}>{arg}</div>)}
-
-          <div className={classes(commonCss.header, css.fontSizeTitle)}>Command</div>
-          {nodeInfo.command.map((c, i) => <div key={i} style={{ fontFamily: 'monospace' }}>{c}</div>)}
-
-          <div className={classes(commonCss.header, css.fontSizeTitle)}>Image</div>
-          <div style={{ fontFamily: 'monospace' }}>{nodeInfo.image}</div>
-
-          <DetailsTable title='Volume Mounts' fields={nodeInfo.volumeMounts} />
-	</div>
-      )}
-
-      {(nodeInfo.nodeType === 'resource') && (
-	<div>
-          <DetailsTable title='Input parameters' fields={nodeInfo.inputs} />
-
-          <DetailsTable title='Output parameters' fields={nodeInfo.outputs} />
-
-          <DetailsTable title='Manifest' fields={nodeInfo.resource} />
-	</div>
-      )}
-
-      {!!nodeInfo.condition && (
-        <div>
-          <div className={css.taskTitle}>Condition</div>
-          <div>Run when: {nodeInfo.condition}</div>
-        </div>
-      )}
-    </div>;
+    return (
+      <div>
+        {nodeInfo.nodeType === 'container' && (
+          <div>
+            <DetailsTable title='Input parameters' fields={nodeInfo.inputs} />
+
+            <DetailsTable title='Output parameters' fields={nodeInfo.outputs} />
+
+            <div className={classes(commonCss.header, css.fontSizeTitle)}>Arguments</div>
+            {nodeInfo.args.map((arg, i) => (
+              <div key={i} style={{ fontFamily: 'monospace' }}>
+                {arg}
+              </div>
+            ))}
+
+            <div className={classes(commonCss.header, css.fontSizeTitle)}>Command</div>
+            {nodeInfo.command.map((c, i) => (
+              <div key={i} style={{ fontFamily: 'monospace' }}>
+                {c}
+              </div>
+            ))}
+
+            <div className={classes(commonCss.header, css.fontSizeTitle)}>Image</div>
+            <div style={{ fontFamily: 'monospace' }}>{nodeInfo.image}</div>
+
+            <DetailsTable title='Volume Mounts' fields={nodeInfo.volumeMounts} />
+          </div>
+        )}
+
+        {nodeInfo.nodeType === 'resource' && (
+          <div>
+            <DetailsTable title='Input parameters' fields={nodeInfo.inputs} />
+
+            <DetailsTable title='Output parameters' fields={nodeInfo.outputs} />
+
+            <DetailsTable title='Manifest' fields={nodeInfo.resource} />
+          </div>
+        )}
+
+        {!!nodeInfo.condition && (
+          <div>
+            <div className={css.taskTitle}>Condition</div>
+            <div>Run when: {nodeInfo.condition}</div>
+          </div>
+        )}
+      </div>
+    );
   }
 }
 
diff --git a/frontend/src/components/Toolbar.test.tsx b/frontend/src/components/Toolbar.test.tsx
index 21377ade5207..a032a28f1032 100644
--- a/frontend/src/components/Toolbar.test.tsx
+++ b/frontend/src/components/Toolbar.test.tsx
@@ -24,7 +24,7 @@ import InfoIcon from '@material-ui/icons/Info';
 const action1 = jest.fn();
 const action2 = jest.fn();
 const actions: ToolbarActionMap = {
-  'action1': {
+  action1: {
     action: action1,
     disabledTitle: 'test disabled title',
     icon: HelpIcon,
@@ -32,7 +32,7 @@ const actions: ToolbarActionMap = {
     title: 'test title',
     tooltip: 'test tooltip',
   },
-  'action2': {
+  action2: {
     action: action2,
     disabled: true,
     disabledTitle: 'test disabled title2',
@@ -67,111 +67,155 @@ describe('Toolbar', () => {
   });
 
   it('renders without breadcrumbs and a string page title', () => {
-    const tree = shallow(<Toolbar breadcrumbs={[]} actions={actions} history={history}
-      pageTitle='test page title' />);
+    const tree = shallow(
+      <Toolbar breadcrumbs={[]} actions={actions} history={history} pageTitle='test page title' />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders without breadcrumbs and a component page title', () => {
-    const tree = shallow(<Toolbar breadcrumbs={[]} actions={actions} history={history}
-      pageTitle={<div id='myComponent'>test page title</div>} />);
+    const tree = shallow(
+      <Toolbar
+        breadcrumbs={[]}
+        actions={actions}
+        history={history}
+        pageTitle={<div id='myComponent'>test page title</div>}
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders without breadcrumbs and one action', () => {
     const singleAction = {
-      'action1': {
+      action1: {
         action: action1,
         disabledTitle: 'test disabled title',
         icon: HelpIcon,
         id: 'test id',
         title: 'test title',
         tooltip: 'test tooltip',
-      }
+      },
     };
-    const tree = shallow(<Toolbar breadcrumbs={[]} actions={singleAction} history={history}
-      pageTitle='test page title' />);
+    const tree = shallow(
+      <Toolbar
+        breadcrumbs={[]}
+        actions={singleAction}
+        history={history}
+        pageTitle='test page title'
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders without actions and one breadcrumb', () => {
-    const tree = shallow(<Toolbar breadcrumbs={[breadcrumbs[0]]} actions={{}} history={history}
-      pageTitle='test page title' />);
+    const tree = shallow(
+      <Toolbar
+        breadcrumbs={[breadcrumbs[0]]}
+        actions={{}}
+        history={history}
+        pageTitle='test page title'
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders without actions, one breadcrumb, and a page name', () => {
-    const tree = shallow(<Toolbar breadcrumbs={[breadcrumbs[0]]} actions={{}} history={history}
-      pageTitle='test page title' />);
+    const tree = shallow(
+      <Toolbar
+        breadcrumbs={[breadcrumbs[0]]}
+        actions={{}}
+        history={history}
+        pageTitle='test page title'
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders without breadcrumbs and two actions', () => {
-    const tree = shallow(<Toolbar breadcrumbs={[]} actions={actions} history={history}
-      pageTitle='test page title' />);
+    const tree = shallow(
+      <Toolbar breadcrumbs={[]} actions={actions} history={history} pageTitle='test page title' />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('fires the right action function when button is clicked', () => {
-    const tree = shallow(<Toolbar breadcrumbs={[]} actions={actions} history={history}
-      pageTitle='test page title' />);
-    tree.find('BusyButton').at(0).simulate('click');
+    const tree = shallow(
+      <Toolbar breadcrumbs={[]} actions={actions} history={history} pageTitle='test page title' />,
+    );
+    tree
+      .find('BusyButton')
+      .at(0)
+      .simulate('click');
     expect(action1).toHaveBeenCalled();
     action1.mockClear();
   });
 
   it('renders outlined action buttons', () => {
     const outlinedActions = {
-      'action1': {
+      action1: {
         action: jest.fn(),
         id: 'test outlined id',
         outlined: true,
         title: 'test outlined title',
         tooltip: 'test outlined tooltip',
-      }
+      },
     };
 
-    const tree = shallow(<Toolbar breadcrumbs={breadcrumbs} actions={outlinedActions} pageTitle=''
-      history={history} />);
+    const tree = shallow(
+      <Toolbar
+        breadcrumbs={breadcrumbs}
+        actions={outlinedActions}
+        pageTitle=''
+        history={history}
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders primary action buttons', () => {
     const primaryActions = {
-      'action1': {
+      action1: {
         action: jest.fn(),
         id: 'test primary id',
         primary: true,
         title: 'test primary title',
         tooltip: 'test primary tooltip',
-      }
+      },
     };
 
-    const tree = shallow(<Toolbar breadcrumbs={breadcrumbs} actions={primaryActions} pageTitle=''
-      history={history} />);
+    const tree = shallow(
+      <Toolbar breadcrumbs={breadcrumbs} actions={primaryActions} pageTitle='' history={history} />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders primary action buttons without outline, even if outline is true', () => {
     const outlinedPrimaryActions = {
-      'action1': {
+      action1: {
         action: jest.fn(),
         id: 'test id',
         outlined: true,
         primary: true,
         title: 'test title',
         tooltip: 'test tooltip',
-      }
+      },
     };
 
-    const tree = shallow(<Toolbar breadcrumbs={breadcrumbs} actions={outlinedPrimaryActions} pageTitle=''
-      history={history} />);
+    const tree = shallow(
+      <Toolbar
+        breadcrumbs={breadcrumbs}
+        actions={outlinedPrimaryActions}
+        pageTitle=''
+        history={history}
+      />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('renders with two breadcrumbs and two actions', () => {
-    const tree = shallow(<Toolbar breadcrumbs={breadcrumbs} actions={actions} pageTitle=''
-      history={history} />);
+    const tree = shallow(
+      <Toolbar breadcrumbs={breadcrumbs} actions={actions} pageTitle='' history={history} />,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -179,7 +223,9 @@ describe('Toolbar', () => {
     // This test uses createMemoryHistory because createBroweserHistory returns a singleton, and
     // there is no way to clear its entries which this test requires.
     const emptyHistory = createMemoryHistory();
-    const tree = shallow(<Toolbar breadcrumbs={breadcrumbs} actions={actions} history={emptyHistory} pageTitle='' />);
+    const tree = shallow(
+      <Toolbar breadcrumbs={breadcrumbs} actions={actions} history={emptyHistory} pageTitle='' />,
+    );
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/frontend/src/components/Toolbar.tsx b/frontend/src/components/Toolbar.tsx
index 228eeafce744..eaf7e7d7bf63 100644
--- a/frontend/src/components/Toolbar.tsx
+++ b/frontend/src/components/Toolbar.tsx
@@ -26,7 +26,9 @@ import { classes, stylesheet } from 'typestyle';
 import { spacing, fonts, fontsize, color, dimension, commonCss } from '../Css';
 import { CSSProperties } from 'react';
 
-export interface ToolbarActionMap { [key: string]: ToolbarActionConfig; }
+export interface ToolbarActionMap {
+  [key: string]: ToolbarActionConfig;
+}
 
 export interface ToolbarActionConfig {
   action: () => void;
@@ -83,7 +85,7 @@ const css = stylesheet({
     $nest: {
       '&:hover': {
         background: color.lightGrey,
-      }
+      },
     },
     borderRadius: 3,
     padding: 3,
@@ -117,7 +119,6 @@ export interface ToolbarProps {
 }
 
 class Toolbar extends React.Component<ToolbarProps> {
-
   public render(): JSX.Element | null {
     const { actions, breadcrumbs, pageTitle, pageTitleTooltip } = { ...this.props };
 
@@ -126,16 +127,19 @@ class Toolbar extends React.Component<ToolbarProps> {
     }
 
     return (
-      <div className={
-        classes(css.root, (this.props.topLevelToolbar !== false) && css.topLevelToolbar)}>
+      <div
+        className={classes(css.root, this.props.topLevelToolbar !== false && css.topLevelToolbar)}
+      >
         <div style={{ minWidth: 100 }}>
           {/* Breadcrumb */}
           <div className={classes(css.breadcrumbs, commonCss.flex)}>
             {breadcrumbs.map((crumb, i) => (
               <span className={commonCss.flex} key={i} title={crumb.displayName}>
                 {i !== 0 && <ChevronRightIcon className={css.chevron} />}
-                <Link className={classes(commonCss.unstyled, commonCss.ellipsis, css.link)}
-                  to={crumb.href}>
+                <Link
+                  className={classes(commonCss.unstyled, commonCss.ellipsis, css.link)}
+                  to={crumb.href}
+                >
                   {crumb.displayName}
                 </Link>
               </span>
@@ -143,17 +147,26 @@ class Toolbar extends React.Component<ToolbarProps> {
           </div>
           <div className={commonCss.flex}>
             {/* Back Arrow */}
-            {breadcrumbs.length > 0 &&
+            {breadcrumbs.length > 0 && (
               <Tooltip title={'Back'} enterDelay={300}>
-                <div> {/* Div needed because we sometimes disable a button within a tooltip */}
-                  <IconButton className={css.backLink}
+                <div>
+                  {' '}
+                  {/* Div needed because we sometimes disable a button within a tooltip */}
+                  <IconButton
+                    className={css.backLink}
                     disabled={this.props.history!.length < 2}
-                    onClick={this.props.history!.goBack}>
-                    <ArrowBackIcon className={
-                      classes(css.backIcon, this.props.history!.length < 2 ? css.disabled : css.enabled)} />
+                    onClick={this.props.history!.goBack}
+                  >
+                    <ArrowBackIcon
+                      className={classes(
+                        css.backIcon,
+                        this.props.history!.length < 2 ? css.disabled : css.enabled,
+                      )}
+                    />
                   </IconButton>
                 </div>
-              </Tooltip>}
+              </Tooltip>
+            )}
             {/* Resource Name */}
             <span className={classes(css.pageName, commonCss.ellipsis)} title={pageTitleTooltip}>
               {pageTitle}
@@ -165,13 +178,26 @@ class Toolbar extends React.Component<ToolbarProps> {
           {Object.keys(actions).map((buttonKey, i) => {
             const button = actions[buttonKey];
             return (
-              <Tooltip title={(button.disabled && button.disabledTitle) ? button.disabledTitle : button.tooltip}
-                enterDelay={300} key={i}>
-                <div style={button.style}>{/* Extra level needed by tooltip when child is disabled */}
-                  <BusyButton id={button.id} color='secondary' onClick={button.action} disabled={button.disabled}
-                    title={button.title} icon={button.icon} busy={button.busy || false}
+              <Tooltip
+                title={
+                  button.disabled && button.disabledTitle ? button.disabledTitle : button.tooltip
+                }
+                enterDelay={300}
+                key={i}
+              >
+                <div style={button.style}>
+                  {/* Extra level needed by tooltip when child is disabled */}
+                  <BusyButton
+                    id={button.id}
+                    color='secondary'
+                    onClick={button.action}
+                    disabled={button.disabled}
+                    title={button.title}
+                    icon={button.icon}
+                    busy={button.busy || false}
                     outlined={(button.outlined && !button.primary) || false}
-                    className={button.primary ? commonCss.buttonAction : ''} />
+                    className={button.primary ? commonCss.buttonAction : ''}
+                  />
                 </div>
               </Tooltip>
             );
diff --git a/frontend/src/components/Trigger.test.tsx b/frontend/src/components/Trigger.test.tsx
index 6210bb6ce9cb..3d10c5b3382f 100644
--- a/frontend/src/components/Trigger.test.tsx
+++ b/frontend/src/components/Trigger.test.tsx
@@ -48,14 +48,18 @@ describe('Trigger', () => {
   it('renders week days if the trigger type is CRON and interval is weekly', () => {
     const tree = shallow(<Trigger />);
     (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.CRON } });
-    (tree.instance() as Trigger).handleChange('intervalCategory')({ target: { value: PeriodicInterval.WEEK } });
+    (tree.instance() as Trigger).handleChange('intervalCategory')({
+      target: { value: PeriodicInterval.WEEK },
+    });
     expect(tree).toMatchSnapshot();
   });
 
   it('renders all week days enabled', () => {
     const tree = shallow(<Trigger />);
     (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.CRON } });
-    (tree.instance() as Trigger).handleChange('intervalCategory')({ target: { value: PeriodicInterval.WEEK } });
+    (tree.instance() as Trigger).handleChange('intervalCategory')({
+      target: { value: PeriodicInterval.WEEK },
+    });
     (tree.instance() as any)._toggleCheckAllDays();
     expect(tree).toMatchSnapshot();
   });
@@ -63,7 +67,9 @@ describe('Trigger', () => {
   it('enables a single day on click', () => {
     const tree = shallow(<Trigger />);
     (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.CRON } });
-    (tree.instance() as Trigger).handleChange('intervalCategory')({ target: { value: PeriodicInterval.WEEK } });
+    (tree.instance() as Trigger).handleChange('intervalCategory')({
+      target: { value: PeriodicInterval.WEEK },
+    });
     (tree.instance() as any)._toggleDay(1);
     (tree.instance() as any)._toggleDay(3);
     expect(tree).toMatchSnapshot();
@@ -73,29 +79,41 @@ describe('Trigger', () => {
     it('builds an every-minute trigger by default', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
       expect(spy).toHaveBeenLastCalledWith(
-        { periodic_schedule: { end_time: undefined, interval_second: '60', start_time: undefined } },
-        '10'
+        {
+          periodic_schedule: { end_time: undefined, interval_second: '60', start_time: undefined },
+        },
+        '10',
       );
     });
 
     it('builds trigger with a start time if the checkbox is checked', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
-      (tree.instance() as Trigger).handleChange('hasStartDate')({ target: { type: 'checkbox', checked: true } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
+      (tree.instance() as Trigger).handleChange('hasStartDate')({
+        target: { type: 'checkbox', checked: true },
+      });
       expect(spy).toHaveBeenLastCalledWith(
         { periodic_schedule: { end_time: undefined, interval_second: '60', start_time: testDate } },
-        '10'
+        '10',
       );
     });
 
     it('builds trigger with the entered start date/time', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
-      (tree.instance() as Trigger).handleChange('hasStartDate')({ target: { type: 'checkbox', checked: true } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
+      (tree.instance() as Trigger).handleChange('hasStartDate')({
+        target: { type: 'checkbox', checked: true },
+      });
       (tree.instance() as Trigger).handleChange('startDate')({ target: { value: '2018-11-23' } });
       (tree.instance() as Trigger).handleChange('endTime')({ target: { value: '08:35' } });
       expect(spy).toHaveBeenLastCalledWith(
@@ -103,18 +121,22 @@ describe('Trigger', () => {
           periodic_schedule: {
             end_time: undefined,
             interval_second: '60',
-            start_time: new Date(2018, 10, 23, 8, 35)
-          }
+            start_time: new Date(2018, 10, 23, 8, 35),
+          },
         },
-        '10'
+        '10',
       );
     });
 
     it('builds trigger without the entered start date if no time is entered', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
-      (tree.instance() as Trigger).handleChange('hasStartDate')({ target: { type: 'checkbox', checked: true } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
+      (tree.instance() as Trigger).handleChange('hasStartDate')({
+        target: { type: 'checkbox', checked: true },
+      });
       (tree.instance() as Trigger).handleChange('startDate')({ target: { value: '2018-11-23' } });
       (tree.instance() as Trigger).handleChange('startTime')({ target: { value: '' } });
       expect(spy).toHaveBeenLastCalledWith(
@@ -123,17 +145,21 @@ describe('Trigger', () => {
             end_time: undefined,
             interval_second: '60',
             start_time: undefined,
-          }
+          },
         },
-        '10'
+        '10',
       );
     });
 
     it('builds trigger without the entered start time if no date is entered', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
-      (tree.instance() as Trigger).handleChange('hasStartDate')({ target: { type: 'checkbox', checked: true } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
+      (tree.instance() as Trigger).handleChange('hasStartDate')({
+        target: { type: 'checkbox', checked: true },
+      });
       (tree.instance() as Trigger).handleChange('startDate')({ target: { value: '' } });
       (tree.instance() as Trigger).handleChange('startTime')({ target: { value: '11:33' } });
       expect(spy).toHaveBeenLastCalledWith(
@@ -142,88 +168,109 @@ describe('Trigger', () => {
             end_time: undefined,
             interval_second: '60',
             start_time: undefined,
-          }
+          },
         },
-        '10'
+        '10',
       );
     });
 
     it('builds trigger with a date if both start and end checkboxes are checked', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
-      (tree.instance() as Trigger).handleChange('hasStartDate')({ target: { type: 'checkbox', checked: true } });
-      (tree.instance() as Trigger).handleChange('hasEndDate')({ target: { type: 'checkbox', checked: true } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
+      (tree.instance() as Trigger).handleChange('hasStartDate')({
+        target: { type: 'checkbox', checked: true },
+      });
+      (tree.instance() as Trigger).handleChange('hasEndDate')({
+        target: { type: 'checkbox', checked: true },
+      });
       expect(spy).toHaveBeenLastCalledWith(
         { periodic_schedule: { end_time: testDate, interval_second: '60', start_time: testDate } },
-        '10'
+        '10',
       );
     });
 
     it('resets trigger to no start date if it is added then removed', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
-      (tree.instance() as Trigger).handleChange('hasStartDate')({ target: { type: 'checkbox', checked: true } });
-      (tree.instance() as Trigger).handleChange('hasStartDate')({ target: { type: 'checkbox', checked: false } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
+      (tree.instance() as Trigger).handleChange('hasStartDate')({
+        target: { type: 'checkbox', checked: true },
+      });
+      (tree.instance() as Trigger).handleChange('hasStartDate')({
+        target: { type: 'checkbox', checked: false },
+      });
       expect(spy).toHaveBeenLastCalledWith(
-        { periodic_schedule: { end_time: undefined, interval_second: '60', start_time: undefined } },
-        '10'
+        {
+          periodic_schedule: { end_time: undefined, interval_second: '60', start_time: undefined },
+        },
+        '10',
       );
     });
 
     it('builds trigger with a weekly interval', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
-      (tree.instance() as Trigger).handleChange('intervalCategory')({ target: { value: PeriodicInterval.WEEK } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
+      (tree.instance() as Trigger).handleChange('intervalCategory')({
+        target: { value: PeriodicInterval.WEEK },
+      });
       expect(spy).toHaveBeenLastCalledWith(
         {
-          periodic_schedule:
-          {
+          periodic_schedule: {
             end_time: undefined,
             interval_second: (7 * 24 * 60 * 60).toString(),
-            start_time: undefined
-          }
+            start_time: undefined,
+          },
         },
-        '10'
+        '10',
       );
     });
 
     it('builds trigger with an every-three-months interval', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
-      (tree.instance() as Trigger).handleChange('intervalCategory')({ target: { value: PeriodicInterval.MONTH } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
+      (tree.instance() as Trigger).handleChange('intervalCategory')({
+        target: { value: PeriodicInterval.MONTH },
+      });
       (tree.instance() as Trigger).handleChange('intervalValue')({ target: { value: 3 } });
       expect(spy).toHaveBeenLastCalledWith(
         {
-          periodic_schedule:
-          {
+          periodic_schedule: {
             end_time: undefined,
             interval_second: (3 * 30 * 24 * 60 * 60).toString(),
-            start_time: undefined
-          }
+            start_time: undefined,
+          },
         },
-        '10'
+        '10',
       );
     });
 
     it('builds trigger with the specified max concurrency setting', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
-      (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.INTERVALED } });
+      (tree.instance() as Trigger).handleChange('type')({
+        target: { value: TriggerType.INTERVALED },
+      });
       (tree.instance() as Trigger).handleChange('maxConcurrentRuns')({ target: { value: '3' } });
       expect(spy).toHaveBeenLastCalledWith(
         {
-          periodic_schedule:
-          {
+          periodic_schedule: {
             end_time: undefined,
             interval_second: '60',
-            start_time: undefined
-          }
+            start_time: undefined,
+          },
         },
-        '3'
+        '3',
       );
     });
   });
@@ -235,7 +282,7 @@ describe('Trigger', () => {
       (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.CRON } });
       expect(spy).toHaveBeenLastCalledWith(
         { cron_schedule: { cron: '0 * * * * ?', end_time: undefined, start_time: undefined } },
-        '10'
+        '10',
       );
     });
 
@@ -243,11 +290,13 @@ describe('Trigger', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
       (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.CRON } });
-      (tree.instance() as Trigger).handleChange('hasStartDate')({ target: { type: 'checkbox', checked: true } });
+      (tree.instance() as Trigger).handleChange('hasStartDate')({
+        target: { type: 'checkbox', checked: true },
+      });
       (tree.instance() as Trigger).handleChange('startDate')({ target: { value: '2018-03-23' } });
       expect(spy).toHaveBeenLastCalledWith(
         { cron_schedule: { cron: '0 * * * * ?', end_time: undefined, start_time: testDate } },
-        '10'
+        '10',
       );
     });
 
@@ -255,11 +304,15 @@ describe('Trigger', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
       (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.CRON } });
-      (tree.instance() as Trigger).handleChange('hasEndDate')({ target: { type: 'checkbox', checked: true } });
-      (tree.instance() as Trigger).handleChange('intervalCategory')({ target: { value: PeriodicInterval.DAY } });
+      (tree.instance() as Trigger).handleChange('hasEndDate')({
+        target: { type: 'checkbox', checked: true },
+      });
+      (tree.instance() as Trigger).handleChange('intervalCategory')({
+        target: { value: PeriodicInterval.DAY },
+      });
       expect(spy).toHaveBeenLastCalledWith(
         { cron_schedule: { cron: '0 0 0 * * ?', end_time: testDate, start_time: undefined } },
-        '10'
+        '10',
       );
     });
 
@@ -267,14 +320,16 @@ describe('Trigger', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
       (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.CRON } });
-      (tree.instance() as Trigger).handleChange('intervalCategory')({ target: { value: PeriodicInterval.WEEK } });
+      (tree.instance() as Trigger).handleChange('intervalCategory')({
+        target: { value: PeriodicInterval.WEEK },
+      });
       (tree.instance() as any)._toggleCheckAllDays();
       (tree.instance() as any)._toggleDay(1);
       (tree.instance() as any)._toggleDay(5);
       (tree.instance() as any)._toggleDay(6);
       expect(spy).toHaveBeenLastCalledWith(
         { cron_schedule: { cron: '0 0 0 ? * 1,5,6', end_time: undefined, start_time: undefined } },
-        '10'
+        '10',
       );
     });
 
@@ -282,16 +337,28 @@ describe('Trigger', () => {
       const spy = jest.fn();
       const tree = shallow(<Trigger onChange={spy} />);
       (tree.instance() as Trigger).handleChange('type')({ target: { value: TriggerType.CRON } });
-      (tree.instance() as Trigger).handleChange('intervalCategory')({ target: { value: PeriodicInterval.WEEK } });
+      (tree.instance() as Trigger).handleChange('intervalCategory')({
+        target: { value: PeriodicInterval.WEEK },
+      });
       (tree.instance() as any)._toggleCheckAllDays();
       (tree.instance() as any)._toggleDay(1);
       (tree.instance() as any)._toggleDay(5);
       (tree.instance() as any)._toggleDay(6);
-      (tree.instance() as Trigger).handleChange('editCron')({ target: { type: 'checkbox', checked: true } });
-      (tree.instance() as Trigger).handleChange('cron')({ target: { value: 'oops this will break!' } });
+      (tree.instance() as Trigger).handleChange('editCron')({
+        target: { type: 'checkbox', checked: true },
+      });
+      (tree.instance() as Trigger).handleChange('cron')({
+        target: { value: 'oops this will break!' },
+      });
       expect(spy).toHaveBeenLastCalledWith(
-        { cron_schedule: { cron: 'oops this will break!', end_time: undefined, start_time: undefined } },
-        '10'
+        {
+          cron_schedule: {
+            cron: 'oops this will break!',
+            end_time: undefined,
+            start_time: undefined,
+          },
+        },
+        '10',
       );
     });
   });
diff --git a/frontend/src/components/Trigger.tsx b/frontend/src/components/Trigger.tsx
index fd7e8b67ef66..485e502a5d93 100644
--- a/frontend/src/components/Trigger.tsx
+++ b/frontend/src/components/Trigger.tsx
@@ -24,8 +24,12 @@ import Separator from '../atoms/Separator';
 import { commonCss } from '../Css';
 import { dateToPickerFormat } from '../lib/TriggerUtils';
 import {
-  PeriodicInterval, TriggerType, triggers, buildCron,
-  pickersToDate, buildTrigger
+  PeriodicInterval,
+  TriggerType,
+  triggers,
+  buildCron,
+  pickersToDate,
+  buildTrigger,
 } from '../lib/TriggerUtils';
 import { ApiTrigger } from '../apis/job';
 import { stylesheet } from 'typestyle';
@@ -52,7 +56,7 @@ interface TriggerState {
 
 const css = stylesheet({
   noMargin: {
-    margin: 0
+    margin: 0,
   },
 });
 
@@ -61,8 +65,13 @@ export default class Trigger extends React.Component<TriggerProps, TriggerState>
     super(props);
 
     const now = new Date();
-    const inAWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7,
-      now.getHours(), now.getMinutes());
+    const inAWeek = new Date(
+      now.getFullYear(),
+      now.getMonth(),
+      now.getDate() + 7,
+      now.getHours(),
+      now.getMinutes(),
+    );
     const [startDate, startTime] = dateToPickerFormat(now);
     const [endDate, endTime] = dateToPickerFormat(inAWeek);
 
@@ -91,114 +100,217 @@ export default class Trigger extends React.Component<TriggerProps, TriggerState>
   }
 
   public render(): JSX.Element {
-    const { cron, editCron, endDate, endTime, hasEndDate, hasStartDate, intervalCategory,
-      intervalValue, maxConcurrentRuns, selectedDays, startDate, startTime, type } = this.state;
-
-    return <div>
-      <Input select={true} label='Trigger type' required={true} onChange={this.handleChange('type')}
-        value={type} variant='outlined'>
-        {Array.from(triggers.entries()).map((trigger, i) => (
-          <MenuItem key={i} value={trigger[0]}>
-            {trigger[1].displayName}
-          </MenuItem>
-        ))}
-      </Input>
+    const {
+      cron,
+      editCron,
+      endDate,
+      endTime,
+      hasEndDate,
+      hasStartDate,
+      intervalCategory,
+      intervalValue,
+      maxConcurrentRuns,
+      selectedDays,
+      startDate,
+      startTime,
+      type,
+    } = this.state;
 
+    return (
       <div>
-        <Input label='Maximum concurrent runs' required={true}
-          onChange={this.handleChange('maxConcurrentRuns')} value={maxConcurrentRuns}
-          variant='outlined' />
+        <Input
+          select={true}
+          label='Trigger type'
+          required={true}
+          onChange={this.handleChange('type')}
+          value={type}
+          variant='outlined'
+        >
+          {Array.from(triggers.entries()).map((trigger, i) => (
+            <MenuItem key={i} value={trigger[0]}>
+              {trigger[1].displayName}
+            </MenuItem>
+          ))}
+        </Input>
 
-        <div className={commonCss.flex}>
-          <FormControlLabel control={
-            <Checkbox checked={hasStartDate} color='primary'
-              onClick={this.handleChange('hasStartDate')} />}
-            label='Has start date' />
-          <Input label='Start date' type='date' onChange={this.handleChange('startDate')}
-            value={startDate} width={160} variant='outlined'
-            InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true}}
-            style={{ visibility: hasStartDate ? 'visible' : 'hidden' }} />
-          <Separator />
-          <Input label='Start time' type='time' onChange={this.handleChange('startTime')}
-            value={startTime} width={120} variant='outlined'
-            InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true}}
-            style={{ visibility: hasStartDate ? 'visible' : 'hidden' }} />
-        </div>
+        <div>
+          <Input
+            label='Maximum concurrent runs'
+            required={true}
+            onChange={this.handleChange('maxConcurrentRuns')}
+            value={maxConcurrentRuns}
+            variant='outlined'
+          />
+
+          <div className={commonCss.flex}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={hasStartDate}
+                  color='primary'
+                  onClick={this.handleChange('hasStartDate')}
+                />
+              }
+              label='Has start date'
+            />
+            <Input
+              label='Start date'
+              type='date'
+              onChange={this.handleChange('startDate')}
+              value={startDate}
+              width={160}
+              variant='outlined'
+              InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true }}
+              style={{ visibility: hasStartDate ? 'visible' : 'hidden' }}
+            />
+            <Separator />
+            <Input
+              label='Start time'
+              type='time'
+              onChange={this.handleChange('startTime')}
+              value={startTime}
+              width={120}
+              variant='outlined'
+              InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true }}
+              style={{ visibility: hasStartDate ? 'visible' : 'hidden' }}
+            />
+          </div>
+
+          <div className={commonCss.flex}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={hasEndDate}
+                  color='primary'
+                  onClick={this.handleChange('hasEndDate')}
+                />
+              }
+              label='Has end date'
+            />
+            <Input
+              label='End date'
+              type='date'
+              onChange={this.handleChange('endDate')}
+              value={endDate}
+              width={160}
+              style={{ visibility: hasEndDate ? 'visible' : 'hidden' }}
+              InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true }}
+              variant='outlined'
+            />
+            <Separator />
+            <Input
+              label='End time'
+              type='time'
+              onChange={this.handleChange('endTime')}
+              value={endTime}
+              width={120}
+              style={{ visibility: hasEndDate ? 'visible' : 'hidden' }}
+              InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true }}
+              variant='outlined'
+            />
+          </div>
 
-        <div className={commonCss.flex}>
-          <FormControlLabel control={
-            <Checkbox checked={hasEndDate} color='primary'
-              onClick={this.handleChange('hasEndDate')} />}
-            label='Has end date' />
-          <Input label='End date' type='date' onChange={this.handleChange('endDate')}
-            value={endDate} width={160} style={{ visibility: hasEndDate ? 'visible' : 'hidden' }}
-            InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true}}
-            variant='outlined' />
-          <Separator />
-          <Input label='End time' type='time' onChange={this.handleChange('endTime')}
-            value={endTime} width={120} style={{ visibility: hasEndDate ? 'visible' : 'hidden' }}
-            InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true}}
-            variant='outlined' />
+          <span className={commonCss.flex}>
+            Run every
+            {type === TriggerType.INTERVALED && (
+              <div className={commonCss.flex}>
+                <Separator />
+                <Input
+                  required={true}
+                  type='number'
+                  onChange={this.handleChange('intervalValue')}
+                  value={intervalValue}
+                  height={30}
+                  width={65}
+                  error={intervalValue < 1}
+                  variant='outlined'
+                />
+              </div>
+            )}
+            <Separator />
+            <Input
+              required={true}
+              select={true}
+              onChange={this.handleChange('intervalCategory')}
+              value={intervalCategory}
+              height={30}
+              width={95}
+              variant='outlined'
+            >
+              {Object.keys(PeriodicInterval).map((interval: PeriodicInterval, i) => (
+                <MenuItem key={i} value={PeriodicInterval[interval]}>
+                  {PeriodicInterval[interval] + (type === TriggerType.INTERVALED ? 's' : '')}
+                </MenuItem>
+              ))}
+            </Input>
+          </span>
         </div>
 
-        <span className={commonCss.flex}>
-          Run every
-          {type === TriggerType.INTERVALED && (
+        {type === TriggerType.CRON && (
+          <div>
+            {intervalCategory === PeriodicInterval.WEEK && (
+              <div>
+                <span>On:</span>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={this._isAllDaysChecked()}
+                      color='primary'
+                      onClick={this._toggleCheckAllDays.bind(this)}
+                    />
+                  }
+                  label='All'
+                />
+                <Separator />
+                {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
+                  <Button
+                    variant='fab'
+                    mini={true}
+                    key={i}
+                    onClick={() => this._toggleDay(i)}
+                    color={selectedDays[i] ? 'primary' : 'secondary'}
+                  >
+                    {day}
+                  </Button>
+                ))}
+              </div>
+            )}
+
             <div className={commonCss.flex}>
-              <Separator />
-              <Input required={true} type='number' onChange={this.handleChange('intervalValue')}
-                value={intervalValue} height={30} width={65} error={intervalValue < 1}
-                variant='outlined' />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={editCron}
+                    color='primary'
+                    onClick={this.handleChange('editCron')}
+                  />
+                }
+                label={
+                  <span>
+                    Allow editing cron expression. ( format is specified{' '}
+                    <a href='https://godoc.org/github.com/robfig/cron#hdr-CRON_Expression_Format'>
+                      here
+                    </a>
+                    )
+                  </span>
+                }
+              />
             </div>
-          )}
 
-          <Separator />
-          <Input required={true} select={true} onChange={this.handleChange('intervalCategory')}
-            value={intervalCategory} height={30} width={95} variant='outlined' >
-            {Object.keys(PeriodicInterval).map((interval: PeriodicInterval, i) => (
-              <MenuItem key={i} value={PeriodicInterval[interval]}>
-                {PeriodicInterval[interval] + (type === TriggerType.INTERVALED ? 's' : '')}
-              </MenuItem>
-            ))}
-          </Input>
-        </span>
-      </div>
+            <Input
+              label='cron expression'
+              onChange={this.handleChange('cron')}
+              value={cron}
+              width={300}
+              disabled={!editCron}
+              variant='outlined'
+            />
 
-      {type === TriggerType.CRON && (
-        <div>
-          {intervalCategory === PeriodicInterval.WEEK && (
-            <div>
-              <span>On:</span>
-              <FormControlLabel control={
-                <Checkbox checked={this._isAllDaysChecked()} color='primary'
-                  onClick={this._toggleCheckAllDays.bind(this)} />
-              } label='All' />
-              <Separator />
-              {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
-                <Button variant='fab' mini={true} key={i} onClick={() => this._toggleDay(i)}
-                  color={selectedDays[i] ? 'primary' : 'secondary'}>{day}</Button>
-              ))}
-            </div>
-          )}
-
-          <div className={commonCss.flex}>
-            <FormControlLabel control={
-              <Checkbox checked={editCron} color='primary' onClick={this.handleChange('editCron')} />
-            } label={
-              <span>Allow editing cron expression. (
-              format is specified <a href='https://godoc.org/github.com/robfig/cron#hdr-CRON_Expression_Format'>
-                  here</a>
-                )</span>
-            } />
+            <div>Note: Start and end dates/times are handled outside of cron.</div>
           </div>
-
-          <Input label='cron expression' onChange={this.handleChange('cron')} value={cron}
-            width={300} disabled={!editCron} variant='outlined'/>
-
-          <div>Note: Start and end dates/times are handled outside of cron.</div>
-        </div>
-      )}
-    </div>;
+        )}
+      </div>
+    );
   }
 
   public handleChange = (name: string) => (event: any) => {
@@ -206,14 +318,29 @@ export default class Trigger extends React.Component<TriggerProps, TriggerState>
     const value = target.type === 'checkbox' ? target.checked : target.value;
     // Make sure the desired field is set on the state object first, then
     // use the state values to compute the new trigger
-    this.setState({
-      [name]: value,
-    } as any, this._updateTrigger.bind(this));
-  }
+    this.setState(
+      {
+        [name]: value,
+      } as any,
+      this._updateTrigger.bind(this),
+    );
+  };
 
   private _updateTrigger(): void {
-    const { hasStartDate, hasEndDate, startDate, startTime, endDate, endTime, editCron,
-      intervalCategory, intervalValue, type, cron, selectedDays } = this.state;
+    const {
+      hasStartDate,
+      hasEndDate,
+      startDate,
+      startTime,
+      endDate,
+      endTime,
+      editCron,
+      intervalCategory,
+      intervalValue,
+      type,
+      cron,
+      selectedDays,
+    } = this.state;
 
     const startDateTime = pickersToDate(hasStartDate, startDate, startTime);
     const endDateTime = pickersToDate(hasEndDate, endDate, endTime);
@@ -221,16 +348,25 @@ export default class Trigger extends React.Component<TriggerProps, TriggerState>
     // TODO: Why build the cron string unless the TriggerType is not CRON?
     // Unless cron editing is enabled, calculate the new cron string, set it in state,
     // then use it to build new trigger object and notify the parent
-    this.setState({
-      cron: editCron ? cron : buildCron(startDateTime, intervalCategory, selectedDays),
-    }, () => {
-      const trigger = buildTrigger(
-        intervalCategory, intervalValue, startDateTime, endDateTime, type, this.state.cron);
+    this.setState(
+      {
+        cron: editCron ? cron : buildCron(startDateTime, intervalCategory, selectedDays),
+      },
+      () => {
+        const trigger = buildTrigger(
+          intervalCategory,
+          intervalValue,
+          startDateTime,
+          endDateTime,
+          type,
+          this.state.cron,
+        );
 
-      if (this.props.onChange) {
-        this.props.onChange(trigger, trigger ? this.state.maxConcurrentRuns : undefined);
-      }
-    });
+        if (this.props.onChange) {
+          this.props.onChange(trigger, trigger ? this.state.maxConcurrentRuns : undefined);
+        }
+      },
+    );
   }
 
   private _isAllDaysChecked(): boolean {
@@ -250,12 +386,18 @@ export default class Trigger extends React.Component<TriggerProps, TriggerState>
     const newDays = this.state.selectedDays;
     newDays[index] = !newDays[index];
     const startDate = pickersToDate(
-      this.state.hasStartDate, this.state.startDate, this.state.startTime);
+      this.state.hasStartDate,
+      this.state.startDate,
+      this.state.startTime,
+    );
     const cron = buildCron(startDate, this.state.intervalCategory, this.state.selectedDays);
 
-    this.setState({
-      cron,
-      selectedDays: newDays,
-    }, this._updateTrigger.bind(this));
+    this.setState(
+      {
+        cron,
+        selectedDays: newDays,
+      },
+      this._updateTrigger.bind(this),
+    );
   }
 }
diff --git a/frontend/src/components/UploadPipelineDialog.test.tsx b/frontend/src/components/UploadPipelineDialog.test.tsx
index 7cae68c60307..a6725d60cd81 100644
--- a/frontend/src/components/UploadPipelineDialog.test.tsx
+++ b/frontend/src/components/UploadPipelineDialog.test.tsx
@@ -74,7 +74,9 @@ describe('UploadPipelineDialog', () => {
     const spy = jest.fn();
     tree = shallow(<UploadPipelineDialog open={false} onClose={spy} />);
     (tree.instance() as any)._dropzoneRef = { current: { open: () => null } };
-    (tree.instance() as UploadPipelineDialog).handleChange('uploadPipelineName')({ target: { value: 'test name' } });
+    (tree.instance() as UploadPipelineDialog).handleChange('uploadPipelineName')({
+      target: { value: 'test name' },
+    });
     tree.find('#confirmUploadBtn').simulate('click');
     expect(spy).toHaveBeenLastCalledWith(true, 'test name', null, '', ImportMethod.LOCAL, '');
   });
diff --git a/frontend/src/components/UploadPipelineDialog.tsx b/frontend/src/components/UploadPipelineDialog.tsx
index fed9fb2d9db5..ddbd9ec8b6d5 100644
--- a/frontend/src/components/UploadPipelineDialog.tsx
+++ b/frontend/src/components/UploadPipelineDialog.tsx
@@ -28,6 +28,7 @@ import Radio from '@material-ui/core/Radio';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import { padding, commonCss, zIndex, color } from '../Css';
 import { stylesheet, classes } from 'typestyle';
+import { ExternalLink } from '../atoms/ExternalLink';
 
 const css = stylesheet({
   dropOverlay: {
@@ -54,7 +55,14 @@ export enum ImportMethod {
 
 interface UploadPipelineDialogProps {
   open: boolean;
-  onClose: (confirmed: boolean, name: string, file: File | null, url: string, method: ImportMethod, description?: string) => Promise<boolean>;
+  onClose: (
+    confirmed: boolean,
+    name: string,
+    file: File | null,
+    url: string,
+    method: ImportMethod,
+    description?: string,
+  ) => Promise<boolean>;
 }
 
 interface UploadPipelineDialogState {
@@ -68,7 +76,10 @@ interface UploadPipelineDialogState {
   uploadPipelineName: string;
 }
 
-class UploadPipelineDialog extends React.Component<UploadPipelineDialogProps, UploadPipelineDialogState> {
+class UploadPipelineDialog extends React.Component<
+  UploadPipelineDialogProps,
+  UploadPipelineDialogState
+> {
   private _dropzoneRef = React.createRef<Dropzone & HTMLDivElement>();
 
   constructor(props: any) {
@@ -88,69 +99,110 @@ class UploadPipelineDialog extends React.Component<UploadPipelineDialogProps, Up
 
   public render(): JSX.Element {
     const {
-      dropzoneActive, file, fileName, fileUrl, importMethod, uploadPipelineName, busy
+      dropzoneActive,
+      file,
+      fileName,
+      fileUrl,
+      importMethod,
+      uploadPipelineName,
+      busy,
     } = this.state;
 
     return (
-      <Dialog id='uploadDialog' onClose={() => this._uploadDialogClosed(false)}
-        open={this.props.open} classes={{ paper: css.root }}>
+      <Dialog
+        id='uploadDialog'
+        onClose={() => this._uploadDialogClosed(false)}
+        open={this.props.open}
+        classes={{ paper: css.root }}
+      >
         <DialogTitle>Upload and name your pipeline</DialogTitle>
 
         <div className={padding(20, 'lr')}>
           <div className={classes(commonCss.flex, padding(10, 'b'))}>
-            <FormControlLabel id='uploadLocalFileBtn' label='Upload a file' checked={importMethod === ImportMethod.LOCAL}
-              control={<Radio color='primary' />} onChange={() => this.setState({ importMethod: ImportMethod.LOCAL })} />
-            <FormControlLabel id='uploadFromUrlBtn' label='Import by URL' checked={importMethod === ImportMethod.URL}
-              control={<Radio color='primary' />} onChange={() => this.setState({ importMethod: ImportMethod.URL })} />
+            <FormControlLabel
+              id='uploadLocalFileBtn'
+              label='Upload a file'
+              checked={importMethod === ImportMethod.LOCAL}
+              control={<Radio color='primary' />}
+              onChange={() => this.setState({ importMethod: ImportMethod.LOCAL })}
+            />
+            <FormControlLabel
+              id='uploadFromUrlBtn'
+              label='Import by URL'
+              checked={importMethod === ImportMethod.URL}
+              control={<Radio color='primary' />}
+              onChange={() => this.setState({ importMethod: ImportMethod.URL })}
+            />
           </div>
 
           {importMethod === ImportMethod.LOCAL && (
             <React.Fragment>
-              <Dropzone id='dropZone' disableClick={true}
-                onDrop={this._onDrop.bind(this)} onDragEnter={this._onDropzoneDragEnter.bind(this)}
-                onDragLeave={this._onDropzoneDragLeave.bind(this)} style={{ position: 'relative' }}
-                ref={this._dropzoneRef} inputProps={{ tabIndex: -1 }}>
-
-                {dropzoneActive && (
-                  <div className={css.dropOverlay}>Drop files..</div>
-                )}
+              <Dropzone
+                id='dropZone'
+                disableClick={true}
+                onDrop={this._onDrop.bind(this)}
+                onDragEnter={this._onDropzoneDragEnter.bind(this)}
+                onDragLeave={this._onDropzoneDragLeave.bind(this)}
+                style={{ position: 'relative' }}
+                ref={this._dropzoneRef}
+                inputProps={{ tabIndex: -1 }}
+              >
+                {dropzoneActive && <div className={css.dropOverlay}>Drop files..</div>}
 
                 <div className={padding(10, 'b')}>
-                  Choose a pipeline package file from your computer, and give the pipeline a unique name.
+                  Choose a pipeline package file from your computer, and give the pipeline a unique
+                  name.
                   <br />
                   You can also drag and drop the file here.
                 </div>
-                <Input onChange={this.handleChange('fileName')} value={fileName} required={true}
-                  label='File' variant='outlined'
+                <DocumentationCompilePipeline />
+                <Input
+                  onChange={this.handleChange('fileName')}
+                  value={fileName}
+                  required={true}
+                  label='File'
+                  variant='outlined'
                   InputProps={{
                     endAdornment: (
                       <InputAdornment position='end'>
-                        <Button color='secondary' onClick={() => this._dropzoneRef.current!.open()}
-                          style={{ padding: '3px 5px', margin: 0, whiteSpace: 'nowrap' }}>
+                        <Button
+                          color='secondary'
+                          onClick={() => this._dropzoneRef.current!.open()}
+                          style={{ padding: '3px 5px', margin: 0, whiteSpace: 'nowrap' }}
+                        >
                           Choose file
-                      </Button>
+                        </Button>
                       </InputAdornment>
                     ),
                     readOnly: true,
-                  }} />
+                  }}
+                />
               </Dropzone>
             </React.Fragment>
           )}
 
           {importMethod === ImportMethod.URL && (
             <React.Fragment>
-              <div className={padding(10, 'b')}>
-                URL must be publicly accessible.
-              </div>
-              <Input onChange={this.handleChange('fileUrl')} value={fileUrl} required={true}
-                label='URL' variant='outlined' />
+              <div className={padding(10, 'b')}>URL must be publicly accessible.</div>
+              <DocumentationCompilePipeline />
+              <Input
+                onChange={this.handleChange('fileUrl')}
+                value={fileUrl}
+                required={true}
+                label='URL'
+                variant='outlined'
+              />
             </React.Fragment>
           )}
 
-          <Input id='uploadFileName' label='Pipeline name'
+          <Input
+            id='uploadFileName'
+            label='Pipeline name'
             onChange={this.handleChange('uploadPipelineName')}
-            required={true} value={uploadPipelineName} variant='outlined' />
-
+            required={true}
+            value={uploadPipelineName}
+            variant='outlined'
+          />
         </div>
 
         {/* <Input label='Pipeline description'
@@ -161,9 +213,15 @@ class UploadPipelineDialog extends React.Component<UploadPipelineDialogProps, Up
           <Button id='cancelUploadBtn' onClick={() => this._uploadDialogClosed.bind(this)(false)}>
             Cancel
           </Button>
-          <BusyButton id='confirmUploadBtn' onClick={() => this._uploadDialogClosed.bind(this)(true)}
-            title='Upload' busy={busy} disabled={
-              !uploadPipelineName || (importMethod === ImportMethod.LOCAL ? !file : !fileUrl)} />
+          <BusyButton
+            id='confirmUploadBtn'
+            onClick={() => this._uploadDialogClosed.bind(this)(true)}
+            title='Upload'
+            busy={busy}
+            disabled={
+              !uploadPipelineName || (importMethod === ImportMethod.LOCAL ? !file : !fileUrl)
+            }
+          />
         </DialogActions>
       </Dialog>
     );
@@ -173,7 +231,7 @@ class UploadPipelineDialog extends React.Component<UploadPipelineDialogProps, Up
     this.setState({
       [name]: (event.target as TextFieldProps).value,
     } as any);
-  }
+  };
 
   private _onDropzoneDragEnter(): void {
     this.setState({ dropzoneActive: true });
@@ -222,3 +280,13 @@ class UploadPipelineDialog extends React.Component<UploadPipelineDialogProps, Up
 }
 
 export default UploadPipelineDialog;
+
+const DocumentationCompilePipeline: React.FC = () => (
+  <div className={padding(10, 'b')}>
+    For expected file format, refer to{' '}
+    <ExternalLink href='https://www.kubeflow.org/docs/pipelines/sdk/build-component/#compile-the-pipeline'>
+      Compile Pipeline Documentation
+    </ExternalLink>
+    .
+  </div>
+);
diff --git a/frontend/src/components/__snapshots__/CustomTable.test.tsx.snap b/frontend/src/components/__snapshots__/CustomTable.test.tsx.snap
index 5f0df2ad04fd..f97473f24178 100644
--- a/frontend/src/components/__snapshots__/CustomTable.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/CustomTable.test.tsx.snap
@@ -55,11 +55,11 @@ exports[`CustomTable renders a collapsed row 1`] = `
         indeterminate={false}
         onChange={[Function]}
       />
+      <Component
+        orientation="horizontal"
+        units={40}
+      />
     </div>
-    <Component
-      orientation="horizontal"
-      units={40}
-    />
     <div
       className="columnName"
       key="0"
@@ -68,6 +68,7 @@ exports[`CustomTable renders a collapsed row 1`] = `
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -90,6 +91,7 @@ exports[`CustomTable renders a collapsed row 1`] = `
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -277,10 +279,14 @@ exports[`CustomTable renders a collapsed row when selection is disabled 1`] = `
   <div
     className="header"
   >
-    <Component
-      orientation="horizontal"
-      units={40}
-    />
+    <div
+      className="columnName cell selectionToggle"
+    >
+      <Component
+        orientation="horizontal"
+        units={40}
+      />
+    </div>
     <div
       className="columnName"
       key="0"
@@ -289,6 +295,7 @@ exports[`CustomTable renders a collapsed row when selection is disabled 1`] = `
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -311,6 +318,7 @@ exports[`CustomTable renders a collapsed row when selection is disabled 1`] = `
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -512,10 +520,9 @@ exports[`CustomTable renders a table with sorting disabled 1`] = `
           "width": "50%",
         }
       }
+      title="col1"
     >
-      <div>
-        col1
-      </div>
+      col1
     </div>
     <div
       className="columnName"
@@ -525,10 +532,9 @@ exports[`CustomTable renders a table with sorting disabled 1`] = `
           "width": "50%",
         }
       }
+      title="col2"
     >
-      <div>
-        col2
-      </div>
+      col2
     </div>
   </div>
   <div
@@ -757,6 +763,7 @@ exports[`CustomTable renders an expanded row 1`] = `
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -779,6 +786,7 @@ exports[`CustomTable renders an expanded row 1`] = `
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -969,11 +977,11 @@ exports[`CustomTable renders an expanded row with expanded component below it 1`
         indeterminate={false}
         onChange={[Function]}
       />
+      <Component
+        orientation="horizontal"
+        units={40}
+      />
     </div>
-    <Component
-      orientation="horizontal"
-      units={40}
-    />
     <div
       className="columnName"
       key="0"
@@ -982,6 +990,7 @@ exports[`CustomTable renders an expanded row with expanded component below it 1`
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -1004,6 +1013,7 @@ exports[`CustomTable renders an expanded row with expanded component below it 1`
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -1214,6 +1224,7 @@ exports[`CustomTable renders columns with specified widths 1`] = `
           "width": "75%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -1236,6 +1247,7 @@ exports[`CustomTable renders columns with specified widths 1`] = `
           "width": "25%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -1528,6 +1540,7 @@ exports[`CustomTable renders new rows after clicking next page, and enables prev
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -1550,6 +1563,7 @@ exports[`CustomTable renders new rows after clicking next page, and enables prev
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -1748,6 +1762,7 @@ exports[`CustomTable renders new rows after clicking previous page, and enables
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -1770,6 +1785,7 @@ exports[`CustomTable renders new rows after clicking previous page, and enables
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -2011,6 +2027,7 @@ exports[`CustomTable renders some columns with descending sort order on first co
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -2034,6 +2051,7 @@ exports[`CustomTable renders some columns with descending sort order on first co
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -2188,6 +2206,7 @@ exports[`CustomTable renders some columns with equal widths without rows 1`] = `
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -2210,6 +2229,7 @@ exports[`CustomTable renders some columns with equal widths without rows 1`] = `
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -2364,6 +2384,7 @@ exports[`CustomTable renders some rows 1`] = `
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -2386,6 +2407,7 @@ exports[`CustomTable renders some rows 1`] = `
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -3106,6 +3128,7 @@ exports[`CustomTable renders without the checkboxes if disableSelection is true
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -3128,6 +3151,7 @@ exports[`CustomTable renders without the checkboxes if disableSelection is true
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -3353,6 +3377,7 @@ exports[`CustomTable updates the filter string in state when the filter box inpu
           "width": "50%",
         }
       }
+      title="col1"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
@@ -3375,6 +3400,7 @@ exports[`CustomTable updates the filter string in state when the filter box inpu
           "width": "50%",
         }
       }
+      title="col2"
     >
       <WithStyles(Tooltip)
         enterDelay={300}
diff --git a/frontend/src/components/__snapshots__/Description.test.tsx.snap b/frontend/src/components/__snapshots__/Description.test.tsx.snap
new file mode 100644
index 000000000000..d2e6a9c54bb8
--- /dev/null
+++ b/frontend/src/components/__snapshots__/Description.test.tsx.snap
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Description When in inline mode renders markdown link 1`] = `
+<a
+  class="link"
+  href="https://www.google.com"
+  rel="noreferrer noopener"
+  target="_blank"
+>
+  google
+</a>
+`;
+
+exports[`Description When in inline mode renders markdown list as pure text 1`] = `
+<span>
+  
+* abc
+* def
+</span>
+`;
+
+exports[`Description When in inline mode renders paragraphs separated by space 1`] = `
+<span>
+  
+Paragraph 1
+
+Paragraph 2
+
+</span>
+`;
+
+exports[`Description When in inline mode renders pure text 1`] = `
+<span>
+  this is a line of pure text
+</span>
+`;
+
+exports[`Description When in inline mode renders raw link 1`] = `
+<a
+  class="link"
+  href="https://www.google.com"
+  rel="noreferrer noopener"
+  target="_blank"
+>
+  https://www.google.com
+</a>
+`;
+
+exports[`Description When in normal mode renders empty string 1`] = `<span />`;
+
+exports[`Description When in normal mode renders markdown link 1`] = `
+<a
+  class="link"
+  href="https://www.google.com"
+  rel="noreferrer noopener"
+  target="_blank"
+>
+  google
+</a>
+`;
+
+exports[`Description When in normal mode renders markdown list as list 1`] = `
+<ul>
+  <li>
+    abc
+  </li>
+  <li>
+    def
+  </li>
+</ul>
+`;
+
+exports[`Description When in normal mode renders paragraphs 1`] = `
+<div>
+  <p>
+    Paragraph 1
+  </p>
+  <p>
+    Paragraph 2
+  </p>
+</div>
+`;
+
+exports[`Description When in normal mode renders pure text 1`] = `
+<span>
+  this is a line of pure text
+</span>
+`;
+
+exports[`Description When in normal mode renders raw link 1`] = `
+<a
+  class="link"
+  href="https://www.google.com"
+  rel="noreferrer noopener"
+  target="_blank"
+>
+  https://www.google.com
+</a>
+`;
diff --git a/frontend/src/components/__snapshots__/DetailsTable.test.tsx.snap b/frontend/src/components/__snapshots__/DetailsTable.test.tsx.snap
index fd6e86405125..725d83649e4f 100644
--- a/frontend/src/components/__snapshots__/DetailsTable.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/DetailsTable.test.tsx.snap
@@ -215,6 +215,30 @@ exports[`DetailsTable does render arrays as JSON 2`] = `
 </Fragment>
 `;
 
+exports[`DetailsTable does render values with the provided valueComponent 1`] = `
+<Fragment>
+  <div>
+    <div
+      className="row"
+      key="0"
+    >
+      <span
+        className="key"
+      >
+        key
+      </span>
+      <span
+        className="valueText"
+      >
+        <a>
+          foobar
+        </a>
+      </span>
+    </div>
+  </div>
+</Fragment>
+`;
+
 exports[`DetailsTable shows a row with a title 1`] = `
 <Fragment>
   <div
diff --git a/frontend/src/components/__snapshots__/LogViewer.test.tsx.snap b/frontend/src/components/__snapshots__/LogViewer.test.tsx.snap
index d3045f95a977..3bf9b280bce7 100644
--- a/frontend/src/components/__snapshots__/LogViewer.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/LogViewer.test.tsx.snap
@@ -2,21 +2,17 @@
 
 exports[`LogViewer does not linkify non http/https urls 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         this string: gs://path is a GCS path
       </span>
@@ -27,39 +23,31 @@ exports[`LogViewer does not linkify non http/https urls 1`] = `
 
 exports[`LogViewer linkifies standalone https urls 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         this string: 
       </span>
     </span>
-    <span
-      key="1"
-    >
+    <span>
       <a
-        className="a"
+        class="a"
         href="https://path.com"
         target="_blank"
       >
         https://path.com
       </a>
     </span>
-    <span
-      key="2"
-    >
+    <span>
       <span>
          is a url
       </span>
@@ -70,39 +58,31 @@ exports[`LogViewer linkifies standalone https urls 1`] = `
 
 exports[`LogViewer linkifies standalone urls 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         this string: 
       </span>
     </span>
-    <span
-      key="1"
-    >
+    <span>
       <a
-        className="a"
+        class="a"
         href="http://path.com"
         target="_blank"
       >
         http://path.com
       </a>
     </span>
-    <span
-      key="2"
-    >
+    <span>
       <span>
          is a url
       </span>
@@ -113,39 +93,31 @@ exports[`LogViewer linkifies standalone urls 1`] = `
 
 exports[`LogViewer linkifies substring urls 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         this string:
       </span>
     </span>
-    <span
-      key="1"
-    >
+    <span>
       <a
-        className="a"
+        class="a"
         href="http://path.com"
         target="_blank"
       >
         http://path.com
       </a>
     </span>
-    <span
-      key="2"
-    >
+    <span>
       <span>
          is a url
       </span>
@@ -156,21 +128,17 @@ exports[`LogViewer linkifies substring urls 1`] = `
 
 exports[`LogViewer renders a multi-line log 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         Lorem Ipsum is simply dummy text of the printing and typesetting
       </span>
@@ -181,31 +149,19 @@ exports[`LogViewer renders a multi-line log 1`] = `
 
 exports[`LogViewer renders a row with error 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={
-      Object {
-        "backgroundColor": "#700000",
-        "color": "white",
-      }
-    }
+    class="number"
+    style="background-color: rgb(112, 0, 0); color: white;"
   >
     1
   </span>
   <span
-    className="line"
-    style={
-      Object {
-        "backgroundColor": "#700000",
-        "color": "white",
-      }
-    }
+    class="line"
+    style="background-color: rgb(112, 0, 0); color: white;"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         line1 with error
       </span>
@@ -216,31 +172,19 @@ exports[`LogViewer renders a row with error 1`] = `
 
 exports[`LogViewer renders a row with error word as substring 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={
-      Object {
-        "backgroundColor": "#700000",
-        "color": "white",
-      }
-    }
+    class="number"
+    style="background-color: rgb(112, 0, 0); color: white;"
   >
     1
   </span>
   <span
-    className="line"
-    style={
-      Object {
-        "backgroundColor": "#700000",
-        "color": "white",
-      }
-    }
+    class="line"
+    style="background-color: rgb(112, 0, 0); color: white;"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         line1 with errorWord
       </span>
@@ -251,21 +195,17 @@ exports[`LogViewer renders a row with error word as substring 1`] = `
 
 exports[`LogViewer renders a row with given index as line number 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         line1
       </span>
@@ -276,31 +216,19 @@ exports[`LogViewer renders a row with given index as line number 1`] = `
 
 exports[`LogViewer renders a row with upper case error 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={
-      Object {
-        "backgroundColor": "#700000",
-        "color": "white",
-      }
-    }
+    class="number"
+    style="background-color: rgb(112, 0, 0); color: white;"
   >
     1
   </span>
   <span
-    className="line"
-    style={
-      Object {
-        "backgroundColor": "#700000",
-        "color": "white",
-      }
-    }
+    class="line"
+    style="background-color: rgb(112, 0, 0); color: white;"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         line1 with ERROR
       </span>
@@ -311,31 +239,19 @@ exports[`LogViewer renders a row with upper case error 1`] = `
 
 exports[`LogViewer renders a row with upper case warning 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={
-      Object {
-        "backgroundColor": "#545400",
-        "color": "white",
-      }
-    }
+    class="number"
+    style="background-color: rgb(84, 84, 0); color: white;"
   >
     1
   </span>
   <span
-    className="line"
-    style={
-      Object {
-        "backgroundColor": "#545400",
-        "color": "white",
-      }
-    }
+    class="line"
+    style="background-color: rgb(84, 84, 0); color: white;"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         line1 with WARNING
       </span>
@@ -346,31 +262,19 @@ exports[`LogViewer renders a row with upper case warning 1`] = `
 
 exports[`LogViewer renders a row with warn 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={
-      Object {
-        "backgroundColor": "#545400",
-        "color": "white",
-      }
-    }
+    class="number"
+    style="background-color: rgb(84, 84, 0); color: white;"
   >
     1
   </span>
   <span
-    className="line"
-    style={
-      Object {
-        "backgroundColor": "#545400",
-        "color": "white",
-      }
-    }
+    class="line"
+    style="background-color: rgb(84, 84, 0); color: white;"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         line1 with warn
       </span>
@@ -381,31 +285,19 @@ exports[`LogViewer renders a row with warn 1`] = `
 
 exports[`LogViewer renders a row with warning 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={
-      Object {
-        "backgroundColor": "#545400",
-        "color": "white",
-      }
-    }
+    class="number"
+    style="background-color: rgb(84, 84, 0); color: white;"
   >
     1
   </span>
   <span
-    className="line"
-    style={
-      Object {
-        "backgroundColor": "#545400",
-        "color": "white",
-      }
-    }
+    class="line"
+    style="background-color: rgb(84, 84, 0); color: white;"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         line1 with warning
       </span>
@@ -416,31 +308,19 @@ exports[`LogViewer renders a row with warning 1`] = `
 
 exports[`LogViewer renders a row with warning word as substring 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={
-      Object {
-        "backgroundColor": "#545400",
-        "color": "white",
-      }
-    }
+    class="number"
+    style="background-color: rgb(84, 84, 0); color: white;"
   >
     1
   </span>
   <span
-    className="line"
-    style={
-      Object {
-        "backgroundColor": "#545400",
-        "color": "white",
-      }
-    }
+    class="line"
+    style="background-color: rgb(84, 84, 0); color: white;"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         line1 with warning:something
       </span>
@@ -462,21 +342,17 @@ exports[`LogViewer renders an empty container when no logs passed 1`] = `
 
 exports[`LogViewer renders one log line 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         first line
       </span>
@@ -487,21 +363,17 @@ exports[`LogViewer renders one log line 1`] = `
 
 exports[`LogViewer renders one long line without breaking 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         Lorem Ipsum is simply dummy text of the printing and typesettingindustry. Lorem Ipsum has been the industry's standard dummy text eversince the 1500s, when an unknown printer took a galley of type andscrambled it to make a type specimen book. It has survived not only fivecenturies, but also the leap into electronic typesetting, remainingessentially unchanged. It was popularised in the 1960s with the releaseof Letraset sheets containing Lorem Ipsum passages, and more recentlywith desktop publishing software like Aldus PageMaker including versionsof Lorem Ipsum.
       </span>
@@ -512,21 +384,17 @@ exports[`LogViewer renders one long line without breaking 1`] = `
 
 exports[`LogViewer renders two log lines 1`] = `
 <div
-  className="line"
+  class="line"
 >
   <span
-    className="number"
-    style={Object {}}
+    class="number"
   >
     1
   </span>
   <span
-    className="line"
-    style={Object {}}
+    class="line"
   >
-    <span
-      key="0"
-    >
+    <span>
       <span>
         first line
       </span>
diff --git a/frontend/src/components/__snapshots__/MinioArtifactLink.test.tsx.snap b/frontend/src/components/__snapshots__/MinioArtifactLink.test.tsx.snap
new file mode 100644
index 000000000000..fb03d0878d4e
--- /dev/null
+++ b/frontend/src/components/__snapshots__/MinioArtifactLink.test.tsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MinioArtifactLink handles empty artifact 1`] = `null`;
+
+exports[`MinioArtifactLink handles invalid artifact: no bucket 1`] = `null`;
+
+exports[`MinioArtifactLink handles invalid artifact: no key 1`] = `null`;
+
+exports[`MinioArtifactLink handles minio artifact 1`] = `
+<a
+  href="artifacts/get?source=minio&bucket=foo&key=bar"
+  rel="noreferrer noopener"
+  target="_blank"
+  title="minio://foo/bar"
+>
+  minio://foo/bar
+</a>
+`;
+
+exports[`MinioArtifactLink handles null artifact 1`] = `null`;
+
+exports[`MinioArtifactLink handles s3 artifact 1`] = `
+<a
+  href="artifacts/get?source=s3&bucket=foo&key=bar"
+  rel="noreferrer noopener"
+  target="_blank"
+  title="s3://foo/bar"
+>
+  s3://foo/bar
+</a>
+`;
+
+exports[`MinioArtifactLink handles undefined artifact 1`] = `null`;
diff --git a/frontend/src/components/__snapshots__/SideNav.test.tsx.snap b/frontend/src/components/__snapshots__/SideNav.test.tsx.snap
index a562766e3680..ddf3c9d3feee 100644
--- a/frontend/src/components/__snapshots__/SideNav.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/SideNav.test.tsx.snap
@@ -174,6 +174,27 @@ exports[`SideNav populates the display build information using the response from
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -382,6 +403,27 @@ exports[`SideNav renders Pipelines as active page 1`] = `
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -569,6 +611,27 @@ exports[`SideNav renders Pipelines as active when on PipelineDetails page 1`] =
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -756,6 +819,27 @@ exports[`SideNav renders collapsed state 1`] = `
     <hr
       className="separator collapsedSeparator"
     />
+    <ExternalUri
+      collapsed={true}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={true}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={true}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator collapsedSeparator"
+    />
     <WithStyles(IconButton)
       className="chevron collapsedChevron"
       onClick={[Function]}
@@ -943,6 +1027,27 @@ exports[`SideNav renders expanded state 1`] = `
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -1130,6 +1235,27 @@ exports[`SideNav renders experiments as active page 1`] = `
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -1317,6 +1443,27 @@ exports[`SideNav renders experiments as active page when on AllRuns page 1`] = `
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -1504,6 +1651,27 @@ exports[`SideNav renders experiments as active page when on Compare page 1`] = `
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -1691,6 +1859,27 @@ exports[`SideNav renders experiments as active page when on NewExperiment page 1
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -1878,6 +2067,27 @@ exports[`SideNav renders experiments as active page when on NewRun page 1`] = `
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -2065,6 +2275,27 @@ exports[`SideNav renders experiments as active page when on RecurringRunDetails
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -2252,6 +2483,27 @@ exports[`SideNav renders experiments as active page when on RunDetails page 1`]
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -2439,6 +2691,27 @@ exports[`SideNav renders experiments as active when on ExperimentDetails page 1`
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
@@ -2662,6 +2935,27 @@ exports[`SideNav show jupyterhub link if accessible 1`] = `
     <hr
       className="separator"
     />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Documentation"
+      to="https://www.kubeflow.org/docs/pipelines/"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="Github Repo"
+      to="https://github.com/kubeflow/pipelines"
+    />
+    <ExternalUri
+      collapsed={false}
+      icon={[Function]}
+      title="AI Hub Samples"
+      to="https://aihub.cloud.google.com/u/0/s?category=pipeline"
+    />
+    <hr
+      className="separator"
+    />
     <WithStyles(IconButton)
       className="chevron"
       onClick={[Function]}
diff --git a/frontend/src/components/__snapshots__/Trigger.test.tsx.snap b/frontend/src/components/__snapshots__/Trigger.test.tsx.snap
index 610b264b363a..447685888608 100644
--- a/frontend/src/components/__snapshots__/Trigger.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/Trigger.test.tsx.snap
@@ -285,7 +285,8 @@ exports[`Trigger enables a single day on click 1`] = `
         }
         label={
           <span>
-            Allow editing cron expression. ( format is specified 
+            Allow editing cron expression. ( format is specified
+             
             <a
               href="https://godoc.org/github.com/robfig/cron#hdr-CRON_Expression_Format"
             >
@@ -596,7 +597,8 @@ exports[`Trigger renders all week days enabled 1`] = `
         }
         label={
           <span>
-            Allow editing cron expression. ( format is specified 
+            Allow editing cron expression. ( format is specified
+             
             <a
               href="https://godoc.org/github.com/robfig/cron#hdr-CRON_Expression_Format"
             >
@@ -1038,7 +1040,8 @@ exports[`Trigger renders periodic schedule controls if the trigger type is CRON
         }
         label={
           <span>
-            Allow editing cron expression. ( format is specified 
+            Allow editing cron expression. ( format is specified
+             
             <a
               href="https://godoc.org/github.com/robfig/cron#hdr-CRON_Expression_Format"
             >
@@ -1349,7 +1352,8 @@ exports[`Trigger renders week days if the trigger type is CRON and interval is w
         }
         label={
           <span>
-            Allow editing cron expression. ( format is specified 
+            Allow editing cron expression. ( format is specified
+             
             <a
               href="https://godoc.org/github.com/robfig/cron#hdr-CRON_Expression_Format"
             >
diff --git a/frontend/src/components/__snapshots__/UploadPipelineDialog.test.tsx.snap b/frontend/src/components/__snapshots__/UploadPipelineDialog.test.tsx.snap
index ca88139a5d3c..8b5a590d9e88 100644
--- a/frontend/src/components/__snapshots__/UploadPipelineDialog.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/UploadPipelineDialog.test.tsx.snap
@@ -48,6 +48,7 @@ exports[`UploadPipelineDialog renders alternate UI for uploading via URL 1`] = `
     >
       URL must be publicly accessible.
     </div>
+    <DocumentationCompilePipeline />
     <Component
       label="URL"
       onChange={[Function]}
@@ -161,6 +162,7 @@ exports[`UploadPipelineDialog renders an active dropzone 1`] = `
         <br />
         You can also drag and drop the file here.
       </div>
+      <DocumentationCompilePipeline />
       <Component
         InputProps={
           Object {
@@ -292,6 +294,7 @@ exports[`UploadPipelineDialog renders closed 1`] = `
         <br />
         You can also drag and drop the file here.
       </div>
+      <DocumentationCompilePipeline />
       <Component
         InputProps={
           Object {
@@ -423,6 +426,7 @@ exports[`UploadPipelineDialog renders open 1`] = `
         <br />
         You can also drag and drop the file here.
       </div>
+      <DocumentationCompilePipeline />
       <Component
         InputProps={
           Object {
@@ -554,6 +558,7 @@ exports[`UploadPipelineDialog renders with a selected file to upload 1`] = `
         <br />
         You can also drag and drop the file here.
       </div>
+      <DocumentationCompilePipeline />
       <Component
         InputProps={
           Object {
diff --git a/frontend/src/components/viewers/ConfusionMatrix.test.tsx b/frontend/src/components/viewers/ConfusionMatrix.test.tsx
index be900a45dc6e..ef98b956da78 100644
--- a/frontend/src/components/viewers/ConfusionMatrix.test.tsx
+++ b/frontend/src/components/viewers/ConfusionMatrix.test.tsx
@@ -25,11 +25,7 @@ describe('ConfusionMatrix', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  const data = [
-    [0, 1, 2],
-    [3, 4, 5],
-    [6, 7, 8],
-  ];
+  const data = [[0, 1, 2], [3, 4, 5], [6, 7, 8]];
   const config: ConfusionMatrixConfig = {
     axes: ['test x axis', 'test y axis'],
     data,
@@ -42,7 +38,7 @@ describe('ConfusionMatrix', () => {
   });
 
   it('does not break on asymetric data', () => {
-    const testConfig = {...config};
+    const testConfig = { ...config };
     testConfig.data = data.slice(1);
     const tree = shallow(<ConfusionMatrix configs={[testConfig]} />);
     expect(tree).toMatchSnapshot();
@@ -60,7 +56,10 @@ describe('ConfusionMatrix', () => {
 
   it('activates row/column on cell hover', () => {
     const tree = shallow(<ConfusionMatrix configs={[config]} />);
-    tree.find('td').at(2).simulate('mouseOver');
+    tree
+      .find('td')
+      .at(2)
+      .simulate('mouseOver');
     expect(tree.state()).toHaveProperty('activeCell', [0, 0]);
   });
 
diff --git a/frontend/src/components/viewers/ConfusionMatrix.tsx b/frontend/src/components/viewers/ConfusionMatrix.tsx
index 7deaf331b57f..fd3ea98b039e 100644
--- a/frontend/src/components/viewers/ConfusionMatrix.tsx
+++ b/frontend/src/components/viewers/ConfusionMatrix.tsx
@@ -40,17 +40,20 @@ interface ConfusionMatrixState {
 class ConfusionMatrix extends Viewer<ConfusionMatrixProps, ConfusionMatrixState> {
   private _opacities: number[][] = [];
   private _config = this.props.configs[0];
-  private _max = this._config &&
+  private _max =
+    this._config &&
     Math.max(...this._config.data.map(d => d.map(n => +n)).map(d => Math.max(...d)));
   private _minRegularCellDimension = 15;
   private _maxRegularCellDimension = 80;
-  private _cellDimension = this._config ?
-    Math.max(
-      Math.min(
-        (this.props.maxDimension || 700) / this._config.data.length,
-        this._maxRegularCellDimension),
-      this._minRegularCellDimension) - 1 :
-    0;
+  private _cellDimension = this._config
+    ? Math.max(
+        Math.min(
+          (this.props.maxDimension || 700) / this._config.data.length,
+          this._maxRegularCellDimension,
+        ),
+        this._minRegularCellDimension,
+      ) - 1
+    : 0;
   private _shrinkThreshold = 600;
 
   private _css = stylesheet({
@@ -174,53 +177,96 @@ class ConfusionMatrix extends Viewer<ConfusionMatrixProps, ConfusionMatrixState>
     const [xAxisLabel, yAxisLabel] = this._config.axes;
     const small = this._isSmall();
 
-    return <div className={classes(commonCss.flex, this._css.root)}>
-      <table>
-        <tbody>
-          {!small && <tr><td className={this._css.yAxisLabel}>{yAxisLabel}</td></tr>}
-          {this._config.data.map((row, r) => <tr key={r}>
-            {!small && <td>
-              <div className={classes(this._css.ylabel, r === activeRow ? this._css.activeLabel : '')}>
-                {this._config.labels[r]}
-              </div>
-            </td>}
-            {row.map((cell, c) =>
-              <td key={c} className={this._css.cell} style={{
-                backgroundColor: `rgba(41, 121, 255, ${this._opacities[r][c]})`,
-                color: this._opacities[r][c] < 0.6 ? color.foreground : color.background,
-              }} onMouseOver={() => this.setState({ activeCell: [r, c] })}>
-                <div className={this._css.overlay} style={{
-                  opacity: r === activeRow || c === activeCol ? 0.05 : 0,
-                }} />
-                {cell}
-              </td>)}
-          </tr>)}
-
-          {/* Footer */}
-          {!small && <tr>
-            <th className={this._css.xlabel} />
-            {this._config.labels.map((label, i) => <th key={i}>
-              <div className={classes(i === activeCol ? this._css.activeLabel : '', this._css.xlabel)}>
-                {label}
+    return (
+      <div className={classes(commonCss.flex, this._css.root)}>
+        <table>
+          <tbody>
+            {!small && (
+              <tr>
+                <td className={this._css.yAxisLabel}>{yAxisLabel}</td>
+              </tr>
+            )}
+            {this._config.data.map((row, r) => (
+              <tr key={r}>
+                {!small && (
+                  <td>
+                    <div
+                      className={classes(
+                        this._css.ylabel,
+                        r === activeRow ? this._css.activeLabel : '',
+                      )}
+                    >
+                      {this._config.labels[r]}
+                    </div>
+                  </td>
+                )}
+                {row.map((cell, c) => (
+                  <td
+                    key={c}
+                    className={this._css.cell}
+                    style={{
+                      backgroundColor: `rgba(41, 121, 255, ${this._opacities[r][c]})`,
+                      color: this._opacities[r][c] < 0.6 ? color.foreground : color.background,
+                    }}
+                    onMouseOver={() => this.setState({ activeCell: [r, c] })}
+                  >
+                    <div
+                      className={this._css.overlay}
+                      style={{
+                        opacity: r === activeRow || c === activeCol ? 0.05 : 0,
+                      }}
+                    />
+                    {cell}
+                  </td>
+                ))}
+              </tr>
+            ))}
+
+            {/* Footer */}
+            {!small && (
+              <tr>
+                <th className={this._css.xlabel} />
+                {this._config.labels.map((label, i) => (
+                  <th key={i}>
+                    <div
+                      className={classes(
+                        i === activeCol ? this._css.activeLabel : '',
+                        this._css.xlabel,
+                      )}
+                    >
+                      {label}
+                    </div>
+                  </th>
+                ))}
+                <td className={this._css.xAxisLabel}>{xAxisLabel}</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+
+        {!small && (
+          <div
+            className={this._css.legend}
+            style={{ height: 0.75 * this._config.data.length * this._cellDimension }}
+          >
+            <div className={this._css.legendNotch} style={{ top: 0 }}>
+              <span className={this._css.legendLabel}>{this._max}</span>
+            </div>
+            {new Array(legendNotches).fill(0).map((_, i) => (
+              <div
+                key={i}
+                className={this._css.legendNotch}
+                style={{ top: ((legendNotches - i) / legendNotches) * 100 + '%' }}
+              >
+                <span className={this._css.legendLabel}>
+                  {Math.floor((i / legendNotches) * this._max)}
+                </span>
               </div>
-            </th>)}
-            <td className={this._css.xAxisLabel}>{xAxisLabel}</td>
-          </tr>}
-        </tbody>
-      </table>
-
-      {!small && <div className={this._css.legend}
-        style={{ height: 0.75 * this._config.data.length * this._cellDimension }}>
-        <div className={this._css.legendNotch} style={{ top: 0 }}>
-          <span className={this._css.legendLabel}>{this._max}</span>
-        </div>
-        {new Array(legendNotches).fill(0).map((_, i) =>
-          <div key={i} className={this._css.legendNotch}
-            style={{ top: ((legendNotches - i) / legendNotches * 100) + '%' }}>
-            <span className={this._css.legendLabel}>{Math.floor(i / legendNotches * this._max)}</span>
-          </div>)}
-      </div>}
-    </div>;
+            ))}
+          </div>
+        )}
+      </div>
+    );
   }
 
   private _isSmall(): boolean {
diff --git a/frontend/src/components/viewers/HTMLViewer.tsx b/frontend/src/components/viewers/HTMLViewer.tsx
index 66e652e76af8..e7b59911297c 100644
--- a/frontend/src/components/viewers/HTMLViewer.tsx
+++ b/frontend/src/components/viewers/HTMLViewer.tsx
@@ -64,8 +64,14 @@ class HTMLViewer extends Viewer<HTMLViewerProps, any> {
       return null;
     }
 
-    return <iframe ref={this._iframeRef} src='javascript:void(0);'
-      className={this._css.iframe} sandbox='allow-scripts' />;
+    return (
+      <iframe
+        ref={this._iframeRef}
+        src='javascript:void(0);'
+        className={this._css.iframe}
+        sandbox='allow-scripts'
+      />
+    );
   }
 }
 
diff --git a/frontend/src/components/viewers/MarkdownViewer.test.tsx b/frontend/src/components/viewers/MarkdownViewer.test.tsx
index 8006a3859a71..9d316d0500b0 100644
--- a/frontend/src/components/viewers/MarkdownViewer.test.tsx
+++ b/frontend/src/components/viewers/MarkdownViewer.test.tsx
@@ -15,23 +15,13 @@
  */
 
 import * as React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
 import MarkdownViewer, { MarkdownViewerConfig } from './MarkdownViewer';
 import { PlotType } from './Viewer';
 
 describe('MarkdownViewer', () => {
-  let tree: ReactWrapper<any> | null;
-
-  afterEach(() => {
-    if (!tree) {
-      return;
-    }
-    tree.unmount();
-    tree = null;
-  });
-
   it('does not break on empty data', () => {
-    tree = mount(<MarkdownViewer configs={[]} />);
+    const tree = mount(<MarkdownViewer configs={[]} />).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
@@ -42,7 +32,7 @@ describe('MarkdownViewer', () => {
       type: PlotType.MARKDOWN,
     };
 
-    tree = mount(<MarkdownViewer configs={[config]} />);
+    const tree = mount(<MarkdownViewer configs={[config]} />).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
@@ -56,7 +46,7 @@ describe('MarkdownViewer', () => {
       type: PlotType.MARKDOWN,
     };
 
-    tree = mount(<MarkdownViewer configs={[config]} />);
+    const tree = mount(<MarkdownViewer configs={[config]} />).getDOMNode();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/frontend/src/components/viewers/MarkdownViewer.tsx b/frontend/src/components/viewers/MarkdownViewer.tsx
index c52023ac7612..2945042e1805 100644
--- a/frontend/src/components/viewers/MarkdownViewer.tsx
+++ b/frontend/src/components/viewers/MarkdownViewer.tsx
@@ -17,8 +17,7 @@
 import * as React from 'react';
 import Viewer, { ViewerConfig } from './Viewer';
 import { cssRaw } from 'typestyle';
-// tslint:disable-next-line:no-var-requires
-const markdownIt = require('markdown-it');
+import Markdown from 'markdown-to-jsx';
 
 cssRaw(`
 .markdown-viewer h1,
@@ -78,8 +77,11 @@ class MarkdownViewer extends Viewer<MarkdownViewerProps, any> {
     if (!this._config) {
       return null;
     }
-    const html = markdownIt().render(this._config.markdownContent);
-    return <div className='markdown-viewer' dangerouslySetInnerHTML={{ __html: html }} />;
+    return (
+      <div className='markdown-viewer'>
+        <Markdown>{this._config.markdownContent}</Markdown>
+      </div>
+    );
   }
 }
 
diff --git a/frontend/src/components/viewers/PagedTable.test.tsx b/frontend/src/components/viewers/PagedTable.test.tsx
index a4e043510a3a..2ff993b39ada 100644
--- a/frontend/src/components/viewers/PagedTable.test.tsx
+++ b/frontend/src/components/viewers/PagedTable.test.tsx
@@ -26,38 +26,44 @@ describe('PagedTable', () => {
   });
 
   it('does not break on empty data', () => {
-    const tree = shallow(<PagedTable configs={[{data: [], labels: [], type: PlotType.TABLE}]} />);
+    const tree = shallow(<PagedTable configs={[{ data: [], labels: [], type: PlotType.TABLE }]} />);
     expect(tree).toMatchSnapshot();
   });
 
-  const data = [
-    ['col1', 'col2', 'col3'],
-    ['col4', 'col5', 'col6'],
-  ];
+  const data = [['col1', 'col2', 'col3'], ['col4', 'col5', 'col6']];
   const labels = ['field1', 'field2', 'field3'];
 
   it('renders simple data', () => {
-    const tree = shallow(<PagedTable configs={[{data, labels, type: PlotType.TABLE}]} />);
+    const tree = shallow(<PagedTable configs={[{ data, labels, type: PlotType.TABLE }]} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('renders simple data without labels', () => {
-    const tree = shallow(<PagedTable configs={[{data, labels: [], type: PlotType.TABLE}]} />);
+    const tree = shallow(<PagedTable configs={[{ data, labels: [], type: PlotType.TABLE }]} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('sorts on first column descending', () => {
-    const tree = shallow(<PagedTable configs={[{data, labels, type: PlotType.TABLE}]} />);
-    tree.find('WithStyles(TableSortLabel)').at(0).simulate('click');
+    const tree = shallow(<PagedTable configs={[{ data, labels, type: PlotType.TABLE }]} />);
+    tree
+      .find('WithStyles(TableSortLabel)')
+      .at(0)
+      .simulate('click');
     expect(tree).toMatchSnapshot();
   });
 
   it('sorts on first column ascending', () => {
-    const tree = shallow(<PagedTable configs={[{data, labels, type: PlotType.TABLE}]} />);
+    const tree = shallow(<PagedTable configs={[{ data, labels, type: PlotType.TABLE }]} />);
     // Once for descending
-    tree.find('WithStyles(TableSortLabel)').at(0).simulate('click');
+    tree
+      .find('WithStyles(TableSortLabel)')
+      .at(0)
+      .simulate('click');
     // Once for ascending
-    tree.find('WithStyles(TableSortLabel)').at(0).simulate('click');
+    tree
+      .find('WithStyles(TableSortLabel)')
+      .at(0)
+      .simulate('click');
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/frontend/src/components/viewers/PagedTable.tsx b/frontend/src/components/viewers/PagedTable.tsx
index a883a6bb4df8..605b9009accd 100644
--- a/frontend/src/components/viewers/PagedTable.tsx
+++ b/frontend/src/components/viewers/PagedTable.tsx
@@ -104,15 +104,23 @@ class PagedTable extends Viewer<PagedTableProps, PagedTableState> {
           <TableHead>
             <TableRow>
               {labels.map((label, i) => {
-                return <TableCell className={this._css.columnName} key={i}
-                  sortDirection={orderBy === i ? order : false}>
-                  <Tooltip title='Sort' enterDelay={300}>
-                    <TableSortLabel active={orderBy === i} direction={order}
-                      onClick={this._handleSort(i)}>
-                      {label}
-                    </TableSortLabel>
-                  </Tooltip>
-                </TableCell>;
+                return (
+                  <TableCell
+                    className={this._css.columnName}
+                    key={i}
+                    sortDirection={orderBy === i ? order : false}
+                  >
+                    <Tooltip title='Sort' enterDelay={300}>
+                      <TableSortLabel
+                        active={orderBy === i}
+                        direction={order}
+                        onClick={this._handleSort(i)}
+                      >
+                        {label}
+                      </TableSortLabel>
+                    </Tooltip>
+                  </TableCell>
+                );
               }, this)}
             </TableRow>
           </TableHead>
@@ -122,10 +130,15 @@ class PagedTable extends Viewer<PagedTableProps, PagedTableState> {
             {this._stableSort(data)
               .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
               .map(row => {
-                return <TableRow hover={true} tabIndex={-1} key={row[0]} className={this._css.row}>
-                  {row.map((cell, i) =>
-                    <TableCell key={i} className={this._css.cell}>{cell}</TableCell>)}
-                </TableRow>;
+                return (
+                  <TableRow hover={true} tabIndex={-1} key={row[0]} className={this._css.row}>
+                    {row.map((cell, i) => (
+                      <TableCell key={i} className={this._css.cell}>
+                        {cell}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
               })}
             {emptyRows > 0 && (
               <TableRow style={{ height: this._rowHeight * emptyRows }}>
@@ -135,9 +148,14 @@ class PagedTable extends Viewer<PagedTableProps, PagedTableState> {
           </TableBody>
         </Table>
 
-        <TablePagination component='div' count={data.length} rowsPerPage={rowsPerPage}
-          page={page} onChangePage={this._handleChangePage}
-          onChangeRowsPerPage={this._handleChangeRowsPerPage} />
+        <TablePagination
+          component='div'
+          count={data.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onChangePage={this._handleChangePage}
+          onChangeRowsPerPage={this._handleChangeRowsPerPage}
+        />
       </div>
     );
   }
@@ -180,7 +198,6 @@ class PagedTable extends Viewer<PagedTableProps, PagedTableState> {
     return stabilizedThis.map((el: [string[], number]) => el[0]);
   }
 
-
   private _desc(a: string[], b: string[], orderBy: number): number {
     if (b[orderBy] < a[orderBy]) {
       return -1;
@@ -196,7 +213,6 @@ class PagedTable extends Viewer<PagedTableProps, PagedTableState> {
       ? (a: any, b: any) => this._desc(a, b, orderBy)
       : (a: any, b: any) => -this._desc(a, b, orderBy);
   }
-
 }
 
 export default PagedTable;
diff --git a/frontend/src/components/viewers/ROCCurve.test.tsx b/frontend/src/components/viewers/ROCCurve.test.tsx
index 8130ce9226e8..d15486d5732f 100644
--- a/frontend/src/components/viewers/ROCCurve.test.tsx
+++ b/frontend/src/components/viewers/ROCCurve.test.tsx
@@ -59,13 +59,20 @@ describe('ROCCurve', () => {
     const tree = shallow(<ROCCurve configs={[config, config, config]} />);
     expect(tree.find('LineSeries').length).toBe(4); // +1 for baseline
     const [line1Color, line2Color, line3Color] = [
-      (tree.find('LineSeries').at(1).props() as any).color,
-      (tree.find('LineSeries').at(2).props() as any).color,
-      (tree.find('LineSeries').at(3).props() as any).color,
+      (tree
+        .find('LineSeries')
+        .at(1)
+        .props() as any).color,
+      (tree
+        .find('LineSeries')
+        .at(2)
+        .props() as any).color,
+      (tree
+        .find('LineSeries')
+        .at(3)
+        .props() as any).color,
     ];
-    expect(line1Color !== line2Color &&
-      line1Color !== line3Color &&
-      line2Color !== line3Color);
+    expect(line1Color !== line2Color && line1Color !== line3Color && line2Color !== line3Color);
   });
 
   it('does not render a legend when there is only one config', () => {
@@ -78,7 +85,10 @@ describe('ROCCurve', () => {
     const config = { data, type: PlotType.ROC };
     const tree = shallow(<ROCCurve configs={[config, config, config]} />);
     expect(tree.find('DiscreteColorLegendItem').length).toBe(1);
-    const legendItems = (tree.find('DiscreteColorLegendItem').at(0).props() as any).items;
+    const legendItems = (tree
+      .find('DiscreteColorLegendItem')
+      .at(0)
+      .props() as any).items;
     expect(legendItems.length).toBe(3);
     legendItems.map((item: any, i: number) => expect(item.title).toBe('Series #' + (i + 1)));
   });
diff --git a/frontend/src/components/viewers/ROCCurve.tsx b/frontend/src/components/viewers/ROCCurve.tsx
index 5cfacced50a2..85f3e911a207 100644
--- a/frontend/src/components/viewers/ROCCurve.tsx
+++ b/frontend/src/components/viewers/ROCCurve.tsx
@@ -83,7 +83,7 @@ interface ROCCurveProps {
 
 interface ROCCurveState {
   hoveredValues: DisplayPoint[];
-  lastDrawLocation: { left: number, right: number } | null;
+  lastDrawLocation: { left: number; right: number } | null;
 }
 
 class ROCCurve extends Viewer<ROCCurveProps, ROCCurveState> {
@@ -115,60 +115,89 @@ class ROCCurve extends Viewer<ROCCurveProps, ROCCurveState> {
 
     const { hoveredValues, lastDrawLocation } = this.state;
 
-    return <div>
-      <XYPlot width={width} height={height} animation={!isSmall}
-        classes={{ root: css.root }}
-        onMouseLeave={() => this.setState({ hoveredValues: new Array(numLines).fill('') })}
-        xDomain={lastDrawLocation && [lastDrawLocation.left, lastDrawLocation.right]}>
-        <VerticalGridLines />
-        <HorizontalGridLines />
-
-        {/* Draw the axes from the first config in case there are several */}
-        <XAxis title={'fpr'} className={css.axis} />
-        <YAxis title={'tpr'} className={css.axis} />
-
-        {/* Reference line */}
-        <LineSeries color={color.disabledBg} strokeWidth={1} data={baseLineData} strokeStyle='dashed' />
-
-        {/* Lines */}
-        {datasets.map((data, i) =>
-          <LineSeries key={i} color={lineColors[i] || lineColors[lineColors.length - 1]}
-            strokeWidth={2} data={data} onNearestX={(d: any) => this._lineHovered(i, d)}
-            curve='curveBasis' />)}
-
-        {!isSmall && (
-          <Highlight onBrushEnd={(area: any) => this.setState({ lastDrawLocation: area })}
-            enableY={false} onDrag={(area: any) => this.setState({
-              lastDrawLocation: {
-                left: (lastDrawLocation ? lastDrawLocation.left : 0) - (area.right - area.left),
-                right: (lastDrawLocation ? lastDrawLocation.right : 0) - (area.right - area.left),
+    return (
+      <div>
+        <XYPlot
+          width={width}
+          height={height}
+          animation={!isSmall}
+          classes={{ root: css.root }}
+          onMouseLeave={() => this.setState({ hoveredValues: new Array(numLines).fill('') })}
+          xDomain={lastDrawLocation && [lastDrawLocation.left, lastDrawLocation.right]}
+        >
+          <VerticalGridLines />
+          <HorizontalGridLines />
+
+          {/* Draw the axes from the first config in case there are several */}
+          <XAxis title={'fpr'} className={css.axis} />
+          <YAxis title={'tpr'} className={css.axis} />
+
+          {/* Reference line */}
+          <LineSeries
+            color={color.disabledBg}
+            strokeWidth={1}
+            data={baseLineData}
+            strokeStyle='dashed'
+          />
+
+          {/* Lines */}
+          {datasets.map((data, i) => (
+            <LineSeries
+              key={i}
+              color={lineColors[i] || lineColors[lineColors.length - 1]}
+              strokeWidth={2}
+              data={data}
+              onNearestX={(d: any) => this._lineHovered(i, d)}
+              curve='curveBasis'
+            />
+          ))}
+
+          {!isSmall && (
+            <Highlight
+              onBrushEnd={(area: any) => this.setState({ lastDrawLocation: area })}
+              enableY={false}
+              onDrag={(area: any) =>
+                this.setState({
+                  lastDrawLocation: {
+                    left: (lastDrawLocation ? lastDrawLocation.left : 0) - (area.right - area.left),
+                    right:
+                      (lastDrawLocation ? lastDrawLocation.right : 0) - (area.right - area.left),
+                  },
+                })
               }
-            })} />
-        )}
-
-        {/* Hover effect to show labels */}
-        {!isSmall && (
-          <Crosshair values={hoveredValues}>
-            <div className={css.crosshair}>
-              {hoveredValues.map((value, i) => (
-                <div key={i} className={css.crosshairLabel}>{`${labels[i]}: ${value.label}`}</div>))}
+            />
+          )}
+
+          {/* Hover effect to show labels */}
+          {!isSmall && (
+            <Crosshair values={hoveredValues}>
+              <div className={css.crosshair}>
+                {hoveredValues.map((value, i) => (
+                  <div key={i} className={css.crosshairLabel}>{`${labels[i]}: ${value.label}`}</div>
+                ))}
+              </div>
+            </Crosshair>
+          )}
+        </XYPlot>
+
+        <div className={commonCss.flex}>
+          {/* Legend */}
+          {datasets.length > 1 && (
+            <div style={{ flexGrow: 1 }}>
+              <DiscreteColorLegend
+                items={datasets.map((_, i) => ({
+                  color: lineColors[i],
+                  title: 'Series #' + (i + 1),
+                }))}
+                orientation='horizontal'
+              />
             </div>
-          </Crosshair>
-        )}
-      </XYPlot>
-
-      <div className={commonCss.flex}>
-        {/* Legend */}
-        {datasets.length > 1 && <div style={{ flexGrow: 1 }}>
-          <DiscreteColorLegend items={datasets.map((_, i) => ({
-            color: lineColors[i],
-            title: 'Series #' + (i + 1),
-          }))} orientation='horizontal' />
-        </div>}
-
-        {lastDrawLocation && <span>Click to reset zoom</span>}
+          )}
+
+          {lastDrawLocation && <span>Click to reset zoom</span>}
+        </div>
       </div>
-    </div >;
+    );
   }
 
   private _lineHovered(lineIdx: number, data: any): void {
@@ -179,4 +208,3 @@ class ROCCurve extends Viewer<ROCCurveProps, ROCCurveState> {
 }
 
 export default ROCCurve;
-
diff --git a/frontend/src/components/viewers/Tensorboard.test.tsx b/frontend/src/components/viewers/Tensorboard.test.tsx
index b9bf08ef23ae..8471984c295a 100644
--- a/frontend/src/components/viewers/Tensorboard.test.tsx
+++ b/frontend/src/components/viewers/Tensorboard.test.tsx
@@ -87,7 +87,8 @@ describe('Tensorboard', () => {
     expect(getAppMock).toHaveBeenCalledWith(`Series1:${config.url},Series2:${config2.url}`);
     tree.find('BusyButton').simulate('click');
     await startAppMock;
-    const expectedUrl = `Series1${encodeURIComponent(':' + config.url)}` +
+    const expectedUrl =
+      `Series1${encodeURIComponent(':' + config.url)}` +
       `${encodeURIComponent(',')}` +
       `Series2${encodeURIComponent(':' + config2.url)}`;
     expect(startAppMock).toHaveBeenCalledWith(expectedUrl);
diff --git a/frontend/src/components/viewers/Tensorboard.tsx b/frontend/src/components/viewers/Tensorboard.tsx
index ab3dc8309de6..9c6b0c168b80 100644
--- a/frontend/src/components/viewers/Tensorboard.tsx
+++ b/frontend/src/components/viewers/Tensorboard.tsx
@@ -61,25 +61,38 @@ class TensorboardViewer extends Viewer<TensorboardViewerProps, TensorboardViewer
     // incorrectly decoding the address and replacing the protocol's // with /.
     // Pod address (after stripping protocol) is of the format
     // <viewer_service_dns>.kubeflow.svc.cluster.local:6006/tensorboard/<viewer_name>/
-    // We use this pod address without encoding since encoded pod address failed to open the 
-    // tensorboard instance on this pod. 
+    // We use this pod address without encoding since encoded pod address failed to open the
+    // tensorboard instance on this pod.
     // TODO: figure out why the encoded pod address failed to open the tensorboard.
     const podAddress = this.state.podAddress.replace(/(^\w+:|^)\/\//, '');
 
-    return <div>
-      {this.state.podAddress && <div>
-        <div className={padding(20, 'b')}>Tensorboard is running for this output.</div>
-        <a href={'apis/v1beta1/_proxy/' + podAddress} target='_blank' className={commonCss.unstyled}>
-          <Button className={commonCss.buttonAction} disabled={this.state.busy}>Open Tensorboard</Button>
-        </a>
-      </div>}
-
-      {!this.state.podAddress &&
-        <BusyButton className={commonCss.buttonAction} onClick={this._startTensorboard.bind(this)}
-          busy={this.state.busy}
-          title={`Start ${this.props.configs.length > 1 ? 'Combined ' : ''}Tensorboard`} />
-      }
-    </div>;
+    return (
+      <div>
+        {this.state.podAddress && (
+          <div>
+            <div className={padding(20, 'b')}>Tensorboard is running for this output.</div>
+            <a
+              href={'apis/v1beta1/_proxy/' + podAddress}
+              target='_blank'
+              className={commonCss.unstyled}
+            >
+              <Button className={commonCss.buttonAction} disabled={this.state.busy}>
+                Open Tensorboard
+              </Button>
+            </a>
+          </div>
+        )}
+
+        {!this.state.podAddress && (
+          <BusyButton
+            className={commonCss.buttonAction}
+            onClick={this._startTensorboard.bind(this)}
+            busy={this.state.busy}
+            title={`Start ${this.props.configs.length > 1 ? 'Combined ' : ''}Tensorboard`}
+          />
+        )}
+      </div>
+    );
   }
 
   private _buildUrl(): string {
diff --git a/frontend/src/components/viewers/ViewerContainer.test.tsx b/frontend/src/components/viewers/ViewerContainer.test.tsx
index 1a839ad4fac6..923d5c0729ef 100644
--- a/frontend/src/components/viewers/ViewerContainer.test.tsx
+++ b/frontend/src/components/viewers/ViewerContainer.test.tsx
@@ -25,10 +25,10 @@ describe('ViewerContainer', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  Object.keys(PlotType).map(type => (
+  Object.keys(PlotType).map(type =>
     it('renders a viewer of type ' + type, () => {
       const tree = shallow(<ViewerContainer configs={[{ type: PlotType[type] }]} />);
       expect(tree).toMatchSnapshot();
-    })
-  ));
+    }),
+  );
 });
diff --git a/frontend/src/components/viewers/VisualizationCreator.test.tsx b/frontend/src/components/viewers/VisualizationCreator.test.tsx
index c67021725a28..b5263ecac97a 100644
--- a/frontend/src/components/viewers/VisualizationCreator.test.tsx
+++ b/frontend/src/components/viewers/VisualizationCreator.test.tsx
@@ -110,7 +110,12 @@ describe('VisualizationCreator', () => {
     tree.setState({
       source: 'gs://ml-pipeline/data.csv',
     });
-    expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(true);
+    expect(
+      tree
+        .find('BusyButton')
+        .at(0)
+        .prop('disabled'),
+    ).toBe(true);
   });
 
   it('has a disabled BusyButton if source is an empty string', () => {
@@ -124,7 +129,12 @@ describe('VisualizationCreator', () => {
       // source by default is set to ''
       selectedType: ApiVisualizationType.ROCCURVE,
     });
-    expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(true);
+    expect(
+      tree
+        .find('BusyButton')
+        .at(0)
+        .prop('disabled'),
+    ).toBe(true);
   });
 
   it('has a disabled BusyButton if onGenerate is not provided as a prop', () => {
@@ -137,7 +147,12 @@ describe('VisualizationCreator', () => {
       selectedType: ApiVisualizationType.ROCCURVE,
       source: 'gs://ml-pipeline/data.csv',
     });
-    expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(true);
+    expect(
+      tree
+        .find('BusyButton')
+        .at(0)
+        .prop('disabled'),
+    ).toBe(true);
   });
 
   it('has a disabled BusyButton if isBusy is true', () => {
@@ -151,7 +166,12 @@ describe('VisualizationCreator', () => {
       selectedType: ApiVisualizationType.ROCCURVE,
       source: 'gs://ml-pipeline/data.csv',
     });
-    expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(true);
+    expect(
+      tree
+        .find('BusyButton')
+        .at(0)
+        .prop('disabled'),
+    ).toBe(true);
   });
 
   it('has an enabled BusyButton if onGenerate is provided and source and selectedType are set', () => {
@@ -165,7 +185,12 @@ describe('VisualizationCreator', () => {
       selectedType: ApiVisualizationType.ROCCURVE,
       source: 'gs://ml-pipeline/data.csv',
     });
-    expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(false);
+    expect(
+      tree
+        .find('BusyButton')
+        .at(0)
+        .prop('disabled'),
+    ).toBe(false);
   });
 
   it('calls onGenerate when BusyButton is clicked', () => {
@@ -181,7 +206,10 @@ describe('VisualizationCreator', () => {
       selectedType: ApiVisualizationType.ROCCURVE,
       source: 'gs://ml-pipeline/data.csv',
     });
-    tree.find('BusyButton').at(0).simulate('click');
+    tree
+      .find('BusyButton')
+      .at(0)
+      .simulate('click');
     expect(onGenerate).toBeCalled();
   });
 
@@ -198,8 +226,15 @@ describe('VisualizationCreator', () => {
       selectedType: ApiVisualizationType.ROCCURVE,
       source: 'gs://ml-pipeline/data.csv',
     });
-    tree.find('BusyButton').at(0).simulate('click');
-    expect(onGenerate).toBeCalledWith('{}', 'gs://ml-pipeline/data.csv', ApiVisualizationType.ROCCURVE);
+    tree
+      .find('BusyButton')
+      .at(0)
+      .simulate('click');
+    expect(onGenerate).toBeCalledWith(
+      '{}',
+      'gs://ml-pipeline/data.csv',
+      ApiVisualizationType.ROCCURVE,
+    );
   });
 
   it('renders the provided arguments', () => {
@@ -208,7 +243,7 @@ describe('VisualizationCreator', () => {
     };
     const tree = shallow(<VisualizationCreator configs={[config]} />);
     tree.setState({
-      arguments: JSON.stringify({is_generated: 'True'}),
+      arguments: JSON.stringify({ is_generated: 'True' }),
       // selectedType is required to be set so that the argument editor
       // component is visible.
       selectedType: ApiVisualizationType.ROCCURVE,
@@ -225,7 +260,12 @@ describe('VisualizationCreator', () => {
     tree.setState({
       source,
     });
-    expect(tree.find('input').at(1).prop('value')).toBe(source);
+    expect(
+      tree
+        .find('input')
+        .at(1)
+        .prop('value'),
+    ).toBe(source);
   });
 
   it('renders the selected visualization type', () => {
@@ -266,21 +306,26 @@ describe('VisualizationCreator', () => {
     const types = Object.keys(ApiVisualizationType)
       .map((key: string) => key.replace('_', ''))
       .filter((key: string, i: number, arr: string[]) => arr.indexOf(key) === i);
-      const config: VisualizationCreatorConfig = {
-        isBusy: false,
-        onGenerate: jest.fn(),
-        type: PlotType.VISUALIZATION_CREATOR,
-      };
-      const tree = shallow(<VisualizationCreator configs={[config]} />);
-      // Iterate through all selectable types to ensure a placeholder is set
-      // for the argument editor for each type.
-      for (const type of types) {
-        tree.setState({
-          // source by default is set to ''
-          selectedType: type,
-        });
-        expect(tree.find('Editor').at(0).prop('placeholder')).not.toBeNull();
-      }
+    const config: VisualizationCreatorConfig = {
+      isBusy: false,
+      onGenerate: jest.fn(),
+      type: PlotType.VISUALIZATION_CREATOR,
+    };
+    const tree = shallow(<VisualizationCreator configs={[config]} />);
+    // Iterate through all selectable types to ensure a placeholder is set
+    // for the argument editor for each type.
+    for (const type of types) {
+      tree.setState({
+        // source by default is set to ''
+        selectedType: type,
+      });
+      expect(
+        tree
+          .find('Editor')
+          .at(0)
+          .prop('placeholder'),
+      ).not.toBeNull();
+    }
   });
 
   it('returns friendly display name', () => {
diff --git a/frontend/src/components/viewers/VisualizationCreator.tsx b/frontend/src/components/viewers/VisualizationCreator.tsx
index bc0ff863d8a4..b142b4b1b575 100644
--- a/frontend/src/components/viewers/VisualizationCreator.tsx
+++ b/frontend/src/components/viewers/VisualizationCreator.tsx
@@ -82,87 +82,104 @@ class VisualizationCreator extends Viewer<VisualizationCreatorProps, Visualizati
     // is provided.
     const hasSourceAndSelectedType = source.length > 0 && !!selectedType;
     const isCustomTypeAndHasCode = selectedType === ApiVisualizationType.CUSTOM && code.length > 0;
-    const canGenerate = !isBusy && !!onGenerate && (hasSourceAndSelectedType || isCustomTypeAndHasCode);
-
-    const argumentsPlaceholder =
-      this.getArgumentPlaceholderForType(selectedType);
-
-    return <div
-      style={{
-        width: this.props.maxWidth || 600
-      }}>
-      <FormControl style={{ width: '100%' }}>
-        <InputLabel htmlFor='visualization-type-selector'>Type</InputLabel>
-        <Select
-          value={selectedType}
-          inputProps={{
-            id: 'visualization-type-selector',
-            name: 'Visualization Type',
-          }}
-          style={{
-            minHeight: 60,
-            width: '100%',
-          }}
-          onChange={(e: React.ChangeEvent<{ name?: string; value: unknown }>) => {
-            this.setState({ selectedType: e.target.value as ApiVisualizationType });
-          }}
+    const canGenerate =
+      !isBusy && !!onGenerate && (hasSourceAndSelectedType || isCustomTypeAndHasCode);
+
+    const argumentsPlaceholder = this.getArgumentPlaceholderForType(selectedType);
+
+    return (
+      <div
+        style={{
+          width: this.props.maxWidth || 600,
+        }}
+      >
+        <FormControl style={{ width: '100%' }}>
+          <InputLabel htmlFor='visualization-type-selector'>Type</InputLabel>
+          <Select
+            value={selectedType}
+            inputProps={{
+              id: 'visualization-type-selector',
+              name: 'Visualization Type',
+            }}
+            style={{
+              minHeight: 60,
+              width: '100%',
+            }}
+            onChange={(e: React.ChangeEvent<{ name?: string; value: unknown }>) => {
+              this.setState({ selectedType: e.target.value as ApiVisualizationType });
+            }}
+            disabled={isBusy}
+          >
+            {this.getAvailableTypes(allowCustomVisualizations).map((key: string) => (
+              <MenuItem key={key} value={ApiVisualizationType[key]}>
+                {ApiVisualizationType[key]}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <Input
+          label='Source'
+          variant={'outlined'}
+          value={source}
           disabled={isBusy}
-        >
-          {this.getAvailableTypes(allowCustomVisualizations).map((key: string) => (
-            <MenuItem key={key} value={ApiVisualizationType[key]}>
-              {ApiVisualizationType[key]}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-
-      <Input label='Source' variant={'outlined'} value={source} disabled={isBusy}
-        placeholder='File path or path pattern of data within GCS.'
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.setState({ source: e.target.value })} />
-      {selectedType === ApiVisualizationType.CUSTOM &&
-        <div>
-          <InputLabel>Custom Visualization Code</InputLabel>
-          <Editor
-            placeholder='Python code that will be run to generate visualization.<br><br>To access the source value (if provided), reference the variable "source".<br>To access any provided arguments, reference the variable "variables" (it is a dict object).'
-            width='100%' height='175px' mode='python' theme='github'
-            value={code}
-            onChange={(value: string) => this.setState({ code: value })}
-            editorProps={{ $blockScrolling: true }}
-            enableLiveAutocompletion={true}
-            enableBasicAutocompletion={true}
-            highlightActiveLine={true} showGutter={true}
-          />
-        </div>
-      }
-      {!!selectedType &&
-        <div>
-          <InputLabel>Arguments (Optional)</InputLabel>
-          <Editor
-            placeholder={argumentsPlaceholder}
-            height={`${argumentsPlaceholder.split('<br>').length * 14}px`}
-            width='100%' mode='json' theme='github'
-            value={_arguments}
-            onChange={(value: string) => this.setState({ arguments: value })}
-            editorProps={{ $blockScrolling: true }}
-            highlightActiveLine={true} showGutter={true}
-          />
-        </div>
-      }
-      <BusyButton title='Generate Visualization' busy={isBusy} disabled={!canGenerate}
-        onClick={() => {
-          if (onGenerate && selectedType) {
-            const specifiedArguments: any = JSON.parse(_arguments || '{}');
-            if (selectedType === ApiVisualizationType.CUSTOM) {
-              specifiedArguments.code = code.split('\n');
-            }
-            onGenerate(
-              JSON.stringify(specifiedArguments),
-              source,
-              selectedType
-            );
+          placeholder='File path or path pattern of data within GCS.'
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            this.setState({ source: e.target.value })
           }
-        }} />
-    </div>;
+        />
+        {selectedType === ApiVisualizationType.CUSTOM && (
+          <div>
+            <InputLabel>Custom Visualization Code</InputLabel>
+            <Editor
+              placeholder='Python code that will be run to generate visualization.<br><br>To access the source value (if provided), reference the variable "source".<br>To access any provided arguments, reference the variable "variables" (it is a dict object).'
+              width='100%'
+              height='175px'
+              mode='python'
+              theme='github'
+              value={code}
+              onChange={(value: string) => this.setState({ code: value })}
+              editorProps={{ $blockScrolling: true }}
+              enableLiveAutocompletion={true}
+              enableBasicAutocompletion={true}
+              highlightActiveLine={true}
+              showGutter={true}
+            />
+          </div>
+        )}
+        {!!selectedType && (
+          <div>
+            <InputLabel>Arguments (Optional)</InputLabel>
+            <Editor
+              placeholder={argumentsPlaceholder}
+              height={`${argumentsPlaceholder.split('<br>').length * 14}px`}
+              width='100%'
+              mode='json'
+              theme='github'
+              value={_arguments}
+              onChange={(value: string) => this.setState({ arguments: value })}
+              editorProps={{ $blockScrolling: true }}
+              highlightActiveLine={true}
+              showGutter={true}
+            />
+          </div>
+        )}
+        <BusyButton
+          title='Generate Visualization'
+          busy={isBusy}
+          disabled={!canGenerate}
+          onClick={() => {
+            if (onGenerate && selectedType) {
+              const specifiedArguments: any = JSON.parse(_arguments || '{}');
+              if (selectedType === ApiVisualizationType.CUSTOM) {
+                specifiedArguments.code = code.split('\n');
+              }
+              onGenerate(JSON.stringify(specifiedArguments), source, selectedType);
+            }
+          }}
+        />
+      </div>
+    );
   }
 
   /*
@@ -194,8 +211,8 @@ class VisualizationCreator extends Viewer<VisualizationCreatorProps, Visualizati
   }
 
   private getArgumentPlaceholderForType(type: ApiVisualizationType | undefined): string {
-    let placeholder= 'Arguments, provided as JSON, to be used during visualization generation.';
-    switch(type) {
+    let placeholder = 'Arguments, provided as JSON, to be used during visualization generation.';
+    switch (type) {
       case ApiVisualizationType.ROCCURVE:
         // These arguments are not yet used as the ROC curve visualization is
         // still based on the Kubeflow Pipelines component.
@@ -220,7 +237,7 @@ class VisualizationCreator extends Viewer<VisualizationCreatorProps, Visualizati
       case ApiVisualizationType.TFMA:
         placeholder = `{
         \t"slicing_column: string | null
-        }`;  
+        }`;
         break;
       case ApiVisualizationType.TABLE:
         placeholder = '{\n\t"headers": array\n}';
@@ -229,13 +246,15 @@ class VisualizationCreator extends Viewer<VisualizationCreatorProps, Visualizati
         placeholder = '{\n\t"key": any\n}';
         break;
     }
-    return placeholder
-      // Replaces newline escape character with HTML break so placeholder can
-      // support multiple lines.
-      .replace(new RegExp('\n', 'g'), '<br>')
-      // Replaces tab escape character with 4 blank spaces so placeholder can
-      // support indentation.
-      .replace(new RegExp('\t', 'g'), '&nbsp&nbsp&nbsp&nbsp');
+    return (
+      placeholder
+        // Replaces newline escape character with HTML break so placeholder can
+        // support multiple lines.
+        .replace(new RegExp('\n', 'g'), '<br>')
+        // Replaces tab escape character with 4 blank spaces so placeholder can
+        // support indentation.
+        .replace(new RegExp('\t', 'g'), '&nbsp&nbsp&nbsp&nbsp')
+    );
   }
 }
 
diff --git a/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap b/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap
index 7a8416d1222b..cb33b3466781 100644
--- a/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap
+++ b/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap
@@ -1,60 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MarkdownViewer does not break on empty data 1`] = `
-<MarkdownViewer
-  configs={Array []}
-/>
-`;
+exports[`MarkdownViewer does not break on empty data 1`] = `null`;
 
 exports[`MarkdownViewer renders some basic markdown 1`] = `
-<MarkdownViewer
-  configs={
-    Array [
-      Object {
-        "markdownContent": "# Title
-[some link here](http://example.com)",
-        "type": "markdown",
-      },
-    ]
-  }
+<div
+  class="markdown-viewer"
 >
-  <div
-    className="markdown-viewer"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<h1>Title</h1>
-<p><a href=\\"http://example.com\\">some link here</a></p>
-",
-      }
-    }
-  />
-</MarkdownViewer>
+  <div>
+    <h1
+      id="title"
+    >
+      Title
+    </h1>
+    <p>
+      <a
+        href="http://example.com"
+      >
+        some link here
+      </a>
+    </p>
+  </div>
+</div>
 `;
 
 exports[`MarkdownViewer sanitizes the markdown to remove XSS 1`] = `
-<MarkdownViewer
-  configs={
-    Array [
-      Object {
-        "markdownContent": "
-      lower[click me](javascript&#x3a;...)lower
-      upper[click me](javascript&#X3a;...)upper
-    ",
-        "type": "markdown",
-      },
-    ]
-  }
+<div
+  class="markdown-viewer"
 >
-  <div
-    className="markdown-viewer"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<pre><code>  lower[click me](javascript&amp;#x3a;...)lower
-  upper[click me](javascript&amp;#X3a;...)upper
-</code></pre>
-",
-      }
-    }
-  />
-</MarkdownViewer>
+  <pre>
+    <code>
+        lower[click me](javascript&#x3a;...)lower
+  upper[click me](javascript&#X3a;...)upper
+    </code>
+  </pre>
+</div>
 `;
diff --git a/frontend/src/icons/GitHub-Mark-120px-plus.png b/frontend/src/icons/GitHub-Mark-120px-plus.png
new file mode 100644
index 000000000000..ea6ff545a246
Binary files /dev/null and b/frontend/src/icons/GitHub-Mark-120px-plus.png differ
diff --git a/frontend/src/icons/experiments.tsx b/frontend/src/icons/experiments.tsx
index b7083e3a14e6..23933acd8f74 100644
--- a/frontend/src/icons/experiments.tsx
+++ b/frontend/src/icons/experiments.tsx
@@ -16,7 +16,7 @@
 
 import * as React from 'react';
 
-export default class ExperimentsIcon extends React.Component<{color: string}> {
+export default class ExperimentsIcon extends React.Component<{ color: string }> {
   public render(): JSX.Element {
     return (
       <svg width='20' height='20' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'>
@@ -27,12 +27,15 @@ export default class ExperimentsIcon extends React.Component<{color: string}> {
                 <g id='Group-3'>
                   <g transform='translate(26 12)'>
                     <polygon points='0 0 20 0 20 20 0 20' />
-                    <path d='M15,5.83333333 L13.825,4.65833333 L8.54166667,9.94166667
+                    <path
+                      d='M15,5.83333333 L13.825,4.65833333 L8.54166667,9.94166667
                       L9.71666667,11.1166667 L15,5.83333333 Z M18.5333333,4.65833333
                       L9.71666667,13.475 L6.23333333,10 L5.05833333,11.175 L9.71666667,15.8333333
                       L19.7166667,5.83333333 L18.5333333,4.65833333 Z M0.341666667,11.175
                       L5,15.8333333 L6.175,14.6583333 L1.525,10 L0.341666667,11.175 Z'
-                      fill={this.props.color} fillRule='nonzero' />
+                      fill={this.props.color}
+                      fillRule='nonzero'
+                    />
                   </g>
                 </g>
               </g>
diff --git a/frontend/src/icons/kubeflowLogo.tsx b/frontend/src/icons/kubeflowLogo.tsx
index 762f8242c352..f8fbc1e9d14c 100644
--- a/frontend/src/icons/kubeflowLogo.tsx
+++ b/frontend/src/icons/kubeflowLogo.tsx
@@ -16,16 +16,28 @@
 
 import * as React from 'react';
 
-export default class KubeflowLogo extends React.Component<{ color: string, style: React.CSSProperties }> {
- public render(): JSX.Element {
-   return (
-     <svg style={this.props.style} width='36px' height='36px' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
-       <g id='Symbols' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
-         <g transform='translate(-19.000000, -20.000000)' fill={this.props.color}>
-           <g id='Group' transform='translate(16.000000, 20.000000)'>
-             <g id='Group-3' transform='translate(2.000000, 0.000000)'>
-               <g id='Group-31'>
-                 <path d='M13.280615,28.2895445 L25.6611429,12.4910476 C25.8744762,12.2190476
+export default class KubeflowLogo extends React.Component<{
+  color: string;
+  style: React.CSSProperties;
+}> {
+  public render(): JSX.Element {
+    return (
+      <svg
+        style={this.props.style}
+        width='36px'
+        height='36px'
+        viewBox='0 0 36 36'
+        version='1.1'
+        xmlns='http://www.w3.org/2000/svg'
+        xmlnsXlink='http://www.w3.org/1999/xlink'
+      >
+        <g id='Symbols' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+          <g transform='translate(-19.000000, -20.000000)' fill={this.props.color}>
+            <g id='Group' transform='translate(16.000000, 20.000000)'>
+              <g id='Group-3' transform='translate(2.000000, 0.000000)'>
+                <g id='Group-31'>
+                  <path
+                    d='M13.280615,28.2895445 L25.6611429,12.4910476 C25.8744762,12.2190476
                            26.187619,12.043619 26.5310476,12.004 C26.875619,11.9641905
                            27.219619,12.063619 27.4893333,12.28 L33.8839688,17.4104681
                            C34.3147453,17.7560836 34.9441354,17.687047 35.2897509,17.2562705
@@ -35,8 +47,10 @@ export default class KubeflowLogo extends React.Component<{ color: string, style
                            10.8535518,13.0557544 10.8753433,13.5542281 L11.494463,27.7164017
                            C11.5185839,28.2681595 11.9854258,28.6958937 12.5371835,28.6717728
                            C12.8289153,28.6590193 13.1004979,28.5193877 13.280615,28.2895445 Z'
-                       id='Fill-1' />
-                 <path d='M23.7498017,32.7771547 L19.891889,29.5691687 C19.0425842,28.8629428
+                    id='Fill-1'
+                  />
+                  <path
+                    d='M23.7498017,32.7771547 L19.891889,29.5691687 C19.0425842,28.8629428
                            17.7815773,28.9789311 17.0753514,29.8282359 C17.0566259,29.8507551
                            17.0383974,29.8736828 17.020679,29.8970026 L13.7939072,34.1438508
                            C13.4597836,34.5836006 13.5454106,35.2109489 13.9851603,35.5450725
@@ -44,8 +58,10 @@ export default class KubeflowLogo extends React.Component<{ color: string, style
                            L23.2502146,34.5362384 C23.7970773,34.4590398 24.1778152,33.9531381
                            24.1006166,33.4062754 C24.0658889,33.1602706 23.9408305,32.9360017
                            23.7498017,32.7771547 Z'
-                       id='Fill-2' />
-                 <path d='M21.4634549,25.9842193 L27.212891,30.4118587 C27.6364506,30.7380419
+                    id='Fill-2'
+                  />
+                  <path
+                    d='M21.4634549,25.9842193 L27.212891,30.4118587 C27.6364506,30.7380419
                            28.2416494,30.6733984 28.5867577,30.2651111 L34.4465587,23.3325537
                            C34.8030826,22.9107609 34.7501716,22.2798106 34.3283788,21.9232867
                            C34.3167911,21.9134922 34.3049821,21.9039626 34.2929607,21.8947054
@@ -53,37 +69,44 @@ export default class KubeflowLogo extends React.Component<{ color: string, style
                            27.1054127,17.5748667 L21.304617,24.5526566 C20.9515571,24.9773532
                            21.0096301,25.6078493 21.4343266,25.9609092 C21.4438902,25.9688597
                            21.4536014,25.9766311 21.4634549,25.9842193 Z'
-                       id='Fill-3' />
-                 <path d='M10.9598921,2.32339463 L4.75822604,5.30992315 C3.66146381,5.83808955
+                    id='Fill-3'
+                  />
+                  <path
+                    d='M10.9598921,2.32339463 L4.75822604,5.30992315 C3.66146381,5.83808955
                            2.86490023,6.83694834 2.59402821,8.02374044 L1.06234161,14.7346349
                            C0.939449081,15.2730733 1.27631553,15.8091879 1.8147539,15.9320804
                            C2.18925077,16.0175551 2.57960826,15.8809608 2.81910588,15.5806364
                            L7.53619048,9.66552381 L12.1756045,3.84785346 C12.5199474,3.41605902
                            12.4490539,2.78687542 12.0172594,2.44253256 C11.7169385,2.20303583
                            11.3059768,2.15673107 10.9598921,2.32339463 Z'
-                       id='Fill-4' />
-                 <path d='M8.21352315,30.9427621 L7.69054913,17.8213507 C7.66855444,17.2695041
+                    id='Fill-4'
+                  />
+                  <path
+                    d='M8.21352315,30.9427621 L7.69054913,17.8213507 C7.66855444,17.2695041
                            7.20336415,16.8399743 6.65151754,16.8619689 C6.36136678,16.8735334
                            6.09057161,17.010649 5.90951901,17.2376757 L1.43617766,22.8469201
                            C0.854379027,23.5764532 0.854372924,24.6113612 1.43616296,25.3409012
                            L6.43248567,31.6060776 C6.77683005,32.0378709 7.4060139,32.1087622
                            7.83780713,31.7644178 C8.0866848,31.565944 8.22620048,31.2608363
                            8.21352315,30.9427621 Z'
-                       id='Fill-5' />
-                 <path d='M18.3667207,1.33231144 L13.9567062,6.86234847 C13.6123643,7.2941437
+                    id='Fill-5'
+                  />
+                  <path
+                    d='M18.3667207,1.33231144 L13.9567062,6.86234847 C13.6123643,7.2941437
                            13.6832593,7.92332714 14.1150545,8.267669 C14.3414298,8.44819552
                            14.6349388,8.52174106 14.9196922,8.46928975 L27.7120482,6.11294919
                            C28.2551955,6.01290195 28.6143991,5.49148974 28.5143518,4.94834244
                            C28.4565321,4.63444455 28.2523431,4.36700464 27.9647717,4.22852098
                            L20.7981397,0.777337579 C19.9574387,0.372487253 18.9484977,0.602779078
                            18.3667207,1.33231144 Z'
-                       id='Fill-6' />
-               </g>
-             </g>
-           </g>
-         </g>
-       </g>
-     </svg>
-   );
- }
+                    id='Fill-6'
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    );
+  }
 }
diff --git a/frontend/src/icons/pipelines.tsx b/frontend/src/icons/pipelines.tsx
index 835a16050361..2fabcb53aec3 100644
--- a/frontend/src/icons/pipelines.tsx
+++ b/frontend/src/icons/pipelines.tsx
@@ -16,14 +16,22 @@
 
 import * as React from 'react';
 
-export default class PipelinesIcon extends React.Component<{color: string}> {
+export default class PipelinesIcon extends React.Component<{ color: string }> {
   public render(): JSX.Element {
     return (
-      <svg width='20px' height='20px' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
+      <svg
+        width='20px'
+        height='20px'
+        viewBox='0 0 20 20'
+        version='1.1'
+        xmlns='http://www.w3.org/2000/svg'
+        xmlnsXlink='http://www.w3.org/1999/xlink'
+      >
         <g id='Symbols' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
           <g transform='translate(-2.000000, -4.000000)'>
             <polygon id='Shape' points='0 0 24 0 24 24 0 24' />
-            <path d='M12.7244079,9.74960425 L17.4807112,9.74960425 C17.7675226,9.74960425
+            <path
+              d='M12.7244079,9.74960425 L17.4807112,9.74960425 C17.7675226,9.74960425
                       18,9.51894323 18,9.23437272 L18,4.51523153 C18,4.23066102 17.7675226,4
                       17.4807112,4 L12.7244079,4 C12.4375965,4 12.2051191,4.23066102
                       12.2051191,4.51523153 L12.2051191,6.06125154 L9.98218019,6.06125154
@@ -42,11 +50,12 @@ export default class PipelinesIcon extends React.Component<{color: string}> {
                       L10.80211,16.3658822 L10.80211,7.68829848 L12.2051191,7.68829848
                       L12.2051191,9.23437272 C12.2051191,9.51894323 12.4375965,9.74960425
                       12.7244079,9.74960425 Z'
-                  id='Path'
-                  fill={this.props.color} />
+              id='Path'
+              fill={this.props.color}
+            />
           </g>
         </g>
-    </svg>
+      </svg>
     );
   }
 }
diff --git a/frontend/src/icons/statusRunning.tsx b/frontend/src/icons/statusRunning.tsx
index 75f54fd7c2ef..3c2a9b8b801a 100644
--- a/frontend/src/icons/statusRunning.tsx
+++ b/frontend/src/icons/statusRunning.tsx
@@ -25,12 +25,14 @@ export default class StatusRunning extends React.Component<{ style: CSSPropertie
         <g transform='translate(-450, -307)' fill={style.color as string} fillRule='nonzero'>
           <g transform='translate(450, 266)'>
             <g transform='translate(0, 41)'>
-              <path d='M9,4 C6.23857143,4 4,6.23857143 4,9 C4,11.7614286 6.23857143,14 9,14
+              <path
+                d='M9,4 C6.23857143,4 4,6.23857143 4,9 C4,11.7614286 6.23857143,14 9,14
                 C11.7614286,14 14,11.7614286 14,9 C14,8.40214643 13.8950716,7.8288007
                 13.702626,7.29737398 L15.2180703,5.78192967 C15.7177126,6.74539838
                 16,7.83973264 16,9 C16,12.866 12.866,16 9,16 C5.134,16 2,12.866 2,9 C2,5.134
                 5.134,2 9,2 C10.933,2 12.683,2.7835 13.94975,4.05025 L12.7677679,5.23223214
-                L9,9 L9,4 Z' />
+                L9,9 L9,4 Z'
+              />
             </g>
           </g>
         </g>
diff --git a/frontend/src/icons/statusTerminated.tsx b/frontend/src/icons/statusTerminated.tsx
index d05258164ce2..33f9e3595ddb 100644
--- a/frontend/src/icons/statusTerminated.tsx
+++ b/frontend/src/icons/statusTerminated.tsx
@@ -24,12 +24,14 @@ export default class StatusRunning extends React.Component<{ style: CSSPropertie
         <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
           <g transform='translate(-1.000000, -1.000000)'>
             <polygon points='0 0 18 0 18 18 0 18' />
-            <path d='M8.9925,1.5 C4.8525,1.5 1.5,4.86 1.5,9 C1.5,13.14 4.8525,16.5 8.9925,16.5
+            <path
+              d='M8.9925,1.5 C4.8525,1.5 1.5,4.86 1.5,9 C1.5,13.14 4.8525,16.5 8.9925,16.5
               C13.14,16.5 16.5,13.14 16.5,9 C16.5,4.86 13.14,1.5 8.9925,1.5 Z M9,15 C5.685,15
               3,12.315 3,9 C3,5.685 5.685,3 9,3 C12.315,3 15,5.685 15,9 C15,12.315 12.315,15 9,15 Z'
-              fill={style.color as string} fillRule='nonzero' />
-            <polygon fill={style.color as string} fillRule='nonzero'
-              points='6 6 12 6 12 12 6 12' />
+              fill={style.color as string}
+              fillRule='nonzero'
+            />
+            <polygon fill={style.color as string} fillRule='nonzero' points='6 6 12 6 12 12 6 12' />
           </g>
         </g>
       </svg>
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 530ed740d71e..e91a399be9a8 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -38,5 +38,5 @@ ReactDOM.render(
   <MuiThemeProvider theme={theme}>
     <Router />
   </MuiThemeProvider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
diff --git a/frontend/src/lib/Apis.test.ts b/frontend/src/lib/Apis.test.ts
index d43e9b256952..e121d88037f5 100644
--- a/frontend/src/lib/Apis.test.ts
+++ b/frontend/src/lib/Apis.test.ts
@@ -16,10 +16,12 @@ import { Apis } from './Apis';
 import { StorageService } from './WorkflowParser';
 
 const fetchSpy = (response: string) => {
-  const spy = jest.fn(() => Promise.resolve({
-    ok: true,
-    text: () => response,
-  }));
+  const spy = jest.fn(() =>
+    Promise.resolve({
+      ok: true,
+      text: () => response,
+    }),
+  );
   window.fetch = spy;
   return spy;
 };
@@ -40,7 +42,7 @@ describe('Apis', () => {
   it('hosts a singleton runServiceApi', () => {
     expect(Apis.runServiceApi).toBe(Apis.runServiceApi);
   });
-  
+
   it('hosts a singleton visualizationServiceApi', () => {
     expect(Apis.visualizationServiceApi).toBe(Apis.visualizationServiceApi);
   });
@@ -48,16 +50,19 @@ describe('Apis', () => {
   it('getPodLogs', async () => {
     const spy = fetchSpy('http://some/address');
     expect(await Apis.getPodLogs('some-pod-name')).toEqual('http://some/address');
-    expect(spy).toHaveBeenCalledWith(
-      'k8s/pod/logs?podname=some-pod-name', { credentials: 'same-origin' });
+    expect(spy).toHaveBeenCalledWith('k8s/pod/logs?podname=some-pod-name', {
+      credentials: 'same-origin',
+    });
   });
 
   it('getPodLogs error', async () => {
     jest.spyOn(console, 'error').mockImplementation(() => null);
-    window.fetch = jest.fn(() => Promise.resolve({
-      ok: false,
-      text: () => 'bad response',
-    }));
+    window.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: false,
+        text: () => 'bad response',
+      }),
+    );
     expect(Apis.getPodLogs('some-pod-name')).rejects.toThrowError('bad response');
   });
 
@@ -66,7 +71,7 @@ describe('Apis', () => {
       apiServerCommitHash: 'd3c4add0a95e930c70a330466d0923827784eb9a',
       apiServerReady: true,
       buildDate: 'Wed Jan 9 19:40:24 UTC 2019',
-      frontendCommitHash: '8efb2fcff9f666ba5b101647e909dc9c6889cecb'
+      frontendCommitHash: '8efb2fcff9f666ba5b101647e909dc9c6889cecb',
     };
     const spy = fetchSpy(JSON.stringify(expectedBuildInfo));
     const actualBuildInfo = await Apis.getBuildInfo();
@@ -91,13 +96,16 @@ describe('Apis', () => {
 
   it('readFile', async () => {
     const spy = fetchSpy('file contents');
-    expect(await Apis.readFile({
-      bucket: 'testbucket',
-      key: 'testkey',
-      source: StorageService.GCS,
-    })).toEqual('file contents');
-    expect(spy).toHaveBeenCalledWith(
-      'artifacts/get?source=gcs&bucket=testbucket&key=testkey', { credentials: 'same-origin' });
+    expect(
+      await Apis.readFile({
+        bucket: 'testbucket',
+        key: 'testkey',
+        source: StorageService.GCS,
+      }),
+    ).toEqual('file contents');
+    expect(spy).toHaveBeenCalledWith('artifacts/get?source=gcs&bucket=testbucket&key=testkey', {
+      credentials: 'same-origin',
+    });
   });
 
   it('getTensorboardApp', async () => {
@@ -114,7 +122,11 @@ describe('Apis', () => {
     await Apis.startTensorboardApp('gs://log/dir');
     expect(spy).toHaveBeenCalledWith(
       'apps/tensorboard?logdir=' + encodeURIComponent('gs://log/dir'),
-      { credentials: 'same-origin', method: 'POST', headers: { 'content-type': 'application/json' } },
+      {
+        credentials: 'same-origin',
+        headers: { 'content-type': 'application/json' },
+        method: 'POST',
+      },
     );
   });
 
@@ -129,7 +141,7 @@ describe('Apis', () => {
         cache: 'no-cache',
         credentials: 'same-origin',
         method: 'POST',
-      }
+      },
     );
   });
 });
diff --git a/frontend/src/lib/Apis.ts b/frontend/src/lib/Apis.ts
index 1a5e7726a1ae..431c623a9360 100644
--- a/frontend/src/lib/Apis.ts
+++ b/frontend/src/lib/Apis.ts
@@ -19,7 +19,11 @@ import { ApiPipeline, PipelineServiceApi } from '../apis/pipeline';
 import { RunServiceApi } from '../apis/run';
 import { ApiVisualization, VisualizationServiceApi } from '../apis/visualization';
 import { PlotType } from '../components/viewers/Viewer';
-import { MetadataStoreServiceClient, ServiceError, UnaryResponse } from '../generated/src/apis/metadata/metadata_store_service_pb_service';
+import {
+  MetadataStoreServiceClient,
+  ServiceError,
+  UnaryResponse,
+} from '../generated/src/apis/metadata/metadata_store_service_pb_service';
 import * as Utils from './Utils';
 import { StoragePath } from './WorkflowParser';
 
@@ -73,32 +77,51 @@ let customVisualizationsAllowed: boolean;
 
 type Callback<R> = (err: ServiceError | null, res: R | null) => void;
 type MetadataApiMethod<T, R> = (request: T, callback: Callback<R>) => UnaryResponse;
-type PromiseBasedMetadataApiMethod<T, R> = (request: T) => Promise<{ response: R | null, error: ServiceError | null }>;
+type PromiseBasedMetadataApiMethod<T, R> = (
+  request: T,
+) => Promise<{ response: R | null; error: ServiceError | null }>;
 
 /**
  * Converts a callback based api method to promise based api method.
  */
-function makePromiseApi<T, R>(apiMethod: MetadataApiMethod<T, R>): PromiseBasedMetadataApiMethod<T, R> {
-  return (request: T) => new Promise((resolve, reject) => {
-    const handler = (error: ServiceError | null, response: R | null) => {
-      // resolve both response and error to keep type information
-      resolve({ response, error });
-    };
-    apiMethod(request, handler);
-  });
+function makePromiseApi<T, R>(
+  apiMethod: MetadataApiMethod<T, R>,
+): PromiseBasedMetadataApiMethod<T, R> {
+  return (request: T) =>
+    new Promise((resolve, reject) => {
+      const handler = (error: ServiceError | null, response: R | null) => {
+        // resolve both response and error to keep type information
+        resolve({ response, error });
+      };
+      apiMethod(request, handler);
+    });
 }
 const metadataServiceClient = new MetadataStoreServiceClient('');
 // TODO: add all other api methods we need here.
 const metadataServicePromiseClient = {
-  getArtifactTypes: makePromiseApi(metadataServiceClient.getArtifactTypes.bind(metadataServiceClient)),
-  getArtifactsByID: makePromiseApi(metadataServiceClient.getArtifactsByID.bind(metadataServiceClient)),
-  getEventsByArtifactIDs: makePromiseApi(metadataServiceClient.getEventsByArtifactIDs.bind(metadataServiceClient)),
-  getEventsByExecutionIDs: makePromiseApi(metadataServiceClient.getEventsByExecutionIDs.bind(metadataServiceClient)),
-  getExecutionsByID: makePromiseApi(metadataServiceClient.getExecutionsByID.bind(metadataServiceClient)),
+  getArtifactTypes: makePromiseApi(
+    metadataServiceClient.getArtifactTypes.bind(metadataServiceClient),
+  ),
+  getArtifacts: makePromiseApi(metadataServiceClient.getArtifacts.bind(metadataServiceClient)),
+  getArtifactsByID: makePromiseApi(
+    metadataServiceClient.getArtifactsByID.bind(metadataServiceClient),
+  ),
+  getEventsByArtifactIDs: makePromiseApi(
+    metadataServiceClient.getEventsByArtifactIDs.bind(metadataServiceClient),
+  ),
+  getEventsByExecutionIDs: makePromiseApi(
+    metadataServiceClient.getEventsByExecutionIDs.bind(metadataServiceClient),
+  ),
+  getExecutionTypes: makePromiseApi(
+    metadataServiceClient.getExecutionTypes.bind(metadataServiceClient),
+  ),
+  getExecutions: makePromiseApi(metadataServiceClient.getExecutions.bind(metadataServiceClient)),
+  getExecutionsByID: makePromiseApi(
+    metadataServiceClient.getExecutionsByID.bind(metadataServiceClient),
+  ),
 };
 
 export class Apis {
-
   public static async areCustomVisualizationsAllowed(): Promise<boolean> {
     // Result is cached to prevent excessive network calls for simple request.
     // The value of customVisualizationsAllowed will only change if the
@@ -110,7 +133,9 @@ export class Apis {
     return customVisualizationsAllowed;
   }
 
-  public static async buildPythonVisualizationConfig(visualizationData: ApiVisualization): Promise<HTMLViewerConfig> {
+  public static async buildPythonVisualizationConfig(
+    visualizationData: ApiVisualization,
+  ): Promise<HTMLViewerConfig> {
     const visualization = await Apis.visualizationServiceApi.createVisualization(visualizationData);
     if (visualization.html) {
       const htmlContent = visualization.html
@@ -198,8 +223,10 @@ export class Apis {
    * Reads file from storage using server.
    */
   public static readFile(path: StoragePath): Promise<string> {
-    return this._fetch('artifacts/get' +
-      `?source=${path.source}&bucket=${path.bucket}&key=${encodeURIComponent(path.key)}`);
+    return this._fetch(
+      'artifacts/get' +
+        `?source=${path.source}&bucket=${path.bucket}&key=${encodeURIComponent(path.key)}`,
+    );
   }
 
   /**
@@ -217,7 +244,7 @@ export class Apis {
       `apps/tensorboard?logdir=${encodeURIComponent(logdir)}`,
       undefined,
       undefined,
-      { headers: { 'content-type': 'application/json', }, method: 'POST', }
+      { headers: { 'content-type': 'application/json' }, method: 'POST' },
     );
   }
 
@@ -226,7 +253,9 @@ export class Apis {
    * object with its metadata parsed.
    */
   public static async uploadPipeline(
-    pipelineName: string, pipelineData: File): Promise<ApiPipeline> {
+    pipelineName: string,
+    pipelineData: File,
+  ): Promise<ApiPipeline> {
     const fd = new FormData();
     fd.append('uploadfile', pipelineData, pipelineData.name);
     return await this._fetchAndParse<ApiPipeline>(
@@ -237,7 +266,8 @@ export class Apis {
         body: fd,
         cache: 'no-cache',
         method: 'POST',
-      });
+      },
+    );
   }
 
   /*
@@ -274,13 +304,19 @@ export class Apis {
    * This function will call this._fetch() and parse the resulting JSON into an object of type T.
    */
   private static async _fetchAndParse<T>(
-    path: string, apisPrefix?: string, query?: string, init?: RequestInit): Promise<T> {
+    path: string,
+    apisPrefix?: string,
+    query?: string,
+    init?: RequestInit,
+  ): Promise<T> {
     const responseText = await this._fetch(path, apisPrefix, query, init);
     try {
       return JSON.parse(responseText) as T;
     } catch (err) {
-      throw new Error(`Error parsing response for path: ${path}\n\n` +
-        `Response was: ${responseText}\n\nError was: ${JSON.stringify(err)}`);
+      throw new Error(
+        `Error parsing response for path: ${path}\n\n` +
+          `Response was: ${responseText}\n\nError was: ${JSON.stringify(err)}`,
+      );
     }
   }
 
@@ -290,14 +326,20 @@ export class Apis {
    * Use this._fetchAndParse() if you intend to parse the response as JSON into an object.
    */
   private static async _fetch(
-    path: string, apisPrefix?: string, query?: string, init?: RequestInit): Promise<string> {
+    path: string,
+    apisPrefix?: string,
+    query?: string,
+    init?: RequestInit,
+  ): Promise<string> {
     init = Object.assign(init || {}, { credentials: 'same-origin' });
     const response = await fetch((apisPrefix || '') + path + (query ? '?' + query : ''), init);
     const responseText = await response.text();
     if (response.ok) {
       return responseText;
     } else {
-      Utils.logger.error(`Response for path: ${path} was not 'ok'\n\nResponse was: ${responseText}`);
+      Utils.logger.error(
+        `Response for path: ${path} was not 'ok'\n\nResponse was: ${responseText}`,
+      );
       throw new Error(responseText);
     }
   }
@@ -307,7 +349,7 @@ export class Apis {
 // Note that '' and 'created_at' are considered equivalent.
 export enum RunSortKeys {
   CREATED_AT = 'created_at',
-  NAME = 'name'
+  NAME = 'name',
 }
 
 // Valid sortKeys as specified by the backend.
@@ -323,7 +365,7 @@ export enum JobSortKeys {
   CREATED_AT = 'created_at',
   ID = 'id',
   NAME = 'name',
-  PIPELINE_ID = 'pipeline_id'
+  PIPELINE_ID = 'pipeline_id',
 }
 
 // Valid sortKeys as specified by the backend.
diff --git a/frontend/src/lib/Buttons.ts b/frontend/src/lib/Buttons.ts
index 52f819293867..f9ce33e63257 100644
--- a/frontend/src/lib/Buttons.ts
+++ b/frontend/src/lib/Buttons.ts
@@ -62,8 +62,11 @@ export default class Buttons {
     return this._map;
   }
 
-  public archive(getSelectedIds: () => string[], useCurrentResource: boolean,
-    callback: (selectedIds: string[], success: boolean) => void): Buttons {
+  public archive(
+    getSelectedIds: () => string[],
+    useCurrentResource: boolean,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): Buttons {
     this._map[ButtonKeys.ARCHIVE] = {
       action: () => this._archive(getSelectedIds(), useCurrentResource, callback),
       disabled: !useCurrentResource,
@@ -83,7 +86,7 @@ export default class Buttons {
       id: 'cloneBtn',
       style: { minWidth: 100 },
       title: 'Clone run',
-      tooltip: 'Create a copy from this run\s initial state',
+      tooltip: 'Create a copy from this runs initial state',
     };
     return this;
   }
@@ -95,13 +98,16 @@ export default class Buttons {
       disabledTitle: useCurrentResource ? undefined : 'Select a recurring run to clone',
       id: 'cloneBtn',
       title: 'Clone recurring run',
-      tooltip: 'Create a copy from this run\s initial state',
+      tooltip: 'Create a copy from this runs initial state',
     };
     return this;
   }
 
-  public retryRun(getSelectedIds: () => string[], useCurrentResource: boolean,
-                  callback: (selectedIds: string[], success: boolean) => void): Buttons {
+  public retryRun(
+    getSelectedIds: () => string[],
+    useCurrentResource: boolean,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): Buttons {
     this._map[ButtonKeys.RETRY] = {
       action: () => this._retryRun(getSelectedIds(), useCurrentResource, callback),
       disabled: !useCurrentResource,
@@ -137,14 +143,21 @@ export default class Buttons {
     return this;
   }
 
-  public delete(getSelectedIds: () => string[], resourceName: 'pipeline' | 'recurring run config',
-    callback: (selectedIds: string[], success: boolean) => void, useCurrentResource: boolean): Buttons {
+  public delete(
+    getSelectedIds: () => string[],
+    resourceName: 'pipeline' | 'recurring run config',
+    callback: (selectedIds: string[], success: boolean) => void,
+    useCurrentResource: boolean,
+  ): Buttons {
     this._map[ButtonKeys.DELETE_RUN] = {
-      action: () => resourceName === 'pipeline' ?
-        this._deletePipeline(getSelectedIds(), useCurrentResource, callback) :
-        this._deleteRecurringRun(getSelectedIds()[0], useCurrentResource, callback),
+      action: () =>
+        resourceName === 'pipeline'
+          ? this._deletePipeline(getSelectedIds(), useCurrentResource, callback)
+          : this._deleteRecurringRun(getSelectedIds()[0], useCurrentResource, callback),
       disabled: !useCurrentResource,
-      disabledTitle: useCurrentResource ? undefined : `Select at least one ${resourceName} to delete`,
+      disabledTitle: useCurrentResource
+        ? undefined
+        : `Select at least one ${resourceName} to delete`,
       id: 'deleteBtn',
       title: 'Delete',
       tooltip: 'Delete',
@@ -159,7 +172,7 @@ export default class Buttons {
       disabledTitle: 'Run schedule already disabled',
       id: 'disableBtn',
       title: 'Disable',
-      tooltip: 'Disable the run\'s trigger',
+      tooltip: "Disable the run's trigger",
     };
     return this;
   }
@@ -171,7 +184,7 @@ export default class Buttons {
       disabledTitle: 'Run schedule already enabled',
       id: 'enableBtn',
       title: 'Enable',
-      tooltip: 'Enable the run\'s trigger',
+      tooltip: "Enable the run's trigger",
     };
     return this;
   }
@@ -251,8 +264,11 @@ export default class Buttons {
     return this;
   }
 
-  public restore(getSelectedIds: () => string[], useCurrentResource: boolean,
-    callback: (selectedIds: string[], success: boolean) => void): Buttons {
+  public restore(
+    getSelectedIds: () => string[],
+    useCurrentResource: boolean,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): Buttons {
     this._map[ButtonKeys.RESTORE] = {
       action: () => this._restore(getSelectedIds(), useCurrentResource, callback),
       disabled: !useCurrentResource,
@@ -264,8 +280,11 @@ export default class Buttons {
     return this;
   }
 
-  public terminateRun(getSelectedIds: () => string[], useCurrentResource: boolean,
-    callback: (selectedIds: string[], success: boolean) => void): Buttons {
+  public terminateRun(
+    getSelectedIds: () => string[],
+    useCurrentResource: boolean,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): Buttons {
     this._map[ButtonKeys.TERMINATE_RUN] = {
       action: () => this._terminateRun(getSelectedIds(), useCurrentResource, callback),
       disabled: !useCurrentResource,
@@ -297,7 +316,7 @@ export default class Buttons {
       if (isRecurring) {
         searchTerms = {
           [QUERY_PARAMS.cloneFromRecurringRun]: runId || '',
-          [QUERY_PARAMS.isRecurring]: '1'
+          [QUERY_PARAMS.isRecurring]: '1',
         };
       } else {
         searchTerms = { [QUERY_PARAMS.cloneFromRun]: runId || '' };
@@ -307,27 +326,35 @@ export default class Buttons {
     }
   }
 
-  private _retryRun(selectedIds: string[], useCurrent: boolean,
-                    callback: (selectedIds: string[], success: boolean) => void): void {
+  private _retryRun(
+    selectedIds: string[],
+    useCurrent: boolean,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): void {
     this._dialogActionHandler(
-        selectedIds,
-        'Retry this run?',
-        useCurrent,
-        id => Apis.runServiceApi.retryRun(id),
-        callback,
-        'Retry',
-        'run'
+      selectedIds,
+      'Retry this run?',
+      useCurrent,
+      id => Apis.runServiceApi.retryRun(id),
+      callback,
+      'Retry',
+      'run',
     );
   }
 
-  private _archive(selectedIds: string[], useCurrent: boolean,
-    callback: (selectedIds: string[], success: boolean) => void): void {
+  private _archive(
+    selectedIds: string[],
+    useCurrent: boolean,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): void {
     this._dialogActionHandler(
       selectedIds,
       `Run${s(selectedIds)} will be moved to the Archive section, where you can still view ` +
-      `${selectedIds.length === 1 ? 'its' : 'their'} details. Please note that the run will not ` +
-      `be stopped if it's running when it's archived. Use the Restore action to restore the ` +
-      `run${s(selectedIds)} to ${selectedIds.length === 1 ? 'its' : 'their'} original location.`,
+        `${
+          selectedIds.length === 1 ? 'its' : 'their'
+        } details. Please note that the run will not ` +
+        `be stopped if it's running when it's archived. Use the Restore action to restore the ` +
+        `run${s(selectedIds)} to ${selectedIds.length === 1 ? 'its' : 'their'} original location.`,
       useCurrent,
       id => Apis.runServiceApi.archiveRun(id),
       callback,
@@ -336,11 +363,16 @@ export default class Buttons {
     );
   }
 
-  private _restore(selectedIds: string[], useCurrent: boolean,
-    callback: (selectedIds: string[], success: boolean) => void): void {
+  private _restore(
+    selectedIds: string[],
+    useCurrent: boolean,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): void {
     this._dialogActionHandler(
       selectedIds,
-      `Do you want to restore ${selectedIds.length === 1 ? 'this run to its' : 'these runs to their'} original location?`,
+      `Do you want to restore ${
+        selectedIds.length === 1 ? 'this run to its' : 'these runs to their'
+      } original location?`,
       useCurrent,
       id => Apis.runServiceApi.unarchiveRun(id),
       callback,
@@ -349,11 +381,16 @@ export default class Buttons {
     );
   }
 
-  private _deletePipeline(selectedIds: string[], useCurrentResource: boolean,
-    callback: (selectedIds: string[], success: boolean) => void): void {
+  private _deletePipeline(
+    selectedIds: string[],
+    useCurrentResource: boolean,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): void {
     this._dialogActionHandler(
       selectedIds,
-      'Do you want to delete this Pipeline? This action cannot be undone.',
+      `Do you want to delete ${
+        selectedIds.length === 1 ? 'this Pipeline' : 'these Pipelines'
+      }? This action cannot be undone.`,
       useCurrentResource,
       id => Apis.pipelineServiceApi.deletePipeline(id),
       callback,
@@ -362,8 +399,11 @@ export default class Buttons {
     );
   }
 
-  private _deleteRecurringRun(id: string, useCurrentResource: boolean,
-    callback: (_: string[], success: boolean) => void): void {
+  private _deleteRecurringRun(
+    id: string,
+    useCurrentResource: boolean,
+    callback: (_: string[], success: boolean) => void,
+  ): void {
     this._dialogActionHandler(
       [id],
       'Do you want to delete this recurring run config? This action cannot be undone.',
@@ -375,12 +415,15 @@ export default class Buttons {
     );
   }
 
-  private _terminateRun(ids: string[], useCurrentResource: boolean,
-    callback: (_: string[], success: boolean) => void): void {
+  private _terminateRun(
+    ids: string[],
+    useCurrentResource: boolean,
+    callback: (_: string[], success: boolean) => void,
+  ): void {
     this._dialogActionHandler(
       ids,
-      'Do you want to terminate this run? This action cannot be undone. This will terminate any'
-      + ' running pods, but they will not be deleted.',
+      'Do you want to terminate this run? This action cannot be undone. This will terminate any' +
+        ' running pods, but they will not be deleted.',
       useCurrentResource,
       id => Apis.runServiceApi.terminateRun(id),
       callback,
@@ -389,47 +432,77 @@ export default class Buttons {
     );
   }
 
-  private _dialogActionHandler(selectedIds: string[], content: string, useCurrentResource: boolean,
-    api: (id: string) => Promise<void>, callback: (selectedIds: string[], success: boolean) => void,
-    actionName: string, resourceName: string): void {
-
+  private _dialogActionHandler(
+    selectedIds: string[],
+    content: string,
+    useCurrentResource: boolean,
+    api: (id: string) => Promise<void>,
+    callback: (selectedIds: string[], success: boolean) => void,
+    actionName: string,
+    resourceName: string,
+  ): void {
     const dialogClosedHandler = (confirmed: boolean) =>
-      this._dialogClosed(confirmed, selectedIds, actionName, resourceName, useCurrentResource, api, callback);
+      this._dialogClosed(
+        confirmed,
+        selectedIds,
+        actionName,
+        resourceName,
+        useCurrentResource,
+        api,
+        callback,
+      );
 
     this._props.updateDialog({
-      buttons: [{
-        onClick: async () => await dialogClosedHandler(false),
-        text: 'Cancel',
-      }, {
-        onClick: async () => await dialogClosedHandler(true),
-        text: actionName,
-      }],
+      buttons: [
+        {
+          onClick: async () => await dialogClosedHandler(false),
+          text: 'Cancel',
+        },
+        {
+          onClick: async () => await dialogClosedHandler(true),
+          text: actionName,
+        },
+      ],
       content,
       onClose: async () => await dialogClosedHandler(false),
-      title: `${actionName} ${useCurrentResource ? 'this' : selectedIds.length} ${resourceName}${useCurrentResource ? '' : s(selectedIds.length)}?`,
+      title: `${actionName} ${useCurrentResource ? 'this' : selectedIds.length} ${resourceName}${
+        useCurrentResource ? '' : s(selectedIds.length)
+      }?`,
     });
   }
 
-  private async _dialogClosed(confirmed: boolean, selectedIds: string[], actionName: string,
-    resourceName: string, useCurrentResource: boolean, api: (id: string) => Promise<void>,
-    callback: (selectedIds: string[], success: boolean) => void): Promise<void> {
+  private async _dialogClosed(
+    confirmed: boolean,
+    selectedIds: string[],
+    actionName: string,
+    resourceName: string,
+    useCurrentResource: boolean,
+    api: (id: string) => Promise<void>,
+    callback: (selectedIds: string[], success: boolean) => void,
+  ): Promise<void> {
     if (confirmed) {
       const unsuccessfulIds: string[] = [];
       const errorMessages: string[] = [];
-      await Promise.all(selectedIds.map(async (id) => {
-        try {
-          await api(id);
-        } catch (err) {
-          unsuccessfulIds.push(id);
-          const errorMessage = await errorToMessage(err);
-          errorMessages.push(`Failed to ${actionName.toLowerCase()} ${resourceName}: ${id} with error: "${errorMessage}"`);
-        }
-      }));
+      await Promise.all(
+        selectedIds.map(async id => {
+          try {
+            await api(id);
+          } catch (err) {
+            unsuccessfulIds.push(id);
+            const errorMessage = await errorToMessage(err);
+            errorMessages.push(
+              `Failed to ${actionName.toLowerCase()} ${resourceName}: ${id} with error: "${errorMessage}"`,
+            );
+          }
+        }),
+      );
 
       const successfulOps = selectedIds.length - unsuccessfulIds.length;
       if (useCurrentResource || successfulOps > 0) {
         this._props.updateSnackbar({
-          message: `${actionName} succeeded for ${useCurrentResource ? 'this' : successfulOps} ${resourceName}${useCurrentResource ? '' : s(successfulOps)}`,
+          message: `${actionName} succeeded for ${
+            useCurrentResource ? 'this' : successfulOps
+          } ${resourceName}${useCurrentResource ? '' : s(successfulOps)}`,
           open: true,
         });
         if (!useCurrentResource) {
@@ -441,7 +514,9 @@ export default class Buttons {
         this._props.updateDialog({
           buttons: [{ text: 'Dismiss' }],
           content: errorMessages.join('\n\n'),
-          title: `Failed to ${actionName.toLowerCase()} ${useCurrentResource ? '' : unsuccessfulIds.length + ' '}${resourceName}${useCurrentResource ? '' : s(unsuccessfulIds)}`,
+          title: `Failed to ${actionName.toLowerCase()} ${
+            useCurrentResource ? '' : unsuccessfulIds.length + ' '
+          }${resourceName}${useCurrentResource ? '' : s(unsuccessfulIds)}`,
         });
       }
 
@@ -458,16 +533,21 @@ export default class Buttons {
   }
 
   private _createNewExperiment(pipelineId: string): void {
-    const searchString = pipelineId ? this._urlParser.build({
-      [QUERY_PARAMS.pipelineId]: pipelineId
-    }) : '';
+    const searchString = pipelineId
+      ? this._urlParser.build({
+          [QUERY_PARAMS.pipelineId]: pipelineId,
+        })
+      : '';
     this._props.history.push(RoutePage.NEW_EXPERIMENT + searchString);
   }
 
   private _createNewRun(isRecurring: boolean, experimentId?: string): void {
-    const searchString = this._urlParser.build(Object.assign(
-      { [QUERY_PARAMS.experimentId]: experimentId || '' },
-      isRecurring ? { [QUERY_PARAMS.isRecurring]: '1' } : {}));
+    const searchString = this._urlParser.build(
+      Object.assign(
+        { [QUERY_PARAMS.experimentId]: experimentId || '' },
+        isRecurring ? { [QUERY_PARAMS.isRecurring]: '1' } : {},
+      ),
+    );
     this._props.history.push(RoutePage.NEW_RUN + searchString);
   }
 
@@ -476,13 +556,11 @@ export default class Buttons {
     const fromRunId = this._urlParser.get(QUERY_PARAMS.fromRunId);
 
     if (fromRunId) {
-      searchString = this._urlParser.build(Object.assign(
-        { [QUERY_PARAMS.fromRunId]: fromRunId }
-      ));
+      searchString = this._urlParser.build(Object.assign({ [QUERY_PARAMS.fromRunId]: fromRunId }));
     } else {
-      searchString = this._urlParser.build(Object.assign(
-        { [QUERY_PARAMS.pipelineId]: pipelineId || '' }
-      ));
+      searchString = this._urlParser.build(
+        Object.assign({ [QUERY_PARAMS.pipelineId]: pipelineId || '' }),
+      );
     }
 
     this._props.history.push(RoutePage.NEW_RUN + searchString);
@@ -493,7 +571,9 @@ export default class Buttons {
       const toolbarActions = this._props.toolbarProps.actions;
 
       // TODO(rileyjbauer): make sure this is working as expected
-      const buttonKey = enabled ? ButtonKeys.ENABLE_RECURRING_RUN : ButtonKeys.DISABLE_RECURRING_RUN;
+      const buttonKey = enabled
+        ? ButtonKeys.ENABLE_RECURRING_RUN
+        : ButtonKeys.DISABLE_RECURRING_RUN;
 
       toolbarActions[buttonKey].busy = true;
       this._props.updateToolbar({ actions: toolbarActions });
@@ -513,5 +593,4 @@ export default class Buttons {
       }
     }
   }
-
 }
diff --git a/frontend/src/lib/CompareUtils.test.ts b/frontend/src/lib/CompareUtils.test.ts
index ab4a74f926fa..a733fd959f99 100644
--- a/frontend/src/lib/CompareUtils.test.ts
+++ b/frontend/src/lib/CompareUtils.test.ts
@@ -19,161 +19,204 @@ import { ApiRun } from '../apis/run';
 import { Workflow } from 'third_party/argo-ui/argo_template';
 
 describe('CompareUtils', () => {
-
   describe('getParamsCompareProps', () => {
     it('works with no runs', () => {
-      expect(CompareUtils.getParamsCompareProps([], [])).toEqual(
-        { rows: [], xLabels: [], yLabels: [] });
+      expect(CompareUtils.getParamsCompareProps([], [])).toEqual({
+        rows: [],
+        xLabels: [],
+        yLabels: [],
+      });
     });
 
     it('works with one run', () => {
       const runs = [{ run: { name: 'run1' } }];
-      const workflowObjects = [{
-        spec: {
-          arguments: {
-            parameters: [{
-              name: 'param1',
-              value: 'value1',
-            }],
+      const workflowObjects = [
+        {
+          spec: {
+            arguments: {
+              parameters: [
+                {
+                  name: 'param1',
+                  value: 'value1',
+                },
+              ],
+            },
           },
-        },
-      } as Workflow];
-      expect(CompareUtils.getParamsCompareProps(runs, workflowObjects)).toEqual(
-        { rows: [['value1']], xLabels: ['run1'], yLabels: ['param1'] });
+        } as Workflow,
+      ];
+      expect(CompareUtils.getParamsCompareProps(runs, workflowObjects)).toEqual({
+        rows: [['value1']],
+        xLabels: ['run1'],
+        yLabels: ['param1'],
+      });
     });
 
     it('works with one run and several parameters', () => {
       const runs = [{ run: { name: 'run1' } }];
-      const workflowObjects = [{
-        spec: {
-          arguments: {
-            parameters: [{
-              name: 'param1',
-              value: 'value1',
-            }, {
-              name: 'param2',
-              value: 'value2',
-            }, {
-              name: 'param3',
-              value: 'value3',
-            }],
-          },
-        },
-      } as Workflow];
-      expect(CompareUtils.getParamsCompareProps(runs, workflowObjects)).toEqual(
+      const workflowObjects = [
         {
-          rows: [['value1'], ['value2'], ['value3']],
-          xLabels: ['run1'],
-          yLabels: ['param1', 'param2', 'param3'],
-        });
+          spec: {
+            arguments: {
+              parameters: [
+                {
+                  name: 'param1',
+                  value: 'value1',
+                },
+                {
+                  name: 'param2',
+                  value: 'value2',
+                },
+                {
+                  name: 'param3',
+                  value: 'value3',
+                },
+              ],
+            },
+          },
+        } as Workflow,
+      ];
+      expect(CompareUtils.getParamsCompareProps(runs, workflowObjects)).toEqual({
+        rows: [['value1'], ['value2'], ['value3']],
+        xLabels: ['run1'],
+        yLabels: ['param1', 'param2', 'param3'],
+      });
     });
 
     it('works with two runs and one parameter', () => {
       const runs = [{ run: { name: 'run1' } }, { run: { name: 'run2' } }];
-      const workflowObjects = [{
-        spec: {
-          arguments: {
-            parameters: [{
-              name: 'param1',
-              value: 'value1',
-            }],
-          },
-        },
-      } as Workflow, {
-        spec: {
-          arguments: {
-            parameters: [{
-              name: 'param1',
-              value: 'value2',
-            }],
+      const workflowObjects = [
+        {
+          spec: {
+            arguments: {
+              parameters: [
+                {
+                  name: 'param1',
+                  value: 'value1',
+                },
+              ],
+            },
           },
-        },
-      } as Workflow];
-      expect(CompareUtils.getParamsCompareProps(runs, workflowObjects)).toEqual(
+        } as Workflow,
         {
-          rows: [['value1', 'value2']],
-          xLabels: ['run1', 'run2'],
-          yLabels: ['param1'],
-        });
+          spec: {
+            arguments: {
+              parameters: [
+                {
+                  name: 'param1',
+                  value: 'value2',
+                },
+              ],
+            },
+          },
+        } as Workflow,
+      ];
+      expect(CompareUtils.getParamsCompareProps(runs, workflowObjects)).toEqual({
+        rows: [['value1', 'value2']],
+        xLabels: ['run1', 'run2'],
+        yLabels: ['param1'],
+      });
     });
 
     it('sorts on parameter occurrence frequency', () => {
-      const runs = [{ run: { name: 'run1' } }, { run: { name: 'run2' } }, { run: { name: 'run3' } }];
-      const workflowObjects = [{
-        spec: {
-          arguments: {
-            parameters: [{
-              name: 'param1',
-              value: 'value1',
-            }, {
-              name: 'param2',
-              value: 'value2',
-            }, {
-              name: 'param3',
-              value: 'value3',
-            }],
-          },
-        },
-      } as Workflow, {
-        spec: {
-          arguments: {
-            parameters: [{
-              name: 'param2',
-              value: 'value4',
-            }, {
-              name: 'param3',
-              value: 'value5',
-            }],
+      const runs = [
+        { run: { name: 'run1' } },
+        { run: { name: 'run2' } },
+        { run: { name: 'run3' } },
+      ];
+      const workflowObjects = [
+        {
+          spec: {
+            arguments: {
+              parameters: [
+                {
+                  name: 'param1',
+                  value: 'value1',
+                },
+                {
+                  name: 'param2',
+                  value: 'value2',
+                },
+                {
+                  name: 'param3',
+                  value: 'value3',
+                },
+              ],
+            },
           },
-        },
-      } as Workflow, {
-        spec: {
-          arguments: {
-            parameters: [{
-              name: 'param3',
-              value: 'value6',
-            }, {
-              name: 'param4',
-              value: 'value7',
-            }],
+        } as Workflow,
+        {
+          spec: {
+            arguments: {
+              parameters: [
+                {
+                  name: 'param2',
+                  value: 'value4',
+                },
+                {
+                  name: 'param3',
+                  value: 'value5',
+                },
+              ],
+            },
           },
-        },
-      } as Workflow];
-      expect(CompareUtils.getParamsCompareProps(runs, workflowObjects)).toEqual(
+        } as Workflow,
         {
-          rows: [
-            ['value3', 'value5', 'value6'],
-            ['value2', 'value4', ''],
-            ['value1', '', ''],
-            ['', '', 'value7'],
-          ],
-          xLabels: ['run1', 'run2', 'run3'],
-          yLabels: ['param3', 'param2', 'param1', 'param4'],
-        });
+          spec: {
+            arguments: {
+              parameters: [
+                {
+                  name: 'param3',
+                  value: 'value6',
+                },
+                {
+                  name: 'param4',
+                  value: 'value7',
+                },
+              ],
+            },
+          },
+        } as Workflow,
+      ];
+      expect(CompareUtils.getParamsCompareProps(runs, workflowObjects)).toEqual({
+        rows: [
+          ['value3', 'value5', 'value6'],
+          ['value2', 'value4', ''],
+          ['value1', '', ''],
+          ['', '', 'value7'],
+        ],
+        xLabels: ['run1', 'run2', 'run3'],
+        yLabels: ['param3', 'param2', 'param1', 'param4'],
+      });
     });
   });
 
   describe('multiRunMetricsCompareProps', () => {
     it('returns empty props when passed no runs', () => {
-      expect(CompareUtils.multiRunMetricsCompareProps([])).toEqual(
-        { rows: [], xLabels: [], yLabels: [] }
-      );
+      expect(CompareUtils.multiRunMetricsCompareProps([])).toEqual({
+        rows: [],
+        xLabels: [],
+        yLabels: [],
+      });
     });
 
     it('returns only x labels when passed a run with no metrics', () => {
       const runs = [{ name: 'run1' } as ApiRun];
-      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual(
-        { rows: [], xLabels: ['run1'], yLabels: [] }
-      );
+      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual({
+        rows: [],
+        xLabels: ['run1'],
+        yLabels: [],
+      });
     });
 
     it('returns a row when passed a run with a metric', () => {
       const runs = [
-        { name: 'run1', metrics: [{ name: 'some-metric', number_value: 0.33 }] } as ApiRun
+        { name: 'run1', metrics: [{ name: 'some-metric', number_value: 0.33 }] } as ApiRun,
       ];
-      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual(
-        { rows: [['0.330']], xLabels: ['run1'], yLabels: ['some-metric'] }
-      );
+      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual({
+        rows: [['0.330']],
+        xLabels: ['run1'],
+        yLabels: ['some-metric'],
+      });
     });
 
     it('returns multiple rows when passed a run with multiple metrics', () => {
@@ -184,159 +227,149 @@ describe('CompareUtils', () => {
             { name: 'another-metric', number_value: 0.554 },
           ],
           name: 'run1',
-        } as ApiRun
+        } as ApiRun,
       ];
-      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual(
-        {
-          rows: [['0.330'], ['0.554']],
-          xLabels: ['run1'],
-          yLabels: ['some-metric', 'another-metric'],
-        }
-      );
+      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual({
+        rows: [['0.330'], ['0.554']],
+        xLabels: ['run1'],
+        yLabels: ['some-metric', 'another-metric'],
+      });
     });
 
     it('returns a row when passed multiple runs with the same metric', () => {
       const runs = [
         {
-          metrics: [
-            { name: 'some-metric', number_value: 0.33 },
-          ],
+          metrics: [{ name: 'some-metric', number_value: 0.33 }],
           name: 'run1',
         } as ApiRun,
         {
-          metrics: [
-            { name: 'some-metric', number_value: 0.66 },
-          ],
+          metrics: [{ name: 'some-metric', number_value: 0.66 }],
           name: 'run2',
-        } as ApiRun
+        } as ApiRun,
       ];
-      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual(
-        {
-          rows: [['0.330', '0.660']],
-          xLabels: ['run1', 'run2'],
-          yLabels: ['some-metric'],
-        }
-      );
+      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual({
+        rows: [['0.330', '0.660']],
+        xLabels: ['run1', 'run2'],
+        yLabels: ['some-metric'],
+      });
     });
 
     it('returns multiple rows when passed multiple runs with the different metrics', () => {
       const runs = [
         {
-          metrics: [
-            { name: 'some-metric', number_value: 0.33 },
-          ],
+          metrics: [{ name: 'some-metric', number_value: 0.33 }],
           name: 'run1',
         } as ApiRun,
         {
-          metrics: [
-            { name: 'another-metric', number_value: 0.66 },
-          ],
+          metrics: [{ name: 'another-metric', number_value: 0.66 }],
           name: 'run2',
-        } as ApiRun
+        } as ApiRun,
       ];
-      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual(
-        {
-          rows: [['0.330', ''], ['', '0.660']],
-          xLabels: ['run1', 'run2'],
-          yLabels: ['some-metric', 'another-metric'],
-        }
-      );
+      expect(CompareUtils.multiRunMetricsCompareProps(runs)).toEqual({
+        rows: [['0.330', ''], ['', '0.660']],
+        xLabels: ['run1', 'run2'],
+        yLabels: ['some-metric', 'another-metric'],
+      });
     });
   });
 
   describe('singleRunToMetricsCompareProps', () => {
     it('returns empty props when passed no run', () => {
-      expect(CompareUtils.singleRunToMetricsCompareProps()).toEqual(
-        { rows: [], xLabels: [], yLabels: [] }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps()).toEqual({
+        rows: [],
+        xLabels: [],
+        yLabels: [],
+      });
     });
 
     it('returns empty props when passed a run with no metrics', () => {
       const run = { name: 'run1' } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        { rows: [], xLabels: [], yLabels: [] }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [],
+        xLabels: [],
+        yLabels: [],
+      });
     });
 
     it('ignores metrics with no name', () => {
       const run = {
-        metrics: [
-          { node_id: 'some-node-id', number_value: 0.33 },
-        ],
-        name: 'run1'
+        metrics: [{ node_id: 'some-node-id', number_value: 0.33 }],
+        name: 'run1',
       } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        { rows: [], xLabels: [], yLabels: [] }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [],
+        xLabels: [],
+        yLabels: [],
+      });
     });
 
     it('ignores metrics with no node ID', () => {
       const run = {
-        metrics: [
-          { name: 'some-metric-name', number_value: 0.33 },
-        ],
-        name: 'run1'
+        metrics: [{ name: 'some-metric-name', number_value: 0.33 }],
+        name: 'run1',
       } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        { rows: [], xLabels: [], yLabels: [] }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [],
+        xLabels: [],
+        yLabels: [],
+      });
     });
 
     it('ignores metrics with no number value', () => {
       const run = {
-        metrics: [
-          { name: 'some-metric-name', node_id: 'someNodeId' },
-        ],
-        name: 'run1'
+        metrics: [{ name: 'some-metric-name', node_id: 'someNodeId' }],
+        name: 'run1',
       } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        { rows: [], xLabels: [], yLabels: [] }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [],
+        xLabels: [],
+        yLabels: [],
+      });
     });
 
     it('ignores metrics with NaN number values', () => {
       const run = {
-        metrics: [
-          { name: 'some-metric-name', node_id: 'someNodeId', number_value: NaN },
-        ],
-        name: 'run1'
+        metrics: [{ name: 'some-metric-name', node_id: 'someNodeId', number_value: NaN }],
+        name: 'run1',
       } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        { rows: [], xLabels: [], yLabels: [] }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [],
+        xLabels: [],
+        yLabels: [],
+      });
     });
 
     it('returns a row when run has a metric', () => {
       const run = {
-        metrics: [
-          { name: 'some-metric-name', node_id: 'someNodeId', number_value: 0.23 },
-        ],
-        name: 'run1'
+        metrics: [{ name: 'some-metric-name', node_id: 'someNodeId', number_value: 0.23 }],
+        name: 'run1',
       } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        { rows: [['0.230']], xLabels: ['some-metric-name'], yLabels: ['someNodeId'] }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [['0.230']],
+        xLabels: ['some-metric-name'],
+        yLabels: ['someNodeId'],
+      });
     });
 
-    it('uses a node\'s display name if present in the workflow', () => {
+    it("uses a node's display name if present in the workflow", () => {
       const run = {
-        metrics: [
-          { name: 'some-metric-name', node_id: 'someNodeId', number_value: 0.23 },
-        ],
-        name: 'run1'
+        metrics: [{ name: 'some-metric-name', node_id: 'someNodeId', number_value: 0.23 }],
+        name: 'run1',
       } as ApiRun;
       const workflow = {
         status: {
           nodes: {
             someNodeId: {
-              displayName: 'some-display-name'
-            }
-          }
-        }
+              displayName: 'some-display-name',
+            },
+          },
+        },
       } as any;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run, workflow)).toEqual(
-        { rows: [['0.230']], xLabels: ['some-metric-name'], yLabels: ['some-display-name'] }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run, workflow)).toEqual({
+        rows: [['0.230']],
+        xLabels: ['some-metric-name'],
+        yLabels: ['some-display-name'],
+      });
     });
 
     it('returns a single row when a run has a single step that produces multiple metrics', () => {
@@ -345,15 +378,13 @@ describe('CompareUtils', () => {
           { name: 'some-metric-name', node_id: 'someNodeId', number_value: 0.23 },
           { name: 'another-metric-name', node_id: 'someNodeId', number_value: 0.54 },
         ],
-        name: 'run1'
+        name: 'run1',
       } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        {
-          rows: [['0.230', '0.540']],
-          xLabels: ['some-metric-name', 'another-metric-name'],
-          yLabels: ['someNodeId']
-        }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [['0.230', '0.540']],
+        xLabels: ['some-metric-name', 'another-metric-name'],
+        yLabels: ['someNodeId'],
+      });
     });
 
     it('returns multiple rows when a run has a multiple steps that produce one metric', () => {
@@ -362,15 +393,13 @@ describe('CompareUtils', () => {
           { name: 'some-metric-name', node_id: 'someNodeId', number_value: 0.23 },
           { name: 'another-metric-name', node_id: 'anotherNodeId', number_value: 0.54 },
         ],
-        name: 'run1'
+        name: 'run1',
       } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        {
-          rows: [['0.230', ''], ['', '0.540']],
-          xLabels: ['some-metric-name', 'another-metric-name'],
-          yLabels: ['someNodeId', 'anotherNodeId']
-        }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [['0.230', ''], ['', '0.540']],
+        xLabels: ['some-metric-name', 'another-metric-name'],
+        yLabels: ['someNodeId', 'anotherNodeId'],
+      });
     });
 
     it('returns a single column when a run has a multiple steps that produces the same metric', () => {
@@ -379,16 +408,13 @@ describe('CompareUtils', () => {
           { name: 'some-metric-name', node_id: 'someNodeId', number_value: 0.23 },
           { name: 'some-metric-name', node_id: 'anotherNodeId', number_value: 0.54 },
         ],
-        name: 'run1'
+        name: 'run1',
       } as ApiRun;
-      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual(
-        {
-          rows: [['0.230'], ['0.540']],
-          xLabels: ['some-metric-name'],
-          yLabels: ['someNodeId', 'anotherNodeId']
-        }
-      );
+      expect(CompareUtils.singleRunToMetricsCompareProps(run)).toEqual({
+        rows: [['0.230'], ['0.540']],
+        xLabels: ['some-metric-name'],
+        yLabels: ['someNodeId', 'anotherNodeId'],
+      });
     });
-
   });
 });
diff --git a/frontend/src/lib/CompareUtils.ts b/frontend/src/lib/CompareUtils.ts
index 7e3a2803bb95..d566a5f33685 100644
--- a/frontend/src/lib/CompareUtils.ts
+++ b/frontend/src/lib/CompareUtils.ts
@@ -30,27 +30,28 @@ export default class CompareUtils {
    * runs and workflowObjects are required to be in the same order, so workflowObject[i]
    * is run[i]'s parsed workflow object
    */
-  public static getParamsCompareProps(runs: ApiRunDetail[], workflowObjects: Workflow[]): CompareTableProps {
+  public static getParamsCompareProps(
+    runs: ApiRunDetail[],
+    workflowObjects: Workflow[],
+  ): CompareTableProps {
     if (runs.length !== workflowObjects.length) {
       // Should never happen
       logger.error('Numbers of passed in runs and workflows do not match');
     }
 
-    const yLabels = chain(flatten(workflowObjects
-      .map(w => WorkflowParser.getParameters(w))))
-      .countBy(p => p.name)                         // count by parameter name
-      .map((k, v) => ({ name: v, count: k }))       // convert to counter objects
-      .orderBy('count', 'desc')                     // sort on count field, descending
+    const yLabels = chain(flatten(workflowObjects.map(w => WorkflowParser.getParameters(w))))
+      .countBy(p => p.name) // count by parameter name
+      .map((k, v) => ({ name: v, count: k })) // convert to counter objects
+      .orderBy('count', 'desc') // sort on count field, descending
       .map(o => o.name)
       .value();
 
     const rows = yLabels.map(name => {
-      return workflowObjects
-        .map(w => {
-          const params = WorkflowParser.getParameters(w);
-          const param = params.find(p => p.name === name);
-          return param ? param.value || '' : '';
-        });
+      return workflowObjects.map(w => {
+        const params = WorkflowParser.getParameters(w);
+        const param = params.find(p => p.name === name);
+        return param ? param.value || '' : '';
+      });
     });
 
     return {
@@ -65,14 +66,13 @@ export default class CompareUtils {
 
     const yLabels = Array.from(metricMetadataMap.keys());
 
-    const rows =
-      yLabels.map(name =>
-        runs.map(r =>
-          // TODO(rjbauer): This logic isn't quite right. A single run can have multiple metrics
-          // with the same name, but here we're stopping once we find one.
-          MetricUtils.getMetricDisplayString((r.metrics || []).find(m => m.name === name))
-        )
-      );
+    const rows = yLabels.map(name =>
+      runs.map(r =>
+        // TODO(rjbauer): This logic isn't quite right. A single run can have multiple metrics
+        // with the same name, but here we're stopping once we find one.
+        MetricUtils.getMetricDisplayString((r.metrics || []).find(m => m.name === name)),
+      ),
+    );
 
     return {
       rows,
@@ -89,7 +89,10 @@ export default class CompareUtils {
    * rows: an array of arrays, each representing all of the metrics produced by a given step of the
    * execution.
    */
-  public static singleRunToMetricsCompareProps(run?: ApiRun, workflow?: Workflow): CompareTableProps {
+  public static singleRunToMetricsCompareProps(
+    run?: ApiRun,
+    workflow?: Workflow,
+  ): CompareTableProps {
     let rows: string[][] = [];
     let xLabels: string[] = [];
     const yLabels: string[] = [];
@@ -98,7 +101,12 @@ export default class CompareUtils {
       const nodeIds: Set<string> = new Set();
 
       (run.metrics || []).forEach(metric => {
-        if (!metric.name || !metric.node_id || metric.number_value === undefined || isNaN(metric.number_value)) {
+        if (
+          !metric.name ||
+          !metric.node_id ||
+          metric.number_value === undefined ||
+          isNaN(metric.number_value)
+        ) {
           return;
         }
         const nodeToValue = namesToNodesToValues.get(metric.name) || new Map();
@@ -109,13 +117,10 @@ export default class CompareUtils {
 
       xLabels = Array.from(namesToNodesToValues.keys());
 
-      rows =
-        Array.from(nodeIds.keys()).map(nodeId => {
-          yLabels.push((workflow && workflow.status.nodes[nodeId].displayName) || nodeId);
-          return xLabels.map(metricName =>
-            namesToNodesToValues.get(metricName)!.get(nodeId) || ''
-          );
-        });
+      rows = Array.from(nodeIds.keys()).map(nodeId => {
+        yLabels.push((workflow && workflow.status.nodes[nodeId].displayName) || nodeId);
+        return xLabels.map(metricName => namesToNodesToValues.get(metricName)!.get(nodeId) || '');
+      });
     }
 
     return {
diff --git a/frontend/src/lib/MetadataUtils.ts b/frontend/src/lib/MetadataUtils.ts
index 35f3fa0a70bc..3aca83651c87 100644
--- a/frontend/src/lib/MetadataUtils.ts
+++ b/frontend/src/lib/MetadataUtils.ts
@@ -1,5 +1,9 @@
 import { ArtifactType, Event } from '../generated/src/apis/metadata/metadata_store_pb';
-import { GetArtifactTypesRequest, GetEventsByArtifactIDsRequest, GetEventsByArtifactIDsResponse } from '../generated/src/apis/metadata/metadata_store_service_pb';
+import {
+  GetArtifactTypesRequest,
+  GetEventsByArtifactIDsRequest,
+  GetEventsByArtifactIDsResponse,
+} from '../generated/src/apis/metadata/metadata_store_service_pb';
 import { Apis } from './Apis';
 import { formatDateString, serviceErrorToString } from './Utils';
 
@@ -12,7 +16,9 @@ export const getArtifactCreationTime = async (artifactId: number): Promise<strin
   }
 
   eventsRequest.setArtifactIdsList([artifactId]);
-  const { error, response } = await Apis.getMetadataServicePromiseClient().getEventsByArtifactIDs(eventsRequest);
+  const { error, response } = await Apis.getMetadataServicePromiseClient().getEventsByArtifactIDs(
+    eventsRequest,
+  );
   if (error) {
     throw new Error(serviceErrorToString(error));
   }
@@ -21,9 +27,9 @@ export const getArtifactCreationTime = async (artifactId: number): Promise<strin
     type: event.getType() || Event.Type.UNKNOWN,
   }));
   // The last output event is the event that produced current artifact.
-  const lastOutputEvent = data.reverse().find(event =>
-    event.type === Event.Type.DECLARED_OUTPUT || event.type === Event.Type.OUTPUT
-  );
+  const lastOutputEvent = data
+    .reverse()
+    .find(event => event.type === Event.Type.DECLARED_OUTPUT || event.type === Event.Type.OUTPUT);
   if (lastOutputEvent && lastOutputEvent.time) {
     return formatDateString(new Date(lastOutputEvent.time));
   } else {
@@ -34,12 +40,14 @@ export const getArtifactCreationTime = async (artifactId: number): Promise<strin
 
 export const getArtifactTypeMap = async (): Promise<Map<number, ArtifactType>> => {
   const map = new Map<number, ArtifactType>();
-  const { response, error } = await Apis.getMetadataServicePromiseClient().getArtifactTypes(new GetArtifactTypesRequest());
+  const { response, error } = await Apis.getMetadataServicePromiseClient().getArtifactTypes(
+    new GetArtifactTypesRequest(),
+  );
   if (error) {
     throw new Error(serviceErrorToString(error));
   }
 
-  (response && response.getArtifactTypesList() || []).forEach((artifactType) => {
+  ((response && response.getArtifactTypesList()) || []).forEach(artifactType => {
     const id = artifactType.getId();
     if (id) {
       map.set(id, artifactType);
diff --git a/frontend/src/lib/MetricUtils.test.ts b/frontend/src/lib/MetricUtils.test.ts
index d1fe79e4bbee..a915b3398d06 100644
--- a/frontend/src/lib/MetricUtils.test.ts
+++ b/frontend/src/lib/MetricUtils.test.ts
@@ -18,9 +18,7 @@ import MetricUtils from './MetricUtils';
 import { RunMetricFormat } from '../apis/run';
 
 describe('MetricUtils', () => {
-
   describe('getMetricDisplayString', () => {
-
     it('returns an empty string when no metric is provided', () => {
       expect(MetricUtils.getMetricDisplayString()).toEqual('');
     });
@@ -38,22 +36,24 @@ describe('MetricUtils', () => {
     });
 
     it('returns a formatted string when metric has format percentage and has number value', () => {
-      expect(MetricUtils.getMetricDisplayString({
+      expect(
+        MetricUtils.getMetricDisplayString({
           format: RunMetricFormat.PERCENTAGE,
-          number_value: 0.12341234
-        })
+          number_value: 0.12341234,
+        }),
       ).toEqual('12.341%');
     });
 
     it('returns a formatted string to specified decimal places when metric has format percentage', () => {
-      expect(MetricUtils.getMetricDisplayString(
-        {
-          format: RunMetricFormat.PERCENTAGE,
-          number_value: 0.12341234
-        },
-        1)
+      expect(
+        MetricUtils.getMetricDisplayString(
+          {
+            format: RunMetricFormat.PERCENTAGE,
+            number_value: 0.12341234,
+          },
+          1,
+        ),
       ).toEqual('12.3%');
     });
   });
-
 });
diff --git a/frontend/src/lib/OutputArtifactLoader.test.ts b/frontend/src/lib/OutputArtifactLoader.test.ts
index 9b184e635892..94136b760e53 100644
--- a/frontend/src/lib/OutputArtifactLoader.test.ts
+++ b/frontend/src/lib/OutputArtifactLoader.test.ts
@@ -33,7 +33,9 @@ describe('OutputArtifactLoader', () => {
 
   describe('loadOutputArtifacts', () => {
     it('handles bad API call', async () => {
-      jest.spyOn(Apis, 'readFile').mockImplementation(() => { throw new Error('bad call'); });
+      jest.spyOn(Apis, 'readFile').mockImplementation(() => {
+        throw new Error('bad call');
+      });
       expect(await OutputArtifactLoader.load(storagePath)).toEqual([]);
       expect(consoleSpy).toHaveBeenCalled();
 
@@ -74,35 +76,42 @@ describe('OutputArtifactLoader', () => {
     it('requires "source" metadata field', async () => {
       const metadata = { schema: 'schema', format: 'format' };
       expect(OutputArtifactLoader.buildConfusionMatrixConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "source" is required.');
+        'Malformed metadata, property "source" is required.',
+      );
     });
 
     it('requires "labels" metadata field', () => {
       const metadata = { source: 'source', schema: 'schema' };
       expect(OutputArtifactLoader.buildConfusionMatrixConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "labels" is required.');
+        'Malformed metadata, property "labels" is required.',
+      );
     });
 
     it('requires "schema" metadata field', () => {
       const metadata = { source: 'source', labels: 'labels' };
       expect(OutputArtifactLoader.buildConfusionMatrixConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "schema" missing.');
+        'Malformed metadata, property "schema" missing.',
+      );
     });
 
     it('handles empty schema', () => {
       const metadata = { source: 'gs://source', labels: ['labels'], schema: 'schema' };
       expect(OutputArtifactLoader.buildConfusionMatrixConfig(metadata as any)).rejects.toThrowError(
-        '"schema" must be an array of {"name": string, "type": string} objects');
+        '"schema" must be an array of {"name": string, "type": string} objects',
+      );
     });
 
     it('handles schema with bad field format', () => {
       const metadata = {
         labels: ['field1', 'field2'],
-        schema: [{
-          name: 'field1',
-        }, {
-          type: 'field2 type',
-        }],
+        schema: [
+          {
+            name: 'field1',
+          },
+          {
+            type: 'field2 type',
+          },
+        ],
         source: 'gs://source',
       };
       fileToRead = `
@@ -112,34 +121,42 @@ describe('OutputArtifactLoader', () => {
       field2,field2,0
       `;
       expect(OutputArtifactLoader.buildConfusionMatrixConfig(metadata as any)).rejects.toThrowError(
-        'Each item in the "schema" array must contain a "name" field');
+        'Each item in the "schema" array must contain a "name" field',
+      );
     });
 
     it('handles when too many labels are specified for the data', () => {
       const metadata = {
         labels: ['labels', 'labels'],
-        schema: [{
-          name: 'field1',
-        }, {
-          name: 'field2',
-          type: 'field2 type',
-        }],
+        schema: [
+          {
+            name: 'field1',
+          },
+          {
+            name: 'field2',
+            type: 'field2 type',
+          },
+        ],
         source: 'gs://path',
       };
       fileToRead = '';
       expect(OutputArtifactLoader.buildConfusionMatrixConfig(metadata as any)).rejects.toThrowError(
-        'Data dimensions 0 do not match the number of labels passed 2');
+        'Data dimensions 0 do not match the number of labels passed 2',
+      );
     });
 
     it('returns a confusion matrix config with basic metadata', async () => {
       const metadata = {
         labels: ['field1', 'field2'],
-        schema: [{
-          name: 'field1',
-        }, {
-          name: 'field2',
-          type: 'field2 type',
-        }],
+        schema: [
+          {
+            name: 'field1',
+          },
+          {
+            name: 'field2',
+            type: 'field2 type',
+          },
+        ],
         source: 'gs://path',
       };
       fileToRead = `
@@ -162,25 +179,29 @@ describe('OutputArtifactLoader', () => {
     it('requires "source" metadata field', () => {
       const metadata = { header: 'header', format: 'format' };
       expect(OutputArtifactLoader.buildPagedTableConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "source" is required.');
+        'Malformed metadata, property "source" is required.',
+      );
     });
 
     it('requires "header" metadata field', () => {
       const metadata = { source: 'source', format: 'format' };
       expect(OutputArtifactLoader.buildPagedTableConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "header" is required.');
+        'Malformed metadata, property "header" is required.',
+      );
     });
 
     it('requires "format" metadata field', () => {
       const metadata = { source: 'source', header: 'header' };
       expect(OutputArtifactLoader.buildPagedTableConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "format" is required.');
+        'Malformed metadata, property "format" is required.',
+      );
     });
 
     it('requires only supports csv format', () => {
       const metadata = { source: 'source', header: 'header', format: 'json' };
       expect(OutputArtifactLoader.buildPagedTableConfig(metadata as any)).rejects.toThrowError(
-        'Unsupported table format: json');
+        'Unsupported table format: json',
+      );
     });
 
     it('returns a paged table config with basic metadata', async () => {
@@ -213,7 +234,8 @@ describe('OutputArtifactLoader', () => {
     it('requires "source" metadata field', () => {
       const metadata = { header: 'header', format: 'format' };
       expect(OutputArtifactLoader.buildTensorboardConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "source" is required.');
+        'Malformed metadata, property "source" is required.',
+      );
     });
 
     it('returns a tensorboard config with basic metadata', async () => {
@@ -229,7 +251,8 @@ describe('OutputArtifactLoader', () => {
     it('requires "source" metadata field', () => {
       const metadata = { header: 'header', format: 'format' };
       expect(OutputArtifactLoader.buildHtmlViewerConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "source" is required.');
+        'Malformed metadata, property "source" is required.',
+      );
     });
 
     it('returns an HTML viewer config with basic metadata', async () => {
@@ -248,7 +271,8 @@ describe('OutputArtifactLoader', () => {
     it('requires "source" metadata field', () => {
       const metadata = { header: 'header', format: 'format' };
       expect(OutputArtifactLoader.buildMarkdownViewerConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "source" is required.');
+        'Malformed metadata, property "source" is required.',
+      );
     });
 
     it('returns a markdown viewer config with basic metadata for inline markdown', async () => {
@@ -286,55 +310,60 @@ describe('OutputArtifactLoader', () => {
     it('requires "source" metadata field', () => {
       const metadata = { header: 'header', schema: 'schema' };
       expect(OutputArtifactLoader.buildRocCurveConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "source" is required.');
+        'Malformed metadata, property "source" is required.',
+      );
     });
 
     it('requires "schema" metadata field', () => {
       const metadata = { source: 'header' };
       expect(OutputArtifactLoader.buildRocCurveConfig(metadata as any)).rejects.toThrowError(
-        'Malformed metadata, property "schema" is required.');
+        'Malformed metadata, property "schema" is required.',
+      );
     });
 
     it('throws for a non-array schema', () => {
       const metadata = { source: 'gs://path', schema: { field1: 'string' } };
       expect(OutputArtifactLoader.buildRocCurveConfig(metadata as any)).rejects.toThrowError(
-        'Malformed schema, must be an array of {"name": string, "type": string}');
+        'Malformed schema, must be an array of {"name": string, "type": string}',
+      );
     });
 
     it('requires "fpr" field in the schema', () => {
       const metadata = { source: 'gs://path', schema: [{ name: 'field1', type: 'string' }] };
       expect(OutputArtifactLoader.buildRocCurveConfig(metadata as any)).rejects.toThrowError(
-        'Malformed schema, expected to find a column named "fpr"');
+        'Malformed schema, expected to find a column named "fpr"',
+      );
     });
 
     it('requires "tpr" field in the schema', () => {
       const metadata = { source: 'gs://path', schema: [{ name: 'fpr', type: 'string' }] };
       expect(OutputArtifactLoader.buildRocCurveConfig(metadata as any)).rejects.toThrowError(
-        'Malformed schema, expected to find a column named "tpr"');
+        'Malformed schema, expected to find a column named "tpr"',
+      );
     });
 
     it('requires "threshold" field in the schema', () => {
       const metadata = {
-        schema: [{
-          name: 'fpr',
-          type: 'string',
-        }, {
-          name: 'tpr',
-          type: 'string',
-        }],
+        schema: [
+          {
+            name: 'fpr',
+            type: 'string',
+          },
+          {
+            name: 'tpr',
+            type: 'string',
+          },
+        ],
         source: 'gs://path',
       };
       expect(OutputArtifactLoader.buildRocCurveConfig(metadata as any)).rejects.toThrowError(
-        'Malformed schema, expected to find a column named "threshold"');
+        'Malformed schema, expected to find a column named "threshold"',
+      );
     });
 
     it('returns an ROC viewer config with basic metadata', async () => {
       const metadata = {
-        schema: [
-          { name: 'fpr' },
-          { name: 'tpr' },
-          { name: 'threshold' }
-        ],
+        schema: [{ name: 'fpr' }, { name: 'tpr' }, { name: 'threshold' }],
         source: 'gs://path',
       };
       fileToRead = `
@@ -343,22 +372,14 @@ describe('OutputArtifactLoader', () => {
         6,7,8
       `;
       expect(await OutputArtifactLoader.buildRocCurveConfig(metadata as any)).toEqual({
-        data: [
-          { label: '2', x: 0, y: 1 },
-          { label: '5', x: 3, y: 4 },
-          { label: '8', x: 6, y: 7 },
-        ],
+        data: [{ label: '2', x: 0, y: 1 }, { label: '5', x: 3, y: 4 }, { label: '8', x: 6, y: 7 }],
         type: PlotType.ROC,
       } as ROCCurveConfig);
     });
 
     it('returns an ROC viewer config with fields out of order', async () => {
       const metadata = {
-        schema: [
-          { name: 'threshold' },
-          { name: 'tpr' },
-          { name: 'fpr' },
-        ],
+        schema: [{ name: 'threshold' }, { name: 'tpr' }, { name: 'fpr' }],
         source: 'gs://path',
       };
       fileToRead = `
@@ -367,22 +388,14 @@ describe('OutputArtifactLoader', () => {
         6,7,8
       `;
       expect(await OutputArtifactLoader.buildRocCurveConfig(metadata as any)).toEqual({
-        data: [
-          { label: '0', x: 2, y: 1 },
-          { label: '3', x: 5, y: 4 },
-          { label: '6', x: 8, y: 7 },
-        ],
+        data: [{ label: '0', x: 2, y: 1 }, { label: '3', x: 5, y: 4 }, { label: '6', x: 8, y: 7 }],
         type: PlotType.ROC,
       } as ROCCurveConfig);
     });
 
     it('returns an ROC viewer config with "thresholds" column instead of "threshold', async () => {
       const metadata = {
-        schema: [
-          { name: 'fpr' },
-          { name: 'tpr' },
-          { name: 'thresholds' }
-        ],
+        schema: [{ name: 'fpr' }, { name: 'tpr' }, { name: 'thresholds' }],
         source: 'gs://path',
       };
       fileToRead = `
@@ -391,14 +404,9 @@ describe('OutputArtifactLoader', () => {
         6,7,8
       `;
       expect(await OutputArtifactLoader.buildRocCurveConfig(metadata as any)).toEqual({
-        data: [
-          { label: '2', x: 0, y: 1 },
-          { label: '5', x: 3, y: 4 },
-          { label: '8', x: 6, y: 7 },
-        ],
+        data: [{ label: '2', x: 0, y: 1 }, { label: '5', x: 3, y: 4 }, { label: '8', x: 6, y: 7 }],
         type: PlotType.ROC,
       } as ROCCurveConfig);
     });
-
   });
 });
diff --git a/frontend/src/lib/OutputArtifactLoader.ts b/frontend/src/lib/OutputArtifactLoader.ts
index b45dcc153f1e..9f5ed333be11 100644
--- a/frontend/src/lib/OutputArtifactLoader.ts
+++ b/frontend/src/lib/OutputArtifactLoader.ts
@@ -31,7 +31,7 @@ export interface PlotMetadata {
   header?: string[];
   labels?: string[];
   predicted_col?: string;
-  schema?: Array<{ type: string, name: string }>;
+  schema?: Array<{ type: string; name: string }>;
   source: string;
   storage?: 'gcs' | 'inline';
   target_col?: string;
@@ -43,7 +43,6 @@ export interface OutputMetadata {
 }
 
 export class OutputArtifactLoader {
-
   public static async load(outputPath: StoragePath): Promise<ViewerConfig[]> {
     let plotMetadataList: PlotMetadata[] = [];
     try {
@@ -68,29 +67,31 @@ export class OutputArtifactLoader {
     const configs: Array<ViewerConfig | null> = await Promise.all(
       plotMetadataList.map(async metadata => {
         switch (metadata.type) {
-          case (PlotType.CONFUSION_MATRIX):
+          case PlotType.CONFUSION_MATRIX:
             return await this.buildConfusionMatrixConfig(metadata);
-          case (PlotType.MARKDOWN):
+          case PlotType.MARKDOWN:
             return await this.buildMarkdownViewerConfig(metadata);
-          case (PlotType.TABLE):
+          case PlotType.TABLE:
             return await this.buildPagedTableConfig(metadata);
-          case (PlotType.TENSORBOARD):
+          case PlotType.TENSORBOARD:
             return await this.buildTensorboardConfig(metadata);
-          case (PlotType.WEB_APP):
+          case PlotType.WEB_APP:
             return await this.buildHtmlViewerConfig(metadata);
-          case (PlotType.ROC):
+          case PlotType.ROC:
             return await this.buildRocCurveConfig(metadata);
           default:
             logger.error('Unknown plot type: ' + metadata.type);
             return null;
         }
-      })
+      }),
     );
 
     return configs.filter(c => !!c) as ViewerConfig[];
   }
 
-  public static async buildConfusionMatrixConfig(metadata: PlotMetadata): Promise<ConfusionMatrixConfig> {
+  public static async buildConfusionMatrixConfig(
+    metadata: PlotMetadata,
+  ): Promise<ConfusionMatrixConfig> {
     if (!metadata.source) {
       throw new Error('Malformed metadata, property "source" is required.');
     }
@@ -109,13 +110,14 @@ export class OutputArtifactLoader {
     const labels = metadata.labels;
     const labelIndex: { [label: string]: number } = {};
     let index = 0;
-    labels.forEach((l) => {
+    labels.forEach(l => {
       labelIndex[l] = index++;
     });
 
     if (labels.length ** 2 !== csvRows.length) {
       throw new Error(
-        `Data dimensions ${csvRows.length} do not match the number of labels passed ${labels.length}`);
+        `Data dimensions ${csvRows.length} do not match the number of labels passed ${labels.length}`,
+      );
     }
 
     const data = Array.from(Array(labels.length), () => new Array(labels.length));
@@ -125,7 +127,7 @@ export class OutputArtifactLoader {
       data[i][j] = Number.parseInt(count, 10);
     });
 
-    const columnNames = metadata.schema.map((r) => {
+    const columnNames = metadata.schema.map(r => {
       if (!r.name) {
         throw new Error('Each item in the "schema" array must contain a "name" field');
       }
@@ -170,7 +172,9 @@ export class OutputArtifactLoader {
     };
   }
 
-  public static async buildTensorboardConfig(metadata: PlotMetadata): Promise<TensorboardViewerConfig> {
+  public static async buildTensorboardConfig(
+    metadata: PlotMetadata,
+  ): Promise<TensorboardViewerConfig> {
     if (!metadata.source) {
       throw new Error('Malformed metadata, property "source" is required.');
     }
@@ -194,7 +198,9 @@ export class OutputArtifactLoader {
     };
   }
 
-  public static async buildMarkdownViewerConfig(metadata: PlotMetadata): Promise<MarkdownViewerConfig> {
+  public static async buildMarkdownViewerConfig(
+    metadata: PlotMetadata,
+  ): Promise<MarkdownViewerConfig> {
     if (!metadata.source) {
       throw new Error('Malformed metadata, property "source" is required.');
     }
diff --git a/frontend/src/lib/RunUtils.ts b/frontend/src/lib/RunUtils.ts
index eb696df83783..ae5a165ae037 100644
--- a/frontend/src/lib/RunUtils.ts
+++ b/frontend/src/lib/RunUtils.ts
@@ -15,7 +15,13 @@
  */
 
 import { ApiJob } from '../apis/job';
-import { ApiRun, ApiResourceType, ApiResourceReference, ApiRunDetail, ApiPipelineRuntime } from '../apis/run';
+import {
+  ApiRun,
+  ApiResourceType,
+  ApiResourceReference,
+  ApiRunDetail,
+  ApiPipelineRuntime,
+} from '../apis/run';
 import { orderBy } from 'lodash';
 import { ApiParameter } from 'src/apis/pipeline';
 import { Workflow } from 'third_party/argo-ui/argo_template';
@@ -70,17 +76,18 @@ function getFirstExperimentReference(run?: ApiRun | ApiJob): ApiResourceReferenc
 
 function getFirstExperimentReferenceId(run?: ApiRun | ApiJob): string | null {
   const reference = getFirstExperimentReference(run);
-  return reference && reference.key && reference.key.id || null;
+  return (reference && reference.key && reference.key.id) || null;
 }
 
 function getFirstExperimentReferenceName(run?: ApiRun | ApiJob): string | null {
   const reference = getFirstExperimentReference(run);
-  return reference && reference.name || null;
+  return (reference && reference.name) || null;
 }
 
 function getAllExperimentReferences(run?: ApiRun | ApiJob): ApiResourceReference[] {
-  return (run && run.resource_references || [])
-    .filter((ref) => ref.key && ref.key.type && ref.key.type === ApiResourceType.EXPERIMENT || false);
+  return ((run && run.resource_references) || []).filter(
+    ref => (ref.key && ref.key.type && ref.key.type === ApiResourceType.EXPERIMENT) || false,
+  );
 }
 
 /**
@@ -93,7 +100,7 @@ function runsToMetricMetadataMap(runs: ApiRun[]): Map<string, MetricMetadata> {
     if (!run || !run.metrics) {
       return metricMetadatas;
     }
-    run.metrics.forEach((metric) => {
+    run.metrics.forEach(metric => {
       if (!metric.name || metric.number_value === undefined || isNaN(metric.number_value)) {
         return;
       }
diff --git a/frontend/src/lib/StaticGraphParser.test.ts b/frontend/src/lib/StaticGraphParser.test.ts
index 6e868633c014..882c898e72a9 100644
--- a/frontend/src/lib/StaticGraphParser.test.ts
+++ b/frontend/src/lib/StaticGraphParser.test.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createGraph, _populateInfoFromTemplate, SelectedNodeInfo } from './StaticGraphParser';
+import { createGraph, SelectedNodeInfo, _populateInfoFromTemplate } from './StaticGraphParser';
 
 describe('StaticGraphParser', () => {
   function newWorkflow(): any {
@@ -55,9 +55,9 @@ describe('StaticGraphParser', () => {
                   dependencies: ['flip-task'],
                   name: 'condition-2-task',
                   template: 'condition-2',
-                  when: '{{inputs.parameters.flip-output}} == tails'
+                  when: '{{inputs.parameters.flip-output}} == tails',
                 },
-              ]
+              ],
             },
             name: 'pipeline-flip-coin',
           },
@@ -71,8 +71,8 @@ describe('StaticGraphParser', () => {
           { container: {}, name: 'heads' },
           // Container that is run if result is 'tails'
           { container: {}, name: 'tails' },
-        ]
-      }
+        ],
+      },
     };
   }
 
@@ -95,7 +95,7 @@ describe('StaticGraphParser', () => {
                   name: 'create-snapshot-task',
                   template: 'create-snapshot',
                 },
-              ]
+              ],
             },
             name: 'template-1',
           },
@@ -117,8 +117,8 @@ describe('StaticGraphParser', () => {
               manifest: 'apiVersion: snapshot.storage.k8s.io/v1alpha1\nkind: VolumeSnapshot',
             },
           },
-        ]
-      }
+        ],
+      },
     };
   }
 
@@ -132,6 +132,17 @@ describe('StaticGraphParser', () => {
       expect(g.node('/task-1').label).toEqual('container-1');
     });
 
+    it("uses task's annotation task_display_name as node label when present", () => {
+      const workflow = newWorkflow();
+      workflow.spec.templates[1].metadata = {
+        annotations: {
+          'pipelines.kubeflow.org/task_display_name': 'TaskDisplayName',
+        },
+      };
+      const g = createGraph(workflow);
+      expect(g.node('/task-1').label).toEqual('TaskDisplayName');
+    });
+
     it('adds an unconnected node for the onExit template, if onExit is specified', () => {
       const workflow = newWorkflow();
       workflow.spec.onExit = 'on-exit';
@@ -139,7 +150,7 @@ describe('StaticGraphParser', () => {
       const g = createGraph(workflow);
       expect(g.edgeCount()).toEqual(0);
       const expectedNodes = ['/task-1', 'on-exit'];
-      expectedNodes.forEach((nodeId) => expect(g.nodes()).toContain(nodeId));
+      expectedNodes.forEach(nodeId => expect(g.nodes()).toContain(nodeId));
       expect(g.nodeCount()).toEqual(expectedNodes.length);
       // Prefix 'onExit - ' is added to exit-handler nodes
       expect(g.node('on-exit').label).toEqual('onExit - ' + 'on-exit');
@@ -166,7 +177,7 @@ describe('StaticGraphParser', () => {
               tasks: [
                 { name: 'task-2-1', template: 'container-2-1' },
                 { name: 'task-2-2', template: 'dag-3' },
-              ]
+              ],
             },
             name: 'dag-2',
           },
@@ -189,11 +200,11 @@ describe('StaticGraphParser', () => {
         '/task-1-1/task-2-2',
         '/task-1-1/task-2-2/task-3-1',
       ];
-      expectedNodes.forEach((nodeId) => expect(g.nodes()).toContain(nodeId));
+      expectedNodes.forEach(nodeId => expect(g.nodes()).toContain(nodeId));
       expect(g.nodeCount()).toEqual(expectedNodes.length);
     });
 
-    it('uses task\'s template as node label', () => {
+    it("uses task's template as node label", () => {
       const g = createGraph(nestedWorkflow);
       expect(g.edgeCount()).toEqual(3);
       const expectedNodes = [
@@ -202,7 +213,9 @@ describe('StaticGraphParser', () => {
         { id: '/task-1-1/task-2-2', label: 'dag-3' },
         { id: '/task-1-1/task-2-2/task-3-1', label: 'container-3-1' },
       ];
-      expectedNodes.forEach((idAndLabel) => expect(g.node(idAndLabel.id).label).toEqual(idAndLabel.label));
+      expectedNodes.forEach(idAndLabel =>
+        expect(g.node(idAndLabel.id).label).toEqual(idAndLabel.label),
+      );
       expect(g.nodeCount()).toEqual(expectedNodes.length);
     });
 
@@ -215,14 +228,14 @@ describe('StaticGraphParser', () => {
         { v: '/condition-1-task', w: '/condition-1-task/heads-task' },
         { v: '/condition-2-task', w: '/condition-2-task/tails-task' },
       ];
-      expectedEdges.forEach((edge) => expect(g.edges()).toContainEqual(edge));
+      expectedEdges.forEach(edge => expect(g.edges()).toContainEqual(edge));
       expect(g.edgeCount()).toEqual(expectedEdges.length);
       expect(g.nodeCount()).toEqual(5);
     });
 
     it('finds conditionals and colors them', () => {
       const g = createGraph(newConditionalWorkflow());
-      g.nodes().forEach((nodeName) => {
+      g.nodes().forEach(nodeName => {
         const node = g.node(nodeName);
         if (nodeName === '/condition-1-task' || nodeName === '/condition-2-task') {
           expect(node.bgColor).toEqual('cornsilk');
@@ -234,7 +247,7 @@ describe('StaticGraphParser', () => {
 
     it('includes the conditional itself in the info of conditional nodes', () => {
       const g = createGraph(newConditionalWorkflow());
-      g.nodes().forEach((nodeName) => {
+      g.nodes().forEach(nodeName => {
         const node = g.node(nodeName);
         if (nodeName.startsWith('condition-1')) {
           expect(node.info.condition).toEqual('{{inputs.parameters.flip-output}} == heads');
@@ -244,14 +257,18 @@ describe('StaticGraphParser', () => {
       });
     });
 
-    it('includes the resource\'s action and manifest itself in the info of resource nodes', () => {
+    it("includes the resource's action and manifest itself in the info of resource nodes", () => {
       const g = createGraph(newResourceCreatingWorkflow());
-      g.nodes().forEach((nodeName) => {
+      g.nodes().forEach(nodeName => {
         const node = g.node(nodeName);
         if (nodeName.startsWith('create-pvc')) {
-          expect(node.info.resource).toEqual([['create', 'apiVersion: v1\nkind: PersistentVolumeClaim']]);
+          expect(node.info.resource).toEqual([
+            ['create', 'apiVersion: v1\nkind: PersistentVolumeClaim'],
+          ]);
         } else if (nodeName.startsWith('create-snapshot')) {
-          expect(node.info.resource).toEqual([['create', 'apiVersion: snapshot.storage.k8s.io\nkind: VolumeSnapshot']]);
+          expect(node.info.resource).toEqual([
+            ['create', 'apiVersion: snapshot.storage.k8s.io\nkind: VolumeSnapshot'],
+          ]);
         }
       });
     });
@@ -260,7 +277,7 @@ describe('StaticGraphParser', () => {
       const simpleWorkflow = {
         spec: {
           entrypoint: 'template-1',
-          templates: [ { container: {}, name: 'template-1', }, ],
+          templates: [{ container: {}, name: 'template-1' }],
         },
       } as any;
       const g = createGraph(simpleWorkflow);
@@ -324,13 +341,13 @@ describe('StaticGraphParser', () => {
       } as any;
       const g = createGraph(workflow);
       const expectedNodes = ['/start', '/start/recurse'];
-      expectedNodes.forEach((node) => expect(g.nodes()).toContain(node));
+      expectedNodes.forEach(node => expect(g.nodes()).toContain(node));
       expect(g.nodeCount()).toEqual(expectedNodes.length);
       const expectedEdges = [
         { v: '/start', w: '/start/recurse' },
         { v: '/start/recurse', w: '/start' },
       ];
-      expectedEdges.forEach((edge) => expect(g.edges()).toContainEqual(edge));
+      expectedEdges.forEach(edge => expect(g.edges()).toContainEqual(edge));
       expect(g.edgeCount()).toEqual(expectedEdges.length);
     });
 
@@ -354,20 +371,20 @@ describe('StaticGraphParser', () => {
             },
             {
               container: {},
-              name: 'exit'
+              name: 'exit',
             },
           ],
         },
       } as any;
       const g = createGraph(workflow);
       const expectedNodes = ['exit', '/start', '/start/recurse'];
-      expectedNodes.forEach((node) => expect(g.nodes()).toContain(node));
+      expectedNodes.forEach(node => expect(g.nodes()).toContain(node));
       expect(g.nodeCount()).toEqual(expectedNodes.length);
       const expectedEdges = [
         { v: '/start', w: '/start/recurse' },
         { v: '/start/recurse', w: '/start' },
       ];
-      expectedEdges.forEach((edge) => expect(g.edges()).toContainEqual(edge));
+      expectedEdges.forEach(edge => expect(g.edges()).toContainEqual(edge));
       expect(g.edgeCount()).toEqual(expectedEdges.length);
     });
 
@@ -381,26 +398,32 @@ describe('StaticGraphParser', () => {
               name: 'entrypoint-dag',
             },
             {
-              dag: { tasks: [
-                { name: 'recurse-1', template: 'recurse-1' },
-                { name: 'leaf-1', template: 'leaf-1' },
-              ] },
+              dag: {
+                tasks: [
+                  { name: 'recurse-1', template: 'recurse-1' },
+                  { name: 'leaf-1', template: 'leaf-1' },
+                ],
+              },
               name: 'start',
             },
             {
-              dag: { tasks: [
-                { name: 'start', template: 'start' },
-                { name: 'recurse-2', template: 'recurse-2' },
-                { name: 'leaf-2', template: 'leaf-2' },
-              ] },
+              dag: {
+                tasks: [
+                  { name: 'start', template: 'start' },
+                  { name: 'recurse-2', template: 'recurse-2' },
+                  { name: 'leaf-2', template: 'leaf-2' },
+                ],
+              },
               name: 'recurse-1',
             },
             {
-              dag: { tasks: [
-                { name: 'start', template: 'start' },
-                { name: 'leaf-3', template: 'leaf-3' },
-                { name: 'leaf-4', template: 'leaf-4' },
-              ] },
+              dag: {
+                tasks: [
+                  { name: 'start', template: 'start' },
+                  { name: 'leaf-3', template: 'leaf-3' },
+                  { name: 'leaf-4', template: 'leaf-4' },
+                ],
+              },
               name: 'recurse-2',
             },
             { container: {}, name: 'leaf-1' },
@@ -420,7 +443,7 @@ describe('StaticGraphParser', () => {
         '/start/recurse-1/recurse-2/leaf-3',
         '/start/recurse-1/recurse-2/leaf-4',
       ];
-      expectedNodes.forEach((node) => expect(g.nodes()).toContain(node));
+      expectedNodes.forEach(node => expect(g.nodes()).toContain(node));
       expect(g.nodeCount()).toEqual(expectedNodes.length);
       const expectedEdges = [
         { v: '/start', w: '/start/recurse-1' },
@@ -432,7 +455,7 @@ describe('StaticGraphParser', () => {
         { v: '/start/recurse-1/recurse-2', w: '/start/recurse-1/recurse-2/leaf-3' },
         { v: '/start/recurse-1/recurse-2', w: '/start/recurse-1/recurse-2/leaf-4' },
       ];
-      expectedEdges.forEach((edge) => expect(g.edges()).toContainEqual(edge));
+      expectedEdges.forEach(edge => expect(g.edges()).toContainEqual(edge));
       expect(g.edgeCount()).toEqual(expectedEdges.length);
     });
   });
@@ -446,7 +469,9 @@ describe('StaticGraphParser', () => {
 
     it('returns default SelectedNodeInfo if template has no container', () => {
       const defaultSelectedNodeInfo = new SelectedNodeInfo();
-      const nodeInfo = _populateInfoFromTemplate(defaultSelectedNodeInfo, { name: 'template' } as any);
+      const nodeInfo = _populateInfoFromTemplate(defaultSelectedNodeInfo, {
+        name: 'template',
+      } as any);
       expect(nodeInfo).toEqual(defaultSelectedNodeInfo);
     });
 
@@ -469,7 +494,6 @@ describe('StaticGraphParser', () => {
       expect(nodeInfo.volumeMounts).toEqual([]);
     });
 
-
     it('returns nodeInfo containing container args', () => {
       const template = {
         container: {
@@ -499,7 +523,7 @@ describe('StaticGraphParser', () => {
     it('returns nodeInfo containing container image', () => {
       const template = {
         container: {
-          image: 'some-image'
+          image: 'some-image',
         },
         dag: [],
         name: 'template-1',
@@ -512,7 +536,7 @@ describe('StaticGraphParser', () => {
     it('returns nodeInfo containing container volumeMounts', () => {
       const template = {
         container: {
-          volumeMounts: [{'mountPath': '/some/path', 'name': 'some-vol'}]
+          volumeMounts: [{ mountPath: '/some/path', name: 'some-vol' }],
         },
         dag: [],
         name: 'template-1',
@@ -542,7 +566,7 @@ describe('StaticGraphParser', () => {
         name: 'template-1',
         resource: {
           action: 'create',
-          manifest: 'manifest'
+          manifest: 'manifest',
         },
       } as any;
       const nodeInfo = _populateInfoFromTemplate(new SelectedNodeInfo(), template);
@@ -569,7 +593,7 @@ describe('StaticGraphParser', () => {
         container: {},
         dag: [],
         inputs: {
-          parameters: [{ name: 'param1', value: 'val1' }, { name: 'param2', value: 'val2' }]
+          parameters: [{ name: 'param1', value: 'val1' }, { name: 'param2', value: 'val2' }],
         },
         name: 'template-1',
       } as any;
@@ -583,7 +607,7 @@ describe('StaticGraphParser', () => {
         container: {},
         dag: [],
         inputs: {
-          parameters: [{ name: 'param1' }, { name: 'param2' }]
+          parameters: [{ name: 'param1' }, { name: 'param2' }],
         },
         name: 'template-1',
       } as any;
@@ -622,10 +646,7 @@ describe('StaticGraphParser', () => {
         container: {},
         name: 'template-1',
         outputs: {
-          parameters: [
-            { name: 'param1' },
-            { name: 'param2' },
-          ],
+          parameters: [{ name: 'param1' }, { name: 'param2' }],
         },
       } as any;
       const nodeInfo = _populateInfoFromTemplate(new SelectedNodeInfo(), template);
@@ -651,7 +672,7 @@ describe('StaticGraphParser', () => {
       const template = {
         dag: [],
         inputs: {
-          parameters: [{ name: 'param1', value: 'val1' }, { name: 'param2', value: 'val2' }]
+          parameters: [{ name: 'param1', value: 'val1' }, { name: 'param2', value: 'val2' }],
         },
         name: 'template-1',
         resource: {},
@@ -665,7 +686,7 @@ describe('StaticGraphParser', () => {
       const template = {
         dag: [],
         inputs: {
-          parameters: [{ name: 'param1' }, { name: 'param2' }]
+          parameters: [{ name: 'param1' }, { name: 'param2' }],
         },
         name: 'template-1',
         resource: {},
@@ -704,10 +725,7 @@ describe('StaticGraphParser', () => {
       const template = {
         name: 'template-1',
         outputs: {
-          parameters: [
-            { name: 'param1' },
-            { name: 'param2' },
-          ],
+          parameters: [{ name: 'param1' }, { name: 'param2' }],
         },
         resource: {},
       } as any;
@@ -715,7 +733,5 @@ describe('StaticGraphParser', () => {
       expect(nodeInfo.nodeType).toEqual('resource');
       expect(nodeInfo.outputs).toEqual([['param1', ''], ['param2', '']]);
     });
-
   });
 });
-
diff --git a/frontend/src/lib/StaticGraphParser.ts b/frontend/src/lib/StaticGraphParser.ts
index 3330f15c20f1..a2f2dbd78700 100644
--- a/frontend/src/lib/StaticGraphParser.ts
+++ b/frontend/src/lib/StaticGraphParser.ts
@@ -15,23 +15,28 @@
  */
 
 import * as dagre from 'dagre';
-import { Constants } from './Constants';
-import { Workflow, Template } from '../../third_party/argo-ui/argo_template';
+import { Template, Workflow } from '../../third_party/argo-ui/argo_template';
 import { color } from '../Css';
+import { Constants } from './Constants';
 import { logger } from './Utils';
 
 export type nodeType = 'container' | 'resource' | 'dag' | 'unknown';
 
+export interface KeyValue<T> extends Array<any> {
+  0?: string;
+  1?: T;
+}
+
 export class SelectedNodeInfo {
   public args: string[];
   public command: string[];
   public condition: string;
   public image: string;
-  public inputs: string[][];
+  public inputs: Array<KeyValue<string>>;
   public nodeType: nodeType;
-  public outputs: string[][];
-  public volumeMounts: string[][];
-  public resource: string[][];
+  public outputs: Array<KeyValue<string>>;
+  public volumeMounts: Array<KeyValue<string>>;
+  public resource: Array<KeyValue<string>>;
 
   constructor() {
     this.args = [];
@@ -46,29 +51,31 @@ export class SelectedNodeInfo {
   }
 }
 
-export function _populateInfoFromTemplate(info: SelectedNodeInfo, template?: Template): SelectedNodeInfo {
+export function _populateInfoFromTemplate(
+  info: SelectedNodeInfo,
+  template?: Template,
+): SelectedNodeInfo {
   if (!template || (!template.container && !template.resource)) {
     return info;
   }
 
   if (template.container) {
     info.nodeType = 'container';
-    info.args = template.container.args || [],
-    info.command = template.container.command || [],
-    info.image = template.container.image || '';
+    (info.args = template.container.args || []),
+      (info.command = template.container.command || []),
+      (info.image = template.container.image || '');
     info.volumeMounts = (template.container.volumeMounts || []).map(v => [v.mountPath, v.name]);
   } else {
     info.nodeType = 'resource';
     if (template.resource && template.resource.action && template.resource.manifest) {
       info.resource = [[template.resource.action, template.resource.manifest]];
     } else {
-    info.resource = [[]];
+      info.resource = [[]];
     }
   }
 
   if (template.inputs) {
-    info.inputs =
-      (template.inputs.parameters || []).map(p => [p.name, p.value || '']);
+    info.inputs = (template.inputs.parameters || []).map(p => [p.name, p.value || '']);
   }
   if (template.outputs) {
     info.outputs = (template.outputs.parameters || []).map(p => {
@@ -76,7 +83,12 @@ export function _populateInfoFromTemplate(info: SelectedNodeInfo, template?: Tem
       if (p.value) {
         value = p.value;
       } else if (p.valueFrom) {
-        value = p.valueFrom.jqFilter || p.valueFrom.jsonPath || p.valueFrom.parameter || p.valueFrom.path || '';
+        value =
+          p.valueFrom.jqFilter ||
+          p.valueFrom.jsonPath ||
+          p.valueFrom.parameter ||
+          p.valueFrom.path ||
+          '';
       }
       return [p.name, value];
     });
@@ -103,10 +115,10 @@ export function _populateInfoFromTemplate(info: SelectedNodeInfo, template?: Tem
 function buildDag(
   graph: dagre.graphlib.Graph,
   rootTemplateId: string,
-  templates: Map<string, { nodeType: nodeType, template: Template }>,
+  templates: Map<string, { nodeType: nodeType; template: Template }>,
   alreadyVisited: Map<string, string>,
-  parentFullPath: string): void {
-
+  parentFullPath: string,
+): void {
   const root = templates.get(rootTemplateId);
 
   if (root && root.nodeType === 'dag') {
@@ -114,8 +126,7 @@ function buildDag(
     alreadyVisited.set(rootTemplateId, parentFullPath || '/' + rootTemplateId);
     const template = root.template;
 
-    (template.dag.tasks || []).forEach((task) => {
-
+    (template.dag.tasks || []).forEach(task => {
       const nodeId = parentFullPath + '/' + task.name;
 
       // If the user specifies an exit handler, then the compiler will wrap the entire Pipeline
@@ -161,13 +172,23 @@ function buildDag(
       // DAG, in which case we recurse, or a container/resource which can be thought of as a
       // leaf node
       const child = templates.get(task.template);
+      let nodeLabel = task.template;
       if (child) {
         if (child.nodeType === 'dag') {
           buildDag(graph, task.template, templates, alreadyVisited, nodeId);
         } else if (child.nodeType === 'container' || child.nodeType === 'resource') {
+          const metadata = child.template.metadata;
+          if (metadata && metadata.annotations) {
+            const displayName = metadata.annotations['pipelines.kubeflow.org/task_display_name'];
+            if (displayName) {
+              nodeLabel = displayName;
+            }
+          }
           _populateInfoFromTemplate(info, child.template);
         } else {
-          throw new Error(`Unknown nodetype: ${child.nodeType} on workflow template: ${child.template}`);
+          throw new Error(
+            `Unknown nodetype: ${child.nodeType} on workflow template: ${child.template}`,
+          );
         }
       }
 
@@ -175,7 +196,7 @@ function buildDag(
         bgColor: task.when ? 'cornsilk' : undefined,
         height: Constants.NODE_HEIGHT,
         info,
-        label: task.template,
+        label: nodeLabel,
         width: Constants.NODE_WIDTH,
       });
 
@@ -184,7 +205,7 @@ function buildDag(
       // TODO: The addition of the parent prefix to the dependency here is only valid if nodes only
       // ever directly depend on their siblings. This is true now but may change in the future, and
       // this will need to be updated.
-      (task.dependencies || []).forEach((dep) => graph.setEdge(parentFullPath + '/' + dep, nodeId));
+      (task.dependencies || []).forEach(dep => graph.setEdge(parentFullPath + '/' + dep, nodeId));
     });
   }
 }
@@ -200,7 +221,7 @@ export function createGraph(workflow: Workflow): dagre.graphlib.Graph {
 
   const workflowTemplates = workflow.spec.templates;
 
-  const templates = new Map<string, { nodeType: nodeType, template: Template }>();
+  const templates = new Map<string, { nodeType: nodeType; template: Template }>();
 
   // Iterate through the workflow's templates to construct a map which will be used to traverse and
   // construct the graph
@@ -235,7 +256,7 @@ export function createGraph(workflow: Workflow): dagre.graphlib.Graph {
   // It is, however, possible for users to upload manually constructed Pipelines, and extremely
   // simple ones may have no steps or DAGs, just an entry point container.
   if (graph.nodeCount() === 0) {
-    const entryPointTemplate = workflowTemplates.find((t) => t.name === workflow.spec.entrypoint);
+    const entryPointTemplate = workflowTemplates.find(t => t.name === workflow.spec.entrypoint);
     if (entryPointTemplate) {
       graph.setNode(entryPointTemplate.name, {
         height: Constants.NODE_HEIGHT,
diff --git a/frontend/src/lib/StatusUtils.test.tsx b/frontend/src/lib/StatusUtils.test.tsx
index 2d28136404fa..59820f135002 100644
--- a/frontend/src/lib/StatusUtils.test.tsx
+++ b/frontend/src/lib/StatusUtils.test.tsx
@@ -14,28 +14,41 @@
  * limitations under the License.
  */
 
-import { NodePhase, hasFinished, statusBgColors, statusToBgColor, checkIfTerminated } from './StatusUtils';
+import {
+  NodePhase,
+  hasFinished,
+  statusBgColors,
+  statusToBgColor,
+  checkIfTerminated,
+} from './StatusUtils';
 
 describe('StatusUtils', () => {
-
   describe('hasFinished', () => {
-    [NodePhase.ERROR, NodePhase.FAILED, NodePhase.SUCCEEDED, NodePhase.SKIPPED, NodePhase.TERMINATED].forEach(status => {
+    [
+      NodePhase.ERROR,
+      NodePhase.FAILED,
+      NodePhase.SUCCEEDED,
+      NodePhase.SKIPPED,
+      NodePhase.TERMINATED,
+    ].forEach(status => {
       it(`returns \'true\' if status is: ${status}`, () => {
         expect(hasFinished(status)).toBe(true);
       });
     });
 
-    [NodePhase.PENDING, NodePhase.RUNNING, NodePhase.UNKNOWN, NodePhase.TERMINATING].forEach(status => {
-      it(`returns \'false\' if status is: ${status}`, () => {
-        expect(hasFinished(status)).toBe(false);
-      });
-    });
+    [NodePhase.PENDING, NodePhase.RUNNING, NodePhase.UNKNOWN, NodePhase.TERMINATING].forEach(
+      status => {
+        it(`returns \'false\' if status is: ${status}`, () => {
+          expect(hasFinished(status)).toBe(false);
+        });
+      },
+    );
 
-    it('returns \'false\' if status is undefined', () => {
+    it("returns 'false' if status is undefined", () => {
       expect(hasFinished(undefined)).toBe(false);
     });
 
-    it('returns \'false\' if status is invalid', () => {
+    it("returns 'false' if status is invalid", () => {
       expect(hasFinished('bad phase' as any)).toBe(false);
     });
   });
@@ -47,19 +60,19 @@ describe('StatusUtils', () => {
       expect(consoleSpy).toHaveBeenLastCalledWith('Unknown node phase:', 'bad phase');
     });
 
-    it('handles an \'Unknown\' phase', () => {
+    it("handles an 'Unknown' phase", () => {
       const consoleSpy = jest.spyOn(console, 'log').mockImplementationOnce(() => null);
       expect(statusToBgColor(NodePhase.UNKNOWN)).toEqual(statusBgColors.notStarted);
       expect(consoleSpy).toHaveBeenLastCalledWith('Unknown node phase:', 'Unknown');
     });
 
-    it('returns color \'not started\' if status is undefined', () => {
+    it("returns color 'not started' if status is undefined", () => {
       const consoleSpy = jest.spyOn(console, 'log').mockImplementationOnce(() => null);
       expect(statusToBgColor(undefined)).toEqual(statusBgColors.notStarted);
       expect(consoleSpy).toHaveBeenLastCalledWith('Unknown node phase:', undefined);
     });
 
-    it('returns color \'not started\' if status is \'Pending\'', () => {
+    it("returns color 'not started' if status is 'Pending'", () => {
       expect(statusToBgColor(NodePhase.PENDING)).toEqual(statusBgColors.notStarted);
     });
 
@@ -81,13 +94,13 @@ describe('StatusUtils', () => {
       });
     });
 
-    it('returns color \'succeeded\' if status is \'Succeeded\'', () => {
+    it("returns color 'succeeded' if status is 'Succeeded'", () => {
       expect(statusToBgColor(NodePhase.SUCCEEDED)).toEqual(statusBgColors.succeeded);
     });
   });
 
   describe('checkIfTerminated', () => {
-    it('returns status \'terminated\' if status is \'failed\' and error message is \'terminated\'', () => {
+    it("returns status 'terminated' if status is 'failed' and error message is 'terminated'", () => {
       expect(checkIfTerminated(NodePhase.FAILED, 'terminated')).toEqual(NodePhase.TERMINATED);
     });
 
@@ -98,22 +111,22 @@ describe('StatusUtils', () => {
       NodePhase.PENDING,
       NodePhase.RUNNING,
       NodePhase.TERMINATING,
-      NodePhase.UNKNOWN
+      NodePhase.UNKNOWN,
     ].forEach(status => {
       it(`returns the original status, even if message is 'terminated', if status is: ${status}`, () => {
         expect(checkIfTerminated(status, 'terminated')).toEqual(status);
       });
     });
 
-    it('returns \'failed\' if status is \'failed\' and no error message is provided', () => {
+    it("returns 'failed' if status is 'failed' and no error message is provided", () => {
       expect(checkIfTerminated(NodePhase.FAILED)).toEqual(NodePhase.FAILED);
     });
 
-    it('returns \'failed\' if status is \'failed\' and empty error message is provided', () => {
+    it("returns 'failed' if status is 'failed' and empty error message is provided", () => {
       expect(checkIfTerminated(NodePhase.FAILED, '')).toEqual(NodePhase.FAILED);
     });
 
-    it('returns \'failed\' if status is \'failed\' and arbitrary error message is provided', () => {
+    it("returns 'failed' if status is 'failed' and arbitrary error message is provided", () => {
       expect(checkIfTerminated(NodePhase.FAILED, 'some random error')).toEqual(NodePhase.FAILED);
     });
   });
diff --git a/frontend/src/lib/StatusUtils.ts b/frontend/src/lib/StatusUtils.ts
index 5738c099efde..35677d2b86cf 100644
--- a/frontend/src/lib/StatusUtils.ts
+++ b/frontend/src/lib/StatusUtils.ts
@@ -59,23 +59,23 @@ export function statusToBgColor(status?: NodePhase, nodeMessage?: string): strin
   status = checkIfTerminated(status, nodeMessage);
   switch (status) {
     case NodePhase.ERROR:
-      // fall through
+    // fall through
     case NodePhase.FAILED:
       return statusBgColors.error;
     case NodePhase.PENDING:
       return statusBgColors.notStarted;
     case NodePhase.TERMINATING:
-      // fall through
+    // fall through
     case NodePhase.RUNNING:
       return statusBgColors.running;
     case NodePhase.SUCCEEDED:
       return statusBgColors.succeeded;
     case NodePhase.SKIPPED:
-      // fall through
+    // fall through
     case NodePhase.TERMINATED:
       return statusBgColors.terminatedOrSkipped;
     case NodePhase.UNKNOWN:
-      // fall through
+    // fall through
     default:
       logger.verbose('Unknown node phase:', status);
       return statusBgColors.notStarted;
@@ -90,4 +90,3 @@ export function checkIfTerminated(status?: NodePhase, nodeMessage?: string): Nod
   }
   return status;
 }
-
diff --git a/frontend/src/lib/TriggerUtils.test.ts b/frontend/src/lib/TriggerUtils.test.ts
index 770d4b98f39b..af6a7efd0dbd 100644
--- a/frontend/src/lib/TriggerUtils.test.ts
+++ b/frontend/src/lib/TriggerUtils.test.ts
@@ -22,7 +22,7 @@ import {
   buildTrigger,
   TriggerType,
   dateToPickerFormat,
-  triggerDisplayString
+  triggerDisplayString,
 } from './TriggerUtils';
 import { ApiTrigger } from '../apis/job';
 
@@ -106,36 +106,41 @@ describe('TriggerUtils', () => {
     });
 
     function setToSelectedDays(selected: Set<number>): boolean[] {
-      return new Array(7).fill(false).map((_, i) => selected.has(i) ? true : false);
+      return new Array(7).fill(false).map((_, i) => (selected.has(i) ? true : false));
     }
 
     it('adds no days when building weekly cron with no selected days, no star date', () => {
-      expect(buildCron(
-        undefined, PeriodicInterval.WEEK, setToSelectedDays(new Set()))).toBe('0 0 0 ? *');
+      expect(buildCron(undefined, PeriodicInterval.WEEK, setToSelectedDays(new Set()))).toBe(
+        '0 0 0 ? *',
+      );
     });
 
     it('adds all days when building weekly cron, all days selected, no star date', () => {
-      expect(buildCron(
-        undefined, PeriodicInterval.WEEK,
-        setToSelectedDays(new Set([0, 1, 2, 3, 4, 5, 6])))).toBe('0 0 0 ? * *');
+      expect(
+        buildCron(
+          undefined,
+          PeriodicInterval.WEEK,
+          setToSelectedDays(new Set([0, 1, 2, 3, 4, 5, 6])),
+        ),
+      ).toBe('0 0 0 ? * *');
     });
 
     it('adds selected days when building weekly cron, some days selected, no start date', () => {
-      expect(buildCron(
-        undefined, PeriodicInterval.WEEK,
-        setToSelectedDays(new Set([0, 3, 4, 5])))).toBe('0 0 0 ? * 0,3,4,5');
+      expect(
+        buildCron(undefined, PeriodicInterval.WEEK, setToSelectedDays(new Set([0, 3, 4, 5]))),
+      ).toBe('0 0 0 ? * 0,3,4,5');
     });
 
     it('adds selected days when building weekly cron, some days selected, no start date', () => {
-      expect(buildCron(
-        undefined, PeriodicInterval.WEEK,
-        setToSelectedDays(new Set([0, 1])))).toBe('0 0 0 ? * 0,1');
+      expect(buildCron(undefined, PeriodicInterval.WEEK, setToSelectedDays(new Set([0, 1])))).toBe(
+        '0 0 0 ? * 0,1',
+      );
     });
 
     it('adds selected days when building weekly cron, some days selected, with start date', () => {
-      expect(buildCron(
-        date, PeriodicInterval.WEEK,
-        setToSelectedDays(new Set([0, 1])))).toBe('0 53 8 ? * 0,1');
+      expect(buildCron(date, PeriodicInterval.WEEK, setToSelectedDays(new Set([0, 1])))).toBe(
+        '0 53 8 ? * 0,1',
+      );
     });
 
     it('throws on bad interval category value', () => {
@@ -161,54 +166,72 @@ describe('TriggerUtils', () => {
 
   describe('buildTrigger', () => {
     it('returns a cron trigger object if type is so set', () => {
-      expect(buildTrigger(
-        PeriodicInterval.DAY, 1, undefined, undefined, TriggerType.CRON, 'some cron')).toEqual({
-          cron_schedule: { cron: 'some cron' },
-        });
+      expect(
+        buildTrigger(PeriodicInterval.DAY, 1, undefined, undefined, TriggerType.CRON, 'some cron'),
+      ).toEqual({
+        cron_schedule: { cron: 'some cron' },
+      });
     });
 
     it('returns an interval trigger object if type is so set', () => {
-      expect(buildTrigger(
-        PeriodicInterval.MINUTE, 1, undefined, undefined, TriggerType.INTERVALED, '')).toEqual({
-          periodic_schedule: { interval_second: '60' },
-        });
+      expect(
+        buildTrigger(PeriodicInterval.MINUTE, 1, undefined, undefined, TriggerType.INTERVALED, ''),
+      ).toEqual({
+        periodic_schedule: { interval_second: '60' },
+      });
     });
 
     it('returns an interval trigger object if type is so set, and a cron string is passed', () => {
-      expect(buildTrigger(
-        PeriodicInterval.MINUTE, 1, undefined, undefined, TriggerType.INTERVALED, 'some cron')).toEqual({
-          periodic_schedule: { interval_second: '60' },
-        });
+      expect(
+        buildTrigger(
+          PeriodicInterval.MINUTE,
+          1,
+          undefined,
+          undefined,
+          TriggerType.INTERVALED,
+          'some cron',
+        ),
+      ).toEqual({
+        periodic_schedule: { interval_second: '60' },
+      });
     });
 
     const startDate = new Date(2018, 8, 13, 17, 33);
     const endDate = new Date(2018, 8, 17, 17, 33);
     it('adds start date/time to returned cron trigger', () => {
-      expect(buildTrigger(
-        PeriodicInterval.MINUTE, 1, startDate, endDate, TriggerType.CRON, 'some cron')).toEqual({
-          cron_schedule: {
-            cron: 'some cron',
-            end_time: endDate,
-            start_time: startDate,
-          },
-        });
+      expect(
+        buildTrigger(PeriodicInterval.MINUTE, 1, startDate, endDate, TriggerType.CRON, 'some cron'),
+      ).toEqual({
+        cron_schedule: {
+          cron: 'some cron',
+          end_time: endDate,
+          start_time: startDate,
+        },
+      });
     });
 
     it('adds start date/time to returned interval trigger', () => {
-      expect(buildTrigger(
-        PeriodicInterval.MINUTE, 1, startDate, endDate, TriggerType.INTERVALED, '')).toEqual({
-          periodic_schedule: {
-            end_time: endDate,
-            interval_second: '60',
-            start_time: startDate,
-          },
-        });
+      expect(
+        buildTrigger(PeriodicInterval.MINUTE, 1, startDate, endDate, TriggerType.INTERVALED, ''),
+      ).toEqual({
+        periodic_schedule: {
+          end_time: endDate,
+          interval_second: '60',
+          start_time: startDate,
+        },
+      });
     });
 
     it('throws if passed an unrecognized trigger type', () => {
       expect(() =>
         buildTrigger(
-          PeriodicInterval.DAY, 1, undefined, undefined, 'not a trigger type' as any, '')
+          PeriodicInterval.DAY,
+          1,
+          undefined,
+          undefined,
+          'not a trigger type' as any,
+          '',
+        ),
       ).toThrowError('Invalid TriggerType: ' + 'not a trigger type');
     });
   });
@@ -275,7 +298,9 @@ describe('TriggerUtils', () => {
     });
 
     it('uses minutes for less than an hour', () => {
-      const trigger: ApiTrigger = { periodic_schedule: { interval_second: (60 * 60 - 1).toString() } };
+      const trigger: ApiTrigger = {
+        periodic_schedule: { interval_second: (60 * 60 - 1).toString() },
+      };
       expect(triggerDisplayString(trigger)).toBe('Every 59 minutes, and 59 seconds');
     });
 
@@ -285,37 +310,51 @@ describe('TriggerUtils', () => {
     });
 
     it('uses hours for less than a day', () => {
-      const trigger: ApiTrigger = { periodic_schedule: { interval_second: (60 * 60 + 1).toString() } };
+      const trigger: ApiTrigger = {
+        periodic_schedule: { interval_second: (60 * 60 + 1).toString() },
+      };
       expect(triggerDisplayString(trigger)).toBe('Every 1 hours, and 1 seconds');
     });
 
     it('uses hours for less than a day', () => {
-      const trigger: ApiTrigger = { periodic_schedule: { interval_second: (2 * 60 * 60 + 63).toString() } };
+      const trigger: ApiTrigger = {
+        periodic_schedule: { interval_second: (2 * 60 * 60 + 63).toString() },
+      };
       expect(triggerDisplayString(trigger)).toBe('Every 2 hours, 1 minutes, and 3 seconds');
     });
 
     it('uses days for less than a week', () => {
-      const trigger: ApiTrigger = { periodic_schedule: { interval_second: (24 * 60 * 60).toString() } };
+      const trigger: ApiTrigger = {
+        periodic_schedule: { interval_second: (24 * 60 * 60).toString() },
+      };
       expect(triggerDisplayString(trigger)).toBe('Every 1 days');
     });
 
     it('uses days for less than a week', () => {
-      const trigger: ApiTrigger = { periodic_schedule: { interval_second: (24 * 60 * 60 + 1).toString() } };
+      const trigger: ApiTrigger = {
+        periodic_schedule: { interval_second: (24 * 60 * 60 + 1).toString() },
+      };
       expect(triggerDisplayString(trigger)).toBe('Every 1 days, and 1 seconds');
     });
 
     it('uses weeks for less than a month', () => {
-      const trigger: ApiTrigger = { periodic_schedule: { interval_second: (7 * 24 * 60 * 60).toString() } };
+      const trigger: ApiTrigger = {
+        periodic_schedule: { interval_second: (7 * 24 * 60 * 60).toString() },
+      };
       expect(triggerDisplayString(trigger)).toBe('Every 1 weeks');
     });
 
     it('uses weeks for less than a month', () => {
-      const trigger: ApiTrigger = { periodic_schedule: { interval_second: (8 * 24 * 60 * 60 + 63).toString() } };
+      const trigger: ApiTrigger = {
+        periodic_schedule: { interval_second: (8 * 24 * 60 * 60 + 63).toString() },
+      };
       expect(triggerDisplayString(trigger)).toBe('Every 1 weeks, 1 days, 1 minutes, and 3 seconds');
     });
 
     it('uses months for anything large', () => {
-      const trigger: ApiTrigger = { periodic_schedule: { interval_second: (80 * 24 * 60 * 60).toString() } };
+      const trigger: ApiTrigger = {
+        periodic_schedule: { interval_second: (80 * 24 * 60 * 60).toString() },
+      };
       expect(triggerDisplayString(trigger)).toBe('Every 2 months, 2 weeks, and 3 days');
     });
   });
diff --git a/frontend/src/lib/TriggerUtils.ts b/frontend/src/lib/TriggerUtils.ts
index 39bb62e93b22..3168cab71fdd 100644
--- a/frontend/src/lib/TriggerUtils.ts
+++ b/frontend/src/lib/TriggerUtils.ts
@@ -30,8 +30,8 @@ export enum PeriodicInterval {
 }
 
 export const triggers = new Map<TriggerType, { displayName: string }>([
-  [TriggerType.INTERVALED, { displayName: 'Periodic', }],
-  [TriggerType.CRON, { displayName: 'Cron', }],
+  [TriggerType.INTERVALED, { displayName: 'Periodic' }],
+  [TriggerType.CRON, { displayName: 'Cron' }],
 ]);
 
 export function getPeriodInSeconds(interval: PeriodicInterval, count: number): number {
@@ -58,8 +58,11 @@ export function getPeriodInSeconds(interval: PeriodicInterval, count: number): n
   return intervalSeconds * count;
 }
 
-export function buildCron(startDateTime: Date | undefined, intervalCategory: PeriodicInterval,
-  selectedDays: boolean[]): string {
+export function buildCron(
+  startDateTime: Date | undefined,
+  intervalCategory: PeriodicInterval,
+  selectedDays: boolean[],
+): string {
   const isAllDaysChecked = selectedDays.every(d => !!d);
   let targetDayOfMonth = '0';
   let targetHours = '0';
@@ -95,12 +98,14 @@ export function buildCron(startDateTime: Date | undefined, intervalCategory: Per
         dayOfWeek = '*';
       } else {
         // Convert weekdays to array of indices of active days and join them.
-        dayOfWeek = selectedDays.reduce(
-          (result: number[], day, i) => {
-            if (day) { result.push(i); }
+        dayOfWeek = selectedDays
+          .reduce((result: number[], day, i) => {
+            if (day) {
+              result.push(i);
+            }
             return result;
-          },
-          []).join(',');
+          }, [])
+          .join(',');
       }
       break;
     case PeriodicInterval.MONTH:
@@ -115,12 +120,16 @@ export function buildCron(startDateTime: Date | undefined, intervalCategory: Per
   return [second, minute, hour, dayOfMonth, month, dayOfWeek].join(' ').trim();
 }
 
-export function pickersToDate(hasDate: boolean, dateStr: string, timeStr: string): Date | undefined {
+export function pickersToDate(
+  hasDate: boolean,
+  dateStr: string,
+  timeStr: string,
+): Date | undefined {
   if (hasDate && dateStr && timeStr) {
     const [year, month, date] = dateStr.split('-');
     const [hour, minute] = timeStr.split(':');
 
-    const d = new Date(+year, (+month - 1), +date, +hour, +minute);
+    const d = new Date(+year, +month - 1, +date, +hour, +minute);
     if (isNaN(d as any)) {
       throw new Error('Invalid picker format');
     }
@@ -130,8 +139,14 @@ export function pickersToDate(hasDate: boolean, dateStr: string, timeStr: string
   }
 }
 
-export function buildTrigger(intervalCategory: PeriodicInterval, intervalValue: number,
-  startDateTime: Date | undefined, endDateTime: Date | undefined, type: TriggerType, cron: string): ApiTrigger {
+export function buildTrigger(
+  intervalCategory: PeriodicInterval,
+  intervalValue: number,
+  startDateTime: Date | undefined,
+  endDateTime: Date | undefined,
+  type: TriggerType,
+  cron: string,
+): ApiTrigger {
   let trigger: ApiTrigger;
   switch (type) {
     case TriggerType.INTERVALED:
@@ -215,8 +230,8 @@ export function triggerDisplayString(trigger?: ApiTrigger): string {
       // Add 'and' if necessary
       const insertAndLocation = interval.lastIndexOf(', ') + 1;
       if (insertAndLocation > 0) {
-        interval = interval.slice(0, insertAndLocation) +
-          ' and' + interval.slice(insertAndLocation);
+        interval =
+          interval.slice(0, insertAndLocation) + ' and' + interval.slice(insertAndLocation);
       }
       // Remove trailing comma
       return interval.slice(0, -1);
diff --git a/frontend/src/lib/URLParser.test.ts b/frontend/src/lib/URLParser.test.ts
index a9e4a3974ff7..47d045d0d795 100644
--- a/frontend/src/lib/URLParser.test.ts
+++ b/frontend/src/lib/URLParser.test.ts
@@ -109,8 +109,9 @@ describe('URLParser', () => {
   });
 
   it('can build a search string', () => {
-    expect(new URLParser(routerProps).build({ key1: 'value1', key2: 'value2' }))
-      .toEqual('?key1=value1&key2=value2');
+    expect(new URLParser(routerProps).build({ key1: 'value1', key2: 'value2' })).toEqual(
+      '?key1=value1&key2=value2',
+    );
   });
 
   it('returns empty query string when given an empty object or no object', () => {
diff --git a/frontend/src/lib/URLParser.ts b/frontend/src/lib/URLParser.ts
index f1ca4f8c3c1d..283a9ed0479d 100644
--- a/frontend/src/lib/URLParser.ts
+++ b/frontend/src/lib/URLParser.ts
@@ -18,7 +18,6 @@ import { QUERY_PARAMS } from '../components/Router';
 import { RouteComponentProps } from 'react-router';
 
 export class URLParser {
-
   private _paramMap: URLSearchParams;
   private _routeProps: RouteComponentProps;
 
@@ -57,7 +56,12 @@ export class URLParser {
   // TODO: create interface for this param.
   public build(searchTerms?: { [param: string]: string }): string {
     const obj = searchTerms || {};
-    return '?' + Object.keys(obj).map(k => k + '=' + obj[k]).join('&');
+    return (
+      '?' +
+      Object.keys(obj)
+        .map(k => k + '=' + obj[k])
+        .join('&')
+    );
   }
 
   private _update(replace = true): void {
diff --git a/frontend/src/lib/Utils.test.ts b/frontend/src/lib/Utils.test.ts
index d61751b9a95a..5c25cddabd0c 100644
--- a/frontend/src/lib/Utils.test.ts
+++ b/frontend/src/lib/Utils.test.ts
@@ -172,7 +172,7 @@ describe('Utils', () => {
       const workflow = {
         status: {
           finishedAt: 'some end',
-        }
+        },
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('-');
     });
@@ -181,7 +181,7 @@ describe('Utils', () => {
       const workflow = {
         status: {
           startedAt: 'some end',
-        }
+        },
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('-');
     });
@@ -191,7 +191,7 @@ describe('Utils', () => {
         status: {
           finishedAt: new Date(2018, 1, 3, 3, 56, 25).toISOString(),
           startedAt: new Date(2018, 1, 3, 3, 55, 30).toISOString(),
-        }
+        },
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('0:00:55');
     });
@@ -201,7 +201,7 @@ describe('Utils', () => {
         status: {
           finishedAt: new Date(2018, 1, 3, 3, 59, 25).toISOString(),
           startedAt: new Date(2018, 1, 3, 3, 55, 10).toISOString(),
-        }
+        },
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('0:04:15');
     });
@@ -211,7 +211,7 @@ describe('Utils', () => {
         status: {
           finishedAt: new Date(2018, 1, 3, 4, 55, 10).toISOString(),
           startedAt: new Date(2018, 1, 3, 3, 55, 10).toISOString(),
-        }
+        },
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('1:00:00');
     });
@@ -221,7 +221,7 @@ describe('Utils', () => {
         status: {
           finishedAt: new Date(2018, 1, 3, 4, 56, 11).toISOString(),
           startedAt: new Date(2018, 1, 3, 3, 55, 10).toISOString(),
-        }
+        },
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('1:01:01');
     });
@@ -231,7 +231,7 @@ describe('Utils', () => {
         status: {
           finishedAt: new Date(2018, 1, 2, 3, 55, 11).toISOString(),
           startedAt: new Date(2018, 1, 2, 3, 55, 13).toISOString(),
-        }
+        },
       } as any;
       expect(getRunDurationFromWorkflow(workflow)).toBe('-0:00:02');
     });
diff --git a/frontend/src/lib/Utils.tsx b/frontend/src/lib/Utils.tsx
index 3aa3e9cc0ac9..c0dc75d8607c 100644
--- a/frontend/src/lib/Utils.tsx
+++ b/frontend/src/lib/Utils.tsx
@@ -95,10 +95,7 @@ export function getRunDuration(run?: ApiRun): string {
 }
 
 export function getRunDurationFromWorkflow(workflow?: Workflow): string {
-  if (!workflow
-    || !workflow.status
-    || !workflow.status.startedAt
-    || !workflow.status.finishedAt) {
+  if (!workflow || !workflow.status || !workflow.status.startedAt || !workflow.status.finishedAt) {
     return '-';
   }
 
@@ -112,8 +109,9 @@ export function s(items: any[] | number): string {
 
 /** Title cases a string by capitalizing the first letter of each word. */
 export function titleCase(str: string): string {
-  return str.split(/[\s_-]/)
-    .map((w) => `${w.charAt(0).toUpperCase()}${w.slice(1)}`)
+  return str
+    .split(/[\s_-]/)
+    .map(w => `${w.charAt(0).toUpperCase()}${w.slice(1)}`)
     .join(' ');
 }
 
@@ -124,14 +122,16 @@ export function titleCase(str: string): string {
  * @param propertyName
  * @param fromCustomProperties
  */
-export function getResourceProperty(resource: Artifact | Execution,
-  propertyName: string, fromCustomProperties = false): string | number | null {
+export function getResourceProperty(
+  resource: Artifact | Execution,
+  propertyName: string,
+  fromCustomProperties = false,
+): string | number | null {
   const props = fromCustomProperties
     ? resource.getCustomPropertiesMap()
     : resource.getPropertiesMap();
 
-  return (props && props.get(propertyName) && getMetadataValue(props.get(propertyName)))
-    || null;
+  return (props && props.get(propertyName) && getMetadataValue(props.get(propertyName))) || null;
 }
 
 export function serviceErrorToString(error: ServiceError): string {
@@ -169,7 +169,7 @@ export function getMetadataValue(value?: Value): string | number {
 export function rowFilterFn(request: ListRequest): (r: Row) => boolean {
   // TODO: We are currently searching across all properties of all artifacts. We should figure
   // what the most useful fields are and limit filtering to those
-  return (r) => {
+  return r => {
     if (!request.filter) {
       return true;
     }
@@ -181,8 +181,17 @@ export function rowFilterFn(request: ListRequest): (r: Row) => boolean {
         return true;
       }
       // TODO: Extend this to look at more than a single predicate
-      const filterString = '' + (filter.predicates[0].int_value || filter.predicates[0].long_value || filter.predicates[0].string_value);
-      return (r.otherFields.join('').toLowerCase().indexOf(filterString.toLowerCase()) > -1);
+      const filterString =
+        '' +
+        (filter.predicates[0].int_value ||
+          filter.predicates[0].long_value ||
+          filter.predicates[0].string_value);
+      return (
+        r.otherFields
+          .join('')
+          .toLowerCase()
+          .indexOf(filterString.toLowerCase()) > -1
+      );
     } catch (err) {
       logger.error('Error parsing request filter!', err);
       return true;
@@ -190,7 +199,10 @@ export function rowFilterFn(request: ListRequest): (r: Row) => boolean {
   };
 }
 
-export function rowCompareFn(request: ListRequest, columns: Column[]): (r1: Row, r2: Row) => number {
+export function rowCompareFn(
+  request: ListRequest,
+  columns: Column[],
+): (r1: Row, r2: Row) => number {
   return (r1, r2) => {
     if (!request.sortBy) {
       return -1;
@@ -201,7 +213,7 @@ export function rowCompareFn(request: ListRequest, columns: Column[]): (r1: Row,
       ? request.sortBy.substring(0, request.sortBy.length - descSuffix.length)
       : request.sortBy;
 
-    const sortIndex = columns.findIndex((c) => cleanedSortBy === c.sortKey);
+    const sortIndex = columns.findIndex(c => cleanedSortBy === c.sortKey);
 
     // Convert null to string to avoid null comparison behavior
     const compare = (r1.otherFields[sortIndex] || '') < (r2.otherFields[sortIndex] || '');
@@ -260,7 +272,7 @@ export function groupRows(rows: Row[]): CollapsedAndExpandedRows {
       // Remove the grouping column text for all but the first row in the group because it will be
       // redundant within an expanded group.
       const hiddenRows = rowsInGroup.slice(1);
-      hiddenRows.forEach(row => row.otherFields[0] = '');
+      hiddenRows.forEach(row => (row.otherFields[0] = ''));
 
       // Add this group of rows sharing a pipeline to the list of grouped rows
       collapsedAndExpandedRows.expandedRows.set(index, hiddenRows);
@@ -274,19 +286,20 @@ export function groupRows(rows: Row[]): CollapsedAndExpandedRows {
  * row.
  * @param index
  */
-export function getExpandedRow(expandedRows: Map<number, Row[]>, columns: Column[]): (index: number) => React.ReactNode {
+export function getExpandedRow(
+  expandedRows: Map<number, Row[]>,
+  columns: Column[],
+): (index: number) => React.ReactNode {
   return (index: number) => {
     const rows = expandedRows.get(index) || [];
 
     return (
       <div className={padding(65, 'l')}>
-        {
-          rows.map((r, rindex) => (
-            <div className={classes('tableRow', css.row)} key={rindex}>
-              <CustomTableRow row={r} columns={columns} />
-            </div>
-          ))
-        }
+        {rows.map((r, rindex) => (
+          <div className={classes('tableRow', css.row)} key={rindex}>
+            <CustomTableRow row={r} columns={columns} />
+          </div>
+        ))}
       </div>
     );
   };
diff --git a/frontend/src/lib/WorkflowParser.test.ts b/frontend/src/lib/WorkflowParser.test.ts
index cdb68f58c82c..f54214a88ecd 100644
--- a/frontend/src/lib/WorkflowParser.test.ts
+++ b/frontend/src/lib/WorkflowParser.test.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import WorkflowParser, { StorageService } from './WorkflowParser';
-import { NodePhase } from '../lib/StatusUtils';
 import { color } from '../Css';
+import { NodePhase } from '../lib/StatusUtils';
 import { Constants } from './Constants';
+import WorkflowParser, { StorageService } from './WorkflowParser';
 
 describe('WorkflowParser', () => {
   describe('createRuntimeGraph', () => {
@@ -46,7 +46,10 @@ describe('WorkflowParser', () => {
     });
 
     it('handles a workflow without a name', () => {
-      const g = WorkflowParser.createRuntimeGraph({ status: { nodes: [{ key: 'value' }] }, metadata: {} } as any);
+      const g = WorkflowParser.createRuntimeGraph({
+        metadata: {},
+        status: { nodes: [{ key: 'value' }] },
+      } as any);
       expect(g.nodes()).toEqual([]);
       expect(g.edges()).toEqual([]);
     });
@@ -70,9 +73,9 @@ describe('WorkflowParser', () => {
               name: 'node2',
               phase: 'Succeeded',
               type: 'Pod',
-            }
+            },
           },
-        }
+        },
       };
       const g = WorkflowParser.createRuntimeGraph(workflow as any);
       expect(g.nodes()).toEqual(['node1', 'node2']);
@@ -107,7 +110,7 @@ describe('WorkflowParser', () => {
               type: 'Steps',
             },
           },
-        }
+        },
       };
       const g = WorkflowParser.createRuntimeGraph(workflow as any);
       expect(g.nodes()).toEqual(['node1', 'node2']);
@@ -149,7 +152,7 @@ describe('WorkflowParser', () => {
               type: 'Pod',
             },
           },
-        }
+        },
       };
       const g = WorkflowParser.createRuntimeGraph(workflow as any);
       expect(g.nodes()).toEqual([
@@ -158,15 +161,17 @@ describe('WorkflowParser', () => {
         'pendingNode-running-placeholder',
         'root',
         'runningNode',
-        'runningNode-running-placeholder'
+        'runningNode-running-placeholder',
       ]);
-      expect(g.edges()).toEqual(expect.arrayContaining([
-        { v: 'root', w: 'pendingNode' },
-        { v: 'root', w: 'runningNode' },
-        { v: 'root', w: 'finishedNode' },
-        { v: 'pendingNode', w: 'pendingNode-running-placeholder' },
-        { v: 'runningNode', w: 'runningNode-running-placeholder' },
-      ]));
+      expect(g.edges()).toEqual(
+        expect.arrayContaining([
+          { v: 'root', w: 'pendingNode' },
+          { v: 'root', w: 'runningNode' },
+          { v: 'root', w: 'finishedNode' },
+          { v: 'pendingNode', w: 'pendingNode-running-placeholder' },
+          { v: 'runningNode', w: 'runningNode-running-placeholder' },
+        ]),
+      );
     });
 
     it('sets specific properties for placeholder nodes', () => {
@@ -190,7 +195,7 @@ describe('WorkflowParser', () => {
               type: 'Pod',
             },
           },
-        }
+        },
       };
       const g = WorkflowParser.createRuntimeGraph(workflow as any);
 
@@ -228,18 +233,19 @@ describe('WorkflowParser', () => {
               type: 'Pod',
             },
           },
-        }
+        },
       };
       const g = WorkflowParser.createRuntimeGraph(workflow as any);
 
-      g.edges().map(edgeInfo => g.edge(edgeInfo)).forEach(edge => {
-        if (edge.isPlaceholder) {
-          expect(edge.color).toEqual(color.weak);
-        } else {
-          expect(edge.color).toBeUndefined();
-        }
-      });
-
+      g.edges()
+        .map(edgeInfo => g.edge(edgeInfo))
+        .forEach(edge => {
+          if (edge.isPlaceholder) {
+            expect(edge.color).toEqual(color.weak);
+          } else {
+            expect(edge.color).toBeUndefined();
+          }
+        });
     });
 
     it('deletes virtual nodes', () => {
@@ -267,9 +273,9 @@ describe('WorkflowParser', () => {
               name: 'node3',
               phase: 'Succeeded',
               type: 'Pod',
-            }
+            },
           },
-        }
+        },
       };
       const g = WorkflowParser.createRuntimeGraph(workflow as any);
       expect(g.nodes()).toEqual(['node1', 'node3']);
@@ -296,7 +302,7 @@ describe('WorkflowParser', () => {
               type: 'Pod',
             },
           },
-        }
+        },
       };
       const g = WorkflowParser.createRuntimeGraph(workflow as any);
       expect(g.nodes()).toEqual(['exitNode', 'node1']);
@@ -313,10 +319,10 @@ describe('WorkflowParser', () => {
               metadata: {
                 annotations: {
                   'pipelines.kubeflow.org/task_display_name': 'Customized name',
-                }
+                },
               },
               name: 'some-template',
-            }
+            },
           ],
         },
         status: {
@@ -329,7 +335,7 @@ describe('WorkflowParser', () => {
               type: 'Pod',
             },
           },
-        }
+        },
       };
       const g = WorkflowParser.createRuntimeGraph(workflow as any);
       expect(g.node('node1').label).toEqual('Customized name');
@@ -337,37 +343,46 @@ describe('WorkflowParser', () => {
   });
 
   describe('getNodeInputOutputParams', () => {
+    const emptyParams = { inputParams: [], outputParams: [] };
     it('handles undefined workflow', () => {
-      expect(WorkflowParser.getNodeInputOutputParams(undefined as any, '')).toEqual([[], []]);
+      expect(WorkflowParser.getNodeInputOutputParams(undefined as any, '')).toEqual(emptyParams);
     });
 
     it('handles empty workflow, without status', () => {
-      expect(WorkflowParser.getNodeInputOutputParams({} as any, '')).toEqual([[], []]);
+      expect(WorkflowParser.getNodeInputOutputParams({} as any, '')).toEqual(emptyParams);
     });
 
     it('handles workflow without nodes', () => {
       const workflow = { status: {} };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, '')).toEqual([[], []]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, '')).toEqual(emptyParams);
     });
 
     it('handles node not existing in graph', () => {
       const workflow = { status: { nodes: { node1: {} } } };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node2')).toEqual([[], []]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node2')).toEqual(
+        emptyParams,
+      );
     });
 
     it('handles an empty node', () => {
       const workflow = { status: { nodes: { node1: {} } } };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual([[], []]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual(
+        emptyParams,
+      );
     });
 
     it('handles a node with inputs but no parameters', () => {
       const workflow = { status: { nodes: { node1: { inputs: {} } } } };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual([[], []]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual(
+        emptyParams,
+      );
     });
 
     it('handles a node with inputs and empty parameters', () => {
       const workflow = { status: { nodes: { node1: { inputs: { parameters: [] } } } } };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual([[], []]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual(
+        emptyParams,
+      );
     });
 
     it('handles a node with one input parameter', () => {
@@ -376,20 +391,21 @@ describe('WorkflowParser', () => {
           nodes: {
             node1: {
               inputs: {
-                parameters: [{
-                  name: 'input param1',
-                  value: 'input param1 value'
-                }]
-              }
-            }
-          }
-        }
+                parameters: [
+                  {
+                    name: 'input param1',
+                    value: 'input param1 value',
+                  },
+                ],
+              },
+            },
+          },
+        },
       };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual([
-        [
-          ['input param1', 'input param1 value']
-        ], []
-      ]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual({
+        inputParams: [['input param1', 'input param1 value']],
+        outputParams: [],
+      });
     });
 
     it('handles a node with one input parameter that has no value', () => {
@@ -398,19 +414,20 @@ describe('WorkflowParser', () => {
           nodes: {
             node1: {
               inputs: {
-                parameters: [{
-                  name: 'input param1',
-                }]
-              }
-            }
-          }
-        }
+                parameters: [
+                  {
+                    name: 'input param1',
+                  },
+                ],
+              },
+            },
+          },
+        },
       };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual([
-        [
-          ['input param1', '']
-        ], []
-      ]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual({
+        inputParams: [['input param1', '']],
+        outputParams: [],
+      });
     });
 
     it('handles a node with one input parameter that is not the first node', () => {
@@ -419,28 +436,31 @@ describe('WorkflowParser', () => {
           nodes: {
             node1: {
               inputs: {
-                parameters: [{
-                  name: 'input param1',
-                  value: 'input param1 value'
-                }]
-              }
+                parameters: [
+                  {
+                    name: 'input param1',
+                    value: 'input param1 value',
+                  },
+                ],
+              },
             },
             node2: {
               inputs: {
-                parameters: [{
-                  name: 'node2 input param1',
-                  value: 'node2 input param1 value'
-                }]
-              }
-            }
-          }
-        }
+                parameters: [
+                  {
+                    name: 'node2 input param1',
+                    value: 'node2 input param1 value',
+                  },
+                ],
+              },
+            },
+          },
+        },
       };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node2')).toEqual([
-        [
-          ['node2 input param1', 'node2 input param1 value']
-        ], []
-      ]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node2')).toEqual({
+        inputParams: [['node2 input param1', 'node2 input param1 value']],
+        outputParams: [],
+      });
     });
 
     it('handles a node with one output parameter', () => {
@@ -449,21 +469,21 @@ describe('WorkflowParser', () => {
           nodes: {
             node1: {
               outputs: {
-                parameters: [{
-                  name: 'output param1',
-                  value: 'output param1 value'
-                }]
-              }
-            }
-          }
-        }
+                parameters: [
+                  {
+                    name: 'output param1',
+                    value: 'output param1 value',
+                  },
+                ],
+              },
+            },
+          },
+        },
       };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual([
-        [],
-        [
-          ['output param1', 'output param1 value']
-        ],
-      ]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual({
+        inputParams: [],
+        outputParams: [['output param1', 'output param1 value']],
+      });
     });
 
     it('handles a node with one input and one output parameter', () => {
@@ -472,29 +492,29 @@ describe('WorkflowParser', () => {
           nodes: {
             node1: {
               inputs: {
-                parameters: [{
-                  name: 'input param1',
-                  value: 'input param1 value'
-                }]
+                parameters: [
+                  {
+                    name: 'input param1',
+                    value: 'input param1 value',
+                  },
+                ],
               },
               outputs: {
-                parameters: [{
-                  name: 'output param1',
-                  value: 'output param1 value'
-                }]
+                parameters: [
+                  {
+                    name: 'output param1',
+                    value: 'output param1 value',
+                  },
+                ],
               },
-            }
-          }
-        }
+            },
+          },
+        },
       };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual([
-        [
-          ['input param1', 'input param1 value']
-        ],
-        [
-          ['output param1', 'output param1 value']
-        ],
-      ]);
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual({
+        inputParams: [['input param1', 'input param1 value']],
+        outputParams: [['output param1', 'output param1 value']],
+      });
     });
 
     it('handles a node with multiple input and output parameter', () => {
@@ -503,41 +523,286 @@ describe('WorkflowParser', () => {
           nodes: {
             node1: {
               inputs: {
-                parameters: [{
-                  name: 'input param1',
-                  value: 'input param1 value'
-                }, {
-                  name: 'input param2',
-                  value: 'input param2 value'
-                }, {
-                  name: 'input param3',
-                  value: 'input param3 value'
-                }],
+                parameters: [
+                  {
+                    name: 'input param1',
+                    value: 'input param1 value',
+                  },
+                  {
+                    name: 'input param2',
+                    value: 'input param2 value',
+                  },
+                  {
+                    name: 'input param3',
+                    value: 'input param3 value',
+                  },
+                ],
               },
               outputs: {
-                parameters: [{
-                  name: 'output param1',
-                  value: 'output param1 value'
-                }, {
-                  name: 'output param2',
-                  value: 'output param2 value'
-                }],
+                parameters: [
+                  {
+                    name: 'output param1',
+                    value: 'output param1 value',
+                  },
+                  {
+                    name: 'output param2',
+                    value: 'output param2 value',
+                  },
+                ],
               },
-            }
-          }
-        }
+            },
+          },
+        },
       };
-      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual([
-        [
+      expect(WorkflowParser.getNodeInputOutputParams(workflow as any, 'node1')).toEqual({
+        inputParams: [
           ['input param1', 'input param1 value'],
           ['input param2', 'input param2 value'],
           ['input param3', 'input param3 value'],
         ],
-        [
+        outputParams: [
           ['output param1', 'output param1 value'],
           ['output param2', 'output param2 value'],
         ],
-      ]);
+      });
+    });
+  });
+
+  describe('getNodeInputOutputArtifacts', () => {
+    const emptyArtifacts = { inputArtifacts: [], outputArtifacts: [] };
+    const s3 = {
+      accessKeySecret: { key: 'accesskey', optional: false, name: 'minio' },
+      bucket: 'foo',
+      endpoint: 'minio.kubeflow',
+      key: 'bar',
+      secretKeySecret: { key: 'secretkey', optional: false, name: 'minio' },
+    };
+
+    it('handles undefined workflow', () => {
+      expect(WorkflowParser.getNodeInputOutputArtifacts(undefined as any, '')).toEqual(
+        emptyArtifacts,
+      );
+    });
+
+    it('handles empty workflow, without status', () => {
+      expect(WorkflowParser.getNodeInputOutputArtifacts({} as any, '')).toEqual(emptyArtifacts);
+    });
+
+    it('handles workflow without nodes', () => {
+      const workflow = { status: {} };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, '')).toEqual(
+        emptyArtifacts,
+      );
+    });
+
+    it('handles node not existing in graph', () => {
+      const workflow = { status: { nodes: { node1: {} } } };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node2')).toEqual(
+        emptyArtifacts,
+      );
+    });
+
+    it('handles an empty node', () => {
+      const workflow = { status: { nodes: { node1: {} } } };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node1')).toEqual(
+        emptyArtifacts,
+      );
+    });
+
+    it('handles a node with inputs but no artifact', () => {
+      const workflow = { status: { nodes: { node1: { inputs: {} } } } };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node1')).toEqual(
+        emptyArtifacts,
+      );
+    });
+
+    it('handles a node with inputs and empty artifact', () => {
+      const workflow = { status: { nodes: { node1: { inputs: { artifacts: [] } } } } };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node1')).toEqual(
+        emptyArtifacts,
+      );
+    });
+
+    it('handles a node with one input artifact', () => {
+      const workflow = {
+        status: {
+          nodes: {
+            node1: {
+              inputs: {
+                artifacts: [
+                  {
+                    name: 'input art1',
+                    s3,
+                  },
+                ],
+              },
+            },
+          },
+        },
+      };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node1')).toEqual({
+        inputArtifacts: [['input art1', s3]],
+        outputArtifacts: [],
+      });
+    });
+
+    it('handles a node with one input artifact that has no s3 artifact config', () => {
+      const workflow = {
+        status: {
+          nodes: {
+            node1: {
+              inputs: {
+                artifacts: [
+                  {
+                    name: 'input art1',
+                  },
+                ],
+              },
+            },
+          },
+        },
+      };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node1')).toEqual({
+        inputArtifacts: [['input art1', undefined]],
+        outputArtifacts: [],
+      });
+    });
+
+    it('handles a node with one input artifact that is not the first node', () => {
+      const workflow = {
+        status: {
+          nodes: {
+            node1: {
+              inputs: {
+                artifacts: [
+                  {
+                    name: 'input art1',
+                    s3: { ...s3, key: 'in1' },
+                  },
+                ],
+              },
+            },
+            node2: {
+              inputs: {
+                artifacts: [
+                  {
+                    name: 'node2 input art1',
+                    s3,
+                  },
+                ],
+              },
+            },
+          },
+        },
+      };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node2')).toEqual({
+        inputArtifacts: [['node2 input art1', s3]],
+        outputArtifacts: [],
+      });
+    });
+
+    it('handles a node with one output artifact', () => {
+      const workflow = {
+        status: {
+          nodes: {
+            node1: {
+              outputs: {
+                artifacts: [
+                  {
+                    name: 'output art1',
+                    s3,
+                  },
+                ],
+              },
+            },
+          },
+        },
+      };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node1')).toEqual({
+        inputArtifacts: [],
+        outputArtifacts: [['output art1', s3]],
+      });
+    });
+
+    it('handles a node with one input and one output artifacts', () => {
+      const workflow = {
+        status: {
+          nodes: {
+            node1: {
+              inputs: {
+                artifacts: [
+                  {
+                    name: 'input art1',
+                    s3: { ...s3, key: 'in1' },
+                  },
+                ],
+              },
+              outputs: {
+                artifacts: [
+                  {
+                    name: 'output art1',
+                    s3: { ...s3, key: 'out1' },
+                  },
+                ],
+              },
+            },
+          },
+        },
+      };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node1')).toEqual({
+        inputArtifacts: [['input art1', { ...s3, key: 'in1' }]],
+        outputArtifacts: [['output art1', { ...s3, key: 'out1' }]],
+      });
+    });
+
+    it('handles a node with multiple input and output artifacts', () => {
+      const workflow = {
+        status: {
+          nodes: {
+            node1: {
+              inputs: {
+                artifacts: [
+                  {
+                    name: 'input art1',
+                    s3: { ...s3, key: 'in1' },
+                  },
+                  {
+                    name: 'input art2',
+                    s3: { ...s3, key: 'in2' },
+                  },
+                  {
+                    name: 'input art3',
+                    s3: { ...s3, key: 'in3' },
+                  },
+                ],
+              },
+              outputs: {
+                artifacts: [
+                  {
+                    name: 'output art1',
+                    s3: { ...s3, key: 'out1' },
+                  },
+                  {
+                    name: 'output art2',
+                    s3: { ...s3, key: 'out2' },
+                  },
+                ],
+              },
+            },
+          },
+        },
+      };
+      expect(WorkflowParser.getNodeInputOutputArtifacts(workflow as any, 'node1')).toEqual({
+        inputArtifacts: [
+          ['input art1', { ...s3, key: 'in1' }],
+          ['input art2', { ...s3, key: 'in2' }],
+          ['input art3', { ...s3, key: 'in3' }],
+        ],
+        outputArtifacts: [
+          ['output art1', { ...s3, key: 'out1' }],
+          ['output art2', { ...s3, key: 'out2' }],
+        ],
+      });
     });
   });
 
@@ -559,56 +824,76 @@ describe('WorkflowParser', () => {
     });
 
     it('handles a node with outputs and no-metadata artifacts', () => {
-      expect(WorkflowParser.loadNodeOutputPaths({
-        outputs: {
-          artifacts: [{
-            name: 'some other artifact',
-          }]
-        }
-      } as any)).toEqual([]);
+      expect(
+        WorkflowParser.loadNodeOutputPaths({
+          outputs: {
+            artifacts: [
+              {
+                name: 'some other artifact',
+              },
+            ],
+          },
+        } as any),
+      ).toEqual([]);
     });
 
     it('handles a node a malformed metadata artifact (no s3 field)', () => {
-      expect(WorkflowParser.loadNodeOutputPaths({
-        outputs: {
-          artifacts: [{
-            name: 'mlpipeline-ui-metadata',
-          }]
-        }
-      } as any)).toEqual([]);
+      expect(
+        WorkflowParser.loadNodeOutputPaths({
+          outputs: {
+            artifacts: [
+              {
+                name: 'mlpipeline-ui-metadata',
+              },
+            ],
+          },
+        } as any),
+      ).toEqual([]);
     });
 
     it('returns undefined bucket and key for a metadata artifact with empty s3 field', () => {
-      expect(WorkflowParser.loadNodeOutputPaths({
-        outputs: {
-          artifacts: [{
-            name: 'mlpipeline-ui-metadata',
-            s3: {},
-          }]
-        }
-      } as any)).toEqual([{
-        bucket: undefined,
-        key: undefined,
-        source: 'minio',
-      }]);
+      expect(
+        WorkflowParser.loadNodeOutputPaths({
+          outputs: {
+            artifacts: [
+              {
+                name: 'mlpipeline-ui-metadata',
+                s3: {},
+              },
+            ],
+          },
+        } as any),
+      ).toEqual([
+        {
+          bucket: undefined,
+          key: undefined,
+          source: 'minio',
+        },
+      ]);
     });
 
     it('returns the right bucket and key for a correct metadata artifact', () => {
-      expect(WorkflowParser.loadNodeOutputPaths({
-        outputs: {
-          artifacts: [{
-            name: 'mlpipeline-ui-metadata',
-            s3: {
-              bucket: 'test bucket',
-              key: 'test key',
-            },
-          }]
-        }
-      } as any)).toEqual([{
-        bucket: 'test bucket',
-        key: 'test key',
-        source: 'minio',
-      }]);
+      expect(
+        WorkflowParser.loadNodeOutputPaths({
+          outputs: {
+            artifacts: [
+              {
+                name: 'mlpipeline-ui-metadata',
+                s3: {
+                  bucket: 'test bucket',
+                  key: 'test key',
+                },
+              },
+            ],
+          },
+        } as any),
+      ).toEqual([
+        {
+          bucket: 'test bucket',
+          key: 'test key',
+          source: 'minio',
+        },
+      ]);
     });
   });
 
@@ -632,42 +917,52 @@ describe('WorkflowParser', () => {
     it('loads output paths from all workflow nodes', () => {
       const node1 = {
         outputs: {
-          artifacts: [{
-            name: 'mlpipeline-ui-metadata',
-            s3: {
-              bucket: 'test bucket',
-              key: 'test key',
+          artifacts: [
+            {
+              name: 'mlpipeline-ui-metadata',
+              s3: {
+                bucket: 'test bucket',
+                key: 'test key',
+              },
             },
-          }],
+          ],
         },
       };
       const node2 = {
         outputs: {
-          artifacts: [{
-            name: 'mlpipeline-ui-metadata',
-            s3: {
-              bucket: 'test bucket2',
-              key: 'test key2',
+          artifacts: [
+            {
+              name: 'mlpipeline-ui-metadata',
+              s3: {
+                bucket: 'test bucket2',
+                key: 'test key2',
+              },
             },
-          }],
+          ],
         },
       };
-      expect(WorkflowParser.loadAllOutputPaths({ status: { nodes: { node1, node2 } } } as any)).toEqual([{
-        bucket: 'test bucket',
-        key: 'test key',
-        source: 'minio',
-      }, {
-        bucket: 'test bucket2',
-        key: 'test key2',
-        source: 'minio',
-      }]);
+      expect(
+        WorkflowParser.loadAllOutputPaths({ status: { nodes: { node1, node2 } } } as any),
+      ).toEqual([
+        {
+          bucket: 'test bucket',
+          key: 'test key',
+          source: 'minio',
+        },
+        {
+          bucket: 'test bucket2',
+          key: 'test key2',
+          source: 'minio',
+        },
+      ]);
     });
   });
 
   describe('parseStoragePath', () => {
     it('throws for unsupported protocol', () => {
       expect(() => WorkflowParser.parseStoragePath('unsupported://path')).toThrowError(
-        'Unsupported storage path: unsupported://path');
+        'Unsupported storage path: unsupported://path',
+      );
     });
 
     it('handles GCS bucket without key', () => {
@@ -789,79 +1084,112 @@ describe('WorkflowParser', () => {
     });
 
     it('handles node not in the workflow', () => {
-      expect(WorkflowParser.getOutboundNodes({ status: { nodes: { node1: {} } } } as any, 'node2')).toEqual([]);
+      expect(
+        WorkflowParser.getOutboundNodes({ status: { nodes: { node1: {} } } } as any, 'node2'),
+      ).toEqual([]);
     });
 
     it('handles node with no outbound links', () => {
-      expect(WorkflowParser.getOutboundNodes({
-        status: { nodes: { node1: { outboundNodes: [] } } }
-      } as any, 'node1')).toEqual([]);
+      expect(
+        WorkflowParser.getOutboundNodes(
+          {
+            status: { nodes: { node1: { outboundNodes: [] } } },
+          } as any,
+          'node1',
+        ),
+      ).toEqual([]);
     });
 
     it('returns the id of a Pod node as its only outbound link', () => {
-      expect(WorkflowParser.getOutboundNodes({
-        status:
-          { nodes: { node1: { id: 'pod node id', outboundNodes: ['test node'], type: 'Pod' } } }
-      } as any, 'node1')).toEqual(['pod node id']);
+      expect(
+        WorkflowParser.getOutboundNodes(
+          {
+            status: {
+              nodes: { node1: { id: 'pod node id', outboundNodes: ['test node'], type: 'Pod' } },
+            },
+          } as any,
+          'node1',
+        ),
+      ).toEqual(['pod node id']);
     });
 
     it('handles node with an outbound link to a non-existing node', () => {
-      expect(WorkflowParser.getOutboundNodes({
-        status:
-          { nodes: { node1: { id: 'pod node id', outboundNodes: ['test node'] } } }
-      } as any, 'node1')).toEqual([]);
+      expect(
+        WorkflowParser.getOutboundNodes(
+          {
+            status: { nodes: { node1: { id: 'pod node id', outboundNodes: ['test node'] } } },
+          } as any,
+          'node1',
+        ),
+      ).toEqual([]);
     });
 
     it('returns the one Pod outbound node', () => {
-      expect(WorkflowParser.getOutboundNodes({
-        status:
-        {
-          nodes: {
-            node1: { id: 'pod node id', outboundNodes: ['node2', 'node3'] },
-            node2: { id: 'node2 id', type: 'Pod' }
-          }
-        }
-      } as any, 'node1')).toEqual(['node2']);
+      expect(
+        WorkflowParser.getOutboundNodes(
+          {
+            status: {
+              nodes: {
+                node1: { id: 'pod node id', outboundNodes: ['node2', 'node3'] },
+                node2: { id: 'node2 id', type: 'Pod' },
+              },
+            },
+          } as any,
+          'node1',
+        ),
+      ).toEqual(['node2']);
     });
 
     it('returns all Pod outbound nodes', () => {
-      expect(WorkflowParser.getOutboundNodes({
-        status:
-        {
-          nodes: {
-            node1: { id: 'pod node id', outboundNodes: ['node2', 'node3'] },
-            node2: { id: 'node2 id', type: 'Pod' },
-            node3: { id: 'node3 id', type: 'Pod' },
-          }
-        }
-      } as any, 'node1')).toEqual(['node2', 'node3']);
+      expect(
+        WorkflowParser.getOutboundNodes(
+          {
+            status: {
+              nodes: {
+                node1: { id: 'pod node id', outboundNodes: ['node2', 'node3'] },
+                node2: { id: 'node2 id', type: 'Pod' },
+                node3: { id: 'node3 id', type: 'Pod' },
+              },
+            },
+          } as any,
+          'node1',
+        ),
+      ).toEqual(['node2', 'node3']);
     });
 
     it('returns all Pod outbound nodes', () => {
-      expect(WorkflowParser.getOutboundNodes({
-        status:
-        {
-          nodes: {
-            node1: { id: 'pod node id', outboundNodes: ['node2', 'node3'] },
-            node2: { id: 'node2 id' },
-            node3: { id: 'node3 id', type: 'Pod' },
-          }
-        }
-      } as any, 'node1')).toEqual(['node3']);
+      expect(
+        WorkflowParser.getOutboundNodes(
+          {
+            status: {
+              nodes: {
+                node1: { id: 'pod node id', outboundNodes: ['node2', 'node3'] },
+                node2: { id: 'node2 id' },
+                node3: { id: 'node3 id', type: 'Pod' },
+              },
+            },
+          } as any,
+          'node1',
+        ),
+      ).toEqual(['node3']);
     });
 
     it('recursively returns Pod outbound nodes', () => {
-      expect(WorkflowParser.getOutboundNodes({
-        status:
-        {
-          nodes: {
-            node1: { id: 'pod node id', outboundNodes: ['node2', 'node3'] },
-            node2: { id: 'node2 id', outboundNodes: ['node4'] },
-            node3: { id: 'node3 id', type: 'Pod' },
-            node4: { id: 'node4 id', type: 'Pod' },
-          }
-        }
-      } as any, 'node1')).toEqual(['node4', 'node3']);
+      expect(
+        WorkflowParser.getOutboundNodes(
+          {
+            status: {
+              nodes: {
+                node1: { id: 'pod node id', outboundNodes: ['node2', 'node3'] },
+                node2: { id: 'node2 id', outboundNodes: ['node4'] },
+                node3: { id: 'node3 id', type: 'Pod' },
+                node4: { id: 'node4 id', type: 'Pod' },
+              },
+            },
+          } as any,
+          'node1',
+        ),
+      ).toEqual(['node4', 'node3']);
     });
   });
 
@@ -886,31 +1214,36 @@ describe('WorkflowParser', () => {
 
     [NodePhase.PENDING, NodePhase.RUNNING, NodePhase.SKIPPED, NodePhase.SUCCEEDED].map(phase => {
       it('returns empty string for workflow with a message and phase: ' + phase, () => {
-        expect(WorkflowParser.getWorkflowError({ status: { message: 'woops!', phase } } as any)).toEqual('');
+        expect(
+          WorkflowParser.getWorkflowError({ status: { message: 'woops!', phase } } as any),
+        ).toEqual('');
       });
     });
 
     [NodePhase.ERROR, NodePhase.FAILED].map(phase => {
       it('returns no error for workflow with no message and phase: ' + phase, () => {
-        expect(WorkflowParser.getWorkflowError({
-          status: {
-            phase,
-          },
-        } as any)).toEqual('');
+        expect(
+          WorkflowParser.getWorkflowError({
+            status: {
+              phase,
+            },
+          } as any),
+        ).toEqual('');
       });
     });
 
     [NodePhase.ERROR, NodePhase.FAILED].map(phase => {
       it('returns message string for workflow with a message and phase: ' + phase, () => {
-        expect(WorkflowParser.getWorkflowError({
-          status: {
-            message: 'woops!',
-            phase,
-          },
-        } as any)).toEqual('woops!');
+        expect(
+          WorkflowParser.getWorkflowError({
+            status: {
+              message: 'woops!',
+              phase,
+            },
+          } as any),
+        ).toEqual('woops!');
       });
     });
-
   });
 
   describe('getNodeVolumeMounts', () => {
@@ -943,9 +1276,9 @@ describe('WorkflowParser', () => {
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([]);
@@ -957,9 +1290,9 @@ describe('WorkflowParser', () => {
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([]);
@@ -968,17 +1301,19 @@ describe('WorkflowParser', () => {
     it('handles a node without a template', () => {
       const workflow = {
         spec: {
-          templates: [{
-            container: {},
-            name: 'template-2',
-	  }]
+          templates: [
+            {
+              container: {},
+              name: 'template-2',
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([]);
@@ -987,17 +1322,19 @@ describe('WorkflowParser', () => {
     it('handles a node which is not a container template', () => {
       const workflow = {
         spec: {
-          templates: [{
-            name: 'template-1',
-            resource: {},
-	  }]
+          templates: [
+            {
+              name: 'template-1',
+              resource: {},
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([]);
@@ -1006,17 +1343,19 @@ describe('WorkflowParser', () => {
     it('handles a node which is an empty container template', () => {
       const workflow = {
         spec: {
-          templates: [{
-            container: {},
-            name: 'template-1',
-	  }]
+          templates: [
+            {
+              container: {},
+              name: 'template-1',
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([]);
@@ -1025,19 +1364,21 @@ describe('WorkflowParser', () => {
     it('handles a node which is a container template without volumeMounts', () => {
       const workflow = {
         spec: {
-          templates: [{
-            container: {
-              image: 'image'
-	    },
-            name: 'template-1',
-	  }]
+          templates: [
+            {
+              container: {
+                image: 'image',
+              },
+              name: 'template-1',
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([]);
@@ -1046,19 +1387,21 @@ describe('WorkflowParser', () => {
     it('handles a node which is a container template with empty volumeMounts', () => {
       const workflow = {
         spec: {
-          templates: [{
-            container: {
-              volumeMounts: []
-	    },
-            name: 'template-1',
-	  }]
+          templates: [
+            {
+              container: {
+                volumeMounts: [],
+              },
+              name: 'template-1',
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([]);
@@ -1067,54 +1410,66 @@ describe('WorkflowParser', () => {
     it('handles a node which is a container template with one entry in volumeMounts', () => {
       const workflow = {
         spec: {
-          templates: [{
-            container: {
-              volumeMounts: [{
-                mountPath: '/data',
-                name: 'vol1',
-              }]
-	    },
-            name: 'template-1',
-	  }]
+          templates: [
+            {
+              container: {
+                volumeMounts: [
+                  {
+                    mountPath: '/data',
+                    name: 'vol1',
+                  },
+                ],
+              },
+              name: 'template-1',
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
-	    expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([['/data', 'vol1']]);
+      expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([
+        ['/data', 'vol1'],
+      ]);
     });
 
     it('handles a node which is a container template with multiple volumeMounts', () => {
       const workflow = {
         spec: {
-          templates: [{
-            container: {
-              volumeMounts: [
-	        {
-                  mountPath: '/data',
-                  name: 'vol1',
-	        },{
-                  mountPath: '/common',
-                  name: 'vol2',
-	        }
-	      ]
-	    },
-            name: 'template-1',
-	  }]
+          templates: [
+            {
+              container: {
+                volumeMounts: [
+                  {
+                    mountPath: '/data',
+                    name: 'vol1',
+                  },
+                  {
+                    mountPath: '/common',
+                    name: 'vol2',
+                  },
+                ],
+              },
+              name: 'template-1',
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
-	    expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([['/data', 'vol1'], ['/common', 'vol2']]);
+      expect(WorkflowParser.getNodeVolumeMounts(workflow as any, 'node1')).toEqual([
+        ['/data', 'vol1'],
+        ['/common', 'vol2'],
+      ]);
     });
   });
 
@@ -1148,9 +1503,9 @@ describe('WorkflowParser', () => {
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeManifest(workflow as any, 'node1')).toEqual([]);
@@ -1162,9 +1517,9 @@ describe('WorkflowParser', () => {
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeManifest(workflow as any, 'node1')).toEqual([]);
@@ -1173,17 +1528,19 @@ describe('WorkflowParser', () => {
     it('handles a node without a template', () => {
       const workflow = {
         spec: {
-          templates: [{
-            container: {},
-            name: 'template-2',
-	  }]
+          templates: [
+            {
+              container: {},
+              name: 'template-2',
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeManifest(workflow as any, 'node1')).toEqual([]);
@@ -1192,17 +1549,19 @@ describe('WorkflowParser', () => {
     it('handles a node which is not a resource template', () => {
       const workflow = {
         spec: {
-          templates: [{
-            container: {},
-            name: 'template-1',
-	  }]
+          templates: [
+            {
+              container: {},
+              name: 'template-1',
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeManifest(workflow as any, 'node1')).toEqual([]);
@@ -1211,17 +1570,19 @@ describe('WorkflowParser', () => {
     it('handles a node which is an empty resource template', () => {
       const workflow = {
         spec: {
-          templates: [{
-            name: 'template-1',
-            resource: {},
-	  }]
+          templates: [
+            {
+              name: 'template-1',
+              resource: {},
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
       expect(WorkflowParser.getNodeManifest(workflow as any, 'node1')).toEqual([]);
@@ -1230,23 +1591,27 @@ describe('WorkflowParser', () => {
     it('handles a node which is a complete resource template', () => {
       const workflow = {
         spec: {
-          templates: [{
-            name: 'template-1',
-            resource: {
-              action: 'create',
-              manifest: 'manifest'
-	    },
-	  }]
+          templates: [
+            {
+              name: 'template-1',
+              resource: {
+                action: 'create',
+                manifest: 'manifest',
+              },
+            },
+          ],
         },
         status: {
           nodes: {
             node1: {
-              templateName: 'template-1'
-            }
-          }
+              templateName: 'template-1',
+            },
+          },
         },
       };
-      expect(WorkflowParser.getNodeManifest(workflow as any, 'node1')).toEqual([['create', 'manifest']]);
+      expect(WorkflowParser.getNodeManifest(workflow as any, 'node1')).toEqual([
+        ['create', 'manifest'],
+      ]);
     });
   });
 });
diff --git a/frontend/src/lib/WorkflowParser.ts b/frontend/src/lib/WorkflowParser.ts
index fa060f811afe..257b24024d8b 100644
--- a/frontend/src/lib/WorkflowParser.ts
+++ b/frontend/src/lib/WorkflowParser.ts
@@ -14,21 +14,27 @@
  * limitations under the License.
  */
 
+import MoreIcon from '@material-ui/icons/MoreHoriz';
 import * as dagre from 'dagre';
+import {
+  NodeStatus,
+  Parameter,
+  S3Artifact,
+  Workflow,
+} from '../../third_party/argo-ui/argo_template';
 import IconWithTooltip from '../atoms/IconWithTooltip';
-import MoreIcon from '@material-ui/icons/MoreHoriz';
-import { Workflow, NodeStatus, Parameter } from '../../third_party/argo-ui/argo_template';
-import { statusToIcon } from '../pages/Status';
 import { color } from '../Css';
+import { statusToIcon } from '../pages/Status';
 import { Constants } from './Constants';
-import { NodePhase, statusToBgColor, hasFinished } from './StatusUtils';
+import { KeyValue } from './StaticGraphParser';
+import { hasFinished, NodePhase, statusToBgColor } from './StatusUtils';
 
 export enum StorageService {
   GCS = 'gcs',
   HTTP = 'http',
   HTTPS = 'https',
   MINIO = 'minio',
-  S3 = 's3'
+  S3 = 's3',
 }
 
 export interface StoragePath {
@@ -45,8 +51,13 @@ export default class WorkflowParser {
 
     const PLACEHOLDER_NODE_DIMENSION = 28;
 
-    if (!workflow || !workflow.status || !workflow.status.nodes ||
-      !workflow.metadata || !workflow.metadata.name) {
+    if (
+      !workflow ||
+      !workflow.status ||
+      !workflow.status.nodes ||
+      !workflow.metadata ||
+      !workflow.metadata.name
+    ) {
       return g;
     }
 
@@ -56,11 +67,13 @@ export default class WorkflowParser {
     // Ensure that the exit handler nodes are appended to the graph.
     // Uses the root node, so this needs to happen before we remove the root
     // node below.
-    const onExitHandlerNodeId =
-      Object.keys(workflowNodes).find((id) => workflowNodes[id].name === `${workflowName}.onExit`);
+    const onExitHandlerNodeId = Object.keys(workflowNodes).find(
+      id => workflowNodes[id].name === `${workflowName}.onExit`,
+    );
     if (onExitHandlerNodeId) {
-      this.getOutboundNodes(workflow, workflowName).forEach((nodeId) =>
-        g.setEdge(nodeId, onExitHandlerNodeId));
+      this.getOutboundNodes(workflow, workflowName).forEach(nodeId =>
+        g.setEdge(nodeId, onExitHandlerNodeId),
+      );
     }
 
     // If there are multiple steps, then remove the root node that Argo creates to manage the
@@ -73,83 +86,84 @@ export default class WorkflowParser {
     const runningNodeSuffix = '-running-placeholder';
 
     // Create dagre graph nodes from workflow nodes.
-    (Object as any).values(workflowNodes)
-      .forEach((node: NodeStatus) => {
-        let nodeLabel = node.displayName || node.id;
-        if (node.name === `${workflowName}.onExit`) {
-          nodeLabel = `onExit - ${node.templateName}`;
-        }
+    (Object as any).values(workflowNodes).forEach((node: NodeStatus) => {
+      let nodeLabel = node.displayName || node.id;
+      if (node.name === `${workflowName}.onExit`) {
+        nodeLabel = `onExit - ${node.templateName}`;
+      }
 
-        if (workflow.spec && workflow.spec.templates) {
-          const tmpl = workflow.spec.templates.find(t => !!t && !!t.name && t.name === node.templateName);
-          if (tmpl && tmpl.metadata && tmpl.metadata.annotations) {
-            const displayName = tmpl.metadata.annotations['pipelines.kubeflow.org/task_display_name'];
-            if (displayName) {
-              nodeLabel = displayName;
-            }
+      if (workflow.spec && workflow.spec.templates) {
+        const tmpl = workflow.spec.templates.find(
+          t => !!t && !!t.name && t.name === node.templateName,
+        );
+        if (tmpl && tmpl.metadata && tmpl.metadata.annotations) {
+          const displayName = tmpl.metadata.annotations['pipelines.kubeflow.org/task_display_name'];
+          if (displayName) {
+            nodeLabel = displayName;
           }
         }
+      }
 
-        g.setNode(node.id, {
-          height: Constants.NODE_HEIGHT,
-          icon: statusToIcon(node.phase as NodePhase, node.startedAt, node.finishedAt, node.message),
-          label: nodeLabel,
-          statusColoring: statusToBgColor(node.phase as NodePhase, node.message),
-          width: Constants.NODE_WIDTH,
-          ...node,
-        });
-
-        if (!hasFinished(node.phase as NodePhase) && !this.isVirtual(node)) {
-          g.setNode(node.id + runningNodeSuffix, {
-            height: PLACEHOLDER_NODE_DIMENSION,
-            icon: IconWithTooltip({
-              Icon: MoreIcon,
-              height: 24,
-              iconColor: color.weak,
-              tooltip: 'More nodes may appear here',
-              width: 24,
-            }),
-            isPlaceholder: true,
-            width: PLACEHOLDER_NODE_DIMENSION,
-          });
-          g.setEdge(node.id, node.id + runningNodeSuffix, { color: color.weak, isPlaceholder: true });
-        }
+      g.setNode(node.id, {
+        height: Constants.NODE_HEIGHT,
+        icon: statusToIcon(node.phase as NodePhase, node.startedAt, node.finishedAt, node.message),
+        label: nodeLabel,
+        statusColoring: statusToBgColor(node.phase as NodePhase, node.message),
+        width: Constants.NODE_WIDTH,
+        ...node,
       });
 
+      if (!hasFinished(node.phase as NodePhase) && !this.isVirtual(node)) {
+        g.setNode(node.id + runningNodeSuffix, {
+          height: PLACEHOLDER_NODE_DIMENSION,
+          icon: IconWithTooltip({
+            Icon: MoreIcon,
+            height: 24,
+            iconColor: color.weak,
+            tooltip: 'More nodes may appear here',
+            width: 24,
+          }),
+          isPlaceholder: true,
+          width: PLACEHOLDER_NODE_DIMENSION,
+        });
+        g.setEdge(node.id, node.id + runningNodeSuffix, { color: color.weak, isPlaceholder: true });
+      }
+    });
+
     // Connect dagre graph nodes with edges.
-    Object.keys(workflowNodes)
-      .forEach((nodeId) => {
-        if (workflowNodes[nodeId].children) {
-          workflowNodes[nodeId].children.forEach((childNodeId) => {
-            if (workflowNodes[childNodeId]) {
-              g.setEdge(nodeId, childNodeId);
-            }
-          });
-        }
-      });
+    Object.keys(workflowNodes).forEach(nodeId => {
+      if (workflowNodes[nodeId].children) {
+        workflowNodes[nodeId].children.forEach(childNodeId => {
+          if (workflowNodes[childNodeId]) {
+            g.setEdge(nodeId, childNodeId);
+          }
+        });
+      }
+    });
 
     // Add BoundaryID edges. Only add these edges to nodes that don't already have inbound edges.
-    Object.keys(workflowNodes)
-      .forEach((nodeId) => {
-        // Many nodes have the Argo root node as a boundaryID, and we can discard these.
-        if (workflowNodes[nodeId].boundaryID &&
-          workflowNodes[workflowNodes[nodeId].boundaryID] &&
-          (!g.inEdges(nodeId) || !g.inEdges(nodeId)!.length) &&
-          workflowNodes[nodeId].boundaryID !== workflowName) {
-          // BoundaryIDs point from children to parents.
-          g.setEdge(workflowNodes[nodeId].boundaryID, nodeId);
-        }
-      });
+    Object.keys(workflowNodes).forEach(nodeId => {
+      // Many nodes have the Argo root node as a boundaryID, and we can discard these.
+      if (
+        workflowNodes[nodeId].boundaryID &&
+        workflowNodes[workflowNodes[nodeId].boundaryID] &&
+        (!g.inEdges(nodeId) || !g.inEdges(nodeId)!.length) &&
+        workflowNodes[nodeId].boundaryID !== workflowName
+      ) {
+        // BoundaryIDs point from children to parents.
+        g.setEdge(workflowNodes[nodeId].boundaryID, nodeId);
+      }
+    });
 
     // Remove all virtual nodes
-    g.nodes().forEach((nodeId) => {
+    g.nodes().forEach(nodeId => {
       if (workflowNodes[nodeId] && this.isVirtual(workflowNodes[nodeId])) {
-        const parents = (g.inEdges(nodeId) || []).map((edge) => edge.v);
-        parents.forEach((p) => g.removeEdge(p, nodeId));
-        (g.outEdges(nodeId) || []).forEach((outboundEdge) => {
+        const parents = (g.inEdges(nodeId) || []).map(edge => edge.v);
+        parents.forEach(p => g.removeEdge(p, nodeId));
+        (g.outEdges(nodeId) || []).forEach(outboundEdge => {
           g.removeEdge(outboundEdge.v, outboundEdge.w);
           // Checking if we have a parent here to handle case where root node is virtual.
-          parents.forEach((p) => g.setEdge(p, outboundEdge.w));
+          parents.forEach(p => g.setEdge(p, outboundEdge.w));
         });
         g.removeNode(nodeId);
       }
@@ -168,33 +182,80 @@ export default class WorkflowParser {
   // Makes sure the workflow object contains the node and returns its
   // inputs/outputs if any, while looking out for any missing link in the chain to
   // the node's inputs/outputs.
-  public static getNodeInputOutputParams(workflow?: Workflow, nodeId?: string): [string[][], string[][]] {
-    type paramList = string[][];
-    if (!nodeId || !workflow || !workflow.status || !workflow.status.nodes || !workflow.status.nodes[nodeId]) {
-      return [[], []];
+  public static getNodeInputOutputParams(
+    workflow?: Workflow,
+    nodeId?: string,
+  ): Record<'inputParams' | 'outputParams', Array<KeyValue<string>>> {
+    type ParamList = Array<KeyValue<string>>;
+    let inputParams: ParamList = [];
+    let outputParams: ParamList = [];
+    if (
+      !nodeId ||
+      !workflow ||
+      !workflow.status ||
+      !workflow.status.nodes ||
+      !workflow.status.nodes[nodeId]
+    ) {
+      return { inputParams, outputParams };
     }
 
-    const node = workflow.status.nodes[nodeId];
-    const inputsOutputs: [paramList, paramList] = [[], []];
-    if (node.inputs && node.inputs.parameters) {
-      inputsOutputs[0] = node.inputs.parameters.map(p => [p.name, p.value || '']);
+    const { inputs, outputs } = workflow.status.nodes[nodeId];
+    if (!!inputs && !!inputs.parameters) {
+      inputParams = inputs.parameters.map(p => [p.name, p.value || '']);
     }
-    if (node.outputs && node.outputs.parameters) {
-      inputsOutputs[1] = node.outputs.parameters.map(p => [p.name, p.value || '']);
+    if (!!outputs && !!outputs.parameters) {
+      outputParams = outputs.parameters.map(p => [p.name, p.value || '']);
     }
-    return inputsOutputs;
+    return { inputParams, outputParams };
+  }
+
+  // Makes sure the workflow object contains the node and returns its
+  // inputs/outputs artifacts if any, while looking out for any missing link in the chain to
+  // the node's inputs/outputs.
+  public static getNodeInputOutputArtifacts(
+    workflow?: Workflow,
+    nodeId?: string,
+  ): Record<'inputArtifacts' | 'outputArtifacts', Array<KeyValue<S3Artifact>>> {
+    type ParamList = Array<KeyValue<S3Artifact>>;
+    let inputArtifacts: ParamList = [];
+    let outputArtifacts: ParamList = [];
+    if (
+      !nodeId ||
+      !workflow ||
+      !workflow.status ||
+      !workflow.status.nodes ||
+      !workflow.status.nodes[nodeId]
+    ) {
+      return { inputArtifacts, outputArtifacts };
+    }
+
+    const { inputs, outputs } = workflow.status.nodes[nodeId];
+    if (!!inputs && !!inputs.artifacts) {
+      inputArtifacts = inputs.artifacts.map(({ name, s3 }) => [name, s3]);
+    }
+    if (!!outputs && !!outputs.artifacts) {
+      outputArtifacts = outputs.artifacts.map(({ name, s3 }) => [name, s3]);
+    }
+    return { inputArtifacts, outputArtifacts };
   }
 
   // Makes sure the workflow object contains the node and returns its
   // volume mounts if any.
-  public static getNodeVolumeMounts(workflow: Workflow, nodeId: string): string[][] {
-    if (!workflow || !workflow.status || !workflow.status.nodes || !workflow.status.nodes[nodeId] || !workflow.spec || !workflow.spec.templates) {
+  public static getNodeVolumeMounts(workflow: Workflow, nodeId: string): Array<KeyValue<string>> {
+    if (
+      !workflow ||
+      !workflow.status ||
+      !workflow.status.nodes ||
+      !workflow.status.nodes[nodeId] ||
+      !workflow.spec ||
+      !workflow.spec.templates
+    ) {
       return [];
     }
 
     const node = workflow.status.nodes[nodeId];
     const tmpl = workflow.spec.templates.find(t => !!t && !!t.name && t.name === node.templateName);
-    let volumeMounts: string[][] = [];
+    let volumeMounts: Array<KeyValue<string>> = [];
     if (tmpl && tmpl.container && tmpl.container.volumeMounts) {
       volumeMounts = tmpl.container.volumeMounts.map(v => [v.mountPath, v.name]);
     }
@@ -203,14 +264,21 @@ export default class WorkflowParser {
 
   // Makes sure the workflow object contains the node and returns its
   // action and manifest.
-  public static getNodeManifest(workflow: Workflow, nodeId: string): string[][] {
-    if (!workflow || !workflow.status || !workflow.status.nodes || !workflow.status.nodes[nodeId] || !workflow.spec || !workflow.spec.templates) {
+  public static getNodeManifest(workflow: Workflow, nodeId: string): Array<KeyValue<string>> {
+    if (
+      !workflow ||
+      !workflow.status ||
+      !workflow.status.nodes ||
+      !workflow.status.nodes[nodeId] ||
+      !workflow.spec ||
+      !workflow.spec.templates
+    ) {
       return [];
     }
 
     const node = workflow.status.nodes[nodeId];
     const tmpl = workflow.spec.templates.find(t => !!t && !!t.name && t.name === node.templateName);
-    let manifest: string[][] = [];
+    let manifest: Array<KeyValue<string>> = [];
     if (tmpl && tmpl.resource && tmpl.resource.action && tmpl.resource.manifest) {
       manifest = [[tmpl.resource.action, tmpl.resource.manifest]];
     }
@@ -223,13 +291,13 @@ export default class WorkflowParser {
     const outputPaths: StoragePath[] = [];
     if (selectedWorkflowNode && selectedWorkflowNode.outputs) {
       (selectedWorkflowNode.outputs.artifacts || [])
-        .filter((a) => a.name === 'mlpipeline-ui-metadata' && !!a.s3)
-        .forEach((a) =>
+        .filter(a => a.name === 'mlpipeline-ui-metadata' && !!a.s3)
+        .forEach(a =>
           outputPaths.push({
             bucket: a.s3!.bucket,
             key: a.s3!.key,
             source: StorageService.MINIO,
-          })
+          }),
         );
     }
 
@@ -244,12 +312,16 @@ export default class WorkflowParser {
 
   // Returns a list of object mapping a step name to output path for the entire workflow,
   // by searching all nodes in the workflow, and parsing outputs for each.
-  public static loadAllOutputPathsWithStepNames(workflow: Workflow): Array<{ stepName: string, path: StoragePath }> {
-    const outputPaths: Array<{ stepName: string, path: StoragePath }> = [];
+  public static loadAllOutputPathsWithStepNames(
+    workflow: Workflow,
+  ): Array<{ stepName: string; path: StoragePath }> {
+    const outputPaths: Array<{ stepName: string; path: StoragePath }> = [];
     if (workflow && workflow.status && workflow.status.nodes) {
       Object.keys(workflow.status.nodes).forEach(n =>
         this.loadNodeOutputPaths(workflow.status.nodes[n]).map(path =>
-          outputPaths.push({ stepName: workflow.status.nodes[n].displayName, path })));
+          outputPaths.push({ stepName: workflow.status.nodes[n].displayName, path }),
+        ),
+      );
     }
 
     return outputPaths;
@@ -331,16 +403,23 @@ export default class WorkflowParser {
   // by Argo to orchestrate the workflow. Such nodes are not generally
   // meaningful from a user's perspective.
   public static isVirtual(node: NodeStatus): boolean {
-    return (node.type === 'StepGroup' || node.type === 'DAG' || node.type === 'TaskGroup') && !!node.boundaryID;
+    return (
+      (node.type === 'StepGroup' || node.type === 'DAG' || node.type === 'TaskGroup') &&
+      !!node.boundaryID
+    );
   }
 
   // Returns a workflow-level error string if found, empty string if none
   public static getWorkflowError(workflow: Workflow): string {
-    if (workflow && workflow.status && workflow.status.message && (
-      workflow.status.phase === NodePhase.ERROR || workflow.status.phase === NodePhase.FAILED)) {
+    if (
+      workflow &&
+      workflow.status &&
+      workflow.status.message &&
+      (workflow.status.phase === NodePhase.ERROR || workflow.status.phase === NodePhase.FAILED)
+    ) {
       return workflow.status.message;
     } else {
       return '';
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/AllRunsList.test.tsx b/frontend/src/pages/AllRunsList.test.tsx
index 0e0109d624df..3d9b1c635d9f 100644
--- a/frontend/src/pages/AllRunsList.test.tsx
+++ b/frontend/src/pages/AllRunsList.test.tsx
@@ -25,7 +25,7 @@ import { ButtonKeys } from '../lib/Buttons';
 describe('AllRunsList', () => {
   const updateBannerSpy = jest.fn();
   let _toolbarProps: any = {};
-  const updateToolbarSpy = jest.fn(toolbarProps => _toolbarProps = toolbarProps);
+  const updateToolbarSpy = jest.fn(toolbarProps => (_toolbarProps = toolbarProps));
   const historyPushSpy = jest.fn();
   const props: PageProps = {
     history: { push: historyPushSpy } as any,
diff --git a/frontend/src/pages/AllRunsList.tsx b/frontend/src/pages/AllRunsList.tsx
index 9c9d2574e250..e16b87129516 100644
--- a/frontend/src/pages/AllRunsList.tsx
+++ b/frontend/src/pages/AllRunsList.tsx
@@ -28,7 +28,6 @@ interface AllRunsListState {
 }
 
 class AllRunsList extends Page<{}, AllRunsListState> {
-
   private _runlistRef = React.createRef<RunList>();
 
   constructor(props: any) {
@@ -47,11 +46,9 @@ class AllRunsList extends Page<{}, AllRunsListState> {
         .newExperiment()
         .compareRuns(() => this.state.selectedIds)
         .cloneRun(() => this.state.selectedIds, false)
-        .archive(
-            () => this.state.selectedIds,
-            false,
-            selectedIds => this._selectionChanged(selectedIds),
-          )
+        .archive(() => this.state.selectedIds, false, selectedIds =>
+          this._selectionChanged(selectedIds),
+        )
         .refresh(this.refresh.bind(this))
         .getToolbarActionMap(),
       breadcrumbs: [],
@@ -60,11 +57,18 @@ class AllRunsList extends Page<{}, AllRunsListState> {
   }
 
   public render(): JSX.Element {
-    return <div className={classes(commonCss.page, padding(20, 'lr'))}>
-      <RunList onError={this.showPageError.bind(this)} selectedIds={this.state.selectedIds}
-        onSelectionChange={this._selectionChanged.bind(this)} ref={this._runlistRef}
-        storageState={RunStorageState.AVAILABLE} {...this.props} />
-    </div>;
+    return (
+      <div className={classes(commonCss.page, padding(20, 'lr'))}>
+        <RunList
+          onError={this.showPageError.bind(this)}
+          selectedIds={this.state.selectedIds}
+          onSelectionChange={this._selectionChanged.bind(this)}
+          ref={this._runlistRef}
+          storageState={RunStorageState.AVAILABLE}
+          {...this.props}
+        />
+      </div>
+    );
   }
 
   public async refresh(): Promise<void> {
@@ -77,10 +81,14 @@ class AllRunsList extends Page<{}, AllRunsListState> {
 
   private _selectionChanged(selectedIds: string[]): void {
     const toolbarActions = this.props.toolbarProps.actions;
-    toolbarActions[ButtonKeys.COMPARE].disabled = selectedIds.length <= 1 || selectedIds.length > 10;
+    toolbarActions[ButtonKeys.COMPARE].disabled =
+      selectedIds.length <= 1 || selectedIds.length > 10;
     toolbarActions[ButtonKeys.CLONE_RUN].disabled = selectedIds.length !== 1;
     toolbarActions[ButtonKeys.ARCHIVE].disabled = !selectedIds.length;
-    this.props.updateToolbar({ breadcrumbs: this.props.toolbarProps.breadcrumbs, actions: toolbarActions });
+    this.props.updateToolbar({
+      actions: toolbarActions,
+      breadcrumbs: this.props.toolbarProps.breadcrumbs,
+    });
     this.setState({ selectedIds });
   }
 }
diff --git a/frontend/src/pages/Archive.test.tsx b/frontend/src/pages/Archive.test.tsx
index e30bf95e055c..f10ff0e1f552 100644
--- a/frontend/src/pages/Archive.test.tsx
+++ b/frontend/src/pages/Archive.test.tsx
@@ -29,8 +29,16 @@ describe('Archive', () => {
   let tree: ShallowWrapper;
 
   function generateProps(): PageProps {
-    return TestUtils.generatePageProps(Archive, {} as any, {} as any, historyPushSpy,
-      updateBannerSpy, null, updateToolbarSpy, null);
+    return TestUtils.generatePageProps(
+      Archive,
+      {} as any,
+      {} as any,
+      historyPushSpy,
+      updateBannerSpy,
+      null,
+      updateToolbarSpy,
+      null,
+    );
   }
 
   beforeEach(() => {
diff --git a/frontend/src/pages/Archive.tsx b/frontend/src/pages/Archive.tsx
index c88624e614d7..bdfe2ff96546 100644
--- a/frontend/src/pages/Archive.tsx
+++ b/frontend/src/pages/Archive.tsx
@@ -42,11 +42,7 @@ export default class Archive extends Page<{}, ArchiveState> {
     const buttons = new Buttons(this.props, this.refresh.bind(this));
     return {
       actions: buttons
-        .restore(
-          () => this.state.selectedIds,
-          false,
-          this._selectionChanged.bind(this),
-        )
+        .restore(() => this.state.selectedIds, false, this._selectionChanged.bind(this))
         .refresh(this.refresh.bind(this))
         .getToolbarActionMap(),
       breadcrumbs: [],
@@ -55,11 +51,18 @@ export default class Archive extends Page<{}, ArchiveState> {
   }
 
   public render(): JSX.Element {
-    return <div className={classes(commonCss.page, padding(20, 'lr'))}>
-      <RunList onError={this.showPageError.bind(this)} selectedIds={this.state.selectedIds}
-        onSelectionChange={this._selectionChanged.bind(this)} ref={this._runlistRef}
-        storageState={RunStorageState.ARCHIVED} {...this.props} />
-    </div>;
+    return (
+      <div className={classes(commonCss.page, padding(20, 'lr'))}>
+        <RunList
+          onError={this.showPageError.bind(this)}
+          selectedIds={this.state.selectedIds}
+          onSelectionChange={this._selectionChanged.bind(this)}
+          ref={this._runlistRef}
+          storageState={RunStorageState.ARCHIVED}
+          {...this.props}
+        />
+      </div>
+    );
   }
 
   public async refresh(): Promise<void> {
@@ -73,7 +76,10 @@ export default class Archive extends Page<{}, ArchiveState> {
   private _selectionChanged(selectedIds: string[]): void {
     const toolbarActions = this.props.toolbarProps.actions;
     toolbarActions[ButtonKeys.RESTORE].disabled = !selectedIds.length;
-    this.props.updateToolbar({ breadcrumbs: this.props.toolbarProps.breadcrumbs, actions: toolbarActions });
+    this.props.updateToolbar({
+      actions: toolbarActions,
+      breadcrumbs: this.props.toolbarProps.breadcrumbs,
+    });
     this.setState({ selectedIds });
   }
 }
diff --git a/frontend/src/pages/ArtifactDetails.tsx b/frontend/src/pages/ArtifactDetails.tsx
index 70d3af35d489..d48ea6acd3a2 100644
--- a/frontend/src/pages/ArtifactDetails.tsx
+++ b/frontend/src/pages/ArtifactDetails.tsx
@@ -64,12 +64,14 @@ export default class ArtifactDetails extends Page<{}, ArtifactDetailsState> {
     }
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-        {<ResourceInfo
-          resourceType={ResourceType.ARTIFACT}
-          typeName={this.properTypeName}
-          resource={this.state.artifact}
-        />}
-      </div >
+        {
+          <ResourceInfo
+            resourceType={ResourceType.ARTIFACT}
+            typeName={this.properTypeName}
+            resource={this.state.artifact}
+          />
+        }
+      </div>
     );
   }
 
@@ -77,7 +79,7 @@ export default class ArtifactDetails extends Page<{}, ArtifactDetailsState> {
     return {
       actions: {},
       breadcrumbs: [{ displayName: 'Artifacts', href: RoutePage.ARTIFACTS }],
-      pageTitle: `${this.properTypeName} ${this.id} details`
+      pageTitle: `${this.properTypeName} ${this.id} details`,
     };
   }
 
@@ -113,7 +115,7 @@ export default class ArtifactDetails extends Page<{}, ArtifactDetailsState> {
         title += ` (version: ${version})`;
       }
       this.props.updateToolbar({
-        pageTitle: title
+        pageTitle: title,
       });
       this.setState({ artifact });
     });
diff --git a/frontend/src/pages/ArtifactList.tsx b/frontend/src/pages/ArtifactList.tsx
index 8d8fb98c74d8..c5e29b54563c 100644
--- a/frontend/src/pages/ArtifactList.tsx
+++ b/frontend/src/pages/ArtifactList.tsx
@@ -15,19 +15,34 @@
  */
 
 import * as React from 'react';
-import CustomTable, { Column, Row, ExpandState, CustomRendererProps } from '../components/CustomTable';
+import CustomTable, {
+  Column,
+  Row,
+  ExpandState,
+  CustomRendererProps,
+} from '../components/CustomTable';
 import { Page } from './Page';
 import { ToolbarProps } from '../components/Toolbar';
 import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
-import { getResourceProperty, rowCompareFn, rowFilterFn, groupRows, getExpandedRow, serviceErrorToString } from '../lib/Utils';
+import {
+  getResourceProperty,
+  rowCompareFn,
+  rowFilterFn,
+  groupRows,
+  getExpandedRow,
+  serviceErrorToString,
+} from '../lib/Utils';
 import { RoutePageFactory } from '../components/Router';
 import { Link } from 'react-router-dom';
 import { Artifact, ArtifactType } from '../generated/src/apis/metadata/metadata_store_pb';
 import { ArtifactProperties, ArtifactCustomProperties, ListRequest, Apis } from '../lib/Apis';
-import { GetArtifactTypesRequest, GetArtifactsRequest } from '../generated/src/apis/metadata/metadata_store_service_pb';
+import {
+  GetArtifactTypesRequest,
+  GetArtifactsRequest,
+} from '../generated/src/apis/metadata/metadata_store_service_pb';
 import { getArtifactCreationTime } from '../lib/MetadataUtils';
-import { GcsLink } from '../components/GcsLink';
+import { ArtifactLink } from '../components/ArtifactLink';
 
 interface ArtifactListState {
   artifacts: Artifact[];
@@ -48,7 +63,7 @@ class ArtifactList extends Page<{}, ArtifactListState> {
           customRenderer: this.nameCustomRenderer,
           flex: 2,
           label: 'Pipeline/Workspace',
-          sortKey: 'pipelineName'
+          sortKey: 'pipelineName',
         },
         {
           customRenderer: this.nameCustomRenderer,
@@ -81,7 +96,8 @@ class ArtifactList extends Page<{}, ArtifactListState> {
     const { rows, columns } = this.state;
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-        <CustomTable ref={this.tableRef}
+        <CustomTable
+          ref={this.tableRef}
           columns={columns}
           rows={rows}
           disablePaging={true}
@@ -91,7 +107,8 @@ class ArtifactList extends Page<{}, ArtifactListState> {
           initialSortOrder='asc'
           getExpandComponent={this.getExpandedArtifactsRow}
           toggleExpansion={this.toggleRowExpand}
-          emptyMessage='No artifacts found.' />
+          emptyMessage='No artifacts found.'
+        />
       </div>
     );
   }
@@ -103,36 +120,42 @@ class ArtifactList extends Page<{}, ArtifactListState> {
   }
 
   private async reload(request: ListRequest): Promise<string> {
-    Apis.getMetadataServiceClient().getArtifacts(new GetArtifactsRequest(), (err, res) => {
+    const { response: res, error: err } = await Apis.getMetadataServicePromiseClient().getArtifacts(
+      new GetArtifactsRequest(),
+    );
+
+    if (err) {
       // Code === 5 means no record found in backend. This is a temporary workaround.
       // TODO: remove err.code !== 5 check when backend is fixed.
-      if (err && err.code !== 5) {
+      if (err.code !== 5) {
         this.showPageError(serviceErrorToString(err));
-        return;
       }
+      return '';
+    }
 
-      const artifacts = (res && res.getArtifactsList()) || [];
-      this.getRowsFromArtifacts(request, artifacts);
-      this.clearBanner();
-    });
+    const artifacts = (res && res.getArtifactsList()) || [];
+    await this.getRowsFromArtifacts(request, artifacts);
     return '';
   }
 
+  private nameCustomRenderer: React.FC<CustomRendererProps<string>> = (
+    props: CustomRendererProps<string>,
+  ) => {
+    const [artifactType, artifactId] = props.id.split(':');
+    return (
+      <Link
+        onClick={e => e.stopPropagation()}
+        className={commonCss.link}
+        to={RoutePageFactory.artifactDetails(artifactType, Number(artifactId))}
+      >
+        {props.value}
+      </Link>
+    );
+  };
 
-  private nameCustomRenderer: React.FC<CustomRendererProps<string>> =
-    (props: CustomRendererProps<string>) => {
-      const [artifactType, artifactId] = props.id.split(':');
-      return (
-        <Link onClick={(e) => e.stopPropagation()}
-          className={commonCss.link}
-          to={RoutePageFactory.artifactDetails(artifactType, Number(artifactId))}>
-          {props.value}
-        </Link>
-      );
-    }
-
-  private uriCustomRenderer: React.FC<CustomRendererProps<string>> =
-    ({ value }) => <GcsLink gcsUri={value} />
+  private uriCustomRenderer: React.FC<CustomRendererProps<string>> = ({ value }) => (
+    <ArtifactLink artifactUri={value} />
+  );
 
   /**
    * Temporary solution to apply sorting, filtering, and pagination to the
@@ -140,45 +163,54 @@ class ArtifactList extends Page<{}, ArtifactListState> {
    * TODO: Replace once https://github.com/kubeflow/metadata/issues/73 is done.
    * @param request
    */
-  private getRowsFromArtifacts(request: ListRequest, artifacts: Artifact[]): void {
+  private async getRowsFromArtifacts(request: ListRequest, artifacts: Artifact[]): Promise<void> {
     const artifactTypesMap = new Map<number, ArtifactType>();
     // TODO: Consider making an Api method for returning and caching types
-    Apis.getMetadataServiceClient().getArtifactTypes(new GetArtifactTypesRequest(), async (err, res) => {
-      if (err) {
-        this.showPageError(serviceErrorToString(err));
-        return;
-      }
+    const {
+      response: res,
+      error: err,
+    } = await Apis.getMetadataServicePromiseClient().getArtifactTypes(
+      new GetArtifactTypesRequest(),
+    );
+    if (err) {
+      this.showPageError(serviceErrorToString(err));
+      return;
+    }
 
-      (res && res.getArtifactTypesList() || []).forEach((artifactType) => {
-        artifactTypesMap.set(artifactType.getId()!, artifactType);
-      });
+    ((res && res.getArtifactTypesList()) || []).forEach(artifactType => {
+      artifactTypesMap.set(artifactType.getId()!, artifactType);
+    });
 
-      try {
-        // TODO: When backend supports sending creation time back when we list
-        // artifacts, let's use it directly.
-        const artifactsWithCreationTimes = await Promise.all(artifacts.map(async (artifact) => {
+    try {
+      // TODO: When backend supports sending creation time back when we list
+      // artifacts, let's use it directly.
+      const artifactsWithCreationTimes = await Promise.all(
+        artifacts.map(async artifact => {
           const artifactId = artifact.getId();
           if (!artifactId) {
             return { artifact };
           }
 
-          return ({
+          return {
             artifact,
             creationTime: await getArtifactCreationTime(artifactId),
-          });
-        }));
+          };
+        }),
+      );
 
-        const collapsedAndExpandedRows = groupRows(
-          artifactsWithCreationTimes.map(({ artifact, creationTime }) => {
+      const collapsedAndExpandedRows = groupRows(
+        artifactsWithCreationTimes
+          .map(({ artifact, creationTime }) => {
             const typeId = artifact.getTypeId();
-            const type = (typeId && artifactTypesMap && artifactTypesMap.get(typeId))
-              ? artifactTypesMap.get(typeId)!.getName()
-              : typeId;
+            const type =
+              typeId && artifactTypesMap && artifactTypesMap.get(typeId)
+                ? artifactTypesMap.get(typeId)!.getName()
+                : typeId;
             return {
               id: `${type}:${artifact.getId()}`, // Join with colon so we can build the link
               otherFields: [
-                getResourceProperty(artifact, ArtifactProperties.PIPELINE_NAME)
-                || getResourceProperty(artifact, ArtifactCustomProperties.WORKSPACE, true),
+                getResourceProperty(artifact, ArtifactProperties.PIPELINE_NAME) ||
+                  getResourceProperty(artifact, ArtifactCustomProperties.WORKSPACE, true),
                 getResourceProperty(artifact, ArtifactProperties.NAME),
                 artifact.getId(),
                 type,
@@ -187,23 +219,22 @@ class ArtifactList extends Page<{}, ArtifactListState> {
               ],
             } as Row;
           })
-            .filter(rowFilterFn(request))
-            .sort(rowCompareFn(request, this.state.columns))
-        );
-
-        this.setState({
-          artifacts,
-          expandedRows: collapsedAndExpandedRows.expandedRows,
-          rows: collapsedAndExpandedRows.collapsedRows,
-        });
-      } catch (err) {
-        if (err.message) {
-          this.showPageError(err.message, err);
-        } else {
-          this.showPageError('Unknown error', err);
-        }
+          .filter(rowFilterFn(request))
+          .sort(rowCompareFn(request, this.state.columns)),
+      );
+
+      this.setState({
+        artifacts,
+        expandedRows: collapsedAndExpandedRows.expandedRows,
+        rows: collapsedAndExpandedRows.collapsedRows,
+      });
+    } catch (err) {
+      if (err.message) {
+        this.showPageError(err.message, err);
+      } else {
+        this.showPageError('Unknown error', err);
       }
-    });
+    }
   }
 
   /**
@@ -215,8 +246,10 @@ class ArtifactList extends Page<{}, ArtifactListState> {
     if (!rows[index]) {
       return;
     }
-    rows[index].expandState = rows[index].expandState === ExpandState.EXPANDED ?
-      ExpandState.COLLAPSED : ExpandState.EXPANDED;
+    rows[index].expandState =
+      rows[index].expandState === ExpandState.EXPANDED
+        ? ExpandState.COLLAPSED
+        : ExpandState.EXPANDED;
     this.setState({ rows });
   }
 
diff --git a/frontend/src/pages/Compare.test.tsx b/frontend/src/pages/Compare.test.tsx
index d303f1f2a5e9..98ed9389f209 100644
--- a/frontend/src/pages/Compare.test.tsx
+++ b/frontend/src/pages/Compare.test.tsx
@@ -34,7 +34,6 @@ class TestCompare extends Compare {
 }
 
 describe('Compare', () => {
-
   let tree: ReactWrapper | ShallowWrapper;
 
   const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => null);
@@ -48,14 +47,21 @@ describe('Compare', () => {
   const getRunSpy = jest.spyOn(Apis.runServiceApi, 'getRun');
   const outputArtifactLoaderSpy = jest.spyOn(OutputArtifactLoader, 'load');
 
-
   function generateProps(): PageProps {
     const location = {
       pathname: RoutePage.COMPARE,
-      search: `?${QUERY_PARAMS.runlist}=${MOCK_RUN_1_ID},${MOCK_RUN_2_ID},${MOCK_RUN_3_ID}`
+      search: `?${QUERY_PARAMS.runlist}=${MOCK_RUN_1_ID},${MOCK_RUN_2_ID},${MOCK_RUN_3_ID}`,
     } as any;
-    return TestUtils.generatePageProps(Compare, location, {} as any, historyPushSpy,
-      updateBannerSpy, updateDialogSpy, updateToolbarSpy, updateSnackbarSpy);
+    return TestUtils.generatePageProps(
+      Compare,
+      location,
+      {} as any,
+      historyPushSpy,
+      updateBannerSpy,
+      updateDialogSpy,
+      updateToolbarSpy,
+      updateSnackbarSpy,
+    );
   }
 
   const MOCK_RUN_1_ID = 'mock-run-1-id';
@@ -72,7 +78,7 @@ describe('Compare', () => {
       run: {
         id: id || 'test-run-id',
         name: 'test run ' + id,
-      }
+      },
     };
   }
 
@@ -81,7 +87,6 @@ describe('Compare', () => {
    * and a tensorboard viewer.
    */
   async function setUpViewersAndShallowMount(): Promise<void> {
-
     // Simulate returning a tensorboard and table viewer
     outputArtifactLoaderSpy.mockImplementation(() => [
       { type: PlotType.TENSORBOARD, url: 'gs://path' },
@@ -93,14 +98,16 @@ describe('Compare', () => {
         nodes: {
           node1: {
             outputs: {
-              artifacts: [{
-                name: 'mlpipeline-ui-metadata',
-                s3: { bucket: 'test bucket', key: 'test key' }
-              }]
-            }
-          }
-        }
-      }
+              artifacts: [
+                {
+                  name: 'mlpipeline-ui-metadata',
+                  s3: { bucket: 'test bucket', key: 'test key' },
+                },
+              ],
+            },
+          },
+        },
+      },
     };
     const run1 = newMockRun('run-with-workflow-1');
     run1.pipeline_runtime!.workflow_manifest = JSON.stringify(workflow);
@@ -130,7 +137,7 @@ describe('Compare', () => {
 
     runs = [newMockRun(MOCK_RUN_1_ID), newMockRun(MOCK_RUN_2_ID), newMockRun(MOCK_RUN_3_ID)];
 
-    getRunSpy.mockImplementation((id: string) => runs.find((r) => r.run!.id === id));
+    getRunSpy.mockImplementation((id: string) => runs.find(r => r.run!.id === id));
   });
 
   afterEach(async () => {
@@ -161,8 +168,7 @@ describe('Compare', () => {
   it('renders a page with multiple runs', async () => {
     const props = generateProps();
     // Ensure there are run IDs in the query
-    props.location.search =
-      `?${QUERY_PARAMS.runlist}=${MOCK_RUN_1_ID},${MOCK_RUN_2_ID},${MOCK_RUN_3_ID}`;
+    props.location.search = `?${QUERY_PARAMS.runlist}=${MOCK_RUN_1_ID},${MOCK_RUN_2_ID},${MOCK_RUN_3_ID}`;
 
     tree = shallow(<Compare {...props} />);
     await TestUtils.flushPromises();
@@ -189,11 +195,13 @@ describe('Compare', () => {
     tree = shallow(<Compare {...generateProps()} />);
     await TestUtils.flushPromises();
 
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'test error',
-      message: 'Error: failed loading 1 runs. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'test error',
+        message: 'Error: failed loading 1 runs. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows an error banner indicating the number of getRun calls that failed', async () => {
@@ -206,11 +214,13 @@ describe('Compare', () => {
     tree = shallow(<Compare {...generateProps()} />);
     await TestUtils.flushPromises();
 
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'test error',
-      message: `Error: failed loading ${runs.length} runs. Click Details for more information.`,
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'test error',
+        message: `Error: failed loading ${runs.length} runs. Click Details for more information.`,
+        mode: 'error',
+      }),
+    );
   });
 
   it('clears the error banner on refresh', async () => {
@@ -228,11 +238,11 @@ describe('Compare', () => {
     expect(updateBannerSpy).toHaveBeenLastCalledWith({});
   });
 
-  it('displays run\'s parameters if the run has any', async () => {
+  it("displays run's parameters if the run has any", async () => {
     const workflow = {
       spec: {
         arguments: {
-          parameters: [{ name: 'param1', value: 'value1', }, { name: 'param2', value: 'value2', }],
+          parameters: [{ name: 'param1', value: 'value1' }, { name: 'param2', value: 'value2' }],
         },
       },
     } as Workflow;
@@ -251,7 +261,7 @@ describe('Compare', () => {
     expect(tree.state('paramsCompareProps')).toEqual({
       rows: [['value1'], ['value2']],
       xLabels: ['test run run-with-parameters'],
-      yLabels: ['param1', 'param2']
+      yLabels: ['param1', 'param2'],
     });
     expect(tree).toMatchSnapshot();
   });
@@ -262,7 +272,7 @@ describe('Compare', () => {
         arguments: {
           parameters: [
             { name: 'r1-unique-param', value: 'r1-unique-val1' },
-            { name: 'shared-param', value: 'r1-shared-val2' }
+            { name: 'shared-param', value: 'r1-shared-val2' },
           ],
         },
       },
@@ -272,7 +282,7 @@ describe('Compare', () => {
         arguments: {
           parameters: [
             { name: 'r2-unique-param1', value: 'r2-unique-val1' },
-            { name: 'shared-param', value: 'r2-shared-val2' }
+            { name: 'shared-param', value: 'r2-shared-val2' },
           ],
         },
       },
@@ -294,7 +304,7 @@ describe('Compare', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('displays a run\'s metrics if the run has any', async () => {
+  it("displays a run's metrics if the run has any", async () => {
     const run = newMockRun('run-with-metrics');
     run.run!.metrics = [
       { name: 'some-metric', number_value: 0.33 },
@@ -312,7 +322,7 @@ describe('Compare', () => {
     expect(tree.state('metricsCompareProps')).toEqual({
       rows: [['0.330'], ['0.554']],
       xLabels: ['test run run-with-metrics'],
-      yLabels: ['some-metric', 'another-metric']
+      yLabels: ['some-metric', 'another-metric'],
     });
     expect(tree).toMatchSnapshot();
   });
@@ -324,9 +334,7 @@ describe('Compare', () => {
       { name: 'another-metric', number_value: 0.554 },
     ];
     const run2 = newMockRun('run2');
-    run2.run!.metrics = [
-      { name: 'some-metric', number_value: 0.67 },
-    ];
+    run2.run!.metrics = [{ name: 'some-metric', number_value: 0.67 }];
     runs.push(run1, run2);
 
     const props = generateProps();
@@ -351,14 +359,16 @@ describe('Compare', () => {
         nodes: {
           node1: {
             outputs: {
-              artifacts: [{
-                name: 'mlpipeline-ui-metadata',
-                s3: { bucket: 'test bucket', key: 'test key' }
-              }]
-            }
-          }
-        }
-      }
+              artifacts: [
+                {
+                  name: 'mlpipeline-ui-metadata',
+                  s3: { bucket: 'test bucket', key: 'test key' },
+                },
+              ],
+            },
+          },
+        },
+      },
     };
     const run = newMockRun('run-with-workflow');
     run.pipeline_runtime!.workflow_manifest = JSON.stringify(workflow);
@@ -373,23 +383,28 @@ describe('Compare', () => {
     const expectedViewerMap = new Map([
       [
         PlotType.TABLE,
-        [{
-          config: { data: [['test']], labels: ['col1, col2'], type: PlotType.TABLE },
-          runId: run.run!.id,
-          runName: run.run!.name
-        } as TaggedViewerConfig],
+        [
+          {
+            config: { data: [['test']], labels: ['col1, col2'], type: PlotType.TABLE },
+            runId: run.run!.id,
+            runName: run.run!.name,
+          } as TaggedViewerConfig,
+        ],
       ],
       [
         PlotType.TENSORBOARD,
-        [{
-          config: { type: PlotType.TENSORBOARD, url: 'gs://path' },
-          runId: run.run!.id,
-          runName: run.run!.name
-        } as TaggedViewerConfig]
+        [
+          {
+            config: { type: PlotType.TENSORBOARD, url: 'gs://path' },
+            runId: run.run!.id,
+            runName: run.run!.name,
+          } as TaggedViewerConfig,
+        ],
       ],
     ]);
-    expect((tree.state('viewersMap') as Map<PlotType, TaggedViewerConfig>))
-      .toEqual(expectedViewerMap);
+    expect(tree.state('viewersMap') as Map<PlotType, TaggedViewerConfig>).toEqual(
+      expectedViewerMap,
+    );
 
     expect(tree).toMatchSnapshot();
   });
@@ -404,11 +419,11 @@ describe('Compare', () => {
     collapseBtn!.action();
 
     expect(tree.state('collapseSections')).toEqual({
-      'Metrics': true,
-      'Parameters': true,
+      Metrics: true,
+      Parameters: true,
       'Run overview': true,
-      'Table': true,
-      'Tensorboard': true
+      Table: true,
+      Tensorboard: true,
     });
 
     expect(tree).toMatchSnapshot();
@@ -425,11 +440,11 @@ describe('Compare', () => {
     collapseBtn!.action();
 
     expect(tree.state('collapseSections')).toEqual({
-      'Metrics': true,
-      'Parameters': true,
+      Metrics: true,
+      Parameters: true,
       'Run overview': true,
-      'Table': true,
-      'Tensorboard': true
+      Table: true,
+      Tensorboard: true,
     });
 
     expandBtn!.action();
@@ -446,24 +461,40 @@ describe('Compare', () => {
     expect(tree.state('collapseSections')).toEqual({});
 
     // Collapse run overview
-    tree.find('CollapseButton').at(0).find('button').simulate('click');
+    tree
+      .find('CollapseButton')
+      .at(0)
+      .find('button')
+      .simulate('click');
 
     expect(tree.state('collapseSections')).toEqual({ 'Run overview': true });
 
     // Collapse run parameters
-    tree.find('CollapseButton').at(1).find('button').simulate('click');
+    tree
+      .find('CollapseButton')
+      .at(1)
+      .find('button')
+      .simulate('click');
 
     expect(tree.state('collapseSections')).toEqual({
-      'Parameters': true,
+      Parameters: true,
       'Run overview': true,
     });
 
     // Re-expand run overview and parameters
-    tree.find('CollapseButton').at(0).find('button').simulate('click');
-    tree.find('CollapseButton').at(1).find('button').simulate('click');
+    tree
+      .find('CollapseButton')
+      .at(0)
+      .find('button')
+      .simulate('click');
+    tree
+      .find('CollapseButton')
+      .at(1)
+      .find('button')
+      .simulate('click');
 
     expect(tree.state('collapseSections')).toEqual({
-      'Parameters': false,
+      Parameters: false,
       'Run overview': false,
     });
   });
@@ -475,12 +506,24 @@ describe('Compare', () => {
 
     expect(tree.state('selectedIds')).toEqual(['mock-run-1-id', 'mock-run-2-id', 'mock-run-3-id']);
 
-    tree.find('RunList').find('.tableRow').at(0).simulate('click');
-    tree.find('RunList').find('.tableRow').at(2).simulate('click');
+    tree
+      .find('RunList')
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    tree
+      .find('RunList')
+      .find('.tableRow')
+      .at(2)
+      .simulate('click');
 
     expect(tree.state('selectedIds')).toEqual(['mock-run-2-id']);
 
-    tree.find('RunList').find('.tableRow').at(0).simulate('click');
+    tree
+      .find('RunList')
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
 
     expect(tree.state('selectedIds')).toEqual(['mock-run-2-id', 'mock-run-1-id']);
   });
@@ -500,21 +543,23 @@ describe('Compare', () => {
     // Tensorboard and ROC curves are the only viewers that currently support aggregation
     outputArtifactLoaderSpy.mockImplementation(() => [
       { type: PlotType.TENSORBOARD, url: 'gs://path' },
-      { data: [], type: PlotType.ROC }
+      { data: [], type: PlotType.ROC },
     ]);
     const workflow = {
       status: {
         nodes: {
           node1: {
             outputs: {
-              artifacts: [{
-                name: 'mlpipeline-ui-metadata',
-                s3: { bucket: 'test bucket', key: 'test key' }
-              }]
-            }
-          }
-        }
-      }
+              artifacts: [
+                {
+                  name: 'mlpipeline-ui-metadata',
+                  s3: { bucket: 'test bucket', key: 'test key' },
+                },
+              ],
+            },
+          },
+        },
+      },
     };
     const run1 = newMockRun('run1-id');
     run1.pipeline_runtime!.workflow_manifest = JSON.stringify(workflow);
diff --git a/frontend/src/pages/Compare.tsx b/frontend/src/pages/Compare.tsx
index a597f6f6ebb9..b062e5dd2cd9 100644
--- a/frontend/src/pages/Compare.tsx
+++ b/frontend/src/pages/Compare.tsx
@@ -67,7 +67,6 @@ const paramsSectionName = 'Parameters';
 const metricsSectionName = 'Metrics';
 
 class Compare extends Page<{}, CompareState> {
-
   constructor(props: any) {
     super(props);
 
@@ -103,85 +102,107 @@ class Compare extends Page<{}, CompareState> {
     const runIds = queryParamRunIds ? queryParamRunIds.split(',') : [];
 
     const runsPerViewerType = (viewerType: PlotType) => {
-      return viewersMap.get(viewerType) ? viewersMap
-        .get(viewerType)!
-        .filter(el => selectedIds.indexOf(el.runId) > -1) : [];
+      return viewersMap.get(viewerType)
+        ? viewersMap.get(viewerType)!.filter(el => selectedIds.indexOf(el.runId) > -1)
+        : [];
     };
 
-    return (<div className={classes(commonCss.page, padding(20, 'lrt'))}>
-
-      {/* Overview section */}
-      <CollapseButton sectionName={overviewSectionName} collapseSections={collapseSections}
-        compareSetState={this.setStateSafe.bind(this)} />
-      {!collapseSections[overviewSectionName] && (
-        <div className={commonCss.noShrink}>
-          <RunList onError={this.showPageError.bind(this)} {...this.props}
-            selectedIds={selectedIds} runIdListMask={runIds} disablePaging={true}
-            onSelectionChange={this._selectionChanged.bind(this)} />
-        </div>
-      )}
-
-      <Separator orientation='vertical' />
-
-      {/* Parameters section */}
-      <CollapseButton sectionName={paramsSectionName} collapseSections={collapseSections}
-        compareSetState={this.setStateSafe.bind(this)} />
-      {!collapseSections[paramsSectionName] && (
-        <div className={classes(commonCss.noShrink, css.outputsRow)}>
-          <Separator orientation='vertical' />
-          <CompareTable {...this.state.paramsCompareProps} />
-          <Hr />
-        </div>
-      )}
-
-      {/* Metrics section */}
-      <CollapseButton sectionName={metricsSectionName} collapseSections={collapseSections}
-        compareSetState={this.setStateSafe.bind(this)} />
-      {!collapseSections[metricsSectionName] && (
-        <div className={classes(commonCss.noShrink, css.outputsRow)}>
-          <Separator orientation='vertical' />
-          <CompareTable {...this.state.metricsCompareProps} />
-          <Hr />
-        </div>
-      )}
-
-      <Separator orientation='vertical' />
-
-      {Array.from(viewersMap.keys()).map((viewerType, i) =>
-        !!runsPerViewerType(viewerType).length && (
-          <div key={i}>
-            <CollapseButton collapseSections={collapseSections}
-              compareSetState={this.setStateSafe.bind(this)}
-              sectionName={componentMap[viewerType].prototype.getDisplayName()} />
-            {!collapseSections[componentMap[viewerType].prototype.getDisplayName()] && (
-              <React.Fragment>
-                <div className={classes(commonCss.flex, css.outputsRow)}>
-                  {/* If the component allows aggregation, add one more card for
-                its aggregated view. Only do this if there is more than one
-                output, filtering out any unselected runs. */}
-                  {(componentMap[viewerType].prototype.isAggregatable() && (
-                    runsPerViewerType(viewerType).length > 1) && (
-                      <PlotCard configs={
-                        runsPerViewerType(viewerType).map(t => t.config)} maxDimension={400}
-                        title='Aggregated view' />
-                    )
-                  )}
-
-                  {runsPerViewerType(viewerType).map((taggedConfig, c) => (
-                    <PlotCard key={c} configs={[taggedConfig.config]} title={taggedConfig.runName}
-                      maxDimension={400} />
-                  ))}
-                  <Separator />
-
-                </div>
-                <Hr />
-              </React.Fragment>
-            )}
+    return (
+      <div className={classes(commonCss.page, padding(20, 'lrt'))}>
+        {/* Overview section */}
+        <CollapseButton
+          sectionName={overviewSectionName}
+          collapseSections={collapseSections}
+          compareSetState={this.setStateSafe.bind(this)}
+        />
+        {!collapseSections[overviewSectionName] && (
+          <div className={commonCss.noShrink}>
+            <RunList
+              onError={this.showPageError.bind(this)}
+              {...this.props}
+              selectedIds={selectedIds}
+              runIdListMask={runIds}
+              disablePaging={true}
+              onSelectionChange={this._selectionChanged.bind(this)}
+            />
+          </div>
+        )}
+
+        <Separator orientation='vertical' />
+
+        {/* Parameters section */}
+        <CollapseButton
+          sectionName={paramsSectionName}
+          collapseSections={collapseSections}
+          compareSetState={this.setStateSafe.bind(this)}
+        />
+        {!collapseSections[paramsSectionName] && (
+          <div className={classes(commonCss.noShrink, css.outputsRow)}>
             <Separator orientation='vertical' />
+            <CompareTable {...this.state.paramsCompareProps} />
+            <Hr />
           </div>
-        )
-      )}
-    </div>);
+        )}
+
+        {/* Metrics section */}
+        <CollapseButton
+          sectionName={metricsSectionName}
+          collapseSections={collapseSections}
+          compareSetState={this.setStateSafe.bind(this)}
+        />
+        {!collapseSections[metricsSectionName] && (
+          <div className={classes(commonCss.noShrink, css.outputsRow)}>
+            <Separator orientation='vertical' />
+            <CompareTable {...this.state.metricsCompareProps} />
+            <Hr />
+          </div>
+        )}
+
+        <Separator orientation='vertical' />
+
+        {Array.from(viewersMap.keys()).map(
+          (viewerType, i) =>
+            !!runsPerViewerType(viewerType).length && (
+              <div key={i}>
+                <CollapseButton
+                  collapseSections={collapseSections}
+                  compareSetState={this.setStateSafe.bind(this)}
+                  sectionName={componentMap[viewerType].prototype.getDisplayName()}
+                />
+                {!collapseSections[componentMap[viewerType].prototype.getDisplayName()] && (
+                  <React.Fragment>
+                    <div className={classes(commonCss.flex, css.outputsRow)}>
+                      {/* If the component allows aggregation, add one more card for
+                its aggregated view. Only do this if there is more than one
+                output, filtering out any unselected runs. */}
+                      {componentMap[viewerType].prototype.isAggregatable() &&
+                        runsPerViewerType(viewerType).length > 1 && (
+                          <PlotCard
+                            configs={runsPerViewerType(viewerType).map(t => t.config)}
+                            maxDimension={400}
+                            title='Aggregated view'
+                          />
+                        )}
+
+                      {runsPerViewerType(viewerType).map((taggedConfig, c) => (
+                        <PlotCard
+                          key={c}
+                          configs={[taggedConfig.config]}
+                          title={taggedConfig.runName}
+                          maxDimension={400}
+                        />
+                      ))}
+                      <Separator />
+                    </div>
+                    <Hr />
+                  </React.Fragment>
+                )}
+                <Separator orientation='vertical' />
+              </div>
+            ),
+        )}
+      </div>
+    );
   }
 
   public async refresh(): Promise<void> {
@@ -202,21 +223,24 @@ class Compare extends Page<{}, CompareState> {
     const failingRuns: string[] = [];
     let lastError: Error | null = null;
 
-    await Promise.all(runIds.map(async id => {
-      try {
-        const run = await Apis.runServiceApi.getRun(id);
-        runs.push(run);
-        workflowObjects.push(JSON.parse(run.pipeline_runtime!.workflow_manifest || '{}'));
-      } catch (err) {
-        failingRuns.push(id);
-        lastError = err;
-      }
-    }));
+    await Promise.all(
+      runIds.map(async id => {
+        try {
+          const run = await Apis.runServiceApi.getRun(id);
+          runs.push(run);
+          workflowObjects.push(JSON.parse(run.pipeline_runtime!.workflow_manifest || '{}'));
+        } catch (err) {
+          failingRuns.push(id);
+          lastError = err;
+        }
+      }),
+    );
 
     if (lastError) {
       await this.showPageError(`Error: failed loading ${failingRuns.length} runs.`, lastError);
       logger.error(
-        `Failed loading ${failingRuns.length} runs, last failed with the error: ${lastError}`);
+        `Failed loading ${failingRuns.length} runs, last failed with the error: ${lastError}`,
+      );
       return;
     }
 
@@ -229,27 +253,30 @@ class Compare extends Page<{}, CompareState> {
     this._loadParameters(selectedIds);
     this._loadMetrics(selectedIds);
 
-    const outputPathsList = workflowObjects.map(
-      workflow => WorkflowParser.loadAllOutputPaths(workflow));
+    const outputPathsList = workflowObjects.map(workflow =>
+      WorkflowParser.loadAllOutputPaths(workflow),
+    );
 
     // Maps a viewer type (ROC, table.. etc) to a list of all viewer instances
     // of that type, each tagged with its parent run id
     const viewersMap = new Map<PlotType, TaggedViewerConfig[]>();
 
-    await Promise.all(outputPathsList.map(async (pathList, i) => {
-      for (const path of pathList) {
-        const configs = await OutputArtifactLoader.load(path);
-        configs.map(config => {
-          const currentList: TaggedViewerConfig[] = viewersMap.get(config.type) || [];
-          currentList.push({
-            config,
-            runId: runs[i].run!.id!,
-            runName: runs[i].run!.name!,
+    await Promise.all(
+      outputPathsList.map(async (pathList, i) => {
+        for (const path of pathList) {
+          const configs = await OutputArtifactLoader.load(path);
+          configs.map(config => {
+            const currentList: TaggedViewerConfig[] = viewersMap.get(config.type) || [];
+            currentList.push({
+              config,
+              runId: runs[i].run!.id!,
+              runName: runs[i].run!.name!,
+            });
+            viewersMap.set(config.type, currentList);
           });
-          viewersMap.set(config.type, currentList);
-        });
-      }
-    }));
+        }
+      }),
+    );
 
     // For each output artifact type, list all artifact instances in all runs
     this.setStateSafe({ viewersMap });
diff --git a/frontend/src/pages/ExecutionDetails.tsx b/frontend/src/pages/ExecutionDetails.tsx
index 0c1e864cd9b4..a35fb51a7540 100644
--- a/frontend/src/pages/ExecutionDetails.tsx
+++ b/frontend/src/pages/ExecutionDetails.tsx
@@ -25,7 +25,12 @@ import { titleCase, getResourceProperty, serviceErrorToString, logger } from '..
 import { ResourceInfo, ResourceType } from '../components/ResourceInfo';
 import { Execution, ArtifactType } from '../generated/src/apis/metadata/metadata_store_pb';
 import { Apis, ExecutionProperties, ArtifactProperties } from '../lib/Apis';
-import { GetExecutionsByIDRequest, GetEventsByExecutionIDsRequest, GetEventsByExecutionIDsResponse, GetArtifactsByIDRequest } from '../generated/src/apis/metadata/metadata_store_service_pb';
+import {
+  GetExecutionsByIDRequest,
+  GetEventsByExecutionIDsRequest,
+  GetEventsByExecutionIDsResponse,
+  GetArtifactsByIDRequest,
+} from '../generated/src/apis/metadata/metadata_store_service_pb';
 import { EventTypes, getArtifactTypeMap } from '../lib/MetadataUtils';
 import { Event } from '../generated/src/apis/metadata/metadata_store_pb';
 import { Link } from 'react-router-dom';
@@ -39,7 +44,6 @@ interface ExecutionDetailsState {
 }
 
 export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
-
   constructor(props: {}) {
     super(props);
     this.state = {};
@@ -74,11 +78,13 @@ export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
 
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-        {<ResourceInfo
-          resourceType={ResourceType.EXECUTION}
-          typeName={this.properTypeName}
-          resource={this.state.execution}
-        />}
+        {
+          <ResourceInfo
+            resourceType={ResourceType.EXECUTION}
+            typeName={this.properTypeName}
+            resource={this.state.execution}
+          />
+        }
         <SectionIO
           title={'Declared Inputs'}
           artifactIds={this.state.events[Event.Type.DECLARED_INPUT]}
@@ -99,7 +105,7 @@ export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
           artifactIds={this.state.events[Event.Type.OUTPUT]}
           artifactTypeMap={this.state.artifactTypeMap}
         />
-      </div >
+      </div>
     );
   }
 
@@ -107,7 +113,7 @@ export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
     return {
       actions: {},
       breadcrumbs: [{ displayName: 'Executions', href: RoutePage.EXECUTIONS }],
-      pageTitle: `${this.properTypeName} ${this.id} details`
+      pageTitle: `${this.properTypeName} ${this.id} details`,
     };
   }
 
@@ -117,13 +123,15 @@ export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
 
   private async load(): Promise<void> {
     // this runs parallelly because it's not a critical resource
-    getArtifactTypeMap().then((artifactTypeMap) => {
-      this.setState({
-        artifactTypeMap,
+    getArtifactTypeMap()
+      .then(artifactTypeMap => {
+        this.setState({
+          artifactTypeMap,
+        });
+      })
+      .catch(err => {
+        this.showPageError('Failed to fetch artifact types', err);
       });
-    }).catch((err) => {
-      this.showPageError('Failed to fetch artifact types', err);
-    });
 
     const numberId = parseInt(this.id, 10);
     if (isNaN(numberId) || numberId < 0) {
@@ -162,7 +170,7 @@ export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
     const execution = executionResponse.response.getExecutionsList()[0];
     const executionName = getResourceProperty(execution, ExecutionProperties.COMPONENT_ID);
     this.props.updateToolbar({
-      pageTitle: executionName ? executionName.toString() : ''
+      pageTitle: executionName ? executionName.toString() : '',
     });
 
     const events = parseEventsByType(eventResponse.response);
@@ -174,7 +182,9 @@ export default class ExecutionDetails extends Page<{}, ExecutionDetailsState> {
   }
 }
 
-function parseEventsByType(response: GetEventsByExecutionIDsResponse | null): Record<EventTypes, ArtifactIdList> {
+function parseEventsByType(
+  response: GetEventsByExecutionIDsResponse | null,
+): Record<EventTypes, ArtifactIdList> {
   const events: Record<EventTypes, ArtifactIdList> = {
     [Event.Type.UNKNOWN]: [],
     [Event.Type.DECLARED_INPUT]: [],
@@ -210,7 +220,10 @@ interface SectionIOProps {
   artifactIds: number[];
   artifactTypeMap?: Map<number, ArtifactType>;
 }
-class SectionIO extends Component<SectionIOProps, { artifactDataMap: { [id: number]: ArtifactInfo } }> {
+class SectionIO extends Component<
+  SectionIOProps,
+  { artifactDataMap: { [id: number]: ArtifactInfo } }
+> {
   constructor(props: any) {
     super(props);
 
@@ -223,7 +236,9 @@ class SectionIO extends Component<SectionIOProps, { artifactDataMap: { [id: numb
     // loads extra metadata about artifacts
     const request = new GetArtifactsByIDRequest();
     request.setArtifactIdsList(this.props.artifactIds);
-    const { error, response } = await Apis.getMetadataServicePromiseClient().getArtifactsByID(request);
+    const { error, response } = await Apis.getMetadataServicePromiseClient().getArtifactsByID(
+      request,
+    );
     if (error || !response) {
       return;
     }
@@ -254,57 +269,64 @@ class SectionIO extends Component<SectionIOProps, { artifactDataMap: { [id: numb
       return null;
     }
 
-    return <section>
-      <h2 className={commonCss.header2}>{title}</h2>
-      <table>
-        <thead>
-          <tr>
-            <th className={css.tableCell}>Artifact ID</th>
-            <th className={css.tableCell}>Name</th>
-            <th className={css.tableCell}>Type</th>
-            <th className={css.tableCell}>URI</th>
-          </tr>
-        </thead>
-        <tbody>
-          {artifactIds.map(id => {
-            const data = this.state.artifactDataMap[id] || {};
-            const type = (this.props.artifactTypeMap && data.typeId)
-              ? this.props.artifactTypeMap.get(data.typeId)
-              : null;
-            return <ArtifactRow
-              key={id}
-              id={id}
-              name={data.name || ''}
-              type={type ? type.getName() : undefined}
-              uri={data.uri}
-            />;
-          }
-          )}
-        </tbody>
-      </table>
-    </section>;
+    return (
+      <section>
+        <h2 className={commonCss.header2}>{title}</h2>
+        <table>
+          <thead>
+            <tr>
+              <th className={css.tableCell}>Artifact ID</th>
+              <th className={css.tableCell}>Name</th>
+              <th className={css.tableCell}>Type</th>
+              <th className={css.tableCell}>URI</th>
+            </tr>
+          </thead>
+          <tbody>
+            {artifactIds.map(id => {
+              const data = this.state.artifactDataMap[id] || {};
+              const type =
+                this.props.artifactTypeMap && data.typeId
+                  ? this.props.artifactTypeMap.get(data.typeId)
+                  : null;
+              return (
+                <ArtifactRow
+                  key={id}
+                  id={id}
+                  name={data.name || ''}
+                  type={type ? type.getName() : undefined}
+                  uri={data.uri}
+                />
+              );
+            })}
+          </tbody>
+        </table>
+      </section>
+    );
   }
 }
 
 // tslint:disable-next-line:variable-name
-const ArtifactRow: React.FC<{ id: number, name: string, type?: string, uri: string }> =
-  ({ id, name, type, uri }) => (
-    <tr>
-      <td className={css.tableCell}>
-        {type && id ?
-          <Link
-            className={commonCss.link}
-            to={RoutePageFactory.artifactDetails(type, id)}>
-            {id}
-          </Link>
-          : id
-        }
-      </td>
-      <td className={css.tableCell}>{name}</td>
-      <td className={css.tableCell}>{type}</td>
-      <td className={css.tableCell}>{uri}</td>
-    </tr>
-  );
+const ArtifactRow: React.FC<{ id: number; name: string; type?: string; uri: string }> = ({
+  id,
+  name,
+  type,
+  uri,
+}) => (
+  <tr>
+    <td className={css.tableCell}>
+      {type && id ? (
+        <Link className={commonCss.link} to={RoutePageFactory.artifactDetails(type, id)}>
+          {id}
+        </Link>
+      ) : (
+        id
+      )}
+    </td>
+    <td className={css.tableCell}>{name}</td>
+    <td className={css.tableCell}>{type}</td>
+    <td className={css.tableCell}>{uri}</td>
+  </tr>
+);
 
 const css = stylesheet({
   tableCell: {
diff --git a/frontend/src/pages/ExecutionList.tsx b/frontend/src/pages/ExecutionList.tsx
index d076018db45d..02b467b9e7d5 100644
--- a/frontend/src/pages/ExecutionList.tsx
+++ b/frontend/src/pages/ExecutionList.tsx
@@ -15,17 +15,32 @@
  */
 
 import * as React from 'react';
-import CustomTable, { Column, Row, ExpandState, CustomRendererProps } from '../components/CustomTable';
+import CustomTable, {
+  Column,
+  Row,
+  ExpandState,
+  CustomRendererProps,
+} from '../components/CustomTable';
 import { Page } from './Page';
 import { ToolbarProps } from '../components/Toolbar';
 import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
-import { getResourceProperty, rowCompareFn, rowFilterFn, groupRows, getExpandedRow, serviceErrorToString } from '../lib/Utils';
+import {
+  getResourceProperty,
+  rowCompareFn,
+  rowFilterFn,
+  groupRows,
+  getExpandedRow,
+  serviceErrorToString,
+} from '../lib/Utils';
 import { Link } from 'react-router-dom';
 import { RoutePage, RouteParams } from '../components/Router';
 import { Execution, ExecutionType } from '../generated/src/apis/metadata/metadata_store_pb';
 import { ListRequest, ExecutionProperties, ExecutionCustomProperties, Apis } from '../lib/Apis';
-import { GetExecutionsRequest, GetExecutionTypesRequest } from '../generated/src/apis/metadata/metadata_store_service_pb';
+import {
+  GetExecutionsRequest,
+  GetExecutionTypesRequest,
+} from '../generated/src/apis/metadata/metadata_store_service_pb';
 
 interface ExecutionListState {
   executions: Execution[];
@@ -45,7 +60,7 @@ class ExecutionList extends Page<{}, ExecutionListState> {
           customRenderer: this.nameCustomRenderer,
           flex: 2,
           label: 'Pipeline/Workspace',
-          sortKey: 'pipelineName'
+          sortKey: 'pipelineName',
         },
         {
           customRenderer: this.nameCustomRenderer,
@@ -53,7 +68,7 @@ class ExecutionList extends Page<{}, ExecutionListState> {
           label: 'Name',
           sortKey: 'name',
         },
-        { label: 'State', flex: 1, sortKey: 'state', },
+        { label: 'State', flex: 1, sortKey: 'state' },
         { label: 'ID', flex: 1, sortKey: 'id' },
         { label: 'Type', flex: 2, sortKey: 'type' },
       ],
@@ -78,7 +93,8 @@ class ExecutionList extends Page<{}, ExecutionListState> {
     const { rows, columns } = this.state;
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-        <CustomTable ref={this.tableRef}
+        <CustomTable
+          ref={this.tableRef}
           columns={columns}
           rows={rows}
           disablePaging={true}
@@ -88,7 +104,8 @@ class ExecutionList extends Page<{}, ExecutionListState> {
           initialSortOrder='asc'
           getExpandComponent={this.getExpandedExecutionsRow}
           toggleExpansion={this.toggleRowExpand}
-          emptyMessage='No executions found.' />
+          emptyMessage='No executions found.'
+        />
       </div>
     );
   }
@@ -100,35 +117,39 @@ class ExecutionList extends Page<{}, ExecutionListState> {
   }
 
   private async reload(request: ListRequest): Promise<string> {
-    Apis.getMetadataServiceClient().getExecutions(new GetExecutionsRequest(), (err, res) => {
+    const {
+      error: err,
+      response: res,
+    } = await Apis.getMetadataServicePromiseClient().getExecutions(new GetExecutionsRequest());
+
+    if (err) {
       // Code === 5 means no record found in backend. This is a temporary workaround.
       // TODO: remove err.code !== 5 check when backend is fixed.
-      if (err && err.code !== 5) {
+      if (err.code !== 5) {
         this.showPageError(serviceErrorToString(err));
-        return;
       }
+      return '';
+    }
 
-      const executions = (res && res.getExecutionsList()) || [];
-      this.getRowsFromExecutions(request, executions);
-      this.clearBanner();
-    });
+    const executions = (res && res.getExecutionsList()) || [];
+    await this.getRowsFromExecutions(request, executions);
     return '';
   }
 
-  private nameCustomRenderer: React.FC<CustomRendererProps<string>> =
-    (props: CustomRendererProps<string>) => {
-      const [executionType, executionId] = props.id.split(':');
-      const link = RoutePage.EXECUTION_DETAILS
-        .replace(`:${RouteParams.EXECUTION_TYPE}+`, executionType)
-        .replace(`:${RouteParams.ID}`, executionId);
-      return (
-        <Link onClick={(e) => e.stopPropagation()}
-          className={commonCss.link}
-          to={link}>
-          {props.value}
-        </Link>
-      );
-    }
+  private nameCustomRenderer: React.FC<CustomRendererProps<string>> = (
+    props: CustomRendererProps<string>,
+  ) => {
+    const [executionType, executionId] = props.id.split(':');
+    const link = RoutePage.EXECUTION_DETAILS.replace(
+      `:${RouteParams.EXECUTION_TYPE}+`,
+      executionType,
+    ).replace(`:${RouteParams.ID}`, executionId);
+    return (
+      <Link onClick={e => e.stopPropagation()} className={commonCss.link} to={link}>
+        {props.value}
+      </Link>
+    );
+  };
 
   /**
    * Temporary solution to apply sorting, filtering, and pagination to the
@@ -136,47 +157,57 @@ class ExecutionList extends Page<{}, ExecutionListState> {
    * TODO: Replace once https://github.com/kubeflow/metadata/issues/73 is done.
    * @param request
    */
-  private getRowsFromExecutions(request: ListRequest, executions: Execution[]): void {
+  private async getRowsFromExecutions(
+    request: ListRequest,
+    executions: Execution[],
+  ): Promise<void> {
     const executionTypesMap = new Map<number, ExecutionType>();
     // TODO: Consider making an Api method for returning and caching types
-    Apis.getMetadataServiceClient().getExecutionTypes(new GetExecutionTypesRequest(), (err, res) => {
-      if (err) {
-        this.showPageError(serviceErrorToString(err));
-        return;
-      }
+    const {
+      error: err,
+      response: res,
+    } = await Apis.getMetadataServicePromiseClient().getExecutionTypes(
+      new GetExecutionTypesRequest(),
+    );
 
-      (res && res.getExecutionTypesList() || []).forEach((executionType) => {
-        executionTypesMap.set(executionType.getId()!, executionType);
-      });
+    if (err) {
+      this.showPageError(serviceErrorToString(err));
+      return;
+    }
 
-      const collapsedAndExpandedRows =
-        groupRows(executions
-          .map((execution) => { // Flattens
-            const typeId = execution.getTypeId();
-            const type = (typeId && executionTypesMap && executionTypesMap.get(typeId))
+    ((res && res.getExecutionTypesList()) || []).forEach(executionType => {
+      executionTypesMap.set(executionType.getId()!, executionType);
+    });
+
+    const collapsedAndExpandedRows = groupRows(
+      executions
+        .map(execution => {
+          // Flattens
+          const typeId = execution.getTypeId();
+          const type =
+            typeId && executionTypesMap && executionTypesMap.get(typeId)
               ? executionTypesMap.get(typeId)!.getName()
               : typeId;
-            return {
-              id: `${type}:${execution.getId()}`, // Join with colon so we can build the link
-              otherFields: [
-                getResourceProperty(execution, ExecutionProperties.PIPELINE_NAME)
-                || getResourceProperty(execution, ExecutionCustomProperties.WORKSPACE, true),
-                getResourceProperty(execution, ExecutionProperties.COMPONENT_ID),
-                getResourceProperty(execution, ExecutionProperties.STATE),
-                execution.getId(),
-                type,
-              ],
-            };
-          })
-          .filter(rowFilterFn(request))
-          .sort(rowCompareFn(request, this.state.columns))
-        );
-
-      this.setState({
-        executions,
-        expandedRows: collapsedAndExpandedRows.expandedRows,
-        rows: collapsedAndExpandedRows.collapsedRows,
-      });
+          return {
+            id: `${type}:${execution.getId()}`, // Join with colon so we can build the link
+            otherFields: [
+              getResourceProperty(execution, ExecutionProperties.PIPELINE_NAME) ||
+                getResourceProperty(execution, ExecutionCustomProperties.WORKSPACE, true),
+              getResourceProperty(execution, ExecutionProperties.COMPONENT_ID),
+              getResourceProperty(execution, ExecutionProperties.STATE),
+              execution.getId(),
+              type,
+            ],
+          };
+        })
+        .filter(rowFilterFn(request))
+        .sort(rowCompareFn(request, this.state.columns)),
+    );
+
+    this.setState({
+      executions,
+      expandedRows: collapsedAndExpandedRows.expandedRows,
+      rows: collapsedAndExpandedRows.collapsedRows,
     });
   }
 
@@ -189,9 +220,10 @@ class ExecutionList extends Page<{}, ExecutionListState> {
     if (!rows[index]) {
       return;
     }
-    rows[index].expandState = rows[index].expandState === ExpandState.EXPANDED
-      ? ExpandState.COLLAPSED
-      : ExpandState.EXPANDED;
+    rows[index].expandState =
+      rows[index].expandState === ExpandState.EXPANDED
+        ? ExpandState.COLLAPSED
+        : ExpandState.EXPANDED;
     this.setState({ rows });
   }
 
diff --git a/frontend/src/pages/ExperimentDetails.test.tsx b/frontend/src/pages/ExperimentDetails.test.tsx
index 3cb177365d43..b3a152f794e9 100644
--- a/frontend/src/pages/ExperimentDetails.test.tsx
+++ b/frontend/src/pages/ExperimentDetails.test.tsx
@@ -18,7 +18,6 @@ import * as React from 'react';
 import ExperimentDetails from './ExperimentDetails';
 import TestUtils from '../TestUtils';
 import { ApiExperiment } from '../apis/experiment';
-import { ApiResourceType } from '../apis/job';
 import { Apis } from '../lib/Apis';
 import { PageProps } from './Page';
 import { ReactWrapper, ShallowWrapper, shallow } from 'enzyme';
@@ -29,7 +28,6 @@ import { range } from 'lodash';
 import { ButtonKeys } from '../lib/Buttons';
 
 describe('ExperimentDetails', () => {
-
   let tree: ReactWrapper | ShallowWrapper;
 
   const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation(() => null);
@@ -56,13 +54,25 @@ describe('ExperimentDetails', () => {
 
   function generateProps(): PageProps {
     const match = { params: { [RouteParams.experimentId]: MOCK_EXPERIMENT.id } } as any;
-    return TestUtils.generatePageProps(ExperimentDetails, {} as any, match, historyPushSpy,
-      updateBannerSpy, updateDialogSpy, updateToolbarSpy, updateSnackbarSpy);
+    return TestUtils.generatePageProps(
+      ExperimentDetails,
+      {} as any,
+      match,
+      historyPushSpy,
+      updateBannerSpy,
+      updateDialogSpy,
+      updateToolbarSpy,
+      updateSnackbarSpy,
+    );
   }
 
   async function mockNJobs(n: number): Promise<void> {
     listJobsSpy.mockImplementation(() => ({
-      jobs: range(n).map(i => ({ id: 'test-job-id' + i, enabled: true, name: 'test job name' + i })),
+      jobs: range(n).map(i => ({
+        enabled: true,
+        id: 'test-job-id' + i,
+        name: 'test job name' + i,
+      })),
     }));
     await listJobsSpy;
     await TestUtils.flushPromises();
@@ -120,10 +130,12 @@ describe('ExperimentDetails', () => {
 
     tree = shallow(<ExperimentDetails {...props} />);
     await TestUtils.flushPromises();
-    expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      pageTitle: 'test exp ID',
-      pageTitleTooltip: 'test exp ID'
-    }));
+    expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        pageTitle: 'test exp ID',
+        pageTitleTooltip: 'test exp ID',
+      }),
+    );
   });
 
   it('uses the experiment name as the page title', async () => {
@@ -134,10 +146,12 @@ describe('ExperimentDetails', () => {
 
     tree = shallow(<ExperimentDetails {...generateProps()} />);
     await TestUtils.flushPromises();
-    expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      pageTitle: 'A Test Experiment',
-      pageTitleTooltip: 'A Test Experiment'
-    }));
+    expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        pageTitle: 'A Test Experiment',
+        pageTitleTooltip: 'A Test Experiment',
+      }),
+    );
   });
 
   it('uses an empty string if the experiment has no description', async () => {
@@ -163,12 +177,15 @@ describe('ExperimentDetails', () => {
   });
 
   it('opens the expanded description modal when the expand button is clicked', async () => {
-    tree = TestUtils.mountWithRouter(<ExperimentDetails {...generateProps() as any} />);
+    tree = TestUtils.mountWithRouter(<ExperimentDetails {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
 
     tree.update();
 
-    tree.find('#expandExperimentDescriptionBtn').at(0).simulate('click');
+    tree
+      .find('#expandExperimentDescriptionBtn')
+      .at(0)
+      .simulate('click');
     await TestUtils.flushPromises();
     expect(updateDialogSpy).toHaveBeenCalledWith({
       content: MOCK_EXPERIMENT.description,
@@ -191,14 +208,18 @@ describe('ExperimentDetails', () => {
     tree = shallow(<ExperimentDetails {...generateProps()} />);
     await TestUtils.flushPromises();
 
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'test error',
-      message: 'Error: failed to retrieve experiment: ' + MOCK_EXPERIMENT.id
-        + '. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'test error',
+        message:
+          'Error: failed to retrieve experiment: ' +
+          MOCK_EXPERIMENT.id +
+          '. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
     expect(consoleErrorSpy.mock.calls[0][0]).toBe(
-      'Error loading experiment: ' + MOCK_EXPERIMENT.id
+      'Error loading experiment: ' + MOCK_EXPERIMENT.id,
     );
   });
 
@@ -210,7 +231,7 @@ describe('ExperimentDetails', () => {
     expect(tree.find('RunList').prop('storageState')).toBe(RunStorageState.AVAILABLE.toString());
   });
 
-  it('fetches this experiment\'s recurring runs', async () => {
+  it("fetches this experiment's recurring runs", async () => {
     await mockNJobs(1);
 
     tree = shallow(<ExperimentDetails {...generateProps()} />);
@@ -221,27 +242,31 @@ describe('ExperimentDetails', () => {
       undefined,
       100,
       '',
-      ApiResourceType.EXPERIMENT.toString(),
+      'EXPERIMENT',
       MOCK_EXPERIMENT.id,
     );
     expect(tree.state('activeRecurringRunsCount')).toBe(1);
     expect(tree).toMatchSnapshot();
   });
 
-  it('shows an error banner if fetching the experiment\'s recurring runs fails', async () => {
+  it("shows an error banner if fetching the experiment's recurring runs fails", async () => {
     TestUtils.makeErrorResponseOnce(listJobsSpy, 'test error');
 
     tree = shallow(<ExperimentDetails {...generateProps()} />);
     await TestUtils.flushPromises();
 
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'test error',
-      message: 'Error: failed to retrieve recurring runs for experiment: ' + MOCK_EXPERIMENT.id
-        + '. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'test error',
+        message:
+          'Error: failed to retrieve recurring runs for experiment: ' +
+          MOCK_EXPERIMENT.id +
+          '. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
     expect(consoleErrorSpy.mock.calls[0][0]).toBe(
-      'Error fetching recurring runs for experiment: ' + MOCK_EXPERIMENT.id
+      'Error fetching recurring runs for experiment: ' + MOCK_EXPERIMENT.id,
     );
   });
 
@@ -260,38 +285,46 @@ describe('ExperimentDetails', () => {
     expect(tree.state('activeRecurringRunsCount')).toBe(2);
   });
 
-  it('opens the recurring run manager modal when \'manage\' is clicked', async () => {
+  it("opens the recurring run manager modal when 'manage' is clicked", async () => {
     await mockNJobs(1);
-    tree = TestUtils.mountWithRouter(<ExperimentDetails {...generateProps() as any} />);
+    tree = TestUtils.mountWithRouter(<ExperimentDetails {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
 
     tree.update();
 
-    tree.find('#manageExperimentRecurringRunsBtn').at(0).simulate('click');
+    tree
+      .find('#manageExperimentRecurringRunsBtn')
+      .at(0)
+      .simulate('click');
     await TestUtils.flushPromises();
     expect(tree.state('recurringRunsManagerOpen')).toBe(true);
   });
 
   it('closes the recurring run manager modal', async () => {
     await mockNJobs(1);
-    tree = TestUtils.mountWithRouter(<ExperimentDetails {...generateProps() as any} />);
+    tree = TestUtils.mountWithRouter(<ExperimentDetails {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
 
     tree.update();
 
-    tree.find('#manageExperimentRecurringRunsBtn').at(0).simulate('click');
+    tree
+      .find('#manageExperimentRecurringRunsBtn')
+      .at(0)
+      .simulate('click');
     await TestUtils.flushPromises();
     expect(tree.state('recurringRunsManagerOpen')).toBe(true);
 
-    tree.find('#closeExperimentRecurringRunManagerBtn').at(0).simulate('click');
+    tree
+      .find('#closeExperimentRecurringRunManagerBtn')
+      .at(0)
+      .simulate('click');
     await TestUtils.flushPromises();
     expect(tree.state('recurringRunsManagerOpen')).toBe(false);
-
   });
 
   it('refreshes the number of active recurring runs when the recurring run manager is closed', async () => {
     await mockNJobs(1);
-    tree = TestUtils.mountWithRouter(<ExperimentDetails {...generateProps() as any} />);
+    tree = TestUtils.mountWithRouter(<ExperimentDetails {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
 
     tree.update();
@@ -299,20 +332,25 @@ describe('ExperimentDetails', () => {
     // Called when the page initially loads to display the number of active recurring runs
     expect(listJobsSpy).toHaveBeenCalledTimes(1);
 
-    tree.find('#manageExperimentRecurringRunsBtn').at(0).simulate('click');
+    tree
+      .find('#manageExperimentRecurringRunsBtn')
+      .at(0)
+      .simulate('click');
     await TestUtils.flushPromises();
     expect(tree.state('recurringRunsManagerOpen')).toBe(true);
 
     // Called in the recurring run manager to list the recurring runs
     expect(listJobsSpy).toHaveBeenCalledTimes(2);
 
-    tree.find('#closeExperimentRecurringRunManagerBtn').at(0).simulate('click');
+    tree
+      .find('#closeExperimentRecurringRunManagerBtn')
+      .at(0)
+      .simulate('click');
     await TestUtils.flushPromises();
     expect(tree.state('recurringRunsManagerOpen')).toBe(false);
 
     // Called a third time when the manager is closed to update the number of active recurring runs
     expect(listJobsSpy).toHaveBeenCalledTimes(3);
-
   });
 
   it('clears the error banner on refresh', async () => {
@@ -328,14 +366,10 @@ describe('ExperimentDetails', () => {
 
     // Error banner should be cleared
     expect(updateBannerSpy).toHaveBeenLastCalledWith({});
-
   });
 
   it('navigates to the compare runs page', async () => {
-    const runs = [
-      { id: 'run-1-id', name: 'run-1' },
-      { id: 'run-2-id', name: 'run-2' },
-    ];
+    const runs = [{ id: 'run-1-id', name: 'run-1' }, { id: 'run-2-id', name: 'run-2' }];
     listRunsSpy.mockImplementation(() => ({ runs }));
     await listRunsSpy;
 
@@ -343,26 +377,38 @@ describe('ExperimentDetails', () => {
     await TestUtils.flushPromises();
     tree.update();
 
-    tree.find('.tableRow').at(0).simulate('click');
-    tree.find('.tableRow').at(1).simulate('click');
-
-    const compareBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[ButtonKeys.COMPARE];
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(1)
+      .simulate('click');
+
+    const compareBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[
+      ButtonKeys.COMPARE
+    ];
     await compareBtn!.action();
 
     expect(historyPushSpy).toHaveBeenCalledWith(
-      RoutePage.COMPARE + `?${QUERY_PARAMS.runlist}=run-1-id,run-2-id`);
+      RoutePage.COMPARE + `?${QUERY_PARAMS.runlist}=run-1-id,run-2-id`,
+    );
   });
 
-  it('navigates to the new run page and passes this experiment\s ID as a query param', async () => {
+  it('navigates to the new run page and passes this experiments ID as a query param', async () => {
     tree = shallow(<ExperimentDetails {...generateProps()} />);
     await TestUtils.flushPromises();
     tree.update();
 
-    const newRunBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[ButtonKeys.NEW_RUN];
+    const newRunBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[
+      ButtonKeys.NEW_RUN
+    ];
     await newRunBtn!.action();
 
     expect(historyPushSpy).toHaveBeenCalledWith(
-      RoutePage.NEW_RUN + `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`);
+      RoutePage.NEW_RUN + `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`,
+    );
   });
 
   it('navigates to the new run page with query param indicating it will be a recurring run', async () => {
@@ -370,13 +416,16 @@ describe('ExperimentDetails', () => {
     await TestUtils.flushPromises();
     tree.update();
 
-    const newRecurringRunBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[ButtonKeys.NEW_RECURRING_RUN];
+    const newRecurringRunBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[
+      ButtonKeys.NEW_RECURRING_RUN
+    ];
     await newRecurringRunBtn!.action();
 
     expect(historyPushSpy).toHaveBeenCalledWith(
-      RoutePage.NEW_RUN
-      + `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-      + `&${QUERY_PARAMS.isRecurring}=1`);
+      RoutePage.NEW_RUN +
+        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.isRecurring}=1`,
+    );
   });
 
   it('supports cloning a selected run', async () => {
@@ -391,11 +440,14 @@ describe('ExperimentDetails', () => {
     // Select the run to clone
     tree.find('.tableRow').simulate('click');
 
-    const cloneBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[ButtonKeys.CLONE_RUN];
+    const cloneBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[
+      ButtonKeys.CLONE_RUN
+    ];
     await cloneBtn!.action();
 
     expect(historyPushSpy).toHaveBeenCalledWith(
-      RoutePage.NEW_RUN + `?${QUERY_PARAMS.cloneFromRun}=run-1-id`);
+      RoutePage.NEW_RUN + `?${QUERY_PARAMS.cloneFromRun}=run-1-id`,
+    );
   });
 
   it('enables the compare runs button only when between 2 and 10 runs are selected', async () => {
@@ -405,7 +457,9 @@ describe('ExperimentDetails', () => {
     await TestUtils.flushPromises();
     tree.update();
 
-    const compareBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[ButtonKeys.COMPARE];
+    const compareBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[
+      ButtonKeys.COMPARE
+    ];
 
     for (let i = 0; i < 12; i++) {
       if (i < 2 || i > 10) {
@@ -413,7 +467,10 @@ describe('ExperimentDetails', () => {
       } else {
         expect(compareBtn!.disabled).toBe(false);
       }
-      tree.find('.tableRow').at(i).simulate('click');
+      tree
+        .find('.tableRow')
+        .at(i)
+        .simulate('click');
     }
   });
 
@@ -424,7 +481,9 @@ describe('ExperimentDetails', () => {
     await TestUtils.flushPromises();
     tree.update();
 
-    const cloneBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[ButtonKeys.CLONE_RUN];
+    const cloneBtn = (tree.state('runListToolbarProps') as ToolbarProps).actions[
+      ButtonKeys.CLONE_RUN
+    ];
 
     for (let i = 0; i < 4; i++) {
       if (i === 1) {
@@ -432,7 +491,10 @@ describe('ExperimentDetails', () => {
       } else {
         expect(cloneBtn!.disabled).toBe(true);
       }
-      tree.find('.tableRow').at(i).simulate('click');
+      tree
+        .find('.tableRow')
+        .at(i)
+        .simulate('click');
     }
   });
 });
diff --git a/frontend/src/pages/ExperimentDetails.tsx b/frontend/src/pages/ExperimentDetails.tsx
index 7d8f3a756874..1112b1040cc5 100644
--- a/frontend/src/pages/ExperimentDetails.tsx
+++ b/frontend/src/pages/ExperimentDetails.tsx
@@ -27,7 +27,6 @@ import RunList from '../pages/RunList';
 import Toolbar, { ToolbarProps } from '../components/Toolbar';
 import Tooltip from '@material-ui/core/Tooltip';
 import { ApiExperiment } from '../apis/experiment';
-import { ApiResourceType } from '../apis/job';
 import { Apis } from '../lib/Apis';
 import { Page } from './Page';
 import { RoutePage, RouteParams } from '../components/Router';
@@ -108,7 +107,6 @@ interface ExperimentDetailsState {
 }
 
 class ExperimentDetails extends Page<{}, ExperimentDetailsState> {
-
   private _runlistRef = React.createRef<RunList>();
 
   constructor(props: any) {
@@ -125,11 +123,7 @@ class ExperimentDetails extends Page<{}, ExperimentDetailsState> {
           .newRecurringRun(this.props.match.params[RouteParams.experimentId])
           .compareRuns(() => this.state.selectedIds)
           .cloneRun(() => this.state.selectedIds, false)
-          .archive(
-            () => this.state.selectedIds,
-            false,
-            ids => this._selectionChanged(ids),
-          )
+          .archive(() => this.state.selectedIds, false, ids => this._selectionChanged(ids))
           .getToolbarActionMap(),
         breadcrumbs: [],
         pageTitle: 'Runs',
@@ -153,64 +147,107 @@ class ExperimentDetails extends Page<{}, ExperimentDetailsState> {
 
   public render(): JSX.Element {
     const { activeRecurringRunsCount, experiment } = this.state;
-    const description = experiment ? (experiment.description || '') : '';
+    const description = experiment ? experiment.description || '' : '';
 
     return (
       <div className={classes(commonCss.page, padding(20, 'lrt'))}>
-
         {experiment && (
           <div className={commonCss.page}>
             <div className={css.cardRow}>
-              <Paper id='recurringRunsCard' className={classes(
-                css.card,
-                css.recurringRunsCard,
-                !!activeRecurringRunsCount && css.cardActive
-              )} elevation={0}>
+              <Paper
+                id='recurringRunsCard'
+                className={classes(
+                  css.card,
+                  css.recurringRunsCard,
+                  !!activeRecurringRunsCount && css.cardActive,
+                )}
+                elevation={0}
+              >
                 <div>
                   <div className={css.cardTitle}>Recurring run configs</div>
-                  <div className={classes(css.cardContent, !!activeRecurringRunsCount && css.recurringRunsActive)}>
+                  <div
+                    className={classes(
+                      css.cardContent,
+                      !!activeRecurringRunsCount && css.recurringRunsActive,
+                    )}
+                  >
                     {activeRecurringRunsCount + ' active'}
                   </div>
-                  <Button className={css.cardBtn} id='manageExperimentRecurringRunsBtn' disableRipple={true}
-                    onClick={() => this.setState({ recurringRunsManagerOpen: true })}>
+                  <Button
+                    className={css.cardBtn}
+                    id='manageExperimentRecurringRunsBtn'
+                    disableRipple={true}
+                    onClick={() => this.setState({ recurringRunsManagerOpen: true })}
+                  >
                     Manage
                   </Button>
                 </div>
               </Paper>
-              <Paper id='experimentDescriptionCard' className={classes(css.card, css.runStatsCard)} elevation={0}>
+              <Paper
+                id='experimentDescriptionCard'
+                className={classes(css.card, css.runStatsCard)}
+                elevation={0}
+              >
                 <div className={css.cardTitle}>
                   <span>Experiment description</span>
-                  <Button id='expandExperimentDescriptionBtn' onClick={() => this.props.updateDialog({ title: 'Experiment description', content: description })}
-                    className={classes(css.popOutIcon, 'popOutButton')}>
+                  <Button
+                    id='expandExperimentDescriptionBtn'
+                    onClick={() =>
+                      this.props.updateDialog({
+                        content: description,
+                        title: 'Experiment description',
+                      })
+                    }
+                    className={classes(css.popOutIcon, 'popOutButton')}
+                  >
                     <Tooltip title='Read more'>
                       <PopOutIcon style={{ fontSize: 18 }} />
                     </Tooltip>
                   </Button>
                 </div>
-                {description.split('\n').slice(0, 2).map((line, i) =>
-                  <div key={i} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                    {line}
-                  </div>)
-                }
+                {description
+                  .split('\n')
+                  .slice(0, 2)
+                  .map((line, i) => (
+                    <div
+                      key={i}
+                      style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                    >
+                      {line}
+                    </div>
+                  ))}
                 {description.split('\n').length > 2 ? '...' : ''}
               </Paper>
             </div>
             <Toolbar {...this.state.runListToolbarProps} />
-            <RunList onError={this.showPageError.bind(this)}
-              hideExperimentColumn={true} experimentIdMask={experiment.id} ref={this._runlistRef}
-              selectedIds={this.state.selectedIds} storageState={RunStorageState.AVAILABLE}
-              onSelectionChange={this._selectionChanged.bind(this)} {...this.props} />
+            <RunList
+              onError={this.showPageError.bind(this)}
+              hideExperimentColumn={true}
+              experimentIdMask={experiment.id}
+              ref={this._runlistRef}
+              selectedIds={this.state.selectedIds}
+              storageState={RunStorageState.AVAILABLE}
+              onSelectionChange={this._selectionChanged.bind(this)}
+              {...this.props}
+            />
 
-            <Dialog open={this.state.recurringRunsManagerOpen} classes={{ paper: css.recurringRunsDialog }}
-              onClose={this._recurringRunsManagerClosed.bind(this)}>
+            <Dialog
+              open={this.state.recurringRunsManagerOpen}
+              classes={{ paper: css.recurringRunsDialog }}
+              onClose={this._recurringRunsManagerClosed.bind(this)}
+            >
               <DialogContent>
-                <RecurringRunsManager {...this.props}
-                  experimentId={this.props.match.params[RouteParams.experimentId]} />
+                <RecurringRunsManager
+                  {...this.props}
+                  experimentId={this.props.match.params[RouteParams.experimentId]}
+                />
               </DialogContent>
               <DialogActions>
-                <Button id='closeExperimentRecurringRunManagerBtn'
+                <Button
+                  id='closeExperimentRecurringRunManagerBtn'
                   onClick={this._recurringRunsManagerClosed.bind(this)}
-                  color='secondary'>
+                  color='secondary'
+                >
                   Close
                 </Button>
               </DialogActions>
@@ -258,20 +295,20 @@ class ExperimentDetails extends Page<{}, ExperimentDetailsState> {
           undefined,
           100,
           '',
-          ApiResourceType.EXPERIMENT.toString(),
+          'EXPERIMENT',
           experimentId,
         );
-        activeRecurringRunsCount =
-          (recurringRuns.jobs || []).filter(j => j.enabled === true).length;
-
+        activeRecurringRunsCount = (recurringRuns.jobs || []).filter(j => j.enabled === true)
+          .length;
       } catch (err) {
         await this.showPageError(
-          `Error: failed to retrieve recurring runs for experiment: ${experimentId}.`, err);
+          `Error: failed to retrieve recurring runs for experiment: ${experimentId}.`,
+          err,
+        );
         logger.error(`Error fetching recurring runs for experiment: ${experimentId}`, err);
       }
 
       this.setStateSafe({ activeRecurringRunsCount, experiment });
-
     } catch (err) {
       await this.showPageError(`Error: failed to retrieve experiment: ${experimentId}.`, err);
       logger.error(`Error loading experiment: ${experimentId}`, err);
@@ -280,7 +317,8 @@ class ExperimentDetails extends Page<{}, ExperimentDetailsState> {
 
   private _selectionChanged(selectedIds: string[]): void {
     const toolbarActions = this.state.runListToolbarProps.actions;
-    toolbarActions[ButtonKeys.COMPARE].disabled = selectedIds.length <= 1 || selectedIds.length > 10;
+    toolbarActions[ButtonKeys.COMPARE].disabled =
+      selectedIds.length <= 1 || selectedIds.length > 10;
     toolbarActions[ButtonKeys.CLONE_RUN].disabled = selectedIds.length !== 1;
     toolbarActions[ButtonKeys.ARCHIVE].disabled = !selectedIds.length;
     this.setState({
diff --git a/frontend/src/pages/ExperimentList.test.tsx b/frontend/src/pages/ExperimentList.test.tsx
index 616144773015..78a86efa69ef 100644
--- a/frontend/src/pages/ExperimentList.test.tsx
+++ b/frontend/src/pages/ExperimentList.test.tsx
@@ -19,7 +19,7 @@ import * as Utils from '../lib/Utils';
 import ExperimentList from './ExperimentList';
 import TestUtils from '../TestUtils';
 import { ApiFilter, PredicateOp } from '../apis/filter';
-import { ApiResourceType, RunStorageState } from '../apis/run';
+import { RunStorageState } from '../apis/run';
 import { Apis } from '../lib/Apis';
 import { ExpandState } from '../components/CustomTable';
 import { NodePhase } from '../lib/StatusUtils';
@@ -46,13 +46,24 @@ describe('ExperimentList', () => {
   jest.spyOn(Utils, 'formatDateString').mockImplementation(() => '1/2/2019, 12:34:56 PM');
 
   function generateProps(): PageProps {
-    return TestUtils.generatePageProps(ExperimentList, { pathname: RoutePage.EXPERIMENTS } as any,
-      '' as any, historyPushSpy, updateBannerSpy, updateDialogSpy, updateToolbarSpy, updateSnackbarSpy);
+    return TestUtils.generatePageProps(
+      ExperimentList,
+      { pathname: RoutePage.EXPERIMENTS } as any,
+      '' as any,
+      historyPushSpy,
+      updateBannerSpy,
+      updateDialogSpy,
+      updateToolbarSpy,
+      updateSnackbarSpy,
+    );
   }
 
   async function mountWithNExperiments(n: number, nRuns: number): Promise<void> {
     listExperimentsSpy.mockImplementation(() => ({
-      experiments: range(n).map(i => ({ id: 'test-experiment-id' + i, name: 'test experiment name' + i })),
+      experiments: range(n).map(i => ({
+        id: 'test-experiment-id' + i,
+        name: 'test experiment name' + i,
+      })),
     }));
     listRunsSpy.mockImplementation(() => ({
       runs: range(nRuns).map(i => ({ id: 'test-run-id' + i, name: 'test run name' + i })),
@@ -78,11 +89,13 @@ describe('ExperimentList', () => {
   it('renders a list of one experiment', async () => {
     tree = shallow(<ExperimentList {...generateProps()} />);
     tree.setState({
-      displayExperiments: [{
-        description: 'test experiment description',
-        expandState: ExpandState.COLLAPSED,
-        name: 'test experiment name',
-      }]
+      displayExperiments: [
+        {
+          description: 'test experiment description',
+          expandState: ExpandState.COLLAPSED,
+          name: 'test experiment name',
+        },
+      ],
     });
     await listExperimentsSpy;
     await listRunsSpy;
@@ -92,10 +105,12 @@ describe('ExperimentList', () => {
   it('renders a list of one experiment with no description', async () => {
     tree = shallow(<ExperimentList {...generateProps()} />);
     tree.setState({
-      experiments: [{
-        expandState: ExpandState.COLLAPSED,
-        name: 'test experiment name',
-      }]
+      experiments: [
+        {
+          expandState: ExpandState.COLLAPSED,
+          name: 'test experiment name',
+        },
+      ],
     });
     await listExperimentsSpy;
     await listRunsSpy;
@@ -105,12 +120,14 @@ describe('ExperimentList', () => {
   it('renders a list of one experiment with error', async () => {
     tree = shallow(<ExperimentList {...generateProps()} />);
     tree.setState({
-      experiments: [{
-        description: 'test experiment description',
-        error: 'oops! could not load experiment',
-        expandState: ExpandState.COLLAPSED,
-        name: 'test experiment name',
-      }]
+      experiments: [
+        {
+          description: 'test experiment description',
+          error: 'oops! could not load experiment',
+          expandState: ExpandState.COLLAPSED,
+          name: 'test experiment name',
+        },
+      ],
     });
     await listExperimentsSpy;
     await listRunsSpy;
@@ -124,22 +141,28 @@ describe('ExperimentList', () => {
       undefined,
       5,
       'created_at desc',
-      ApiResourceType.EXPERIMENT.toString(),
+      'EXPERIMENT',
       'test-experiment-id0',
-      encodeURIComponent(JSON.stringify({
-        predicates: [{
-          key: 'storage_state',
-          op: PredicateOp.NOTEQUALS,
-          string_value: RunStorageState.ARCHIVED.toString(),
-        }],
-      } as ApiFilter)),
+      encodeURIComponent(
+        JSON.stringify({
+          predicates: [
+            {
+              key: 'storage_state',
+              op: PredicateOp.NOTEQUALS,
+              string_value: RunStorageState.ARCHIVED.toString(),
+            },
+          ],
+        } as ApiFilter),
+      ),
     );
-    expect(tree.state()).toHaveProperty('displayExperiments', [{
-      expandState: ExpandState.COLLAPSED,
-      id: 'test-experiment-id0',
-      last5Runs: [{ id: 'test-run-id0', name: 'test run name0' }],
-      name: 'test experiment name0',
-    }]);
+    expect(tree.state()).toHaveProperty('displayExperiments', [
+      {
+        expandState: ExpandState.COLLAPSED,
+        id: 'test-experiment-id0',
+        last5Runs: [{ id: 'test-run-id0', name: 'test run name0' }],
+        name: 'test experiment name0',
+      },
+    ]);
   });
 
   it('has a Refresh button, clicking it refreshes the experiment list', async () => {
@@ -159,11 +182,14 @@ describe('ExperimentList', () => {
     tree = TestUtils.mountWithRouter(<ExperimentList {...generateProps()} />);
     await listExperimentsSpy;
     await TestUtils.flushPromises();
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'bad stuff happened',
-      message: 'Error: failed to retrieve list of experiments. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'bad stuff happened',
+        message:
+          'Error: failed to retrieve list of experiments. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows error next to experiment when listing its last 5 runs fails', async () => {
@@ -175,11 +201,13 @@ describe('ExperimentList', () => {
     tree = TestUtils.mountWithRouter(<ExperimentList {...generateProps()} />);
     await listExperimentsSpy;
     await TestUtils.flushPromises();
-    expect(tree.state()).toHaveProperty('displayExperiments', [{
-      error: 'Failed to load the last 5 runs of this experiment',
-      expandState: 0,
-      name: 'exp1',
-    }]);
+    expect(tree.state()).toHaveProperty('displayExperiments', [
+      {
+        error: 'Failed to load the last 5 runs of this experiment',
+        expandState: 0,
+        name: 'exp1',
+      },
+    ]);
   });
 
   it('shows error banner when listing experiments fails after refresh', async () => {
@@ -191,11 +219,14 @@ describe('ExperimentList', () => {
     await refreshBtn!.action();
     expect(listExperimentsSpy.mock.calls.length).toBe(2);
     expect(listExperimentsSpy).toHaveBeenLastCalledWith('', 10, 'created_at desc', '');
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'bad stuff happened',
-      message: 'Error: failed to retrieve list of experiments. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'bad stuff happened',
+        message:
+          'Error: failed to retrieve list of experiments. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('hides error banner when listing experiments fails then succeeds', async () => {
@@ -204,11 +235,14 @@ describe('ExperimentList', () => {
     const instance = tree.instance() as ExperimentList;
     await listExperimentsSpy;
     await TestUtils.flushPromises();
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'bad stuff happened',
-      message: 'Error: failed to retrieve list of experiments. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'bad stuff happened',
+        message:
+          'Error: failed to retrieve list of experiments. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
     updateBannerSpy.mockReset();
 
     const refreshBtn = instance.getInitialToolbarState().actions[ButtonKeys.REFRESH];
@@ -221,26 +255,34 @@ describe('ExperimentList', () => {
 
   it('can expand an experiment to see its runs', async () => {
     await mountWithNExperiments(1, 1);
-    tree.find('.tableRow button').at(0).simulate('click');
-    expect(tree.state()).toHaveProperty('displayExperiments', [{
-      expandState: ExpandState.EXPANDED,
-      id: 'test-experiment-id0',
-      last5Runs: [{ id: 'test-run-id0', name: 'test run name0' }],
-      name: 'test experiment name0',
-    }]);
+    tree
+      .find('.tableRow button')
+      .at(0)
+      .simulate('click');
+    expect(tree.state()).toHaveProperty('displayExperiments', [
+      {
+        expandState: ExpandState.EXPANDED,
+        id: 'test-experiment-id0',
+        last5Runs: [{ id: 'test-run-id0', name: 'test run name0' }],
+        name: 'test experiment name0',
+      },
+    ]);
   });
 
   it('renders a list of runs for given experiment', async () => {
     tree = shallow(<ExperimentList {...generateProps()} />);
-    tree.setState({ displayExperiments: [{ id: 'experiment1', last5Runs: [{ id: 'run1id' }, { id: 'run2id' }] }] });
+    tree.setState({
+      displayExperiments: [{ id: 'experiment1', last5Runs: [{ id: 'run1id' }, { id: 'run2id' }] }],
+    });
     const runListTree = (tree.instance() as any)._getExpandedExperimentComponent(0);
     expect(runListTree.props.experimentIdMask).toEqual('experiment1');
   });
 
   it('navigates to new experiment page when Create experiment button is clicked', async () => {
     tree = TestUtils.mountWithRouter(<ExperimentList {...generateProps()} />);
-    const createBtn = (tree.instance() as ExperimentList)
-      .getInitialToolbarState().actions[ButtonKeys.NEW_EXPERIMENT];
+    const createBtn = (tree.instance() as ExperimentList).getInitialToolbarState().actions[
+      ButtonKeys.NEW_EXPERIMENT
+    ];
     await createBtn!.action();
     expect(historyPushSpy).toHaveBeenLastCalledWith(RoutePage.NEW_EXPERIMENT);
   });
@@ -255,20 +297,28 @@ describe('ExperimentList', () => {
     await mountWithNExperiments(1, 1);
     (tree.instance() as any)._selectionChanged(['run1']);
     expect(updateToolbarSpy).toHaveBeenCalledTimes(2);
-    expect(updateToolbarSpy.mock.calls[0][0].actions[ButtonKeys.CLONE_RUN])
-      .toHaveProperty('disabled', true);
-    expect(updateToolbarSpy.mock.calls[1][0].actions[ButtonKeys.CLONE_RUN])
-      .toHaveProperty('disabled', false);
+    expect(updateToolbarSpy.mock.calls[0][0].actions[ButtonKeys.CLONE_RUN]).toHaveProperty(
+      'disabled',
+      true,
+    );
+    expect(updateToolbarSpy.mock.calls[1][0].actions[ButtonKeys.CLONE_RUN]).toHaveProperty(
+      'disabled',
+      false,
+    );
   });
 
   it('disables clone button when more than one run is selected', async () => {
     await mountWithNExperiments(1, 1);
     (tree.instance() as any)._selectionChanged(['run1', 'run2']);
     expect(updateToolbarSpy).toHaveBeenCalledTimes(2);
-    expect(updateToolbarSpy.mock.calls[0][0].actions[ButtonKeys.CLONE_RUN])
-      .toHaveProperty('disabled', true);
-    expect(updateToolbarSpy.mock.calls[1][0].actions[ButtonKeys.CLONE_RUN])
-      .toHaveProperty('disabled', true);
+    expect(updateToolbarSpy.mock.calls[0][0].actions[ButtonKeys.CLONE_RUN]).toHaveProperty(
+      'disabled',
+      true,
+    );
+    expect(updateToolbarSpy.mock.calls[1][0].actions[ButtonKeys.CLONE_RUN]).toHaveProperty(
+      'disabled',
+      true,
+    );
   });
 
   it('enables compare runs button only when more than one is selected', async () => {
@@ -277,32 +327,42 @@ describe('ExperimentList', () => {
     (tree.instance() as any)._selectionChanged(['run1', 'run2']);
     (tree.instance() as any)._selectionChanged(['run1', 'run2', 'run3']);
     expect(updateToolbarSpy).toHaveBeenCalledTimes(4);
-    expect(updateToolbarSpy.mock.calls[0][0].actions[ButtonKeys.COMPARE])
-      .toHaveProperty('disabled', true);
-    expect(updateToolbarSpy.mock.calls[1][0].actions[ButtonKeys.COMPARE])
-      .toHaveProperty('disabled', false);
-    expect(updateToolbarSpy.mock.calls[2][0].actions[ButtonKeys.COMPARE])
-      .toHaveProperty('disabled', false);
+    expect(updateToolbarSpy.mock.calls[0][0].actions[ButtonKeys.COMPARE]).toHaveProperty(
+      'disabled',
+      true,
+    );
+    expect(updateToolbarSpy.mock.calls[1][0].actions[ButtonKeys.COMPARE]).toHaveProperty(
+      'disabled',
+      false,
+    );
+    expect(updateToolbarSpy.mock.calls[2][0].actions[ButtonKeys.COMPARE]).toHaveProperty(
+      'disabled',
+      false,
+    );
   });
 
   it('navigates to compare page with the selected run ids', async () => {
     await mountWithNExperiments(1, 1);
     (tree.instance() as any)._selectionChanged(['run1', 'run2', 'run3']);
-    const compareBtn = (tree.instance() as ExperimentList)
-      .getInitialToolbarState().actions[ButtonKeys.COMPARE];
+    const compareBtn = (tree.instance() as ExperimentList).getInitialToolbarState().actions[
+      ButtonKeys.COMPARE
+    ];
     await compareBtn!.action();
     expect(historyPushSpy).toHaveBeenLastCalledWith(
-      `${RoutePage.COMPARE}?${QUERY_PARAMS.runlist}=run1,run2,run3`);
+      `${RoutePage.COMPARE}?${QUERY_PARAMS.runlist}=run1,run2,run3`,
+    );
   });
 
   it('navigates to new run page with the selected run id for cloning', async () => {
     await mountWithNExperiments(1, 1);
     (tree.instance() as any)._selectionChanged(['run1']);
-    const cloneBtn = (tree.instance() as ExperimentList)
-      .getInitialToolbarState().actions[ButtonKeys.CLONE_RUN];
+    const cloneBtn = (tree.instance() as ExperimentList).getInitialToolbarState().actions[
+      ButtonKeys.CLONE_RUN
+    ];
     await cloneBtn!.action();
     expect(historyPushSpy).toHaveBeenLastCalledWith(
-      `${RoutePage.NEW_RUN}?${QUERY_PARAMS.cloneFromRun}=run1`);
+      `${RoutePage.NEW_RUN}?${QUERY_PARAMS.cloneFromRun}=run1`,
+    );
   });
 
   it('enables archive button when at least one run is selected', async () => {
@@ -318,23 +378,27 @@ describe('ExperimentList', () => {
 
   it('renders experiment names as links to their details pages', async () => {
     tree = TestUtils.mountWithRouter(<ExperimentList {...generateProps()} />);
-    expect((tree.instance() as ExperimentList)._nameCustomRenderer({
-      id: 'experiment-id',
-      value: 'experiment name',
-    })).toMatchSnapshot();
+    expect(
+      (tree.instance() as ExperimentList)._nameCustomRenderer({
+        id: 'experiment-id',
+        value: 'experiment name',
+      }),
+    ).toMatchSnapshot();
   });
 
   it('renders last 5 runs statuses', async () => {
     tree = TestUtils.mountWithRouter(<ExperimentList {...generateProps()} />);
-    expect((tree.instance() as ExperimentList)._last5RunsCustomRenderer({
-      id: 'experiment-id',
-      value: [
-        { status: NodePhase.SUCCEEDED },
-        { status: NodePhase.PENDING },
-        { status: NodePhase.FAILED },
-        { status: NodePhase.UNKNOWN },
-        { status: NodePhase.SUCCEEDED },
-      ],
-    })).toMatchSnapshot();
+    expect(
+      (tree.instance() as ExperimentList)._last5RunsCustomRenderer({
+        id: 'experiment-id',
+        value: [
+          { status: NodePhase.SUCCEEDED },
+          { status: NodePhase.PENDING },
+          { status: NodePhase.FAILED },
+          { status: NodePhase.UNKNOWN },
+          { status: NodePhase.SUCCEEDED },
+        ],
+      }),
+    ).toMatchSnapshot();
   });
 });
diff --git a/frontend/src/pages/ExperimentList.tsx b/frontend/src/pages/ExperimentList.tsx
index 3fb5900763de..d3a62f590e24 100644
--- a/frontend/src/pages/ExperimentList.tsx
+++ b/frontend/src/pages/ExperimentList.tsx
@@ -16,12 +16,17 @@
 
 import * as React from 'react';
 import Buttons, { ButtonKeys } from '../lib/Buttons';
-import CustomTable, { Column, Row, ExpandState, CustomRendererProps } from '../components/CustomTable';
+import CustomTable, {
+  Column,
+  Row,
+  ExpandState,
+  CustomRendererProps,
+} from '../components/CustomTable';
 import RunList from './RunList';
 import produce from 'immer';
 import { ApiFilter, PredicateOp } from '../apis/filter';
 import { ApiListExperimentsResponse, ApiExperiment } from '../apis/experiment';
-import { ApiResourceType, ApiRun, RunStorageState } from '../apis/run';
+import { ApiRun, RunStorageState } from '../apis/run';
 import { Apis, ExperimentSortKeys, ListRequest, RunSortKeys } from '../lib/Apis';
 import { Link } from 'react-router-dom';
 import { NodePhase } from '../lib/StatusUtils';
@@ -66,11 +71,7 @@ class ExperimentList extends Page<{}, ExperimentListState> {
         .newExperiment()
         .compareRuns(() => this.state.selectedIds)
         .cloneRun(() => this.state.selectedIds, false)
-        .archive(
-          () => this.state.selectedIds,
-          false,
-          ids => this._selectionChanged(ids),
-        )
+        .archive(() => this.state.selectedIds, false, ids => this._selectionChanged(ids))
         .refresh(this.refresh.bind(this))
         .getToolbarActionMap(),
       breadcrumbs: [],
@@ -79,21 +80,25 @@ class ExperimentList extends Page<{}, ExperimentListState> {
   }
 
   public render(): JSX.Element {
-    const columns: Column[] = [{
-      customRenderer: this._nameCustomRenderer,
-      flex: 1,
-      label: 'Experiment name',
-      sortKey: ExperimentSortKeys.NAME,
-    }, {
-      flex: 2,
-      label: 'Description',
-    }, {
-      customRenderer: this._last5RunsCustomRenderer,
-      flex: 1,
-      label: 'Last 5 runs',
-    }];
-
-    const rows: Row[] = this.state.displayExperiments.map((exp) => {
+    const columns: Column[] = [
+      {
+        customRenderer: this._nameCustomRenderer,
+        flex: 1,
+        label: 'Experiment name',
+        sortKey: ExperimentSortKeys.NAME,
+      },
+      {
+        flex: 2,
+        label: 'Description',
+      },
+      {
+        customRenderer: this._last5RunsCustomRenderer,
+        flex: 1,
+        label: 'Last 5 runs',
+      },
+    ];
+
+    const rows: Row[] = this.state.displayExperiments.map(exp => {
       return {
         error: exp.error,
         expandState: exp.expandState,
@@ -102,18 +107,24 @@ class ExperimentList extends Page<{}, ExperimentListState> {
           exp.name!,
           exp.description!,
           exp.expandState === ExpandState.EXPANDED ? [] : exp.last5Runs,
-        ]
+        ],
       };
     });
 
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-        <CustomTable columns={columns} rows={rows} ref={this._tableRef}
-          disableSelection={true} initialSortColumn={ExperimentSortKeys.CREATED_AT}
-          reload={this._reload.bind(this)} toggleExpansion={this._toggleRowExpand.bind(this)}
+        <CustomTable
+          columns={columns}
+          rows={rows}
+          ref={this._tableRef}
+          disableSelection={true}
+          initialSortColumn={ExperimentSortKeys.CREATED_AT}
+          reload={this._reload.bind(this)}
+          toggleExpansion={this._toggleRowExpand.bind(this)}
           getExpandComponent={this._getExpandedExperimentComponent.bind(this)}
           filterLabel='Filter experiments'
-          emptyMessage='No experiments found. Click "Create experiment" to start.' />
+          emptyMessage='No experiments found. Click "Create experiment" to start.'
+        />
       </div>
     );
   }
@@ -125,20 +136,33 @@ class ExperimentList extends Page<{}, ExperimentListState> {
     }
   }
 
-  public _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (props: CustomRendererProps<string>) => {
-    return <Link className={commonCss.link} onClick={(e) => e.stopPropagation()}
-      to={RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, props.id)}>{props.value}</Link>;
-  }
+  public _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (
+    props: CustomRendererProps<string>,
+  ) => {
+    return (
+      <Link
+        className={commonCss.link}
+        onClick={e => e.stopPropagation()}
+        to={RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, props.id)}
+      >
+        {props.value}
+      </Link>
+    );
+  };
 
-  public _last5RunsCustomRenderer: React.FC<CustomRendererProps<ApiRun[]>> = (props: CustomRendererProps<ApiRun[]>) => {
-    return <div className={commonCss.flex}>
-      {(props.value || []).map((run, i) => (
-        <span key={i} style={{ margin: '0 1px' }}>
-          {statusToIcon(run.status as NodePhase || NodePhase.UNKNOWN, run.created_at)}
-        </span>
-      ))}
-    </div>;
-  }
+  public _last5RunsCustomRenderer: React.FC<CustomRendererProps<ApiRun[]>> = (
+    props: CustomRendererProps<ApiRun[]>,
+  ) => {
+    return (
+      <div className={commonCss.flex}>
+        {(props.value || []).map((run, i) => (
+          <span key={i} style={{ margin: '0 1px' }}>
+            {statusToIcon((run.status as NodePhase) || NodePhase.UNKNOWN, run.created_at)}
+          </span>
+        ))}
+      </div>
+    );
+  };
 
   private async _reload(request: ListRequest): Promise<string> {
     // Fetch the list of experiments
@@ -146,9 +170,13 @@ class ExperimentList extends Page<{}, ExperimentListState> {
     let displayExperiments: DisplayExperiment[];
     try {
       response = await Apis.experimentServiceApi.listExperiment(
-        request.pageToken, request.pageSize, request.sortBy, request.filter);
+        request.pageToken,
+        request.pageSize,
+        request.sortBy,
+        request.filter,
+      );
       displayExperiments = response.experiments || [];
-      displayExperiments.forEach((exp) => exp.expandState = ExpandState.COLLAPSED);
+      displayExperiments.forEach(exp => (exp.expandState = ExpandState.COLLAPSED));
     } catch (err) {
       await this.showPageError('Error: failed to retrieve list of experiments.', err);
       // No point in continuing if we couldn't retrieve any experiments.
@@ -156,31 +184,38 @@ class ExperimentList extends Page<{}, ExperimentListState> {
     }
 
     // Fetch and set last 5 runs' statuses for each experiment
-    await Promise.all(displayExperiments.map(async experiment => {
-      // TODO: should we aggregate errors here? What if they fail for different reasons?
-      try {
-        const listRunsResponse = await Apis.runServiceApi.listRuns(
-          undefined /* pageToken */,
-          5 /* pageSize */,
-          RunSortKeys.CREATED_AT + ' desc',
-          ApiResourceType.EXPERIMENT.toString(),
-          experiment.id,
-          encodeURIComponent(JSON.stringify({
-            predicates: [{
-              key: 'storage_state',
-              op: PredicateOp.NOTEQUALS,
-              string_value: RunStorageState.ARCHIVED.toString(),
-            }]
-          } as ApiFilter)),
-        );
-        experiment.last5Runs = listRunsResponse.runs || [];
-      } catch (err) {
-        experiment.error = 'Failed to load the last 5 runs of this experiment';
-        logger.error(
-          `Error: failed to retrieve run statuses for experiment: ${experiment.name}.`,
-          err);
-      }
-    }));
+    await Promise.all(
+      displayExperiments.map(async experiment => {
+        // TODO: should we aggregate errors here? What if they fail for different reasons?
+        try {
+          const listRunsResponse = await Apis.runServiceApi.listRuns(
+            undefined /* pageToken */,
+            5 /* pageSize */,
+            RunSortKeys.CREATED_AT + ' desc',
+            'EXPERIMENT',
+            experiment.id,
+            encodeURIComponent(
+              JSON.stringify({
+                predicates: [
+                  {
+                    key: 'storage_state',
+                    op: PredicateOp.NOTEQUALS,
+                    string_value: RunStorageState.ARCHIVED.toString(),
+                  },
+                ],
+              } as ApiFilter),
+            ),
+          );
+          experiment.last5Runs = listRunsResponse.runs || [];
+        } catch (err) {
+          experiment.error = 'Failed to load the last 5 runs of this experiment';
+          logger.error(
+            `Error: failed to retrieve run statuses for experiment: ${experiment.name}.`,
+            err,
+          );
+        }
+      }),
+    );
 
     this.setState({ displayExperiments });
     return response.next_page_token || '';
@@ -198,9 +233,9 @@ class ExperimentList extends Page<{}, ExperimentListState> {
   private _toggleRowExpand(rowIndex: number): void {
     const displayExperiments = produce(this.state.displayExperiments, draft => {
       draft[rowIndex].expandState =
-        draft[rowIndex].expandState === ExpandState.COLLAPSED ?
-          ExpandState.EXPANDED :
-          ExpandState.COLLAPSED;
+        draft[rowIndex].expandState === ExpandState.COLLAPSED
+          ? ExpandState.EXPANDED
+          : ExpandState.COLLAPSED;
     });
 
     this.setState({ displayExperiments });
@@ -208,12 +243,21 @@ class ExperimentList extends Page<{}, ExperimentListState> {
 
   private _getExpandedExperimentComponent(experimentIndex: number): JSX.Element {
     const experiment = this.state.displayExperiments[experimentIndex];
-    return <RunList hideExperimentColumn={true} experimentIdMask={experiment.id} onError={() => null} {...this.props}
-      disablePaging={true} selectedIds={this.state.selectedIds} noFilterBox={true}
-      storageState={RunStorageState.AVAILABLE}
-      onSelectionChange={this._selectionChanged.bind(this)} disableSorting={true} />;
+    return (
+      <RunList
+        hideExperimentColumn={true}
+        experimentIdMask={experiment.id}
+        onError={() => null}
+        {...this.props}
+        disablePaging={true}
+        selectedIds={this.state.selectedIds}
+        noFilterBox={true}
+        storageState={RunStorageState.AVAILABLE}
+        onSelectionChange={this._selectionChanged.bind(this)}
+        disableSorting={true}
+      />
+    );
   }
-
 }
 
 export default ExperimentList;
diff --git a/frontend/src/pages/ExperimentsAndRuns.test.tsx b/frontend/src/pages/ExperimentsAndRuns.test.tsx
index 7744c229754a..081d789c01de 100644
--- a/frontend/src/pages/ExperimentsAndRuns.test.tsx
+++ b/frontend/src/pages/ExperimentsAndRuns.test.tsx
@@ -15,7 +15,10 @@
  */
 
 import * as React from 'react';
-import ExperimentsAndRuns, { ExperimentAndRunsProps, ExperimentsAndRunsTab } from './ExperimentsAndRuns';
+import ExperimentsAndRuns, {
+  ExperimentAndRunsProps,
+  ExperimentsAndRunsTab,
+} from './ExperimentsAndRuns';
 import { shallow } from 'enzyme';
 
 function generateProps(): ExperimentAndRunsProps {
@@ -34,20 +37,20 @@ function generateProps(): ExperimentAndRunsProps {
 
 describe('ExperimentsAndRuns', () => {
   it('renders experiments page', () => {
-    expect(shallow(<ExperimentsAndRuns {...generateProps() as any} />)).toMatchSnapshot();
+    expect(shallow(<ExperimentsAndRuns {...(generateProps() as any)} />)).toMatchSnapshot();
   });
 
   it('renders runs page', () => {
     const props = generateProps();
     props.view = ExperimentsAndRunsTab.RUNS;
-    expect(shallow(<ExperimentsAndRuns {...props as any} />)).toMatchSnapshot();
+    expect(shallow(<ExperimentsAndRuns {...(props as any)} />)).toMatchSnapshot();
   });
 
   it('switches to clicked page by pushing to history', () => {
     const spy = jest.fn();
     const props = generateProps();
     props.history.push = spy;
-    const tree = shallow(<ExperimentsAndRuns {...props as any} />);
+    const tree = shallow(<ExperimentsAndRuns {...(props as any)} />);
 
     tree.find('MD2Tabs').simulate('switch', 1);
     expect(spy).toHaveBeenCalledWith('/runs');
diff --git a/frontend/src/pages/ExperimentsAndRuns.tsx b/frontend/src/pages/ExperimentsAndRuns.tsx
index bbaec2117e9e..ae5cf4515a77 100644
--- a/frontend/src/pages/ExperimentsAndRuns.tsx
+++ b/frontend/src/pages/ExperimentsAndRuns.tsx
@@ -38,7 +38,6 @@ interface ExperimentAndRunsState {
 }
 
 class ExperimentsAndRuns extends Page<ExperimentAndRunsProps, ExperimentAndRunsState> {
-
   public getInitialToolbarState(): ToolbarProps {
     return { actions: {}, breadcrumbs: [], pageTitle: '' };
   }
@@ -46,15 +45,14 @@ class ExperimentsAndRuns extends Page<ExperimentAndRunsProps, ExperimentAndRunsS
   public render(): JSX.Element {
     return (
       <div className={classes(commonCss.page, padding(20, 't'))}>
-        <MD2Tabs tabs={['All experiments', 'All runs']} selectedTab={this.props.view}
-          onSwitch={this._tabSwitched.bind(this)} />
-        {this.props.view === 0 && (
-          <ExperimentList {...this.props} />
-        )}
+        <MD2Tabs
+          tabs={['All experiments', 'All runs']}
+          selectedTab={this.props.view}
+          onSwitch={this._tabSwitched.bind(this)}
+        />
+        {this.props.view === 0 && <ExperimentList {...this.props} />}
 
-        {this.props.view === 1 && (
-          <AllRunsList {...this.props} />
-        )}
+        {this.props.view === 1 && <AllRunsList {...this.props} />}
       </div>
     );
   }
@@ -65,7 +63,8 @@ class ExperimentsAndRuns extends Page<ExperimentAndRunsProps, ExperimentAndRunsS
 
   private _tabSwitched(newTab: ExperimentsAndRunsTab): void {
     this.props.history.push(
-      newTab === ExperimentsAndRunsTab.EXPERIMENTS ? RoutePage.EXPERIMENTS : RoutePage.RUNS);
+      newTab === ExperimentsAndRunsTab.EXPERIMENTS ? RoutePage.EXPERIMENTS : RoutePage.RUNS,
+    );
   }
 }
 
diff --git a/frontend/src/pages/NewExperiment.test.tsx b/frontend/src/pages/NewExperiment.test.tsx
index 4c94b42eb044..4c789c05bd2c 100644
--- a/frontend/src/pages/NewExperiment.test.tsx
+++ b/frontend/src/pages/NewExperiment.test.tsx
@@ -57,12 +57,12 @@ describe('NewExperiment', () => {
   afterEach(() => tree.unmount());
 
   it('renders the new experiment page', () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('does not include any action buttons in the toolbar', () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
 
     expect(updateToolbarSpy).toHaveBeenCalledWith({
       actions: {},
@@ -71,21 +71,25 @@ describe('NewExperiment', () => {
     });
   });
 
-  it('enables the \'Next\' button when an experiment name is entered', () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+  it("enables the 'Next' button when an experiment name is entered", () => {
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
     expect(tree.find('#createExperimentBtn').props()).toHaveProperty('disabled', true);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment name' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment name' },
+    });
 
     expect(tree.find('#createExperimentBtn').props()).toHaveProperty('disabled', false);
     expect(tree).toMatchSnapshot();
   });
 
-  it('re-disables the \'Next\' button when an experiment name is cleared after having been entered', () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+  it("re-disables the 'Next' button when an experiment name is cleared after having been entered", () => {
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
     expect(tree.find('#createExperimentBtn').props()).toHaveProperty('disabled', true);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment name' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment name' },
+    });
     expect(tree.find('#createExperimentBtn').props()).toHaveProperty('disabled', false);
 
     (tree.instance() as any).handleChange('experimentName')({ target: { value: '' } });
@@ -94,8 +98,10 @@ describe('NewExperiment', () => {
   });
 
   it('updates the experiment name', () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment name' } });
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment name' },
+    });
 
     expect(tree.state()).toEqual({
       description: '',
@@ -106,7 +112,7 @@ describe('NewExperiment', () => {
   });
 
   it('updates the experiment description', () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
     (tree.instance() as any).handleChange('description')({ target: { value: 'a description!' } });
 
     expect(tree.state()).toEqual({
@@ -117,10 +123,12 @@ describe('NewExperiment', () => {
     });
   });
 
-  it('sets the page to a busy state upon clicking \'Next\'', async () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+  it("sets the page to a busy state upon clicking 'Next'", async () => {
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment-name' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment-name' },
+    });
 
     tree.find('#createExperimentBtn').simulate('click');
     await TestUtils.flushPromises();
@@ -129,11 +137,15 @@ describe('NewExperiment', () => {
     expect(tree.find('#createExperimentBtn').props()).toHaveProperty('busy', true);
   });
 
-  it('calls the createExperiment API with the new experiment upon clicking \'Next\'', async () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+  it("calls the createExperiment API with the new experiment upon clicking 'Next'", async () => {
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment name' } });
-    (tree.instance() as any).handleChange('description')({ target: { value: 'experiment description' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment name' },
+    });
+    (tree.instance() as any).handleChange('description')({
+      target: { value: 'experiment description' },
+    });
 
     tree.find('#createExperimentBtn').simulate('click');
     await TestUtils.flushPromises();
@@ -147,18 +159,19 @@ describe('NewExperiment', () => {
   it('navigates to NewRun page upon successful creation', async () => {
     const experimentId = 'test-exp-id-1';
     createExperimentSpy.mockImplementation(() => ({ id: experimentId }));
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment-name' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment-name' },
+    });
 
     tree.find('#createExperimentBtn').simulate('click');
     await createExperimentSpy;
     await TestUtils.flushPromises();
 
     expect(historyPushSpy).toHaveBeenCalledWith(
-      RoutePage.NEW_RUN
-      + `?experimentId=${experimentId}`
-      + `&firstRunInExperiment=1`);
+      RoutePage.NEW_RUN + `?experimentId=${experimentId}` + `&firstRunInExperiment=1`,
+    );
   });
 
   it('includes pipeline ID in NewRun page query params if present', async () => {
@@ -168,25 +181,30 @@ describe('NewExperiment', () => {
     const pipelineId = 'some-pipeline-id';
     const props = generateProps();
     props.location.search = `?${QUERY_PARAMS.pipelineId}=${pipelineId}`;
-    tree = shallow(<NewExperiment {...props as any} />);
+    tree = shallow(<NewExperiment {...(props as any)} />);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment-name' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment-name' },
+    });
 
     tree.find('#createExperimentBtn').simulate('click');
     await createExperimentSpy;
     await TestUtils.flushPromises();
 
     expect(historyPushSpy).toHaveBeenCalledWith(
-      RoutePage.NEW_RUN
-      + `?experimentId=${experimentId}`
-      + `&pipelineId=${pipelineId}`
-      + `&firstRunInExperiment=1`);
+      RoutePage.NEW_RUN +
+        `?experimentId=${experimentId}` +
+        `&pipelineId=${pipelineId}` +
+        `&firstRunInExperiment=1`,
+    );
   });
 
   it('shows snackbar confirmation after experiment is created', async () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment-name' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment-name' },
+    });
 
     tree.find('#createExperimentBtn').simulate('click');
     await TestUtils.flushPromises();
@@ -203,9 +221,11 @@ describe('NewExperiment', () => {
     // tslint:disable-next-line:no-console
     console.error = jest.spyOn(console, 'error').mockImplementation();
 
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment-name' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment-name' },
+    });
 
     TestUtils.makeErrorResponseOnce(createExperimentSpy, 'test error!');
     tree.find('#createExperimentBtn').simulate('click');
@@ -220,9 +240,11 @@ describe('NewExperiment', () => {
     // tslint:disable-next-line:no-console
     console.error = jest.spyOn(console, 'error').mockImplementation();
 
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
 
-    (tree.instance() as any).handleChange('experimentName')({ target: { value: 'experiment-name' } });
+    (tree.instance() as any).handleChange('experimentName')({
+      target: { value: 'experiment-name' },
+    });
 
     TestUtils.makeErrorResponseOnce(createExperimentSpy, 'test error!');
     tree.find('#createExperimentBtn').simulate('click');
@@ -235,7 +257,7 @@ describe('NewExperiment', () => {
   });
 
   it('navigates to experiment list page upon cancellation', async () => {
-    tree = shallow(<NewExperiment {...generateProps() as any} />);
+    tree = shallow(<NewExperiment {...(generateProps() as any)} />);
     tree.find('#cancelNewExperimentBtn').simulate('click');
     await TestUtils.flushPromises();
 
diff --git a/frontend/src/pages/NewExperiment.tsx b/frontend/src/pages/NewExperiment.tsx
index 863ed7df6de8..c9165f80b839 100644
--- a/frontend/src/pages/NewExperiment.tsx
+++ b/frontend/src/pages/NewExperiment.tsx
@@ -48,7 +48,6 @@ const css = stylesheet({
 });
 
 class NewExperiment extends Page<{}, NewExperimentState> {
-
   private _experimentNameRef = React.createRef<HTMLInputElement>();
 
   constructor(props: any) {
@@ -75,7 +74,6 @@ class NewExperiment extends Page<{}, NewExperimentState> {
 
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-
         <div className={classes(commonCss.scrollContainer, padding(20, 'lr'))}>
           <div className={commonCss.header}>Experiment details</div>
           {/* TODO: this description needs work. */}
@@ -84,17 +82,38 @@ class NewExperiment extends Page<{}, NewExperimentState> {
             associated runs
           </div>
 
-          <Input id='experimentName' label='Experiment name' inputRef={this._experimentNameRef}
-            required={true} onChange={this.handleChange('experimentName')} value={experimentName}
-            autoFocus={true} variant='outlined' />
-          <Input id='experimentDescription' label='Description (optional)' multiline={true}
-            onChange={this.handleChange('description')} value={description} variant='outlined' />
+          <Input
+            id='experimentName'
+            label='Experiment name'
+            inputRef={this._experimentNameRef}
+            required={true}
+            onChange={this.handleChange('experimentName')}
+            value={experimentName}
+            autoFocus={true}
+            variant='outlined'
+          />
+          <Input
+            id='experimentDescription'
+            label='Description (optional)'
+            multiline={true}
+            onChange={this.handleChange('description')}
+            value={description}
+            variant='outlined'
+          />
 
           <div className={commonCss.flex}>
-            <BusyButton id='createExperimentBtn' disabled={!!validationError} busy={isbeingCreated}
-              className={commonCss.buttonAction} title={'Next'}
-              onClick={this._create.bind(this)} />
-            <Button id='cancelNewExperimentBtn' onClick={() => this.props.history.push(RoutePage.EXPERIMENTS)}>
+            <BusyButton
+              id='createExperimentBtn'
+              disabled={!!validationError}
+              busy={isbeingCreated}
+              className={commonCss.buttonAction}
+              title={'Next'}
+              onClick={this._create.bind(this)}
+            />
+            <Button
+              id='cancelNewExperimentBtn'
+              onClick={() => this.props.history.push(RoutePage.EXPERIMENTS)}
+            >
               Cancel
             </Button>
             <div className={css.errorMessage}>{validationError}</div>
@@ -121,7 +140,7 @@ class NewExperiment extends Page<{}, NewExperimentState> {
   public handleChange = (name: string) => (event: any) => {
     const value = (event.target as TextFieldProps).value;
     this.setState({ [name]: value } as any, this._validate.bind(this));
-  }
+  };
 
   private _create(): void {
     const newExperiment: ApiExperiment = {
diff --git a/frontend/src/pages/NewRun.test.tsx b/frontend/src/pages/NewRun.test.tsx
index 2693fbfe9190..14d09eae2aad 100644
--- a/frontend/src/pages/NewRun.test.tsx
+++ b/frontend/src/pages/NewRun.test.tsx
@@ -33,7 +33,6 @@ class TestNewRun extends NewRun {
 }
 
 describe('NewRun', () => {
-
   let tree: ReactWrapper | ShallowWrapper;
 
   const consoleErrorSpy = jest.spyOn(console, 'error');
@@ -77,20 +76,20 @@ describe('NewRun', () => {
       parameters: [
         {
           name: 'set value',
-          value: 'abc'
+          value: 'abc',
         },
         {
           name: 'empty value',
-          value: ''
-        }
-      ]
+          value: '',
+        },
+      ],
     };
   }
 
   function newMockRunDetail(): ApiRunDetail {
     return {
       pipeline_runtime: {
-        workflow_manifest: '{}'
+        workflow_manifest: '{}',
       },
       run: {
         id: 'some-mock-run-id',
@@ -106,7 +105,8 @@ describe('NewRun', () => {
   function newMockRunWithEmbeddedPipeline(): ApiRunDetail {
     const runDetail = newMockRunDetail();
     delete runDetail.run!.pipeline_spec!.pipeline_id;
-    runDetail.run!.pipeline_spec!.workflow_manifest = '{"metadata": {"name": "embedded"}, "parameters": []}';
+    runDetail.run!.pipeline_spec!.workflow_manifest =
+      '{"metadata": {"name": "embedded"}, "parameters": []}';
     return runDetail;
   }
 
@@ -116,7 +116,7 @@ describe('NewRun', () => {
       location: {
         pathname: RoutePage.NEW_RUN,
         // TODO: this should be removed once experiments are no longer required to reach this page.
-        search: `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
+        search: `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`,
       } as any,
       match: '' as any,
       toolbarProps: TestNewRun.prototype.getInitialToolbarState(),
@@ -173,7 +173,7 @@ describe('NewRun', () => {
   });
 
   it('clears the banner when refresh is called', async () => {
-    tree = shallow(<TestNewRun {...generateProps() as any} />);
+    tree = shallow(<TestNewRun {...(generateProps() as any)} />);
     expect(updateBannerSpy).toHaveBeenCalledTimes(1);
     (tree.instance() as TestNewRun).refresh();
     await TestUtils.flushPromises();
@@ -182,7 +182,7 @@ describe('NewRun', () => {
   });
 
   it('clears the banner when load is called', async () => {
-    tree = shallow(<TestNewRun {...generateProps() as any} />);
+    tree = shallow(<TestNewRun {...(generateProps() as any)} />);
     expect(updateBannerSpy).toHaveBeenCalledTimes(1);
     (tree.instance() as TestNewRun).load();
     await TestUtils.flushPromises();
@@ -191,7 +191,7 @@ describe('NewRun', () => {
   });
 
   it('allows updating the run name', async () => {
-    tree = shallow(<TestNewRun {...generateProps() as any} />);
+    tree = shallow(<TestNewRun {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
 
     (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'run name' } });
@@ -200,16 +200,18 @@ describe('NewRun', () => {
   });
 
   it('allows updating the run description', async () => {
-    tree = shallow(<TestNewRun {...generateProps() as any} />);
+    tree = shallow(<TestNewRun {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
-    (tree.instance() as TestNewRun).handleChange('description')({ target: { value: 'run description' } });
+    (tree.instance() as TestNewRun).handleChange('description')({
+      target: { value: 'run description' },
+    });
 
     expect(tree.state()).toHaveProperty('description', 'run description');
   });
 
   it('changes title and form if the new run will recur, based on the radio buttons', async () => {
     // Default props do not include isRecurring in query params
-    tree = shallow(<TestNewRun {...generateProps() as any} />);
+    tree = shallow(<TestNewRun {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
 
     (tree.instance() as TestNewRun)._updateRecurringRunState(true);
@@ -253,7 +255,7 @@ describe('NewRun', () => {
     expect(getExperimentSpy).toHaveBeenLastCalledWith(MOCK_EXPERIMENT.id);
   });
 
-  it('updates the run\'s state with the associated experiment if one is present in the query params', async () => {
+  it("updates the run's state with the associated experiment if one is present in the query params", async () => {
     const props = generateProps();
     props.location.search = `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`;
 
@@ -278,14 +280,17 @@ describe('NewRun', () => {
         { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
         {
           displayName: MOCK_EXPERIMENT.name,
-          href: RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, MOCK_EXPERIMENT.id!),
+          href: RoutePage.EXPERIMENT_DETAILS.replace(
+            ':' + RouteParams.experimentId,
+            MOCK_EXPERIMENT.id!,
+          ),
         },
       ],
       pageTitle: 'Start a run',
     });
   });
 
-  it('exits to the associated experiment\'s details page if one is present in the query params', async () => {
+  it("exits to the associated experiment's details page if one is present in the query params", async () => {
     const props = generateProps();
     props.location.search = `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`;
 
@@ -294,15 +299,15 @@ describe('NewRun', () => {
     tree.find('#exitNewRunPageBtn').simulate('click');
 
     expect(historyPushSpy).toHaveBeenCalledWith(
-      RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, MOCK_EXPERIMENT.id!)
+      RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, MOCK_EXPERIMENT.id!),
     );
   });
 
-  it('changes the exit button\'s text if query params indicate this is the first run of an experiment', async () => {
+  it("changes the exit button's text if query params indicate this is the first run of an experiment", async () => {
     const props = generateProps();
     props.location.search =
-      `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-      + `&${QUERY_PARAMS.firstRunInExperiment}=1`;
+      `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+      `&${QUERY_PARAMS.firstRunInExperiment}=1`;
 
     tree = shallow(<TestNewRun {...props} />);
     await TestUtils.flushPromises();
@@ -319,11 +324,13 @@ describe('NewRun', () => {
     tree = shallow(<TestNewRun {...props} />);
     await TestUtils.flushPromises();
 
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'test error message',
-      message: `Error: failed to retrieve associated experiment: ${MOCK_EXPERIMENT.id}. Click Details for more information.`,
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'test error message',
+        message: `Error: failed to retrieve associated experiment: ${MOCK_EXPERIMENT.id}. Click Details for more information.`,
+        mode: 'error',
+      }),
+    );
   });
 
   it('fetches the associated pipeline if one is present in the query params', async () => {
@@ -348,27 +355,29 @@ describe('NewRun', () => {
     tree = shallow(<TestNewRun {...props} />);
     await TestUtils.flushPromises();
 
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'test error message',
-      message: `Error: failed to retrieve pipeline: ${MOCK_PIPELINE.id}. Click Details for more information.`,
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'test error message',
+        message: `Error: failed to retrieve pipeline: ${MOCK_PIPELINE.id}. Click Details for more information.`,
+        mode: 'error',
+      }),
+    );
   });
 
   it('renders a warning message if there are pipeline parameters with empty values', async () => {
-    tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+    tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
 
     const pipeline = newMockPipelineWithParameters();
     tree.setState({ pipeline, pipelineName: pipeline.name });
-    
+
     // Ensure that at least one of the provided parameters has a missing value.
     expect((pipeline.parameters || []).some(parameter => !parameter.value)).toBe(true);
     expect(tree.find('#missing-parameters-message').exists()).toBe(true);
   });
 
   it('does not render a warning message if there are no pipeline parameters with empty values', async () => {
-    tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+    tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
     await TestUtils.flushPromises();
 
     const pipeline = newMockPipelineWithParameters();
@@ -376,35 +385,44 @@ describe('NewRun', () => {
       parameter.value = 'I am not set';
     });
     tree.setState({ pipeline, pipelineName: pipeline.name });
-    
+
     // Ensure all provided parameters have valid values.
     expect((pipeline.parameters || []).every(parameter => !!parameter.value)).toBe(true);
     expect(tree.find('#missing-parameters-message').exists()).toBe(false);
   });
 
   describe('choosing a pipeline', () => {
-    it('opens up the pipeline selector modal when users clicks \'Choose\'', async () => {
-      tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+    it("opens up the pipeline selector modal when users clicks 'Choose'", async () => {
+      tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
-      tree.find('#choosePipelineBtn').at(0).simulate('click');
+      tree
+        .find('#choosePipelineBtn')
+        .at(0)
+        .simulate('click');
       await TestUtils.flushPromises();
       expect(tree.state('pipelineSelectorOpen')).toBe(true);
     });
 
     it('closes the pipeline selector modal', async () => {
-      tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+      tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
-      tree.find('#choosePipelineBtn').at(0).simulate('click');
+      tree
+        .find('#choosePipelineBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('pipelineSelectorOpen')).toBe(true);
 
-      tree.find('#cancelPipelineSelectionBtn').at(0).simulate('click');
+      tree
+        .find('#cancelPipelineSelectionBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('pipelineSelectorOpen')).toBe(false);
     });
 
     it('sets the pipeline from the selector modal when confirmed', async () => {
-      tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+      tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
       const oldPipeline = newMockPipeline();
@@ -416,14 +434,20 @@ describe('NewRun', () => {
       getPipelineSpy.mockImplementation(() => newPipeline);
       tree.setState({ pipeline: oldPipeline, pipelineName: oldPipeline.name });
 
-      tree.find('#choosePipelineBtn').at(0).simulate('click');
+      tree
+        .find('#choosePipelineBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('pipelineSelectorOpen')).toBe(true);
 
       // Simulate selecting pipeline
       tree.setState({ unconfirmedSelectedPipeline: newPipeline });
 
       // Confirm pipeline selector
-      tree.find('#usePipelineBtn').at(0).simulate('click');
+      tree
+        .find('#usePipelineBtn')
+        .at(0)
+        .simulate('click');
       await TestUtils.flushPromises();
       expect(tree.state('pipelineSelectorOpen')).toBe(false);
 
@@ -434,7 +458,7 @@ describe('NewRun', () => {
     });
 
     it('does not set the pipeline from the selector modal when cancelled', async () => {
-      tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+      tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
       const oldPipeline = newMockPipeline();
@@ -446,14 +470,20 @@ describe('NewRun', () => {
       getPipelineSpy.mockImplementation(() => newPipeline);
       tree.setState({ pipeline: oldPipeline, pipelineName: oldPipeline.name });
 
-      tree.find('#choosePipelineBtn').at(0).simulate('click');
+      tree
+        .find('#choosePipelineBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('pipelineSelectorOpen')).toBe(true);
 
       // Simulate selecting pipeline
       tree.setState({ unconfirmedSelectedPipeline: newPipeline });
 
       // Cancel pipeline selector
-      tree.find('#cancelPipelineSelectionBtn').at(0).simulate('click');
+      tree
+        .find('#cancelPipelineSelectionBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('pipelineSelectorOpen')).toBe(false);
 
       expect(tree.state('pipeline')).toEqual(oldPipeline);
@@ -464,28 +494,37 @@ describe('NewRun', () => {
   });
 
   describe('choosing an experiment', () => {
-    it('opens up the experiment selector modal when users clicks \'Choose\'', async () => {
-      tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+    it("opens up the experiment selector modal when users clicks 'Choose'", async () => {
+      tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
-      tree.find('#chooseExperimentBtn').at(0).simulate('click');
+      tree
+        .find('#chooseExperimentBtn')
+        .at(0)
+        .simulate('click');
       await TestUtils.flushPromises();
       expect(tree.state('experimentSelectorOpen')).toBe(true);
     });
 
     it('closes the experiment selector modal', async () => {
-      tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+      tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
-      tree.find('#chooseExperimentBtn').at(0).simulate('click');
+      tree
+        .find('#chooseExperimentBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('experimentSelectorOpen')).toBe(true);
 
-      tree.find('#cancelExperimentSelectionBtn').at(0).simulate('click');
+      tree
+        .find('#cancelExperimentSelectionBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('experimentSelectorOpen')).toBe(false);
     });
 
     it('sets the experiment from the selector modal when confirmed', async () => {
-      tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+      tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
       const oldExperiment = newMockExperiment();
@@ -497,14 +536,20 @@ describe('NewRun', () => {
       getExperimentSpy.mockImplementation(() => newExperiment);
       tree.setState({ experiment: oldExperiment, experimentName: oldExperiment.name });
 
-      tree.find('#chooseExperimentBtn').at(0).simulate('click');
+      tree
+        .find('#chooseExperimentBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('experimentSelectorOpen')).toBe(true);
 
       // Simulate selecting experiment
       tree.setState({ unconfirmedSelectedExperiment: newExperiment });
 
       // Confirm experiment selector
-      tree.find('#useExperimentBtn').at(0).simulate('click');
+      tree
+        .find('#useExperimentBtn')
+        .at(0)
+        .simulate('click');
       await TestUtils.flushPromises();
       expect(tree.state('experimentSelectorOpen')).toBe(false);
 
@@ -515,7 +560,7 @@ describe('NewRun', () => {
     });
 
     it('does not set the experiment from the selector modal when cancelled', async () => {
-      tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
+      tree = TestUtils.mountWithRouter(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
       const oldExperiment = newMockExperiment();
@@ -527,14 +572,20 @@ describe('NewRun', () => {
       getExperimentSpy.mockImplementation(() => newExperiment);
       tree.setState({ experiment: oldExperiment, experimentName: oldExperiment.name });
 
-      tree.find('#chooseExperimentBtn').at(0).simulate('click');
+      tree
+        .find('#chooseExperimentBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('experimentSelectorOpen')).toBe(true);
 
       // Simulate selecting experiment
       tree.setState({ unconfirmedSelectedExperiment: newExperiment });
 
       // Cancel experiment selector
-      tree.find('#cancelExperimentSelectionBtn').at(0).simulate('click');
+      tree
+        .find('#cancelExperimentSelectionBtn')
+        .at(0)
+        .simulate('click');
       expect(tree.state('experimentSelectorOpen')).toBe(false);
 
       expect(tree.state('experiment')).toEqual(oldExperiment);
@@ -561,7 +612,7 @@ describe('NewRun', () => {
       expect(getRunSpy).toHaveBeenLastCalledWith(run.id);
     });
 
-    it('automatically generates the new run name based on the original run\'s name', async () => {
+    it("automatically generates the new run name based on the original run's name", async () => {
       const runDetail = newMockRunDetail();
       runDetail.run!.name = '-original run-';
       const props = generateProps();
@@ -592,13 +643,15 @@ describe('NewRun', () => {
     it('uses the query param experiment ID over the one in the original run if an ID is present in both', async () => {
       const experiment = newMockExperiment();
       const runDetail = newMockRunDetail();
-      runDetail.run!.resource_references = [{
-        key: { id: `${experiment.id}-different`, type: ApiResourceType.EXPERIMENT },
-      }];
+      runDetail.run!.resource_references = [
+        {
+          key: { id: `${experiment.id}-different`, type: ApiResourceType.EXPERIMENT },
+        },
+      ];
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`
-        + `&${QUERY_PARAMS.experimentId}=${experiment.id}`;
+        `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}` +
+        `&${QUERY_PARAMS.experimentId}=${experiment.id}`;
 
       getRunSpy.mockImplementation(() => runDetail);
 
@@ -614,9 +667,11 @@ describe('NewRun', () => {
     it('uses the experiment ID in the original run if no experiment ID is present in query params', async () => {
       const originalRunExperimentId = 'original-run-experiment-id';
       const runDetail = newMockRunDetail();
-      runDetail.run!.resource_references = [{
-        key: { id: originalRunExperimentId, type: ApiResourceType.EXPERIMENT },
-      }];
+      runDetail.run!.resource_references = [
+        {
+          key: { id: originalRunExperimentId, type: ApiResourceType.EXPERIMENT },
+        },
+      ];
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`;
 
@@ -636,8 +691,8 @@ describe('NewRun', () => {
       runDetail.run!.pipeline_spec = { pipeline_id: 'original-run-pipeline-id' };
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`
-        + `&${QUERY_PARAMS.pipelineId}=some-other-pipeline-id`;
+        `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}` +
+        `&${QUERY_PARAMS.pipelineId}=some-other-pipeline-id`;
 
       getRunSpy.mockImplementation(() => runDetail);
 
@@ -657,13 +712,15 @@ describe('NewRun', () => {
       tree = shallow(<TestNewRun {...props} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        additionalInfo: 'test error message',
-        message:
-          'Error: failed to find a pipeline corresponding to that of the original run:'
-          + ` ${MOCK_RUN_DETAIL.run!.id}. Click Details for more information.`,
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          additionalInfo: 'test error message',
+          message:
+            'Error: failed to find a pipeline corresponding to that of the original run:' +
+            ` ${MOCK_RUN_DETAIL.run!.id}. Click Details for more information.`,
+          mode: 'error',
+        }),
+      );
     });
 
     it('shows an error if getPipeline fails to find the pipeline from the original run', async () => {
@@ -677,10 +734,13 @@ describe('NewRun', () => {
       tree = shallow(<TestNewRun {...props} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        message: 'Error: failed to read the clone run\'s pipeline definition. Click Details for more information.',
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          message:
+            "Error: failed to read the clone run's pipeline definition. Click Details for more information.",
+          mode: 'error',
+        }),
+      );
     });
 
     it('does not call getPipeline if original run has pipeline spec instead of id', async () => {
@@ -710,15 +770,20 @@ describe('NewRun', () => {
       tree = shallow(<TestNewRun {...props} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        message: 'Error: failed to read the clone run\'s pipeline definition. Click Details for more information.',
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          message:
+            "Error: failed to read the clone run's pipeline definition. Click Details for more information.",
+          mode: 'error',
+        }),
+      );
     });
 
     it('loads and selects embedded pipeline from run', async () => {
       const props = generateProps();
-      props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id}`;
+      props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${
+        MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id
+      }`;
 
       getRunSpy.mockImplementation(() => MOCK_RUN_WITH_EMBEDDED_PIPELINE);
 
@@ -726,11 +791,14 @@ describe('NewRun', () => {
       await TestUtils.flushPromises();
 
       expect(updateBannerSpy).toHaveBeenCalledTimes(1);
-      expect(tree.state('workflowFromRun')).toEqual({ metadata: { name: 'embedded' }, parameters: [] });
+      expect(tree.state('workflowFromRun')).toEqual({
+        metadata: { name: 'embedded' },
+        parameters: [],
+      });
       expect(tree.state('useWorkflowFromRun')).toBe(true);
     });
 
-    it('shows a page error if the original run\'s workflow_manifest is undefined', async () => {
+    it("shows a page error if the original run's workflow_manifest is undefined", async () => {
       const runDetail = newMockRunDetail();
       runDetail.run!.pipeline_spec!.workflow_manifest = undefined;
       const props = generateProps();
@@ -741,13 +809,15 @@ describe('NewRun', () => {
       tree = shallow(<TestNewRun {...props} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        message: `Error: run ${runDetail.run!.id} had no workflow manifest`,
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          message: `Error: run ${runDetail.run!.id} had no workflow manifest`,
+          mode: 'error',
+        }),
+      );
     });
 
-    it('shows a page error if the original run\'s workflow_manifest is invalid JSON', async () => {
+    it("shows a page error if the original run's workflow_manifest is invalid JSON", async () => {
       const runDetail = newMockRunWithEmbeddedPipeline();
       runDetail.run!.pipeline_spec!.workflow_manifest = 'not json';
       const props = generateProps();
@@ -758,24 +828,27 @@ describe('NewRun', () => {
       tree = shallow(<TestNewRun {...props} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        message: 'Error: failed to read the clone run\'s pipeline definition. Click Details for more information.',
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          message:
+            "Error: failed to read the clone run's pipeline definition. Click Details for more information.",
+          mode: 'error',
+        }),
+      );
     });
 
-    it('gets the pipeline parameter values of the original run\'s pipeline', async () => {
+    it("gets the pipeline parameter values of the original run's pipeline", async () => {
       const runDetail = newMockRunDetail();
-      const originalRunPipelineParams: ApiParameter[] =
-        [{ name: 'thisTestParam', value: 'thisTestVal' }];
-      runDetail.pipeline_runtime!.workflow_manifest =
-        JSON.stringify({
-          spec: {
-            arguments: {
-              parameters: originalRunPipelineParams
-            },
+      const originalRunPipelineParams: ApiParameter[] = [
+        { name: 'thisTestParam', value: 'thisTestVal' },
+      ];
+      runDetail.pipeline_runtime!.workflow_manifest = JSON.stringify({
+        spec: {
+          arguments: {
+            parameters: originalRunPipelineParams,
           },
-        });
+        },
+      });
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${runDetail.run!.id}`;
 
@@ -787,7 +860,6 @@ describe('NewRun', () => {
       expect(tree.state('parameters')).toEqual(originalRunPipelineParams);
     });
 
-
     it('shows a page error if getRun fails', async () => {
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${MOCK_RUN_DETAIL.run!.id}`;
@@ -797,11 +869,15 @@ describe('NewRun', () => {
       tree = shallow(<TestNewRun {...props} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        additionalInfo: 'test error message',
-        message: `Error: failed to retrieve original run: ${MOCK_RUN_DETAIL.run!.id}. Click Details for more information.`,
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          additionalInfo: 'test error message',
+          message: `Error: failed to retrieve original run: ${
+            MOCK_RUN_DETAIL.run!.id
+          }. Click Details for more information.`,
+          mode: 'error',
+        }),
+      );
     });
   });
 
@@ -809,13 +885,14 @@ describe('NewRun', () => {
     let mockEmbeddedPipelineProps: PageProps;
     beforeEach(() => {
       mockEmbeddedPipelineProps = generateProps();
-      mockEmbeddedPipelineProps.location.search =
-        `?${QUERY_PARAMS.fromRunId}=${MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id}`;
+      mockEmbeddedPipelineProps.location.search = `?${QUERY_PARAMS.fromRunId}=${
+        MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id
+      }`;
       getRunSpy.mockImplementationOnce(() => MOCK_RUN_WITH_EMBEDDED_PIPELINE);
     });
 
     it('indicates that a pipeline is preselected and provides a means of selecting a different pipeline', async () => {
-      tree = shallow(<TestNewRun {...mockEmbeddedPipelineProps as any} />);
+      tree = shallow(<TestNewRun {...(mockEmbeddedPipelineProps as any)} />);
       await TestUtils.flushPromises();
 
       expect(tree.state('useWorkflowFromRun')).toBe(true);
@@ -824,16 +901,18 @@ describe('NewRun', () => {
     });
 
     it('retrieves the run with the embedded pipeline', async () => {
-      tree = shallow(<TestNewRun {...mockEmbeddedPipelineProps as any} />);
+      tree = shallow(<TestNewRun {...(mockEmbeddedPipelineProps as any)} />);
       await TestUtils.flushPromises();
 
       expect(getRunSpy).toHaveBeenLastCalledWith(MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id);
     });
 
     it('parses the embedded workflow and stores it in state', async () => {
-      MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.pipeline_spec!.workflow_manifest = JSON.stringify(MOCK_PIPELINE);
+      MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.pipeline_spec!.workflow_manifest = JSON.stringify(
+        MOCK_PIPELINE,
+      );
 
-      tree = shallow(<TestNewRun {...mockEmbeddedPipelineProps as any} />);
+      tree = shallow(<TestNewRun {...(mockEmbeddedPipelineProps as any)} />);
       await TestUtils.flushPromises();
 
       expect(tree.state('workflowFromRun')).toEqual(MOCK_PIPELINE);
@@ -844,54 +923,64 @@ describe('NewRun', () => {
     it('displays a page error if it fails to parse the embedded pipeline', async () => {
       MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.pipeline_spec!.workflow_manifest = 'not JSON';
 
-      tree = shallow(<TestNewRun {...mockEmbeddedPipelineProps as any} />);
+      tree = shallow(<TestNewRun {...(mockEmbeddedPipelineProps as any)} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        additionalInfo: 'Unexpected token o in JSON at position 1',
-        message: 'Error: failed to parse the embedded pipeline\'s spec: not JSON. Click Details for more information.',
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          additionalInfo: 'Unexpected token o in JSON at position 1',
+          message:
+            "Error: failed to parse the embedded pipeline's spec: not JSON. Click Details for more information.",
+          mode: 'error',
+        }),
+      );
     });
 
     it('displays a page error if referenced run has no embedded pipeline', async () => {
       // Remove workflow_manifest entirely
       delete MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.pipeline_spec!.workflow_manifest;
 
-      tree = shallow(<TestNewRun {...mockEmbeddedPipelineProps as any} />);
+      tree = shallow(<TestNewRun {...(mockEmbeddedPipelineProps as any)} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        message: `Error: somehow the run provided in the query params: ${MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id} had no embedded pipeline.`,
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          message: `Error: somehow the run provided in the query params: ${
+            MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id
+          } had no embedded pipeline.`,
+          mode: 'error',
+        }),
+      );
     });
 
     it('displays a page error if it fails to retrieve the run containing the embedded pipeline', async () => {
       getRunSpy.mockReset();
       TestUtils.makeErrorResponseOnce(getRunSpy, 'test - error!');
 
-      tree = shallow(<TestNewRun {...mockEmbeddedPipelineProps as any} />);
+      tree = shallow(<TestNewRun {...(mockEmbeddedPipelineProps as any)} />);
       await TestUtils.flushPromises();
 
-      expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        additionalInfo: 'test - error!',
-        message: `Error: failed to retrieve the specified run: ${MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id}. Click Details for more information.`,
-        mode: 'error',
-      }));
+      expect(updateBannerSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          additionalInfo: 'test - error!',
+          message: `Error: failed to retrieve the specified run: ${
+            MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id
+          }. Click Details for more information.`,
+          mode: 'error',
+        }),
+      );
     });
   });
 
   describe('starting a new run', () => {
-
-    it('disables \'Start\' new run button by default', async () => {
-      tree = shallow(<TestNewRun {...generateProps() as any} />);
+    it("disables 'Start' new run button by default", async () => {
+      tree = shallow(<TestNewRun {...(generateProps() as any)} />);
       await TestUtils.flushPromises();
 
       expect(tree.find('#startNewRunBtn').props()).toHaveProperty('disabled', true);
     });
 
-    it('enables the \'Start\' new run button if pipeline ID in query params and run name entered', async () => {
+    it("enables the 'Start' new run button if pipeline ID in query params and run name entered", async () => {
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
@@ -902,7 +991,7 @@ describe('NewRun', () => {
       expect(tree.find('#startNewRunBtn').props()).toHaveProperty('disabled', false);
     });
 
-    it('re-disables the \'Start\' new run button if pipeline ID in query params and run name entered then cleared', async () => {
+    it("re-disables the 'Start' new run button if pipeline ID in query params and run name entered then cleared", async () => {
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
@@ -915,15 +1004,19 @@ describe('NewRun', () => {
       expect(tree.find('#startNewRunBtn').props()).toHaveProperty('disabled', true);
     });
 
-    it('sends a request to Start a run when \'Start\' is clicked', async () => {
+    it("sends a request to Start a run when 'Start' is clicked", async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
-      (tree.instance() as TestNewRun).handleChange('description')({ target: { value: 'test run description' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
+      (tree.instance() as TestNewRun).handleChange('description')({
+        target: { value: 'test run description' },
+      });
       await TestUtils.flushPromises();
 
       tree.find('#startNewRunBtn').simulate('click');
@@ -938,13 +1031,15 @@ describe('NewRun', () => {
           parameters: MOCK_PIPELINE.parameters,
           pipeline_id: MOCK_PIPELINE.id,
         },
-        resource_references: [{
-          key: {
-            id: MOCK_EXPERIMENT.id,
-            type: ApiResourceType.EXPERIMENT,
+        resource_references: [
+          {
+            key: {
+              id: MOCK_EXPERIMENT.id,
+              type: ApiResourceType.EXPERIMENT,
+            },
+            relationship: ApiRelationship.OWNER,
           },
-          relationship: ApiRelationship.OWNER,
-        }]
+        ],
       });
     });
 
@@ -961,7 +1056,9 @@ describe('NewRun', () => {
 
       tree = shallow(<TestNewRun {...props} />);
       await TestUtils.flushPromises();
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       // Fill in the first pipeline parameter
       (tree.instance() as TestNewRun)._handleParamChange(0, 'test param value');
 
@@ -970,21 +1067,25 @@ describe('NewRun', () => {
       await TestUtils.flushPromises();
 
       expect(startRunSpy).toHaveBeenCalledTimes(1);
-      expect(startRunSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        pipeline_spec: {
-          parameters: [
-            { name: 'param-1', value: 'test param value' },
-            { name: 'param-2', value: 'prefilled value' },
-          ],
-          pipeline_id: pipeline.id,
-        },
-      }));
+      expect(startRunSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          pipeline_spec: {
+            parameters: [
+              { name: 'param-1', value: 'test param value' },
+              { name: 'param-2', value: 'prefilled value' },
+            ],
+            pipeline_id: pipeline.id,
+          },
+        }),
+      );
       expect(tree).toMatchSnapshot();
     });
 
     it('copies pipeline from run in the start API call when cloning a run with embedded pipeline', async () => {
       const props = generateProps();
-      props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id}`;
+      props.location.search = `?${QUERY_PARAMS.cloneFromRun}=${
+        MOCK_RUN_WITH_EMBEDDED_PIPELINE.run!.id
+      }`;
 
       getRunSpy.mockImplementation(() => MOCK_RUN_WITH_EMBEDDED_PIPELINE);
 
@@ -1070,24 +1171,28 @@ describe('NewRun', () => {
           ],
           pipeline_id: 'pipeline-with-params',
         },
-        resource_references: [{
-          key: {
-            id: MOCK_EXPERIMENT.id,
-            type: ApiResourceType.EXPERIMENT,
+        resource_references: [
+          {
+            key: {
+              id: MOCK_EXPERIMENT.id,
+              type: ApiResourceType.EXPERIMENT,
+            },
+            relationship: ApiRelationship.OWNER,
           },
-          relationship: ApiRelationship.OWNER,
-        }]
+        ],
       });
     });
 
-    it('sets the page to a busy state upon clicking \'Start\'', async () => {
+    it("sets the page to a busy state upon clicking 'Start'", async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       await TestUtils.flushPromises();
 
       tree.find('#startNewRunBtn').simulate('click');
@@ -1098,11 +1203,13 @@ describe('NewRun', () => {
     it('navigates to the ExperimentDetails page upon successful start if there was an experiment', async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       await TestUtils.flushPromises();
 
       tree.find('#startNewRunBtn').simulate('click');
@@ -1110,7 +1217,8 @@ describe('NewRun', () => {
       await TestUtils.flushPromises();
 
       expect(historyPushSpy).toHaveBeenCalledWith(
-        RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, MOCK_EXPERIMENT.id!));
+        RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, MOCK_EXPERIMENT.id!),
+      );
     });
 
     it('navigates to the AllRuns page upon successful start if there was not an experiment', async () => {
@@ -1119,7 +1227,9 @@ describe('NewRun', () => {
       props.location.search = `?${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       await TestUtils.flushPromises();
 
       tree.find('#startNewRunBtn').simulate('click');
@@ -1132,13 +1242,15 @@ describe('NewRun', () => {
     it('shows an error dialog if Starting the new run fails', async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       TestUtils.makeErrorResponseOnce(startRunSpy, 'test error message');
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       await TestUtils.flushPromises();
 
       tree.find('#startNewRunBtn').simulate('click');
@@ -1152,12 +1264,14 @@ describe('NewRun', () => {
       });
     });
 
-    it('shows an error dialog if \'Start\' is clicked and the new run somehow has no pipeline', async () => {
+    it("shows an error dialog if 'Start' is clicked and the new run somehow has no pipeline", async () => {
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       await TestUtils.flushPromises();
 
       tree.find('#startNewRunBtn').simulate('click');
@@ -1174,13 +1288,15 @@ describe('NewRun', () => {
     it('unsets the page to a busy state if starting run fails', async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       TestUtils.makeErrorResponseOnce(startRunSpy, 'test error message');
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       await TestUtils.flushPromises();
 
       tree.find('#startNewRunBtn').simulate('click');
@@ -1193,11 +1309,13 @@ describe('NewRun', () => {
     it('shows snackbar confirmation after experiment is started', async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       await TestUtils.flushPromises();
 
       tree.find('#startNewRunBtn').simulate('click');
@@ -1212,7 +1330,6 @@ describe('NewRun', () => {
   });
 
   describe('starting a new recurring run', () => {
-
     it('changes the title if the new run will recur, based on query param', async () => {
       const props = generateProps();
       props.location.search = `?${QUERY_PARAMS.isRecurring}=1`;
@@ -1235,13 +1352,12 @@ describe('NewRun', () => {
       expect(tree).toMatchSnapshot();
     });
 
-    it('sends a request to start a new recurring run with default periodic schedule when \'Start\' is clicked', async () => {
-
+    it("sends a request to start a new recurring run with default periodic schedule when 'Start' is clicked", async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.isRecurring}=1`
-        + `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.isRecurring}=1` +
+        `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = TestUtils.mountWithRouter(<TestNewRun {...props} />);
       const instance = tree.instance() as TestNewRun;
@@ -1249,7 +1365,10 @@ describe('NewRun', () => {
       instance.handleChange('description')({ target: { value: 'test run description' } });
       await TestUtils.flushPromises();
 
-      tree.find('#startNewRunBtn').at(0).simulate('click');
+      tree
+        .find('#startNewRunBtn')
+        .at(0)
+        .simulate('click');
       // The start APIs are called in a callback triggered by clicking 'Start', so we wait again
       await TestUtils.flushPromises();
 
@@ -1264,13 +1383,15 @@ describe('NewRun', () => {
           parameters: MOCK_PIPELINE.parameters,
           pipeline_id: MOCK_PIPELINE.id,
         },
-        resource_references: [{
-          key: {
-            id: MOCK_EXPERIMENT.id,
-            type: ApiResourceType.EXPERIMENT,
+        resource_references: [
+          {
+            key: {
+              id: MOCK_EXPERIMENT.id,
+              type: ApiResourceType.EXPERIMENT,
+            },
+            relationship: ApiRelationship.OWNER,
           },
-          relationship: ApiRelationship.OWNER,
-        }],
+        ],
         // Default trigger
         trigger: {
           periodic_schedule: {
@@ -1285,90 +1406,105 @@ describe('NewRun', () => {
     it('displays an error message if periodic schedule end date/time is earlier than start date/time', async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.isRecurring}=1`
-        + `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.isRecurring}=1` +
+        `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       tree.setState({
         trigger: {
           periodic_schedule: {
             end_time: new Date(2018, 4, 1),
             start_time: new Date(2018, 5, 1),
           },
-        }
+        },
       });
       await TestUtils.flushPromises();
 
-      expect(tree.state('errorMessage')).toBe('End date/time cannot be earlier than start date/time');
+      expect(tree.state('errorMessage')).toBe(
+        'End date/time cannot be earlier than start date/time',
+      );
     });
 
     it('displays an error message if cron schedule end date/time is earlier than start date/time', async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.isRecurring}=1`
-        + `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.isRecurring}=1` +
+        `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       tree.setState({
         trigger: {
           cron_schedule: {
             end_time: new Date(2018, 4, 1),
             start_time: new Date(2018, 5, 1),
           },
-        }
+        },
       });
       await TestUtils.flushPromises();
 
-      expect(tree.state('errorMessage')).toBe('End date/time cannot be earlier than start date/time');
+      expect(tree.state('errorMessage')).toBe(
+        'End date/time cannot be earlier than start date/time',
+      );
     });
 
     it('displays an error message if max concurrent runs is negative', async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.isRecurring}=1`
-        + `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.isRecurring}=1` +
+        `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       tree.setState({
         maxConcurrentRuns: '-1',
         trigger: {
           periodic_schedule: {
             interval_second: '60',
-          }
+          },
         },
       });
       await TestUtils.flushPromises();
 
-      expect(tree.state('errorMessage')).toBe('For triggered runs, maximum concurrent runs must be a positive number');
+      expect(tree.state('errorMessage')).toBe(
+        'For triggered runs, maximum concurrent runs must be a positive number',
+      );
     });
 
     it('displays an error message if max concurrent runs is not a number', async () => {
       const props = generateProps();
       props.location.search =
-        `?${QUERY_PARAMS.isRecurring}=1`
-        + `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}`
-        + `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
+        `?${QUERY_PARAMS.isRecurring}=1` +
+        `&${QUERY_PARAMS.experimentId}=${MOCK_EXPERIMENT.id}` +
+        `&${QUERY_PARAMS.pipelineId}=${MOCK_PIPELINE.id}`;
 
       tree = shallow(<TestNewRun {...props} />);
-      (tree.instance() as TestNewRun).handleChange('runName')({ target: { value: 'test run name' } });
+      (tree.instance() as TestNewRun).handleChange('runName')({
+        target: { value: 'test run name' },
+      });
       tree.setState({
         maxConcurrentRuns: 'not a number',
         trigger: {
           periodic_schedule: {
             interval_second: '60',
-          }
+          },
         },
       });
       await TestUtils.flushPromises();
 
-      expect(tree.state('errorMessage')).toBe('For triggered runs, maximum concurrent runs must be a positive number');
+      expect(tree.state('errorMessage')).toBe(
+        'For triggered runs, maximum concurrent runs must be a positive number',
+      );
     });
-
   });
 });
diff --git a/frontend/src/pages/NewRun.tsx b/frontend/src/pages/NewRun.tsx
index 398ad680ebe5..5d4ed9a9df7d 100644
--- a/frontend/src/pages/NewRun.tsx
+++ b/frontend/src/pages/NewRun.tsx
@@ -17,6 +17,7 @@
 import * as React from 'react';
 import BusyButton from '../atoms/BusyButton';
 import Button from '@material-ui/core/Button';
+import Buttons from '../lib/Buttons';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -31,7 +32,14 @@ import { TextFieldProps } from '@material-ui/core/TextField';
 import Trigger from '../components/Trigger';
 import { ApiExperiment } from '../apis/experiment';
 import { ApiPipeline, ApiParameter } from '../apis/pipeline';
-import { ApiRun, ApiResourceReference, ApiRelationship, ApiResourceType, ApiRunDetail, ApiPipelineRuntime } from '../apis/run';
+import {
+  ApiRun,
+  ApiResourceReference,
+  ApiRelationship,
+  ApiResourceType,
+  ApiRunDetail,
+  ApiPipelineRuntime,
+} from '../apis/run';
 import { ApiTrigger, ApiJob } from '../apis/job';
 import { Apis, PipelineSortKeys, ExperimentSortKeys } from '../lib/Apis';
 import { Link } from 'react-router-dom';
@@ -43,6 +51,9 @@ import { Workflow } from '../../../frontend/third_party/argo-ui/argo_template';
 import { classes, stylesheet } from 'typestyle';
 import { commonCss, padding, color } from '../Css';
 import { logger, errorToMessage } from '../lib/Utils';
+import UploadPipelineDialog, { ImportMethod } from '../components/UploadPipelineDialog';
+import { CustomRendererProps } from '../components/CustomTable';
+import { Description } from '../components/Description';
 
 interface NewRunState {
   description: string;
@@ -71,6 +82,7 @@ interface NewRunState {
   unconfirmedSelectedExperiment?: ApiExperiment;
   unconfirmedSelectedPipeline?: ApiPipeline;
   useWorkflowFromRun: boolean;
+  uploadDialogOpen: boolean;
   usePipelineFromRunLabel: string;
 }
 
@@ -79,21 +91,27 @@ const css = stylesheet({
     color: color.secondaryText,
   },
   selectorDialog: {
+    // If screen is small, use calc(100% - 120px). If screen is big, use 1200px.
+    maxWidth: 1200, // override default maxWidth to expand this dialog further
     minWidth: 680,
+    width: 'calc(100% - 120px)',
   },
 });
 
-class NewRun extends Page<{}, NewRunState> {
+const descriptionCustomRenderer: React.FC<CustomRendererProps<string>> = props => {
+  return <Description description={props.value || ''} forceInline={true} />;
+};
 
+class NewRun extends Page<{}, NewRunState> {
   private pipelineSelectorColumns = [
     { label: 'Pipeline name', flex: 1, sortKey: PipelineSortKeys.NAME },
-    { label: 'Description', flex: 1.5 },
+    { label: 'Description', flex: 2, customRenderer: descriptionCustomRenderer },
     { label: 'Uploaded on', flex: 1, sortKey: PipelineSortKeys.CREATED_AT },
   ];
 
   private experimentSelectorColumns = [
     { label: 'Experiment name', flex: 1, sortKey: ExperimentSortKeys.NAME },
-    { label: 'Description', flex: 1.5 },
+    { label: 'Description', flex: 2 },
     { label: 'Created at', flex: 1, sortKey: ExperimentSortKeys.CREATED_AT },
   ];
 
@@ -113,6 +131,7 @@ class NewRun extends Page<{}, NewRunState> {
       pipelineName: '',
       pipelineSelectorOpen: false,
       runName: '',
+      uploadDialogOpen: false,
       usePipelineFromRunLabel: 'Using pipeline from cloned run',
       useWorkflowFromRun: false,
     };
@@ -147,16 +166,18 @@ class NewRun extends Page<{}, NewRunState> {
     } = this.state;
 
     const urlParser = new URLParser(this.props);
-    const originalRunId = urlParser.get(QUERY_PARAMS.cloneFromRun) || urlParser.get(QUERY_PARAMS.fromRunId);
+    const originalRunId =
+      urlParser.get(QUERY_PARAMS.cloneFromRun) || urlParser.get(QUERY_PARAMS.fromRunId);
     const pipelineDetailsUrl = originalRunId
       ? RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId + '?', '') +
         urlParser.build({ [QUERY_PARAMS.fromRunId]: originalRunId })
       : '';
 
+    const buttons = new Buttons(this.props, this.refresh.bind(this));
+
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
         <div className={commonCss.scrollContainer}>
-
           <div className={commonCss.header}>Run details</div>
 
           {/* Pipeline selection */}
@@ -167,15 +188,22 @@ class NewRun extends Page<{}, NewRunState> {
             </div>
           )}
           {!useWorkflowFromRun && (
-            <Input value={pipelineName} required={true} label='Pipeline' disabled={true}
+            <Input
+              value={pipelineName}
+              required={true}
+              label='Pipeline'
+              disabled={true}
               variant='outlined'
               InputProps={{
                 classes: { disabled: css.nonEditableInput },
                 endAdornment: (
                   <InputAdornment position='end'>
-                    <Button color='secondary' id='choosePipelineBtn'
+                    <Button
+                      color='secondary'
+                      id='choosePipelineBtn'
                       onClick={() => this.setStateSafe({ pipelineSelectorOpen: true })}
-                      style={{ padding: '3px 5px', margin: 0 }}>
+                      style={{ padding: '3px 5px', margin: 0 }}
+                    >
                       Choose
                     </Button>
                   </InputAdornment>
@@ -186,42 +214,71 @@ class NewRun extends Page<{}, NewRunState> {
           )}
 
           {/* Pipeline selector dialog */}
-          <Dialog open={pipelineSelectorOpen}
+          <Dialog
+            open={pipelineSelectorOpen}
             classes={{ paper: css.selectorDialog }}
             onClose={() => this._pipelineSelectorClosed(false)}
-            PaperProps={{ id: 'pipelineSelectorDialog' }}>
+            PaperProps={{ id: 'pipelineSelectorDialog' }}
+          >
             <DialogContent>
-              <ResourceSelector {...this.props}
+              <ResourceSelector
+                {...this.props}
                 title='Choose a pipeline'
                 filterLabel='Filter pipelines'
                 listApi={async (...args) => {
                   const response = await Apis.pipelineServiceApi.listPipelines(...args);
-                  return { resources: response.pipelines || [], nextPageToken: response.next_page_token || '' };
+                  return {
+                    nextPageToken: response.next_page_token || '',
+                    resources: response.pipelines || [],
+                  };
                 }}
                 columns={this.pipelineSelectorColumns}
                 emptyMessage='No pipelines found. Upload a pipeline and then try again.'
                 initialSortColumn={PipelineSortKeys.CREATED_AT}
                 selectionChanged={(selectedPipeline: ApiPipeline) =>
-                  this.setStateSafe({ unconfirmedSelectedPipeline: selectedPipeline })} />
+                  this.setStateSafe({ unconfirmedSelectedPipeline: selectedPipeline })
+                }
+                toolbarActionMap={buttons
+                  .upload(() =>
+                    this.setStateSafe({ pipelineSelectorOpen: false, uploadDialogOpen: true }),
+                  )
+                  .getToolbarActionMap()}
+              />
             </DialogContent>
             <DialogActions>
-              <Button id='cancelPipelineSelectionBtn' onClick={() => this._pipelineSelectorClosed(false)} color='secondary'>
+              <Button
+                id='cancelPipelineSelectionBtn'
+                onClick={() => this._pipelineSelectorClosed(false)}
+                color='secondary'
+              >
                 Cancel
               </Button>
-              <Button id='usePipelineBtn' onClick={() => this._pipelineSelectorClosed(true)}
-                color='secondary' disabled={!unconfirmedSelectedPipeline}>
+              <Button
+                id='usePipelineBtn'
+                onClick={() => this._pipelineSelectorClosed(true)}
+                color='secondary'
+                disabled={!unconfirmedSelectedPipeline}
+              >
                 Use this pipeline
               </Button>
             </DialogActions>
           </Dialog>
 
+          <UploadPipelineDialog
+            open={this.state.uploadDialogOpen}
+            onClose={this._uploadDialogClosed.bind(this)}
+          />
+
           {/* Experiment selector dialog */}
-          <Dialog open={experimentSelectorOpen}
+          <Dialog
+            open={experimentSelectorOpen}
             classes={{ paper: css.selectorDialog }}
             onClose={() => this._experimentSelectorClosed(false)}
-            PaperProps={{ id: 'experimentSelectorDialog' }}>
+            PaperProps={{ id: 'experimentSelectorDialog' }}
+          >
             <DialogContent>
-              <ResourceSelector {...this.props}
+              <ResourceSelector
+                {...this.props}
                 title='Choose an experiment'
                 filterLabel='Filter experiments'
                 listApi={async (...args) => {
@@ -235,36 +292,64 @@ class NewRun extends Page<{}, NewRunState> {
                 emptyMessage='No experiments found. Create an experiment and then try again.'
                 initialSortColumn={ExperimentSortKeys.CREATED_AT}
                 selectionChanged={(selectedExperiment: ApiExperiment) =>
-                  this.setStateSafe({ unconfirmedSelectedExperiment: selectedExperiment })} />
+                  this.setStateSafe({ unconfirmedSelectedExperiment: selectedExperiment })
+                }
+              />
             </DialogContent>
             <DialogActions>
-              <Button id='cancelExperimentSelectionBtn' onClick={() => this._experimentSelectorClosed(false)} color='secondary'>
+              <Button
+                id='cancelExperimentSelectionBtn'
+                onClick={() => this._experimentSelectorClosed(false)}
+                color='secondary'
+              >
                 Cancel
               </Button>
-              <Button id='useExperimentBtn' onClick={() => this._experimentSelectorClosed(true)}
-                color='secondary' disabled={!unconfirmedSelectedExperiment}>
+              <Button
+                id='useExperimentBtn'
+                onClick={() => this._experimentSelectorClosed(true)}
+                color='secondary'
+                disabled={!unconfirmedSelectedExperiment}
+              >
                 Use this experiment
               </Button>
             </DialogActions>
           </Dialog>
 
           {/* Run metadata inputs */}
-          <Input label={isRecurringRun ? 'Recurring run config name' : 'Run name'} required={true}
-            onChange={this.handleChange('runName')} autoFocus={true} value={runName} variant='outlined' />
-          <Input label='Description (optional)' multiline={true}
-            onChange={this.handleChange('description')} value={description} variant='outlined' />
+          <Input
+            label={isRecurringRun ? 'Recurring run config name' : 'Run name'}
+            required={true}
+            onChange={this.handleChange('runName')}
+            autoFocus={true}
+            value={runName}
+            variant='outlined'
+          />
+          <Input
+            label='Description (optional)'
+            multiline={true}
+            onChange={this.handleChange('description')}
+            value={description}
+            variant='outlined'
+          />
 
           {/* Experiment selection */}
           <div>This run will be associated with the following experiment</div>
-          <Input value={experimentName} required={true} label='Experiment' disabled={true}
+          <Input
+            value={experimentName}
+            required={true}
+            label='Experiment'
+            disabled={true}
             variant='outlined'
             InputProps={{
               classes: { disabled: css.nonEditableInput },
               endAdornment: (
                 <InputAdornment position='end'>
-                  <Button color='secondary' id='chooseExperimentBtn'
+                  <Button
+                    color='secondary'
+                    id='chooseExperimentBtn'
                     onClick={() => this.setStateSafe({ experimentSelectorOpen: true })}
-                    style={{ padding: '3px 5px', margin: 0 }}>
+                    style={{ padding: '3px 5px', margin: 0 }}
+                  >
                     Choose
                   </Button>
                 </InputAdornment>
@@ -275,17 +360,23 @@ class NewRun extends Page<{}, NewRunState> {
 
           {/* One-off/Recurring Run Type */}
           <div className={commonCss.header}>Run Type</div>
-          {isClone && (
-            <span>{isRecurringRun ? 'Recurring' : 'One-off'}</span>
-          )}
+          {isClone && <span>{isRecurringRun ? 'Recurring' : 'One-off'}</span>}
           {!isClone && (
             <React.Fragment>
-              <FormControlLabel id='oneOffToggle' label='One-off' control={<Radio color='primary' />}
+              <FormControlLabel
+                id='oneOffToggle'
+                label='One-off'
+                control={<Radio color='primary' />}
                 onChange={() => this._updateRecurringRunState(false)}
-                checked={!isRecurringRun} />
-              <FormControlLabel id='recurringToggle' label='Recurring' control={<Radio color='primary' />}
+                checked={!isRecurringRun}
+              />
+              <FormControlLabel
+                id='recurringToggle'
+                label='Recurring'
+                control={<Radio color='primary' />}
                 onChange={() => this._updateRecurringRunState(true)}
-                checked={isRecurringRun} />
+                checked={isRecurringRun}
+              />
             </React.Fragment>
           )}
 
@@ -295,10 +386,17 @@ class NewRun extends Page<{}, NewRunState> {
               <div className={commonCss.header}>Run trigger</div>
               <div>Choose a method by which new runs will be triggered</div>
 
-              <Trigger onChange={(trigger, maxConcurrentRuns) => this.setStateSafe({
-                maxConcurrentRuns,
-                trigger,
-              }, this._validate.bind(this))} />
+              <Trigger
+                onChange={(trigger, maxConcurrentRuns) =>
+                  this.setStateSafe(
+                    {
+                      maxConcurrentRuns,
+                      trigger,
+                    },
+                    this._validate.bind(this),
+                  )
+                }
+              />
             </React.Fragment>
           )}
 
@@ -311,27 +409,37 @@ class NewRun extends Page<{}, NewRunState> {
 
           {/* Create/Cancel buttons */}
           <div className={classes(commonCss.flex, padding(20, 'tb'))}>
-            <BusyButton id='startNewRunBtn' disabled={!!errorMessage}
+            <BusyButton
+              id='startNewRunBtn'
+              disabled={!!errorMessage}
               busy={this.state.isBeingStarted}
-              className={commonCss.buttonAction} title='Start'
-              onClick={this._start.bind(this)} />
-            <Button id='exitNewRunPageBtn' onClick={() => {
-              this.props.history.push(
-                !!this.state.experiment
-                  ? RoutePage.EXPERIMENT_DETAILS.replace(
-                    ':' + RouteParams.experimentId, this.state.experiment.id!)
-                  : RoutePage.RUNS);
-            }}>
+              className={commonCss.buttonAction}
+              title='Start'
+              onClick={this._start.bind(this)}
+            />
+            <Button
+              id='exitNewRunPageBtn'
+              onClick={() => {
+                this.props.history.push(
+                  !!this.state.experiment
+                    ? RoutePage.EXPERIMENT_DETAILS.replace(
+                        ':' + RouteParams.experimentId,
+                        this.state.experiment.id!,
+                      )
+                    : RoutePage.RUNS,
+                );
+              }}
+            >
               {isFirstRunInExperiment ? 'Skip this step' : 'Cancel'}
             </Button>
             <div className={classes(padding(20, 'r'))} style={{ color: 'red' }}>
               {errorMessage}
             </div>
-            {this._areParametersMissing() &&
+            {this._areParametersMissing() && (
               <div id='missing-parameters-message' style={{ color: 'orange' }}>
                 Some parameters are missing values
               </div>
-            }
+            )}
           </div>
         </div>
       </div>
@@ -363,19 +471,17 @@ class NewRun extends Page<{}, NewRunState> {
     const embeddedPipelineRunId = urlParser.get(QUERY_PARAMS.fromRunId);
     if (originalRunId) {
       // If we are cloning a run, fetch the original
-        try {
-          const originalRun = await Apis.runServiceApi.getRun(originalRunId);
-          await this._prepareFormFromClone(originalRun.run, originalRun.pipeline_runtime);
-          // If the querystring did not contain an experiment ID, try to get one from the run.
-          if (!experimentId) {
-            experimentId = RunUtils.getFirstExperimentReferenceId(originalRun.run);
-          }
-        } catch (err) {
-          await this.showPageError(`Error: failed to retrieve original run: ${originalRunId}.`, err);
-          logger.error(`Failed to retrieve original run: ${originalRunId}`, err);
+      try {
+        const originalRun = await Apis.runServiceApi.getRun(originalRunId);
+        await this._prepareFormFromClone(originalRun.run, originalRun.pipeline_runtime);
+        // If the querystring did not contain an experiment ID, try to get one from the run.
+        if (!experimentId) {
+          experimentId = RunUtils.getFirstExperimentReferenceId(originalRun.run);
         }
-
-
+      } catch (err) {
+        await this.showPageError(`Error: failed to retrieve original run: ${originalRunId}.`, err);
+        logger.error(`Failed to retrieve original run: ${originalRunId}`, err);
+      }
     } else if (originalRecurringRunId) {
       // If we are cloning a recurring run, fetch the original
       try {
@@ -385,7 +491,10 @@ class NewRun extends Page<{}, NewRunState> {
           experimentId = RunUtils.getFirstExperimentReferenceId(originalRun);
         }
       } catch (err) {
-        await this.showPageError(`Error: failed to retrieve original recurring run: ${originalRunId}.`, err);
+        await this.showPageError(
+          `Error: failed to retrieve original recurring run: ${originalRunId}.`,
+          err,
+        );
         logger.error(`Failed to retrieve original recurring run: ${originalRunId}`, err);
       }
     } else if (embeddedPipelineRunId) {
@@ -399,12 +508,14 @@ class NewRun extends Page<{}, NewRunState> {
           this.setStateSafe({
             parameters: pipeline.parameters || [],
             pipeline,
-            pipelineName: (pipeline && pipeline.name) || ''
+            pipelineName: (pipeline && pipeline.name) || '',
           });
         } catch (err) {
           urlParser.clear(QUERY_PARAMS.pipelineId);
           await this.showPageError(
-            `Error: failed to retrieve pipeline: ${possiblePipelineId}.`, err);
+            `Error: failed to retrieve pipeline: ${possiblePipelineId}.`,
+            err,
+          );
           logger.error(`Failed to retrieve pipeline: ${possiblePipelineId}`, err);
         }
       }
@@ -423,7 +534,9 @@ class NewRun extends Page<{}, NewRunState> {
         });
       } catch (err) {
         await this.showPageError(
-          `Error: failed to retrieve associated experiment: ${experimentId}.`, err);
+          `Error: failed to retrieve associated experiment: ${experimentId}.`,
+          err,
+        );
         logger.error(`Failed to retrieve associated experiment: ${experimentId}`, err);
       }
     }
@@ -446,8 +559,10 @@ class NewRun extends Page<{}, NewRunState> {
 
   public handleChange = (name: string) => (event: any) => {
     const value = (event.target as TextFieldProps).value;
-    this.setStateSafe({ [name]: value, } as any, () => { this._validate(); });
-  }
+    this.setStateSafe({ [name]: value } as any, () => {
+      this._validate();
+    });
+  };
 
   protected async _experimentSelectorClosed(confirmed: boolean): Promise<void> {
     let { experiment } = this.state;
@@ -458,7 +573,7 @@ class NewRun extends Page<{}, NewRunState> {
     this.setStateSafe({
       experiment,
       experimentName: (experiment && experiment.name) || '',
-      experimentSelectorOpen: false
+      experimentSelectorOpen: false,
     });
   }
 
@@ -469,12 +584,15 @@ class NewRun extends Page<{}, NewRunState> {
       parameters = pipeline.parameters || [];
     }
 
-    this.setStateSafe({
-      parameters,
-      pipeline,
-      pipelineName: (pipeline && pipeline.name) || '',
-      pipelineSelectorOpen: false
-    }, () => this._validate());
+    this.setStateSafe(
+      {
+        parameters,
+        pipeline,
+        pipelineName: (pipeline && pipeline.name) || '',
+        pipelineSelectorOpen: false,
+      },
+      () => this._validate(),
+    );
   }
 
   protected _updateRecurringRunState(isRecurringRun: boolean): void {
@@ -490,6 +608,45 @@ class NewRun extends Page<{}, NewRunState> {
     this.setStateSafe({ parameters });
   }
 
+  private async _uploadDialogClosed(
+    confirmed: boolean,
+    name: string,
+    file: File | null,
+    url: string,
+    method: ImportMethod,
+    description?: string,
+  ): Promise<boolean> {
+    if (
+      !confirmed ||
+      (method === ImportMethod.LOCAL && !file) ||
+      (method === ImportMethod.URL && !url)
+    ) {
+      this.setStateSafe({ pipelineSelectorOpen: true, uploadDialogOpen: false });
+      return false;
+    }
+
+    try {
+      const uploadedPipeline =
+        method === ImportMethod.LOCAL
+          ? await Apis.uploadPipeline(name, file!)
+          : await Apis.pipelineServiceApi.createPipeline({ name, url: { pipeline_url: url } });
+      this.setStateSafe(
+        {
+          pipeline: uploadedPipeline,
+          pipelineName: (uploadedPipeline && uploadedPipeline.name) || '',
+          pipelineSelectorOpen: false,
+          uploadDialogOpen: false,
+        },
+        () => this._validate(),
+      );
+      return true;
+    } catch (err) {
+      const errorMessage = await errorToMessage(err);
+      this.showErrorDialog('Failed to upload pipeline', errorMessage);
+      return false;
+    }
+  }
+
   private async _prepareFormFromEmbeddedPipeline(embeddedPipelineRunId: string): Promise<void> {
     let embeddedPipelineSpec: string | null;
     let runWithEmbeddedPipeline: ApiRunDetail;
@@ -499,14 +656,17 @@ class NewRun extends Page<{}, NewRunState> {
       embeddedPipelineSpec = RunUtils.getWorkflowManifest(runWithEmbeddedPipeline.run);
     } catch (err) {
       await this.showPageError(
-        `Error: failed to retrieve the specified run: ${embeddedPipelineRunId}.`, err);
+        `Error: failed to retrieve the specified run: ${embeddedPipelineRunId}.`,
+        err,
+      );
       logger.error(`Failed to retrieve the specified run: ${embeddedPipelineRunId}`, err);
       return;
     }
 
     if (!embeddedPipelineSpec) {
       await this.showPageError(
-        `Error: somehow the run provided in the query params: ${embeddedPipelineRunId} had no embedded pipeline.`);
+        `Error: somehow the run provided in the query params: ${embeddedPipelineRunId} had no embedded pipeline.`,
+      );
       return;
     }
 
@@ -521,15 +681,23 @@ class NewRun extends Page<{}, NewRunState> {
       });
     } catch (err) {
       await this.showPageError(
-        `Error: failed to parse the embedded pipeline's spec: ${embeddedPipelineSpec}.`, err);
-      logger.error(`Failed to parse the embedded pipeline's spec from run: ${embeddedPipelineRunId}`, err);
+        `Error: failed to parse the embedded pipeline's spec: ${embeddedPipelineSpec}.`,
+        err,
+      );
+      logger.error(
+        `Failed to parse the embedded pipeline's spec from run: ${embeddedPipelineRunId}`,
+        err,
+      );
       return;
     }
 
     this._validate();
   }
 
-  private async _prepareFormFromClone(originalRun?: ApiRun | ApiJob, runtime?: ApiPipelineRuntime): Promise<void> {
+  private async _prepareFormFromClone(
+    originalRun?: ApiRun | ApiJob,
+    runtime?: ApiPipelineRuntime,
+  ): Promise<void> {
     if (!originalRun) {
       logger.error('Could not get cloned run details');
       return;
@@ -552,8 +720,10 @@ class NewRun extends Page<{}, NewRunState> {
         name = pipeline.name || '';
       } catch (err) {
         await this.showPageError(
-          'Error: failed to find a pipeline corresponding to that of the original run:'
-          + ` ${originalRun.id}.`, err);
+          'Error: failed to find a pipeline corresponding to that of the original run:' +
+            ` ${originalRun.id}.`,
+          err,
+        );
         return;
       }
     } else if (embeddedPipelineSpec) {
@@ -561,13 +731,13 @@ class NewRun extends Page<{}, NewRunState> {
         workflowFromRun = JSON.parse(embeddedPipelineSpec);
         name = workflowFromRun!.metadata.name || '';
       } catch (err) {
-        await this.showPageError('Error: failed to read the clone run\'s pipeline definition.', err);
+        await this.showPageError("Error: failed to read the clone run's pipeline definition.", err);
         return;
       }
       useWorkflowFromRun = true;
       usePipelineFromRunLabel = 'Using pipeline from cloned run';
     } else {
-      await this.showPageError('Could not find the cloned run\'s pipeline definition.');
+      await this.showPageError("Could not find the cloned run's pipeline definition.");
       return;
     }
 
@@ -594,7 +764,6 @@ class NewRun extends Page<{}, NewRunState> {
     this._validate();
   }
 
-
   private _runParametersMessage(): string {
     if (this.state.pipeline || this.state.workflowFromRun) {
       if (this.state.parameters.length) {
@@ -628,7 +797,8 @@ class NewRun extends Page<{}, NewRunState> {
       name: this.state.runName,
       pipeline_spec: {
         parameters: (this.state.parameters || []).map(p => {
-          p.value = (p.value || '').trim(); return p;
+          p.value = (p.value || '').trim();
+          return p;
         }),
         pipeline_id: this.state.pipeline ? this.state.pipeline.id : undefined,
         workflow_manifest: this.state.useWorkflowFromRun
@@ -665,7 +835,10 @@ class NewRun extends Page<{}, NewRunState> {
       if (this.state.experiment) {
         this.props.history.push(
           RoutePage.EXPERIMENT_DETAILS.replace(
-            ':' + RouteParams.experimentId, this.state.experiment.id!));
+            ':' + RouteParams.experimentId,
+            this.state.experiment.id!,
+          ),
+        );
       } else {
         this.props.history.push(RoutePage.RUNS);
       }
@@ -679,7 +852,8 @@ class NewRun extends Page<{}, NewRunState> {
   private _getCloneName(oldName: string): string {
     const numberRegex = /Clone(?: \(([0-9]*)\))? of (.*)/;
     const match = oldName.match(numberRegex);
-    if (!match) { // No match, add Clone prefix
+    if (!match) {
+      // No match, add Clone prefix
       return 'Clone of ' + oldName;
     } else {
       const cloneNumber = match[1] ? +match[1] : 1;
@@ -700,10 +874,12 @@ class NewRun extends Page<{}, NewRunState> {
 
       const hasTrigger = trigger && (!!trigger.cron_schedule || !!trigger.periodic_schedule);
       if (hasTrigger) {
-        const startDate = !!trigger!.cron_schedule ?
-          trigger!.cron_schedule!.start_time : trigger!.periodic_schedule!.start_time;
-        const endDate = !!trigger!.cron_schedule ?
-          trigger!.cron_schedule!.end_time : trigger!.periodic_schedule!.end_time;
+        const startDate = !!trigger!.cron_schedule
+          ? trigger!.cron_schedule!.start_time
+          : trigger!.periodic_schedule!.start_time;
+        const endDate = !!trigger!.cron_schedule
+          ? trigger!.cron_schedule!.end_time
+          : trigger!.periodic_schedule!.end_time;
         if (startDate && endDate && startDate > endDate) {
           throw new Error('End date/time cannot be earlier than start date/time');
         }
diff --git a/frontend/src/pages/Page.tsx b/frontend/src/pages/Page.tsx
index 44d0b388b3e5..d66b9a400673 100644
--- a/frontend/src/pages/Page.tsx
+++ b/frontend/src/pages/Page.tsx
@@ -57,7 +57,11 @@ export abstract class Page<P, S> extends React.Component<P & PageProps, S> {
     this.props.updateBanner({});
   }
 
-  public async showPageError(message: string, error?: Error, mode?: 'error' | 'warning'): Promise<void> {
+  public async showPageError(
+    message: string,
+    error?: Error,
+    mode?: 'error' | 'warning',
+  ): Promise<void> {
     const errorMessage = await errorToMessage(error);
     this.props.updateBanner({
       additionalInfo: errorMessage ? errorMessage : undefined,
diff --git a/frontend/src/pages/PipelineDetails.test.tsx b/frontend/src/pages/PipelineDetails.test.tsx
index 21861a8bc3eb..1a9a16a197b8 100644
--- a/frontend/src/pages/PipelineDetails.test.tsx
+++ b/frontend/src/pages/PipelineDetails.test.tsx
@@ -53,8 +53,16 @@ describe('PipelineDetails', () => {
       url: '',
     };
     const location = { search: fromRunSpec ? `?${QUERY_PARAMS.fromRunId}=test-run-id` : '' } as any;
-    const pageProps = TestUtils.generatePageProps(PipelineDetails, location, match, historyPushSpy,
-      updateBannerSpy, updateDialogSpy, updateToolbarSpy, updateSnackbarSpy);
+    const pageProps = TestUtils.generatePageProps(
+      PipelineDetails,
+      location,
+      match,
+      historyPushSpy,
+      updateBannerSpy,
+      updateDialogSpy,
+      updateToolbarSpy,
+      updateSnackbarSpy,
+    );
     return pageProps;
   }
 
@@ -76,7 +84,7 @@ describe('PipelineDetails', () => {
         id: 'test-run-id',
         name: 'test run',
         pipeline_spec: {
-          pipeline_id: 'run-pipeline-id'
+          pipeline_id: 'run-pipeline-id',
         },
       },
     };
@@ -84,7 +92,8 @@ describe('PipelineDetails', () => {
     getPipelineSpy.mockImplementation(() => Promise.resolve(testPipeline));
     getRunSpy.mockImplementation(() => Promise.resolve(testRun));
     getExperimentSpy.mockImplementation(() =>
-      Promise.resolve({ id: 'test-experiment-id', name: 'test experiment' } as ApiExperiment));
+      Promise.resolve({ id: 'test-experiment-id', name: 'test experiment' } as ApiExperiment),
+    );
     getTemplateSpy.mockImplementation(() => Promise.resolve({ template: 'test template' }));
     createGraphSpy.mockImplementation(() => new graphlib.Graph());
   });
@@ -108,32 +117,41 @@ describe('PipelineDetails', () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
     await getTemplateSpy;
     await TestUtils.flushPromises();
-    expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      breadcrumbs: [{ displayName: 'Pipelines', href: RoutePage.PIPELINES }],
-      pageTitle: testPipeline.name,
-    }));
-  });
-
-  it('shows all runs breadcrumbs, and "Pipeline details" as page title when the pipeline ' +
-    'comes from a run spec that does not have an experiment', async () => {
+    expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        breadcrumbs: [{ displayName: 'Pipelines', href: RoutePage.PIPELINES }],
+        pageTitle: testPipeline.name,
+      }),
+    );
+  });
+
+  it(
+    'shows all runs breadcrumbs, and "Pipeline details" as page title when the pipeline ' +
+      'comes from a run spec that does not have an experiment',
+    async () => {
       tree = shallow(<PipelineDetails {...generateProps(true)} />);
       await getRunSpy;
       await getTemplateSpy;
       await TestUtils.flushPromises();
-      expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        breadcrumbs: [
-          { displayName: 'All runs', href: RoutePage.RUNS },
-          {
-            displayName: testRun.run!.name, href: RoutePage.RUN_DETAILS.replace(
-              ':' + RouteParams.runId, testRun.run!.id!)
-          },
-        ],
-        pageTitle: 'Pipeline details',
-      }));
-    });
-
-  it('shows all runs breadcrumbs, and "Pipeline details" as page title when the pipeline ' +
-    'comes from a run spec that has an experiment', async () => {
+      expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          breadcrumbs: [
+            { displayName: 'All runs', href: RoutePage.RUNS },
+            {
+              displayName: testRun.run!.name,
+              href: RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, testRun.run!.id!),
+            },
+          ],
+          pageTitle: 'Pipeline details',
+        }),
+      );
+    },
+  );
+
+  it(
+    'shows all runs breadcrumbs, and "Pipeline details" as page title when the pipeline ' +
+      'comes from a run spec that has an experiment',
+    async () => {
       testRun.run!.resource_references = [
         { key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT } },
       ];
@@ -142,21 +160,27 @@ describe('PipelineDetails', () => {
       await getExperimentSpy;
       await getTemplateSpy;
       await TestUtils.flushPromises();
-      expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-        breadcrumbs: [
-          { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
-          {
-            displayName: 'test experiment', href: RoutePage.EXPERIMENT_DETAILS.replace(
-              ':' + RouteParams.experimentId, 'test-experiment-id')
-          },
-          {
-            displayName: testRun.run!.name, href: RoutePage.RUN_DETAILS.replace(
-              ':' + RouteParams.runId, testRun.run!.id!)
-          },
-        ],
-        pageTitle: 'Pipeline details',
-      }));
-    });
+      expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          breadcrumbs: [
+            { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
+            {
+              displayName: 'test experiment',
+              href: RoutePage.EXPERIMENT_DETAILS.replace(
+                ':' + RouteParams.experimentId,
+                'test-experiment-id',
+              ),
+            },
+            {
+              displayName: testRun.run!.name,
+              href: RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, testRun.run!.id!),
+            },
+          ],
+          pageTitle: 'Pipeline details',
+        }),
+      );
+    },
+  );
 
   it('parses the workflow source in embedded pipeline spec as JSON and then converts it to YAML', async () => {
     testRun.run!.pipeline_spec = {
@@ -168,7 +192,8 @@ describe('PipelineDetails', () => {
     await TestUtils.flushPromises();
 
     expect(tree.state('templateString')).toBe(
-      'spec:\n  arguments:\n    parameters:\n      - name: output\n');
+      'spec:\n  arguments:\n    parameters:\n      - name: output\n',
+    );
   });
 
   it('shows load error banner when failing to parse the workflow source in embedded pipeline spec', async () => {
@@ -181,11 +206,15 @@ describe('PipelineDetails', () => {
     await TestUtils.flushPromises();
 
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear banner, once to show error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'Unexpected token o in JSON at position 1',
-      message: `Failed to parse pipeline spec from run with ID: ${testRun.run!.id}. Click Details for more information.`,
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'Unexpected token o in JSON at position 1',
+        message: `Failed to parse pipeline spec from run with ID: ${
+          testRun.run!.id
+        }. Click Details for more information.`,
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows load error banner when failing to get run details, when loading from run spec', async () => {
@@ -194,11 +223,13 @@ describe('PipelineDetails', () => {
     await getPipelineSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear banner, once to show error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops',
-      message: 'Cannot retrieve run details. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops',
+        message: 'Cannot retrieve run details. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows load error banner when failing to get experiment details, when loading from run spec', async () => {
@@ -210,11 +241,13 @@ describe('PipelineDetails', () => {
     await getPipelineSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear banner, once to show error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops',
-      message: 'Cannot retrieve run details. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops',
+        message: 'Cannot retrieve run details. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('uses an empty string and does not show error when getTemplate response is empty', async () => {
@@ -237,11 +270,13 @@ describe('PipelineDetails', () => {
     await getPipelineSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear banner, once to show error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops',
-      message: 'Cannot retrieve pipeline details. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops',
+        message: 'Cannot retrieve pipeline details. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows load error banner when failing to get pipeline template', async () => {
@@ -250,11 +285,13 @@ describe('PipelineDetails', () => {
     await getPipelineSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear banner, once to show error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops',
-      message: 'Cannot retrieve pipeline template. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops',
+        message: 'Cannot retrieve pipeline template. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows no graph error banner when failing to parse graph', async () => {
@@ -263,11 +300,13 @@ describe('PipelineDetails', () => {
     await getTemplateSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear banner, once to show error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'bad graph',
-      message: 'Error: failed to generate Pipeline graph. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'bad graph',
+        message: 'Error: failed to generate Pipeline graph. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('clears the error banner when refreshing the page', async () => {
@@ -275,11 +314,13 @@ describe('PipelineDetails', () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
     await TestUtils.flushPromises();
 
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops',
-      message: 'Cannot retrieve pipeline template. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops',
+        message: 'Cannot retrieve pipeline template. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
 
     (tree.instance() as PipelineDetails).refresh();
 
@@ -329,7 +370,7 @@ describe('PipelineDetails', () => {
     expect(newExperimentBtn).toBeDefined();
   });
 
-  it('has \'create run\' toolbar button if viewing an embedded pipeline', async () => {
+  it("has 'create run' toolbar button if viewing an embedded pipeline", async () => {
     tree = shallow(<PipelineDetails {...generateProps(true)} />);
     await getTemplateSpy;
     await TestUtils.flushPromises();
@@ -347,10 +388,11 @@ describe('PipelineDetails', () => {
     newRunBtn!.action();
     expect(historyPushSpy).toHaveBeenCalledTimes(1);
     expect(historyPushSpy).toHaveBeenLastCalledWith(
-      RoutePage.NEW_RUN + `?${QUERY_PARAMS.fromRunId}=${testRun.run!.id}`);
+      RoutePage.NEW_RUN + `?${QUERY_PARAMS.fromRunId}=${testRun.run!.id}`,
+    );
   });
 
-  it('has \'create run\' toolbar button if not viewing an embedded pipeline', async () => {
+  it("has 'create run' toolbar button if not viewing an embedded pipeline", async () => {
     tree = shallow(<PipelineDetails {...generateProps(false)} />);
     await getTemplateSpy;
     await TestUtils.flushPromises();
@@ -364,12 +406,28 @@ describe('PipelineDetails', () => {
     tree = shallow(<PipelineDetails {...generateProps(false)} />);
     await TestUtils.flushPromises();
     const instance = tree.instance() as PipelineDetails;
-    const newRunFromPipelineBtn =
-      instance.getInitialToolbarState().actions[ButtonKeys.NEW_RUN_FROM_PIPELINE];
+    const newRunFromPipelineBtn = instance.getInitialToolbarState().actions[
+      ButtonKeys.NEW_RUN_FROM_PIPELINE
+    ];
+    newRunFromPipelineBtn.action();
+    expect(historyPushSpy).toHaveBeenCalledTimes(1);
+    expect(historyPushSpy).toHaveBeenLastCalledWith(
+      RoutePage.NEW_RUN + `?${QUERY_PARAMS.pipelineId}=${testPipeline.id}`,
+    );
+  });
+
+  it('clicking new run button when viewing half-loaded page navigates to the new run page with run ID', async () => {
+    tree = shallow(<PipelineDetails {...generateProps(false)} />);
+    // Intentionally don't wait until all network requests finish.
+    const instance = tree.instance() as PipelineDetails;
+    const newRunFromPipelineBtn = instance.getInitialToolbarState().actions[
+      ButtonKeys.NEW_RUN_FROM_PIPELINE
+    ];
     newRunFromPipelineBtn.action();
     expect(historyPushSpy).toHaveBeenCalledTimes(1);
     expect(historyPushSpy).toHaveBeenLastCalledWith(
-      RoutePage.NEW_RUN + `?${QUERY_PARAMS.pipelineId}=${testPipeline.id}`);
+      RoutePage.NEW_RUN + `?${QUERY_PARAMS.pipelineId}=${testPipeline.id}`,
+    );
   });
 
   it('clicking new experiment button navigates to new experiment page', async () => {
@@ -381,7 +439,8 @@ describe('PipelineDetails', () => {
     await newExperimentBtn.action();
     expect(historyPushSpy).toHaveBeenCalledTimes(1);
     expect(historyPushSpy).toHaveBeenLastCalledWith(
-      RoutePage.NEW_EXPERIMENT + `?${QUERY_PARAMS.pipelineId}=${testPipeline.id}`);
+      RoutePage.NEW_EXPERIMENT + `?${QUERY_PARAMS.pipelineId}=${testPipeline.id}`,
+    );
   });
 
   it('has a delete button', async () => {
@@ -395,19 +454,23 @@ describe('PipelineDetails', () => {
 
   it('shows delete confirmation dialog when delete buttin is clicked', async () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
-    const deleteBtn = (tree.instance() as PipelineDetails)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineDetails).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     expect(updateDialogSpy).toHaveBeenCalledTimes(1);
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      title: 'Delete this pipeline?',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        title: 'Delete this pipeline?',
+      }),
+    );
   });
 
   it('does not call delete API for selected pipeline when delete dialog is canceled', async () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
-    const deleteBtn = (tree.instance() as PipelineDetails)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineDetails).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const cancelBtn = call.buttons.find((b: any) => b.text === 'Cancel');
@@ -419,8 +482,9 @@ describe('PipelineDetails', () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
     await getTemplateSpy;
     await TestUtils.flushPromises();
-    const deleteBtn = (tree.instance() as PipelineDetails)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineDetails).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -434,34 +498,40 @@ describe('PipelineDetails', () => {
     TestUtils.makeErrorResponseOnce(deletePipelineSpy, 'woops');
     await getTemplateSpy;
     await TestUtils.flushPromises();
-    const deleteBtn = (tree.instance() as PipelineDetails)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineDetails).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
     await confirmBtn.onClick();
     expect(updateDialogSpy).toHaveBeenCalledTimes(2); // Delete dialog + error dialog
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'Failed to delete pipeline: test-pipeline-id with error: "woops"',
-      title: 'Failed to delete pipeline',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'Failed to delete pipeline: test-pipeline-id with error: "woops"',
+        title: 'Failed to delete pipeline',
+      }),
+    );
   });
 
   it('shows success snackbar if deletion succeeds', async () => {
     tree = shallow(<PipelineDetails {...generateProps()} />);
     await getTemplateSpy;
     await TestUtils.flushPromises();
-    const deleteBtn = (tree.instance() as PipelineDetails)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineDetails).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
     await confirmBtn.onClick();
     expect(updateSnackbarSpy).toHaveBeenCalledTimes(1);
-    expect(updateSnackbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      message: 'Delete succeeded for this pipeline',
-      open: true,
-    }));
+    expect(updateSnackbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        message: 'Delete succeeded for this pipeline',
+        open: true,
+      }),
+    );
   });
 
   it('opens side panel on clicked node, shows message when node is not found in graph', async () => {
diff --git a/frontend/src/pages/PipelineDetails.tsx b/frontend/src/pages/PipelineDetails.tsx
index 5e9b4e60abfa..0a8d4f20ce92 100644
--- a/frontend/src/pages/PipelineDetails.tsx
+++ b/frontend/src/pages/PipelineDetails.tsx
@@ -42,6 +42,7 @@ import 'brace';
 import 'brace/ext/language_tools';
 import 'brace/mode/yaml';
 import 'brace/theme/github';
+import { Description } from '../components/Description';
 
 interface PipelineDetailsState {
   graph?: dagre.graphlib.Graph;
@@ -102,7 +103,6 @@ export const css = stylesheet({
 });
 
 class PipelineDetails extends Page<{}, PipelineDetailsState> {
-
   constructor(props: any) {
     super(props);
 
@@ -118,25 +118,35 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
   public getInitialToolbarState(): ToolbarProps {
     const buttons = new Buttons(this.props, this.refresh.bind(this));
     const fromRunId = new URLParser(this.props).get(QUERY_PARAMS.fromRunId);
-    buttons.newRunFromPipeline(() => this.state.pipeline ? this.state.pipeline.id! : '');
+    buttons.newRunFromPipeline(() => {
+      const pipelineIdFromParams = this.props.match.params[RouteParams.pipelineId];
+      return this.state.pipeline
+        ? this.state.pipeline.id!
+        : pipelineIdFromParams
+        ? pipelineIdFromParams
+        : '';
+    });
 
     if (fromRunId) {
       return {
         actions: buttons.getToolbarActionMap(),
         breadcrumbs: [
-          { displayName: fromRunId, href: RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, fromRunId) }
+          {
+            displayName: fromRunId,
+            href: RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, fromRunId),
+          },
         ],
         pageTitle: 'Pipeline details',
       };
     } else {
       // Add buttons for creating experiment and deleting pipeline
       buttons
-        .newExperiment(() => this.state.pipeline ? this.state.pipeline.id! : '')
+        .newExperiment(() => (this.state.pipeline ? this.state.pipeline.id! : ''))
         .delete(
-          () => this.state.pipeline ? [this.state.pipeline.id!] : [],
+          () => (this.state.pipeline ? [this.state.pipeline.id!] : []),
           'pipeline',
           this._deleteCallback.bind(this),
-          true, /* useCurrentResource */
+          true /* useCurrentResource */,
         );
       return {
         actions: buttons.getToolbarActionMap(),
@@ -159,7 +169,6 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
 
     return (
       <div className={classes(commonCss.page, padding(20, 't'))}>
-
         <div className={commonCss.page}>
           <MD2Tabs
             selectedTab={selectedTab}
@@ -167,65 +176,102 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
             tabs={['Graph', 'Source']}
           />
           <div className={commonCss.page}>
-            {selectedTab === 0 && <div className={commonCss.page}>
-              {this.state.graph && <div className={commonCss.page} style={{ position: 'relative', overflow: 'hidden' }}>
-                {!!pipeline && summaryShown && (
-                  <Paper className={css.summaryCard}>
-                    <div style={{ alignItems: 'baseline', display: 'flex', justifyContent: 'space-between' }}>
-                      <div className={commonCss.header}>
-                        Summary
+            {selectedTab === 0 && (
+              <div className={commonCss.page}>
+                {this.state.graph && (
+                  <div
+                    className={commonCss.page}
+                    style={{ position: 'relative', overflow: 'hidden' }}
+                  >
+                    {!!pipeline && summaryShown && (
+                      <Paper className={css.summaryCard}>
+                        <div
+                          style={{
+                            alignItems: 'baseline',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                          }}
+                        >
+                          <div className={commonCss.header}>Summary</div>
+                          <Button
+                            onClick={() => this.setStateSafe({ summaryShown: false })}
+                            color='secondary'
+                          >
+                            Hide
+                          </Button>
                         </div>
-                      <Button onClick={() => this.setStateSafe({ summaryShown: false })} color='secondary'>
-                        Hide
+                        <div className={css.summaryKey}>ID</div>
+                        <div>{pipeline.id || 'Unable to obtain Pipeline ID'}</div>
+                        <div className={css.summaryKey}>Uploaded on</div>
+                        <div>{formatDateString(pipeline.created_at)}</div>
+                        <div className={css.summaryKey}>Description</div>
+                        <Description description={pipeline.description || ''} />
+                      </Paper>
+                    )}
+
+                    <Graph
+                      graph={this.state.graph}
+                      selectedNodeId={selectedNodeId}
+                      onClick={id => this.setStateSafe({ selectedNodeId: id })}
+                    />
+
+                    <SidePanel
+                      isOpen={!!selectedNodeId}
+                      title={selectedNodeId}
+                      onClose={() => this.setStateSafe({ selectedNodeId: '' })}
+                    >
+                      <div className={commonCss.page}>
+                        {!selectedNodeInfo && (
+                          <div className={commonCss.absoluteCenter}>
+                            Unable to retrieve node info
+                          </div>
+                        )}
+                        {!!selectedNodeInfo && (
+                          <div className={padding(20, 'lr')}>
+                            <StaticNodeDetails nodeInfo={selectedNodeInfo} />
+                          </div>
+                        )}
+                      </div>
+                    </SidePanel>
+                    <div className={css.footer}>
+                      {!summaryShown && (
+                        <Button
+                          onClick={() => this.setStateSafe({ summaryShown: !summaryShown })}
+                          color='secondary'
+                        >
+                          Show summary
                         </Button>
+                      )}
+                      <div
+                        className={classes(
+                          commonCss.flex,
+                          summaryShown && !!pipeline && css.footerInfoOffset,
+                        )}
+                      >
+                        <InfoIcon className={commonCss.infoIcon} />
+                        <span className={css.infoSpan}>Static pipeline graph</span>
+                      </div>
                     </div>
-                    <div className={css.summaryKey}>ID</div>
-                    <div>{pipeline.id || 'Unable to obtain Pipeline ID'}</div>
-                    <div className={css.summaryKey}>Uploaded on</div>
-                    <div>{formatDateString(pipeline.created_at)}</div>
-                    <div className={css.summaryKey}>Description</div>
-                    <div>{pipeline.description}</div>
-                  </Paper>
-                )}
-
-                <Graph graph={this.state.graph} selectedNodeId={selectedNodeId}
-                  onClick={id => this.setStateSafe({ selectedNodeId: id })} />
-
-                <SidePanel isOpen={!!selectedNodeId}
-                  title={selectedNodeId} onClose={() => this.setStateSafe({ selectedNodeId: '' })}>
-                  <div className={commonCss.page}>
-                    {!selectedNodeInfo && (
-                      <div className={commonCss.absoluteCenter}>Unable to retrieve node info</div>
-                    )}
-                    {!!selectedNodeInfo && <div className={padding(20, 'lr')}>
-                      <StaticNodeDetails nodeInfo={selectedNodeInfo} />
-                    </div>}
                   </div>
-                </SidePanel>
-                <div className={css.footer}>
-                  {!summaryShown && (
-                    <Button onClick={() => this.setStateSafe({ summaryShown: !summaryShown })} color='secondary'>
-                      Show summary
-                    </Button>
-                  )}
-                  <div className={classes(commonCss.flex, (summaryShown && !!pipeline) && css.footerInfoOffset)}>
-                    <InfoIcon className={commonCss.infoIcon} />
-                    <span className={css.infoSpan}>Static pipeline graph</span>
-                  </div>
-                </div>
-              </div>}
-              {!this.state.graph && <span style={{ margin: '40px auto' }}>No graph to show</span>}
-            </div>}
-            {selectedTab === 1 && !!templateString &&
+                )}
+                {!this.state.graph && <span style={{ margin: '40px auto' }}>No graph to show</span>}
+              </div>
+            )}
+            {selectedTab === 1 && !!templateString && (
               <div className={css.containerCss}>
                 <Editor
                   value={templateString || ''}
-                  height='100%' width='100%' mode='yaml' theme='github'
+                  height='100%'
+                  width='100%'
+                  mode='yaml'
+                  theme='github'
                   editorProps={{ $blockScrolling: true }}
-                  readOnly={true} highlightActiveLine={true} showGutter={true}
+                  readOnly={true}
+                  highlightActiveLine={true}
+                  showGutter={true}
                 />
               </div>
-            }
+            )}
           </div>
         </div>
       </div>
@@ -247,7 +293,7 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
     let pipeline: ApiPipeline | null = null;
     let templateString = '';
     let template: Workflow | undefined;
-    let breadcrumbs: Array<{ displayName: string, href: string }> = [];
+    let breadcrumbs: Array<{ displayName: string; href: string }> = [];
     const toolbarActions = this.props.toolbarProps.actions;
     let pageTitle = '';
 
@@ -263,15 +309,23 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
             templateString = JsYaml.safeDump(pipelineSpec);
           } catch (err) {
             await this.showPageError(
-              `Failed to parse pipeline spec from run with ID: ${runDetails.run!.id}.`, err);
+              `Failed to parse pipeline spec from run with ID: ${runDetails.run!.id}.`,
+              err,
+            );
             logger.error(
-              `Failed to convert pipeline spec YAML from run with ID: ${runDetails.run!.id}.`, err);
+              `Failed to convert pipeline spec YAML from run with ID: ${runDetails.run!.id}.`,
+              err,
+            );
           }
         } catch (err) {
           await this.showPageError(
-            `Failed to parse pipeline spec from run with ID: ${runDetails.run!.id}.`, err);
+            `Failed to parse pipeline spec from run with ID: ${runDetails.run!.id}.`,
+            err,
+          );
           logger.error(
-            `Failed to parse pipeline spec JSON from run with ID: ${runDetails.run!.id}.`, err);
+            `Failed to parse pipeline spec JSON from run with ID: ${runDetails.run!.id}.`,
+            err,
+          );
         }
 
         const relatedExperimentId = RunUtils.getFirstExperimentReferenceId(runDetails.run);
@@ -286,12 +340,14 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
             { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
             {
               displayName: experiment.name!,
-              href: RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, experiment.id!)
-            });
-        } else {
-          breadcrumbs.push(
-            { displayName: 'All runs', href: RoutePage.RUNS }
+              href: RoutePage.EXPERIMENT_DETAILS.replace(
+                ':' + RouteParams.experimentId,
+                experiment.id!,
+              ),
+            },
           );
+        } else {
+          breadcrumbs.push({ displayName: 'All runs', href: RoutePage.RUNS });
         }
         breadcrumbs.push({
           displayName: runDetails.run!.name!,
@@ -349,8 +405,9 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
   private _deleteCallback(_: string[], success: boolean): void {
     if (success) {
       const breadcrumbs = this.props.toolbarProps.breadcrumbs;
-      const previousPage = breadcrumbs.length ?
-        breadcrumbs[breadcrumbs.length - 1].href : RoutePage.PIPELINES;
+      const previousPage = breadcrumbs.length
+        ? breadcrumbs[breadcrumbs.length - 1].href
+        : RoutePage.PIPELINES;
       this.props.history.push(previousPage);
     }
   }
diff --git a/frontend/src/pages/PipelineList.test.tsx b/frontend/src/pages/PipelineList.test.tsx
index a66fecbbf356..d5bf5d0fd5e0 100644
--- a/frontend/src/pages/PipelineList.test.tsx
+++ b/frontend/src/pages/PipelineList.test.tsx
@@ -27,7 +27,6 @@ import { ImportMethod } from '../components/UploadPipelineDialog';
 import { ButtonKeys } from '../lib/Buttons';
 
 describe('PipelineList', () => {
-
   let tree: ReactWrapper | ShallowWrapper;
 
   const updateBannerSpy = jest.fn();
@@ -40,13 +39,24 @@ describe('PipelineList', () => {
   const uploadPipelineSpy = jest.spyOn(Apis, 'uploadPipeline');
 
   function generateProps(): PageProps {
-    return TestUtils.generatePageProps(PipelineList, '' as any, '' as any, null, updateBannerSpy,
-      updateDialogSpy, updateToolbarSpy, updateSnackbarSpy);
+    return TestUtils.generatePageProps(
+      PipelineList,
+      '' as any,
+      '' as any,
+      null,
+      updateBannerSpy,
+      updateDialogSpy,
+      updateToolbarSpy,
+      updateSnackbarSpy,
+    );
   }
 
   async function mountWithNPipelines(n: number): Promise<ReactWrapper> {
     listPipelinesSpy.mockImplementationOnce(() => ({
-      pipelines: range(n).map(i => ({ id: 'test-pipeline-id' + i, name: 'test pipeline name' + i })),
+      pipelines: range(n).map(i => ({
+        id: 'test-pipeline-id' + i,
+        name: 'test pipeline name' + i,
+      })),
     }));
     tree = TestUtils.mountWithRouter(<PipelineList {...generateProps()} />);
     await listPipelinesSpy;
@@ -74,12 +84,14 @@ describe('PipelineList', () => {
   it('renders a list of one pipeline', async () => {
     tree = shallow(<PipelineList {...generateProps()} />);
     tree.setState({
-      pipelines: [{
-        created_at: new Date(2018, 8, 22, 11, 5, 48),
-        description: 'test pipeline description',
-        name: 'pipeline1',
-        parameters: [],
-      } as ApiPipeline]
+      pipelines: [
+        {
+          created_at: new Date(2018, 8, 22, 11, 5, 48),
+          description: 'test pipeline description',
+          name: 'pipeline1',
+          parameters: [],
+        } as ApiPipeline,
+      ],
     });
     await listPipelinesSpy;
     expect(tree).toMatchSnapshot();
@@ -88,10 +100,12 @@ describe('PipelineList', () => {
   it('renders a list of one pipeline with no description or created date', async () => {
     tree = shallow(<PipelineList {...generateProps()} />);
     tree.setState({
-      pipelines: [{
-        name: 'pipeline1',
-        parameters: [],
-      } as ApiPipeline]
+      pipelines: [
+        {
+          name: 'pipeline1',
+          parameters: [],
+        } as ApiPipeline,
+      ],
     });
     await listPipelinesSpy;
     expect(tree).toMatchSnapshot();
@@ -100,13 +114,15 @@ describe('PipelineList', () => {
   it('renders a list of one pipeline with error', async () => {
     tree = shallow(<PipelineList {...generateProps()} />);
     tree.setState({
-      pipelines: [{
-        created_at: new Date(2018, 8, 22, 11, 5, 48),
-        description: 'test pipeline description',
-        error: 'oops! could not load pipeline',
-        name: 'pipeline1',
-        parameters: [],
-      } as ApiPipeline]
+      pipelines: [
+        {
+          created_at: new Date(2018, 8, 22, 11, 5, 48),
+          description: 'test pipeline description',
+          error: 'oops! could not load pipeline',
+          name: 'pipeline1',
+          parameters: [],
+        } as ApiPipeline,
+      ],
     });
     await listPipelinesSpy;
     expect(tree).toMatchSnapshot();
@@ -137,11 +153,13 @@ describe('PipelineList', () => {
     tree = TestUtils.mountWithRouter(<PipelineList {...generateProps()} />);
     await listPipelinesSpy;
     await TestUtils.flushPromises();
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'bad stuff happened',
-      message: 'Error: failed to retrieve list of pipelines. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'bad stuff happened',
+        message: 'Error: failed to retrieve list of pipelines. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows error banner when listing pipelines fails after refresh', async () => {
@@ -153,11 +171,13 @@ describe('PipelineList', () => {
     await refreshBtn!.action();
     expect(listPipelinesSpy.mock.calls.length).toBe(2);
     expect(listPipelinesSpy).toHaveBeenLastCalledWith('', 10, 'created_at desc', '');
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'bad stuff happened',
-      message: 'Error: failed to retrieve list of pipelines. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'bad stuff happened',
+        message: 'Error: failed to retrieve list of pipelines. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('hides error banner when listing pipelines fails then succeeds', async () => {
@@ -166,11 +186,13 @@ describe('PipelineList', () => {
     const instance = tree.instance() as PipelineList;
     await listPipelinesSpy;
     await TestUtils.flushPromises();
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'bad stuff happened',
-      message: 'Error: failed to retrieve list of pipelines. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'bad stuff happened',
+        message: 'Error: failed to retrieve list of pipelines. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
     updateBannerSpy.mockReset();
 
     const refreshBtn = instance.getInitialToolbarState().actions[ButtonKeys.REFRESH];
@@ -184,9 +206,9 @@ describe('PipelineList', () => {
     tree = await mountWithNPipelines(1);
     const link = tree.find('a[children="test pipeline name0"]');
     expect(link).toHaveLength(1);
-    expect(link.prop('href')).toBe(RoutePage.PIPELINE_DETAILS.replace(
-      ':' + RouteParams.pipelineId + '?', 'test-pipeline-id0'
-    ));
+    expect(link.prop('href')).toBe(
+      RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId + '?', 'test-pipeline-id0'),
+    );
   });
 
   it('always has upload pipeline button enabled', async () => {
@@ -205,8 +227,14 @@ describe('PipelineList', () => {
 
   it('enables delete button when two pipelines are selected', async () => {
     tree = await mountWithNPipelines(2);
-    tree.find('.tableRow').at(0).simulate('click');
-    tree.find('.tableRow').at(1).simulate('click');
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(1)
+      .simulate('click');
     expect(updateToolbarSpy.mock.calls).toHaveLength(3); // Initial call, then selection updates
     const calls = updateToolbarSpy.mock.calls[2];
     expect(calls[0].actions[ButtonKeys.DELETE_RUN]).toHaveProperty('disabled', false);
@@ -214,18 +242,28 @@ describe('PipelineList', () => {
 
   it('re-disables delete button pipelines are unselected', async () => {
     tree = await mountWithNPipelines(1);
-    tree.find('.tableRow').at(0).simulate('click');
-    tree.find('.tableRow').at(0).simulate('click');
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
     expect(updateToolbarSpy.mock.calls).toHaveLength(3); // Initial call, then selection updates
     const calls = updateToolbarSpy.mock.calls[2];
     expect(calls[0].actions[ButtonKeys.DELETE_RUN]).toHaveProperty('disabled', true);
   });
- 
+
   it('shows delete dialog when delete button is clicked', async () => {
     tree = await mountWithNPipelines(1);
-    tree.find('.tableRow').at(0).simulate('click');
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     expect(call).toHaveProperty('title', 'Delete 1 pipeline?');
@@ -233,11 +271,21 @@ describe('PipelineList', () => {
 
   it('shows delete dialog when delete button is clicked, indicating several pipelines to delete', async () => {
     tree = await mountWithNPipelines(5);
-    tree.find('.tableRow').at(0).simulate('click');
-    tree.find('.tableRow').at(2).simulate('click');
-    tree.find('.tableRow').at(3).simulate('click');
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(2)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(3)
+      .simulate('click');
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     expect(call).toHaveProperty('title', 'Delete 3 pipelines?');
@@ -245,9 +293,13 @@ describe('PipelineList', () => {
 
   it('does not call delete API for selected pipeline when delete dialog is canceled', async () => {
     tree = await mountWithNPipelines(1);
-    tree.find('.tableRow').at(0).simulate('click');
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const cancelBtn = call.buttons.find((b: any) => b.text === 'Cancel');
@@ -257,9 +309,13 @@ describe('PipelineList', () => {
 
   it('calls delete API for selected pipeline after delete dialog is confirmed', async () => {
     tree = await mountWithNPipelines(1);
-    tree.find('.tableRow').at(0).simulate('click');
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -269,10 +325,14 @@ describe('PipelineList', () => {
 
   it('updates the selected indices after a pipeline is deleted', async () => {
     tree = await mountWithNPipelines(5);
-    tree.find('.tableRow').at(0).simulate('click');
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
     expect(tree.state()).toHaveProperty('selectedIds', ['test-pipeline-id0']);
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -282,11 +342,18 @@ describe('PipelineList', () => {
 
   it('updates the selected indices after multiple pipelines are deleted', async () => {
     tree = await mountWithNPipelines(5);
-    tree.find('.tableRow').at(0).simulate('click');
-    tree.find('.tableRow').at(3).simulate('click');
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(3)
+      .simulate('click');
     expect(tree.state()).toHaveProperty('selectedIds', ['test-pipeline-id0', 'test-pipeline-id3']);
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -296,11 +363,21 @@ describe('PipelineList', () => {
 
   it('calls delete API for all selected pipelines after delete dialog is confirmed', async () => {
     tree = await mountWithNPipelines(5);
-    tree.find('.tableRow').at(0).simulate('click');
-    tree.find('.tableRow').at(1).simulate('click');
-    tree.find('.tableRow').at(4).simulate('click');
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(1)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(4)
+      .simulate('click');
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -313,9 +390,13 @@ describe('PipelineList', () => {
 
   it('shows snackbar confirmation after pipeline is deleted', async () => {
     tree = await mountWithNPipelines(1);
-    tree.find('.tableRow').at(0).simulate('click');
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -328,10 +409,14 @@ describe('PipelineList', () => {
 
   it('shows error dialog when pipeline deletion fails', async () => {
     tree = await mountWithNPipelines(1);
-    tree.find('.tableRow').at(0).simulate('click');
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
     TestUtils.makeErrorResponseOnce(deletePipelineSpy, 'woops, failed');
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -345,10 +430,22 @@ describe('PipelineList', () => {
 
   it('shows error dialog when multiple pipeline deletions fail', async () => {
     tree = await mountWithNPipelines(5);
-    tree.find('.tableRow').at(0).simulate('click');
-    tree.find('.tableRow').at(2).simulate('click');
-    tree.find('.tableRow').at(1).simulate('click');
-    tree.find('.tableRow').at(3).simulate('click');
+    tree
+      .find('.tableRow')
+      .at(0)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(2)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(1)
+      .simulate('click');
+    tree
+      .find('.tableRow')
+      .at(3)
+      .simulate('click');
     deletePipelineSpy.mockImplementation(id => {
       if (id.indexOf(3) === -1 && id.indexOf(2) === -1) {
         throw {
@@ -356,8 +453,9 @@ describe('PipelineList', () => {
         };
       }
     });
-    const deleteBtn = (tree.instance() as PipelineList)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as PipelineList).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -366,7 +464,8 @@ describe('PipelineList', () => {
     expect(updateDialogSpy).toHaveBeenCalledTimes(2);
     const lastCall = updateDialogSpy.mock.calls[1][0];
     expect(lastCall).toMatchObject({
-      content: 'Failed to delete pipeline: test-pipeline-id0 with error: "woops, failed!"\n\n' +
+      content:
+        'Failed to delete pipeline: test-pipeline-id0 with error: "woops, failed!"\n\n' +
         'Failed to delete pipeline: test-pipeline-id1 with error: "woops, failed!"',
       title: 'Failed to delete 2 pipelines',
     });
@@ -408,7 +507,9 @@ describe('PipelineList', () => {
     tree = shallow(<PipelineList {...generateProps()} />);
     const handlerSpy = jest.spyOn(tree.instance() as any, '_uploadDialogClosed');
     tree.setState({ uploadDialogOpen: true });
-    tree.find('UploadPipelineDialog').simulate('close', true, 'some name', null, '', ImportMethod.LOCAL);
+    tree
+      .find('UploadPipelineDialog')
+      .simulate('close', true, 'some name', null, '', ImportMethod.LOCAL);
     expect(handlerSpy).toHaveBeenLastCalledWith(true, 'some name', null, '', ImportMethod.LOCAL);
     expect(uploadPipelineSpy).not.toHaveBeenCalled();
   });
@@ -417,7 +518,9 @@ describe('PipelineList', () => {
     tree = shallow(<PipelineList {...generateProps()} />);
     const handlerSpy = jest.spyOn(tree.instance() as any, '_uploadDialogClosed');
     tree.setState({ uploadDialogOpen: true });
-    tree.find('UploadPipelineDialog').simulate('close', true, 'some name', null, '', ImportMethod.URL);
+    tree
+      .find('UploadPipelineDialog')
+      .simulate('close', true, 'some name', null, '', ImportMethod.URL);
     expect(handlerSpy).toHaveBeenLastCalledWith(true, 'some name', null, '', ImportMethod.URL);
     expect(uploadPipelineSpy).not.toHaveBeenCalled();
   });
@@ -425,7 +528,9 @@ describe('PipelineList', () => {
   it('tries to upload if import method is local and a file is returned from upload dialog', async () => {
     tree = shallow(<PipelineList {...generateProps()} />);
     tree.setState({ uploadDialogOpen: true });
-    tree.find('UploadPipelineDialog').simulate('close', true, 'some name', { body: 'something' }, '', ImportMethod.LOCAL);
+    tree
+      .find('UploadPipelineDialog')
+      .simulate('close', true, 'some name', { body: 'something' }, '', ImportMethod.LOCAL);
     tree.update();
     await createPipelineSpy;
     await uploadPipelineSpy;
@@ -440,15 +545,19 @@ describe('PipelineList', () => {
     TestUtils.makeErrorResponseOnce(uploadPipelineSpy, 'woops, could not upload');
     tree = shallow(<PipelineList {...generateProps()} />);
     tree.setState({ uploadDialogOpen: true });
-    tree.find('UploadPipelineDialog').simulate('close', true, 'some name', { body: 'something' }, '', ImportMethod.LOCAL);
+    tree
+      .find('UploadPipelineDialog')
+      .simulate('close', true, 'some name', { body: 'something' }, '', ImportMethod.LOCAL);
     tree.update();
     await uploadPipelineSpy;
     await TestUtils.flushPromises();
     expect(uploadPipelineSpy).toHaveBeenLastCalledWith('some name', { body: 'something' });
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'woops, could not upload',
-      title: 'Failed to upload pipeline',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'woops, could not upload',
+        title: 'Failed to upload pipeline',
+      }),
+    );
     // Check the dialog is not closed
     expect(tree.state()).toHaveProperty('uploadDialogOpen', true);
   });
@@ -456,13 +565,15 @@ describe('PipelineList', () => {
   it('tries to create a pipeline if import method is url and a url is returned from upload dialog', async () => {
     tree = shallow(<PipelineList {...generateProps()} />);
     tree.setState({ uploadDialogOpen: true });
-    tree.find('UploadPipelineDialog').simulate('close', true, 'some name', null, 'https://some.url.com', ImportMethod.URL);
+    tree
+      .find('UploadPipelineDialog')
+      .simulate('close', true, 'some name', null, 'https://some.url.com', ImportMethod.URL);
     tree.update();
     await createPipelineSpy;
     await uploadPipelineSpy;
     expect(createPipelineSpy).toHaveBeenLastCalledWith({
       name: 'some name',
-      url: { pipeline_url: 'https://some.url.com' }
+      url: { pipeline_url: 'https://some.url.com' },
     });
     expect(uploadPipelineSpy).not.toHaveBeenCalled();
 
@@ -474,21 +585,24 @@ describe('PipelineList', () => {
     TestUtils.makeErrorResponseOnce(createPipelineSpy, 'woops, could not create');
     tree = shallow(<PipelineList {...generateProps()} />);
     tree.setState({ uploadDialogOpen: true });
-    tree.find('UploadPipelineDialog').simulate('close', true, 'some name', null, 'https://some.url.com', ImportMethod.URL);
+    tree
+      .find('UploadPipelineDialog')
+      .simulate('close', true, 'some name', null, 'https://some.url.com', ImportMethod.URL);
     tree.update();
     await uploadPipelineSpy;
     await TestUtils.flushPromises();
     expect(createPipelineSpy).toHaveBeenLastCalledWith({
       name: 'some name',
-      url: { pipeline_url: 'https://some.url.com' }
+      url: { pipeline_url: 'https://some.url.com' },
     });
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'woops, could not create',
-      title: 'Failed to upload pipeline',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'woops, could not create',
+        title: 'Failed to upload pipeline',
+      }),
+    );
 
     // Check the dialog is not closed
     expect(tree.state()).toHaveProperty('uploadDialogOpen', true);
   });
-
 });
diff --git a/frontend/src/pages/PipelineList.tsx b/frontend/src/pages/PipelineList.tsx
index 39f06e229ede..ed0c7d073226 100644
--- a/frontend/src/pages/PipelineList.tsx
+++ b/frontend/src/pages/PipelineList.tsx
@@ -27,6 +27,7 @@ import { ToolbarProps } from '../components/Toolbar';
 import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
 import { formatDateString, errorToMessage } from '../lib/Utils';
+import { Description } from '../components/Description';
 
 interface PipelineListState {
   pipelines: ApiPipeline[];
@@ -34,6 +35,12 @@ interface PipelineListState {
   uploadDialogOpen: boolean;
 }
 
+const descriptionCustomRenderer: React.FC<CustomRendererProps<string>> = (
+  props: CustomRendererProps<string>,
+) => {
+  return <Description description={props.value || ''} forceInline={true} />;
+};
+
 class PipelineList extends Page<{}, PipelineListState> {
   private _tableRef = React.createRef<CustomTable>();
 
@@ -57,7 +64,7 @@ class PipelineList extends Page<{}, PipelineListState> {
           () => this.state.selectedIds,
           'pipeline',
           ids => this._selectionChanged(ids),
-          false, /* useCurrentResource */
+          false /* useCurrentResource */,
         )
         .getToolbarActionMap(),
       breadcrumbs: [],
@@ -73,11 +80,11 @@ class PipelineList extends Page<{}, PipelineListState> {
         label: 'Pipeline name',
         sortKey: PipelineSortKeys.NAME,
       },
-      { label: 'Description', flex: 3 },
+      { label: 'Description', flex: 3, customRenderer: descriptionCustomRenderer },
       { label: 'Uploaded on', sortKey: PipelineSortKeys.CREATED_AT, flex: 1 },
     ];
 
-    const rows: Row[] = this.state.pipelines.map((p) => {
+    const rows: Row[] = this.state.pipelines.map(p => {
       return {
         id: p.id!,
         otherFields: [p.name!, p.description!, formatDateString(p.created_at!)],
@@ -86,13 +93,22 @@ class PipelineList extends Page<{}, PipelineListState> {
 
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-        <CustomTable ref={this._tableRef} columns={columns} rows={rows} initialSortColumn={PipelineSortKeys.CREATED_AT}
-          updateSelection={this._selectionChanged.bind(this)} selectedIds={this.state.selectedIds}
-          reload={this._reload.bind(this)} filterLabel='Filter pipelines'
-          emptyMessage='No pipelines found. Click "Upload pipeline" to start.' />
-
-        <UploadPipelineDialog open={this.state.uploadDialogOpen}
-          onClose={this._uploadDialogClosed.bind(this)} />
+        <CustomTable
+          ref={this._tableRef}
+          columns={columns}
+          rows={rows}
+          initialSortColumn={PipelineSortKeys.CREATED_AT}
+          updateSelection={this._selectionChanged.bind(this)}
+          selectedIds={this.state.selectedIds}
+          reload={this._reload.bind(this)}
+          filterLabel='Filter pipelines'
+          emptyMessage='No pipelines found. Click "Upload pipeline" to start.'
+        />
+
+        <UploadPipelineDialog
+          open={this.state.uploadDialogOpen}
+          onClose={this._uploadDialogClosed.bind(this)}
+        />
       </div>
     );
   }
@@ -107,7 +123,11 @@ class PipelineList extends Page<{}, PipelineListState> {
     let response: ApiListPipelinesResponse | null = null;
     try {
       response = await Apis.pipelineServiceApi.listPipelines(
-        request.pageToken, request.pageSize, request.sortBy, request.filter);
+        request.pageToken,
+        request.pageSize,
+        request.sortBy,
+        request.filter,
+      );
       this.clearBanner();
     } catch (err) {
       await this.showPageError('Error: failed to retrieve list of pipelines.', err);
@@ -118,14 +138,19 @@ class PipelineList extends Page<{}, PipelineListState> {
     return response ? response.next_page_token || '' : '';
   }
 
-  private _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (props: CustomRendererProps<string>) => {
+  private _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (
+    props: CustomRendererProps<string>,
+  ) => {
     return (
-      <Link onClick={(e) => e.stopPropagation()}
+      <Link
+        onClick={e => e.stopPropagation()}
         className={commonCss.link}
-        to={RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId, props.id)}>{props.value}
+        to={RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId, props.id)}
+      >
+        {props.value}
       </Link>
     );
-  }
+  };
 
   private _selectionChanged(selectedIds: string[]): void {
     const actions = this.props.toolbarProps.actions;
@@ -134,12 +159,19 @@ class PipelineList extends Page<{}, PipelineListState> {
     this.setStateSafe({ selectedIds });
   }
 
-  private async _uploadDialogClosed(confirmed: boolean, name: string, file: File | null, url: string,
-    method: ImportMethod, description?: string): Promise<boolean> {
-
-    if (!confirmed
-      || (method === ImportMethod.LOCAL && !file)
-      || (method === ImportMethod.URL && !url)) {
+  private async _uploadDialogClosed(
+    confirmed: boolean,
+    name: string,
+    file: File | null,
+    url: string,
+    method: ImportMethod,
+    description?: string,
+  ): Promise<boolean> {
+    if (
+      !confirmed ||
+      (method === ImportMethod.LOCAL && !file) ||
+      (method === ImportMethod.URL && !url)
+    ) {
       this.setStateSafe({ uploadDialogOpen: false });
       return false;
     }
diff --git a/frontend/src/pages/RecurringRunDetails.test.tsx b/frontend/src/pages/RecurringRunDetails.test.tsx
index d128f069987e..4c3761894a6d 100644
--- a/frontend/src/pages/RecurringRunDetails.test.tsx
+++ b/frontend/src/pages/RecurringRunDetails.test.tsx
@@ -41,9 +41,22 @@ describe('RecurringRunDetails', () => {
   let fullTestJob: ApiJob = {};
 
   function generateProps(): PageProps {
-    const match = { params: { [RouteParams.runId]: fullTestJob.id }, isExact: true, path: '', url: '' };
-    return TestUtils.generatePageProps(RecurringRunDetails, '' as any, match, historyPushSpy,
-      updateBannerSpy, updateDialogSpy, updateToolbarSpy, updateSnackbarSpy);
+    const match = {
+      isExact: true,
+      params: { [RouteParams.runId]: fullTestJob.id },
+      path: '',
+      url: '',
+    };
+    return TestUtils.generatePageProps(
+      RecurringRunDetails,
+      '' as any,
+      match,
+      historyPushSpy,
+      updateBannerSpy,
+      updateDialogSpy,
+      updateToolbarSpy,
+      updateSnackbarSpy,
+    );
   }
 
   beforeEach(() => {
@@ -63,7 +76,7 @@ describe('RecurringRunDetails', () => {
           end_time: new Date(2018, 10, 9, 8, 7, 6),
           interval_second: '3600',
           start_time: new Date(2018, 9, 8, 7, 6),
-        }
+        },
       },
     } as ApiJob;
 
@@ -98,7 +111,7 @@ describe('RecurringRunDetails', () => {
         cron: '* * * 0 0 !',
         end_time: new Date(2018, 10, 9, 8, 7, 6),
         start_time: new Date(2018, 9, 8, 7, 6),
-      }
+      },
     };
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
@@ -117,14 +130,18 @@ describe('RecurringRunDetails', () => {
     // The run id is in the router match object, defined inside generateProps
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
-    expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      breadcrumbs: [{ displayName: 'All runs', href: RoutePage.RUNS }],
-      pageTitle: fullTestJob.name,
-    }));
+    expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        breadcrumbs: [{ displayName: 'All runs', href: RoutePage.RUNS }],
+        pageTitle: fullTestJob.name,
+      }),
+    );
   });
 
   it('loads the recurring run and its experiment if it has one', async () => {
-    fullTestJob.resource_references = [{ key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT } }];
+    fullTestJob.resource_references = [
+      { key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT } },
+    ];
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
     expect(getJobSpy).toHaveBeenLastCalledWith(fullTestJob.id);
@@ -132,21 +149,27 @@ describe('RecurringRunDetails', () => {
   });
 
   it('shows Experiments -> Experiment name -> run name when there is an experiment', async () => {
-    fullTestJob.resource_references = [{ key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT } }];
+    fullTestJob.resource_references = [
+      { key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT } },
+    ];
     getExperimentSpy.mockImplementation(id => ({ id, name: 'test experiment name' }));
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
-    expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      breadcrumbs: [
-        { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
-        {
-          displayName: 'test experiment name',
-          href: RoutePage.EXPERIMENT_DETAILS.replace(
-            ':' + RouteParams.experimentId, 'test-experiment-id'),
-        },
-      ],
-      pageTitle: fullTestJob.name,
-    }));
+    expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        breadcrumbs: [
+          { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
+          {
+            displayName: 'test experiment name',
+            href: RoutePage.EXPERIMENT_DETAILS.replace(
+              ':' + RouteParams.experimentId,
+              'test-experiment-id',
+            ),
+          },
+        ],
+        pageTitle: fullTestJob.name,
+      }),
+    );
   });
 
   it('shows error banner if run cannot be fetched', async () => {
@@ -154,24 +177,30 @@ describe('RecurringRunDetails', () => {
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear, once to show error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops!',
-      message: `Error: failed to retrieve recurring run: ${fullTestJob.id}. Click Details for more information.`,
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops!',
+        message: `Error: failed to retrieve recurring run: ${fullTestJob.id}. Click Details for more information.`,
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows warning banner if has experiment but experiment cannot be fetched. still loads run', async () => {
-    fullTestJob.resource_references = [{ key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT } }];
+    fullTestJob.resource_references = [
+      { key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT } },
+    ];
     TestUtils.makeErrorResponseOnce(getExperimentSpy, 'woops!');
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear, once to show error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops!',
-      message: `Error: failed to retrieve this recurring run\'s experiment. Click Details for more information.`,
-      mode: 'warning',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops!',
+        message: `Error: failed to retrieve this recurring run\'s experiment. Click Details for more information.`,
+        mode: 'warning',
+      }),
+    );
     expect(tree.state('run')).toEqual(fullTestJob);
   });
 
@@ -185,7 +214,6 @@ describe('RecurringRunDetails', () => {
     expect(getJobSpy).toHaveBeenCalledTimes(2);
   });
 
-
   it('has a clone button, clicking it navigates to new run page', async () => {
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
@@ -195,9 +223,10 @@ describe('RecurringRunDetails', () => {
     await cloneBtn!.action();
     expect(historyPushSpy).toHaveBeenCalledTimes(1);
     expect(historyPushSpy).toHaveBeenLastCalledWith(
-      RoutePage.NEW_RUN
-      + `?${QUERY_PARAMS.cloneFromRecurringRun}=${fullTestJob!.id}`
-      + `&${QUERY_PARAMS.isRecurring}=1`);
+      RoutePage.NEW_RUN +
+        `?${QUERY_PARAMS.cloneFromRecurringRun}=${fullTestJob!.id}` +
+        `&${QUERY_PARAMS.isRecurring}=1`,
+    );
   });
 
   it('shows enabled Disable, and disabled Enable buttons if the run is enabled', async () => {
@@ -207,7 +236,10 @@ describe('RecurringRunDetails', () => {
     const enableBtn = TestUtils.getToolbarButton(updateToolbarSpy, ButtonKeys.ENABLE_RECURRING_RUN);
     expect(enableBtn).toBeDefined();
     expect(enableBtn!.disabled).toBe(true);
-    const disableBtn = TestUtils.getToolbarButton(updateToolbarSpy, ButtonKeys.DISABLE_RECURRING_RUN);
+    const disableBtn = TestUtils.getToolbarButton(
+      updateToolbarSpy,
+      ButtonKeys.DISABLE_RECURRING_RUN,
+    );
     expect(disableBtn).toBeDefined();
     expect(disableBtn!.disabled).toBe(false);
   });
@@ -220,7 +252,10 @@ describe('RecurringRunDetails', () => {
     const enableBtn = TestUtils.getToolbarButton(updateToolbarSpy, ButtonKeys.ENABLE_RECURRING_RUN);
     expect(enableBtn).toBeDefined();
     expect(enableBtn!.disabled).toBe(false);
-    const disableBtn = TestUtils.getToolbarButton(updateToolbarSpy, ButtonKeys.DISABLE_RECURRING_RUN);
+    const disableBtn = TestUtils.getToolbarButton(
+      updateToolbarSpy,
+      ButtonKeys.DISABLE_RECURRING_RUN,
+    );
     expect(disableBtn).toBeDefined();
     expect(disableBtn!.disabled).toBe(true);
   });
@@ -233,7 +268,10 @@ describe('RecurringRunDetails', () => {
     const enableBtn = TestUtils.getToolbarButton(updateToolbarSpy, ButtonKeys.ENABLE_RECURRING_RUN);
     expect(enableBtn).toBeDefined();
     expect(enableBtn!.disabled).toBe(false);
-    const disableBtn = TestUtils.getToolbarButton(updateToolbarSpy, ButtonKeys.DISABLE_RECURRING_RUN);
+    const disableBtn = TestUtils.getToolbarButton(
+      updateToolbarSpy,
+      ButtonKeys.DISABLE_RECURRING_RUN,
+    );
     expect(disableBtn).toBeDefined();
     expect(disableBtn!.disabled).toBe(true);
   });
@@ -258,10 +296,12 @@ describe('RecurringRunDetails', () => {
     const disableBtn = instance.getInitialToolbarState().actions[ButtonKeys.DISABLE_RECURRING_RUN];
     await disableBtn!.action();
     expect(updateDialogSpy).toHaveBeenCalledTimes(1);
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'could not disable',
-      title: 'Failed to disable recurring run',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'could not disable',
+        title: 'Failed to disable recurring run',
+      }),
+    );
   });
 
   it('shows error dialog if enable fails', async () => {
@@ -273,10 +313,12 @@ describe('RecurringRunDetails', () => {
     const enableBtn = instance.getInitialToolbarState().actions[ButtonKeys.ENABLE_RECURRING_RUN];
     await enableBtn!.action();
     expect(updateDialogSpy).toHaveBeenCalledTimes(1);
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'could not enable',
-      title: 'Failed to enable recurring run',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'could not enable',
+        title: 'Failed to enable recurring run',
+      }),
+    );
   });
 
   it('calls enable API when enable button is clicked, refreshes the page', async () => {
@@ -306,9 +348,11 @@ describe('RecurringRunDetails', () => {
     const instance = tree.instance() as RecurringRunDetails;
     const deleteBtn = instance.getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
     await deleteBtn!.action();
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      title: 'Delete this recurring run config?',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        title: 'Delete this recurring run config?',
+      }),
+    );
   });
 
   it('calls delete API when delete confirmation dialog button is clicked', async () => {
@@ -344,8 +388,9 @@ describe('RecurringRunDetails', () => {
   it('redirects back to parent experiment after delete', async () => {
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
-    const deleteBtn = (tree.instance() as RecurringRunDetails)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as RecurringRunDetails).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -358,8 +403,9 @@ describe('RecurringRunDetails', () => {
   it('shows snackbar after successful deletion', async () => {
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
-    const deleteBtn = (tree.instance() as RecurringRunDetails)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as RecurringRunDetails).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
@@ -375,20 +421,23 @@ describe('RecurringRunDetails', () => {
     TestUtils.makeErrorResponseOnce(deleteJobSpy, 'could not delete');
     tree = shallow(<RecurringRunDetails {...generateProps()} />);
     await TestUtils.flushPromises();
-    const deleteBtn = (tree.instance() as RecurringRunDetails)
-      .getInitialToolbarState().actions[ButtonKeys.DELETE_RUN];
+    const deleteBtn = (tree.instance() as RecurringRunDetails).getInitialToolbarState().actions[
+      ButtonKeys.DELETE_RUN
+    ];
     await deleteBtn!.action();
     const call = updateDialogSpy.mock.calls[0][0];
     const confirmBtn = call.buttons.find((b: any) => b.text === 'Delete');
     await confirmBtn.onClick();
     await TestUtils.flushPromises();
     expect(updateDialogSpy).toHaveBeenCalledTimes(2);
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'Failed to delete recurring run config: test-job-id with error: "could not delete"',
-      title: 'Failed to delete recurring run config',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content:
+          'Failed to delete recurring run config: test-job-id with error: "could not delete"',
+        title: 'Failed to delete recurring run config',
+      }),
+    );
     // Should not reroute
     expect(historyPushSpy).not.toHaveBeenCalled();
   });
-
 });
diff --git a/frontend/src/pages/RecurringRunDetails.tsx b/frontend/src/pages/RecurringRunDetails.tsx
index 2fcec11352a3..cfe1e95b21a2 100644
--- a/frontend/src/pages/RecurringRunDetails.tsx
+++ b/frontend/src/pages/RecurringRunDetails.tsx
@@ -26,6 +26,7 @@ import { RoutePage, RouteParams } from '../components/Router';
 import { Breadcrumb, ToolbarProps } from '../components/Toolbar';
 import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
+import { KeyValue } from '../lib/StaticGraphParser';
 import { formatDateString, enabledDisplayString, errorToMessage } from '../lib/Utils';
 import { triggerDisplayString } from '../lib/TriggerUtils';
 
@@ -34,7 +35,6 @@ interface RecurringRunConfigState {
 }
 
 class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
-
   constructor(props: any) {
     super(props);
 
@@ -47,15 +47,15 @@ class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
     const buttons = new Buttons(this.props, this.refresh.bind(this));
     return {
       actions: buttons
-        .cloneRecurringRun(() => this.state.run ? [this.state.run.id!] : [], true)
+        .cloneRecurringRun(() => (this.state.run ? [this.state.run.id!] : []), true)
         .refresh(this.refresh.bind(this))
-        .enableRecurringRun(() => this.state.run ? this.state.run.id! : '')
-        .disableRecurringRun(() => this.state.run ? this.state.run.id! : '')
+        .enableRecurringRun(() => (this.state.run ? this.state.run.id! : ''))
+        .disableRecurringRun(() => (this.state.run ? this.state.run.id! : ''))
         .delete(
-          () => this.state.run ? [this.state.run!.id!] : [],
+          () => (this.state.run ? [this.state.run!.id!] : []),
           'recurring run config',
           this._deleteCallback.bind(this),
-          true, /* useCurrentResource */
+          true /* useCurrentResource */,
         )
         .getToolbarActionMap(),
       breadcrumbs: [],
@@ -65,15 +65,18 @@ class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
 
   public render(): JSX.Element {
     const { run } = this.state;
-    let runDetails: string[][] = [];
-    let inputParameters: string[][] = [];
-    let triggerDetails: string[][] = [];
+    let runDetails: Array<KeyValue<string>> = [];
+    let inputParameters: Array<KeyValue<string>> = [];
+    let triggerDetails: Array<KeyValue<string>> = [];
     if (run && run.pipeline_spec) {
       runDetails = [
         ['Description', run.description!],
         ['Created at', formatDateString(run.created_at)],
       ];
-      inputParameters = (run.pipeline_spec.parameters || []).map(p => [p.name || '', p.value || '']);
+      inputParameters = (run.pipeline_spec.parameters || []).map(p => [
+        p.name || '',
+        p.value || '',
+      ]);
       if (run.trigger) {
         triggerDetails = [
           ['Enabled', enabledDisplayString(run.trigger, run.enabled!)],
@@ -83,25 +86,29 @@ class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
           triggerDetails.push(['Max. concurrent runs', run.max_concurrency]);
         }
         if (run.trigger.cron_schedule && run.trigger.cron_schedule.start_time) {
-          triggerDetails.push(['Start time',
-            formatDateString(run.trigger.cron_schedule.start_time)]);
+          triggerDetails.push([
+            'Start time',
+            formatDateString(run.trigger.cron_schedule.start_time),
+          ]);
         } else if (run.trigger.periodic_schedule && run.trigger.periodic_schedule.start_time) {
-          triggerDetails.push(['Start time',
-            formatDateString(run.trigger.periodic_schedule.start_time)]);
+          triggerDetails.push([
+            'Start time',
+            formatDateString(run.trigger.periodic_schedule.start_time),
+          ]);
         }
         if (run.trigger.cron_schedule && run.trigger.cron_schedule.end_time) {
-          triggerDetails.push(['End time',
-            formatDateString(run.trigger.cron_schedule.end_time)]);
+          triggerDetails.push(['End time', formatDateString(run.trigger.cron_schedule.end_time)]);
         } else if (run.trigger.periodic_schedule && run.trigger.periodic_schedule.end_time) {
-          triggerDetails.push(['End time',
-            formatDateString(run.trigger.periodic_schedule.end_time)]);
+          triggerDetails.push([
+            'End time',
+            formatDateString(run.trigger.periodic_schedule.end_time),
+          ]);
         }
       }
     }
 
     return (
       <div className={classes(commonCss.page, padding(20, 'lr'))}>
-
         {run && (
           <div className={commonCss.page}>
             <DetailsTable title='Recurring run details' fields={runDetails} />
@@ -137,7 +144,9 @@ class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
     } catch (err) {
       const errorMessage = await errorToMessage(err);
       await this.showPageError(
-        `Error: failed to retrieve recurring run: ${runId}.`, new Error(errorMessage));
+        `Error: failed to retrieve recurring run: ${runId}.`,
+        new Error(errorMessage),
+      );
       return;
     }
 
@@ -151,7 +160,7 @@ class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
         await this.showPageError(
           `Error: failed to retrieve this recurring run\'s experiment.`,
           new Error(errorMessage),
-          'warning'
+          'warning',
         );
       }
     }
@@ -161,12 +170,14 @@ class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
         { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
         {
           displayName: experiment.name!,
-          href: RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, experiment.id!)
-        });
-    } else {
-      breadcrumbs.push(
-        { displayName: 'All runs', href: RoutePage.RUNS }
+          href: RoutePage.EXPERIMENT_DETAILS.replace(
+            ':' + RouteParams.experimentId,
+            experiment.id!,
+          ),
+        },
       );
+    } else {
+      breadcrumbs.push({ displayName: 'All runs', href: RoutePage.RUNS });
     }
     const pageTitle = run ? run.name! : runId;
 
@@ -182,8 +193,9 @@ class RecurringRunDetails extends Page<{}, RecurringRunConfigState> {
   private _deleteCallback(_: string[], success: boolean): void {
     if (success) {
       const breadcrumbs = this.props.toolbarProps.breadcrumbs;
-      const previousPage = breadcrumbs.length ?
-        breadcrumbs[breadcrumbs.length - 1].href : RoutePage.EXPERIMENTS;
+      const previousPage = breadcrumbs.length
+        ? breadcrumbs[breadcrumbs.length - 1].href
+        : RoutePage.EXPERIMENTS;
       this.props.history.push(previousPage);
     }
   }
diff --git a/frontend/src/pages/RecurringRunsManager.test.tsx b/frontend/src/pages/RecurringRunsManager.test.tsx
index eaec671f820d..1c84d09964cf 100644
--- a/frontend/src/pages/RecurringRunsManager.test.tsx
+++ b/frontend/src/pages/RecurringRunsManager.test.tsx
@@ -40,21 +40,25 @@ describe('RecurringRunsManager', () => {
   const disableJobSpy = jest.spyOn(Apis.jobServiceApi, 'disableJob');
   jest.spyOn(console, 'error').mockImplementation();
 
-  const JOBS: ApiJob[] = [{
-    created_at: new Date(2018, 10, 9, 8, 7, 6),
-    enabled: true,
-    id: 'job1',
-    name: 'test recurring run name',
-  }, {
-    created_at: new Date(2018, 10, 9, 8, 7, 6),
-    enabled: false,
-    id: 'job2',
-    name: 'test recurring run name2',
-  }, {
-    created_at: new Date(2018, 10, 9, 8, 7, 6),
-    id: 'job3',
-    name: 'test recurring run name3',
-  }];
+  const JOBS: ApiJob[] = [
+    {
+      created_at: new Date(2018, 10, 9, 8, 7, 6),
+      enabled: true,
+      id: 'job1',
+      name: 'test recurring run name',
+    },
+    {
+      created_at: new Date(2018, 10, 9, 8, 7, 6),
+      enabled: false,
+      id: 'job2',
+      name: 'test recurring run name2',
+    },
+    {
+      created_at: new Date(2018, 10, 9, 8, 7, 6),
+      id: 'job3',
+      name: 'test recurring run name3',
+    },
+  ];
 
   function generateProps(): RecurringRunListProps {
     return {
@@ -88,7 +92,8 @@ describe('RecurringRunsManager', () => {
       undefined,
       ApiResourceType.EXPERIMENT,
       'test-experiment',
-      undefined);
+      undefined,
+    );
     expect(tree.state('runs')).toEqual(JOBS);
     expect(tree).toMatchSnapshot();
   });
@@ -99,10 +104,12 @@ describe('RecurringRunsManager', () => {
     tree = shallow(<TestRecurringRunsManager {...generateProps()} />);
     await (tree.instance() as TestRecurringRunsManager)._loadRuns({});
     expect(listJobsSpy).toHaveBeenCalledTimes(1);
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'List recurring run configs request failed with:\nwoops!',
-      title: 'Error retrieving recurring run configs',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'List recurring run configs request failed with:\nwoops!',
+        title: 'Error retrieving recurring run configs',
+      }),
+    );
     expect(tree.state('runs')).toEqual([]);
   });
 
@@ -125,10 +132,12 @@ describe('RecurringRunsManager', () => {
     TestUtils.makeErrorResponseOnce(enableJobSpy, 'cannot enable');
     await (tree.instance() as TestRecurringRunsManager)._setEnabledState('test-run', true);
     expect(updateDialogSpy).toHaveBeenCalledTimes(1);
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'Error changing enabled state of recurring run:\ncannot enable',
-      title: 'Error',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'Error changing enabled state of recurring run:\ncannot enable',
+        title: 'Error',
+      }),
+    );
   });
 
   it('shows error if disable API call fails', async () => {
@@ -136,15 +145,22 @@ describe('RecurringRunsManager', () => {
     TestUtils.makeErrorResponseOnce(disableJobSpy, 'cannot disable');
     await (tree.instance() as TestRecurringRunsManager)._setEnabledState('test-run', false);
     expect(updateDialogSpy).toHaveBeenCalledTimes(1);
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'Error changing enabled state of recurring run:\ncannot disable',
-      title: 'Error',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'Error changing enabled state of recurring run:\ncannot disable',
+        title: 'Error',
+      }),
+    );
   });
 
   it('renders run name as link to its details page', () => {
     tree = TestUtils.mountWithRouter(<RecurringRunsManager {...generateProps()} />);
-    expect((tree.instance() as RecurringRunsManager)._nameCustomRenderer({ value: 'test-run', id: 'run-id' })).toMatchSnapshot();
+    expect(
+      (tree.instance() as RecurringRunsManager)._nameCustomRenderer({
+        id: 'run-id',
+        value: 'test-run',
+      }),
+    ).toMatchSnapshot();
   });
 
   it('renders a disable button if the run is enabled, clicking the button calls disable API', async () => {
@@ -175,7 +191,7 @@ describe('RecurringRunsManager', () => {
     expect(enableJobSpy).toHaveBeenLastCalledWith(JOBS[1].id);
   });
 
-  it('renders an enable button if the run\'s enabled field is undefined, clicking the button calls enable API', async () => {
+  it("renders an enable button if the run's enabled field is undefined, clicking the button calls enable API", async () => {
     tree = TestUtils.mountWithRouter(<RecurringRunsManager {...generateProps()} />);
     await TestUtils.flushPromises();
     tree.update();
diff --git a/frontend/src/pages/RecurringRunsManager.tsx b/frontend/src/pages/RecurringRunsManager.tsx
index 908e95c5efab..eaa9171ea7bf 100644
--- a/frontend/src/pages/RecurringRunsManager.tsx
+++ b/frontend/src/pages/RecurringRunsManager.tsx
@@ -18,7 +18,7 @@ import * as React from 'react';
 import BusyButton from '../atoms/BusyButton';
 import CustomTable, { Column, Row, CustomRendererProps } from '../components/CustomTable';
 import Toolbar, { ToolbarActionMap } from '../components/Toolbar';
-import { ApiJob, ApiResourceType } from '../apis/job';
+import { ApiJob } from '../apis/job';
 import { Apis, JobSortKeys, ListRequest } from '../lib/Apis';
 import { DialogProps, RoutePage, RouteParams } from '../components/Router';
 import { Link } from 'react-router-dom';
@@ -72,22 +72,27 @@ class RecurringRunsManager extends React.Component<RecurringRunListProps, Recurr
       return {
         error: r.error,
         id: r.id!,
-        otherFields: [
-          r.name,
-          formatDateString(r.created_at),
-          r.enabled,
-        ],
+        otherFields: [r.name, formatDateString(r.created_at), r.enabled],
       };
     });
 
-    return (<React.Fragment>
-      <Toolbar actions={toolbarActions} breadcrumbs={[]} pageTitle='Recurring runs' />
-      <CustomTable columns={columns} rows={rows} ref={this._tableRef} selectedIds={selectedIds}
-        updateSelection={ids => this.setState({ selectedIds: ids })}
-        initialSortColumn={JobSortKeys.CREATED_AT} reload={this._loadRuns.bind(this)}
-        filterLabel='Filter recurring runs' disableSelection={true}
-        emptyMessage={'No recurring runs found in this experiment.'}/>
-    </React.Fragment>);
+    return (
+      <React.Fragment>
+        <Toolbar actions={toolbarActions} breadcrumbs={[]} pageTitle='Recurring runs' />
+        <CustomTable
+          columns={columns}
+          rows={rows}
+          ref={this._tableRef}
+          selectedIds={selectedIds}
+          updateSelection={ids => this.setState({ selectedIds: ids })}
+          initialSortColumn={JobSortKeys.CREATED_AT}
+          reload={this._loadRuns.bind(this)}
+          filterLabel='Filter recurring runs'
+          disableSelection={true}
+          emptyMessage={'No recurring runs found in this experiment.'}
+        />
+      </React.Fragment>
+    );
   }
 
   public async refresh(): Promise<void> {
@@ -96,27 +101,42 @@ class RecurringRunsManager extends React.Component<RecurringRunListProps, Recurr
     }
   }
 
-  public _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (props: CustomRendererProps<string>) => {
-    return <Link className={commonCss.link}
-      to={RoutePage.RECURRING_RUN.replace(':' + RouteParams.runId, props.id)}>{props.value}</Link>;
-  }
-
-  public _enabledCustomRenderer: React.FC<CustomRendererProps<boolean>> = (props: CustomRendererProps<boolean>) => {
+  public _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (
+    props: CustomRendererProps<string>,
+  ) => {
+    return (
+      <Link
+        className={commonCss.link}
+        to={RoutePage.RECURRING_RUN.replace(':' + RouteParams.runId, props.id)}
+      >
+        {props.value}
+      </Link>
+    );
+  };
+
+  public _enabledCustomRenderer: React.FC<CustomRendererProps<boolean>> = (
+    props: CustomRendererProps<boolean>,
+  ) => {
     const isBusy = this.state.busyIds.has(props.id);
-    return <BusyButton outlined={props.value} title={props.value === true ? 'Enabled' : 'Disabled'}
-      busy={isBusy} onClick={() => {
-        let busyIds = this.state.busyIds;
-        busyIds.add(props.id);
-        this.setState({ busyIds }, async () => {
-          await this._setEnabledState(props.id, !props.value);
-          busyIds = this.state.busyIds;
-          busyIds.delete(props.id);
-          this.setState({ busyIds });
-          await this.refresh();
-        });
-      }} />;
-  }
-
+    return (
+      <BusyButton
+        outlined={props.value}
+        title={props.value === true ? 'Enabled' : 'Disabled'}
+        busy={isBusy}
+        onClick={() => {
+          let busyIds = this.state.busyIds;
+          busyIds.add(props.id);
+          this.setState({ busyIds }, async () => {
+            await this._setEnabledState(props.id, !props.value);
+            busyIds = this.state.busyIds;
+            busyIds.delete(props.id);
+            this.setState({ busyIds });
+            await this.refresh();
+          });
+        }}
+      />
+    );
+  };
 
   protected async _loadRuns(request: ListRequest): Promise<string> {
     let runs: ApiJob[] = [];
@@ -126,7 +146,7 @@ class RecurringRunsManager extends React.Component<RecurringRunListProps, Recurr
         request.pageToken,
         request.pageSize,
         request.sortBy,
-        ApiResourceType.EXPERIMENT.toString(),
+        'EXPERIMENT',
         this.props.experimentId,
         request.filter,
       );
diff --git a/frontend/src/pages/ResourceSelector.test.tsx b/frontend/src/pages/ResourceSelector.test.tsx
index f60baea78526..5a00f6b31ccd 100644
--- a/frontend/src/pages/ResourceSelector.test.tsx
+++ b/frontend/src/pages/ResourceSelector.test.tsx
@@ -47,12 +47,13 @@ describe('ResourceSelector', () => {
       description: 'test-1 description',
       id: 'some-id-1',
       name: 'test-1 name',
-    }, {
+    },
+    {
       created_at: new Date(2018, 10, 9, 8, 7, 6),
       description: 'test-2 description',
       id: 'some-2-id',
       name: 'test-2 name',
-    }
+    },
   ];
 
   const selectorColumns = [
@@ -82,8 +83,10 @@ describe('ResourceSelector', () => {
 
   beforeEach(() => {
     listResourceSpy.mockReset();
-    listResourceSpy.mockImplementation(
-      () => ({ resources: RESOURCES, nextPageToken: 'test-next-page-token' }));
+    listResourceSpy.mockImplementation(() => ({
+      nextPageToken: 'test-next-page-token',
+      resources: RESOURCES,
+    }));
     updateDialogSpy.mockReset();
     selectionChangedCbSpy.mockReset();
   });
@@ -112,7 +115,7 @@ describe('ResourceSelector', () => {
         description: 'a description',
         id: 'an-id',
         name: 'a name',
-      }
+      },
     ];
     listResourceSpy.mockImplementationOnce(() => ({ resources, nextPageToken: '' }));
     props.listApi = listResourceSpy as any;
@@ -120,14 +123,12 @@ describe('ResourceSelector', () => {
     tree = shallow(<TestResourceSelector {...props} />);
     await (tree.instance() as TestResourceSelector)._load({});
 
-    expect(tree.state('rows')).toEqual([{
-      id: 'an-id',
-      otherFields: [
-        'a name',
-        'a description',
-        '2/2/2018, 3:04:05 AM',
-      ],
-    }]);
+    expect(tree.state('rows')).toEqual([
+      {
+        id: 'an-id',
+        otherFields: ['a name', 'a description', '2/2/2018, 3:04:05 AM'],
+      },
+    ]);
   });
 
   it('shows error dialog if listing fails', async () => {
@@ -138,10 +139,12 @@ describe('ResourceSelector', () => {
     await (tree.instance() as TestResourceSelector)._load({});
 
     expect(listResourceSpy).toHaveBeenCalledTimes(1);
-    expect(updateDialogSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      content: 'List request failed with:\nwoops!',
-      title: 'Error retrieving resources',
-    }));
+    expect(updateDialogSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        content: 'List request failed with:\nwoops!',
+        title: 'Error retrieving resources',
+      }),
+    );
     expect(tree.state('resources')).toEqual([]);
   });
 
@@ -162,12 +165,17 @@ describe('ResourceSelector', () => {
 
     expect(tree.state('selectedIds')).toEqual([]);
 
-    (tree.instance() as TestResourceSelector)._selectionChanged([RESOURCES[0].id!, RESOURCES[1].id!]);
+    (tree.instance() as TestResourceSelector)._selectionChanged([
+      RESOURCES[0].id!,
+      RESOURCES[1].id!,
+    ]);
 
     expect(selectionChangedCbSpy).not.toHaveBeenCalled();
     expect(tree.state('selectedIds')).toEqual([]);
-    expect(consoleSpy).toHaveBeenLastCalledWith(
-      '2 resources were selected somehow', [RESOURCES[0].id, RESOURCES[1].id]);
+    expect(consoleSpy).toHaveBeenLastCalledWith('2 resources were selected somehow', [
+      RESOURCES[0].id,
+      RESOURCES[1].id,
+    ]);
   });
 
   it('logs error if selected resource ID is not found in list', async () => {
@@ -182,6 +190,7 @@ describe('ResourceSelector', () => {
     expect(selectionChangedCbSpy).not.toHaveBeenCalled();
     expect(tree.state('selectedIds')).toEqual([]);
     expect(consoleSpy).toHaveBeenLastCalledWith(
-      'Somehow no resource was found with ID: id-not-in-list');
+      'Somehow no resource was found with ID: id-not-in-list',
+    );
   });
 });
diff --git a/frontend/src/pages/ResourceSelector.tsx b/frontend/src/pages/ResourceSelector.tsx
index 3de75325c129..078e80c345b8 100644
--- a/frontend/src/pages/ResourceSelector.tsx
+++ b/frontend/src/pages/ResourceSelector.tsx
@@ -43,6 +43,7 @@ export interface ResourceSelectorProps extends RouteComponentProps {
   initialSortColumn: any;
   selectionChanged: (resource: BaseResource) => void;
   title: string;
+  toolbarActionMap?: ToolbarActionMap;
   updateDialog: (dialogProps: DialogProps) => void;
 }
 
@@ -63,21 +64,28 @@ class ResourceSelector extends React.Component<ResourceSelectorProps, ResourceSe
       resources: [],
       rows: [],
       selectedIds: [],
-      toolbarActionMap: {},
+      toolbarActionMap: (props && props.toolbarActionMap) || {},
     };
   }
 
   public render(): JSX.Element {
-    const { rows, selectedIds, toolbarActionMap: toolbarActions } = this.state;
+    const { rows, selectedIds, toolbarActionMap } = this.state;
     const { columns, title, filterLabel, emptyMessage, initialSortColumn } = this.props;
 
     return (
       <React.Fragment>
-        <Toolbar actions={toolbarActions} breadcrumbs={[]} pageTitle={title} />
-        <CustomTable columns={columns} rows={rows} selectedIds={selectedIds} useRadioButtons={true}
-          updateSelection={this._selectionChanged.bind(this)} filterLabel={filterLabel}
-          initialSortColumn={initialSortColumn} reload={this._load.bind(this)}
-          emptyMessage={emptyMessage} />
+        <Toolbar actions={toolbarActionMap} breadcrumbs={[]} pageTitle={title} />
+        <CustomTable
+          columns={columns}
+          rows={rows}
+          selectedIds={selectedIds}
+          useRadioButtons={true}
+          updateSelection={this._selectionChanged.bind(this)}
+          filterLabel={filterLabel}
+          initialSortColumn={initialSortColumn}
+          reload={this._load.bind(this)}
+          emptyMessage={emptyMessage}
+        />
       </React.Fragment>
     );
   }
@@ -110,12 +118,16 @@ class ResourceSelector extends React.Component<ResourceSelectorProps, ResourceSe
   protected async _load(request: ListRequest): Promise<string> {
     let nextPageToken = '';
     try {
-      const response =
-        await this.props.listApi(request.pageToken, request.pageSize, request.sortBy, request.filter);
+      const response = await this.props.listApi(
+        request.pageToken,
+        request.pageSize,
+        request.sortBy,
+        request.filter,
+      );
 
       this.setStateSafe({
         resources: response.resources,
-        rows: this._resourcesToRow(response.resources)
+        rows: this._resourcesToRow(response.resources),
       });
 
       nextPageToken = response.nextPageToken;
@@ -132,17 +144,15 @@ class ResourceSelector extends React.Component<ResourceSelectorProps, ResourceSe
   }
 
   protected _resourcesToRow(resources: BaseResource[]): Row[] {
-    return resources.map((r) => ({
-      error: (r as any).error,
-      id: r.id!,
-      otherFields: [
-        r.name,
-        r.description,
-        formatDateString(r.created_at),
-      ],
-    } as Row));
+    return resources.map(
+      r =>
+        ({
+          error: (r as any).error,
+          id: r.id!,
+          otherFields: [r.name, r.description, formatDateString(r.created_at)],
+        } as Row),
+    );
   }
 }
 
 export default ResourceSelector;
-
diff --git a/frontend/src/pages/RunDetails.test.tsx b/frontend/src/pages/RunDetails.test.tsx
index 17629b780cfa..402e3adcf868 100644
--- a/frontend/src/pages/RunDetails.test.tsx
+++ b/frontend/src/pages/RunDetails.test.tsx
@@ -93,7 +93,9 @@ describe('RunDetails', () => {
     getProjectIdSpy.mockImplementation(() => Promise.resolve('some-project'));
     getClusterNameSpy.mockImplementation(() => Promise.resolve('some-cluster'));
     getRunSpy.mockImplementation(() => Promise.resolve(testRun));
-    getExperimentSpy.mockImplementation(() => Promise.resolve({ id: 'some-experiment-id', name: 'some experiment' }));
+    getExperimentSpy.mockImplementation(() =>
+      Promise.resolve({ id: 'some-experiment-id', name: 'some experiment' }),
+    );
     isCustomVisualizationsAllowedSpy.mockImplementation(() => Promise.resolve(false));
     getPodLogsSpy.mockImplementation(() => 'test logs');
     pathsParser.mockImplementation(() => []);
@@ -137,7 +139,8 @@ describe('RunDetails', () => {
     await cloneBtn!.action();
     expect(historyPushSpy).toHaveBeenCalledTimes(1);
     expect(historyPushSpy).toHaveBeenLastCalledWith(
-      RoutePage.NEW_RUN + `?${QUERY_PARAMS.cloneFromRun}=${testRun.run!.id}`);
+      RoutePage.NEW_RUN + `?${QUERY_PARAMS.cloneFromRun}=${testRun.run!.id}`,
+    );
   });
 
   it('has an Archive button if the run is not archived', async () => {
@@ -152,25 +155,34 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      breadcrumbs: [{ displayName: 'All runs', href: RoutePage.RUNS }],
-    }));
+    expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        breadcrumbs: [{ displayName: 'All runs', href: RoutePage.RUNS }],
+      }),
+    );
   });
 
   it('shows experiment name in breadcrumbs if the run is not archived', async () => {
-    testRun.run!.resource_references = [{ key: { id: 'some-experiment-id', type: ApiResourceType.EXPERIMENT } }];
+    testRun.run!.resource_references = [
+      { key: { id: 'some-experiment-id', type: ApiResourceType.EXPERIMENT } },
+    ];
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      breadcrumbs: [
-        { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
-        {
-          displayName: 'some experiment',
-          href: RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, 'some-experiment-id'),
-        },
-      ],
-    }));
+    expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        breadcrumbs: [
+          { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
+          {
+            displayName: 'some experiment',
+            href: RoutePage.EXPERIMENT_DETAILS.replace(
+              ':' + RouteParams.experimentId,
+              'some-experiment-id',
+            ),
+          },
+        ],
+      }),
+    );
   });
 
   it('has a Restore button if the run is archived', async () => {
@@ -187,9 +199,11 @@ describe('RunDetails', () => {
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
-    expect(updateToolbarSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      breadcrumbs: [{ 'displayName': 'Archive', 'href': RoutePage.ARCHIVE }],
-    }));
+    expect(updateToolbarSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        breadcrumbs: [{ displayName: 'Archive', href: RoutePage.ARCHIVE }],
+      }),
+    );
   });
 
   it('renders an empty run', async () => {
@@ -212,29 +226,43 @@ describe('RunDetails', () => {
     await getRunSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once initially to clear
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops',
-      message: 'Error: failed to retrieve run: ' + testRun.run!.id + '. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops',
+        message:
+          'Error: failed to retrieve run: ' +
+          testRun.run!.id +
+          '. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('shows an error banner if get experiment API fails', async () => {
-    testRun.run!.resource_references = [{ key: { id: 'experiment1', type: ApiResourceType.EXPERIMENT } }];
+    testRun.run!.resource_references = [
+      { key: { id: 'experiment1', type: ApiResourceType.EXPERIMENT } },
+    ];
     TestUtils.makeErrorResponseOnce(getExperimentSpy, 'woops');
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once initially to clear
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops',
-      message: 'Error: failed to retrieve run: ' + testRun.run!.id + '. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops',
+        message:
+          'Error: failed to retrieve run: ' +
+          testRun.run!.id +
+          '. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('calls the get experiment API once to load it if the run has its reference', async () => {
-    testRun.run!.resource_references = [{ key: { id: 'experiment1', type: ApiResourceType.EXPERIMENT } }];
+    testRun.run!.resource_references = [
+      { key: { id: 'experiment1', type: ApiResourceType.EXPERIMENT } },
+    ];
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
@@ -245,16 +273,23 @@ describe('RunDetails', () => {
   });
 
   it('shows workflow errors as page error', async () => {
-    jest.spyOn(WorkflowParser, 'getWorkflowError').mockImplementationOnce(() => 'some error message');
+    jest
+      .spyOn(WorkflowParser, 'getWorkflowError')
+      .mockImplementationOnce(() => 'some error message');
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once to clear on init, once for error
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'some error message',
-      message: 'Error: found errors when executing run: ' + testRun.run!.id + '. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'some error message',
+        message:
+          'Error: found errors when executing run: ' +
+          testRun.run!.id +
+          '. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   it('switches to run output tab, shows empty message', async () => {
@@ -267,12 +302,14 @@ describe('RunDetails', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('loads the run\'s outputs in the output tab', async () => {
+  it("loads the run's outputs in the output tab", async () => {
     pathsWithStepsParser.mockImplementation(() => [
-      { stepName: 'step1', path: { source: 'gcs', bucket: 'somebucket', key: 'somekey' } }
+      { stepName: 'step1', path: { source: 'gcs', bucket: 'somebucket', key: 'somekey' } },
     ]);
     pathsParser.mockImplementation(() => [{ source: 'gcs', bucket: 'somebucket', key: 'somekey' }]);
-    loaderSpy.mockImplementation(() => Promise.resolve([{ type: PlotType.TENSORBOARD, url: 'some url' }]));
+    loaderSpy.mockImplementation(() =>
+      Promise.resolve([{ type: PlotType.TENSORBOARD, url: 'some url' }]),
+    );
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
@@ -298,13 +335,16 @@ describe('RunDetails', () => {
       },
       spec: {
         arguments: {
-          parameters: [{
-            name: 'param1',
-            value: 'value1',
-          }, {
-            name: 'param2',
-            value: 'value2',
-          }],
+          parameters: [
+            {
+              name: 'param1',
+              value: 'value1',
+            },
+            {
+              name: 'param2',
+              value: 'value2',
+            },
+          ],
         },
       },
       status: {
@@ -359,7 +399,7 @@ describe('RunDetails', () => {
 
   it('shows a one-node graph', async () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', }, }, },
+      status: { nodes: { node1: { id: 'node1' } } },
     });
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
@@ -369,7 +409,7 @@ describe('RunDetails', () => {
 
   it('opens side panel when graph node is clicked', async () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', }, }, },
+      status: { nodes: { node1: { id: 'node1' } } },
     });
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
@@ -395,20 +435,24 @@ describe('RunDetails', () => {
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    expect(tree.state('selectedNodeDetails')).toHaveProperty('phaseMessage',
-      'This step is in ' + testRun.run!.status + ' state with this message: some test message');
+    expect(tree.state('selectedNodeDetails')).toHaveProperty(
+      'phaseMessage',
+      'This step is in ' + testRun.run!.status + ' state with this message: some test message',
+    );
     expect(tree).toMatchSnapshot();
   });
 
   it('shows clicked node output in side pane', async () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', }, }, },
+      status: { nodes: { node1: { id: 'node1' } } },
     });
     pathsWithStepsParser.mockImplementation(() => [
-      { stepName: 'step1', path: { source: 'gcs', bucket: 'somebucket', key: 'somekey' } }
+      { stepName: 'step1', path: { source: 'gcs', bucket: 'somebucket', key: 'somekey' } },
     ]);
     pathsParser.mockImplementation(() => [{ source: 'gcs', bucket: 'somebucket', key: 'somekey' }]);
-    loaderSpy.mockImplementation(() => Promise.resolve([{ type: PlotType.TENSORBOARD, url: 'some url' }]));
+    loaderSpy.mockImplementation(() =>
+      Promise.resolve([{ type: PlotType.TENSORBOARD, url: 'some url' }]),
+    );
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
@@ -420,7 +464,11 @@ describe('RunDetails', () => {
     expect(pathsParser).toHaveBeenCalledTimes(1);
     expect(pathsParser).toHaveBeenLastCalledWith({ id: 'node1' });
     expect(loaderSpy).toHaveBeenCalledTimes(2);
-    expect(loaderSpy).toHaveBeenLastCalledWith({ bucket: 'somebucket', key: 'somekey', source: 'gcs' });
+    expect(loaderSpy).toHaveBeenLastCalledWith({
+      bucket: 'somebucket',
+      key: 'somekey',
+      source: 'gcs',
+    });
     expect(tree.state('selectedNodeDetails')).toMatchObject({ id: 'node1' });
     expect(tree).toMatchSnapshot();
   });
@@ -432,16 +480,14 @@ describe('RunDetails', () => {
           node1: {
             id: 'node1',
             inputs: {
-              parameters: [
-                { name: 'input1', value: 'val1' },
-              ],
+              parameters: [{ name: 'input1', value: 'val1' }],
             },
             name: 'node1',
             outputs: {
               parameters: [
                 { name: 'output1', value: 'val1' },
                 { name: 'output2', value: 'value2' },
-              ]
+              ],
             },
             phase: 'Succeeded',
           },
@@ -452,7 +498,10 @@ describe('RunDetails', () => {
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    tree.find('MD2Tabs').at(1).simulate('switch', 1);
+    tree
+      .find('MD2Tabs')
+      .at(1)
+      .simulate('switch', 1);
     await TestUtils.flushPromises();
     expect(tree.state('sidepanelSelectedTab')).toEqual(1);
     expect(tree).toMatchSnapshot();
@@ -460,33 +509,39 @@ describe('RunDetails', () => {
 
   it('switches to volumes tab in side pane', async () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', }, }, },
+      status: { nodes: { node1: { id: 'node1' } } },
     });
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    tree.find('MD2Tabs').at(1).simulate('switch', 2);
+    tree
+      .find('MD2Tabs')
+      .at(1)
+      .simulate('switch', 2);
     expect(tree.state('sidepanelSelectedTab')).toEqual(2);
     expect(tree).toMatchSnapshot();
   });
 
   it('switches to manifest tab in side pane', async () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', }, }, },
+      status: { nodes: { node1: { id: 'node1' } } },
     });
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    tree.find('MD2Tabs').at(1).simulate('switch', 3);
+    tree
+      .find('MD2Tabs')
+      .at(1)
+      .simulate('switch', 3);
     expect(tree.state('sidepanelSelectedTab')).toEqual(3);
     expect(tree).toMatchSnapshot();
   });
 
   it('closes side panel when close button is clicked', async () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', }, }, },
+      status: { nodes: { node1: { id: 'node1' } } },
     });
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
@@ -502,18 +557,21 @@ describe('RunDetails', () => {
 
   it('keeps side pane open and on same tab when page is refreshed', async () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', }, }, },
+      status: { nodes: { node1: { id: 'node1' } } },
     });
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    tree.find('MD2Tabs').at(1).simulate('switch', 4);
+    tree
+      .find('MD2Tabs')
+      .at(1)
+      .simulate('switch', 4);
     expect(tree.state('selectedNodeDetails')).toHaveProperty('id', 'node1');
     expect(tree.state('sidepanelSelectedTab')).toEqual(4);
 
     await (tree.instance() as RunDetails).refresh();
-    expect (getRunSpy).toHaveBeenCalledTimes(2);
+    expect(getRunSpy).toHaveBeenCalledTimes(2);
     expect(tree.state('selectedNodeDetails')).toHaveProperty('id', 'node1');
     expect(tree.state('sidepanelSelectedTab')).toEqual(4);
   });
@@ -522,8 +580,8 @@ describe('RunDetails', () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
       status: {
         nodes: {
-          node1: { id: 'node1', },
-          node2: { id: 'node2', },
+          node1: { id: 'node1' },
+          node2: { id: 'node2' },
         },
       },
     });
@@ -531,7 +589,10 @@ describe('RunDetails', () => {
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    tree.find('MD2Tabs').at(1).simulate('switch', 4);
+    tree
+      .find('MD2Tabs')
+      .at(1)
+      .simulate('switch', 4);
     expect(tree.state('selectedNodeDetails')).toHaveProperty('id', 'node1');
     expect(tree.state('sidepanelSelectedTab')).toEqual(4);
 
@@ -549,7 +610,10 @@ describe('RunDetails', () => {
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    tree.find('MD2Tabs').at(1).simulate('switch', 4);
+    tree
+      .find('MD2Tabs')
+      .at(1)
+      .simulate('switch', 4);
     expect(tree.state('selectedNodeDetails')).toHaveProperty('id', 'node1');
     expect(tree.state('sidepanelSelectedTab')).toEqual(4);
     expect(updateToolbarSpy).toHaveBeenCalledTimes(3);
@@ -571,28 +635,42 @@ describe('RunDetails', () => {
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    tree.find('MD2Tabs').at(1).simulate('switch', 4);
+    tree
+      .find('MD2Tabs')
+      .at(1)
+      .simulate('switch', 4);
     expect(tree.state('selectedNodeDetails')).toHaveProperty('phaseMessage', undefined);
 
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', phase: 'Succeeded', message: 'some node message' } } },
+      status: {
+        nodes: { node1: { id: 'node1', phase: 'Succeeded', message: 'some node message' } },
+      },
     });
     await (tree.instance() as RunDetails).refresh();
-    expect(tree.state('selectedNodeDetails')).toHaveProperty('phaseMessage',
-      'This step is in Succeeded state with this message: some node message');
+    expect(tree.state('selectedNodeDetails')).toHaveProperty(
+      'phaseMessage',
+      'This step is in Succeeded state with this message: some node message',
+    );
   });
 
   it('dismisses node message banner if node loses message after refresh', async () => {
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-      status: { nodes: { node1: { id: 'node1', phase: 'Succeeded', message: 'some node message' } } },
+      status: {
+        nodes: { node1: { id: 'node1', phase: 'Succeeded', message: 'some node message' } },
+      },
     });
     tree = shallow(<RunDetails {...generateProps()} />);
     await getRunSpy;
     await TestUtils.flushPromises();
     tree.find('Graph').simulate('click', 'node1');
-    tree.find('MD2Tabs').at(1).simulate('switch', 4);
-    expect(tree.state('selectedNodeDetails')).toHaveProperty('phaseMessage',
-      'This step is in Succeeded state with this message: some node message');
+    tree
+      .find('MD2Tabs')
+      .at(1)
+      .simulate('switch', 4);
+    expect(tree.state('selectedNodeDetails')).toHaveProperty(
+      'phaseMessage',
+      'This step is in Succeeded state with this message: some node message',
+    );
 
     testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
       status: { nodes: { node1: { id: 'node1' } } },
@@ -624,28 +702,30 @@ describe('RunDetails', () => {
     });
   });
 
-  [NodePhase.ERROR, NodePhase.FAILED, NodePhase.SUCCEEDED, NodePhase.SKIPPED].forEach(finishedStatus => {
-    it(`displays a message indicating there is no graph if graph is not defined and run has status: ${finishedStatus}`, async () => {
-      const unfinishedRun = {
-        pipeline_runtime: {
-          // No graph
-          workflow_manifest: '{}',
-        },
-        run: {
-          id: 'test-run-id',
-          name: 'test run',
-          status: finishedStatus,
-        },
-      };
-      getRunSpy.mockImplementationOnce(() => Promise.resolve(unfinishedRun));
+  [NodePhase.ERROR, NodePhase.FAILED, NodePhase.SUCCEEDED, NodePhase.SKIPPED].forEach(
+    finishedStatus => {
+      it(`displays a message indicating there is no graph if graph is not defined and run has status: ${finishedStatus}`, async () => {
+        const unfinishedRun = {
+          pipeline_runtime: {
+            // No graph
+            workflow_manifest: '{}',
+          },
+          run: {
+            id: 'test-run-id',
+            name: 'test run',
+            status: finishedStatus,
+          },
+        };
+        getRunSpy.mockImplementationOnce(() => Promise.resolve(unfinishedRun));
 
-      tree = shallow(<RunDetails {...generateProps()} />);
-      await getRunSpy;
-      await TestUtils.flushPromises();
+        tree = shallow(<RunDetails {...generateProps()} />);
+        await getRunSpy;
+        await TestUtils.flushPromises();
 
-      expect(tree).toMatchSnapshot();
-    });
-  });
+        expect(tree).toMatchSnapshot();
+      });
+    },
+  );
 
   it('shows an error banner if the custom visualizations state API fails', async () => {
     TestUtils.makeErrorResponseOnce(isCustomVisualizationsAllowedSpy, 'woops');
@@ -653,36 +733,45 @@ describe('RunDetails', () => {
     await isCustomVisualizationsAllowedSpy;
     await TestUtils.flushPromises();
     expect(updateBannerSpy).toHaveBeenCalledTimes(2); // Once initially to clear
-    expect(updateBannerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
-      additionalInfo: 'woops',
-      message:'Error: Unable to enable custom visualizations. Click Details for more information.',
-      mode: 'error',
-    }));
+    expect(updateBannerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        additionalInfo: 'woops',
+        message:
+          'Error: Unable to enable custom visualizations. Click Details for more information.',
+        mode: 'error',
+      }),
+    );
   });
 
   describe('logs tab', () => {
     it('switches to logs tab in side pane', async () => {
       testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-        status: { nodes: { node1: { id: 'node1', }, }, },
+        status: { nodes: { node1: { id: 'node1' } } },
       });
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
       tree.find('Graph').simulate('click', 'node1');
-      tree.find('MD2Tabs').at(1).simulate('switch', 4);
+      tree
+        .find('MD2Tabs')
+        .at(1)
+        .simulate('switch', 4);
       expect(tree.state('sidepanelSelectedTab')).toEqual(4);
       expect(tree).toMatchSnapshot();
     });
 
     it('loads and shows logs in side pane', async () => {
       testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-        status: { nodes: { node1: { id: 'node1', }, }, },
+        status: { nodes: { node1: { id: 'node1' } } },
       });
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
       tree.find('Graph').simulate('click', 'node1');
-      tree.find('MD2Tabs').at(1).simulate('switch', 4);
+      tree
+        .find('MD2Tabs')
+        .at(1)
+        .simulate('switch', 4);
       await getPodLogsSpy;
       expect(getPodLogsSpy).toHaveBeenCalledTimes(1);
       expect(getPodLogsSpy).toHaveBeenLastCalledWith('node1');
@@ -694,18 +783,22 @@ describe('RunDetails', () => {
       getProjectIdSpy.mockImplementationOnce(() => Promise.resolve('test-project-id'));
       getClusterNameSpy.mockImplementationOnce(() => Promise.resolve('test-cluster-name'));
       testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-        status: { nodes: { node1: { id: 'node1', }, }, },
+        status: { nodes: { node1: { id: 'node1' } } },
       });
       TestUtils.makeErrorResponseOnce(getPodLogsSpy, 'getting logs failed');
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
       tree.find('Graph').simulate('click', 'node1');
-      tree.find('MD2Tabs').at(1).simulate('switch', 4);
+      tree
+        .find('MD2Tabs')
+        .at(1)
+        .simulate('switch', 4);
       await getPodLogsSpy;
       await TestUtils.flushPromises();
       expect(tree.state()).toMatchObject({
-        logsBannerMessage: 'Warning: failed to retrieve pod logs. Possible reasons include cluster autoscaling or pod preemption',
+        logsBannerMessage:
+          'Warning: failed to retrieve pod logs. Possible reasons include cluster autoscaling or pod preemption',
         logsBannerMode: 'warning',
       });
       expect(tree).toMatchSnapshot();
@@ -715,19 +808,23 @@ describe('RunDetails', () => {
       // returning an error for getProjectId simulates a cluster running outside of GKE
       TestUtils.makeErrorResponseOnce(getProjectIdSpy, 'getting project ID failed');
       testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-        status: { nodes: { node1: { id: 'node1', }, }, },
+        status: { nodes: { node1: { id: 'node1' } } },
       });
       TestUtils.makeErrorResponseOnce(getPodLogsSpy, 'getting logs failed');
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
       tree.find('Graph').simulate('click', 'node1');
-      tree.find('MD2Tabs').at(1).simulate('switch', 4);
+      tree
+        .find('MD2Tabs')
+        .at(1)
+        .simulate('switch', 4);
       await getPodLogsSpy;
       await TestUtils.flushPromises();
       expect(tree.state()).toMatchObject({
         logsBannerAdditionalInfo: 'getting logs failed',
-        logsBannerMessage: 'Error: failed to retrieve pod logs. Click Details for more information.',
+        logsBannerMessage:
+          'Error: failed to retrieve pod logs. Click Details for more information.',
         logsBannerMode: 'error',
       });
       expect(tree).toMatchSnapshot();
@@ -737,19 +834,23 @@ describe('RunDetails', () => {
       // returning an error for getClusterName simulates a cluster running outside of GKE
       TestUtils.makeErrorResponseOnce(getClusterNameSpy, 'getting cluster name failed');
       testRun.pipeline_runtime!.workflow_manifest = JSON.stringify({
-        status: { nodes: { node1: { id: 'node1', }, }, },
+        status: { nodes: { node1: { id: 'node1' } } },
       });
       TestUtils.makeErrorResponseOnce(getPodLogsSpy, 'getting logs failed');
       tree = shallow(<RunDetails {...generateProps()} />);
       await getRunSpy;
       await TestUtils.flushPromises();
       tree.find('Graph').simulate('click', 'node1');
-      tree.find('MD2Tabs').at(1).simulate('switch', 4);
+      tree
+        .find('MD2Tabs')
+        .at(1)
+        .simulate('switch', 4);
       await getPodLogsSpy;
       await TestUtils.flushPromises();
       expect(tree.state()).toMatchObject({
         logsBannerAdditionalInfo: 'getting logs failed',
-        logsBannerMessage: 'Error: failed to retrieve pod logs. Click Details for more information.',
+        logsBannerMessage:
+          'Error: failed to retrieve pod logs. Click Details for more information.',
         logsBannerMode: 'error',
       });
       expect(tree).toMatchSnapshot();
@@ -770,7 +871,10 @@ describe('RunDetails', () => {
       await getRunSpy;
       await TestUtils.flushPromises();
       tree.find('Graph').simulate('click', 'node1');
-      tree.find('MD2Tabs').at(1).simulate('switch', 4);
+      tree
+        .find('MD2Tabs')
+        .at(1)
+        .simulate('switch', 4);
       await getPodLogsSpy;
       await TestUtils.flushPromises();
       expect(getPodLogsSpy).not.toHaveBeenCalled();
@@ -789,7 +893,10 @@ describe('RunDetails', () => {
       await getRunSpy;
       await TestUtils.flushPromises();
       tree.find('Graph').simulate('click', 'node1');
-      tree.find('MD2Tabs').at(1).simulate('switch', 4);
+      tree
+        .find('MD2Tabs')
+        .at(1)
+        .simulate('switch', 4);
       expect(tree.state('selectedNodeDetails')).toHaveProperty('id', 'node1');
       expect(tree.state('sidepanelSelectedTab')).toEqual(4);
 
@@ -809,12 +916,16 @@ describe('RunDetails', () => {
       await getRunSpy;
       await TestUtils.flushPromises();
       tree.find('Graph').simulate('click', 'node1');
-      tree.find('MD2Tabs').at(1).simulate('switch', 4);
+      tree
+        .find('MD2Tabs')
+        .at(1)
+        .simulate('switch', 4);
       await getPodLogsSpy;
       await TestUtils.flushPromises();
       expect(tree.state()).toMatchObject({
         logsBannerAdditionalInfo: 'getting logs failed',
-        logsBannerMessage: 'Error: failed to retrieve pod logs. Click Details for more information.',
+        logsBannerMessage:
+          'Error: failed to retrieve pod logs. Click Details for more information.',
         logsBannerMode: 'error',
       });
 
@@ -844,7 +955,7 @@ describe('RunDetails', () => {
       tree = shallow(<RunDetails {...generateProps()} />);
       await TestUtils.flushPromises();
 
-      const refreshSpy = jest.spyOn((tree.instance() as RunDetails), 'refresh');
+      const refreshSpy = jest.spyOn(tree.instance() as RunDetails, 'refresh');
 
       expect(refreshSpy).toHaveBeenCalledTimes(0);
 
@@ -853,7 +964,6 @@ describe('RunDetails', () => {
       await TestUtils.flushPromises();
     }, 10000);
 
-
     [NodePhase.ERROR, NodePhase.FAILED, NodePhase.SUCCEEDED, NodePhase.SKIPPED].forEach(status => {
       it(`sets \'runFinished\' to true if run has status: ${status}`, async () => {
         testRun.run!.status = status;
diff --git a/frontend/src/pages/RunDetails.tsx b/frontend/src/pages/RunDetails.tsx
index 74e3a9279c51..68ee8cc9cc04 100644
--- a/frontend/src/pages/RunDetails.tsx
+++ b/frontend/src/pages/RunDetails.tsx
@@ -21,6 +21,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import CompareTable from '../components/CompareTable';
 import CompareUtils from '../lib/CompareUtils';
 import DetailsTable from '../components/DetailsTable';
+import MinioArtifactLink from '../components/MinioArtifactLink';
 import Graph from '../components/Graph';
 import Hr from '../atoms/Hr';
 import InfoIcon from '@material-ui/icons/InfoOutlined';
@@ -36,6 +37,7 @@ import { ApiRun, RunStorageState } from '../apis/run';
 import { Apis } from '../lib/Apis';
 import { NodePhase, hasFinished } from '../lib/StatusUtils';
 import { OutputArtifactLoader } from '../lib/OutputArtifactLoader';
+import { KeyValue } from '../lib/StaticGraphParser';
 import { Page } from './Page';
 import { RoutePage, RouteParams } from '../components/Router';
 import { ToolbarProps } from '../components/Toolbar';
@@ -47,7 +49,9 @@ import { componentMap } from '../components/viewers/ViewerContainer';
 import { flatten } from 'lodash';
 import { formatDateString, getRunDurationFromWorkflow, logger, errorToMessage } from '../lib/Utils';
 import { statusToIcon } from './Status';
-import VisualizationCreator, { VisualizationCreatorConfig } from '../components/viewers/VisualizationCreator';
+import VisualizationCreator, {
+  VisualizationCreatorConfig,
+} from '../components/viewers/VisualizationCreator';
 import { ApiVisualization, ApiVisualizationType } from '../apis/visualization';
 import { HTMLViewerConfig } from '../components/viewers/HTMLViewer';
 
@@ -121,7 +125,7 @@ export const css = stylesheet({
     paddingLeft: 6,
   },
   link: {
-    color: '#77abda'
+    color: '#77abda',
   },
   outputTitle: {
     color: color.strong,
@@ -166,14 +170,14 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
     const buttons = new Buttons(this.props, this.refresh.bind(this));
     return {
       actions: buttons
-        .retryRun(
-            () => this.state.runMetadata? [this.state.runMetadata!.id!] : [],
-            true, () => this.retry())
-        .cloneRun(() => this.state.runMetadata ? [this.state.runMetadata!.id!] : [], true)
+        .retryRun(() => (this.state.runMetadata ? [this.state.runMetadata!.id!] : []), true, () =>
+          this.retry(),
+        )
+        .cloneRun(() => (this.state.runMetadata ? [this.state.runMetadata!.id!] : []), true)
         .terminateRun(
-          () => this.state.runMetadata ? [this.state.runMetadata!.id!] : [],
+          () => (this.state.runMetadata ? [this.state.runMetadata!.id!] : []),
           true,
-          () => this.refresh()
+          () => this.refresh(),
         )
         .getToolbarActionMap(),
       breadcrumbs: [{ displayName: 'Experiments', href: RoutePage.EXPERIMENTS }],
@@ -194,12 +198,19 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
       selectedNodeDetails,
       sidepanelSelectedTab,
       stackdriverK8sLogsUrl,
-      workflow
+      workflow,
     } = this.state;
     const selectedNodeId = selectedNodeDetails ? selectedNodeDetails.id : '';
 
     const workflowParameters = WorkflowParser.getParameters(workflow);
-    const nodeInputOutputParams = WorkflowParser.getNodeInputOutputParams(workflow, selectedNodeId);
+    const { inputParams, outputParams } = WorkflowParser.getNodeInputOutputParams(
+      workflow,
+      selectedNodeId,
+    );
+    const { inputArtifacts, outputArtifacts } = WorkflowParser.getNodeInputOutputArtifacts(
+      workflow,
+      selectedNodeId,
+    );
     const hasMetrics = runMetadata && runMetadata.metrics && runMetadata.metrics.length > 0;
     const visualizationCreatorConfig: VisualizationCreatorConfig = {
       allowCustomVisualizations,
@@ -212,128 +223,189 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
 
     return (
       <div className={classes(commonCss.page, padding(20, 't'))}>
-
         {!!workflow && (
           <div className={commonCss.page}>
-            <MD2Tabs selectedTab={selectedTab} tabs={['Graph', 'Run output', 'Config']}
-              onSwitch={(tab: number) => this.setStateSafe({ selectedTab: tab })} />
+            <MD2Tabs
+              selectedTab={selectedTab}
+              tabs={['Graph', 'Run output', 'Config']}
+              onSwitch={(tab: number) => this.setStateSafe({ selectedTab: tab })}
+            />
             <div className={commonCss.page}>
-
               {/* Graph tab */}
-              {selectedTab === 0 && <div className={classes(commonCss.page, css.graphPane)}>
-                {graph && <div className={commonCss.page}>
-                  <Graph graph={graph} selectedNodeId={selectedNodeId}
-                    onClick={(id) => this._selectNode(id)} />
-
-                  <SidePanel isBusy={this.state.sidepanelBusy} isOpen={!!selectedNodeDetails}
-                    onClose={() => this.setStateSafe({ selectedNodeDetails: null })} title={selectedNodeId}>
-                    {!!selectedNodeDetails && (<React.Fragment>
-                      {!!selectedNodeDetails.phaseMessage && (
-                        <Banner mode='warning' message={selectedNodeDetails.phaseMessage} />
-                      )}
-                      <div className={commonCss.page}>
-                        <MD2Tabs tabs={['Artifacts', 'Input/Output', 'Volumes', 'Manifest', 'Logs']}
-                          selectedTab={sidepanelSelectedTab}
-                          onSwitch={this._loadSidePaneTab.bind(this)} />
-
-                        <div className={commonCss.page}>
-                          {sidepanelSelectedTab === SidePaneTab.ARTIFACTS && (
+              {selectedTab === 0 && (
+                <div className={classes(commonCss.page, css.graphPane)}>
+                  {graph && (
+                    <div className={commonCss.page}>
+                      <Graph
+                        graph={graph}
+                        selectedNodeId={selectedNodeId}
+                        onClick={id => this._selectNode(id)}
+                      />
+
+                      <SidePanel
+                        isBusy={this.state.sidepanelBusy}
+                        isOpen={!!selectedNodeDetails}
+                        onClose={() => this.setStateSafe({ selectedNodeDetails: null })}
+                        title={selectedNodeId}
+                      >
+                        {!!selectedNodeDetails && (
+                          <React.Fragment>
+                            {!!selectedNodeDetails.phaseMessage && (
+                              <Banner mode='warning' message={selectedNodeDetails.phaseMessage} />
+                            )}
                             <div className={commonCss.page}>
-                              <div className={padding(20, 'lrt')}>
-                                <PlotCard
-                                  configs={[visualizationCreatorConfig]}
-                                  title={VisualizationCreator.prototype.getDisplayName()}
-                                  maxDimension={500} />
-                                <Hr />
-                              </div>
-                              {(selectedNodeDetails.viewerConfigs || []).map((config, i) => {
-                                const title = componentMap[config.type].prototype.getDisplayName();
-                                return (
-                                  <div key={i} className={padding(20, 'lrt')}>
-                                    <PlotCard configs={[config]} title={title} maxDimension={500} />
-                                    <Hr />
+                              <MD2Tabs
+                                tabs={['Artifacts', 'Input/Output', 'Volumes', 'Manifest', 'Logs']}
+                                selectedTab={sidepanelSelectedTab}
+                                onSwitch={this._loadSidePaneTab.bind(this)}
+                              />
+
+                              <div className={commonCss.page}>
+                                {sidepanelSelectedTab === SidePaneTab.ARTIFACTS && (
+                                  <div className={commonCss.page}>
+                                    <div className={padding(20, 'lrt')}>
+                                      <PlotCard
+                                        configs={[visualizationCreatorConfig]}
+                                        title={VisualizationCreator.prototype.getDisplayName()}
+                                        maxDimension={500}
+                                      />
+                                      <Hr />
+                                    </div>
+                                    {(selectedNodeDetails.viewerConfigs || []).map((config, i) => {
+                                      const title = componentMap[
+                                        config.type
+                                      ].prototype.getDisplayName();
+                                      return (
+                                        <div key={i} className={padding(20, 'lrt')}>
+                                          <PlotCard
+                                            configs={[config]}
+                                            title={title}
+                                            maxDimension={500}
+                                          />
+                                          <Hr />
+                                        </div>
+                                      );
+                                    })}
                                   </div>
-                                );
-                              })}
-                            </div>
-                          )}
-
-                          {sidepanelSelectedTab === SidePaneTab.INPUT_OUTPUT && (
-                            <div className={padding(20)}>
-                              <DetailsTable title='Input parameters'
-                                fields={nodeInputOutputParams[0]} />
+                                )}
 
-                              <DetailsTable title='Output parameters'
-                                fields={nodeInputOutputParams[1]} />
-                            </div>
-                          )}
+                                {sidepanelSelectedTab === SidePaneTab.INPUT_OUTPUT && (
+                                  <div className={padding(20)}>
+                                    <DetailsTable title='Input parameters' fields={inputParams} />
 
-                          {sidepanelSelectedTab === SidePaneTab.VOLUMES && (
-                            <div className={padding(20)}>
-                              <DetailsTable title='Volume Mounts'
-                                fields={WorkflowParser.getNodeVolumeMounts(
-                                  workflow, selectedNodeId)} />
-                            </div>
-                          )}
+                                    <DetailsTable
+                                      title='Input artifacts'
+                                      fields={inputArtifacts}
+                                      valueComponent={MinioArtifactLink}
+                                    />
 
-                          {sidepanelSelectedTab === SidePaneTab.MANIFEST && (
-                            <div className={padding(20)}>
-                              <DetailsTable title='Resource Manifest'
-                                fields={WorkflowParser.getNodeManifest(
-                                  workflow, selectedNodeId)} />
-                            </div>
-                          )}
+                                    <DetailsTable title='Output parameters' fields={outputParams} />
 
-                          {sidepanelSelectedTab === SidePaneTab.LOGS && (
-                            <div className={commonCss.page}>
-                              {this.state.logsBannerMessage && (
-                                <React.Fragment>
-                                  <Banner
-                                    message={this.state.logsBannerMessage}
-                                    mode={this.state.logsBannerMode}
-                                    additionalInfo={this.state.logsBannerAdditionalInfo}
-                                    refresh={this._loadSelectedNodeLogs.bind(this)} />
-                                  {(legacyStackdriverUrl && stackdriverK8sLogsUrl) && (
-                                    <div className={padding(20, 'blr')}>
-                                      Logs can still be viewed in either <a href={legacyStackdriverUrl} target='_blank' className={classes(css.link, commonCss.unstyled)}>Legacy Stackdriver
-                                    </a> or in <a href={stackdriverK8sLogsUrl} target='_blank' className={classes(css.link, commonCss.unstyled)}>Stackdriver Kubernetes Monitoring</a>
-                                    </div>
-                                  )}
-                                </React.Fragment>
-                              )}
-                              {!this.state.logsBannerMessage && this.state.selectedNodeDetails && (
-                                <LogViewer logLines={(this.state.selectedNodeDetails.logs || '').split('\n')}
-                                  classes={commonCss.page} />
-                              )}
+                                    <DetailsTable
+                                      title='Output artifacts'
+                                      fields={outputArtifacts}
+                                      valueComponent={MinioArtifactLink}
+                                    />
+                                  </div>
+                                )}
+
+                                {sidepanelSelectedTab === SidePaneTab.VOLUMES && (
+                                  <div className={padding(20)}>
+                                    <DetailsTable
+                                      title='Volume Mounts'
+                                      fields={WorkflowParser.getNodeVolumeMounts(
+                                        workflow,
+                                        selectedNodeId,
+                                      )}
+                                    />
+                                  </div>
+                                )}
+
+                                {sidepanelSelectedTab === SidePaneTab.MANIFEST && (
+                                  <div className={padding(20)}>
+                                    <DetailsTable
+                                      title='Resource Manifest'
+                                      fields={WorkflowParser.getNodeManifest(
+                                        workflow,
+                                        selectedNodeId,
+                                      )}
+                                    />
+                                  </div>
+                                )}
+
+                                {sidepanelSelectedTab === SidePaneTab.LOGS && (
+                                  <div className={commonCss.page}>
+                                    {this.state.logsBannerMessage && (
+                                      <React.Fragment>
+                                        <Banner
+                                          message={this.state.logsBannerMessage}
+                                          mode={this.state.logsBannerMode}
+                                          additionalInfo={this.state.logsBannerAdditionalInfo}
+                                          refresh={this._loadSelectedNodeLogs.bind(this)}
+                                        />
+                                        {legacyStackdriverUrl && stackdriverK8sLogsUrl && (
+                                          <div className={padding(20, 'blr')}>
+                                            Logs can still be viewed in either{' '}
+                                            <a
+                                              href={legacyStackdriverUrl}
+                                              target='_blank'
+                                              className={classes(css.link, commonCss.unstyled)}
+                                            >
+                                              Legacy Stackdriver
+                                            </a>{' '}
+                                            or in{' '}
+                                            <a
+                                              href={stackdriverK8sLogsUrl}
+                                              target='_blank'
+                                              className={classes(css.link, commonCss.unstyled)}
+                                            >
+                                              Stackdriver Kubernetes Monitoring
+                                            </a>
+                                          </div>
+                                        )}
+                                      </React.Fragment>
+                                    )}
+                                    {!this.state.logsBannerMessage &&
+                                      this.state.selectedNodeDetails && (
+                                        // Overflow hidden here, because scroll is handled inside
+                                        // LogViewer.
+                                        <div className={commonCss.pageOverflowHidden}>
+                                          <LogViewer
+                                            logLines={(
+                                              this.state.selectedNodeDetails.logs || ''
+                                            ).split('\n')}
+                                          />
+                                        </div>
+                                      )}
+                                  </div>
+                                )}
+                              </div>
                             </div>
-                          )}
+                          </React.Fragment>
+                        )}
+                      </SidePanel>
+
+                      <div className={css.footer}>
+                        <div className={commonCss.flex}>
+                          <InfoIcon className={commonCss.infoIcon} />
+                          <span className={css.infoSpan}>
+                            Runtime execution graph. Only steps that are currently running or have
+                            already completed are shown.
+                          </span>
                         </div>
                       </div>
-                    </React.Fragment>)}
-                  </SidePanel>
-
-                  <div className={css.footer}>
-                    <div className={commonCss.flex}>
-                      <InfoIcon className={commonCss.infoIcon} />
-                      <span className={css.infoSpan}>
-                        Runtime execution graph. Only steps that are currently running or have already completed are shown.
-                    </span>
                     </div>
-                  </div>
-                </div>}
-                {!graph && (
-                  <div>
-                    {runFinished && (
-                      <span style={{ margin: '40px auto' }}>
-                        No graph to show
-                      </span>
-                    )}
-                    {!runFinished && (
-                      <CircularProgress size={30} className={commonCss.absoluteCenter} />
-                    )}
-                  </div>
-                )}
-              </div>}
+                  )}
+                  {!graph && (
+                    <div>
+                      {runFinished && <span style={{ margin: '40px auto' }}>No graph to show</span>}
+                      {!runFinished && (
+                        <CircularProgress size={30} className={commonCss.absoluteCenter} />
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
 
               {/* Run outputs tab */}
               {selectedTab === 1 && (
@@ -342,30 +414,31 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
                     <div>
                       <div className={css.outputTitle}>Metrics</div>
                       <div className={padding(20, 'lt')}>
-                        <CompareTable {...CompareUtils.singleRunToMetricsCompareProps(runMetadata, workflow)} />
+                        <CompareTable
+                          {...CompareUtils.singleRunToMetricsCompareProps(runMetadata, workflow)}
+                        />
                       </div>
                     </div>
                   )}
-                  {!hasMetrics && (
-                    <span>
-                      No metrics found for this run.
-                    </span>
-                  )}
+                  {!hasMetrics && <span>No metrics found for this run.</span>}
 
                   <Separator orientation='vertical' />
                   <Hr />
 
-                  {allArtifactConfigs.map((annotatedConfig, i) => <div key={i}>
-                    <PlotCard key={i} configs={[annotatedConfig.config]}
-                      title={annotatedConfig.stepName} maxDimension={400} />
-                    <Separator orientation='vertical' />
-                    <Hr />
-                  </div>
-                  )}
+                  {allArtifactConfigs.map((annotatedConfig, i) => (
+                    <div key={i}>
+                      <PlotCard
+                        key={i}
+                        configs={[annotatedConfig.config]}
+                        title={annotatedConfig.stepName}
+                        maxDimension={400}
+                      />
+                      <Separator orientation='vertical' />
+                      <Hr />
+                    </div>
+                  ))}
                   {!allArtifactConfigs.length && (
-                    <span>
-                      No output artifacts found for this run.
-                    </span>
+                    <span>No output artifacts found for this run.</span>
                   )}
                 </div>
               )}
@@ -373,12 +446,19 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
               {/* Config tab */}
               {selectedTab === 2 && (
                 <div className={padding()}>
-                  <DetailsTable title='Run details' fields={this._getDetailsFields(workflow, runMetadata)} />
+                  <DetailsTable
+                    title='Run details'
+                    fields={this._getDetailsFields(workflow, runMetadata)}
+                  />
 
-                  {workflowParameters && !!workflowParameters.length && (<div>
-                    <DetailsTable title='Run parameters'
-                      fields={workflowParameters.map(p => [p.name, p.value || ''])} />
-                  </div>)}
+                  {workflowParameters && !!workflowParameters.length && (
+                    <div>
+                      <DetailsTable
+                        title='Run parameters'
+                        fields={workflowParameters.map(p => [p.name, p.value || ''])}
+                      />
+                    </div>
+                  )}
                 </div>
               )}
             </div>
@@ -409,7 +489,7 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
     this.clearBanner();
   }
 
-  public async retry(): Promise<void>{
+  public async retry(): Promise<void> {
     const runFinished = false;
     this.setStateSafe({
       runFinished,
@@ -452,7 +532,9 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
         runFinished = true;
       }
 
-      const workflow = JSON.parse(runDetail.pipeline_runtime!.workflow_manifest || '{}') as Workflow;
+      const workflow = JSON.parse(
+        runDetail.pipeline_runtime!.workflow_manifest || '{}',
+      ) as Workflow;
 
       // Show workflow errors
       const workflowError = WorkflowParser.getWorkflowError(workflow);
@@ -473,10 +555,12 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
       }
 
       // Build runtime graph
-      const graph = workflow && workflow.status && workflow.status.nodes ?
-        WorkflowParser.createRuntimeGraph(workflow) : undefined;
+      const graph =
+        workflow && workflow.status && workflow.status.nodes
+          ? WorkflowParser.createRuntimeGraph(workflow)
+          : undefined;
 
-      const breadcrumbs: Array<{ displayName: string, href: string }> = [];
+      const breadcrumbs: Array<{ displayName: string; href: string }> = [];
       // If this is an archived run, only show Archive in breadcrumbs, otherwise show
       // the full path, including the experiment if any.
       if (runMetadata.storage_state === RunStorageState.ARCHIVED) {
@@ -487,31 +571,45 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
             { displayName: 'Experiments', href: RoutePage.EXPERIMENTS },
             {
               displayName: experiment.name!,
-              href: RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, experiment.id!)
-            });
-        } else {
-          breadcrumbs.push(
-            { displayName: 'All runs', href: RoutePage.RUNS }
+              href: RoutePage.EXPERIMENT_DETAILS.replace(
+                ':' + RouteParams.experimentId,
+                experiment.id!,
+              ),
+            },
           );
+        } else {
+          breadcrumbs.push({ displayName: 'All runs', href: RoutePage.RUNS });
         }
       }
-      const pageTitle = <div className={commonCss.flex}>
-        {statusToIcon(runMetadata.status as NodePhase, runDetail.run!.created_at)}
-        <span style={{ marginLeft: 10 }}>{runMetadata.name!}</span>
-      </div>;
+      const pageTitle = (
+        <div className={commonCss.flex}>
+          {statusToIcon(runMetadata.status as NodePhase, runDetail.run!.created_at)}
+          <span style={{ marginLeft: 10 }}>{runMetadata.name!}</span>
+        </div>
+      );
 
       // Update the Archive/Restore button based on the storage state of this run
-      const buttons = new Buttons(this.props, this.refresh.bind(this), this.getInitialToolbarState().actions);
-      const idGetter = () => runMetadata ? [runMetadata!.id!] : [];
-      runMetadata!.storage_state === RunStorageState.ARCHIVED ?
-        buttons.restore(idGetter, true, () => this.refresh()) :
-        buttons.archive(idGetter, true, () => this.refresh());
+      const buttons = new Buttons(
+        this.props,
+        this.refresh.bind(this),
+        this.getInitialToolbarState().actions,
+      );
+      const idGetter = () => (runMetadata ? [runMetadata!.id!] : []);
+      runMetadata!.storage_state === RunStorageState.ARCHIVED
+        ? buttons.restore(idGetter, true, () => this.refresh())
+        : buttons.archive(idGetter, true, () => this.refresh());
       const actions = buttons.getToolbarActionMap();
       actions[ButtonKeys.TERMINATE_RUN].disabled =
-          (runMetadata.status as NodePhase) === NodePhase.TERMINATING || runFinished;
+        (runMetadata.status as NodePhase) === NodePhase.TERMINATING || runFinished;
       actions[ButtonKeys.RETRY].disabled =
-          (runMetadata.status as NodePhase) !== NodePhase.FAILED && (runMetadata.status as NodePhase) !== NodePhase.ERROR ;
-      this.props.updateToolbar({ actions, breadcrumbs, pageTitle, pageTitleTooltip: runMetadata.name });
+        (runMetadata.status as NodePhase) !== NodePhase.FAILED &&
+        (runMetadata.status as NodePhase) !== NodePhase.ERROR;
+      this.props.updateToolbar({
+        actions,
+        breadcrumbs,
+        pageTitle,
+        pageTitleTooltip: runMetadata.name,
+      });
 
       this.setStateSafe({
         experiment,
@@ -546,10 +644,7 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
     // Only set interval if run has not finished, and verify that the interval is undefined to
     // avoid setting multiple intervals
     if (!this.state.runFinished && this._interval === undefined) {
-      this._interval = setInterval(
-        () => this.refresh(),
-        this.AUTO_REFRESH_INTERVAL
-      );
+      this._interval = setInterval(() => this.refresh(), this.AUTO_REFRESH_INTERVAL);
     }
   }
 
@@ -571,28 +666,39 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
 
     const outputPathsList = WorkflowParser.loadAllOutputPathsWithStepNames(workflow);
 
-    const configLists =
-      await Promise.all(outputPathsList.map(({ stepName, path }) => OutputArtifactLoader.load(path)
-        .then(configs => configs.map(config => ({ config, stepName })))));
+    const configLists = await Promise.all(
+      outputPathsList.map(({ stepName, path }) =>
+        OutputArtifactLoader.load(path).then(configs =>
+          configs.map(config => ({ config, stepName })),
+        ),
+      ),
+    );
     const allArtifactConfigs = flatten(configLists);
 
     this.setStateSafe({ allArtifactConfigs });
   }
 
-  private _getDetailsFields(workflow: Workflow, runMetadata?: ApiRun): string[][] {
-    return !workflow.status ? [] : [
-      ['Status', workflow.status.phase],
-      ['Description', runMetadata ? runMetadata!.description! : ''],
-      ['Created at', workflow.metadata ? formatDateString(workflow.metadata.creationTimestamp) : '-'],
-      ['Started at', formatDateString(workflow.status.startedAt)],
-      ['Finished at', formatDateString(workflow.status.finishedAt)],
-      ['Duration', getRunDurationFromWorkflow(workflow)],
-    ];
+  private _getDetailsFields(workflow: Workflow, runMetadata?: ApiRun): Array<KeyValue<string>> {
+    return !workflow.status
+      ? []
+      : [
+          ['Status', workflow.status.phase],
+          ['Description', runMetadata ? runMetadata!.description! : ''],
+          [
+            'Created at',
+            workflow.metadata ? formatDateString(workflow.metadata.creationTimestamp) : '-',
+          ],
+          ['Started at', formatDateString(workflow.status.startedAt)],
+          ['Finished at', formatDateString(workflow.status.finishedAt)],
+          ['Duration', getRunDurationFromWorkflow(workflow)],
+        ];
   }
 
   private async _selectNode(id: string): Promise<void> {
-    this.setStateSafe({ selectedNodeDetails: { id } }, async () =>
-      await this._loadSidePaneTab(this.state.sidepanelSelectedTab));
+    this.setStateSafe(
+      { selectedNodeDetails: { id } },
+      async () => await this._loadSidePaneTab(this.state.sidepanelSelectedTab),
+    );
   }
 
   private async _loadSidePaneTab(tab: SidePaneTab): Promise<void> {
@@ -601,9 +707,10 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
     if (workflow && workflow.status && workflow.status.nodes && selectedNodeDetails) {
       const node = workflow.status.nodes[selectedNodeDetails.id];
       if (node) {
-        selectedNodeDetails.phaseMessage = (node && node.message) ?
-          `This step is in ${node.phase} state with this message: ` + node.message :
-          undefined;
+        selectedNodeDetails.phaseMessage =
+          node && node.message
+            ? `This step is in ${node.phase} state with this message: ` + node.message
+            : undefined;
       }
       this.setStateSafe({ selectedNodeDetails, sidepanelSelectedTab: tab });
 
@@ -631,7 +738,9 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
     const workflow = this.state.workflow;
     if (workflow && workflow.status && workflow.status.nodes) {
       // Load runtime outputs from the selected Node
-      const outputPaths = WorkflowParser.loadNodeOutputPaths(workflow.status.nodes[selectedNodeDetails.id]);
+      const outputPaths = WorkflowParser.loadNodeOutputPaths(
+        workflow.status.nodes[selectedNodeDetails.id],
+      );
       // Load the viewer configurations from the output paths
       let viewerConfigs: ViewerConfig[] = [];
       for (const path of outputPaths) {
@@ -657,14 +766,19 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
     try {
       const logs = await Apis.getPodLogs(selectedNodeDetails.id);
       selectedNodeDetails.logs = logs;
-      this.setStateSafe({ selectedNodeDetails, logsBannerAdditionalInfo: '', logsBannerMessage: '' });
+      this.setStateSafe({
+        logsBannerAdditionalInfo: '',
+        logsBannerMessage: '',
+        selectedNodeDetails,
+      });
     } catch (err) {
       try {
         const projectId = await Apis.getProjectId();
         const clusterName = await Apis.getClusterName();
         this.setStateSafe({
           legacyStackdriverUrl: `https://console.cloud.google.com/logs/viewer?project=${projectId}&interval=NO_LIMIT&advancedFilter=resource.type%3D"container"%0Aresource.labels.cluster_name:"${clusterName}"%0Aresource.labels.pod_id:"${selectedNodeDetails.id}"`,
-          logsBannerMessage: 'Warning: failed to retrieve pod logs. Possible reasons include cluster autoscaling or pod preemption',
+          logsBannerMessage:
+            'Warning: failed to retrieve pod logs. Possible reasons include cluster autoscaling or pod preemption',
           logsBannerMode: 'warning',
           stackdriverK8sLogsUrl: `https://console.cloud.google.com/logs/viewer?project=${projectId}&interval=NO_LIMIT&advancedFilter=resource.type%3D"k8s_container"%0Aresource.labels.cluster_name:"${clusterName}"%0Aresource.labels.pod_name:"${selectedNodeDetails.id}"`,
         });
@@ -672,8 +786,9 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
         const errorMessage = await errorToMessage(err);
         this.setStateSafe({
           logsBannerAdditionalInfo: errorMessage,
-          logsBannerMessage: 'Error: failed to retrieve pod logs.'
-            + (errorMessage ? ' Click Details for more information.' : ''),
+          logsBannerMessage:
+            'Error: failed to retrieve pod logs.' +
+            (errorMessage ? ' Click Details for more information.' : ''),
           logsBannerMode: 'error',
         });
       }
@@ -683,7 +798,11 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
     }
   }
 
-  private async _onGenerate(visualizationArguments: string, source: string, type: ApiVisualizationType): Promise<void> {
+  private async _onGenerate(
+    visualizationArguments: string,
+    source: string,
+    type: ApiVisualizationType,
+  ): Promise<void> {
     const nodeId = this.state.selectedNodeDetails ? this.state.selectedNodeDetails.id : '';
     if (nodeId.length === 0) {
       this.showPageError('Unable to generate visualization, no component selected.');
@@ -714,13 +833,16 @@ class RunDetails extends Page<RunDetailsProps, RunDetailsState> {
       };
       generatedVisualizations.push(generatedVisualization);
       if (selectedNodeDetails) {
-        const viewerConfigs = selectedNodeDetails.viewerConfigs || []; 
+        const viewerConfigs = selectedNodeDetails.viewerConfigs || [];
         viewerConfigs.push(generatedVisualization.config);
         selectedNodeDetails.viewerConfigs = viewerConfigs;
       }
       this.setState({ generatedVisualizations, selectedNodeDetails });
     } catch (err) {
-      this.showPageError('Unable to generate visualization, an unexpected error was encountered.', err);
+      this.showPageError(
+        'Unable to generate visualization, an unexpected error was encountered.',
+        err,
+      );
     } finally {
       this.setState({ isGeneratingVisualization: false });
     }
diff --git a/frontend/src/pages/RunList.test.tsx b/frontend/src/pages/RunList.test.tsx
index 0d7b5af9b87a..c43d5ece3356 100644
--- a/frontend/src/pages/RunList.test.tsx
+++ b/frontend/src/pages/RunList.test.tsx
@@ -20,7 +20,14 @@ import RunList, { RunListProps } from './RunList';
 import TestUtils from '../TestUtils';
 import produce from 'immer';
 import { ApiFilter, PredicateOp } from '../apis/filter';
-import { ApiRun, ApiRunDetail, ApiResourceType, ApiRunMetric, RunMetricFormat, RunStorageState } from '../apis/run';
+import {
+  ApiRun,
+  ApiRunDetail,
+  ApiResourceType,
+  ApiRunMetric,
+  RunMetricFormat,
+  RunStorageState,
+} from '../apis/run';
 import { Apis, RunSortKeys, ListRequest } from '../lib/Apis';
 import { MetricMetadata } from '../lib/RunUtils';
 import { NodePhase } from '../lib/StatusUtils';
@@ -55,29 +62,32 @@ describe('RunList', () => {
   }
 
   function mockNRuns(n: number, runTemplate: Partial<ApiRunDetail>): void {
-    getRunSpy.mockImplementation(id => Promise.resolve(
-      produce(runTemplate, draft => {
-        draft.run = draft.run || {};
-        draft.run.id = id;
-        draft.run.name = 'run with id: ' + id;
-      })
-    ));
-
-    listRunsSpy.mockImplementation(() => Promise.resolve({
-      runs: range(1, n + 1).map(i => {
-        if (runTemplate.run) {
-          return produce(runTemplate.run as Partial<ApiRun>, draft => {
-            draft.id = 'testrun' + i;
-            draft.name = 'run with id: testrun' + i;
-          });
-        }
-        return {
-          id: 'testrun' + i,
-          name: 'run with id: testrun' + i,
-        } as ApiRun;
-      }
-      )
-    }));
+    getRunSpy.mockImplementation(id =>
+      Promise.resolve(
+        produce(runTemplate, draft => {
+          draft.run = draft.run || {};
+          draft.run.id = id;
+          draft.run.name = 'run with id: ' + id;
+        }),
+      ),
+    );
+
+    listRunsSpy.mockImplementation(() =>
+      Promise.resolve({
+        runs: range(1, n + 1).map(i => {
+          if (runTemplate.run) {
+            return produce(runTemplate.run as Partial<ApiRun>, draft => {
+              draft.id = 'testrun' + i;
+              draft.name = 'run with id: testrun' + i;
+            });
+          }
+          return {
+            id: 'testrun' + i,
+            name: 'run with id: testrun' + i,
+          } as ApiRun;
+        }),
+      }),
+    );
 
     getPipelineSpy.mockImplementation(() => ({ name: 'some pipeline' }));
     getExperimentSpy.mockImplementation(() => ({ name: 'some experiment' }));
@@ -131,13 +141,23 @@ describe('RunList', () => {
       tree = shallow(<RunList {...props} />);
       await (tree.instance() as RunListTest)._loadRuns({});
       expect(Apis.runServiceApi.listRuns).toHaveBeenLastCalledWith(
-        undefined, undefined, undefined, undefined, undefined, encodeURIComponent(JSON.stringify({
-          predicates: [{
-            key: 'storage_state',
-            op: PredicateOp.NOTEQUALS,
-            string_value: RunStorageState.ARCHIVED.toString(),
-          }]
-        } as ApiFilter)));
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        encodeURIComponent(
+          JSON.stringify({
+            predicates: [
+              {
+                key: 'storage_state',
+                op: PredicateOp.NOTEQUALS,
+                string_value: RunStorageState.ARCHIVED.toString(),
+              },
+            ],
+          } as ApiFilter),
+        ),
+      );
     });
 
     it('loads runs whose storage state is ARCHIVED when storage state equals ARCHIVED', async () => {
@@ -147,13 +167,23 @@ describe('RunList', () => {
       tree = shallow(<RunList {...props} />);
       await (tree.instance() as RunListTest)._loadRuns({});
       expect(Apis.runServiceApi.listRuns).toHaveBeenLastCalledWith(
-        undefined, undefined, undefined, undefined, undefined, encodeURIComponent(JSON.stringify({
-          predicates: [{
-            key: 'storage_state',
-            op: PredicateOp.EQUALS,
-            string_value: RunStorageState.ARCHIVED.toString(),
-          }]
-        } as ApiFilter)));
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        encodeURIComponent(
+          JSON.stringify({
+            predicates: [
+              {
+                key: 'storage_state',
+                op: PredicateOp.EQUALS,
+                string_value: RunStorageState.ARCHIVED.toString(),
+              },
+            ],
+          } as ApiFilter),
+        ),
+      );
     });
 
     it('augments request filter with storage state predicates', async () => {
@@ -162,22 +192,35 @@ describe('RunList', () => {
       props.storageState = RunStorageState.ARCHIVED;
       tree = shallow(<RunList {...props} />);
       await (tree.instance() as RunListTest)._loadRuns({
-        filter: encodeURIComponent(JSON.stringify({
-          predicates: [{ key: 'k', op: 'op', string_value: 'val' }]
-        }))
+        filter: encodeURIComponent(
+          JSON.stringify({
+            predicates: [{ key: 'k', op: 'op', string_value: 'val' }],
+          }),
+        ),
       });
       expect(Apis.runServiceApi.listRuns).toHaveBeenLastCalledWith(
-        undefined, undefined, undefined, undefined, undefined, encodeURIComponent(JSON.stringify({
-          predicates: [{
-            key: 'k',
-            op: 'op',
-            string_value: 'val',
-          }, {
-            key: 'storage_state',
-            op: PredicateOp.EQUALS,
-            string_value: RunStorageState.ARCHIVED.toString(),
-          }]
-        } as ApiFilter)));
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        encodeURIComponent(
+          JSON.stringify({
+            predicates: [
+              {
+                key: 'k',
+                op: 'op',
+                string_value: 'val',
+              },
+              {
+                key: 'storage_state',
+                op: PredicateOp.EQUALS,
+                string_value: RunStorageState.ARCHIVED.toString(),
+              },
+            ],
+          } as ApiFilter),
+        ),
+      );
     });
   });
 
@@ -186,7 +229,14 @@ describe('RunList', () => {
     const props = generateProps();
     tree = shallow(<RunList {...props} />);
     await (tree.instance() as RunListTest)._loadRuns({});
-    expect(Apis.runServiceApi.listRuns).toHaveBeenLastCalledWith(undefined, undefined, undefined, undefined, undefined, undefined);
+    expect(Apis.runServiceApi.listRuns).toHaveBeenLastCalledWith(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    );
     expect(props.onError).not.toHaveBeenCalled();
     expect(tree).toMatchSnapshot();
   });
@@ -198,7 +248,14 @@ describe('RunList', () => {
     await (tree.instance() as RunList).refresh();
     tree.update();
     expect(Apis.runServiceApi.listRuns).toHaveBeenCalledTimes(2);
-    expect(Apis.runServiceApi.listRuns).toHaveBeenLastCalledWith('', 10, RunSortKeys.CREATED_AT + ' desc', undefined, undefined, '');
+    expect(Apis.runServiceApi.listRuns).toHaveBeenLastCalledWith(
+      '',
+      10,
+      RunSortKeys.CREATED_AT + ' desc',
+      undefined,
+      undefined,
+      '',
+    );
     expect(props.onError).not.toHaveBeenCalled();
     expect(tree).toMatchSnapshot();
   });
@@ -213,11 +270,17 @@ describe('RunList', () => {
   });
 
   it('calls error callback when loading runs fails', async () => {
-    TestUtils.makeErrorResponseOnce(jest.spyOn(Apis.runServiceApi, 'listRuns'), 'bad stuff happened');
+    TestUtils.makeErrorResponseOnce(
+      jest.spyOn(Apis.runServiceApi, 'listRuns'),
+      'bad stuff happened',
+    );
     const props = generateProps();
     tree = shallow(<RunList {...props} />);
     await (tree.instance() as RunListTest)._loadRuns({});
-    expect(props.onError).toHaveBeenLastCalledWith('Error: failed to fetch runs.', new Error('bad stuff happened'));
+    expect(props.onError).toHaveBeenLastCalledWith(
+      'Error: failed to fetch runs.',
+      new Error('bad stuff happened'),
+    );
   });
 
   it('displays error in run row if pipeline could not be fetched', async () => {
@@ -232,10 +295,12 @@ describe('RunList', () => {
   it('displays error in run row if experiment could not be fetched', async () => {
     mockNRuns(1, {
       run: {
-        resource_references: [{
-          key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT }
-        }]
-      }
+        resource_references: [
+          {
+            key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT },
+          },
+        ],
+      },
     });
     TestUtils.makeErrorResponseOnce(getExperimentSpy, 'bad stuff happened');
     const props = generateProps();
@@ -276,7 +341,13 @@ describe('RunList', () => {
     await (tree.instance() as RunListTest)._loadRuns({});
     expect(props.onError).not.toHaveBeenCalled();
     expect(Apis.runServiceApi.listRuns).toHaveBeenLastCalledWith(
-      undefined, undefined, undefined, ApiResourceType.EXPERIMENT.toString(), 'experiment1', undefined);
+      undefined,
+      undefined,
+      undefined,
+      'EXPERIMENT',
+      'experiment1',
+      undefined,
+    );
   });
 
   it('loads given list of runs only', async () => {
@@ -295,12 +366,9 @@ describe('RunList', () => {
   it('adds metrics columns', async () => {
     mockNRuns(2, {
       run: {
-        metrics: [
-          { name: 'metric1', number_value: 5 },
-          { name: 'metric2', number_value: 10 },
-        ],
+        metrics: [{ name: 'metric1', number_value: 5 }, { name: 'metric2', number_value: 10 }],
         status: 'Succeeded',
-      }
+      },
     });
     const props = generateProps();
     tree = shallow(<RunList {...props} />);
@@ -310,7 +378,9 @@ describe('RunList', () => {
   });
 
   it('shows pipeline name', async () => {
-    mockNRuns(1, { run: { pipeline_spec: { pipeline_id: 'test-pipeline-id', pipeline_name: 'pipeline name' } } });
+    mockNRuns(1, {
+      run: { pipeline_spec: { pipeline_id: 'test-pipeline-id', pipeline_name: 'pipeline name' } },
+    });
     const props = generateProps();
     tree = shallow(<RunList {...props} />);
     await (tree.instance() as RunListTest)._loadRuns({});
@@ -319,7 +389,9 @@ describe('RunList', () => {
   });
 
   it('retrieves pipeline from backend to display name if not in spec', async () => {
-    mockNRuns(1, { run: { pipeline_spec: { pipeline_id: 'test-pipeline-id' /* no pipeline_name */ } } });
+    mockNRuns(1, {
+      run: { pipeline_spec: { pipeline_id: 'test-pipeline-id' /* no pipeline_name */ } },
+    });
     getPipelineSpy.mockImplementationOnce(() => ({ name: 'test pipeline' }));
     const props = generateProps();
     tree = shallow(<RunList {...props} />);
@@ -331,10 +403,12 @@ describe('RunList', () => {
   it('shows link to recurring run config', async () => {
     mockNRuns(1, {
       run: {
-        resource_references: [{
-          key: { id: 'test-recurring-run-id', type: ApiResourceType.JOB }
-        }]
-      }
+        resource_references: [
+          {
+            key: { id: 'test-recurring-run-id', type: ApiResourceType.JOB },
+          },
+        ],
+      },
     });
     const props = generateProps();
     tree = shallow(<RunList {...props} />);
@@ -346,10 +420,12 @@ describe('RunList', () => {
   it('shows experiment name', async () => {
     mockNRuns(1, {
       run: {
-        resource_references: [{
-          key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT }
-        }]
-      }
+        resource_references: [
+          {
+            key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT },
+          },
+        ],
+      },
     });
     getExperimentSpy.mockImplementationOnce(() => ({ name: 'test experiment' }));
     const props = generateProps();
@@ -362,10 +438,12 @@ describe('RunList', () => {
   it('hides experiment name if instructed', async () => {
     mockNRuns(1, {
       run: {
-        resource_references: [{
-          key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT }
-        }]
-      }
+        resource_references: [
+          {
+            key: { id: 'test-experiment-id', type: ApiResourceType.EXPERIMENT },
+          },
+        ],
+      },
     });
     getExperimentSpy.mockImplementationOnce(() => ({ name: 'test experiment' }));
     const props = generateProps();
@@ -377,72 +455,122 @@ describe('RunList', () => {
   });
 
   it('renders run name as link to its details page', () => {
-    expect(getMountedInstance()._nameCustomRenderer({ value: 'test run', id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getMountedInstance()._nameCustomRenderer({ value: 'test run', id: 'run-id' }),
+    ).toMatchSnapshot();
   });
 
   it('renders pipeline name as link to its details page', () => {
-    expect(getMountedInstance()._pipelineCustomRenderer({ value: { displayName: 'test pipeline', id: 'pipeline-id', usePlaceholder: false }, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getMountedInstance()._pipelineCustomRenderer({
+        id: 'run-id',
+        value: { displayName: 'test pipeline', id: 'pipeline-id', usePlaceholder: false },
+      }),
+    ).toMatchSnapshot();
   });
 
   it('handles no pipeline id given', () => {
-    expect(getMountedInstance()._pipelineCustomRenderer({ value: { displayName: 'test pipeline', usePlaceholder: false }, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getMountedInstance()._pipelineCustomRenderer({
+        id: 'run-id',
+        value: { displayName: 'test pipeline', usePlaceholder: false },
+      }),
+    ).toMatchSnapshot();
   });
 
   it('shows "View pipeline" button if pipeline is embedded in run', () => {
-    expect(getMountedInstance()._pipelineCustomRenderer({ value: { displayName: 'test pipeline', id: 'pipeline-id', usePlaceholder: true }, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getMountedInstance()._pipelineCustomRenderer({
+        id: 'run-id',
+        value: { displayName: 'test pipeline', id: 'pipeline-id', usePlaceholder: true },
+      }),
+    ).toMatchSnapshot();
   });
 
   it('handles no pipeline name', () => {
-    expect(getMountedInstance()._pipelineCustomRenderer({ value: { /* no displayName */ usePlaceholder: true }, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getMountedInstance()._pipelineCustomRenderer({
+        id: 'run-id',
+        value: { /* no displayName */ usePlaceholder: true },
+      }),
+    ).toMatchSnapshot();
   });
 
   it('renders pipeline name as link to its details page', () => {
-    expect(getMountedInstance()._recurringRunCustomRenderer({ value: { id: 'recurring-run-id', }, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getMountedInstance()._recurringRunCustomRenderer({
+        id: 'run-id',
+        value: { id: 'recurring-run-id' },
+      }),
+    ).toMatchSnapshot();
   });
 
   it('renders experiment name as link to its details page', () => {
-    expect(getMountedInstance()._experimentCustomRenderer({ value: { displayName: 'test experiment', id: 'experiment-id' }, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getMountedInstance()._experimentCustomRenderer({
+        id: 'run-id',
+        value: { displayName: 'test experiment', id: 'experiment-id' },
+      }),
+    ).toMatchSnapshot();
   });
 
   it('renders no experiment name', () => {
-    expect(getMountedInstance()._experimentCustomRenderer({ value: { /* no displayName */ id: 'experiment-id' }, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getMountedInstance()._experimentCustomRenderer({
+        id: 'run-id',
+        value: { /* no displayName */ id: 'experiment-id' },
+      }),
+    ).toMatchSnapshot();
   });
 
   it('renders status as icon', () => {
-    expect(getShallowInstance()._statusCustomRenderer({ value: NodePhase.SUCCEEDED, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getShallowInstance()._statusCustomRenderer({ value: NodePhase.SUCCEEDED, id: 'run-id' }),
+    ).toMatchSnapshot();
   });
 
   it('renders metric buffer', () => {
-    expect(getShallowInstance()._metricBufferCustomRenderer({ value: {}, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getShallowInstance()._metricBufferCustomRenderer({ value: {}, id: 'run-id' }),
+    ).toMatchSnapshot();
   });
 
   it('renders an empty metric when there is no metric', () => {
-    expect(getShallowInstance()._metricCustomRenderer({ value: undefined, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getShallowInstance()._metricCustomRenderer({ value: undefined, id: 'run-id' }),
+    ).toMatchSnapshot();
   });
 
   it('renders an empty metric when metric is empty', () => {
-    expect(getShallowInstance()._metricCustomRenderer({ value: {}, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getShallowInstance()._metricCustomRenderer({ value: {}, id: 'run-id' }),
+    ).toMatchSnapshot();
   });
 
   it('renders an empty metric when metric value is empty', () => {
-    expect(getShallowInstance()._metricCustomRenderer({ value: { metric: {} }, id: 'run-id' })).toMatchSnapshot();
+    expect(
+      getShallowInstance()._metricCustomRenderer({ value: { metric: {} }, id: 'run-id' }),
+    ).toMatchSnapshot();
   });
 
   it('renders percentage metric', () => {
-    expect(getShallowInstance()._metricCustomRenderer({
-      id: 'run-id',
-      value: { metric: { number_value: 0.3, format: RunMetricFormat.PERCENTAGE } },
-    })).toMatchSnapshot();
+    expect(
+      getShallowInstance()._metricCustomRenderer({
+        id: 'run-id',
+        value: { metric: { number_value: 0.3, format: RunMetricFormat.PERCENTAGE } },
+      }),
+    ).toMatchSnapshot();
   });
 
   it('renders raw metric', () => {
-    expect(getShallowInstance()._metricCustomRenderer({
-      id: 'run-id',
-      value: {
-        metadata: { count: 1, maxValue: 100, minValue: 10 } as MetricMetadata,
-        metric: { number_value: 55 } as ApiRunMetric,
-      },
-    })).toMatchSnapshot();
+    expect(
+      getShallowInstance()._metricCustomRenderer({
+        id: 'run-id',
+        value: {
+          metadata: { count: 1, maxValue: 100, minValue: 10 } as MetricMetadata,
+          metric: { number_value: 55 } as ApiRunMetric,
+        },
+      }),
+    ).toMatchSnapshot();
   });
-
 });
diff --git a/frontend/src/pages/RunList.tsx b/frontend/src/pages/RunList.tsx
index 4f1bff25e3e5..095b8245c56c 100644
--- a/frontend/src/pages/RunList.tsx
+++ b/frontend/src/pages/RunList.tsx
@@ -18,7 +18,7 @@ import * as React from 'react';
 import CustomTable, { Column, Row, CustomRendererProps } from '../components/CustomTable';
 import Metric from '../components/Metric';
 import RunUtils, { MetricMetadata, ExperimentInfo } from '../../src/lib/RunUtils';
-import { ApiRun, ApiResourceType, ApiRunMetric, RunStorageState, ApiRunDetail } from '../../src/apis/run';
+import { ApiRun, ApiRunMetric, RunStorageState, ApiRunDetail } from '../../src/apis/run';
 import { Apis, RunSortKeys, ListRequest } from '../lib/Apis';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import { NodePhase } from '../lib/StatusUtils';
@@ -103,7 +103,11 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
     ];
 
     if (!this.props.hideExperimentColumn) {
-      columns.splice(3, 0, { customRenderer: this._experimentCustomRenderer, label: 'Experiment', flex: 1 });
+      columns.splice(3, 0, {
+        customRenderer: this._experimentCustomRenderer,
+        flex: 1,
+        label: 'Experiment',
+      });
     }
 
     if (metricMetadata.length) {
@@ -115,13 +119,15 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
         label: '',
       });
 
-      columns.push(...metricMetadata.map((metadata) => {
-        return {
-          customRenderer: this._metricCustomRenderer,
-          flex: 0.5,
-          label: metadata.name!
-        };
-      }));
+      columns.push(
+        ...metricMetadata.map(metadata => {
+          return {
+            customRenderer: this._metricCustomRenderer,
+            flex: 0.5,
+            label: metadata.name!,
+          };
+        }),
+      );
     }
 
     const rows: Row[] = this.state.runs.map(r => {
@@ -152,25 +158,35 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
       }
       if (displayMetrics.length) {
         row.otherFields.push(''); // Metric buffer column
-        row.otherFields.push(...displayMetrics as any);
+        row.otherFields.push(...(displayMetrics as any));
       }
       return row;
     });
 
-    return (<div>
-      <CustomTable columns={columns} rows={rows} selectedIds={this.props.selectedIds}
-        initialSortColumn={RunSortKeys.CREATED_AT} ref={this._tableRef} filterLabel='Filter runs'
-        updateSelection={this.props.onSelectionChange} reload={this._loadRuns.bind(this)}
-        disablePaging={this.props.disablePaging} disableSorting={this.props.disableSorting}
-        disableSelection={this.props.disableSelection} noFilterBox={this.props.noFilterBox}
-        emptyMessage={
-          `No` +
-          `${this.props.storageState === RunStorageState.ARCHIVED ? ' archived' : ' available'}` +
-          ` runs found` +
-          `${this.props.experimentIdMask ? ' for this experiment' : ''}.`
-        }
-      />
-    </div>);
+    return (
+      <div>
+        <CustomTable
+          columns={columns}
+          rows={rows}
+          selectedIds={this.props.selectedIds}
+          initialSortColumn={RunSortKeys.CREATED_AT}
+          ref={this._tableRef}
+          filterLabel='Filter runs'
+          updateSelection={this.props.onSelectionChange}
+          reload={this._loadRuns.bind(this)}
+          disablePaging={this.props.disablePaging}
+          disableSorting={this.props.disableSorting}
+          disableSelection={this.props.disableSelection}
+          noFilterBox={this.props.noFilterBox}
+          emptyMessage={
+            `No` +
+            `${this.props.storageState === RunStorageState.ARCHIVED ? ' archived' : ' available'}` +
+            ` runs found` +
+            `${this.props.experimentIdMask ? ' for this experiment' : ''}.`
+          }
+        />
+      </div>
+    );
   }
 
   public async refresh(): Promise<void> {
@@ -179,71 +195,93 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
     }
   }
 
-  public _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (props: CustomRendererProps<string>) => {
-    return <Link className={commonCss.link} onClick={(e) => e.stopPropagation()}
-      to={RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, props.id)}>{props.value}</Link>;
-  }
+  public _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (
+    props: CustomRendererProps<string>,
+  ) => {
+    return (
+      <Link
+        className={commonCss.link}
+        onClick={e => e.stopPropagation()}
+        to={RoutePage.RUN_DETAILS.replace(':' + RouteParams.runId, props.id)}
+      >
+        {props.value}
+      </Link>
+    );
+  };
 
-  public _pipelineCustomRenderer: React.FC<CustomRendererProps<PipelineInfo>> = (props: CustomRendererProps<PipelineInfo>) => {
+  public _pipelineCustomRenderer: React.FC<CustomRendererProps<PipelineInfo>> = (
+    props: CustomRendererProps<PipelineInfo>,
+  ) => {
     // If the getPipeline call failed or a run has no pipeline, we display a placeholder.
     if (!props.value || (!props.value.usePlaceholder && !props.value.id)) {
       return <div>-</div>;
     }
     const search = new URLParser(this.props).build({ [QUERY_PARAMS.fromRunId]: props.id });
-    const url = props.value.usePlaceholder ?
-      RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId + '?', '') + search :
-      RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId, props.value.id || '');
+    const url = props.value.usePlaceholder
+      ? RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId + '?', '') + search
+      : RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineId, props.value.id || '');
     return (
-      <Link className={commonCss.link} onClick={(e) => e.stopPropagation()}
-        to={url}>
+      <Link className={commonCss.link} onClick={e => e.stopPropagation()} to={url}>
         {props.value.usePlaceholder ? '[View pipeline]' : props.value.displayName}
       </Link>
     );
-  }
+  };
 
-  public _recurringRunCustomRenderer: React.FC<CustomRendererProps<RecurringRunInfo>> = (props: CustomRendererProps<RecurringRunInfo>) => {
+  public _recurringRunCustomRenderer: React.FC<CustomRendererProps<RecurringRunInfo>> = (
+    props: CustomRendererProps<RecurringRunInfo>,
+  ) => {
     // If the getJob call failed or a run has no job, we display a placeholder.
     if (!props.value || !props.value.id) {
       return <div>-</div>;
     }
     const url = RoutePage.RECURRING_RUN.replace(':' + RouteParams.runId, props.value.id || '');
     return (
-      <Link className={commonCss.link} onClick={(e) => e.stopPropagation()}
-        to={url}>
+      <Link className={commonCss.link} onClick={e => e.stopPropagation()} to={url}>
         {props.value.displayName || '[View config]'}
       </Link>
     );
-  }
+  };
 
-  public _experimentCustomRenderer: React.FC<CustomRendererProps<ExperimentInfo>> = (props: CustomRendererProps<ExperimentInfo>) => {
+  public _experimentCustomRenderer: React.FC<CustomRendererProps<ExperimentInfo>> = (
+    props: CustomRendererProps<ExperimentInfo>,
+  ) => {
     // If the getExperiment call failed or a run has no experiment, we display a placeholder.
     if (!props.value || !props.value.id) {
       return <div>-</div>;
     }
     return (
-      <Link className={commonCss.link} onClick={(e) => e.stopPropagation()}
-        to={RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, props.value.id)}>
+      <Link
+        className={commonCss.link}
+        onClick={e => e.stopPropagation()}
+        to={RoutePage.EXPERIMENT_DETAILS.replace(':' + RouteParams.experimentId, props.value.id)}
+      >
         {props.value.displayName}
       </Link>
     );
-  }
+  };
 
-  public _statusCustomRenderer: React.FC<CustomRendererProps<NodePhase>> = (props: CustomRendererProps<NodePhase>) => {
+  public _statusCustomRenderer: React.FC<CustomRendererProps<NodePhase>> = (
+    props: CustomRendererProps<NodePhase>,
+  ) => {
     return statusToIcon(props.value);
-  }
+  };
 
-  public _metricBufferCustomRenderer: React.FC<CustomRendererProps<{}>> = (props: CustomRendererProps<{}>) => {
+  public _metricBufferCustomRenderer: React.FC<CustomRendererProps<{}>> = (
+    props: CustomRendererProps<{}>,
+  ) => {
     return <div style={{ borderLeft: `1px solid ${color.divider}`, padding: '20px 0' }} />;
-  }
+  };
 
-  public _metricCustomRenderer: React.FC<CustomRendererProps<DisplayMetric>> = (props: CustomRendererProps<DisplayMetric>) => {
+  public _metricCustomRenderer: React.FC<CustomRendererProps<DisplayMetric>> = (
+    props: CustomRendererProps<DisplayMetric>,
+  ) => {
     const displayMetric = props.value;
     if (!displayMetric) {
       return <div />;
     }
 
     return <Metric metric={displayMetric.metric} metadata={displayMetric.metadata} />;
-  }
+  };
 
   protected async _loadRuns(request: ListRequest): Promise<string> {
     let displayRuns: DisplayRun[] = [];
@@ -259,14 +297,21 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
       if (this.props.storageState) {
         try {
           // Augment the request filter with the storage state predicate
-          const filter = JSON.parse(decodeURIComponent(request.filter || '{"predicates": []}')) as ApiFilter;
-          filter.predicates = (filter.predicates || []).concat([{
-            key: 'storage_state',
-            // Use EQUALS ARCHIVED or NOT EQUALS ARCHIVED to account for cases where the field
-            // is missing, in which case it should be counted as available.
-            op: this.props.storageState === RunStorageState.ARCHIVED ? PredicateOp.EQUALS : PredicateOp.NOTEQUALS,
-            string_value: RunStorageState.ARCHIVED.toString(),
-          }]);
+          const filter = JSON.parse(
+            decodeURIComponent(request.filter || '{"predicates": []}'),
+          ) as ApiFilter;
+          filter.predicates = (filter.predicates || []).concat([
+            {
+              key: 'storage_state',
+              // Use EQUALS ARCHIVED or NOT EQUALS ARCHIVED to account for cases where the field
+              // is missing, in which case it should be counted as available.
+              op:
+                this.props.storageState === RunStorageState.ARCHIVED
+                  ? PredicateOp.EQUALS
+                  : PredicateOp.NOTEQUALS,
+              string_value: RunStorageState.ARCHIVED.toString(),
+            },
+          ]);
           request.filter = encodeURIComponent(JSON.stringify(filter));
         } catch (err) {
           logger.error('Could not parse request filter: ', request.filter);
@@ -278,14 +323,13 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
           request.pageToken,
           request.pageSize,
           request.sortBy,
-          this.props.experimentIdMask ? ApiResourceType.EXPERIMENT.toString() : undefined,
+          this.props.experimentIdMask ? 'EXPERIMENT' : undefined,
           this.props.experimentIdMask,
           request.filter,
         );
 
         displayRuns = (response.runs || []).map(r => ({ run: r }));
         nextPageToken = response.next_page_token || '';
-
       } catch (err) {
         const error = new Error(await errorToMessage(err));
         this.props.onError('Error: failed to fetch runs.', error);
@@ -305,7 +349,7 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
 
   private async _setColumns(displayRuns: DisplayRun[]): Promise<DisplayRun[]> {
     return Promise.all(
-      displayRuns.map(async (displayRun) => {
+      displayRuns.map(async displayRun => {
         this._setRecurringRun(displayRun);
 
         await this._getAndSetPipelineNames(displayRun);
@@ -314,7 +358,7 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
           await this._getAndSetExperimentNames(displayRun);
         }
         return displayRun;
-      })
+      }),
     );
   }
 
@@ -331,16 +375,18 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
    * For each run ID, fetch its corresponding run, and set it in DisplayRuns
    */
   private _getAndSetRuns(displayRuns: DisplayRun[]): Promise<DisplayRun[]> {
-    return Promise.all(displayRuns.map(async displayRun => {
-      let getRunResponse: ApiRunDetail;
-      try {
-        getRunResponse = await Apis.runServiceApi.getRun(displayRun.run!.id!);
-        displayRun.run = getRunResponse.run!;
-      } catch (err) {
-        displayRun.error = await errorToMessage(err);
-      }
-      return displayRun;
-    }));
+    return Promise.all(
+      displayRuns.map(async displayRun => {
+        let getRunResponse: ApiRunDetail;
+        try {
+          getRunResponse = await Apis.runServiceApi.getRun(displayRun.run!.id!);
+          displayRun.run = getRunResponse.run!;
+        } catch (err) {
+          displayRun.error = await errorToMessage(err);
+        }
+        return displayRun;
+      }),
+    );
   }
 
   /**
@@ -358,14 +404,14 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
           const pipeline = await Apis.pipelineServiceApi.getPipeline(pipelineId);
           pipelineName = pipeline.name || '';
         } catch (err) {
-          displayRun.error = 'Failed to get associated pipeline: ' + await errorToMessage(err);
+          displayRun.error = 'Failed to get associated pipeline: ' + (await errorToMessage(err));
           return;
         }
       }
       displayRun.pipeline = {
         displayName: pipelineName,
         id: pipelineId,
-        usePlaceholder: false
+        usePlaceholder: false,
       };
     } else if (!!RunUtils.getWorkflowManifest(displayRun.run)) {
       displayRun.pipeline = { usePlaceholder: true };
@@ -387,13 +433,13 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
           const experiment = await Apis.experimentServiceApi.getExperiment(experimentId);
           experimentName = experiment.name || '';
         } catch (err) {
-          displayRun.error = 'Failed to get associated experiment: ' + await errorToMessage(err);
+          displayRun.error = 'Failed to get associated experiment: ' + (await errorToMessage(err));
           return;
         }
       }
       displayRun.experiment = {
         displayName: experimentName,
-        id: experimentId
+        id: experimentId,
       };
     }
   }
diff --git a/frontend/src/pages/Status.test.tsx b/frontend/src/pages/Status.test.tsx
index 9e39e09427a5..d5b5e1240933 100644
--- a/frontend/src/pages/Status.test.tsx
+++ b/frontend/src/pages/Status.test.tsx
@@ -19,7 +19,6 @@ import { statusToIcon } from './Status';
 import { NodePhase } from '../lib/StatusUtils';
 import { shallow } from 'enzyme';
 
-
 describe('Status', () => {
   // We mock this because it uses toLocaleDateString, which causes mismatches between local and CI
   // test enviroments
@@ -30,7 +29,7 @@ describe('Status', () => {
 
   beforeEach(() => {
     formatDateStringSpy.mockImplementation((date: Date) => {
-      return (date === startDate) ? '1/2/2019, 9:10:11 AM' : '1/3/2019, 10:11:12 AM';
+      return date === startDate ? '1/2/2019, 9:10:11 AM' : '1/3/2019, 10:11:12 AM';
     });
   });
 
@@ -69,11 +68,11 @@ describe('Status', () => {
       expect(tree).toMatchSnapshot();
     });
 
-    Object.keys(NodePhase).map(status => (
+    Object.keys(NodePhase).map(status =>
       it('renders an icon with tooltip for phase: ' + status, () => {
         const tree = shallow(statusToIcon(NodePhase[status]));
         expect(tree).toMatchSnapshot();
-      })
-    ));
+      }),
+    );
   });
 });
diff --git a/frontend/src/pages/Status.tsx b/frontend/src/pages/Status.tsx
index b936d3c1eb73..0081ca147fe4 100644
--- a/frontend/src/pages/Status.tsx
+++ b/frontend/src/pages/Status.tsx
@@ -27,7 +27,12 @@ import { color } from '../Css';
 import { logger, formatDateString } from '../lib/Utils';
 import { NodePhase, checkIfTerminated } from '../lib/StatusUtils';
 
-export function statusToIcon(status?: NodePhase, startDate?: Date | string, endDate?: Date | string, nodeMessage?: string): JSX.Element {
+export function statusToIcon(
+  status?: NodePhase,
+  startDate?: Date | string,
+  endDate?: Date | string,
+  nodeMessage?: string,
+): JSX.Element {
   status = checkIfTerminated(status, nodeMessage);
   // tslint:disable-next-line:variable-name
   let IconComponent: any = UnknownIcon;
@@ -79,14 +84,16 @@ export function statusToIcon(status?: NodePhase, startDate?: Date | string, endD
       logger.verbose('Unknown node phase:', status);
   }
   return (
-    <Tooltip title={
-      <div>
-        <div>{title}</div>
-        {/* These dates may actually be strings, not a Dates due to a bug in swagger's handling of dates */}
-        {startDate && (<div>Start: {formatDateString(startDate)}</div>)}
-        {endDate && (<div>End: {formatDateString(endDate)}</div>)}
-      </div>
-    }>
+    <Tooltip
+      title={
+        <div>
+          <div>{title}</div>
+          {/* These dates may actually be strings, not a Dates due to a bug in swagger's handling of dates */}
+          {startDate && <div>Start: {formatDateString(startDate)}</div>}
+          {endDate && <div>End: {formatDateString(endDate)}</div>}
+        </div>
+      }
+    >
       <span style={{ height: 18 }}>
         <IconComponent style={{ color: iconColor, height: 18, width: 18 }} />
       </span>
diff --git a/frontend/src/pages/__snapshots__/NewRun.test.tsx.snap b/frontend/src/pages/__snapshots__/NewRun.test.tsx.snap
index c01649935f24..448a83087555 100644
--- a/frontend/src/pages/__snapshots__/NewRun.test.tsx.snap
+++ b/frontend/src/pages/__snapshots__/NewRun.test.tsx.snap
@@ -48,7 +48,8 @@ exports[`NewRun arriving from pipeline details page indicates that a pipeline is
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -77,6 +78,21 @@ exports[`NewRun arriving from pipeline details page indicates that a pipeline is
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -150,6 +166,10 @@ exports[`NewRun arriving from pipeline details page indicates that a pipeline is
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -174,7 +194,7 @@ exports[`NewRun arriving from pipeline details page indicates that a pipeline is
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -458,7 +478,8 @@ exports[`NewRun changes the exit button's text if query params indicate this is
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -487,6 +508,21 @@ exports[`NewRun changes the exit button's text if query params indicate this is
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -564,6 +600,10 @@ exports[`NewRun changes the exit button's text if query params indicate this is
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -588,7 +628,7 @@ exports[`NewRun changes the exit button's text if query params indicate this is
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -876,7 +916,8 @@ exports[`NewRun changes title and form if the new run will recur, based on the r
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -905,6 +946,21 @@ exports[`NewRun changes title and form if the new run will recur, based on the r
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -987,6 +1043,10 @@ exports[`NewRun changes title and form if the new run will recur, based on the r
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -1011,7 +1071,7 @@ exports[`NewRun changes title and form if the new run will recur, based on the r
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -1315,7 +1375,8 @@ exports[`NewRun changes title and form to default state if the new run is a one-
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -1344,6 +1405,21 @@ exports[`NewRun changes title and form to default state if the new run is a one-
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -1422,6 +1498,10 @@ exports[`NewRun changes title and form to default state if the new run is a one-
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -1446,7 +1526,7 @@ exports[`NewRun changes title and form to default state if the new run is a one-
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -1735,7 +1815,8 @@ exports[`NewRun fetches the associated pipeline if one is present in the query p
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -1764,6 +1845,21 @@ exports[`NewRun fetches the associated pipeline if one is present in the query p
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -1837,6 +1933,10 @@ exports[`NewRun fetches the associated pipeline if one is present in the query p
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -1861,7 +1961,7 @@ exports[`NewRun fetches the associated pipeline if one is present in the query p
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -2145,7 +2245,8 @@ exports[`NewRun renders the new run page 1`] = `
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -2174,6 +2275,21 @@ exports[`NewRun renders the new run page 1`] = `
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -2251,6 +2367,10 @@ exports[`NewRun renders the new run page 1`] = `
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -2275,7 +2395,7 @@ exports[`NewRun renders the new run page 1`] = `
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -2563,7 +2683,8 @@ exports[`NewRun starting a new recurring run includes additional trigger input f
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -2592,6 +2713,21 @@ exports[`NewRun starting a new recurring run includes additional trigger input f
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -2665,6 +2801,10 @@ exports[`NewRun starting a new recurring run includes additional trigger input f
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -2689,7 +2829,7 @@ exports[`NewRun starting a new recurring run includes additional trigger input f
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -2964,7 +3104,8 @@ exports[`NewRun starting a new run copies pipeline from run in the start API cal
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -2999,6 +3140,21 @@ exports[`NewRun starting a new run copies pipeline from run in the start API cal
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -3083,6 +3239,10 @@ exports[`NewRun starting a new run copies pipeline from run in the start API cal
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -3107,7 +3267,7 @@ exports[`NewRun starting a new run copies pipeline from run in the start API cal
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -3387,7 +3547,8 @@ exports[`NewRun starting a new run updates the parameters in state on handlePara
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -3422,6 +3583,21 @@ exports[`NewRun starting a new run updates the parameters in state on handlePara
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -3506,6 +3682,10 @@ exports[`NewRun starting a new run updates the parameters in state on handlePara
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -3530,7 +3710,7 @@ exports[`NewRun starting a new run updates the parameters in state on handlePara
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -3840,7 +4020,8 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -3869,6 +4050,21 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -3946,6 +4142,10 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -3970,7 +4170,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -4258,7 +4458,8 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -4287,6 +4488,21 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -4364,6 +4580,10 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -4388,7 +4608,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -4687,7 +4907,8 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -4716,6 +4937,21 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -4793,6 +5029,10 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -4817,7 +5057,7 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -5105,7 +5345,8 @@ exports[`NewRun updates the run's state with the associated experiment if one is
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "customRenderer": [Function],
+                "flex": 2,
                 "label": "Description",
               },
               Object {
@@ -5134,6 +5375,21 @@ exports[`NewRun updates the run's state with the associated experiment if one is
           match=""
           selectionChanged={[Function]}
           title="Choose a pipeline"
+          toolbarActionMap={
+            Object {
+              "uploadPipeline": Object {
+                "action": [Function],
+                "icon": [Function],
+                "id": "uploadBtn",
+                "outlined": true,
+                "style": Object {
+                  "minWidth": 160,
+                },
+                "title": "Upload pipeline",
+                "tooltip": "Upload pipeline",
+              },
+            }
+          }
           toolbarProps={
             Object {
               "actions": Object {},
@@ -5211,6 +5467,10 @@ exports[`NewRun updates the run's state with the associated experiment if one is
         </WithStyles(Button)>
       </WithStyles(DialogActions)>
     </WithStyles(Dialog)>
+    <UploadPipelineDialog
+      onClose={[Function]}
+      open={false}
+    />
     <WithStyles(Dialog)
       PaperProps={
         Object {
@@ -5235,7 +5495,7 @@ exports[`NewRun updates the run's state with the associated experiment if one is
                 "sortKey": "name",
               },
               Object {
-                "flex": 1.5,
+                "flex": 2,
                 "label": "Description",
               },
               Object {
diff --git a/frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap b/frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap
index 40717bf4490b..4076c50dac88 100644
--- a/frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap
+++ b/frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap
@@ -77,9 +77,9 @@ exports[`PipelineDetails closes side panel when close button is clicked 1`] = `
             >
               Description
             </div>
-            <div>
-              test pipeline description
-            </div>
+            <Component
+              description="test pipeline description"
+            />
           </WithStyles(Paper)>
           <Graph
             graph={
@@ -314,9 +314,9 @@ exports[`PipelineDetails opens side panel on clicked node, shows message when no
             >
               Description
             </div>
-            <div>
-              test pipeline description
-            </div>
+            <Component
+              description="test pipeline description"
+            />
           </WithStyles(Paper)>
           <Graph
             graph={
@@ -454,9 +454,9 @@ exports[`PipelineDetails shows clicked node info in the side panel if it is in t
             >
               Description
             </div>
-            <div>
-              test pipeline description
-            </div>
+            <Component
+              description="test pipeline description"
+            />
           </WithStyles(Paper)>
           <Graph
             graph={
@@ -688,9 +688,9 @@ exports[`PipelineDetails shows empty pipeline details with empty graph 1`] = `
             >
               Description
             </div>
-            <div>
-              test pipeline description
-            </div>
+            <Component
+              description="test pipeline description"
+            />
           </WithStyles(Paper)>
           <Graph
             graph={
diff --git a/frontend/src/pages/__snapshots__/PipelineList.test.tsx.snap b/frontend/src/pages/__snapshots__/PipelineList.test.tsx.snap
index 50071655d17f..c939609fd2e5 100644
--- a/frontend/src/pages/__snapshots__/PipelineList.test.tsx.snap
+++ b/frontend/src/pages/__snapshots__/PipelineList.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`PipelineList renders a list of one pipeline 1`] = `
           "sortKey": "name",
         },
         Object {
+          "customRenderer": [Function],
           "flex": 3,
           "label": "Description",
         },
@@ -64,6 +65,7 @@ exports[`PipelineList renders a list of one pipeline with error 1`] = `
           "sortKey": "name",
         },
         Object {
+          "customRenderer": [Function],
           "flex": 3,
           "label": "Description",
         },
@@ -114,6 +116,7 @@ exports[`PipelineList renders a list of one pipeline with no description or crea
           "sortKey": "name",
         },
         Object {
+          "customRenderer": [Function],
           "flex": 3,
           "label": "Description",
         },
@@ -164,6 +167,7 @@ exports[`PipelineList renders an empty list with empty state message 1`] = `
           "sortKey": "name",
         },
         Object {
+          "customRenderer": [Function],
           "flex": 3,
           "label": "Description",
         },
diff --git a/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap b/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap
index 1fe280a7f126..72909182ad47 100644
--- a/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap
+++ b/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap
@@ -577,14 +577,17 @@ exports[`RunDetails logs tab does not load logs if clicked node status is skippe
                 <div
                   className="page"
                 >
-                  <LogViewer
-                    classes="page"
-                    logLines={
-                      Array [
-                        "",
-                      ]
-                    }
-                  />
+                  <div
+                    className="pageOverflowHidden"
+                  >
+                    <LogViewer
+                      logLines={
+                        Array [
+                          "",
+                        ]
+                      }
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -688,14 +691,17 @@ exports[`RunDetails logs tab keeps side pane open and on same tab when logs chan
                 <div
                   className="page"
                 >
-                  <LogViewer
-                    classes="page"
-                    logLines={
-                      Array [
-                        "new test logs",
-                      ]
-                    }
-                  />
+                  <div
+                    className="pageOverflowHidden"
+                  >
+                    <LogViewer
+                      logLines={
+                        Array [
+                          "new test logs",
+                        ]
+                      }
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -799,14 +805,17 @@ exports[`RunDetails logs tab loads and shows logs in side pane 1`] = `
                 <div
                   className="page"
                 >
-                  <LogViewer
-                    classes="page"
-                    logLines={
-                      Array [
-                        "test logs",
-                      ]
-                    }
-                  />
+                  <div
+                    className="pageOverflowHidden"
+                  >
+                    <LogViewer
+                      logLines={
+                        Array [
+                          "test logs",
+                        ]
+                      }
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -1137,7 +1146,8 @@ exports[`RunDetails logs tab shows warning banner and link to Stackdriver in log
                   <div
                     className=""
                   >
-                    Logs can still be viewed in either 
+                    Logs can still be viewed in either
+                     
                     <a
                       className="link unstyled"
                       href="https://console.cloud.google.com/logs/viewer?project=test-project-id&interval=NO_LIMIT&advancedFilter=resource.type%3D\\"container\\"%0Aresource.labels.cluster_name:\\"test-cluster-name\\"%0Aresource.labels.pod_id:\\"node1\\""
@@ -1145,7 +1155,9 @@ exports[`RunDetails logs tab shows warning banner and link to Stackdriver in log
                     >
                       Legacy Stackdriver
                     </a>
-                     or in 
+                     
+                    or in
+                     
                     <a
                       className="link unstyled"
                       href="https://console.cloud.google.com/logs/viewer?project=test-project-id&interval=NO_LIMIT&advancedFilter=resource.type%3D\\"k8s_container\\"%0Aresource.labels.cluster_name:\\"test-cluster-name\\"%0Aresource.labels.pod_name:\\"node1\\""
@@ -1257,14 +1269,17 @@ exports[`RunDetails logs tab switches to logs tab in side pane 1`] = `
                 <div
                   className="page"
                 >
-                  <LogViewer
-                    classes="page"
-                    logLines={
-                      Array [
-                        "",
-                      ]
-                    }
-                  />
+                  <div
+                    className="pageOverflowHidden"
+                  >
+                    <LogViewer
+                      logLines={
+                        Array [
+                          "",
+                        ]
+                      }
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -2213,6 +2228,11 @@ exports[`RunDetails switches to inputs/outputs tab in side pane 1`] = `
                     }
                     title="Input parameters"
                   />
+                  <Component
+                    fields={Array []}
+                    title="Input artifacts"
+                    valueComponent={[Function]}
+                  />
                   <Component
                     fields={
                       Array [
@@ -2228,6 +2248,11 @@ exports[`RunDetails switches to inputs/outputs tab in side pane 1`] = `
                     }
                     title="Output parameters"
                   />
+                  <Component
+                    fields={Array []}
+                    title="Output artifacts"
+                    valueComponent={[Function]}
+                  />
                 </div>
               </div>
             </div>
diff --git a/frontend/src/pages/__snapshots__/RunList.test.tsx.snap b/frontend/src/pages/__snapshots__/RunList.test.tsx.snap
index e80c1cb38ab7..18f79c944917 100644
--- a/frontend/src/pages/__snapshots__/RunList.test.tsx.snap
+++ b/frontend/src/pages/__snapshots__/RunList.test.tsx.snap
@@ -2011,6 +2011,7 @@ exports[`RunList reloads the run when refresh is called 1`] = `
                 "width": "25%",
               }
             }
+            title="Run name"
           >
             <WithStyles(Tooltip)
               enterDelay={300}
@@ -2596,6 +2597,7 @@ exports[`RunList reloads the run when refresh is called 1`] = `
                 "width": "8.333333333333332%",
               }
             }
+            title="Status"
           >
             <WithStyles(Tooltip)
               enterDelay={300}
@@ -3180,6 +3182,7 @@ exports[`RunList reloads the run when refresh is called 1`] = `
                 "width": "8.333333333333332%",
               }
             }
+            title="Duration"
           >
             <WithStyles(Tooltip)
               enterDelay={300}
@@ -3764,6 +3767,7 @@ exports[`RunList reloads the run when refresh is called 1`] = `
                 "width": "16.666666666666664%",
               }
             }
+            title="Experiment"
           >
             <WithStyles(Tooltip)
               enterDelay={300}
@@ -4348,6 +4352,7 @@ exports[`RunList reloads the run when refresh is called 1`] = `
                 "width": "16.666666666666664%",
               }
             }
+            title="Pipeline"
           >
             <WithStyles(Tooltip)
               enterDelay={300}
@@ -4932,6 +4937,7 @@ exports[`RunList reloads the run when refresh is called 1`] = `
                 "width": "8.333333333333332%",
               }
             }
+            title="Recurring Run"
           >
             <WithStyles(Tooltip)
               enterDelay={300}
@@ -5516,6 +5522,7 @@ exports[`RunList reloads the run when refresh is called 1`] = `
                 "width": "16.666666666666664%",
               }
             }
+            title="Start time"
           >
             <WithStyles(Tooltip)
               enterDelay={300}
diff --git a/frontend/start-proxies.sh b/frontend/start-proxy-standalone-and-server.sh
similarity index 92%
rename from frontend/start-proxies.sh
rename to frontend/start-proxy-standalone-and-server.sh
index 5b95642d82f3..5c82b1b16deb 100755
--- a/frontend/start-proxies.sh
+++ b/frontend/start-proxy-standalone-and-server.sh
@@ -46,6 +46,6 @@ popd
 # localhost:9090 port forwards to metadata_envoy pod.
 
 echo "Starting to port forward backend apis..."
-kubectl port-forward -n kubeflow $METADATA_ENVOY_POD 9090:9090 &
-kubectl port-forward -n kubeflow $PIPELINE_API_POD 3002:8888 &
+kubectl port-forward -n $NAMESPACE $METADATA_ENVOY_POD 9090:9090 &
+kubectl port-forward -n $NAMESPACE $PIPELINE_API_POD 3002:8888 &
 ML_PIPELINE_SERVICE_PORT=3002 npm run mock:server 3001
diff --git a/frontend/start-proxy-standalone.sh b/frontend/start-proxy-standalone.sh
new file mode 100755
index 000000000000..9be68140ddc9
--- /dev/null
+++ b/frontend/start-proxy-standalone.sh
@@ -0,0 +1,27 @@
+#!/bin/bash
+
+set -e
+
+NAMESPACE=${NAMESPACE:-kubeflow}
+
+cat << EOF
+===============================================================================
+This script helps set up a dev env for client side UI only. It uses a real KFP standalone deployment for api requests.
+
+What this does:
+1. It detects pipeline ui pod name in a KFP standalone deployment.
+2. Port forward pipeline ui pod to localhost:3001 (Pipeline UI dev env is configured to redirect all api requests to localhost:3001)
+===============================================================================
+EOF
+
+echo "Detecting pipeline ui pod name..."
+PIPELINE_UI_POD=($(kubectl get pods -n $NAMESPACE -l app=ml-pipeline-ui -o=custom-columns=:.metadata.name --no-headers))
+if [ -z "$PIPELINE_UI_POD" ]; then
+  echo "Couldn't get pipeline ui pod in namespace '$NAMESPACE', double check the cluster your kubectl talks to and your namespace is correct."
+  echo "Namespace can be configured by setting env variable NAMESPACE. e.g. '$ NAMESPACE=kfp npm run start:proxy-standalone'"
+  exit 1
+fi
+echo "Pipeline UI pod is $PIPELINE_UI_POD"
+
+echo "Starting to port forward frontend server in a KFP standalone deployment to respond to apis..."
+kubectl port-forward -n $NAMESPACE $PIPELINE_UI_POD 3001:3000
diff --git a/frontend/third_party/argo-ui/kubernetes.ts b/frontend/third_party/argo-ui/kubernetes.ts
index fc9627ccab0e..405b5d30f02d 100644
--- a/frontend/third_party/argo-ui/kubernetes.ts
+++ b/frontend/third_party/argo-ui/kubernetes.ts
@@ -18,7 +18,6 @@ export type Volume = any;
 export type EnvFromSource = any;
 export type EnvVarSource = any;
 export type ResourceRequirements = any;
-export type VolumeMount = any;
 export type Probe = any;
 export type Lifecycle = any;
 export type TerminationMessagePolicy = any;
@@ -27,6 +26,12 @@ export type SecurityContext = any;
 export type PersistentVolumeClaim = any;
 export type Affinity = any;
 
+
+export interface VolumeMount {
+  name: string;
+  mountPath?: string;
+}
+
 export interface ListMeta {
   _continue?: string;
   resourceVersion?: string;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index a1ec2da63b13..da9b39438acb 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -21,7 +21,7 @@
     "strictBindCallApply": true,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true
+    "skipLibCheck": true
   },
   "exclude": [
     "__mocks__",
diff --git a/frontend/tsconfig.prod.json b/frontend/tsconfig.prod.json
index 4144216dd1ad..c96383e2f398 100644
--- a/frontend/tsconfig.prod.json
+++ b/frontend/tsconfig.prod.json
@@ -1,3 +1,11 @@
 {
   "extends": "./tsconfig.json"
-}
\ No newline at end of file
+  // TODO(jingzhang36): auto-generated filter/api.ts has imported url but never
+  // uses it; and typescript check enabled here will throw errors because of
+  // that. So temporarily disable typescript check here until we have a way to
+  // fix the auto-gen code. Moreover, TSLint is checking the same thing and thus
+  // it is safe to temporarily disable this check.
+  // "compilerOptions": {
+  //   "noUnusedLocals": true
+  // }
+}
diff --git a/frontend/tslint.json b/frontend/tslint.json
index 14bb8edb89f5..e12fadb27a1b 100644
--- a/frontend/tslint.json
+++ b/frontend/tslint.json
@@ -1,9 +1,6 @@
 {
-  "extends": [
-    "tslint:recommended",
-    "tslint-react",
-    "tslint-config-prettier"
-  ],
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "defaultSeverity": "warn",
   "linterOptions": {
     "exclude": [
       "config/**/*.js",
@@ -11,31 +8,21 @@
       "src/apis/**/*.ts",
       "coverage/lcov-report/*.js",
       "backstop_data/**/*.js",
-      "../frontend/src/api/*.ts"
-    ]
+      "generated/**",
+      "src/api/*.ts",
+      "scripts/**"
+    ],
+    "format": "verbose"
   },
   "rules": {
-    "interface-name": [
-      true,
-      "never-prefix"
-    ],
+    "interface-name": [true, "never-prefix"],
     "jsx-no-bind": false,
     "jsx-no-lambda": false,
     "max-classes-per-file": false,
     "ordered-imports": false,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "semicolon": [
-      true,
-      "always",
-      "ignore-bound-class-methods"
-    ],
-    "typedef": [
-      true,
-      "call-signature"
-    ],
+    "semicolon": [true, "always", "ignore-bound-class-methods"],
+    "typedef": [true, "call-signature"],
+    "no-unused-variable": true,
     "variable-name": [
       true,
       "check-format",
diff --git a/frontend/tslint.prod.json b/frontend/tslint.prod.json
new file mode 100644
index 000000000000..78852e2eab91
--- /dev/null
+++ b/frontend/tslint.prod.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tslint.json",
+  "defaultSeverity": "error"
+}
diff --git a/go.mod b/go.mod
index 83ab29361fe3..4df30170f932 100644
--- a/go.mod
+++ b/go.mod
@@ -91,3 +91,5 @@ require (
 	sigs.k8s.io/controller-runtime v0.0.0-20181121180216-5558165425ef
 	sigs.k8s.io/testing_frameworks v0.1.1 // indirect
 )
+
+go 1.13
diff --git a/manifests/gcp_marketplace/OWNERS b/manifests/gcp_marketplace/OWNERS
new file mode 100644
index 000000000000..5d4627350571
--- /dev/null
+++ b/manifests/gcp_marketplace/OWNERS
@@ -0,0 +1,6 @@
+approvers:
+  - IronPan
+  - rmgogogo
+reviewers:
+  - IronPan
+  - rmgogogo
diff --git a/manifests/gcp_marketplace/README.md b/manifests/gcp_marketplace/README.md
index 17efe2de226e..20bebb421a16 100644
--- a/manifests/gcp_marketplace/README.md
+++ b/manifests/gcp_marketplace/README.md
@@ -16,136 +16,5 @@ Google Kubernetes Engine cluster using Google Cloud Marketplace. Follow the
 
 ## <a name="using-install-command-line"></a>Using the command line
 
-You can use [Google Cloud Shell](https://cloud.google.com/shell/) or a local
-workstation to complete these steps.
-
-
-[![Open in Cloud Shell](http://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https://github.com/kubeflow/pipelines&cloudshell_open_in_editor=README.md&cloudshell_working_dir=manifests/gcp_marketplace)
-
-
-### Prerequisites
-
-#### Set up command-line tools
-
-You'll need the following tools in your development environment. If you are
-using Cloud Shell, these tools are installed in your environment by default.
-
--   [gcloud](https://cloud.google.com/sdk/gcloud/)
--   [kubectl](https://kubernetes.io/docs/reference/kubectl/overview/)
--   [docker](https://docs.docker.com/install/)
--   [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
-
-Configure `gcloud` as a Docker credential helper:
-
-```shell
-gcloud auth configure-docker
-```
-
-You can install Kubeflow Pipelines in an existing GKE cluster or create a new GKE cluster. 
-
-* If you want to **create** a new Google GKE cluster, follow the instructions from the section [Create a GKE cluster](#create-gke-cluster) onwards.
-
-* If you have an **existing** GKE cluster, ensure that the cluster nodes have a minimum 3 node cluster with each node having a minimum of 2 vCPU and running k8s version 1.9 and follow the instructions from section [Install the application resource definition](#install-application-resource-definition) onwards.
-
-#### <a name="create-gke-cluster"></a>Create a GKE cluster
-
-Kubeflow Pipelines requires a minimum 3 node cluster with each node having a minimum of 2 vCPU and k8s version 1.9. Available machine types can be seen [here](https://cloud.google.com/compute/docs/machine-types).
-
-Create a new cluster from the command line:
-
-```shell
-export CLUSTER=kubeflow-pipelines-cluster
-export ZONE=us-west1-a
-export MACHINE_TYPE=n1-standard-2
-
-gcloud container clusters create "$CLUSTER" --zone "$ZONE" --machine-type "$MACHINE_TYPE"
-```
-
-Configure `kubectl` to connect to the new cluster:
-
-```shell
-gcloud container clusters get-credentials "$CLUSTER" --zone "$ZONE"
-```
-
-#### <a name="install-application-resource-definition"></a>Install the application resource definition
-
-An application resource is a collection of individual Kubernetes components,
-such as services, stateful sets, deployments, and so on, that you can manage as a group.
-
-To set up your cluster to understand application resources, run the following command:
-
-```shell
-kubectl apply -f "https://raw.githubusercontent.com/GoogleCloudPlatform/marketplace-k8s-app-tools/master/crd/app-crd.yaml"
-```
-
-You need to run this command once.
-
-The application resource is defined by the Kubernetes
-[SIG-apps](https://github.com/kubernetes/community/tree/master/sig-apps)
-community. The source code can be found on
-[github.com/kubernetes-sigs/application](https://github.com/kubernetes-sigs/application).
-
-#### Prerequisites for using Role-Based Access Control
-You must grant your user the ability to create roles in Kubernetes by running the following command. 
-
-```shell
-kubectl create clusterrolebinding cluster-admin-binding \
-  --clusterrole cluster-admin \
-  --user $(gcloud config get-value account)
-```
-
-You need to run this command once.
-
-
-### Install the Application
-
-#### Run installer script
-Set your application instance name and the Kubernetes namespace to deploy:
-
-```shell
-# set the application instance name
-export APP_INSTANCE_NAME=kubeflow-pipelines-app
-
-# set the Kubernetes namespace the application was originally installed
-export NAMESPACE=<namespace>
-```
-
-Creat the namespace
-```shell
-kubectl create namespace $NAMESPACE
-```
-
-Follow the [instruction](https://github.com/GoogleCloudPlatform/marketplace-k8s-app-tools/blob/master/docs/tool-prerequisites.md#tool-prerequisites) and install mpdev
-TODO: The official mpdev won't work because it doesn't have permission to deploy CRD. The latest unofficial build will have right permission. Remove following instruction when change is in prod.
-```
-BIN_FILE="$HOME/bin/mpdev"
-docker run gcr.io/cloud-marketplace-staging/marketplace-k8s-app-tools/k8s/dev:unreleased-pr396 cat /scripts/dev > "$BIN_FILE"
-chmod +x "$BIN_FILE"
-export MARKETPLACE_TOOLS_TAG=unreleased-pr396
-export MARKETPLACE_TOOLS_IMAGE=gcr.io/cloud-marketplace-staging/marketplace-k8s-app-tools/k8s/dev
-```
-
-Run the install script
-
-```shell
-mpdev scripts/install  --deployer=gcr.io/ml-pipeline/google/pipelines/deployer:0.1   --parameters='{"name": "'$APP_INSTANCE_NAME'", "namespace": "'$NAMESPACE'"}'
-
-```
-
-Watch the deployment come up with
-
-```shell
-kubectl get pods -n $NAMESPACE --watch
-```
-
-Get public endpoint
-```shell
-kubectl describe configmap inverse-proxy-config -n $NAMESPACE | grep googleusercontent.com
- 
-```
-
-# Delete the Application
-
-```shell
-kubectl delete applications -n $NAMESPACE $APP_INSTANCE_NAME
-```
+We prefer you use Google Cloud Platform Marketplace UI to deploy the application.
+If you really want to use command line, please follow the [guide](https://github.com/kubeflow/pipelines/blob/master/manifests/gcp_marketplace/cli.md).
diff --git a/manifests/gcp_marketplace/chart/kubeflow-pipelines/logo.png b/manifests/gcp_marketplace/chart/kubeflow-pipelines/logo.png
index 4b7bddb50a77..7a08e9c4f7ae 100644
Binary files a/manifests/gcp_marketplace/chart/kubeflow-pipelines/logo.png and b/manifests/gcp_marketplace/chart/kubeflow-pipelines/logo.png differ
diff --git a/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/application.yaml b/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/application.yaml
index b247450eeb5a..fef6747f6f51 100644
--- a/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/application.yaml
+++ b/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/application.yaml
@@ -23,9 +23,14 @@ spec:
     links:
       - description: 'Kubeflow Pipelines Documentation'
         url: https://www.kubeflow.org/docs/pipelines/
+    notes: |-
+      Please go to [Hosted Kubeflow Pipelines Console](https://console.cloud.google.com/ai-platform/pipelines/clusters).
+
   info:
     - name: Application Namespace
       value: {{ .Release.Namespace }}
+    - name: Console
+      value: 'https://console.cloud.google.com/ai-platform/pipelines/clusters'
   componentKinds:
     - group: apiextensions.k8s.io/v1beta1
       kind: CustomResourceDefinition
diff --git a/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/argo.yaml b/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/argo.yaml
index fa7a294a4ca6..33daec216fba 100644
--- a/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/argo.yaml
+++ b/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/argo.yaml
@@ -93,7 +93,7 @@ data:
     artifactRepository:
     {
         s3: {
-            bucket: mlpipeline,
+            bucket: '{{ if .Values.managedstorage.enabled }}{{ tpl .Values.managedstorage.gcsBucketName . }}{{ else }}mlpipeline{{ end }}',
             keyPrefix: artifacts,
             endpoint: minio-service.{{ .Release.Namespace }}:9000,
             insecure: true,
diff --git a/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/metadata.yaml b/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/metadata.yaml
index 28e1d7e37469..6a4497c8f98d 100644
--- a/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/metadata.yaml
+++ b/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/metadata.yaml
@@ -138,3 +138,5 @@ data:
   {{ end }}
   mysql_host: "mysql"
   mysql_port: "3306"
+  username: "root"
+  password: ""
diff --git a/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/pipeline.yaml b/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/pipeline.yaml
index d9b6644cc308..479aaaa67835 100644
--- a/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/pipeline.yaml
+++ b/manifests/gcp_marketplace/chart/kubeflow-pipelines/templates/pipeline.yaml
@@ -624,11 +624,7 @@ spec:
             # Following environment variables are only needed when using Cloud SQL and GCS.
             {{ if .Values.managedstorage.enabled }}
             - name: OBJECTSTORECONFIG_BUCKETNAME
-              {{ if .Values.managedstorage.databaseNamePrefix }}
-              value: '{{ printf "%s-%s" .Values.managedstorage.cloudsqlInstanceConnectionName .Values.managedstorage.databaseNamePrefix | replace ":" "-" | trunc 50 }}'
-              {{ else }}
-              value: '{{ printf "%s-%s" .Values.managedstorage.cloudsqlInstanceConnectionName .Release.Name | replace ":" "-" | trunc 50 }}'
-              {{ end }}
+              value: '{{ tpl .Values.managedstorage.gcsBucketName . }}'
             - name: DBCONFIG_DBNAME
               {{ if .Values.managedstorage.databaseNamePrefix }}
               value: '{{ .Values.managedstorage.databaseNamePrefix }}_pipeline'
diff --git a/manifests/gcp_marketplace/chart/kubeflow-pipelines/values.yaml b/manifests/gcp_marketplace/chart/kubeflow-pipelines/values.yaml
index dd69d7817882..0279e2e5af85 100644
--- a/manifests/gcp_marketplace/chart/kubeflow-pipelines/values.yaml
+++ b/manifests/gcp_marketplace/chart/kubeflow-pipelines/values.yaml
@@ -15,11 +15,17 @@ images:
   metadataenvoy: gcr.io/ml-pipeline/google/pipelines/metadataenvoy:0.1.31
 
 gcpSecretName: "user-gcp-sa"
-serviceAccountCredential: null
+serviceAccountCredential: ""
 
 managedstorage:
   enabled: false
   cloudsqlInstanceConnectionName: null
+  # gcsBucketName should be determined by cloudsqlInstanceConnectionName to make
+  # sure user is always using a valid pair of connection name + gcs bucket name.
+  #
+  # gcsBucketName is used in two places, so I wrote a template string here that
+  # can be evaluated in each place.
+  gcsBucketName: '{{ if .Values.managedstorage.databaseNamePrefix }}{{ printf "%s-%s" .Values.managedstorage.cloudsqlInstanceConnectionName .Values.managedstorage.databaseNamePrefix | replace ":" "-" | trunc 50 }}{{ else }}{{ printf "%s-%s" .Values.managedstorage.cloudsqlInstanceConnectionName .Release.Name | replace ":" "-" | trunc 50 }}{{ end }}'
   databaseNamePrefix: null
   dbUsername: 'root'
   dbPassword: ''
diff --git a/manifests/gcp_marketplace/cli.md b/manifests/gcp_marketplace/cli.md
new file mode 100644
index 000000000000..96dda614ddba
--- /dev/null
+++ b/manifests/gcp_marketplace/cli.md
@@ -0,0 +1,135 @@
+# Using the command line to deploy the application
+
+You can use [Google Cloud Shell](https://cloud.google.com/shell/) or a local
+workstation to complete these steps.
+
+
+[![Open in Cloud Shell](http://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https://github.com/kubeflow/pipelines&cloudshell_open_in_editor=README.md&cloudshell_working_dir=manifests/gcp_marketplace)
+
+
+## Prerequisites
+
+### Set up command-line tools
+
+You'll need the following tools in your development environment. If you are
+using Cloud Shell, these tools are installed in your environment by default.
+
+-   [gcloud](https://cloud.google.com/sdk/gcloud/)
+-   [kubectl](https://kubernetes.io/docs/reference/kubectl/overview/)
+-   [docker](https://docs.docker.com/install/)
+-   [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+
+Configure `gcloud` as a Docker credential helper:
+
+```shell
+gcloud auth configure-docker
+```
+
+You can install Kubeflow Pipelines in an existing GKE cluster or create a new GKE cluster.
+
+* If you want to **create** a new Google GKE cluster, follow the instructions from the section [Create a GKE cluster](#create-gke-cluster) onwards.
+
+* If you have an **existing** GKE cluster, ensure that the cluster nodes have a minimum 3 node cluster with each node having a minimum of 2 vCPU and running k8s version 1.9 and follow the instructions from section [Install the application resource definition](#install-application-resource-definition) onwards.
+
+### <a name="create-gke-cluster"></a>Create a GKE cluster
+
+Kubeflow Pipelines requires a minimum 3 node cluster with each node having a minimum of 2 vCPU and k8s version 1.9. Available machine types can be seen [here](https://cloud.google.com/compute/docs/machine-types).
+
+Create a new cluster from the command line:
+
+```shell
+export CLUSTER=kubeflow-pipelines-cluster
+export ZONE=us-west1-a
+export MACHINE_TYPE=n1-standard-2
+
+gcloud container clusters create "$CLUSTER" --zone "$ZONE" --machine-type "$MACHINE_TYPE"
+```
+
+Configure `kubectl` to connect to the new cluster:
+
+```shell
+gcloud container clusters get-credentials "$CLUSTER" --zone "$ZONE"
+```
+
+### <a name="install-application-resource-definition"></a>Install the application resource definition
+
+An application resource is a collection of individual Kubernetes components,
+such as services, stateful sets, deployments, and so on, that you can manage as a group.
+
+To set up your cluster to understand application resources, run the following command:
+
+```shell
+kubectl apply -f "https://raw.githubusercontent.com/GoogleCloudPlatform/marketplace-k8s-app-tools/master/crd/app-crd.yaml"
+```
+
+You need to run this command once.
+
+The application resource is defined by the Kubernetes
+[SIG-apps](https://github.com/kubernetes/community/tree/master/sig-apps)
+community. The source code can be found on
+[github.com/kubernetes-sigs/application](https://github.com/kubernetes-sigs/application).
+
+### Prerequisites for using Role-Based Access Control
+You must grant your user the ability to create roles in Kubernetes by running the following command.
+
+```shell
+kubectl create clusterrolebinding cluster-admin-binding \
+  --clusterrole cluster-admin \
+  --user $(gcloud config get-value account)
+```
+
+You need to run this command once.
+
+
+## Install the Application
+
+### Run installer script
+Set your application instance name and the Kubernetes namespace to deploy:
+
+```shell
+# set the application instance name
+export APP_INSTANCE_NAME=kubeflow-pipelines-app
+
+# set the Kubernetes namespace the application was originally installed
+export NAMESPACE=<namespace>
+```
+
+Creat the namespace
+```shell
+kubectl create namespace $NAMESPACE
+```
+
+Follow the [instruction](https://github.com/GoogleCloudPlatform/marketplace-k8s-app-tools/blob/master/docs/tool-prerequisites.md#tool-prerequisites) and install mpdev
+TODO: The official mpdev won't work because it doesn't have permission to deploy CRD. The latest unofficial build will have right permission. Remove following instruction when change is in prod.
+```
+BIN_FILE="$HOME/bin/mpdev"
+docker run gcr.io/cloud-marketplace-staging/marketplace-k8s-app-tools/k8s/dev:unreleased-pr396 cat /scripts/dev > "$BIN_FILE"
+chmod +x "$BIN_FILE"
+export MARKETPLACE_TOOLS_TAG=unreleased-pr396
+export MARKETPLACE_TOOLS_IMAGE=gcr.io/cloud-marketplace-staging/marketplace-k8s-app-tools/k8s/dev
+```
+
+Run the install script
+
+```shell
+mpdev scripts/install  --deployer=gcr.io/ml-pipeline/google/pipelines/deployer:0.1   --parameters='{"name": "'$APP_INSTANCE_NAME'", "namespace": "'$NAMESPACE'"}'
+
+```
+
+Watch the deployment come up with
+
+```shell
+kubectl get pods -n $NAMESPACE --watch
+```
+
+Get public endpoint
+```shell
+kubectl describe configmap inverse-proxy-config -n $NAMESPACE | grep googleusercontent.com
+
+```
+
+## Delete the Application
+
+```shell
+kubectl delete applications -n $NAMESPACE $APP_INSTANCE_NAME
+```
diff --git a/manifests/gcp_marketplace/deployer/Dockerfile b/manifests/gcp_marketplace/deployer/Dockerfile
index be9c9f5987fb..6d7deb0f6570 100644
--- a/manifests/gcp_marketplace/deployer/Dockerfile
+++ b/manifests/gcp_marketplace/deployer/Dockerfile
@@ -1 +1 @@
-FROM gcr.io/ml-pipeline/marketplace-k8s-app-tools/k8s/deployer_helm/onbuild:0829-pr396
\ No newline at end of file
+FROM gcr.io/ml-pipeline/marketplace-k8s-app-tools/k8s/deployer_helm/onbuild:remove-ui-ownerrefs
\ No newline at end of file
diff --git a/manifests/gcp_marketplace/guide.md b/manifests/gcp_marketplace/guide.md
index e342a9e2cffb..230b38719077 100644
--- a/manifests/gcp_marketplace/guide.md
+++ b/manifests/gcp_marketplace/guide.md
@@ -22,38 +22,55 @@ Click `Deploy` to start deploying Kubeflow Pipelines into the cluster you specif
 Deployment might take few minutes, so please be patient. After deployment is complete, go to the [Pipelines Console](http://pantheon.corp.google.com/ai-platform/pipelines) to access the Kubeflow Pipelines instance.
 
 ## GCP Service Account credentials
-After deployment, you can grant KFP proper permission by specifying its service account and binding
-proper role to it.
+If you run pipelines that requires calling any GCP services, such as Cloud Storage, Cloud ML Engine, Dataflow, or Dataproc, you need to set the [application default credential](https://cloud.google.com/docs/authentication/production#providing_credentials_to_your_application) to a pipeline step by mounting the proper [GCP service account](https://cloud.google.com/iam/docs/service-accounts) token as a [Kubernetes secret](https://kubernetes.io/docs/concepts/configuration/secret/).
 
-Usually a functional KFP pipeline requires a [GCP service account](https://cloud.google.com/iam/docs/service-accounts) to use for 
-authentication when calling other GCP services. This includes Cloud Storage as well as other services your pipeline might need, 
-for example Dataflow, Dataproc. Specify the base64-encoded credentials for the service account you want to use.
-
-This can be done through command line using `kubectl`.
+First point your `kubectl` current context to your cluster
 ```
+export PROJECT_ID=<my-project-id>
 export CLUSTER=<cluster-where-kfp-was-installed>
 export ZONE=<zone-where-kfp-was-installed>
 # Configure kubectl to connect with the cluster
-gcloud container clusters get-credentials "$CLUSTER" --zone "$ZONE"
+gcloud container clusters get-credentials "$CLUSTER" --zone "$ZONE" --project "$PROJECT_ID"
 ```
-Then you can create and inject service account credential.
+
+Then you can create a service account with the necessary IAM permissions
 ```
-export PROJECT=<my-project>
 export SA_NAME=<my-account>
+export NAMESPACE=<namespace-where-kfp-was-installed>
 # Create service account
-gcloud iam service-accounts create $SA_NAME --display-name $SA_NAME
-gcloud projects add-iam-policy-binding $PROJECT --member=serviceAccount:my-account@$PROJECT.iam.gserviceaccount.com --role=roles/storage.admin
-# Also do this binding for other roles you need. For example, dataproc.admin and dataflow.admin
-gcloud iam service-accounts keys create application_default_credentials.json --iam-account $SA_NAME@$PROJECT.iam.gserviceaccount.com
-export SERVICE_ACCOUNT_TOKEN="$(cat application_default_credentials.json | base64 -w 0)"
-echo -e "apiVersion: v1\nkind: Secret\nmetadata:\n  name: \"user-gcp-sa\"\n  namespace: \"${NAMESPACE}\"\n  labels:\n    app: gcp-sa\n    app.kubernetes.io/name: \"${APP_INSTANCE_NAME}\"\ntype: Opaque\ndata:\n  application_default_credentials.json: ${SERVICE_ACCOUNT_TOKEN}\n  user-gcp-sa.json: $SERVICE_ACCOUNT_TOKEN" > secret.yaml
-kubectl apply -f secret.yaml
-# Remove secret files
-rm application_default_credentials.json test.yaml
+gcloud iam service-accounts create $SA_NAME --display-name $SA_NAME --project "$PROJECT_ID"
+# Grant permissions to the service account by binding roles
+gcloud projects add-iam-policy-binding $PROJECT_ID \
+  --member=serviceAccount:$SA_NAME@$PROJECT_ID.iam.gserviceaccount.com \
+  --role=roles/storage.admin
+
+# Note that you can not bind multiple roles in one line.
+gcloud projects add-iam-policy-binding $PROJECT_ID \
+  --member=serviceAccount:$SA_NAME@$PROJECT_ID.iam.gserviceaccount.com \
+  --role=roles/ml.admin
+
+# More roles can be binded if your pipeline requires it.
+# --role=roles/dataproc.admin
+# --role=roles/dataflow.admin
 ```
 
-Note that the above commands use `base64 -w 0` to disable line wrapping, this could be slightly different
-across platforms.
+and store the service account credential as a Kubernetes secret `user-gcp-sa` in the cluster
+```
+# Create credential for the service account
+gcloud iam service-accounts keys create application_default_credentials.json --iam-account $SA_NAME@$PROJECT_ID.iam.gserviceaccount.com
+
+# Make sure the secret is created under the correct namespace.
+kubectl config set-context --current --namespace=$NAMESPACE
+
+# Attempt to create a k8s secret. If already exists, override.
+kubectl create secret generic user-gcp-sa \
+  --from-file=user-gcp-sa.json=application_default_credentials.json \
+  --dry-run -o yaml  |  kubectl apply -f -
+```
+Remove the private key file if needed
+```
+rm application_default_credentials.json
+```
 
 ## Tips
 
@@ -66,4 +83,44 @@ Possible reasons are:
 - the cluster is under upgrading
 - the new Kubeflow Pipeline instance is under deployment
 
-Wait for a while and then refresh.
\ No newline at end of file
+Wait for a while and then refresh.
+
+### Access Kubeflow Pipelines UI got forbidden
+It's possible you can access [Console](https://console.cloud.google.com/ai-platform/pipelines/clusters)
+but can't `Open Pipelines Dashboard`. It gives you following message:
+
+> forbidden
+
+Reason:
+- Others created the cluster and deployed the instances for you.
+- You don't have corresponding permission to access it.
+
+Actions:
+- Please ask admin to find out the Google Service Account used to create the cluster and then add your account as its `Service Account User` via [Service accounts](https://console.cloud.google.com/iam-admin/serviceaccounts). From the list table, check the
+service account, click the `Info Panel`, you will find a button `Add member` and add it
+as `Service Account User`. The Google Service Account is [Compute Engine default service account](https://cloud.google.com/compute/docs/access/service-accounts#compute_engine_service_account) if you didn't set it when creating the cluster.
+- Please also add your account as `Project Viewer` via [IAM](https://console.cloud.google.com/iam-admin/iam).
+
+For simplicity but not good for security, adding as `Project Editor` also can work.
+
+### Pipeline steps got insufficient permission
+If you see an error message stating that the pipeline got insufficient
+permissions, for example:
+
+```
+ Error executing an HTTP request: HTTP response code 403 with body '{
+ "error": {
+  "errors": [
+   {
+    "domain": "global",
+    "reason": "insufficientPermissions",
+    "message": "Insufficient Permission"
+   }
+  ],
+  "code": 403,
+  "message": "Insufficient Permission"
+ }
+}
+```
+please make sure following the procedure in [credential setup](#gcp-service-account-credentials). IAM configuration and/or
+ API enabling might take up to 5 mins to propagate. 
diff --git a/manifests/gcp_marketplace/schema.yaml b/manifests/gcp_marketplace/schema.yaml
index f45348039ff8..9cd7c90193c0 100644
--- a/manifests/gcp_marketplace/schema.yaml
+++ b/manifests/gcp_marketplace/schema.yaml
@@ -85,8 +85,8 @@ x-google-marketplace:
     resources:
     - replicas: 3
       requests:
-        cpu: 2
-        memory: 4Gi
+        cpu: 4
+        memory: 8Gi
       affinity:
         simpleNodeAffinity:
           type: REQUIRE_ONE_NODE_PER_REPLICA
@@ -100,20 +100,8 @@ properties:
     type: string
     x-google-marketplace:
       type: NAMESPACE
-  serviceAccountCredential:
-    title: |-
-     GCP Service Account credentials used to call other GCP services.
-    description: |-
-      This deployment requires a service account to use for authentication when calling other GCP services. 
-      Specify the base64-encoded credentials for the service account you want to use. 
-      You can get these credentials by running the following command in a terminal window. 
-      \"$ gcloud iam service-accounts keys create application_default_credentials.json --iam-account [your-service-account] && cat application_default_credentials.json | base64\"
-      If you are using Linux, please use \"base64 -w 0\" to disable line wrapping.
-    type: string
-    default: ""
-    x-google-marketplace:
-      type: STRING
+
 required:
   - name
   - namespace
-  - serviceAccountCredential
+
diff --git a/manifests/kustomize/base/crds/viewer-crd.yaml b/manifests/kustomize/base/crds/viewer-crd.yaml
index 4bec1167f7ca..dcb5db0f88a9 100644
--- a/manifests/kustomize/base/crds/viewer-crd.yaml
+++ b/manifests/kustomize/base/crds/viewer-crd.yaml
@@ -1,8 +1,6 @@
 apiVersion: apiextensions.k8s.io/v1beta1
 kind: CustomResourceDefinition
 metadata:
-  labels:
-    ksonnet.io/component: pipeline
   name: viewers.kubeflow.org
 spec:
   group: kubeflow.org
@@ -17,4 +15,4 @@ spec:
   versions:
   - name: v1beta1
     served: true
-    storage: true
\ No newline at end of file
+    storage: true
diff --git a/manifests/kustomize/base/kustomization.yaml b/manifests/kustomize/base/kustomization.yaml
index a7173a99e106..5a9fd35a6e76 100644
--- a/manifests/kustomize/base/kustomization.yaml
+++ b/manifests/kustomize/base/kustomization.yaml
@@ -10,16 +10,16 @@ bases:
 
 images:
 - name: gcr.io/ml-pipeline/api-server
-  newTag: 0.1.31
+  newTag: 0.1.34
 - name: gcr.io/ml-pipeline/persistenceagent
-  newTag: 0.1.31
+  newTag: 0.1.34
 - name: gcr.io/ml-pipeline/scheduledworkflow
-  newTag: 0.1.31
+  newTag: 0.1.34
 - name: gcr.io/ml-pipeline/frontend
-  newTag: 0.1.31
+  newTag: 0.1.34
 - name: gcr.io/ml-pipeline/viewer-crd-controller
-  newTag: 0.1.31
+  newTag: 0.1.34
 - name: gcr.io/ml-pipeline/inverse-proxy-agent
-  newTag: 0.1.31
+  newTag: 0.1.34
 - name: gcr.io/ml-pipeline/visualization-server
-  newTag: 0.1.31
+  newTag: 0.1.34
diff --git a/manifests/kustomize/base/pipeline/ml-pipeline-ui-rolebinding.yaml b/manifests/kustomize/base/pipeline/ml-pipeline-ui-rolebinding.yaml
index 22f8de2999a0..e82983542009 100644
--- a/manifests/kustomize/base/pipeline/ml-pipeline-ui-rolebinding.yaml
+++ b/manifests/kustomize/base/pipeline/ml-pipeline-ui-rolebinding.yaml
@@ -11,4 +11,3 @@ roleRef:
 subjects:
 - kind: ServiceAccount
   name: ml-pipeline-ui
-  namespace: kubeflow
\ No newline at end of file
diff --git a/manifests/kustomize/base/pipeline/pipeline-runner-role.yaml b/manifests/kustomize/base/pipeline/pipeline-runner-role.yaml
index 3edee9665802..e81fd91a53f0 100644
--- a/manifests/kustomize/base/pipeline/pipeline-runner-role.yaml
+++ b/manifests/kustomize/base/pipeline/pipeline-runner-role.yaml
@@ -72,3 +72,9 @@ rules:
   - jobs
   verbs:
   - '*'
+- apiGroups:
+  - machinelearning.seldon.io
+  resources:
+  - seldondeployments
+  verbs:
+  - '*'
diff --git a/release/OWNERS b/release/OWNERS
new file mode 100644
index 000000000000..7601a4a32492
--- /dev/null
+++ b/release/OWNERS
@@ -0,0 +1,30 @@
+approvers:
+  - IronPan
+  - paveldournov
+  - neuromage
+  - Ark-kun
+  - Bobgy
+  - rmgogogo
+  - james-jwu
+  - dushyanthsc
+  - SinaChavoshi
+  - hongye-sun
+  - numerology
+  - gaoning777
+  - jessiezcc
+  - jingzhang36
+reviewers:
+  - IronPan
+  - paveldournov
+  - neuromage
+  - Ark-kun
+  - Bobgy
+  - rmgogogo
+  - james-jwu
+  - dushyanthsc
+  - SinaChavoshi
+  - hongye-sun
+  - numerology
+  - gaoning777
+  - jessiezcc
+  - jingzhang36
\ No newline at end of file
diff --git a/release/RELEASE.md b/release/RELEASE.md
new file mode 100644
index 000000000000..7672797420fd
--- /dev/null
+++ b/release/RELEASE.md
@@ -0,0 +1,9 @@
+# Current version under development
+* Added a release note.
+## Major features and improvements
+
+## Bug fixes and other changes
+
+### Deprecations
+
+## Breaking changes
\ No newline at end of file
diff --git a/samples/OWNERS b/samples/OWNERS
index c69f208eab68..fdeff11f9e44 100644
--- a/samples/OWNERS
+++ b/samples/OWNERS
@@ -2,6 +2,7 @@ approvers:
   - Ark-kun
   - gaoning777
   - hongye-sun
+  - numerology
 reviewers:
   - Ark-kun
   - gaoning777
diff --git a/samples/README.md b/samples/README.md
index e4d453d9003a..1558a1469a43 100644
--- a/samples/README.md
+++ b/samples/README.md
@@ -75,11 +75,11 @@ For better readability and integrations with the sample test infrastructure, sam
 * The sample file should be either `*.py` or `*.ipynb`, and its file name is consistent with its directory name.
 * For `*.py` sample, it's recommended to have a main invoking `kfp.compiler.Compiler().compile()` to compile the 
 pipeline function into pipeline yaml spec.
-* For `*.ipynb` sample, parameters (e.g., `experiment_name` and `project_name`)
+* For `*.ipynb` sample, parameters (e.g., `project_name`)
 should be defined in a dedicated cell and tagged as parameter. 
 (If the author would like the sample test infra to run it by setting the `run_pipeline` flag to True in 
-the associated `config.yaml` file, the sample test infra will expect a parameter `experiment_name`
-to inject so that it can run in the sample test experiment.)
+the associated `config.yaml` file, the sample test infra will expect the sample to use the
+`kfp.Client().create_run_from_pipeline_func` method for starting the run so that the sample test can watch the run.)
 Detailed guideline is 
 [here](https://github.com/nteract/papermill). Also, all the environment setup and 
 preparation should be within the notebook, such as by `!pip install packages` 
diff --git a/samples/contrib/arena-samples/standalonejob/standalone_pipeline.ipynb b/samples/contrib/arena-samples/standalonejob/standalone_pipeline.ipynb
index 1db4df1270b5..353001f2ecd8 100644
--- a/samples/contrib/arena-samples/standalonejob/standalone_pipeline.ipynb
+++ b/samples/contrib/arena-samples/standalonejob/standalone_pipeline.ipynb
@@ -48,7 +48,6 @@
     "\n",
     "**Please fill in the below environment variables with you own settings.**\n",
     "\n",
-    "- **EXPERIMENT_NAME**: A unique experiment name that will be created for this notebook demo.\n",
     "- **KFP_PACKAGE**: The latest release of kubeflow pipeline platform library.\n",
     "- **KUBEFLOW_PIPELINE_LINK**: The link to access the KubeFlow pipeline API.\n",
     "- **MOUNT**: The mount configuration to map data above into the training job. The format is 'data:/directory'\n",
@@ -61,8 +60,6 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "EXPERIMENT_NAME = 'myjob'\n",
-    "RUN_ID=\"run\"\n",
     "KFP_SERVICE=\"ml-pipeline.kubeflow.svc.cluster.local:8888\"\n",
     "KFP_PACKAGE = 'http://kubeflow.oss-cn-beijing.aliyuncs.com/kfp/0.1.14/kfp.tar.gz'\n",
     "KFP_ARENA_PACKAGE = 'http://kubeflow.oss-cn-beijing.aliyuncs.com/kfp-arena/kfp-arena-0.3.tar.gz'\n",
diff --git a/samples/contrib/ibm-samples/ffdl-seldon/ffdl_pipeline.ipynb b/samples/contrib/ibm-samples/ffdl-seldon/ffdl_pipeline.ipynb
index 3dcf85e772fd..44f41334dd39 100644
--- a/samples/contrib/ibm-samples/ffdl-seldon/ffdl_pipeline.ipynb
+++ b/samples/contrib/ibm-samples/ffdl-seldon/ffdl_pipeline.ipynb
@@ -90,10 +90,7 @@
     "# KUBEFLOW_PIPELINE_LINK = ''\n",
     "# client = kfp.Client(KUBEFLOW_PIPELINE_LINK)\n",
     "\n",
-    "client = kfp.Client()\n",
-    "\n",
-    "\n",
-    "EXPERIMENT_NAME = 'FfDL-Seldon Experiments'"
+    "client = kfp.Client()\n"
    ]
   },
   {
@@ -179,7 +176,7 @@
     "            'model-class-file': 'gender_classification.py'}\n",
     "\n",
     "\n",
-    "run = client.create_run_from_pipeline_func(ffdlPipeline, arguments=parameters, experiment_name=EXPERIMENT_NAME).run_info\n",
+    "run = client.create_run_from_pipeline_func(ffdlPipeline, arguments=parameters).run_info\n",
     "\n",
     "import IPython\n",
     "html = ('<p id=\"link\"> </p> <script> document.getElementById(\"link\").innerHTML = \"Actual Run link <a href=//\" + location.hostname + \"%s/#/runs/details/%s target=_blank >here</a>\"; </script>'\n",
diff --git a/samples/contrib/ibm-samples/watson/watson_train_serve_pipeline.py b/samples/contrib/ibm-samples/watson/watson_train_serve_pipeline.py
index 0d4621f5aec4..23a5f0ac22c9 100644
--- a/samples/contrib/ibm-samples/watson/watson_train_serve_pipeline.py
+++ b/samples/contrib/ibm-samples/watson/watson_train_serve_pipeline.py
@@ -36,9 +36,9 @@ def kfp_wml_pipeline(
     train_code='tf-model.zip',
     execution_command='\'python3 convolutional_network.py --trainImagesFile ${DATA_DIR}/train-images-idx3-ubyte.gz --trainLabelsFile ${DATA_DIR}/train-labels-idx1-ubyte.gz --testImagesFile ${DATA_DIR}/t10k-images-idx3-ubyte.gz --testLabelsFile ${DATA_DIR}/t10k-labels-idx1-ubyte.gz --learningRate 0.001 --trainingIters 20000\'',
     framework= 'tensorflow',
-    framework_version = '1.5',
+    framework_version = '1.13',
     runtime = 'python',
-    runtime_version = '3.5',
+    runtime_version = '3.6',
     run_definition = 'wml-tensorflow-definition',
     run_name = 'wml-tensorflow-run',
     model_name='wml-tensorflow-mnist',
diff --git a/samples/contrib/image-captioning-gcp/Image Captioning TF 2.0.ipynb b/samples/contrib/image-captioning-gcp/Image Captioning TF 2.0.ipynb
index 0d72d06b1bde..5a8a27259a51 100644
--- a/samples/contrib/image-captioning-gcp/Image Captioning TF 2.0.ipynb	
+++ b/samples/contrib/image-captioning-gcp/Image Captioning TF 2.0.ipynb	
@@ -135,7 +135,6 @@
    "outputs": [],
    "source": [
     "# Kubeflow project settings\n",
-    "EXPERIMENT_NAME = 'Image Captioning'\n",
     "PROJECT_NAME = '[YOUR-PROJECT-NAME]' \n",
     "PIPELINE_STORAGE_PATH = GCS_BUCKET + '/ms-coco/components' # path to save pipeline component images\n",
     "BASE_IMAGE = 'gcr.io/%s/img-cap:latest' % PROJECT_NAME # using image created in README instructions\n",
@@ -913,7 +912,7 @@
     "    'training_batch_size': 16, # has to be smaller since only training on 80/100 examples \n",
     "}\n",
     "\n",
-    "kfp.Client().create_run_from_pipeline_func(pipeline, arguments=arguments, experiment_name=EXPERIMENT_NAME)"
+    "kfp.Client().create_run_from_pipeline_func(pipeline, arguments=arguments)"
    ]
   },
   {
diff --git a/samples/contrib/parameterized_tfx_oss/README.md b/samples/contrib/parameterized_tfx_oss/README.md
new file mode 100644
index 000000000000..7e4a651e33c8
--- /dev/null
+++ b/samples/contrib/parameterized_tfx_oss/README.md
@@ -0,0 +1,45 @@
+# Overview
+
+[Tensorflow Extended (TFX)](https://github.com/tensorflow/tfx) is a Google-production-scale machine
+learning platform based on TensorFlow. It provides a configuration framework to express ML pipelines
+consisting of TFX components. Kubeflow Pipelines can be used as the orchestrator supporting the 
+execution of a TFX pipeline.
+
+This sample demonstrates how to author a ML pipeline in TFX and run it on a KFP deployment. 
+Please refer to inline comments for the purpose of each step.
+
+In order to successfully compile this sample, you'll need to have a TFX installation at HEAD.
+First, you can clone their repo and run `python setup.py install` from `tfx/`. 
+The image used in the pipeline is specified as `tfx_image` in the 
+`KubeflowDagRunnerConfig`. Please make sure you use the latest TFX build so that visualization support is included.
+List of officially released nightly build image available can be found [here](https://hub.docker.com/r/tensorflow/tfx/tags)).
+
+After that, running 
+`python3 chicago_taxi_pipeline_simple.py` compiles the TFX pipeline into KFP pipeline package.
+
+# Permission
+
+This pipeline requires Google Cloud Storage permission to run. 
+If KFP was deployed through K8S marketplace, please follow instructions in [the guideline](https://github.com/kubeflow/pipelines/blob/master/manifests/gcp_marketplace/guide.md#gcp-service-account-credentials)
+to make sure the service account has `storage.admin` role.
+
+## Caveats
+
+This sample uses pipeline parameters in a TFX pipeline, which is not yet fully supported. 
+See [here](https://github.com/tensorflow/tfx/issues/362) for more details. In this sample, however,
+the path to module file and path to data are parameterized. This is achieved by specifying those
+objects `dsl.PipelineParam` and appending them to the `KubeflowDagRunner._params`. Then, 
+KubeflowDagRunner can correctly identify those pipeline parameters and interpret them as Argo
+placeholder correctly when compilation. However, this parameterization approach is a hack and 
+we do not have plan for long-term support. Instead we're working with TFX team to support 
+pipeline parameterization using their [RuntimeParameter](https://github.com/tensorflow/tfx/blob/46bb4f975c36ea1defde4b3c33553e088b3dc5b8/tfx/orchestration/data_types.py#L108). 
+### Known issues
+* This approach only works for string-typed quantities. For example, you cannot parameterize 
+`num_steps` of `Trainer` in this way.
+* Name of parameters should be unique.
+* By default pipeline root is always parameterized with the name `pipeline-root`.
+* If the parameter is referenced at multiple places, the user should
+make sure that it is correctly converted to the string-formatted placeholder by
+calling `str(your_param)`.
+* The best practice is to specify TFX pipeline root to an empty dir. In this sample Argo automatically do that by plugging in the 
+workflow unique ID (represented `kfp.dsl.RUN_ID_PLACEHOLDER`) to the pipeline root path.
diff --git a/samples/contrib/parameterized_tfx_oss/parameterized_tfx_oss.py b/samples/contrib/parameterized_tfx_oss/parameterized_tfx_oss.py
new file mode 100644
index 000000000000..529fea0ab026
--- /dev/null
+++ b/samples/contrib/parameterized_tfx_oss/parameterized_tfx_oss.py
@@ -0,0 +1,139 @@
+#!/usr/bin/env python3
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import argparse
+import os
+import tensorflow as tf
+
+from typing import Text
+
+import kfp
+from kfp import dsl
+from tfx.components.evaluator.component import Evaluator
+from tfx.components.example_gen.csv_example_gen.component import CsvExampleGen
+from tfx.components.example_validator.component import ExampleValidator
+from tfx.components.model_validator.component import ModelValidator
+from tfx.components.pusher.component import Pusher
+from tfx.components.schema_gen.component import SchemaGen
+from tfx.components.statistics_gen.component import StatisticsGen
+from tfx.components.trainer.component import Trainer
+from tfx.components.transform.component import Transform
+from tfx.orchestration import metadata
+from tfx.orchestration import pipeline
+from tfx.orchestration.kubeflow import kubeflow_dag_runner
+from tfx.proto import evaluator_pb2
+from tfx.utils.dsl_utils import csv_input
+from tfx.proto import pusher_pb2
+from tfx.proto import trainer_pb2
+from tfx.extensions.google_cloud_ai_platform.trainer import executor as ai_platform_trainer_executor
+from ml_metadata.proto import metadata_store_pb2
+from tfx.orchestration.kubeflow.proto import kubeflow_pb2
+
+# Define pipeline params used for pipeline execution.
+# Path to the module file, should be a GCS path.
+_taxi_module_file_param = dsl.PipelineParam(
+    name='module-file',
+    value='gs://ml-pipeline-playground/tfx_taxi_simple/modules/taxi_utils.py')
+
+# Path to the CSV data file, under which their should be a data.csv file.
+_data_root_param = dsl.PipelineParam(
+    name='data-root',
+    value='gs://ml-pipeline-playground/tfx_taxi_simple/data')
+
+# Path of pipeline root, should be a GCS path.
+pipeline_root = os.path.join('gs://your-bucket', 'tfx_taxi_simple', kfp.dsl.RUN_ID_PLACEHOLDER)
+
+def _create_test_pipeline(pipeline_root: Text, csv_input_location: Text,
+    taxi_module_file: Text, enable_cache: bool):
+  """Creates a simple Kubeflow-based Chicago Taxi TFX pipeline.
+
+  Args:
+    pipeline_name: The name of the pipeline.
+    pipeline_root: The root of the pipeline output.
+    csv_input_location: The location of the input data directory.
+    taxi_module_file: The location of the module file for Transform/Trainer.
+    enable_cache: Whether to enable cache or not.
+
+  Returns:
+    A logical TFX pipeline.Pipeline object.
+  """
+  examples = csv_input(csv_input_location)
+
+  example_gen = CsvExampleGen(input_base=examples)
+  statistics_gen = StatisticsGen(input_data=example_gen.outputs.examples)
+  infer_schema = SchemaGen(
+      stats=statistics_gen.outputs.output, infer_feature_shape=False)
+  validate_stats = ExampleValidator(
+      stats=statistics_gen.outputs.output, schema=infer_schema.outputs.output)
+  transform = Transform(
+      input_data=example_gen.outputs.examples,
+      schema=infer_schema.outputs.output,
+      module_file=taxi_module_file)
+  trainer = Trainer(
+      module_file=taxi_module_file,
+      transformed_examples=transform.outputs.transformed_examples,
+      schema=infer_schema.outputs.output,
+      transform_output=transform.outputs.transform_output,
+      train_args=trainer_pb2.TrainArgs(num_steps=10),
+      eval_args=trainer_pb2.EvalArgs(num_steps=5))
+  model_analyzer = Evaluator(
+      examples=example_gen.outputs.examples,
+      model_exports=trainer.outputs.output,
+      feature_slicing_spec=evaluator_pb2.FeatureSlicingSpec(specs=[
+        evaluator_pb2.SingleSlicingSpec(
+            column_for_slicing=['trip_start_hour'])
+      ]))
+  model_validator = ModelValidator(
+      examples=example_gen.outputs.examples, model=trainer.outputs.output)
+
+  # Hack: ensuring push_destination can be correctly parameterized and interpreted.
+  # pipeline root will be specified as a dsl.PipelineParam with the name
+  # pipeline-root, see:
+  # https://github.com/tensorflow/tfx/blob/1c670e92143c7856f67a866f721b8a9368ede385/tfx/orchestration/kubeflow/kubeflow_dag_runner.py#L226
+  _pipeline_root_param = dsl.PipelineParam(name='pipeline-root')
+  pusher = Pusher(
+      model_export=trainer.outputs.output,
+      model_blessing=model_validator.outputs.blessing,
+      push_destination=pusher_pb2.PushDestination(
+          filesystem=pusher_pb2.PushDestination.Filesystem(
+              base_directory=os.path.join(str(_pipeline_root_param), 'model_serving'))))
+
+  return pipeline.Pipeline(
+      pipeline_name='parameterized_tfx_oss',
+      pipeline_root=pipeline_root,
+      components=[
+        example_gen, statistics_gen, infer_schema, validate_stats, transform,
+        trainer, model_analyzer, model_validator, pusher
+      ],
+      enable_cache=enable_cache,
+  )
+
+
+if __name__ == '__main__':
+
+  enable_cache = True
+  pipeline = _create_test_pipeline(
+    pipeline_root,
+    str(_data_root_param),
+    str(_taxi_module_file_param),
+    enable_cache=enable_cache)
+  config = kubeflow_dag_runner.KubeflowDagRunnerConfig(
+    kubeflow_metadata_config=kubeflow_dag_runner.get_default_kubeflow_metadata_config(),
+    tfx_image='tensorflow/tfx:0.16.0.dev20191101')
+  kfp_runner = kubeflow_dag_runner.KubeflowDagRunner(config=config)
+  # Make sure kfp_runner recognizes those parameters.
+  kfp_runner._params.extend([_data_root_param, _taxi_module_file_param])
+
+  kfp_runner.run(pipeline)
diff --git a/samples/contrib/parameterized_tfx_oss/parameterized_tfx_oss.tar.gz b/samples/contrib/parameterized_tfx_oss/parameterized_tfx_oss.tar.gz
new file mode 100644
index 000000000000..ea46d89bca08
Binary files /dev/null and b/samples/contrib/parameterized_tfx_oss/parameterized_tfx_oss.tar.gz differ
diff --git a/samples/core/ai-platform/README.md b/samples/core/ai_platform/README.md
similarity index 100%
rename from samples/core/ai-platform/README.md
rename to samples/core/ai_platform/README.md
diff --git a/samples/core/ai-platform/Chicago Crime Pipeline.ipynb b/samples/core/ai_platform/ai_platform.ipynb
similarity index 73%
rename from samples/core/ai-platform/Chicago Crime Pipeline.ipynb
rename to samples/core/ai_platform/ai_platform.ipynb
index 9ad290b653a1..dc55d2c070af 100644
--- a/samples/core/ai-platform/Chicago Crime Pipeline.ipynb	
+++ b/samples/core/ai_platform/ai_platform.ipynb
@@ -31,9 +31,8 @@
     "%%capture\n",
     "\n",
     "# Install the SDK (Uncomment the code if the SDK is not installed before)\n",
-    "!pip3 install --upgrade pip -q\n",
-    "!pip3 install kfp --upgrade -q\n",
-    "!pip3 install pandas --upgrade -q"
+    "!python3 -m pip install 'kfp>=0.1.31' --quiet\n",
+    "!python3 -m pip install pandas --upgrade -q"
    ]
   },
   {
@@ -71,28 +70,36 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "tags": [
+     "parameters"
+    ]
+   },
    "outputs": [],
    "source": [
     "# Required Parameters\n",
-    "PROJECT_ID = '<ADD GCP PROJECT HERE>'\n",
-    "GCS_WORKING_DIR = 'gs://<ADD STORAGE LOCATION HERE>' # No ending slash\n",
-    "\n",
+    "project_id = '<ADD GCP PROJECT HERE>'\n",
+    "output = 'gs://<ADD STORAGE LOCATION HERE>' # No ending slash\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
     "# Optional Parameters\n",
     "REGION = 'us-central1'\n",
     "RUNTIME_VERSION = '1.13'\n",
     "PACKAGE_URIS=json.dumps(['gs://chicago-crime/chicago_crime_trainer-0.0.tar.gz'])\n",
-    "TRAINER_OUTPUT_GCS_PATH = GCS_WORKING_DIR + '/train/output/' + str(int(time.time())) + '/'\n",
-    "DATA_GCS_PATH = GCS_WORKING_DIR + '/reports.csv'\n",
+    "TRAINER_OUTPUT_GCS_PATH = output + '/train/output/' + str(int(time.time())) + '/'\n",
+    "DATA_GCS_PATH = output + '/reports.csv'\n",
     "PYTHON_MODULE = 'trainer.task'\n",
-    "TRAINER_ARGS =  json.dumps([\n",
-    "    '--data-file-url', DATA_GCS_PATH,\n",
-    "    '--job-dir', GCS_WORKING_DIR\n",
-    "])\n",
-    "EXPERIMENT_NAME = 'Chicago Crime Prediction'\n",
     "PIPELINE_NAME = 'Chicago Crime Prediction'\n",
     "PIPELINE_FILENAME_PREFIX = 'chicago'\n",
-    "PIPELINE_DESCRIPTION = ''"
+    "PIPELINE_DESCRIPTION = ''\n",
+    "MODEL_NAME = 'chicago_pipeline_model' + str(int(time.time()))\n",
+    "MODEL_VERSION = 'chicago_pipeline_model_v1' + str(int(time.time()))"
    ]
   },
   {
@@ -111,7 +118,7 @@
    "outputs": [],
    "source": [
     "bigquery_query_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/bigquery/query/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/bigquery/query/component.yaml')\n",
     "\n",
     "QUERY = \"\"\"\n",
     "    SELECT count(*) as count, TIMESTAMP_TRUNC(date, DAY) as day\n",
@@ -147,7 +154,7 @@
    "outputs": [],
    "source": [
     "mlengine_train_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/ml_engine/train/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/ml_engine/train/component.yaml')\n",
     "\n",
     "def train(project_id,\n",
     "          trainer_args,\n",
@@ -157,7 +164,7 @@
     "          region,\n",
     "          python_module,\n",
     "          runtime_version):\n",
-    "        \n",
+    "\n",
     "    return mlengine_train_op(\n",
     "        project_id=project_id, \n",
     "        python_module=python_module,\n",
@@ -185,18 +192,20 @@
    "outputs": [],
    "source": [
     "mlengine_deploy_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/ml_engine/deploy/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/ml_engine/deploy/component.yaml')\n",
     "\n",
     "def deploy(\n",
     "    project_id,\n",
     "    model_uri,\n",
     "    model_id,\n",
+    "    model_version,\n",
     "    runtime_version):\n",
     "    \n",
     "    return mlengine_deploy_op(\n",
     "        model_uri=model_uri,\n",
     "        project_id=project_id, \n",
     "        model_id=model_id, \n",
+    "        version_id=model_version, \n",
     "        runtime_version=runtime_version, \n",
     "        replace_existing_version=True, \n",
     "        set_default=True).apply(gcp.use_gcp_secret('user-gcp-sa'))"
@@ -222,30 +231,35 @@
     "\n",
     "def pipeline(\n",
     "    data_gcs_path=DATA_GCS_PATH,\n",
-    "    gcs_working_dir=GCS_WORKING_DIR,\n",
-    "    project_id=PROJECT_ID,\n",
+    "    gcs_working_dir=output,\n",
+    "    project_id=project_id,\n",
     "    python_module=PYTHON_MODULE,\n",
     "    region=REGION,\n",
     "    runtime_version=RUNTIME_VERSION,\n",
     "    package_uris=PACKAGE_URIS,\n",
     "    trainer_output_gcs_path=TRAINER_OUTPUT_GCS_PATH,\n",
-    "    trainer_args=TRAINER_ARGS,\n",
     "):      \n",
     "    download_task = download(project_id,\n",
     "                             data_gcs_path)\n",
     "\n",
     "    train_task = train(project_id,\n",
-    "                       trainer_args,\n",
+    "                       json.dumps(\n",
+    "                           ['--data-file-url',\n",
+    "                            '%s' % download_task.outputs['output_gcs_path'],\n",
+    "                            '--job-dir',\n",
+    "                            output]\n",
+    "                       ),\n",
     "                       package_uris,\n",
     "                       trainer_output_gcs_path,\n",
     "                       gcs_working_dir,\n",
     "                       region,\n",
     "                       python_module,\n",
-    "                       runtime_version).after(download_task)\n",
+    "                       runtime_version)\n",
     "    \n",
     "    deploy_task = deploy(project_id,\n",
     "                         train_task.outputs['job_dir'],\n",
-    "                         train_task.outputs['job_id'],\n",
+    "                         MODEL_NAME,\n",
+    "                         MODEL_VERSION,\n",
     "                         runtime_version)    \n",
     "    return True\n",
     "\n",
@@ -266,11 +280,45 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "kfp.Client().create_run_from_pipeline_func(pipeline, arguments={}, experiment_name=EXPERIMENT_NAME)"
+    "pipeline = kfp.Client().create_run_from_pipeline_func(pipeline, arguments={})"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Wait for the pipeline to finish"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pipeline.wait_for_run_completion(timeout=1800)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Clean models"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "!gcloud ml-engine versions delete $MODEL_VERSION --model $MODEL_NAME\n",
+    "!gcloud ml-engine models delete $MODEL_NAME"
    ]
   }
  ],
  "metadata": {
+  "celltoolbar": "Tags",
   "kernelspec": {
    "display_name": "Python 3",
    "language": "python",
@@ -286,7 +334,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.8"
+   "version": "3.6.7"
   },
   "pycharm": {
    "stem_cell": {
diff --git a/samples/core/ai-platform/images/chicago_crime_pipeline.png b/samples/core/ai_platform/images/chicago_crime_pipeline.png
similarity index 100%
rename from samples/core/ai-platform/images/chicago_crime_pipeline.png
rename to samples/core/ai_platform/images/chicago_crime_pipeline.png
diff --git a/samples/core/ai-platform/images/chicago_crime_predictions.png b/samples/core/ai_platform/images/chicago_crime_predictions.png
similarity index 100%
rename from samples/core/ai-platform/images/chicago_crime_predictions.png
rename to samples/core/ai_platform/images/chicago_crime_predictions.png
diff --git a/samples/core/ai-platform/local/Chicago Crime Research.ipynb b/samples/core/ai_platform/local/Chicago Crime Research.ipynb
similarity index 100%
rename from samples/core/ai-platform/local/Chicago Crime Research.ipynb
rename to samples/core/ai_platform/local/Chicago Crime Research.ipynb
diff --git a/samples/core/ai-platform/training/.gitignore b/samples/core/ai_platform/training/.gitignore
similarity index 100%
rename from samples/core/ai-platform/training/.gitignore
rename to samples/core/ai_platform/training/.gitignore
diff --git a/samples/core/ai-platform/training/.python-version b/samples/core/ai_platform/training/.python-version
similarity index 100%
rename from samples/core/ai-platform/training/.python-version
rename to samples/core/ai_platform/training/.python-version
diff --git a/samples/core/ai-platform/training/requirements.txt b/samples/core/ai_platform/training/requirements.txt
similarity index 100%
rename from samples/core/ai-platform/training/requirements.txt
rename to samples/core/ai_platform/training/requirements.txt
diff --git a/samples/core/ai-platform/training/setup.py b/samples/core/ai_platform/training/setup.py
similarity index 100%
rename from samples/core/ai-platform/training/setup.py
rename to samples/core/ai_platform/training/setup.py
diff --git a/samples/core/ai-platform/training/trainer/model.py b/samples/core/ai_platform/training/trainer/model.py
similarity index 100%
rename from samples/core/ai-platform/training/trainer/model.py
rename to samples/core/ai_platform/training/trainer/model.py
diff --git a/samples/core/ai-platform/training/trainer/task.py b/samples/core/ai_platform/training/trainer/task.py
similarity index 100%
rename from samples/core/ai-platform/training/trainer/task.py
rename to samples/core/ai_platform/training/trainer/task.py
diff --git a/samples/core/ai-platform/training/trainer/util.py b/samples/core/ai_platform/training/trainer/util.py
similarity index 100%
rename from samples/core/ai-platform/training/trainer/util.py
rename to samples/core/ai_platform/training/trainer/util.py
diff --git a/samples/core/component_build/component_build.ipynb b/samples/core/container_build/container_build.ipynb
similarity index 96%
rename from samples/core/component_build/component_build.ipynb
rename to samples/core/container_build/container_build.ipynb
index 297945fce6df..d75cb5919502 100644
--- a/samples/core/component_build/component_build.ipynb
+++ b/samples/core/container_build/container_build.ipynb
@@ -30,14 +30,14 @@
    "outputs": [],
    "source": [
     "# Install Pipeline SDK - This only needs to be ran once in the enviroment. \n",
-    "!pip3 install kfp --upgrade --quiet"
+    "!python3 -m pip install 'kfp>=0.1.31' --quiet\n"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "# KubeFlow Pipelines basic component build \n",
+    "# KubeFlow Pipelines - Container building\n",
     "\n",
     "In this notebook, we will demo: \n",
     "\n",
@@ -65,7 +65,6 @@
    },
    "outputs": [],
    "source": [
-    "experiment_name = 'container_building'"
    ]
   },
   {
@@ -202,7 +201,7 @@
    "outputs": [],
    "source": [
     "arguments = {'a': '7', 'b': '8'}\n",
-    "kfp.Client().create_run_from_pipeline_func(pipeline_func=calc_pipeline, arguments=arguments, experiment_name=experiment_name)\n",
+    "kfp.Client().create_run_from_pipeline_func(pipeline_func=calc_pipeline, arguments=arguments)\n",
     "\n",
     "# This should output link that leads to the run information page. \n",
     "# Note: There is a bug in JupyterLab that modifies the URL and makes the link stop working"
diff --git a/samples/core/component_build/requirements.txt b/samples/core/container_build/requirements.txt
similarity index 100%
rename from samples/core/component_build/requirements.txt
rename to samples/core/container_build/requirements.txt
diff --git a/samples/core/dataflow/dataflow.ipynb b/samples/core/dataflow/dataflow.ipynb
index 241ccbf0dff2..778c58173c72 100644
--- a/samples/core/dataflow/dataflow.ipynb
+++ b/samples/core/dataflow/dataflow.ipynb
@@ -74,8 +74,7 @@
    "outputs": [],
    "source": [
     "project = 'Input your PROJECT ID'\n",
-    "output = 'Input your GCS bucket name' # No ending slash\n",
-    "experiment_name = 'Dataflow - Launch Python'"
+    "output = 'Input your GCS bucket name' # No ending slash\n"
    ]
   },
   {
@@ -95,8 +94,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "%%capture --no-stderr\n",
-    "!pip3 install kfp --upgrade"
+    "!python3 -m pip install 'kfp>=0.1.31' --quiet\n"
    ]
   },
   {
@@ -137,7 +135,7 @@
     "import kfp.components as comp\n",
     "\n",
     "dataflow_python_op = comp.load_component_from_url(\n",
-    "    'https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/gcp/dataflow/launch_python/component.yaml')\n",
+    "    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataflow/launch_python/component.yaml')\n",
     "help(dataflow_python_op)"
    ]
   },
@@ -368,7 +366,7 @@
     }
    ],
    "source": [
-    "kfp.Client().create_run_from_pipeline_func(pipeline, arguments={}, experiment_name=experiment_name)"
+    "kfp.Client().create_run_from_pipeline_func(pipeline, arguments={})"
    ]
   },
   {
diff --git a/samples/core/dsl_static_type_checking/dsl_static_type_checking.ipynb b/samples/core/dsl_static_type_checking/dsl_static_type_checking.ipynb
index 64ef3b6bb9cb..32cc93a4bd09 100644
--- a/samples/core/dsl_static_type_checking/dsl_static_type_checking.ipynb
+++ b/samples/core/dsl_static_type_checking/dsl_static_type_checking.ipynb
@@ -162,7 +162,7 @@
     }
    ],
    "source": [
-    "!pip3 install kfp --upgrade"
+    "!python3 -m pip install 'kfp>=0.1.31' --quiet\n"
    ]
   },
   {
diff --git a/samples/core/exit_handler/exit_handler.py b/samples/core/exit_handler/exit_handler.py
index 8adec022ff72..aa8488ebdf6b 100755
--- a/samples/core/exit_handler/exit_handler.py
+++ b/samples/core/exit_handler/exit_handler.py
@@ -36,7 +36,6 @@ def echo_op(text, is_exit_handler=False):
         image='library/bash:4.4.23',
         command=['sh', '-c'],
         arguments=['echo "$0"', text],
-        is_exit_handler=is_exit_handler
     )
 
 
@@ -47,7 +46,7 @@ def echo_op(text, is_exit_handler=False):
 def download_and_print(url='gs://ml-pipeline-playground/shakespeare1.txt'):
     """A sample pipeline showing exit handler."""
 
-    exit_task = echo_op('exit!', is_exit_handler=True)
+    exit_task = echo_op('exit!')
 
     with dsl.ExitHandler(exit_task):
         download_task = gcs_download_op(url)
diff --git a/samples/core/kubeflow_tf_serving/kubeflow_tf_serving.ipynb b/samples/core/kubeflow_tf_serving/kubeflow_tf_serving.ipynb
index d830a6507b8b..33a70d6ae747 100644
--- a/samples/core/kubeflow_tf_serving/kubeflow_tf_serving.ipynb
+++ b/samples/core/kubeflow_tf_serving/kubeflow_tf_serving.ipynb
@@ -132,7 +132,7 @@
    ],
    "source": [
     "# Install Pipeline SDK - This only needs to be ran once in the enviroment. \n",
-    "!pip3 install kfp --upgrade\n",
+    "!python3 -m pip install 'kfp>=0.1.31' --quiet\n",
     "!pip3 install tensorflow==1.14 --upgrade"
    ]
   },
@@ -172,12 +172,11 @@
     "# Set your output and project. !!!Must Do before you can proceed!!!\n",
     "project =  'Your-Gcp-Project-ID'                          #'Your-GCP-Project-ID'\n",
     "model_name = 'model-name'                                      # Model name matching TF_serve naming requirements       \n",
-    "experiment_name = 'serving_component'\n",
     "import time\n",
     "ts = int(time.time())\n",
     "model_version = str(ts)                                            # Here we use timestamp as version to avoid conflict \n",
     "output = 'Your-Gcs-Path'     # A GCS bucket for asset outputs\n",
-    "KUBEFLOW_DEPLOYER_IMAGE = 'gcr.io/ml-pipeline/ml-pipeline-kubeflow-deployer:57d9f7f1cfd458e945d297957621716062d89a49'"
+    "KUBEFLOW_DEPLOYER_IMAGE = 'gcr.io/ml-pipeline/ml-pipeline-kubeflow-deployer:d6d9d8da19f7110fff3a5ba713710402edaeee65'"
    ]
   },
   {
@@ -323,7 +322,7 @@
     }
    ],
    "source": [
-    "kfp.Client().create_run_from_pipeline_func(model_server, arguments={}, experiment_name=experiment_name)\n",
+    "kfp.Client().create_run_from_pipeline_func(model_server, arguments={})\n",
     "\n",
     "#vvvvvvvvv This link leads to the run information page. (Note: There is a bug in JupyterLab that modifies the URL and makes the link stop working)"
    ]
diff --git a/samples/core/lightweight_component/lightweight_component.ipynb b/samples/core/lightweight_component/lightweight_component.ipynb
index b0465f152f90..8292839bec53 100644
--- a/samples/core/lightweight_component/lightweight_component.ipynb
+++ b/samples/core/lightweight_component/lightweight_component.ipynb
@@ -29,7 +29,6 @@
    },
    "outputs": [],
    "source": [
-    "experiment_name = 'lightweight python components'"
    ]
   },
   {
@@ -39,7 +38,7 @@
    "outputs": [],
    "source": [
     "# Install the SDK\n",
-    "!pip3 install kfp --upgrade"
+    "#!pip3 install 'kfp>=0.1.31.2' --quiet"
    ]
   },
   {
@@ -243,7 +242,7 @@
     "arguments = {'a': '7', 'b': '8'}\n",
     "\n",
     "#Submit a pipeline run\n",
-    "kfp.Client().create_run_from_pipeline_func(calc_pipeline, arguments=arguments, experiment_name=experiment_name)\n",
+    "kfp.Client().create_run_from_pipeline_func(calc_pipeline, arguments=arguments)\n",
     "\n",
     "#vvvvvvvvv This link leads to the run information page. (Note: There is a bug in JupyterLab that modifies the URL and makes the link stop working)"
    ]
diff --git a/samples/core/multiple_outputs/Multiple outputs - basics.ipynb b/samples/core/multiple_outputs/multiple_outputs.ipynb
similarity index 87%
rename from samples/core/multiple_outputs/Multiple outputs - basics.ipynb
rename to samples/core/multiple_outputs/multiple_outputs.ipynb
index 33c96800c67a..db5ee0cc1f88 100644
--- a/samples/core/multiple_outputs/Multiple outputs - basics.ipynb	
+++ b/samples/core/multiple_outputs/multiple_outputs.ipynb
@@ -30,7 +30,7 @@
    },
    "outputs": [],
    "source": [
-    "!pip install kfp --upgrade"
+    "!python3 -m pip install 'kfp>=0.1.31' --quiet\n"
    ]
   },
   {
@@ -50,14 +50,20 @@
    },
    "outputs": [],
    "source": [
-    "GCS_BUCKET = 'gs://[BUCKET-NAME]' # GCS bucket name\n",
-    "PROJECT_NAME = '[PROJECT-NAME]'   # GCP project name\n",
-    "\n",
-    "STAGING_GCS_PATH = GCS_BUCKET + '/multiple-output-sample'\n",
-    "TARGET_IMAGE = 'gcr.io/%s/multi-output:latest' % PROJECT_NAME\n",
-    "\n",
-    "BASE_IMAGE = 'tensorflow/tensorflow:1.11.0-py3'\n",
-    "EXPERIMENT_NAME = 'Multiple Outputs Sample'"
+    "output = 'gs://[BUCKET-NAME]' # GCS bucket name\n",
+    "project_id = '[PROJECT-NAME]'   # GCP project name\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import os\n",
+    "STAGING_GCS_PATH = os.path.join(output, 'multiple-output-sample')\n",
+    "TARGET_IMAGE = 'gcr.io/%s/multi-output:latest' % project_id\n",
+    "BASE_IMAGE = 'tensorflow/tensorflow:1.11.0-py3'"
    ]
   },
   {
@@ -86,12 +92,6 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# Returns a*b and a+b\n",
-    "@dsl.python_component(\n",
-    "    name='product_sum',\n",
-    "    description='Calculates the product and the sum',\n",
-    "    base_image=BASE_IMAGE\n",
-    ")\n",
     "def product_sum(a: float, b: float) -> NamedTuple(\n",
     "        'output', [('product', float), ('sum', float)]):\n",
     "    '''Returns the product and sum of two numbers'''\n",
@@ -160,11 +160,12 @@
     "    'b': 2.5,\n",
     "    'c': 3.0,\n",
     "}\n",
-    "run_result = kfp.Client().create_run_from_pipeline_func(pipeline, arguments=arguments, experiment_name=EXPERIMENT_NAME)"
+    "run_result = kfp.Client().create_run_from_pipeline_func(pipeline, arguments=arguments)"
    ]
   }
  ],
  "metadata": {
+  "celltoolbar": "Tags",
   "kernelspec": {
    "display_name": "Python 3",
    "language": "python",
@@ -180,7 +181,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.3"
+   "version": "3.6.4"
   }
  },
  "nbformat": 4,
diff --git a/samples/core/tfx-oss/README.md b/samples/core/tfx-oss/README.md
index 8cf0c428e733..b8bb2203c3b4 100644
--- a/samples/core/tfx-oss/README.md
+++ b/samples/core/tfx-oss/README.md
@@ -20,8 +20,8 @@ then activate the environment.
 
 Install TFX and Kubeflow Pipelines SDK
 ```
-pip3 install tfx==0.13.0 --upgrade
-pip3 install kfp --upgrade
+pip3 install 'tfx==0.14.0' --upgrade
+pip3 install 'kfp>=0.1.31' --upgrade
 ```
 
 Upload the utility code to your storage bucket. You can modify this code if needed for a different dataset.
@@ -37,11 +37,11 @@ gfile.Copy('utils/taxi_utils.py', 'gs://<my bucket>/<path>/taxi_utils.py')
 
 ## Configure the TFX Pipeline
 
-Modify the pipeline configurations at 
+Modify the pipeline configurations at
 ```
 TFX Example.ipynb
 ```
-Configure 
+Configure
 - Set `_input_bucket` to the GCS directory where you've copied taxi_utils.py. I.e. gs://<my bucket>/<path>/
 - Set `_output_bucket` to the GCS directory where you've want the results to be written
 - Set GCP project ID (replace my-gcp-project). Note that it should be project ID, not project name.
@@ -50,5 +50,5 @@ Configure
 ## Compile and run the pipeline
 Run the notebook.
 
-This will generate a file named chicago_taxi_pipeline_kubeflow.tar.gz
+This will generate a file named `chicago_taxi_pipeline_kubeflow.tar.gz`.
 Upload this file to the Pipelines Cluster and create a run.
diff --git a/samples/core/tfx-oss/TFX Example.ipynb b/samples/core/tfx-oss/TFX Example.ipynb
index de50af35cad9..1a377aa704ae 100644
--- a/samples/core/tfx-oss/TFX Example.ipynb	
+++ b/samples/core/tfx-oss/TFX Example.ipynb	
@@ -17,8 +17,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "!pip3 install tfx==0.13.0 --upgrade\n",
-    "!pip3 install kfp --upgrade"
+    "!pip3 install 'tfx==0.14.0' --upgrade\n",
+    "!python3 -m pip install 'kfp>=0.1.31' --quiet\n"
    ]
   },
   {
@@ -108,7 +108,7 @@
     "from tfx.components.statistics_gen.component import StatisticsGen\n",
     "from tfx.components.trainer.component import Trainer\n",
     "from tfx.components.transform.component import Transform\n",
-    "from tfx.orchestration.kubeflow.runner import KubeflowRunner\n",
+    "from tfx.orchestration.kubeflow.runner import KubeflowDagRunner\n",
     "from tfx.orchestration.pipeline import PipelineDecorator\n",
     "from tfx.proto import evaluator_pb2\n",
     "from tfx.proto import pusher_pb2\n",
@@ -261,7 +261,7 @@
     "  ]\n",
     "\n",
     "\n",
-    "pipeline = KubeflowRunner().run(_create_pipeline())"
+    "pipeline = KubeflowDagRunner().run(_create_pipeline())"
    ]
   },
   {
@@ -370,4 +370,4 @@
  },
  "nbformat": 4,
  "nbformat_minor": 2
-}
\ No newline at end of file
+}
diff --git a/samples/core/tfx-oss/utils/taxi_utils.py b/samples/core/tfx-oss/utils/taxi_utils.py
index 6dca172e6ca4..867f9ee4e837 100644
--- a/samples/core/tfx-oss/utils/taxi_utils.py
+++ b/samples/core/tfx-oss/utils/taxi_utils.py
@@ -23,14 +23,9 @@
 from __future__ import division
 from __future__ import print_function
 
-import os
-
 import tensorflow as tf
 import tensorflow_model_analysis as tfma
 import tensorflow_transform as tft
-from tensorflow_transform.beam.tft_beam_io import transform_fn_io
-from tensorflow_transform.saved import saved_transform_io
-from tensorflow_transform.tf_metadata import metadata_io
 from tensorflow_transform.tf_metadata import schema_utils
 
 # Categorical features are assumed to each have a maximum value in the dataset.
@@ -81,11 +76,11 @@ def _get_raw_feature_spec(schema):
   return schema_utils.schema_as_feature_spec(schema).feature_spec
 
 
-def _gzip_reader_fn():
+def _gzip_reader_fn(filenames):
   """Small utility returning a record reader that can read gzip'ed files."""
-  return tf.TFRecordReader(
-      options=tf.python_io.TFRecordOptions(
-          compression_type=tf.python_io.TFRecordCompressionType.GZIP))
+  return tf.data.TFRecordDataset(
+      filenames,
+      compression_type='GZIP')
 
 
 def _fill_in_missing(x):
@@ -132,7 +127,8 @@ def preprocessing_fn(inputs):
 
   for key in _BUCKET_FEATURE_KEYS:
     outputs[_transformed_name(key)] = tft.bucketize(
-        _fill_in_missing(inputs[key]), _FEATURE_BUCKET_COUNT)
+        _fill_in_missing(inputs[key]), _FEATURE_BUCKET_COUNT,
+        always_return_num_quantiles=False)
 
   for key in _CATEGORICAL_FEATURE_KEYS:
     outputs[_transformed_name(key)] = _fill_in_missing(inputs[key])
@@ -154,7 +150,7 @@ def _build_estimator(config, hidden_units=None, warm_start_from=None):
   """Build an estimator for predicting the tipping behavior of taxi riders.
 
   Args:
-    config: tf.contrib.learn.RunConfig defining the runtime environment for the
+    config: tf.estimator.RunConfig defining the runtime environment for the
       estimator (including model_dir).
     hidden_units: [int], the layer sizes of the DNN (input layer first)
     warm_start_from: Optional directory to warm start from.
@@ -196,12 +192,11 @@ def _build_estimator(config, hidden_units=None, warm_start_from=None):
       warm_start_from=warm_start_from)
 
 
-def _example_serving_receiver_fn(transform_output, schema):
+def _example_serving_receiver_fn(tf_transform_output, schema):
   """Build the serving in inputs.
 
   Args:
-    transform_output: directory in which the tf-transform model was written
-      during the preprocessing step.
+    tf_transform_output: A TFTransformOutput.
     schema: the schema of the input data.
 
   Returns:
@@ -214,21 +209,18 @@ def _example_serving_receiver_fn(transform_output, schema):
       raw_feature_spec, default_batch_size=None)
   serving_input_receiver = raw_input_fn()
 
-  _, transformed_features = (
-      saved_transform_io.partially_apply_saved_transform(
-          os.path.join(transform_output, transform_fn_io.TRANSFORM_FN_DIR),
-          serving_input_receiver.features))
+  transformed_features = tf_transform_output.transform_raw_features(
+      serving_input_receiver.features)
 
   return tf.estimator.export.ServingInputReceiver(
       transformed_features, serving_input_receiver.receiver_tensors)
 
 
-def _eval_input_receiver_fn(transform_output, schema):
+def _eval_input_receiver_fn(tf_transform_output, schema):
   """Build everything needed for the tf-model-analysis to run the model.
 
   Args:
-    transform_output: directory in which the tf-transform model was written
-      during the preprocessing step.
+    tf_transform_output: A TFTransformOutput.
     schema: the schema of the input data.
 
   Returns:
@@ -250,10 +242,8 @@ def _eval_input_receiver_fn(transform_output, schema):
 
   # Now that we have our raw examples, process them through the tf-transform
   # function computed during the preprocessing step.
-  _, transformed_features = (
-      saved_transform_io.partially_apply_saved_transform(
-          os.path.join(transform_output, transform_fn_io.TRANSFORM_FN_DIR),
-          features))
+  transformed_features = tf_transform_output.transform_raw_features(
+      features)
 
   # The key name MUST be 'examples'.
   receiver_tensors = {'examples': serialized_tf_example}
@@ -268,27 +258,25 @@ def _eval_input_receiver_fn(transform_output, schema):
       labels=transformed_features[_transformed_name(_LABEL_KEY)])
 
 
-def _input_fn(filenames, transform_output, batch_size=200):
+def _input_fn(filenames, tf_transform_output, batch_size=200):
   """Generates features and labels for training or evaluation.
 
   Args:
     filenames: [str] list of CSV files to read data from.
-    transform_output: directory in which the tf-transform model was written
-      during the preprocessing step.
+    tf_transform_output: A TFTransformOutput.
     batch_size: int First dimension size of the Tensors returned by input_fn
 
   Returns:
     A (features, indices) tuple where features is a dictionary of
       Tensors, and indices is a single Tensor of label indices.
   """
-  metadata_dir = os.path.join(transform_output,
-                              transform_fn_io.TRANSFORMED_METADATA_DIR)
-  transformed_metadata = metadata_io.read_metadata(metadata_dir)
-  transformed_feature_spec = transformed_metadata.schema.as_feature_spec()
+  transformed_feature_spec = (
+      tf_transform_output.transformed_feature_spec().copy())
 
-  transformed_features = tf.contrib.learn.io.read_batch_features(
+  dataset = tf.data.experimental.make_batched_features_dataset(
       filenames, batch_size, transformed_feature_spec, reader=_gzip_reader_fn)
 
+  transformed_features = dataset.make_one_shot_iterator().get_next()
   # We pop the label because we do not want to use it as a feature while we're
   # training.
   return transformed_features, transformed_features.pop(
@@ -318,14 +306,16 @@ def trainer_fn(hparams, schema):
   train_batch_size = 40
   eval_batch_size = 40
 
+  tf_transform_output = tft.TFTransformOutput(hparams.transform_output)
+
   train_input_fn = lambda: _input_fn(  # pylint: disable=g-long-lambda
       hparams.train_files,
-      hparams.transform_output,
+      tf_transform_output,
       batch_size=train_batch_size)
 
   eval_input_fn = lambda: _input_fn(  # pylint: disable=g-long-lambda
       hparams.eval_files,
-      hparams.transform_output,
+      tf_transform_output,
       batch_size=eval_batch_size)
 
   train_spec = tf.estimator.TrainSpec(  # pylint: disable=g-long-lambda
@@ -333,7 +323,7 @@ def trainer_fn(hparams, schema):
       max_steps=hparams.train_steps)
 
   serving_receiver_fn = lambda: _example_serving_receiver_fn(  # pylint: disable=g-long-lambda
-      hparams.transform_output, schema)
+      tf_transform_output, schema)
 
   exporter = tf.estimator.FinalExporter('chicago-taxi', serving_receiver_fn)
   eval_spec = tf.estimator.EvalSpec(
@@ -358,7 +348,7 @@ def trainer_fn(hparams, schema):
 
   # Create an input receiver for TFMA processing
   receiver_fn = lambda: _eval_input_receiver_fn(  # pylint: disable=g-long-lambda
-      hparams.transform_output, schema)
+      tf_transform_output, schema)
 
   return {
       'estimator': estimator,
diff --git a/samples/core/xgboost_training_cm/README.md b/samples/core/xgboost_training_cm/README.md
index b347510900c0..7cb6e3dbf341 100644
--- a/samples/core/xgboost_training_cm/README.md
+++ b/samples/core/xgboost_training_cm/README.md
@@ -1,16 +1,22 @@
 ## Overview
 
-The `xgboost-training-cm.py` pipeline creates XGBoost models on structured data in CSV format. Both classification and regression are supported.
+The `xgboost_training_cm.py` pipeline creates XGBoost models on structured data in CSV format. Both classification and regression are supported.
 
 The pipeline starts by creating an Google DataProc cluster, and then running analysis, transformation, distributed training and 
-prediction in the created cluster. Then a single node confusion-matrix aggregator is used (for classification case) to
-provide the confusion matrix data to the front end. Finally, a delete cluster operation runs to destroy the cluster it creates
+prediction in the created cluster. 
+Then a single node confusion-matrix and ROC aggregator is used (for classification case) to	
+provide the confusion matrix data, and ROC data to the front end, respectively.
+Finally, a delete cluster operation runs to destroy the cluster it creates
 in the beginning. The delete cluster operation is used as an exit handler, meaning it will run regardless of whether the pipeline fails
 or not.
 
 ## Requirements
 
-Preprocessing uses Google Cloud DataProc. Therefore, you must enable the [DataProc API](https://cloud.google.com/endpoints/docs/openapi/enable-api) for the given GCP project.
+Preprocessing uses Google Cloud DataProc. Therefore, you must enable the 
+[Cloud Dataproc API](https://pantheon.corp.google.com/apis/library/dataproc.googleapis.com?q=dataproc) for the given GCP project. This is the 
+general [guideline](https://cloud.google.com/endpoints/docs/openapi/enable-api) for enabling GCP APIs.
+If KFP was deployed through K8S marketplace, please follow instructions in [the guideline](https://github.com/kubeflow/pipelines/blob/master/manifests/gcp_marketplace/guide.md#gcp-service-account-credentials)
+to make sure the service account used has the role `storage.admin` and `dataproc.admin`.
 
 ## Compile
 
@@ -31,37 +37,25 @@ pipeline run results. Note that each pipeline run will create a unique directory
 ## Components source
 
 Create Cluster:
-  [source code](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/create_cluster/src) 
-  [container](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/create_cluster)
+  [source code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/dataproc/_create_cluster.py) 
 
-Analyze (step one for preprocessing):
-  [source code](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/analyze/src) 
-  [container](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/analyze)
+Analyze (step one for preprocessing), Transform (step two for preprocessing) are using pyspark job
+submission component, with
+  [source code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/dataproc/_submit_pyspark_job.py) 
 
-Transform (step two for preprocessing):
-  [source code](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/transform/src) 
-  [container](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/transform)
+Distributed Training and predictions are using spark job submission component, with
+  [source code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/dataproc/_submit_spark_job.py) 
 
-Distributed Training:
-  [source code](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/train/src) 
-  [container](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/train)
+Delete Cluster:
+  [source code](https://github.com/kubeflow/pipelines/blob/master/components/gcp/container/component_sdk/python/kfp_component/google/dataproc/_delete_cluster.py) 
 
-Distributed Predictions:
-  [source code](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/predict/src) 
-  [container](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/predict)
+The container file is located [here](https://github.com/kubeflow/pipelines/tree/master/components/gcp/container) 
 
-Confusion Matrix:
-  [source code](https://github.com/kubeflow/pipelines/tree/master/components/local/confusion_matrix/src) 
+For visualization, we use confusion matrix and ROC.
+Confusion Matrix:	
+  [source code](https://github.com/kubeflow/pipelines/tree/master/components/local/confusion_matrix/src),
   [container](https://github.com/kubeflow/pipelines/tree/master/components/local/confusion_matrix)
- 
-
-ROC:
-  [source code](https://github.com/kubeflow/pipelines/tree/master/components/local/roc/src) 
+and ROC: 
+  [source code](https://github.com/kubeflow/pipelines/tree/master/components/local/roc/src), 
   [container](https://github.com/kubeflow/pipelines/tree/master/components/local/roc)
 
-
-Delete Cluster:
-  [source code](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/delete_cluster/src) 
-  [container](https://github.com/kubeflow/pipelines/tree/master/components/deprecated/dataproc/delete_cluster)
-
-
diff --git a/samples/core/xgboost_training_cm/xgboost_training_cm.py b/samples/core/xgboost_training_cm/xgboost_training_cm.py
index afea29875418..4adc7c3896f1 100755
--- a/samples/core/xgboost_training_cm/xgboost_training_cm.py
+++ b/samples/core/xgboost_training_cm/xgboost_training_cm.py
@@ -14,57 +14,54 @@
 # limitations under the License.
 
 
-
+import json
 import kfp
 from kfp import components
 from kfp import dsl
 from kfp import gcp
+import os
+import subprocess
+
+confusion_matrix_op = components.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/local/confusion_matrix/component.yaml')
+
+roc_op = components.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/local/roc/component.yaml')
+
+dataproc_create_cluster_op = components.load_component_from_url(
+    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/create_cluster/component.yaml')
+
+dataproc_delete_cluster_op = components.load_component_from_url(
+    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/delete_cluster/component.yaml')
+
+dataproc_submit_pyspark_op = components.load_component_from_url(
+    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_pyspark_job/component.yaml'
+)
+
+dataproc_submit_spark_op = components.load_component_from_url(
+    'https://raw.githubusercontent.com/kubeflow/pipelines/02c991dd265054b040265b3dfa1903d5b49df859/components/gcp/dataproc/submit_spark_job/component.yaml'
+)
+
+_PYSRC_PREFIX = 'gs://ml-pipeline-playground/dataproc-example' # Common path to python src.
+
+_XGBOOST_PKG = 'gs://ml-pipeline-playground/xgboost4j-example-0.8-SNAPSHOT-jar-with-dependencies.jar'
+
+_TRAINER_MAIN_CLS = 'ml.dmlc.xgboost4j.scala.example.spark.XGBoostTrainer'
+
+_PREDICTOR_MAIN_CLS = 'ml.dmlc.xgboost4j.scala.example.spark.XGBoostPredictor'
+
+
+def delete_directory_from_gcs(dir_path):
+  """Delete a GCS dir recursively. Ignore errors."""
+  try:
+    subprocess.call(['gsutil', '-m', 'rm', '-r', dir_path])
+  except:
+    pass
 
-confusion_matrix_op = components.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/local/confusion_matrix/component.yaml')
-roc_op =              components.load_component_from_url('https://raw.githubusercontent.com/kubeflow/pipelines/e598176c02f45371336ccaa819409e8ec83743df/components/local/roc/component.yaml')
 
 # ! Please do not forget to enable the Dataproc API in your cluster https://console.developers.google.com/apis/api/dataproc.googleapis.com/overview
 
 # ================================================================
 # The following classes should be provided by components provider.
 
-def dataproc_create_cluster_op(
-    project,
-    region,
-    staging,
-    cluster_name='xgb-{{workflow.name}}'
-):
-    return dsl.ContainerOp(
-        name='Dataproc - Create cluster',
-        image='gcr.io/ml-pipeline/ml-pipeline-dataproc-create-cluster:57d9f7f1cfd458e945d297957621716062d89a49',
-        arguments=[
-            '--project', project,
-            '--region', region,
-            '--name', cluster_name,
-            '--staging', staging,
-        ],
-        file_outputs={
-            'output': '/output.txt',
-        }
-    )
-
-
-def dataproc_delete_cluster_op(
-    project,
-    region,
-    cluster_name='xgb-{{workflow.name}}'
-):
-    return dsl.ContainerOp(
-        name='Dataproc - Delete cluster',
-        image='gcr.io/ml-pipeline/ml-pipeline-dataproc-delete-cluster:57d9f7f1cfd458e945d297957621716062d89a49',
-        arguments=[
-            '--project', project,
-            '--region', region,
-            '--name', cluster_name,
-        ],
-        is_exit_handler=True
-    )
-
 
 def dataproc_analyze_op(
     project,
@@ -72,23 +69,23 @@ def dataproc_analyze_op(
     cluster_name,
     schema,
     train_data,
-    output
-):
-    return dsl.ContainerOp(
-        name='Dataproc - Analyze',
-        image='gcr.io/ml-pipeline/ml-pipeline-dataproc-analyze:57d9f7f1cfd458e945d297957621716062d89a49',
-        arguments=[
-            '--project', project,
-            '--region', region,
-            '--cluster', cluster_name,
-            '--schema', schema,
-            '--train', train_data,
-            '--output', output,
-        ],
-        file_outputs={
-            'output': '/output.txt',
-        }
-    )
+    output):
+  """Submit dataproc analyze as a pyspark job.
+
+  :param project: GCP project ID.
+  :param region: Which zone to run this analyze.
+  :param cluster_name: Name of the cluster.
+  :param schema: GCS path to the schema.
+  :param train_data: GCS path to the training data.
+  :param output: GCS path to store the output.
+  """
+  return dataproc_submit_pyspark_op(
+      project_id=project,
+      region=region,
+      cluster_name=cluster_name,
+      main_python_file_uri=os.path.join(_PYSRC_PREFIX, 'analyze_run.py'),
+      args=['--output', str(output), '--train', str(train_data), '--schema', str(schema)]
+  )
 
 
 def dataproc_transform_op(
@@ -101,24 +98,40 @@ def dataproc_transform_op(
     analysis,
     output
 ):
-    return dsl.ContainerOp(
-        name='Dataproc - Transform',
-        image='gcr.io/ml-pipeline/ml-pipeline-dataproc-transform:57d9f7f1cfd458e945d297957621716062d89a49',
-        arguments=[
-            '--project', project,
-            '--region', region,
-            '--cluster', cluster_name,
-            '--train', train_data,
-            '--eval', eval_data,
-            '--analysis', analysis,
-            '--target', target,
-            '--output', output,
-        ],
-        file_outputs={
-            'train': '/output_train.txt',
-            'eval': '/output_eval.txt',
-        }
-    )
+  """Submit dataproc transform as a pyspark job.
+
+  :param project: GCP project ID.
+  :param region: Which zone to run this analyze.
+  :param cluster_name: Name of the cluster.
+  :param train_data: GCS path to the training data.
+  :param eval_data: GCS path of the eval csv file.
+  :param target: Target column name.
+  :param analysis: GCS path of the analysis results
+  :param output: GCS path to use for output.
+  """
+
+  # Remove existing [output]/train and [output]/eval if they exist.
+  delete_directory_from_gcs(os.path.join(output, 'train'))
+  delete_directory_from_gcs(os.path.join(output, 'eval'))
+
+  return dataproc_submit_pyspark_op(
+      project_id=project,
+      region=region,
+      cluster_name=cluster_name,
+      main_python_file_uri=os.path.join(_PYSRC_PREFIX,
+                                        'transform_run.py'),
+      args=[
+        '--output',
+        str(output),
+        '--analysis',
+        str(analysis),
+        '--target',
+        str(target),
+        '--train',
+        str(train_data),
+        '--eval',
+        str(eval_data)
+      ])
 
 
 def dataproc_train_op(
@@ -134,32 +147,28 @@ def dataproc_train_op(
     output,
     is_classification=True
 ):
-    if is_classification:
-      config='gs://ml-pipeline-playground/trainconfcla.json'
-    else:
-      config='gs://ml-pipeline-playground/trainconfreg.json'
-
-    return dsl.ContainerOp(
-        name='Dataproc - Train XGBoost model',
-        image='gcr.io/ml-pipeline/ml-pipeline-dataproc-train:57d9f7f1cfd458e945d297957621716062d89a49',
-        arguments=[
-            '--project', project,
-            '--region', region,
-            '--cluster', cluster_name,
-            '--train', train_data,
-            '--eval', eval_data,
-            '--analysis', analysis,
-            '--target', target,
-            '--package', 'gs://ml-pipeline-playground/xgboost4j-example-0.8-SNAPSHOT-jar-with-dependencies.jar',
-            '--workers', workers,
-            '--rounds', rounds,
-            '--conf', config,
-            '--output', output,
-        ],
-        file_outputs={
-            'output': '/output.txt',
-        }
-    )
+
+  if is_classification:
+    config='gs://ml-pipeline-playground/trainconfcla.json'
+  else:
+    config='gs://ml-pipeline-playground/trainconfreg.json'
+
+  return dataproc_submit_spark_op(
+      project_id=project,
+      region=region,
+      cluster_name=cluster_name,
+      main_class=_TRAINER_MAIN_CLS,
+      spark_job=json.dumps({ 'jarFileUris': [_XGBOOST_PKG]}),
+      args=json.dumps([
+        str(config),
+        str(rounds),
+        str(workers),
+        str(analysis),
+        str(target),
+        str(train_data),
+        str(eval_data),
+        str(output)
+      ]))
 
 
 def dataproc_predict_op(
@@ -172,27 +181,20 @@ def dataproc_predict_op(
     analysis,
     output
 ):
-    return dsl.ContainerOp(
-        name='Dataproc - Predict with XGBoost model',
-        image='gcr.io/ml-pipeline/ml-pipeline-dataproc-predict:57d9f7f1cfd458e945d297957621716062d89a49',
-        arguments=[
-            '--project', project,
-            '--region', region,
-            '--cluster', cluster_name,
-            '--predict', data,
-            '--analysis', analysis,
-            '--target', target,
-            '--package', 'gs://ml-pipeline-playground/xgboost4j-example-0.8-SNAPSHOT-jar-with-dependencies.jar',
-            '--model', model,
-            '--output', output,
-        ],
-        file_outputs={
-            'output': '/output.txt',
-        },
-        output_artifact_paths={
-            'mlpipeline-ui-metadata': '/mlpipeline-ui-metadata.json',
-        },
-    )
+
+  return dataproc_submit_spark_op(
+      project_id=project,
+      region=region,
+      cluster_name=cluster_name,
+      main_class=_PREDICTOR_MAIN_CLS,
+      spark_job=json.dumps({ 'jarFileUris': [_XGBOOST_PKG]}),
+      args=json.dumps([
+        str(model),
+        str(data),
+        str(analysis),
+        str(target),
+        str(output)
+      ]))
 
 # =======================================================================
 
@@ -201,8 +203,9 @@ def dataproc_predict_op(
     description='A trainer that does end-to-end distributed training for XGBoost models.'
 )
 def xgb_train_pipeline(
-    output,
-    project,
+    output='gs://your-gcs-bucket',
+    project='your-gcp-project',
+    cluster_name='xgb-%s' % dsl.RUN_ID_PLACEHOLDER,
     region='us-central1',
     train_data='gs://ml-pipeline-playground/sfpd/train.csv',
     eval_data='gs://ml-pipeline-playground/sfpd/eval.csv',
@@ -212,75 +215,90 @@ def xgb_train_pipeline(
     workers=2,
     true_label='ACTION',
 ):
-    output_template = str(output) + '/' + dsl.EXECUTION_ID_PLACEHOLDER + '/data'
-
-    delete_cluster_op = dataproc_delete_cluster_op(
-        project,
-        region
-    ).apply(gcp.use_gcp_secret('user-gcp-sa'))
-
-    with dsl.ExitHandler(exit_op=delete_cluster_op):
-        create_cluster_op = dataproc_create_cluster_op(
-            project,
-            region,
-            output
-        ).apply(gcp.use_gcp_secret('user-gcp-sa'))
-
-        analyze_op = dataproc_analyze_op(
-            project,
-            region,
-            create_cluster_op.output,
-            schema,
-            train_data,
-            output_template
-        ).apply(gcp.use_gcp_secret('user-gcp-sa'))
-
-        transform_op = dataproc_transform_op(
-            project,
-            region,
-            create_cluster_op.output,
-            train_data,
-            eval_data,
-            target,
-            analyze_op.output,
-            output_template
-        ).apply(gcp.use_gcp_secret('user-gcp-sa'))
-
-        train_op = dataproc_train_op(
-            project,
-            region,
-            create_cluster_op.output,
-            transform_op.outputs['train'],
-            transform_op.outputs['eval'],
-            target,
-            analyze_op.output,
-            workers,
-            rounds,
-            output_template
-        ).apply(gcp.use_gcp_secret('user-gcp-sa'))
-
-        predict_op = dataproc_predict_op(
-            project,
-            region,
-            create_cluster_op.output,
-            transform_op.outputs['eval'],
-            train_op.output,
-            target,
-            analyze_op.output,
-            output_template
-        ).apply(gcp.use_gcp_secret('user-gcp-sa'))
-
-        confusion_matrix_task = confusion_matrix_op(
-            predict_op.output,
-            output_template
-        ).apply(gcp.use_gcp_secret('user-gcp-sa'))
-
-        roc_task = roc_op(
-            predictions_dir=predict_op.output,
+    output_template = str(output) + '/' + dsl.RUN_ID_PLACEHOLDER + '/data'
+
+    # Current GCP pyspark/spark op do not provide outputs as return values, instead,
+    # we need to use strings to pass the uri around.
+    analyze_output = output_template
+    transform_output_train = os.path.join(output_template, 'train', 'part-*')
+    transform_output_eval = os.path.join(output_template, 'eval', 'part-*')
+    train_output = os.path.join(output_template, 'train_output')
+    predict_output = os.path.join(output_template, 'predict_output')
+
+    with dsl.ExitHandler(exit_op=dataproc_delete_cluster_op(
+        project_id=project,
+        region=region,
+        name=cluster_name
+    )):
+        _create_cluster_op = dataproc_create_cluster_op(
+            project_id=project,
+            region=region,
+            name=cluster_name,
+            initialization_actions=[
+              os.path.join(_PYSRC_PREFIX,
+                           'initialization_actions.sh'),
+            ],
+            image_version='1.2'
+        )
+
+        _analyze_op = dataproc_analyze_op(
+            project=project,
+            region=region,
+            cluster_name=cluster_name,
+            schema=schema,
+            train_data=train_data,
+            output=output_template
+        ).after(_create_cluster_op).set_display_name('Analyzer')
+
+        _transform_op = dataproc_transform_op(
+            project=project,
+            region=region,
+            cluster_name=cluster_name,
+            train_data=train_data,
+            eval_data=eval_data,
+            target=target,
+            analysis=analyze_output,
+            output=output_template
+        ).after(_analyze_op).set_display_name('Transformer')
+
+        _train_op = dataproc_train_op(
+            project=project,
+            region=region,
+            cluster_name=cluster_name,
+            train_data=transform_output_train,
+            eval_data=transform_output_eval,
+            target=target,
+            analysis=analyze_output,
+            workers=workers,
+            rounds=rounds,
+            output=train_output
+        ).after(_transform_op).set_display_name('Trainer')
+
+        _predict_op = dataproc_predict_op(
+            project=project,
+            region=region,
+            cluster_name=cluster_name,
+            data=transform_output_eval,
+            model=train_output,
+            target=target,
+            analysis=analyze_output,
+            output=predict_output
+        ).after(_train_op).set_display_name('Predictor')
+
+        _cm_op = confusion_matrix_op(
+            predictions=os.path.join(predict_output, 'part-*.csv'),
+            output_dir=output_template
+        ).after(_predict_op)
+
+        _roc_op = roc_op(
+            predictions_dir=os.path.join(predict_output, 'part-*.csv'),
             true_class=true_label,
             true_score_column=true_label,
             output_dir=output_template
-        ).apply(gcp.use_gcp_secret('user-gcp-sa'))
+        ).after(_predict_op)
+
+    dsl.get_pipeline_conf().add_op_transformer(
+        gcp.use_gcp_secret('user-gcp-sa'))
 
 if __name__ == '__main__':
-    kfp.compiler.Compiler().compile(xgb_train_pipeline, __file__ + '.yaml')
+    kfp.compiler.Compiler().compile(xgb_train_pipeline, __file__ + '.zip')
diff --git a/samples/tutorials/Data passing in python components.ipynb b/samples/tutorials/Data passing in python components.ipynb
index 30a89e1c82ed..0a8f2a314994 100644
--- a/samples/tutorials/Data passing in python components.ipynb	
+++ b/samples/tutorials/Data passing in python components.ipynb	
@@ -48,7 +48,7 @@
    "source": [
     "## Small data\n",
     "\n",
-    "Small data is the data that you'll be comfortable passing as program's command-line argument. Smal data size should not exceed few kilobytes.\n",
+    "Small data is the data that you'll be comfortable passing as program's command-line argument. Small data size should not exceed few kilobytes.\n",
     "\n",
     "Some examples of typical types of small data are: number, URL, small string (e.g. column name).\n",
     "\n",
diff --git a/sdk/python/kfp/__init__.py b/sdk/python/kfp/__init__.py
index 9163ed8322af..ba839eee85dc 100644
--- a/sdk/python/kfp/__init__.py
+++ b/sdk/python/kfp/__init__.py
@@ -13,6 +13,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+__version__ = '0.1.34'
+
 from . import components
 from . import containers
 from . import dsl
diff --git a/sdk/python/kfp/__main__.py b/sdk/python/kfp/__main__.py
index 545e54ff4eb4..921bbd36abf4 100644
--- a/sdk/python/kfp/__main__.py
+++ b/sdk/python/kfp/__main__.py
@@ -17,7 +17,10 @@
 # TODO(hongyes): add more commands:
 # kfp compile (migrate from dsl-compile)
 # kfp experiment (manage experiments)
-# kfp pipeline (manage pipelines)
+
+# TODO: kfp pipeline delete
+# Calling client._pipelines_api.delete_pipeline(id=pipeline_id) throws
+# exception: module 'kfp_server_api.models' has no attribute 'ERRORUNKNOWN'
 
 if __name__ == '__main__':
-    main()
\ No newline at end of file
+    main()
diff --git a/sdk/python/kfp/_client.py b/sdk/python/kfp/_client.py
index 4ad9abbc3864..3d5dd2053fc2 100644
--- a/sdk/python/kfp/_client.py
+++ b/sdk/python/kfp/_client.py
@@ -20,8 +20,9 @@
 import re
 import tarfile
 import tempfile
-import zipfile
+import warnings
 import yaml
+import zipfile
 from datetime import datetime
 from typing import Mapping, Callable
 
@@ -29,7 +30,7 @@
 import kfp_server_api
 
 from kfp.compiler import compiler
-from kfp.compiler import _k8s_helper
+from kfp.compiler._k8s_helper import sanitize_k8s_name
 
 from kfp._auth import get_auth_token, get_gcp_access_token
 
@@ -52,7 +53,7 @@ def camel_case_to_snake_case(name):
       short_api_name = camel_case_to_snake_case(api_name[0:-len('ServiceApi')]) + 's'
       api_struct = Struct()
       setattr(target_struct, short_api_name, api_struct)
-      service_api = getattr(api_module, api_name)
+      service_api = getattr(api_module.api, api_name)
       initialized_service_api = service_api(api_client)
       for member_name in dir(initialized_service_api):
           if member_name.startswith('_') or member_name.endswith('_with_http_info'):
@@ -60,10 +61,17 @@ def camel_case_to_snake_case(name):
 
           bound_member = getattr(initialized_service_api, member_name)
           setattr(api_struct, member_name, bound_member)
+  models_struct = Struct()
+  for member_name in dir(api_module.models):
+      if not member_name[0].islower():
+          setattr(models_struct, member_name, getattr(api_module.models, member_name))
+  target_struct.api_models = models_struct
 
 
 KF_PIPELINES_ENDPOINT_ENV = 'KF_PIPELINES_ENDPOINT'
 KF_PIPELINES_UI_ENDPOINT_ENV = 'KF_PIPELINES_UI_ENDPOINT'
+KF_PIPELINES_DEFAULT_EXPERIMENT_NAME = 'KF_PIPELINES_DEFAULT_EXPERIMENT_NAME'
+KF_PIPELINES_OVERRIDE_EXPERIMENT_NAME = 'KF_PIPELINES_OVERRIDE_EXPERIMENT_NAME'
 
 class Client(object):
   """ API Client for KubeFlow Pipeline.
@@ -90,7 +98,7 @@ def __init__(self, host=None, client_id=None, namespace='kubeflow'):
     self._uihost = os.environ.get(KF_PIPELINES_UI_ENDPOINT_ENV, host)
     config = self._load_config(host, client_id, namespace)
     api_client = kfp_server_api.api_client.ApiClient(config)
-    _add_generated_apis(self, kfp_server_api.api, api_client)
+    _add_generated_apis(self, kfp_server_api, api_client)
     self._run_api = kfp_server_api.api.run_service_api.RunServiceApi(api_client)
     self._experiment_api = kfp_server_api.api.experiment_service_api.ExperimentServiceApi(api_client)
     self._pipelines_api = kfp_server_api.api.pipeline_service_api.PipelineServiceApi(api_client)
@@ -137,17 +145,19 @@ def _load_config(self, host, client_id, namespace):
       return config
 
     if config.host:
-      config.host = os.path.join(config.host, Client.KUBE_PROXY_PATH.format(namespace))
+      config.host = config.host + '/' + Client.KUBE_PROXY_PATH.format(namespace)
     return config
 
   def _is_iap_host(self, host, client_id):
     if host and client_id:
-      return re.match(r'\S+.endpoints.\S+.cloud.goog', host)
+      if re.match(r'\S+.endpoints.\S+.cloud.goog/{0,1}$', host):
+        warnings.warn('Suffix /pipeline is not ignorable for IAP host.')
+      return re.match(r'\S+.endpoints.\S+.cloud.goog/pipeline', host)
     return False
 
   def _is_inverse_proxy_host(self, host):
     if host:
-      return re.match(r'\S+dot-datalab-vm\S+.googleusercontent.com', host)
+      return re.match(r'\S+.googleusercontent.com/{0,1}$', host)
     return False
 
   def _is_ipython(self):
@@ -298,7 +308,7 @@ def run_pipeline(self, experiment_id, job_name, pipeline_package_path=None, para
     if pipeline_package_path:
       pipeline_obj = self._extract_pipeline_yaml(pipeline_package_path)
       pipeline_json_string = json.dumps(pipeline_obj)
-    api_params = [kfp_server_api.ApiParameter(name=_k8s_helper.K8sHelper.sanitize_k8s_name(k), value=str(v))
+    api_params = [kfp_server_api.ApiParameter(name=sanitize_k8s_name(k), value=str(v))
                   for k,v in params.items()]
     key = kfp_server_api.models.ApiResourceKey(id=experiment_id,
                                         type=kfp_server_api.models.ApiResourceType.EXPERIMENT)
@@ -358,14 +368,19 @@ def __init__(self, client, run_info):
 
       def wait_for_run_completion(self, timeout=None):
         timeout = timeout or datetime.datetime.max - datetime.datetime.min
-        return self._client.wait_for_run_completion(timeout)
+        return self._client.wait_for_run_completion(self.run_id, timeout)
 
-      def __str__(self):
-        return '<RunPipelineResult(run_id={})>'.format(self.run_id)
+      def __repr__(self):
+        return 'RunPipelineResult(run_id={})'.format(self.run_id)
 
     #TODO: Check arguments against the pipeline function
     pipeline_name = os.path.basename(pipeline_file)
-    experiment_name = experiment_name or 'Default'
+    experiment_name = experiment_name or os.environ.get(KF_PIPELINES_DEFAULT_EXPERIMENT_NAME, None)
+    overridden_experiment_name = os.environ.get(KF_PIPELINES_OVERRIDE_EXPERIMENT_NAME, experiment_name)
+    if overridden_experiment_name != experiment_name:
+      import warnings
+      warnings.warn('Changing experiment name from "{}" to "{}".'.format(experiment_name, overridden_experiment_name))
+    experiment_name = overridden_experiment_name or 'Default'
     run_name = run_name or pipeline_name + ' ' + datetime.now().strftime('%Y-%m-%d %H-%M-%S')
     experiment = self.create_experiment(name=experiment_name)
     run_info = self.run_pipeline(experiment.id, run_name, pipeline_file, arguments)
@@ -445,3 +460,14 @@ def upload_pipeline(self, pipeline_package_path, pipeline_name=None):
       html = 'Pipeline link <a href=%s/#/pipelines/details/%s>here</a>' % (self._get_url_prefix(), response.id)
       IPython.display.display(IPython.display.HTML(html))
     return response
+
+  def get_pipeline(self, pipeline_id):
+    """Get pipeline details.
+    Args:
+      id of the pipeline.
+    Returns:
+      A response object including details of a pipeline.
+    Throws:
+      Exception if pipeline is not found.
+    """
+    return self._pipelines_api.get_pipeline(id=pipeline_id)
diff --git a/sdk/python/kfp/aws.py b/sdk/python/kfp/aws.py
index 5fa51f2c7cf7..338cec288cc6 100644
--- a/sdk/python/kfp/aws.py
+++ b/sdk/python/kfp/aws.py
@@ -30,8 +30,8 @@ def use_aws_secret(secret_name='aws-secret', aws_access_key_id_name='AWS_ACCESS_
 
     def _use_aws_secret(task):
         from kubernetes import client as k8s_client
-        return (
-            task
+        (
+            task.container
                 .add_env_variable(
                     k8s_client.V1EnvVar(
                         name='AWS_ACCESS_KEY_ID',
@@ -55,5 +55,6 @@ def _use_aws_secret(task):
                     )
                 )
         )
+        return task
 
     return _use_aws_secret
diff --git a/sdk/python/kfp/azure.py b/sdk/python/kfp/azure.py
index c819a5d39d9b..27e1bcd5908c 100644
--- a/sdk/python/kfp/azure.py
+++ b/sdk/python/kfp/azure.py
@@ -24,8 +24,8 @@ def use_azure_secret(secret_name='azcreds'):
 
     def _use_azure_secret(task):
         from kubernetes import client as k8s_client
-        return (
-            task            
+        (
+            task.container
                 .add_env_variable(
                     k8s_client.V1EnvVar(
                         name='AZ_SUBSCRIPTION_ID',
@@ -71,5 +71,6 @@ def _use_azure_secret(task):
                     )
                 )
         )
+        return task
     
     return _use_azure_secret
diff --git a/sdk/python/kfp/cli/cli.py b/sdk/python/kfp/cli/cli.py
index 1db6469ffd09..73bb14ae0ac7 100644
--- a/sdk/python/kfp/cli/cli.py
+++ b/sdk/python/kfp/cli/cli.py
@@ -13,8 +13,12 @@
 # limitations under the License.
 
 import click
+import logging
+import sys
 from .._client import Client
 from .run import run
+from .pipeline import pipeline
+from .diagnose_me_cli import diagnose_me
 
 @click.group()
 @click.option('--endpoint', help='Endpoint of the KFP API service to connect.')
@@ -23,9 +27,19 @@
 @click.pass_context
 def cli(ctx, endpoint, iap_client_id, namespace):
     """kfp is the command line interface to KFP service."""
+    if click.Group.get_command(cli, ctx,'diagnose_me'):
+        # Do not create a client for diagnose_me
+        return 
     ctx.obj['client'] = Client(endpoint, iap_client_id, namespace)
     ctx.obj['namespace']= namespace
 
 def main():
+    logging.basicConfig(format='%(message)s', level=logging.INFO)
     cli.add_command(run)
-    cli(obj={}, auto_envvar_prefix='KFP')
\ No newline at end of file
+    cli.add_command(pipeline)
+    cli.add_command(diagnose_me,'diagnose_me')
+    try:
+        cli(obj={}, auto_envvar_prefix='KFP')
+    except Exception as e:
+        logging.error(e)
+        sys.exit(1)
diff --git a/sdk/python/kfp/cli/diagnose_me/__init__.py b/sdk/python/kfp/cli/diagnose_me/__init__.py
new file mode 100644
index 000000000000..6564ed4640a4
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/__init__.py
@@ -0,0 +1,14 @@
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
diff --git a/sdk/python/kfp/cli/diagnose_me/dev_env.py b/sdk/python/kfp/cli/diagnose_me/dev_env.py
new file mode 100644
index 000000000000..2c07086552e4
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/dev_env.py
@@ -0,0 +1,71 @@
+# Lint as: python3
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Functions for diagnostic data collection from development development."""
+
+import enum
+from . import utility
+
+
+class Commands(enum.Enum):
+  """Enum for gcloud and gsutil commands."""
+  PIP3_LIST = 1
+  PYTHON3_PIP_LIST = 2
+  PIP3_VERSION = 3
+  PYHYON3_PIP_VERSION = 4
+  WHICH_PYHYON3 = 5
+  WHICH_PIP3 = 6
+
+
+_command_string = {
+    Commands.PIP3_LIST: 'pip3 list',
+    Commands.PYTHON3_PIP_LIST: 'python3 -m pip list',
+    Commands.PIP3_VERSION: 'pip3 -V',
+    Commands.PYHYON3_PIP_VERSION: 'python3 -m pip -V',
+    Commands.WHICH_PYHYON3: 'which python3',
+    Commands.WHICH_PIP3: 'which pip3',
+}
+
+
+def get_dev_env_configuration(
+    configuration: Commands,
+    human_readable: bool = False) -> utility.ExecutorResponse:
+  """Captures the specified environment configuration.
+
+  Captures the developement environment configuration including PIP version and
+  Phython version as specifeid by configuration
+
+  Args:
+    configuration: Commands for specific information to be retrieved
+      - PIP3LIST: captures pip3 freeze results
+      - PYTHON3PIPLIST: captuers python3 -m pip freeze results
+      - PIP3VERSION: captuers pip3 -V results
+      - PYHYON3PIPVERSION: captuers python3 -m pip -V results
+    human_readable: If true all output will be in human readable form insted of
+      Json.
+
+  Returns:
+    A utility.ExecutorResponse with the output results for the specified
+    command.
+  """
+  command_list = _command_string[configuration].split(' ')
+  if not human_readable and configuration not in (
+      Commands.PIP3_VERSION,
+      Commands.PYHYON3_PIP_VERSION,
+      Commands.WHICH_PYHYON3,
+      Commands.WHICH_PIP3,
+  ):
+    command_list.extend(['--format', 'json'])
+
+  return utility.ExecutorResponse().execute_command(command_list)
diff --git a/sdk/python/kfp/cli/diagnose_me/dev_env_test.py b/sdk/python/kfp/cli/diagnose_me/dev_env_test.py
new file mode 100644
index 000000000000..e179cb198c22
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/dev_env_test.py
@@ -0,0 +1,62 @@
+# Lint as: python3
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Integration tests for diagnose_me.dev_env."""
+
+from typing import Text
+import unittest
+from unittest import mock
+from . import dev_env
+from . import utility
+
+
+class DevEnvTest(unittest.TestCase):
+
+  def test_Commands(self):
+    """Verify commands are formaated properly."""
+    for command in dev_env.Commands:
+      self.assertIsInstance(dev_env._command_string[command], Text)
+      self.assertNotIn('\t', dev_env._command_string[command])
+      self.assertNotIn('\n', dev_env._command_string[command])
+
+  @mock.patch.object(utility, 'ExecutorResponse', autospec=True)
+  def test_dev_env_configuration(self, mock_executor_response):
+    """Tests dev_env command execution."""
+    dev_env.get_dev_env_configuration(dev_env.Commands.PIP3_LIST)
+    mock_executor_response().execute_command.assert_called_with(
+        ['pip3', 'list', '--format', 'json'])
+
+  @mock.patch.object(utility, 'ExecutorResponse', autospec=True)
+  def test_dev_env_configuration_human_readable(self, mock_executor_response):
+    """Tests dev_env command execution."""
+    dev_env.get_dev_env_configuration(
+        dev_env.Commands.PIP3_LIST, human_readable=True)
+    mock_executor_response().execute_command.assert_called_with(
+        ['pip3', 'list'])
+
+  @mock.patch.object(utility, 'ExecutorResponse', autospec=True)
+  def test_dev_env_configuration_version(self, mock_executor_response):
+    """Tests dev_env command execution."""
+    # human readable = false should not set format flag for version calls
+    dev_env.get_dev_env_configuration(
+        dev_env.Commands.PIP3_VERSION, human_readable=False)
+    mock_executor_response().execute_command.assert_called_with(['pip3', '-V'])
+    dev_env.get_dev_env_configuration(
+        dev_env.Commands.PYHYON3_PIP_VERSION, human_readable=False)
+    mock_executor_response().execute_command.assert_called_with(
+        ['python3', '-m', 'pip', '-V'])
+
+
+if __name__ == '__main__':
+  unittest.main()
diff --git a/sdk/python/kfp/cli/diagnose_me/gcp.py b/sdk/python/kfp/cli/diagnose_me/gcp.py
new file mode 100644
index 000000000000..3a20dbdbc4d2
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/gcp.py
@@ -0,0 +1,150 @@
+# Lint as: python3
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Functions for collecting GCP related environment configurations."""
+
+import enum
+from typing import List, Text, Optional
+from . import utility
+
+
+class Commands(enum.Enum):
+  """Enum for gcloud and gsutil commands."""
+  GET_APIS = 1
+  GET_CONTAINER_CLUSTERS = 2
+  GET_CONTAINER_IMAGES = 3
+  GET_DISKS = 4
+  GET_GCLOUD_DEFAULT = 5
+  GET_NETWORKS = 6
+  GET_QUOTAS = 7
+  GET_SCOPES = 8
+  GET_SERVICE_ACCOUNTS = 9
+  GET_STORAGE_BUCKETS = 10
+  GET_GCLOUD_VERSION = 11
+
+
+_command_string = {
+    Commands.GET_APIS: 'services list',
+    Commands.GET_CONTAINER_CLUSTERS: 'container clusters list',
+    Commands.GET_CONTAINER_IMAGES: 'container images list',
+    Commands.GET_DISKS: 'compute disks list',
+    Commands.GET_GCLOUD_DEFAULT: 'config list --all',
+    Commands.GET_NETWORKS: 'compute networks list',
+    Commands.GET_QUOTAS: 'compute regions list',
+    Commands.GET_SCOPES: 'compute instances list',
+    Commands.GET_SERVICE_ACCOUNTS: 'iam service-accounts list',
+    Commands.GET_STORAGE_BUCKETS: 'ls',
+    Commands.GET_GCLOUD_VERSION: 'version',
+}
+
+
+def execute_gcloud_command(
+    gcloud_command_list: List[Text],
+    project_id: Optional[Text] = None,
+    human_readable: Optional[bool] = False) -> utility.ExecutorResponse:
+  """Function for invoking gcloud command.
+
+  Args:
+    gcloud_command_list: a command string list to be past to gcloud example
+      format is ['config', 'list', '--all']
+    project_id: specificies the project to run the commands against if not
+      provided provided will use gcloud default project if one is configured
+      otherwise will return an error message.
+    human_readable: If false sets parameter --format json for all calls,
+      otherwie output will be in human readable format.
+
+  Returns:
+    utility.ExecutorResponse with outputs from stdout,stderr and execution code.
+  """
+  command_list = ['gcloud']
+  command_list.extend(gcloud_command_list)
+  if not human_readable:
+    command_list.extend(['--format', 'json'])
+
+  if project_id is not None:
+    command_list.extend(['--project', project_id])
+
+  return utility.ExecutorResponse().execute_command(command_list)
+
+
+def execute_gsutil_command(
+    gsutil_command_list: List[Text],
+    project_id: Optional[Text] = None) -> utility.ExecutorResponse:
+  """Function for invoking gsutil command.
+
+  This function takes in a gsutil parameter list and returns the results as a
+  list of dictionaries.
+  Args:
+    gsutil_command_list: a command string list to be past to gsutil example
+      format is ['config', 'list', '--all']
+    project_id: specific project to check the QUOTASs for,if no project id is
+      provided will use gcloud default project if one is configured otherwise
+      will return an erro massage.
+
+  Returns:
+    utility.ExecutorResponse with outputs from stdout,stderr and execution code.
+  """
+  command_list = ['gsutil']
+  command_list.extend(gsutil_command_list)
+
+  if project_id is not None:
+    command_list.extend(['-p', project_id])
+
+  return utility.ExecutorResponse().execute_command(command_list)
+
+
+def get_gcp_configuration(
+    configuration: Commands,
+    project_id: Optional[Text] = None,
+    human_readable: Optional[bool] = False) -> utility.ExecutorResponse:
+  """Captures the specified environment configuration.
+
+  Captures the environment configuration for the specified setting such as
+  NETWORKSing configuration, project QUOTASs, etc.
+
+  Args:
+    configuration: Commands for specific information to be retrieved
+      - APIS:  Captures a complete list of enabled APISs and their configuration
+        details under the specified project.
+      - CONTAINER_CLUSTERS: List all visible k8 clusters under the project.
+      - CONTAINER_IMAGES: List of all container images under the project
+        container repo.
+      - DISKS: List of storage allocated by the project including notebook
+        instances as well as k8 pds with corresponding state.
+      - GCLOUD_DEFAULT:  Environment default configuration for gcloud
+      - NETWORKS: List all NETWORKSs and their configuration under the project.
+      - QUOTAS:  Captures a complete list of  QUOTASs for project per
+        region,returns the results as a list of dictionaries.
+      - SCOPES: list of SCOPESs for each compute resources in the project.
+      - SERVICE_ACCOUNTS: List of all service accounts that are enabled under
+        this project.
+      - STORAGE_BUCKETS: list of buckets and corresponding access information.
+    project_id: specific project to check the QUOTASs for,if no project id is
+      provided will use gcloud default project if one is configured otherwise
+      will return an error message.
+    human_readable: If true all output will be in human readable form insted of
+      Json.
+
+  Returns:
+    A utility.ExecutorResponse with the output results for the specified
+    command.
+  """
+  # storage bucket call requires execute_gsutil_command
+  if configuration is Commands.GET_STORAGE_BUCKETS:
+    return execute_gsutil_command([_command_string[Commands.GET_STORAGE_BUCKETS]],
+                                  project_id)
+
+  # For all other cases can execute the command directly
+  return execute_gcloud_command(_command_string[configuration].split(' '),
+                                project_id, human_readable)
diff --git a/sdk/python/kfp/cli/diagnose_me/gcp_test.py b/sdk/python/kfp/cli/diagnose_me/gcp_test.py
new file mode 100644
index 000000000000..daca45962531
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/gcp_test.py
@@ -0,0 +1,87 @@
+# Lint as: python3
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Tests for diagnose_me.gcp."""
+
+from typing import Text
+import unittest
+from unittest import mock
+from . import gcp
+from . import utility
+
+
+class GoogleCloudTest(unittest.TestCase):
+
+  @mock.patch.object(gcp, 'execute_gcloud_command', autospec=True)
+  def test_project_configuration_gcloud(self, mock_execute_gcloud_command):
+    """Tests gcloud commands."""
+    gcp.get_gcp_configuration(gcp.Commands.GET_APIS)
+    mock_execute_gcloud_command.assert_called_once_with(['services', 'list'],
+                                                        project_id=None,
+                                                        human_readable=False)
+
+  @mock.patch.object(gcp, 'execute_gsutil_command', autospec=True)
+  def test_project_configuration_gsutil(self, mock_execute_gsutil_command):
+    """Test Gsutil commands."""
+    gcp.get_gcp_configuration(gcp.Commands.GET_STORAGE_BUCKETS)
+    mock_execute_gsutil_command.assert_called_once_with(['ls'], project_id=None)
+
+  def test_Commands(self):
+    """Verify commands are formaated properly."""
+    for command in gcp.Commands:
+      self.assertIsInstance(gcp._command_string[command], Text)
+      self.assertNotIn('\t', gcp._command_string[command])
+      self.assertNotIn('\n', gcp._command_string[command])
+
+  @mock.patch.object(utility, 'ExecutorResponse', autospec=True)
+  def test_execute_gsutil_command(self, mock_executor_response):
+    """Test execute_gsutil_command."""
+    gcp.execute_gsutil_command(
+        [gcp._command_string[gcp.Commands.GET_STORAGE_BUCKETS]])
+    mock_executor_response().execute_command.assert_called_once_with(
+        ['gsutil', 'ls'])
+
+    gcp.execute_gsutil_command(
+        [gcp._command_string[gcp.Commands.GET_STORAGE_BUCKETS]],
+        project_id='test_project')
+    mock_executor_response().execute_command.assert_called_with(
+        ['gsutil', 'ls', '-p', 'test_project'])
+
+  @mock.patch.object(utility, 'ExecutorResponse', autospec=True)
+  def test_execute_gcloud_command(self, mock_executor_response):
+    """Test execute_gcloud_command."""
+    gcp.execute_gcloud_command(
+        gcp._command_string[gcp.Commands.GET_APIS].split(' '))
+    mock_executor_response().execute_command.assert_called_once_with(
+        ['gcloud', 'services', 'list', '--format', 'json'])
+
+    gcp.execute_gcloud_command(
+        gcp._command_string[gcp.Commands.GET_APIS].split(' '),
+        project_id='test_project')
+    # verify project id is added correctly
+    mock_executor_response().execute_command.assert_called_with([
+        'gcloud', 'services', 'list', '--format', 'json', '--project',
+        'test_project'
+    ])
+    # verify human_readable removes json fromat flag
+    gcp.execute_gcloud_command(
+        gcp._command_string[gcp.Commands.GET_APIS].split(' '),
+        project_id='test_project',
+        human_readable=True)
+    mock_executor_response().execute_command.assert_called_with(
+        ['gcloud', 'services', 'list', '--project', 'test_project'])
+
+
+if __name__ == '__main__':
+  unittest.main()
diff --git a/sdk/python/kfp/cli/diagnose_me/kubernetes_cluster.py b/sdk/python/kfp/cli/diagnose_me/kubernetes_cluster.py
new file mode 100644
index 000000000000..4a8920908112
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/kubernetes_cluster.py
@@ -0,0 +1,122 @@
+# Lint as: python3
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Functions for collecting diagnostic information on Kubernetes cluster."""
+
+import enum
+from typing import List, Text
+from . import utility
+
+
+class Commands(enum.Enum):
+  """Enum for kubernetes commands."""
+  GET_CONFIGURED_CONTEXT = 1
+  GET_PODS = 2
+  GET_PVCS = 3
+  GET_PVS = 4
+  GET_SECRETS = 5
+  GET_SERVICES = 6
+  GET_KUBECTL_VERSION = 7
+
+
+_command_string = {
+    Commands.GET_CONFIGURED_CONTEXT: 'config view',
+    Commands.GET_PODS: 'get pods',
+    Commands.GET_PVCS: 'get pvc',
+    Commands.GET_PVS: 'get pv',
+    Commands.GET_SECRETS: 'get secrets',
+    Commands.GET_SERVICES: 'get services',
+    Commands.GET_KUBECTL_VERSION: 'version',
+}
+
+
+def execute_kubectl_command(
+    kubectl_command_list: List[Text],
+    human_readable: bool = False) -> utility.ExecutorResponse:
+  """Invokes  the kubectl command.
+
+  Args:
+    kubectl_command_list: a command string list to be past to kubectl example
+      format is ['config', 'view']
+    human_readable: If false sets parameter -o json for all calls, otherwie
+      output will be in human readable format.
+
+  Returns:
+    utility.ExecutorResponse with outputs from stdout,stderr and execution code.
+  """
+  command_list = ['kubectl']
+  command_list.extend(kubectl_command_list)
+  if not human_readable:
+    command_list.extend(['-o', 'json'])
+
+  return utility.ExecutorResponse().execute_command(command_list)
+
+
+def get_kubectl_configuration(
+    configuration: Commands,
+    kubernetes_context: Text = None,
+    namespace: Text = None,
+    human_readable: bool = False) -> utility.ExecutorResponse:
+  """Captures the specified environment configuration.
+
+  Captures the environment state for the specified setting such as current
+  context, active pods, etc and returns it in as a dictionary format. if no
+  context is specified the system will use the current_context or error out of
+  none is specified.
+
+  Args:
+    configuration:
+      - K8_CONFIGURED_CONTEXT: returns all k8 configuration available in the
+        current env including current_context.
+      - PODS: returns all pods and their status details.
+      - PVCS: returns all PersistentVolumeClaim and their status details.
+      - SECRETS: returns all accessible k8 secrests.
+      - PVS: returns all PersistentVolume and their status details.
+      - SERVICES: returns all services and their status details.
+    kubernetes_context: Context to use to retrieve cluster specific commands, if
+      set to None calls will rely on current_context configured.
+    namespace: default name space to be used for the commaand, if not specifeid
+      --all-namespaces will be used.
+    human_readable: If true all output will be in human readable form insted of
+      Json.
+
+  Returns:
+    A list of dictionaries matching gcloud / gsutil output for the specified
+    configuration,or an error message if any occurs during execution.
+  """
+
+  if configuration in (Commands.GET_CONFIGURED_CONTEXT,
+                       Commands.GET_KUBECTL_VERSION):
+    return execute_kubectl_command((_command_string[configuration]).split(' '),
+                                   human_readable)
+
+  execution_command = _command_string[configuration].split(' ')
+  if kubernetes_context:
+    execution_command.extend(['--context', kubernetes_context])
+  if namespace:
+    execution_command.extend(['--namespace', namespace])
+  else:
+    execution_command.extend(['--all-namespaces'])
+
+  return execute_kubectl_command(execution_command, human_readable)
+
+
+def _get_kfp_runtime() -> Text:
+  """Captures the current version of kpf in k8 cluster.
+
+  Returns:
+    Returns the run-time version of kfp in as a string.
+  """
+  # TODO(chavoshi) needs to be implemented.
+  raise NotImplementedError
diff --git a/sdk/python/kfp/cli/diagnose_me/kubernetes_cluster_test.py b/sdk/python/kfp/cli/diagnose_me/kubernetes_cluster_test.py
new file mode 100644
index 000000000000..f72b8a6bcb33
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/kubernetes_cluster_test.py
@@ -0,0 +1,76 @@
+# Lint as: python3
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Tests for diagnose_me.kubernetes_cluster."""
+
+from typing import Text
+import unittest
+from unittest import mock
+from . import kubernetes_cluster as dkc
+from . import utility
+
+
+class KubernetesClusterTest(unittest.TestCase):
+
+  @mock.patch.object(dkc, 'execute_kubectl_command', autospec=True)
+  def test_project_configuration_gcloud(self, mock_execute_kubectl_command):
+    """Tests gcloud commands."""
+    dkc.get_kubectl_configuration(dkc.Commands.GET_PODS)
+    mock_execute_kubectl_command.assert_called_once_with(
+        ['get', 'pods', '--all-namespaces'], human_readable=False)
+
+    dkc.get_kubectl_configuration(dkc.Commands.GET_CONFIGURED_CONTEXT)
+    mock_execute_kubectl_command.assert_called_with(['config', 'view'],
+                                                    human_readable=False)
+
+    dkc.get_kubectl_configuration(dkc.Commands.GET_KUBECTL_VERSION)
+    mock_execute_kubectl_command.assert_called_with(['version'],
+                                                    human_readable=False)
+
+    dkc.get_kubectl_configuration(
+        dkc.Commands.GET_PODS, kubernetes_context='test_context')
+    mock_execute_kubectl_command.assert_called_with(
+        ['get', 'pods', '--context', 'test_context', '--all-namespaces'],
+        human_readable=False)
+
+    dkc.get_kubectl_configuration(
+        dkc.Commands.GET_PODS, kubernetes_context='test_context')
+    mock_execute_kubectl_command.assert_called_with(
+        ['get', 'pods', '--context', 'test_context', '--all-namespaces'],
+        human_readable=False)
+
+  def test_Commands(self):
+    """Verify commands are formaated properly."""
+    for command in dkc.Commands:
+      self.assertIsInstance(dkc._command_string[command], Text)
+      self.assertNotIn('\t', dkc._command_string[command])
+      self.assertNotIn('\n', dkc._command_string[command])
+
+  @mock.patch.object(utility, 'ExecutorResponse', autospec=True)
+  def test_execute_kubectl_command(self, mock_executor_response):
+    """Test execute_gsutil_command."""
+    dkc.execute_kubectl_command(
+        [dkc._command_string[dkc.Commands.GET_KUBECTL_VERSION]])
+    mock_executor_response().execute_command.assert_called_once_with(
+        ['kubectl', 'version', '-o', 'json'])
+
+    dkc.execute_kubectl_command(
+        [dkc._command_string[dkc.Commands.GET_KUBECTL_VERSION]],
+        human_readable=True)
+    mock_executor_response().execute_command.assert_called_with(
+        ['kubectl', 'version'])
+
+
+if __name__ == '__main__':
+  unittest.main()
diff --git a/sdk/python/kfp/cli/diagnose_me/utility.py b/sdk/python/kfp/cli/diagnose_me/utility.py
new file mode 100644
index 000000000000..33359f44309c
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/utility.py
@@ -0,0 +1,90 @@
+# Lint as: python3
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Supporting tools and classes for diagnose_me."""
+
+import json
+import subprocess
+from typing import List, Text
+
+
+class ExecutorResponse(object):
+  """Class for keeping track of output of _executor methods.
+
+  Data model for executing commands and capturing their response. This class
+  defines the data model layer for execution results, based on MVC design
+  pattern.
+
+  TODO() This class should be extended to contain data structure to better
+  represent the underlying data instaed of dict for various response types.
+  """
+
+  def execute_command(self, command_list: List[Text]):
+    """Executes the command in command_list.
+
+    sets values for _stdout,_std_err, and returncode accordingly.
+
+    TODO(): This method is kept in ExecutorResponse for simplicity, however this
+    deviates from MVP design pattern. It should be factored out in future.
+
+    Args:
+      command_list: A List of strings that represts the command and parameters
+        to be executed.
+
+    Returns:
+      Instance of utility.ExecutorResponse.
+    """
+
+    try:
+      # TODO() switch to process.run to simplify the code.
+      process = subprocess.Popen(
+          command_list, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
+      stdout, stderr = process.communicate()
+      self._stdout = stdout.decode('utf-8')
+      self._stderr = stderr.decode('utf-8')
+      self._returncode = process.returncode
+    except OSError as e:
+      self._stderr = e
+      self._stdout = ''
+      self._returncode = e.errno
+    self._parse_raw_input()
+    return self
+
+  def _parse_raw_input(self):
+    """Parses the raw input and popluates _json and _parsed properies."""
+    try:
+      self._parsed_output = json.loads(self._stdout)
+      self._json = self._stdout
+    except json.JSONDecodeError:
+      self._json = json.dumps(self._stdout)
+      self._parsed_output = self._stdout
+
+  @property
+  def parsed_output(self) -> Text:
+    """Json load results of stdout or raw results if stdout was not Json."""
+    return self._parsed_output
+
+  @property
+  def has_error(self) -> bool:
+    """Returns true if execution error code was not 0."""
+    return self._returncode != 0
+
+  @property
+  def json_output(self) -> Text:
+    """Run results in stdout in json format."""
+    return self._parsed_output
+
+  @property
+  def stderr(self):
+    return self._stderr
diff --git a/sdk/python/kfp/cli/diagnose_me/utility_test.py b/sdk/python/kfp/cli/diagnose_me/utility_test.py
new file mode 100644
index 000000000000..cffde79b76d7
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me/utility_test.py
@@ -0,0 +1,43 @@
+# Lint as: python3
+# Copyright 2019 Google LLC. All Rights Reserved.
+#
+# Licensed under the Apache License,Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Tests for diagnose_me.utility."""
+
+import unittest
+from . import utility
+
+
+class UtilityTest(unittest.TestCase):
+
+  def test_parse_raw_input_json(self):
+    """Testing json stdout is correctly parsed."""
+    response = utility.ExecutorResponse()
+    response._stdout = '{"key":"value"}'
+    response._parse_raw_input()
+
+    self.assertEqual(response._json, '{"key":"value"}')
+    self.assertEqual(response._parsed_output, {'key': 'value'})
+
+  def test_parse_raw_input_text(self):
+    """Testing non-json stdout is correctly parsed."""
+    response = utility.ExecutorResponse()
+    response._stdout = 'non-json string'
+    response._parse_raw_input()
+
+    self.assertEqual(response._json, '"non-json string"')
+    self.assertEqual(response._parsed_output, 'non-json string')
+
+
+if __name__ == '__main__':
+  unittest.main()
diff --git a/sdk/python/kfp/cli/diagnose_me_cli.py b/sdk/python/kfp/cli/diagnose_me_cli.py
new file mode 100644
index 000000000000..2161ddfdf3ca
--- /dev/null
+++ b/sdk/python/kfp/cli/diagnose_me_cli.py
@@ -0,0 +1,82 @@
+# Lint as: python3
+"""CLI interface for KFP diagnose_me tool."""
+
+from typing import Text
+import click
+from .diagnose_me import dev_env
+from .diagnose_me import gcp
+from .diagnose_me import kubernetes_cluster as k8
+from .diagnose_me import utility
+
+
+@click.group()
+def diagnose_me():
+  """Prints diagnoses information for KFP environment."""
+  pass
+
+
+@diagnose_me.command()
+@click.option(
+    '--json',
+    is_flag=True,
+    help='Output in Json fromat, human readable format is set by default.')
+@click.option(
+    '--project-id',
+    type=Text,
+    help='Target project id. It will use environment default if not specified.')
+@click.option(
+    '--namespace',
+    type=Text,
+    help='Namespace to use for Kubernatees cluster. It will use environment default if not specified.'
+)
+@click.pass_context
+def diagnose_me(ctx, json, project_id, namespace):
+  """Runs environment diagnostic with specified parameters."""
+  # validate kubectl, gcloud , and gsutil exist
+  local_env_gcloud_sdk = gcp.get_gcp_configuration(
+      gcp.Commands.GET_GCLOUD_VERSION,
+      project_id=project_id,
+      human_readable=False)
+  for app in ['Google Cloud SDK', 'gsutil', 'kubectl']:
+    if app not in local_env_gcloud_sdk.json_output:
+      print(
+          '%s is not installed, gcloud, gsutil and kubectl are required' % app,
+          'for this app to run. Please follow instructions at',
+          'https://cloud.google.com/sdk/install to install the SDK.')
+      return
+
+  # default behaviour dump all ocnfiguration
+  for gcp_command in gcp.Commands:
+    results = gcp.get_gcp_configuration(
+        gcp_command, project_id=project_id, human_readable=not json)
+    print_to_sdtout(results, gcp_command, not json)
+
+  for k8_command in k8.Commands:
+    results = k8.get_kubectl_configuration(
+        k8_command, human_readable=not json)
+    print_to_sdtout(results, k8_command, not json)
+
+  for dev_env_command in dev_env.Commands:
+    results = dev_env.get_dev_env_configuration(
+        dev_env_command, human_readable=not json)
+    print_to_sdtout(results, dev_env_command, not json)
+
+
+def print_to_sdtout(results: utility.ExecutorResponse, command: gcp.Commands,
+                    human_readable: bool):
+  """Viewer to print the ExecutorResponse results to stdout.
+
+  Args:
+    results: Execution results to be printed out
+    command: Command that was used for this execution
+    human_readable: Print results in human readable format.
+  """
+  print('\n================', command.name, '===================\n')
+  if results.has_error:
+    print(' An error occurred during the executions with details as follows:',
+          results.stderr)
+    return
+  if human_readable:
+    print(results.parsed_output)
+  else:
+    print(results.json_output)
diff --git a/sdk/python/kfp/cli/pipeline.py b/sdk/python/kfp/cli/pipeline.py
new file mode 100644
index 000000000000..e6654b97437a
--- /dev/null
+++ b/sdk/python/kfp/cli/pipeline.py
@@ -0,0 +1,101 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import click
+import logging
+from tabulate import tabulate
+
+
+@click.group()
+def pipeline():
+    """Manage pipeline resources"""
+    pass
+
+
+@pipeline.command()
+@click.option(
+    "-p",
+    "--pipeline-name",
+    help="Name of the pipeline."
+)
+@click.argument("package-file")
+@click.pass_context
+def upload(ctx, pipeline_name, package_file):
+    """Upload a KFP pipeline"""
+    client = ctx.obj["client"]
+    if not pipeline_name:
+        pipeline_name = package_file.split(".")[0]
+
+    pipeline = client.upload_pipeline(package_file, pipeline_name)
+    logging.info("Pipeline {} has been submitted\n".format(pipeline.id))
+    _display_pipeline(pipeline)
+
+
+@pipeline.command()
+@click.option(
+    "--max-size",
+    default=100,
+    help="Max size of the listed pipelines."
+)
+@click.pass_context
+def list(ctx, max_size):
+    """List uploaded KFP pipelines"""
+    client = ctx.obj["client"]
+
+    response = client.list_pipelines(
+        page_size=max_size,
+        sort_by="created_at desc"
+    )
+    if response.pipelines:
+        _print_pipelines(response.pipelines)
+    else:
+        logging.info("No pipelines found")
+
+
+@pipeline.command()
+@click.argument("pipeline-id")
+@click.pass_context
+def get(ctx, pipeline_id):
+    """Get detailed information about an uploaded KFP pipeline"""
+    client = ctx.obj["client"]
+
+    pipeline = client.get_pipeline(pipeline_id)
+    _display_pipeline(pipeline)
+
+
+def _print_pipelines(pipelines):
+    headers = ["Pipeline ID", "Name", "Uploaded at"]
+    data = [[
+        pipeline.id,
+        pipeline.name,
+        pipeline.created_at.isoformat()
+    ] for pipeline in pipelines]
+    print(tabulate(data, headers=headers, tablefmt="grid"))
+
+
+def _display_pipeline(pipeline):
+    # Print pipeline information
+    print(tabulate([], headers=["Pipeline Details"]))
+    table = [
+        ["ID", pipeline.id],
+        ["Name", pipeline.name],
+        ["Description", pipeline.description],
+        ["Uploaded at", pipeline.created_at.isoformat()],
+    ]
+    print(tabulate(table, tablefmt="plain"))
+
+    # Print pipeline parameter details
+    headers = ["Parameter Name", "Default Value"]
+    data = [[param.name, param.value] for param in pipeline.parameters]
+    print(tabulate(data, headers=headers, tablefmt="grid"))
diff --git a/sdk/python/kfp/compiler/_data_passing_rewriter.py b/sdk/python/kfp/compiler/_data_passing_rewriter.py
index 48f8b97e0268..7a741b90121a 100644
--- a/sdk/python/kfp/compiler/_data_passing_rewriter.py
+++ b/sdk/python/kfp/compiler/_data_passing_rewriter.py
@@ -57,6 +57,9 @@ def fix_big_data_passing(workflow: dict) -> dict:
                     template_input_to_parent_constant_arguments.setdefault((task_template_name, task_input_name), set()).add(argument_value)
 
                 placeholder_type = argument_placeholder_parts[0]
+                if placeholder_type not in ('inputs', 'outputs', 'tasks', 'steps', 'workflow', 'pod', 'item'):
+                    # Do not fail on Jinja or other double-curly-brace templates
+                    continue
                 if placeholder_type == 'inputs':
                     assert argument_placeholder_parts[1] == 'parameters'
                     dag_input_name = argument_placeholder_parts[2]
@@ -135,6 +138,9 @@ def fix_big_data_passing(workflow: dict) -> dict:
             for placeholder in placeholders:
                 parts = placeholder.split('.')
                 placeholder_type = parts[0]
+                if placeholder_type not in ('inputs', 'outputs', 'tasks', 'steps', 'workflow', 'pod', 'item'):
+                    # Do not fail on Jinja or other double-curly-brace templates
+                    continue
                 if placeholder_type == 'inputs':
                     if parts[1] == 'parameters':
                         input_name = parts[2]
@@ -162,6 +168,10 @@ def fix_big_data_passing(workflow: dict) -> dict:
         for placeholder in placeholders:
             parts = placeholder.split('.')
             placeholder_type = parts[0]
+            if placeholder_type not in ('inputs', 'outputs', 'tasks', 'steps', 'workflow', 'pod', 'item'):
+                # Do not fail on Jinja or other double-curly-brace templates
+                continue
+
             if placeholder_type == 'workflow' or placeholder_type == 'pod':
                 pass
             elif placeholder_type == 'inputs':
@@ -169,13 +179,11 @@ def fix_big_data_passing(workflow: dict) -> dict:
                     input_name = parts[2]
                     inputs_directly_consumed_as_parameters.add((template_name, input_name))
                 elif parts[1] == 'artifacts':
-                    raise AssertionError # Should not happen in container templates
+                    raise AssertionError('Found unexpected Argo input artifact placeholder in container template: {}'.format(placeholder))
                 else:
-                    raise AssertionError
-            elif placeholder_type == 'outputs':
-                raise AssertionError # Should not happen in container templates
+                    raise AssertionError('Found unexpected Argo input placeholder in container template: {}'.format(placeholder))
             else:
-                raise AssertionError
+                raise AssertionError('Found unexpected Argo placeholder in container template: {}'.format(placeholder))
 
     # Finished indexing data consumers
 
diff --git a/sdk/python/kfp/compiler/_k8s_helper.py b/sdk/python/kfp/compiler/_k8s_helper.py
index 607227ebcd8c..5a917fc522f5 100644
--- a/sdk/python/kfp/compiler/_k8s_helper.py
+++ b/sdk/python/kfp/compiler/_k8s_helper.py
@@ -12,140 +12,19 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-from datetime import datetime
-from kubernetes import client as k8s_client
-from kubernetes import config
-import time
-import logging
 import re
 
 from .. import dsl
 
 
-class K8sHelper(object):
-  """ Kubernetes Helper """
-
-  def __init__(self):
-    if not self._configure_k8s():
-      raise Exception('K8sHelper __init__ failure')
-
-  def _configure_k8s(self):
-    try:
-      config.load_incluster_config()
-      logging.info('Initialized with in-cluster config.')
-    except:
-      logging.info('Cannot find in-cluster config, trying the local kubernetes config. ')
-      try:
-        config.load_kube_config()
-        logging.info('Found local kubernetes config. Initialized with kube_config.')
-      except:
-        raise RuntimeError('Forgot to run the gcloud command? Check out the link: \
-        https://cloud.google.com/kubernetes-engine/docs/how-to/cluster-access-for-kubectl for more information')
-    self._api_client = k8s_client.ApiClient()
-    self._corev1 = k8s_client.CoreV1Api(self._api_client)
-    return True
-
-  def _create_k8s_job(self, yaml_spec):
-    """ _create_k8s_job creates a kubernetes job based on the yaml spec """
-    pod = k8s_client.V1Pod(metadata=k8s_client.V1ObjectMeta(generate_name=yaml_spec['metadata']['generateName'],
-                                                            annotations=yaml_spec['metadata']['annotations']))
-    container = k8s_client.V1Container(name = yaml_spec['spec']['containers'][0]['name'],
-                                       image = yaml_spec['spec']['containers'][0]['image'],
-                                       args = yaml_spec['spec']['containers'][0]['args'],
-                                       volume_mounts = [k8s_client.V1VolumeMount(
-                                           name=yaml_spec['spec']['containers'][0]['volumeMounts'][0]['name'],
-                                           mount_path=yaml_spec['spec']['containers'][0]['volumeMounts'][0]['mountPath'],
-                                       )],
-                                       env = [k8s_client.V1EnvVar(
-                                           name=yaml_spec['spec']['containers'][0]['env'][0]['name'],
-                                           value=yaml_spec['spec']['containers'][0]['env'][0]['value'],
-                                       )])
-    pod.spec = k8s_client.V1PodSpec(restart_policy=yaml_spec['spec']['restartPolicy'],
-                                    containers = [container],
-                                    service_account_name=yaml_spec['spec']['serviceAccountName'],
-                                    volumes=[k8s_client.V1Volume(
-                                        name=yaml_spec['spec']['volumes'][0]['name'],
-                                        secret=k8s_client.V1SecretVolumeSource(
-                                           secret_name=yaml_spec['spec']['volumes'][0]['secret']['secretName'],
-                                        )
-                                    )])
-    try:
-      api_response = self._corev1.create_namespaced_pod(yaml_spec['metadata']['namespace'], pod)
-      return api_response.metadata.name, True
-    except k8s_client.rest.ApiException as e:
-      logging.exception("Exception when calling CoreV1Api->create_namespaced_pod: {}\n".format(str(e)))
-      return '', False
-
-  def _wait_for_k8s_job(self, pod_name, yaml_spec, timeout):
-    """ _wait_for_k8s_job waits for the job to complete """
-    status = 'running'
-    start_time = datetime.now()
-    while status in ['pending', 'running']:
-      # Pod pending values: https://github.com/kubernetes-client/python/blob/master/kubernetes/docs/V1PodStatus.md
-      try:
-        api_response = self._corev1.read_namespaced_pod(pod_name, yaml_spec['metadata']['namespace'])
-        status = api_response.status.phase.lower()
-        time.sleep(5)
-        elapsed_time = (datetime.now() - start_time).seconds
-        logging.info('{} seconds: waiting for job to complete'.format(elapsed_time))
-        if elapsed_time > timeout:
-          logging.info('Kubernetes job timeout')
-          return False
-      except k8s_client.rest.ApiException as e:
-        logging.exception('Exception when calling CoreV1Api->read_namespaced_pod: {}\n'.format(str(e)))
-        return False
-    return status == 'succeeded'
-
-  def _delete_k8s_job(self, pod_name, yaml_spec):
-    """ _delete_k8s_job deletes a pod """
-    try:
-      api_response = self._corev1.delete_namespaced_pod(pod_name, yaml_spec['metadata']['namespace'], body=k8s_client.V1DeleteOptions())
-    except k8s_client.rest.ApiException as e:
-      logging.exception('Exception when calling CoreV1Api->delete_namespaced_pod: {}\n'.format(str(e)))
-
-  def _read_pod_log(self, pod_name, yaml_spec):
-    try:
-      api_response = self._corev1.read_namespaced_pod_log(pod_name, yaml_spec['metadata']['namespace'])
-    except k8s_client.rest.ApiException as e:
-      logging.exception('Exception when calling CoreV1Api->read_namespaced_pod_log: {}\n'.format(str(e)))
-      return False
-    return api_response
-
-  def _read_pod_status(self, pod_name, namespace):
-    try:
-      # Using read_namespaced_pod due to the following error: "pods \"kaniko-p2phh\" is forbidden: User \"system:serviceaccount:kubeflow:jupyter-notebook\" cannot get pods/status in the namespace \"kubeflow\""
-      #api_response = self._corev1.read_namespaced_pod_status(pod_name, namespace)
-      api_response = self._corev1.read_namespaced_pod(pod_name, namespace)
-    except k8s_client.rest.ApiException as e:
-      logging.exception('Exception when calling CoreV1Api->read_namespaced_pod_status: {}\n'.format(str(e)))
-      return False
-    return api_response
-
-  def run_job(self, yaml_spec, timeout=600):
-    """ run_job runs a kubernetes job and clean up afterwards """
-    pod_name, succ = self._create_k8s_job(yaml_spec)
-    namespace = yaml_spec['metadata']['namespace']
-    if not succ:
-      raise RuntimeError('Kubernetes job creation failed.')
-    # timeout in seconds
-    succ = self._wait_for_k8s_job(pod_name, yaml_spec, timeout)
-    if not succ:
-      logging.info('Kubernetes job failed.')
-      print(self._read_pod_log(pod_name, yaml_spec))
-      raise RuntimeError('Kubernetes job failed.')
-    status_obj = self._read_pod_status(pod_name, namespace)
-    self._delete_k8s_job(pod_name, yaml_spec)
-    return status_obj
-
-  @staticmethod
-  def sanitize_k8s_name(name):
+def sanitize_k8s_name(name):
     """From _make_kubernetes_name
       sanitize_k8s_name cleans and converts the names in the workflow.
     """
     return re.sub('-+', '-', re.sub('[^-0-9a-z]+', '-', name.lower())).lstrip('-').rstrip('-')
 
-  @staticmethod
-  def convert_k8s_obj_to_json(k8s_obj):
+
+def convert_k8s_obj_to_json(k8s_obj):
     """
     Builds a JSON K8s object.
 
@@ -170,10 +49,10 @@ def convert_k8s_obj_to_json(k8s_obj):
     elif isinstance(k8s_obj, PRIMITIVE_TYPES):
       return k8s_obj
     elif isinstance(k8s_obj, list):
-      return [K8sHelper.convert_k8s_obj_to_json(sub_obj)
+      return [convert_k8s_obj_to_json(sub_obj)
               for sub_obj in k8s_obj]
     elif isinstance(k8s_obj, tuple):
-      return tuple(K8sHelper.convert_k8s_obj_to_json(sub_obj)
+      return tuple(convert_k8s_obj_to_json(sub_obj)
                    for sub_obj in k8s_obj)
     elif isinstance(k8s_obj, (datetime, date)):
       return k8s_obj.isoformat()
@@ -196,5 +75,5 @@ def convert_k8s_obj_to_json(k8s_obj):
                   for attr, _ in iteritems(attr_types)
                   if getattr(k8s_obj, attr) is not None}
 
-    return {key: K8sHelper.convert_k8s_obj_to_json(val)
+    return {key: convert_k8s_obj_to_json(val)
             for key, val in iteritems(obj_dict)}
\ No newline at end of file
diff --git a/sdk/python/kfp/compiler/_op_to_template.py b/sdk/python/kfp/compiler/_op_to_template.py
index f714ebfdf4ef..de67be453c38 100644
--- a/sdk/python/kfp/compiler/_op_to_template.py
+++ b/sdk/python/kfp/compiler/_op_to_template.py
@@ -18,7 +18,7 @@
 from collections import OrderedDict
 from typing import Union, List, Any, Callable, TypeVar, Dict
 
-from ._k8s_helper import K8sHelper
+from ._k8s_helper import convert_k8s_obj_to_json
 from .. import dsl
 from ..dsl._container_op import BaseOp
 from ..dsl._artifact_location import ArtifactLocation
@@ -73,7 +73,7 @@ def _process_obj(obj: Any, map_to_tmpl_var: dict):
         for key in obj.swagger_types.keys():
             setattr(obj, key, _process_obj(getattr(obj, key), map_to_tmpl_var))
         # return json representation of the k8s obj
-        return K8sHelper.convert_k8s_obj_to_json(obj)
+        return convert_k8s_obj_to_json(obj)
 
     # k8s objects (generated from openapi)
     if hasattr(obj, 'openapi_types') and isinstance(obj.openapi_types, dict):
@@ -81,7 +81,7 @@ def _process_obj(obj: Any, map_to_tmpl_var: dict):
         for key in obj.openapi_types.keys():
             setattr(obj, key, _process_obj(getattr(obj, key), map_to_tmpl_var))
         # return json representation of the k8s obj
-        return K8sHelper.convert_k8s_obj_to_json(obj)
+        return convert_k8s_obj_to_json(obj)
 
     # do nothing
     return obj
@@ -193,7 +193,7 @@ def _op_to_template(op: BaseOp):
         output_artifact_paths.update(sorted(((param.full_name, processed_op.file_outputs[param.name]) for param in processed_op.outputs.values()), key=lambda x: x[0]))
 
         output_artifacts = [
-             K8sHelper.convert_k8s_obj_to_json(
+             convert_k8s_obj_to_json(
                  ArtifactLocation.create_artifact_for_s3(
                      op.artifact_location, 
                      name=name, 
@@ -205,7 +205,7 @@ def _op_to_template(op: BaseOp):
         # workflow template
         template = {
             'name': processed_op.name,
-            'container': K8sHelper.convert_k8s_obj_to_json(
+            'container': convert_k8s_obj_to_json(
                 processed_op.container
             )
         }
@@ -215,12 +215,12 @@ def _op_to_template(op: BaseOp):
 
         # workflow template
         processed_op.resource["manifest"] = yaml.dump(
-            K8sHelper.convert_k8s_obj_to_json(processed_op.k8s_resource),
+            convert_k8s_obj_to_json(processed_op.k8s_resource),
             default_flow_style=False
         )
         template = {
             'name': processed_op.name,
-            'resource': K8sHelper.convert_k8s_obj_to_json(
+            'resource': convert_k8s_obj_to_json(
                 processed_op.resource
             )
         }
@@ -251,7 +251,7 @@ def _op_to_template(op: BaseOp):
 
     # affinity
     if processed_op.affinity:
-        template['affinity'] = K8sHelper.convert_k8s_obj_to_json(processed_op.affinity)
+        template['affinity'] = convert_k8s_obj_to_json(processed_op.affinity)
 
     # metadata
     if processed_op.pod_annotations or processed_op.pod_labels:
@@ -278,7 +278,7 @@ def _op_to_template(op: BaseOp):
 
     # volumes
     if processed_op.volumes:
-        template['volumes'] = [K8sHelper.convert_k8s_obj_to_json(volume) for volume in processed_op.volumes]
+        template['volumes'] = [convert_k8s_obj_to_json(volume) for volume in processed_op.volumes]
         template['volumes'].sort(key=lambda x: x['name'])
 
     # Display name
diff --git a/sdk/python/kfp/compiler/compiler.py b/sdk/python/kfp/compiler/compiler.py
index 2b07d900b3fe..dc7535e15250 100644
--- a/sdk/python/kfp/compiler/compiler.py
+++ b/sdk/python/kfp/compiler/compiler.py
@@ -23,7 +23,7 @@
 from kfp.dsl import _for_loop
 
 from .. import dsl
-from ._k8s_helper import K8sHelper
+from ._k8s_helper import convert_k8s_obj_to_json, sanitize_k8s_name
 from ._op_to_template import _op_to_template
 from ._default_transformers import add_pod_env
 
@@ -639,7 +639,7 @@ def _create_pipeline_workflow(self, args, pipeline, op_transformers=None, pipeli
     if len(pipeline_conf.image_pull_secrets) > 0:
       image_pull_secrets = []
       for image_pull_secret in pipeline_conf.image_pull_secrets:
-        image_pull_secrets.append(K8sHelper.convert_k8s_obj_to_json(image_pull_secret))
+        image_pull_secrets.append(convert_k8s_obj_to_json(image_pull_secret))
       workflow['spec']['imagePullSecrets'] = image_pull_secrets
 
     if pipeline_conf.timeout:
@@ -684,26 +684,26 @@ def _sanitize_and_inject_artifact(self, pipeline: dsl.Pipeline, pipeline_conf=No
         if artifact_location and not op.artifact_location:
           op.artifact_location = artifact_location
 
-      sanitized_name = K8sHelper.sanitize_k8s_name(op.name)
+      sanitized_name = sanitize_k8s_name(op.name)
       op.name = sanitized_name
       for param in op.outputs.values():
-        param.name = K8sHelper.sanitize_k8s_name(param.name)
+        param.name = sanitize_k8s_name(param.name)
         if param.op_name:
-          param.op_name = K8sHelper.sanitize_k8s_name(param.op_name)
-      if op.output is not None:
-        op.output.name = K8sHelper.sanitize_k8s_name(op.output.name)
-        op.output.op_name = K8sHelper.sanitize_k8s_name(op.output.op_name)
+          param.op_name = sanitize_k8s_name(param.op_name)
+      if op.output is not None and not isinstance(op.output, dsl._container_op._MultipleOutputsError):
+        op.output.name = sanitize_k8s_name(op.output.name)
+        op.output.op_name = sanitize_k8s_name(op.output.op_name)
       if op.dependent_names:
-        op.dependent_names = [K8sHelper.sanitize_k8s_name(name) for name in op.dependent_names]
+        op.dependent_names = [sanitize_k8s_name(name) for name in op.dependent_names]
       if isinstance(op, dsl.ContainerOp) and op.file_outputs is not None:
         sanitized_file_outputs = {}
         for key in op.file_outputs.keys():
-          sanitized_file_outputs[K8sHelper.sanitize_k8s_name(key)] = op.file_outputs[key]
+          sanitized_file_outputs[sanitize_k8s_name(key)] = op.file_outputs[key]
         op.file_outputs = sanitized_file_outputs
       elif isinstance(op, dsl.ResourceOp) and op.attribute_outputs is not None:
         sanitized_attribute_outputs = {}
         for key in op.attribute_outputs.keys():
-          sanitized_attribute_outputs[K8sHelper.sanitize_k8s_name(key)] = \
+          sanitized_attribute_outputs[sanitize_k8s_name(key)] = \
             op.attribute_outputs[key]
         op.attribute_outputs = sanitized_attribute_outputs
       sanitized_ops[sanitized_name] = op
@@ -725,7 +725,7 @@ def _create_workflow(self,
     pipeline_meta = _extract_pipeline_metadata(pipeline_func)
     pipeline_meta.name = pipeline_name or pipeline_meta.name
     pipeline_meta.description = pipeline_description or pipeline_meta.description
-    pipeline_name = K8sHelper.sanitize_k8s_name(pipeline_meta.name)
+    pipeline_name = sanitize_k8s_name(pipeline_meta.name)
 
     # Need to first clear the default value of dsl.PipelineParams. Otherwise, it
     # will be resolved immediately in place when being to each component.
@@ -746,7 +746,7 @@ def _create_workflow(self,
         if arg_name == input.name:
           arg_type = input.type
           break
-      args_list.append(dsl.PipelineParam(K8sHelper.sanitize_k8s_name(arg_name), param_type=arg_type))
+      args_list.append(dsl.PipelineParam(sanitize_k8s_name(arg_name), param_type=arg_type))
 
     with dsl.Pipeline(pipeline_name) as dsl_pipeline:
       pipeline_func(*args_list)
@@ -759,7 +759,7 @@ def _create_workflow(self,
     # Fill in the default values.
     args_list_with_defaults = []
     if pipeline_meta.inputs:
-      args_list_with_defaults = [dsl.PipelineParam(K8sHelper.sanitize_k8s_name(arg_name))
+      args_list_with_defaults = [dsl.PipelineParam(sanitize_k8s_name(arg_name))
                                  for arg_name in argspec.args]
       if argspec.defaults:
         for arg, default in zip(reversed(args_list_with_defaults), reversed(argspec.defaults)):
diff --git a/sdk/python/kfp/components/_components.py b/sdk/python/kfp/components/_components.py
index 54d1bb5f84a2..9613bcad4ae8 100644
--- a/sdk/python/kfp/components/_components.py
+++ b/sdk/python/kfp/components/_components.py
@@ -298,7 +298,7 @@ def resolve_argument(argument):
         if isinstance(argument, (str, int, float, bool)):
             return argument
         elif isinstance(argument, GraphInputArgument):
-            return graph_input_arguments[argument.input_name]
+            return graph_input_arguments[argument.graph_input.input_name]
         elif isinstance(argument, TaskOutputArgument):
             upstream_task_output_ref = argument.task_output
             upstream_task_outputs = outputs_of_tasks[upstream_task_output_ref.task_id]
diff --git a/sdk/python/kfp/components/_python_op.py b/sdk/python/kfp/components/_python_op.py
index 0fad3343c67e..3338d0805608 100644
--- a/sdk/python/kfp/components/_python_op.py
+++ b/sdk/python/kfp/components/_python_op.py
@@ -190,26 +190,29 @@ def _capture_function_code_using_cloudpickle(func, modules_to_capture: List[str]
 
 
 def _capture_function_code_using_source_copy(func) -> str:	
-    import inspect	
+    import textwrap
 
-    #Source code can include decorators line @python_op. Remove them
-    (func_code_lines, _) = inspect.getsourcelines(func)
-    while func_code_lines[0].lstrip().startswith('@'): #decorator
-        del func_code_lines[0]
+    func_code = inspect.getsource(func)
 
     #Function might be defined in some indented scope (e.g. in another function).
     #We need to handle this and properly dedent the function source code
-    first_line = func_code_lines[0]
-    indent = len(first_line) - len(first_line.lstrip())
-    func_code_lines = [line[indent:] for line in func_code_lines]
+    func_code = textwrap.dedent(func_code)
+    func_code_lines = func_code.split('\n')
+
+    # Removing possible decorators (can be multiline) until the function definition is found
+    while func_code_lines and not func_code_lines[0].startswith('def '):
+        del func_code_lines[0]
+
+    if not func_code_lines:
+        raise ValueError('Failed to dedent and clean up the source of function "{}". It is probably not properly indented.'.format(func.__name__))
 
     #TODO: Add support for copying the NamedTuple subclass declaration code
     #Adding NamedTuple import if needed
     if hasattr(inspect.signature(func).return_annotation, '_fields'): #NamedTuple
-        func_code_lines.insert(0, '\n')
-        func_code_lines.insert(0, 'from typing import NamedTuple\n')
+        func_code_lines.insert(0, '')
+        func_code_lines.insert(0, 'from typing import NamedTuple')
 
-    return ''.join(func_code_lines) #Lines retain their \n endings
+    return '\n'.join(func_code_lines)
 
 
 def _extract_component_interface(func) -> ComponentSpec:
@@ -460,11 +463,11 @@ def get_serializer_and_register_definitions(type_name) -> str:
         line = '_parser.add_argument("{param_flag}", dest="{param_var}", type=str, nargs={nargs})'.format(
             param_flag=param_flag,
             param_var=output_param_var,
-            nargs=len(component_spec.outputs),
+            nargs=len(outputs_passed_through_func_return_tuple),
         )
         arg_parse_code_lines.append(line)
         arguments.append(param_flag)
-        arguments.extend(OutputPathPlaceholder(output.name) for output in component_spec.outputs)
+        arguments.extend(OutputPathPlaceholder(output.name) for output in outputs_passed_through_func_return_tuple)
 
     output_serialization_expression_strings = []
     for output in outputs_passed_through_func_return_tuple:
@@ -480,6 +483,8 @@ def get_serializer_and_register_definitions(type_name) -> str:
         '_output_files = _parsed_args.pop("_output_paths", [])',
     ])
 
+    output_serialization_code = ''.join('    {},\n'.format(s) for s in output_serialization_expression_strings)
+
     full_source = \
 '''\
 {pre_func_code}
@@ -496,7 +501,7 @@ def get_serializer_and_register_definitions(type_name) -> str:
     _outputs = [_outputs]
 
 _output_serializers = [
-    {output_serialization_code}
+{output_serialization_code}
 ]
 
 import os
@@ -513,7 +518,7 @@ def get_serializer_and_register_definitions(type_name) -> str:
         pre_func_code=pre_func_code,
         extra_code=extra_code,
         arg_parse_code='\n'.join(arg_parse_code_lines),
-        output_serialization_code=',\n    '.join(output_serialization_expression_strings),
+        output_serialization_code=output_serialization_code,
     )
 
     #Removing consecutive blank lines
diff --git a/sdk/python/kfp/components/_python_to_graph_component.py b/sdk/python/kfp/components/_python_to_graph_component.py
index 6562ede17c02..8a100ec70e49 100644
--- a/sdk/python/kfp/components/_python_to_graph_component.py
+++ b/sdk/python/kfp/components/_python_to_graph_component.py
@@ -22,7 +22,7 @@
 from typing import Callable
 
 from . import _components
-from ._structures import TaskSpec, ComponentSpec, OutputSpec, GraphInputArgument, TaskOutputArgument, GraphImplementation, GraphSpec
+from ._structures import TaskSpec, ComponentSpec, OutputSpec, GraphInputReference, TaskOutputArgument, GraphImplementation, GraphSpec
 from ._naming import _make_name_unique_by_adding_index
 from ._python_op import _extract_component_interface
 
@@ -90,7 +90,7 @@ def task_construction_handler(task: TaskSpec):
 
     # Preparing the pipeline_func arguments
     # TODO: The key should be original parameter name if different
-    pipeline_func_args = {input.name: GraphInputArgument(input_name=input.name) for input in input_specs}
+    pipeline_func_args = {input.name: GraphInputReference(input_name=input.name).as_argument() for input in input_specs}
 
     try:
         #Setting the handler to fix and catch the tasks.
diff --git a/sdk/python/kfp/components/_structures.py b/sdk/python/kfp/components/_structures.py
index 93c8bf3e0f53..a68b1cc5b3c4 100644
--- a/sdk/python/kfp/components/_structures.py
+++ b/sdk/python/kfp/components/_structures.py
@@ -31,6 +31,7 @@
 
     'ComponentReference',
 
+    'GraphInputReference',
     'GraphInputArgument',
     'TaskOutputReference',
     'TaskOutputArgument',
@@ -306,7 +307,7 @@ def verify_arg(arg):
                 for task in graph.tasks.values():
                     if task.arguments is not None:
                         for argument in task.arguments.values():
-                            if isinstance(argument, GraphInputArgument) and argument.input_name not in self._inputs_dict:
+                            if isinstance(argument, GraphInputArgument) and argument.graph_input.input_name not in self._inputs_dict:
                                 raise TypeError('Argument "{}" references non-existing input.'.format(argument))
 
     def save(self, file_path: str):
@@ -334,14 +335,38 @@ def _post_init(self) -> None:
             raise TypeError('Need at least one argument.')
 
 
+class GraphInputReference(ModelBase):
+    '''References the input of the graph (the scope is a single graph).'''
+    _serialized_names = {
+        'input_name': 'inputName',
+    }
+
+    def __init__(self,
+        input_name: str,
+        type: Optional[TypeSpecType] = None,    # Can be used to override the reference data type
+    ):
+        super().__init__(locals())
+
+    def as_argument(self) -> 'GraphInputArgument':
+        return GraphInputArgument(graph_input=self)
+
+    def with_type(self, type_spec: TypeSpecType) -> 'GraphInputReference':
+        return GraphInputReference(
+            input_name=self.input_name,
+            type=type_spec,
+        )
+
+    def without_type(self) -> 'GraphInputReference':
+        return self.with_type(None)
+
 class GraphInputArgument(ModelBase):
     '''Represents the component argument value that comes from the graph component input.'''
     _serialized_names = {
-        'input_name': 'graphInput',
+        'graph_input': 'graphInput',
     }
 
     def __init__(self,
-        input_name: str,
+        graph_input: GraphInputReference,
     ):
         super().__init__(locals())
 
diff --git a/sdk/python/kfp/containers/_build_image_api.py b/sdk/python/kfp/containers/_build_image_api.py
index af91b561ed7e..b5981ab8275e 100644
--- a/sdk/python/kfp/containers/_build_image_api.py
+++ b/sdk/python/kfp/containers/_build_image_api.py
@@ -25,6 +25,7 @@
 
 import requests
 
+from ._cache import calculate_recursive_dir_hash, try_read_value_from_cache, write_value_to_cache
 from ._container_builder import ContainerBuilder
 
 
@@ -113,11 +114,20 @@ def build_image_from_working_dir(image_name: str = None, working_dir: str = None
             dockerfile_text = _generate_dockerfile_text(context_dir, dst_dockerfile_path, base_image)
             with open(dst_dockerfile_path, 'w') as f:
                 f.write(dockerfile_text)
+        
+        cache_name = 'build_image_from_working_dir'
+        cache_key = calculate_recursive_dir_hash(context_dir)
+        cached_image_name = try_read_value_from_cache(cache_name, cache_key)
+        if cached_image_name:
+            return cached_image_name
 
         if builder is None:
             builder = _get_default_image_builder()
-        return builder.build(
+        image_name = builder.build(
             local_dir=context_dir,
             target_image=image_name,
             timeout=timeout,
         )
+        if image_name:
+            write_value_to_cache(cache_name, cache_key, image_name)
+        return image_name
diff --git a/sdk/python/kfp/containers/_cache.py b/sdk/python/kfp/containers/_cache.py
new file mode 100644
index 000000000000..b5199f65b15f
--- /dev/null
+++ b/sdk/python/kfp/containers/_cache.py
@@ -0,0 +1,69 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the speci
+
+import hashlib
+import os
+import shutil
+import tempfile
+from pathlib import Path
+
+
+def calculate_file_hash(file_path: str):
+    block_size = 64*1024
+    sha = hashlib.sha256()
+    with open(file_path, 'rb') as fp:
+        while True:
+            data = fp.read(block_size)
+            if not data:
+                break
+            sha.update(data)
+    return sha.hexdigest()
+
+
+def calculate_recursive_dir_hash(root_dir_path: str):
+    path_hashes = {}
+    for dirpath, dirnames, filenames in os.walk(root_dir_path):
+        for file_name in filenames:
+            file_path = os.path.join(dirpath, file_name)
+            rel_file_path = os.path.relpath(file_path, root_dir_path)
+            file_hash = calculate_file_hash(file_path)
+            path_hashes[rel_file_path] = file_hash
+    binary_path_hash_lines = sorted(path.encode('utf-8') + b'\t' + path_hash.encode('utf-8') + b'\n' for path, path_hash in path_hashes.items())
+    binary_path_hash_doc = b''.join(binary_path_hash_lines)
+
+    full_hash = hashlib.sha256(binary_path_hash_doc).hexdigest()
+    return full_hash
+
+
+def try_read_value_from_cache(cache_type: str, key: str) -> str:
+    cache_file_path = Path(tempfile.tempdir) / cache_type / key
+    if cache_file_path.exists():
+        return cache_file_path.read_text()
+    return None
+
+
+def write_value_to_cache(cache_type: str, key: str, value: str):
+    cache_file_path = Path(tempfile.tempdir) / cache_type / key
+    if cache_file_path.exists():
+        old_value = cache_file_path.read_text()
+        if value != old_value:
+            import warnings
+            warnings.warn('Overwriting existing cache entry "{}" with value "{}" != "{}".'.format(key, value, old_value))
+    cache_file_path.parent.mkdir(parents=True, exist_ok=True)
+    cache_file_path.write_text(value)
+
+
+def clear_cache(cache_type: str):
+    cache_file_path = Path(tempfile.tempdir) / cache_type
+    if cache_file_path.exists():
+        shutil.rmtree(cache_file_path)
diff --git a/sdk/python/kfp/containers/_container_builder.py b/sdk/python/kfp/containers/_container_builder.py
index b7def6bbcdc6..315bfd3d3e7f 100644
--- a/sdk/python/kfp/containers/_container_builder.py
+++ b/sdk/python/kfp/containers/_container_builder.py
@@ -64,15 +64,17 @@ def __init__(self, gcs_staging=None, gcr_image_tag=None, namespace=None):
     self._gcs_staging = gcs_staging
     self._gcs_staging_checked = False
     self._default_image_name = gcr_image_tag
-
-    # Configure the namespace
     self._namespace = namespace
-    if namespace is None:
+
+  def _get_namespace(self):
+    if self._namespace is None:
+      # Configure the namespace
       if os.path.exists(SERVICEACCOUNT_NAMESPACE):
         with open(SERVICEACCOUNT_NAMESPACE, 'r') as f:
           self._namespace = f.read()
       else:
         self._namespace = 'kubeflow'
+    return self._namespace
 
   def _get_staging_location(self):
     if self._gcs_staging_checked:
@@ -114,7 +116,7 @@ def _generate_kaniko_spec(self, context, docker_filename, target_image):
         'apiVersion': 'v1',
         'metadata': {
             'generateName': 'kaniko-',
-            'namespace': self._namespace,
+            'namespace': self._get_namespace(),
             'annotations': {
                 'sidecar.istio.io/inject': 'false'
             },
@@ -181,8 +183,8 @@ def build(self, local_dir, docker_filename : str = 'Dockerfile', target_image=No
                                                docker_filename=docker_filename,
                                                target_image=target_image)
       logging.info('Start a kaniko job for build.')
-      from ..compiler._k8s_helper import K8sHelper
-      k8s_helper = K8sHelper()
+      from ._k8s_job_helper import K8sJobHelper
+      k8s_helper = K8sJobHelper()
       result_pod_obj = k8s_helper.run_job(kaniko_spec, timeout)
       logging.info('Kaniko job complete.')
 
diff --git a/sdk/python/kfp/containers/_k8s_job_helper.py b/sdk/python/kfp/containers/_k8s_job_helper.py
new file mode 100644
index 000000000000..46a5be9f9496
--- /dev/null
+++ b/sdk/python/kfp/containers/_k8s_job_helper.py
@@ -0,0 +1,135 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from datetime import datetime
+from kubernetes import client as k8s_client
+from kubernetes import config
+import time
+import logging
+
+
+class K8sJobHelper(object):
+  """ Kubernetes Helper """
+
+  def __init__(self):
+    if not self._configure_k8s():
+      raise Exception('K8sHelper __init__ failure')
+
+  def _configure_k8s(self):
+    try:
+      config.load_incluster_config()
+      logging.info('Initialized with in-cluster config.')
+    except:
+      logging.info('Cannot find in-cluster config, trying the local kubernetes config. ')
+      try:
+        config.load_kube_config()
+        logging.info('Found local kubernetes config. Initialized with kube_config.')
+      except:
+        raise RuntimeError('Forgot to run the gcloud command? Check out the link: \
+        https://cloud.google.com/kubernetes-engine/docs/how-to/cluster-access-for-kubectl for more information')
+    self._api_client = k8s_client.ApiClient()
+    self._corev1 = k8s_client.CoreV1Api(self._api_client)
+    return True
+
+  def _create_k8s_job(self, yaml_spec):
+    """ _create_k8s_job creates a kubernetes job based on the yaml spec """
+    pod = k8s_client.V1Pod(metadata=k8s_client.V1ObjectMeta(generate_name=yaml_spec['metadata']['generateName'],
+                                                            annotations=yaml_spec['metadata']['annotations']))
+    container = k8s_client.V1Container(name = yaml_spec['spec']['containers'][0]['name'],
+                                       image = yaml_spec['spec']['containers'][0]['image'],
+                                       args = yaml_spec['spec']['containers'][0]['args'],
+                                       volume_mounts = [k8s_client.V1VolumeMount(
+                                           name=yaml_spec['spec']['containers'][0]['volumeMounts'][0]['name'],
+                                           mount_path=yaml_spec['spec']['containers'][0]['volumeMounts'][0]['mountPath'],
+                                       )],
+                                       env = [k8s_client.V1EnvVar(
+                                           name=yaml_spec['spec']['containers'][0]['env'][0]['name'],
+                                           value=yaml_spec['spec']['containers'][0]['env'][0]['value'],
+                                       )])
+    pod.spec = k8s_client.V1PodSpec(restart_policy=yaml_spec['spec']['restartPolicy'],
+                                    containers = [container],
+                                    service_account_name=yaml_spec['spec']['serviceAccountName'],
+                                    volumes=[k8s_client.V1Volume(
+                                        name=yaml_spec['spec']['volumes'][0]['name'],
+                                        secret=k8s_client.V1SecretVolumeSource(
+                                           secret_name=yaml_spec['spec']['volumes'][0]['secret']['secretName'],
+                                        )
+                                    )])
+    try:
+      api_response = self._corev1.create_namespaced_pod(yaml_spec['metadata']['namespace'], pod)
+      return api_response.metadata.name, True
+    except k8s_client.rest.ApiException as e:
+      logging.exception("Exception when calling CoreV1Api->create_namespaced_pod: {}\n".format(str(e)))
+      return '', False
+
+  def _wait_for_k8s_job(self, pod_name, yaml_spec, timeout):
+    """ _wait_for_k8s_job waits for the job to complete """
+    status = 'running'
+    start_time = datetime.now()
+    while status in ['pending', 'running']:
+      # Pod pending values: https://github.com/kubernetes-client/python/blob/master/kubernetes/docs/V1PodStatus.md
+      try:
+        api_response = self._corev1.read_namespaced_pod(pod_name, yaml_spec['metadata']['namespace'])
+        status = api_response.status.phase.lower()
+        time.sleep(5)
+        elapsed_time = (datetime.now() - start_time).seconds
+        logging.info('{} seconds: waiting for job to complete'.format(elapsed_time))
+        if elapsed_time > timeout:
+          logging.info('Kubernetes job timeout')
+          return False
+      except k8s_client.rest.ApiException as e:
+        logging.exception('Exception when calling CoreV1Api->read_namespaced_pod: {}\n'.format(str(e)))
+        return False
+    return status == 'succeeded'
+
+  def _delete_k8s_job(self, pod_name, yaml_spec):
+    """ _delete_k8s_job deletes a pod """
+    try:
+      api_response = self._corev1.delete_namespaced_pod(pod_name, yaml_spec['metadata']['namespace'], body=k8s_client.V1DeleteOptions())
+    except k8s_client.rest.ApiException as e:
+      logging.exception('Exception when calling CoreV1Api->delete_namespaced_pod: {}\n'.format(str(e)))
+
+  def _read_pod_log(self, pod_name, yaml_spec):
+    try:
+      api_response = self._corev1.read_namespaced_pod_log(pod_name, yaml_spec['metadata']['namespace'])
+    except k8s_client.rest.ApiException as e:
+      logging.exception('Exception when calling CoreV1Api->read_namespaced_pod_log: {}\n'.format(str(e)))
+      return False
+    return api_response
+
+  def _read_pod_status(self, pod_name, namespace):
+    try:
+      # Using read_namespaced_pod due to the following error: "pods \"kaniko-p2phh\" is forbidden: User \"system:serviceaccount:kubeflow:jupyter-notebook\" cannot get pods/status in the namespace \"kubeflow\""
+      #api_response = self._corev1.read_namespaced_pod_status(pod_name, namespace)
+      api_response = self._corev1.read_namespaced_pod(pod_name, namespace)
+    except k8s_client.rest.ApiException as e:
+      logging.exception('Exception when calling CoreV1Api->read_namespaced_pod_status: {}\n'.format(str(e)))
+      return False
+    return api_response
+
+  def run_job(self, yaml_spec, timeout=600):
+    """ run_job runs a kubernetes job and clean up afterwards """
+    pod_name, succ = self._create_k8s_job(yaml_spec)
+    namespace = yaml_spec['metadata']['namespace']
+    if not succ:
+      raise RuntimeError('Kubernetes job creation failed.')
+    # timeout in seconds
+    succ = self._wait_for_k8s_job(pod_name, yaml_spec, timeout)
+    if not succ:
+      logging.info('Kubernetes job failed.')
+      print(self._read_pod_log(pod_name, yaml_spec))
+      raise RuntimeError('Kubernetes job failed.')
+    status_obj = self._read_pod_status(pod_name, namespace)
+    self._delete_k8s_job(pod_name, yaml_spec)
+    return status_obj
diff --git a/sdk/python/kfp/dsl/_artifact_location.py b/sdk/python/kfp/dsl/_artifact_location.py
index 759bec93c25f..d4d18b31d6ff 100644
--- a/sdk/python/kfp/dsl/_artifact_location.py
+++ b/sdk/python/kfp/dsl/_artifact_location.py
@@ -14,6 +14,7 @@
 from typing import Dict, Union, Any
 
 from argo.models import V1alpha1ArtifactLocation, V1alpha1S3Artifact, V1alpha1Artifact
+from deprecated.sphinx import deprecated
 from kubernetes.client.models import V1SecretKeySelector
 
 
@@ -26,6 +27,7 @@ def _dict_to_secret(
     return value or V1SecretKeySelector(key="", optional=True)
 
 
+@deprecated(version='0.1.32', reason='ArtifactLocation is deprecated since SDK v0.1.32. Please configure the artifact location in the cluster configMap: https://github.com/argoproj/argo/blob/master/ARTIFACT_REPO.md#configure-the-default-artifact-repository .')
 class ArtifactLocation:
     """
     ArtifactLocation describes a location for a single or multiple artifacts.
diff --git a/sdk/python/kfp/dsl/_container_op.py b/sdk/python/kfp/dsl/_container_op.py
index 065f05d54717..8269664127ec 100644
--- a/sdk/python/kfp/dsl/_container_op.py
+++ b/sdk/python/kfp/dsl/_container_op.py
@@ -697,7 +697,7 @@ def __init__(self,
                     to deploy before the `main` container.
           sidecars: the list of `Sidecar` objects describing the sidecar containers to deploy
                     together with the `main` container.
-          is_exit_handler: Whether it is used as an exit handler.
+          is_exit_handler: Deprecated.
         """
 
         valid_name_regex = r'^[A-Za-z][A-Za-z0-9\s_-]*$'
@@ -706,6 +706,9 @@ def __init__(self,
                 'Only letters, numbers, spaces, "_", and "-"  are allowed in name. Must begin with letter: %s'
                 % (name))
 
+        if is_exit_handler:
+            warnings.warn('is_exit_handler=True is no longer needed.', DeprecationWarning)
+
         self.is_exit_handler = is_exit_handler
 
         # human_name must exist to construct operator's name
@@ -925,14 +928,6 @@ class ContainerOp(BaseOp):
             description='hello world')
         def foo_pipeline(tag: str, pull_image_policy: str):
 
-            # configures artifact location
-            artifact_location = dsl.ArtifactLocation.s3(
-                                    bucket="foobar",
-                                    endpoint="minio-service:9000",
-                                    insecure=True,
-                                    access_key_secret=V1SecretKeySelector(name="minio", key="accesskey"),
-                                    secret_key_secret=V1SecretKeySelector(name="minio", key="secretkey"))
-
             # any attributes can be parameterized (both serialized string or actual PipelineParam)
             op = dsl.ContainerOp(name='foo', 
                                 image='busybox:%s' % tag,
@@ -942,8 +937,7 @@ def foo_pipeline(tag: str, pull_image_policy: str):
                                 sidecars=[dsl.Sidecar('print', 'busybox:latest', command='echo "hello"')],
                                 # pass in k8s container kwargs
                                 container_kwargs={'env': [V1EnvVar('foo', 'bar')]},
-                                # configures artifact location
-                                artifact_location=artifact_location)
+            )
 
             # set `imagePullPolicy` property for `container` with `PipelineParam` 
             op.container.set_pull_image_policy(pull_image_policy)
@@ -1001,10 +995,10 @@ def __init__(
               For each output in the file_outputs map there will be a corresponding output reference available in the task.outputs dictionary.
               These output references can be passed to the other tasks as arguments.
           output_artifact_paths: Deprecated. Maps output artifact labels to local artifact file paths. Deprecated: Use file_outputs instead. It now supports big data outputs.
-          artifact_location: configures the default artifact location for artifacts
+          artifact_location: Deprecated. Configures the default artifact location for artifacts
                in the argo workflow template. Must be a `V1alpha1ArtifactLocation`
                object.
-          is_exit_handler: Whether it is used as an exit handler.
+          is_exit_handler: Deprecated. This is no longer needed.
           pvolumes: Dictionary for the user to match a path on the op's fs with a
               V1Volume or it inherited type.
               E.g {"/my/path": vol, "/mnt": other_op.pvolumes["/output"]}.
@@ -1090,6 +1084,9 @@ def _decorated(*args, **kwargs):
             warnings.warn('The output_artifact_paths parameter is deprecated since SDK v0.1.32. Use the file_outputs parameter instead. file_outputs now supports outputting big data.', DeprecationWarning)
         self.artifact_location = artifact_location
 
+        if artifact_location:
+            warnings.warn('Setting per-ContainerOp artifact_location is deprecated since SDK v0.1.32. Please configure the artifact location in the cluster configMap: https://github.com/argoproj/argo/blob/master/ARTIFACT_REPO.md#configure-the-default-artifact-repository . For short-term workaround use the pipeline-wide kfp.dsl.PipelineConf().set_artifact_location, but it can also be deprecated in future.', PendingDeprecationWarning)
+
         self._metadata = None
 
         self.outputs = {}
@@ -1099,9 +1096,10 @@ def _decorated(*args, **kwargs):
                 for name in file_outputs.keys()
             }
 
-        self.output = None
         if len(self.outputs) == 1:
             self.output = list(self.outputs.values())[0]
+        else:
+            self.output = _MultipleOutputsError()
 
         self.pvolumes = {}
         self.add_pvolumes(pvolumes)
@@ -1163,7 +1161,6 @@ def _set_metadata(self, metadata):
                         output_type = output_meta.type
                 self.outputs[output].param_type = output_type
 
-            self.output = None
             if len(self.outputs) == 1:
                 self.output = list(self.outputs.values())[0]
 
@@ -1199,3 +1196,15 @@ def add_pvolumes(self,
 # proxy old ContainerOp properties to ContainerOp.container
 # with PendingDeprecationWarning.
 ContainerOp = _proxy_container_op_props(ContainerOp)
+
+
+class _MultipleOutputsError:
+    @staticmethod
+    def raise_error():
+        raise RuntimeError('This task has multiple outputs. Use `task.outputs[<output name>]` dictionary to refer to the one you need.')
+
+    def __getattribute__(self, name):
+        _MultipleOutputsError.raise_error()
+
+    def __str__(self):
+        _MultipleOutputsError.raise_error()
diff --git a/sdk/python/kfp/dsl/_ops_group.py b/sdk/python/kfp/dsl/_ops_group.py
index 5f2e1ba48569..2cb711118a65 100644
--- a/sdk/python/kfp/dsl/_ops_group.py
+++ b/sdk/python/kfp/dsl/_ops_group.py
@@ -93,6 +93,11 @@ def after(self, dependency):
     self.dependencies.append(dependency)
     return self
 
+  def remove_op_recursive(self, op):
+    if self.ops and op in self.ops:
+      self.ops.remove(op)
+    for sub_group in self.groups or []:
+      sub_group.remove_op_recursive(op)
 
 class ExitHandler(OpsGroup):
   """Represents an exit handler that is invoked upon exiting a group of ops.
@@ -118,6 +123,12 @@ def __init__(self, exit_op: _container_op.ContainerOp):
     if exit_op.dependent_names:
       raise ValueError('exit_op cannot depend on any other ops.')
 
+    # Removing exit_op form any group
+    _pipeline.Pipeline.get_default_pipeline().remove_op_from_groups(exit_op)
+
+    # Setting is_exit_handler since the compiler might be using this attribute. TODO: Check that it's needed
+    exit_op.is_exit_handler = True
+
     self.exit_op = exit_op
 
 
diff --git a/sdk/python/kfp/dsl/_pipeline.py b/sdk/python/kfp/dsl/_pipeline.py
index 32a9d0cb1fc9..3d8b8738dfb5 100644
--- a/sdk/python/kfp/dsl/_pipeline.py
+++ b/sdk/python/kfp/dsl/_pipeline.py
@@ -232,6 +232,10 @@ def pop_ops_group(self):
     """Remove the current OpsGroup from the stack."""
     del self.groups[-1]
 
+  def remove_op_from_groups(self, op):
+    for group in self.groups:
+      group.remove_op_recursive(op)
+
   def get_next_group_id(self):
     """Get next id for a new group. """
 
diff --git a/sdk/python/kfp/dsl/_resource_op.py b/sdk/python/kfp/dsl/_resource_op.py
index 2e69fd3f8f35..f25195e388ad 100644
--- a/sdk/python/kfp/dsl/_resource_op.py
+++ b/sdk/python/kfp/dsl/_resource_op.py
@@ -86,7 +86,7 @@ def __init__(self,
                 https://github.com/argoproj/argo/blob/master/examples/k8s-jobs.yaml
             attribute_outputs: Maps output labels to resource's json paths,
                 similarly to file_outputs of ContainerOp
-            kwargs: name, sidecars & is_exit_handler. See BaseOp definition
+            kwargs: name, sidecars. See BaseOp definition
         Raises:
         ValueError: if not inside a pipeline
                     if the name is an invalid string
diff --git a/sdk/python/requirements.txt b/sdk/python/requirements.txt
index e1b7aee86598..dbede61c6d47 100644
--- a/sdk/python/requirements.txt
+++ b/sdk/python/requirements.txt
@@ -9,6 +9,7 @@ PyJWT>=1.6.4
 cryptography>=2.4.2
 google-auth>=1.6.1
 requests_toolbelt>=0.8.0
+cloudpickle==1.1.1
 kfp-server-api >= 0.1.18, < 0.1.19
 argo-models == 2.2.1a
 jsonschema >= 3.0.1
diff --git a/sdk/python/setup.py b/sdk/python/setup.py
index 9fb09847a2b8..46f51e5c08c0 100644
--- a/sdk/python/setup.py
+++ b/sdk/python/setup.py
@@ -12,10 +12,12 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+import os
+import re
 from setuptools import setup
 
 NAME = 'kfp'
-VERSION = '0.1.31'
+#VERSION = .... Change the version in kfp/__init__.py
 
 REQUIRES = [
     'urllib3>=1.15,<1.25',  #Fixing the version conflict with the "requests" package
@@ -29,7 +31,7 @@
     'cryptography>=2.4.2',
     'google-auth>=1.6.1',
     'requests_toolbelt>=0.8.0',
-    'cloudpickle',
+    'cloudpickle==1.1.1',
     'kfp-server-api >= 0.1.18, <= 0.1.25',  #Update the upper version whenever a new version of the kfp-server-api package is released. Update the lower version when there is a breaking change in kfp-server-api.
     'argo-models == 2.2.1a',  #2.2.1a is equivalent to argo 2.2.1
     'jsonschema >= 3.0.1',
@@ -38,9 +40,24 @@
     'Deprecated',
 ]
 
+def find_version(*file_path_parts):
+    here = os.path.abspath(os.path.dirname(__file__))
+    with open(os.path.join(here, *file_path_parts), 'r') as fp:
+        version_file_text = fp.read()
+
+    version_match = re.search(
+        r"^__version__ = ['\"]([^'\"]*)['\"]",
+        version_file_text,
+        re.M,
+    )
+    if version_match:
+        return version_match.group(1)
+
+    raise RuntimeError("Unable to find version string.")
+
 setup(
     name=NAME,
-    version=VERSION,
+    version=find_version("kfp", "__init__.py"),
     description='KubeFlow Pipelines SDK',
     author='google',
     install_requires=REQUIRES,
diff --git a/sdk/python/tests/compiler/compiler_tests.py b/sdk/python/tests/compiler/compiler_tests.py
index f77daab61bf8..e03f80b794c6 100644
--- a/sdk/python/tests/compiler/compiler_tests.py
+++ b/sdk/python/tests/compiler/compiler_tests.py
@@ -683,6 +683,28 @@ def some_pipeline():
       if container:
         self.assertEqual(template['retryStrategy']['limit'], 5)
 
+  def test_container_op_output_error_when_no_or_multiple_outputs(self):
+
+    def no_outputs_pipeline():
+      no_outputs_op = dsl.ContainerOp(name='dummy', image='dummy')
+      dsl.ContainerOp(name='dummy', image='dummy', arguments=[no_outputs_op.output])
+
+    def one_output_pipeline():
+      one_output_op = dsl.ContainerOp(name='dummy', image='dummy', file_outputs={'out1': 'path1'})
+      dsl.ContainerOp(name='dummy', image='dummy', arguments=[one_output_op.output])
+
+    def two_outputs_pipeline():
+      two_outputs_op = dsl.ContainerOp(name='dummy', image='dummy', file_outputs={'out1': 'path1', 'out2': 'path2'})
+      dsl.ContainerOp(name='dummy', image='dummy', arguments=[two_outputs_op.output])
+
+    with self.assertRaises(RuntimeError):
+      compiler.Compiler()._compile(no_outputs_pipeline)
+
+    compiler.Compiler()._compile(one_output_pipeline)
+
+    with self.assertRaises(RuntimeError):
+      compiler.Compiler()._compile(two_outputs_pipeline)
+
   def test_withitem_basic(self):
     self._test_py_compile_yaml('withitem_basic')
 
diff --git a/sdk/python/tests/compiler/k8s_helper_tests.py b/sdk/python/tests/compiler/k8s_helper_tests.py
index 5eaebc03a80c..a41f4765d021 100644
--- a/sdk/python/tests/compiler/k8s_helper_tests.py
+++ b/sdk/python/tests/compiler/k8s_helper_tests.py
@@ -12,7 +12,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-from kfp.compiler._k8s_helper import K8sHelper
+from kfp.compiler._k8s_helper import convert_k8s_obj_to_json
 from datetime import datetime
 import unittest
 
@@ -20,7 +20,7 @@
 class TestCompiler(unittest.TestCase):
   def test_convert_k8s_obj_to_dic_accepts_dict(self):
     now = datetime.now()
-    converted = K8sHelper.convert_k8s_obj_to_json({
+    converted = convert_k8s_obj_to_json({
       "ENV": "test",
       "number": 3,
       "list": [1,2,3],
diff --git a/sdk/python/tests/compiler/testdata/artifact_location.py b/sdk/python/tests/compiler/testdata/artifact_location.py
index 61127544f679..99d77ee0a779 100644
--- a/sdk/python/tests/compiler/testdata/artifact_location.py
+++ b/sdk/python/tests/compiler/testdata/artifact_location.py
@@ -28,7 +28,7 @@ def foo_pipeline(tag: str, namespace: str = "kubeflow", bucket: str = "foobar"):
                             secret_key_secret=V1SecretKeySelector(name="minio", key="secretkey"))
 
     # configures artifact location using AWS IAM role (no access key provided)
-    artifact_location = dsl.ArtifactLocation.s3(
+    aws_artifact_location = dsl.ArtifactLocation.s3(
                             bucket=bucket,
                             endpoint="s3.amazonaws.com",
                             region="ap-southeast-1",
@@ -45,12 +45,3 @@ def foo_pipeline(tag: str, namespace: str = "kubeflow", bucket: str = "foobar"):
             'out_art': '/tmp/out_art.txt',
         },
     )
-
-    # op level artifact location (to s3 bucket)
-    op2 = dsl.ContainerOp(name='foo',
-                          image='busybox:%s' % tag,
-                          output_artifact_paths={
-                              'out_art': '/tmp/out_art.txt',
-                          },
-                          # configures artifact location
-                          artifact_location=artifact_location)
diff --git a/sdk/python/tests/compiler/testdata/artifact_location.yaml b/sdk/python/tests/compiler/testdata/artifact_location.yaml
index f283ca77ab60..40aea34800e8 100644
--- a/sdk/python/tests/compiler/testdata/artifact_location.yaml
+++ b/sdk/python/tests/compiler/testdata/artifact_location.yaml
@@ -40,14 +40,6 @@ spec:
             value: '{{inputs.parameters.tag}}'
         name: foo
         template: foo
-      - arguments:
-          parameters:
-          - name: bucket
-            value: '{{inputs.parameters.bucket}}'
-          - name: tag
-            value: '{{inputs.parameters.tag}}'
-        name: foo-2
-        template: foo-2
     inputs:
       parameters:
       - name: bucket
@@ -77,26 +69,3 @@ spec:
           secretKeySecret:
             key: 'secretkey'
             name: 'minio'
-  - container:
-      image: busybox:{{inputs.parameters.tag}}
-    inputs:
-      parameters:
-      - name: bucket
-      - name: tag
-    name: foo-2
-    outputs:
-      artifacts:
-      - name: foo-2-out-art
-        path: /tmp/out_art.txt
-        s3:
-          accessKeySecret:
-            key: ''
-            optional: true
-          bucket: '{{inputs.parameters.bucket}}'
-          endpoint: s3.amazonaws.com
-          insecure: false
-          key: runs/{{workflow.uid}}/{{pod.name}}/foo-2-out-art.tgz
-          region: ap-southeast-1
-          secretKeySecret:
-            key: ''
-            optional: true
diff --git a/sdk/python/tests/compiler/testdata/basic.yaml b/sdk/python/tests/compiler/testdata/basic.yaml
index b102d9eff5a2..6737b2a3d551 100644
--- a/sdk/python/tests/compiler/testdata/basic.yaml
+++ b/sdk/python/tests/compiler/testdata/basic.yaml
@@ -113,8 +113,6 @@ spec:
             value: '{{inputs.parameters.outputpath}}'
         name: exit-handler-1
         template: exit-handler-1
-      - name: exiting
-        template: exiting
     inputs:
       parameters:
       - name: message
diff --git a/sdk/python/tests/compiler/testdata/basic_no_decorator.yaml b/sdk/python/tests/compiler/testdata/basic_no_decorator.yaml
index 97401ae36228..ed27c418f0b1 100644
--- a/sdk/python/tests/compiler/testdata/basic_no_decorator.yaml
+++ b/sdk/python/tests/compiler/testdata/basic_no_decorator.yaml
@@ -114,8 +114,6 @@ spec:
                   value: '{{inputs.parameters.outputpath}}'
             name: exit-handler-1
             template: exit-handler-1
-          - name: exiting
-            template: exiting
       inputs:
         parameters:
           - name: message
diff --git a/sdk/python/tests/compiler/testdata/withitem_basic.py b/sdk/python/tests/compiler/testdata/withitem_basic.py
index 0f6aa56ff86a..d8d1e24fa546 100644
--- a/sdk/python/tests/compiler/testdata/withitem_basic.py
+++ b/sdk/python/tests/compiler/testdata/withitem_basic.py
@@ -29,7 +29,7 @@ def get_code(self, ):
 
 
 @dsl.pipeline(name='my-pipeline')
-def pipeline(my_pipe_param=10):
+def pipeline(my_pipe_param: int = 10):
     loop_args = [{'a': 1, 'b': 2}, {'a': 10, 'b': 20}]
     with dsl.ParallelFor(loop_args) as item:
         op1 = dsl.ContainerOp(
diff --git a/sdk/python/tests/compiler/testdata/withitem_basic.yaml b/sdk/python/tests/compiler/testdata/withitem_basic.yaml
index cac186ee6a46..01a8178aab3b 100644
--- a/sdk/python/tests/compiler/testdata/withitem_basic.yaml
+++ b/sdk/python/tests/compiler/testdata/withitem_basic.yaml
@@ -2,7 +2,7 @@ apiVersion: argoproj.io/v1alpha1
 kind: Workflow
 metadata:
   annotations:
-    pipelines.kubeflow.org/pipeline_spec: '{"inputs": [{"default": "10", "name": "my_pipe_param"}],
+    pipelines.kubeflow.org/pipeline_spec: '{"inputs": [{"default": "10", "name": "my_pipe_param", "type": "Integer"}],
       "name": "my-pipeline"}'
   generateName: my-pipeline-
 spec:
diff --git a/sdk/python/tests/compiler/testdata/withitem_nested.py b/sdk/python/tests/compiler/testdata/withitem_nested.py
index 3de8211482b2..0cd040c07658 100644
--- a/sdk/python/tests/compiler/testdata/withitem_nested.py
+++ b/sdk/python/tests/compiler/testdata/withitem_nested.py
@@ -29,7 +29,7 @@ def get_code(self, ):
 
 
 @dsl.pipeline(name='my-pipeline')
-def pipeline(my_pipe_param=10):
+def pipeline(my_pipe_param: int = 10):
     loop_args = [{'a': 1, 'b': 2}, {'a': 10, 'b': 20}]
     with dsl.ParallelFor(loop_args) as item:
         op1 = dsl.ContainerOp(
diff --git a/sdk/python/tests/compiler/testdata/withitem_nested.yaml b/sdk/python/tests/compiler/testdata/withitem_nested.yaml
index 9c35f7e0fa82..fbfba671d95f 100644
--- a/sdk/python/tests/compiler/testdata/withitem_nested.yaml
+++ b/sdk/python/tests/compiler/testdata/withitem_nested.yaml
@@ -2,7 +2,7 @@ apiVersion: argoproj.io/v1alpha1
 kind: Workflow
 metadata:
   annotations:
-    pipelines.kubeflow.org/pipeline_spec: '{"inputs": [{"default": "10", "name": "my_pipe_param"}],
+    pipelines.kubeflow.org/pipeline_spec: '{"inputs": [{"default": "10", "name": "my_pipe_param", "type": "Integer"}],
       "name": "my-pipeline"}'
   generateName: my-pipeline-
 spec:
diff --git a/sdk/python/tests/compiler/testdata/withparam_global.py b/sdk/python/tests/compiler/testdata/withparam_global.py
index ef0921b31bce..0ce838058f52 100644
--- a/sdk/python/tests/compiler/testdata/withparam_global.py
+++ b/sdk/python/tests/compiler/testdata/withparam_global.py
@@ -29,7 +29,7 @@ def get_code(self, ):
 
 
 @dsl.pipeline(name='my-pipeline')
-def pipeline(loopidy_doop=[3, 5, 7, 9]):
+def pipeline(loopidy_doop: list = [3, 5, 7, 9]):
     op0 = dsl.ContainerOp(
         name="my-out-cop0",
         image='python:alpine3.6',
diff --git a/sdk/python/tests/compiler/testdata/withparam_global.yaml b/sdk/python/tests/compiler/testdata/withparam_global.yaml
index b3c1cbc9d381..3911119d18e2 100644
--- a/sdk/python/tests/compiler/testdata/withparam_global.yaml
+++ b/sdk/python/tests/compiler/testdata/withparam_global.yaml
@@ -3,7 +3,7 @@ kind: Workflow
 metadata:
   annotations:
     pipelines.kubeflow.org/pipeline_spec: '{"inputs": [{"default": "[3, 5, 7, 9]", "name":
-      "loopidy_doop"}], "name": "my-pipeline"}'
+      "loopidy_doop", "type": "JsonArray"}], "name": "my-pipeline"}'
   generateName: my-pipeline-
 spec:
   arguments:
diff --git a/sdk/python/tests/compiler/testdata/withparam_global_dict.py b/sdk/python/tests/compiler/testdata/withparam_global_dict.py
index 837998ff2aa4..7331def4ed0f 100644
--- a/sdk/python/tests/compiler/testdata/withparam_global_dict.py
+++ b/sdk/python/tests/compiler/testdata/withparam_global_dict.py
@@ -29,7 +29,7 @@ def get_code(self, ):
 
 
 @dsl.pipeline(name='my-pipeline')
-def pipeline(loopidy_doop=[{'a': 1, 'b': 2}, {'a': 10, 'b': 20}]):
+def pipeline(loopidy_doop: dict = [{'a': 1, 'b': 2}, {'a': 10, 'b': 20}]):
     op0 = dsl.ContainerOp(
         name="my-out-cop0",
         image='python:alpine3.6',
diff --git a/sdk/python/tests/compiler/testdata/withparam_global_dict.yaml b/sdk/python/tests/compiler/testdata/withparam_global_dict.yaml
index 0c59a14dadc9..dd5f4bc62826 100644
--- a/sdk/python/tests/compiler/testdata/withparam_global_dict.yaml
+++ b/sdk/python/tests/compiler/testdata/withparam_global_dict.yaml
@@ -3,7 +3,7 @@ kind: Workflow
 metadata:
   annotations:
     pipelines.kubeflow.org/pipeline_spec: '{"inputs": [{"default": "[{\"a\": 1, \"b\":
-      2}, {\"a\": 10, \"b\": 20}]", "name": "loopidy_doop"}], "name": "my-pipeline"}'
+      2}, {\"a\": 10, \"b\": 20}]", "name": "loopidy_doop", "type": "JsonObject"}], "name": "my-pipeline"}'
   generateName: my-pipeline-
 spec:
   arguments:
diff --git a/sdk/python/tests/components/test_components.py b/sdk/python/tests/components/test_components.py
index b17cec01f227..7a1e213cebda 100644
--- a/sdk/python/tests/components/test_components.py
+++ b/sdk/python/tests/components/test_components.py
@@ -532,8 +532,8 @@ def test_command_if_is_present_then_else(self):
     def test_command_if_input_value_then(self):
         component_text = '''\
 inputs:
-- {name: Do test, type: boolean, optional: true}
-- {name: Test data, optional: true}
+- {name: Do test, type: Boolean, optional: true}
+- {name: Test data, type: Integer, optional: true}
 - {name: Test parameter 1, optional: true}
 implementation:
   container:
@@ -545,7 +545,7 @@ def test_command_if_input_value_then(self):
 '''
         task_factory1 = comp.load_component(text=component_text)
 
-        task_then = task_factory1(True, 'test_data.txt', 42)
+        task_then = task_factory1(True, 'test_data.txt', '42')
         self.assertEqual(task_then.arguments, ['--test-data', 'test_data.txt', '--test-param1', '42'])
         
         task_else = task_factory1()
diff --git a/sdk/python/tests/components/test_data/retail_product_stockout_prediction_pipeline.component.yaml b/sdk/python/tests/components/test_data/retail_product_stockout_prediction_pipeline.component.yaml
index 9eb48de68a1e..b9afcd09ed87 100644
--- a/sdk/python/tests/components/test_data/retail_product_stockout_prediction_pipeline.component.yaml
+++ b/sdk/python/tests/components/test_data/retail_product_stockout_prediction_pipeline.component.yaml
@@ -41,11 +41,14 @@ implementation:
           url: https://raw.githubusercontent.com/kubeflow/pipelines/b3179d86b239a08bf4884b50dbf3a9151da96d66/components/gcp/automl/create_dataset_for_tables/component.yaml
         arguments:
           gcp_project_id:
-            graphInput: gcp_project_id
+            graphInput:
+              inputName: gcp_project_id
           gcp_region:
-            graphInput: gcp_region
+            graphInput:
+              inputName: gcp_region
           display_name:
-            graphInput: dataset_display_name
+            graphInput:
+              inputName: dataset_display_name
       Automl import data from bigquery:
         componentRef:
           url: https://raw.githubusercontent.com/kubeflow/pipelines/b3179d86b239a08bf4884b50dbf3a9151da96d66/components/gcp/automl/import_data_from_bigquery/component.yaml
@@ -56,7 +59,8 @@ implementation:
               taskId: Automl create dataset for tables
               type: String
           input_uri:
-            graphInput: dataset_bq_input_uri
+            graphInput:
+              inputName: dataset_bq_input_uri
       Automl split dataset table column names:
         componentRef:
           url: https://raw.githubusercontent.com/kubeflow/pipelines/b3179d86b239a08bf4884b50dbf3a9151da96d66/components/gcp/automl/split_dataset_table_column_names/component.yaml
@@ -67,18 +71,22 @@ implementation:
               taskId: Automl import data from bigquery
               type: String
           target_column_name:
-            graphInput: target_column_name
+            graphInput:
+              inputName: target_column_name
           table_index: '0'
       Automl create model for tables:
         componentRef:
           url: https://raw.githubusercontent.com/kubeflow/pipelines/b3179d86b239a08bf4884b50dbf3a9151da96d66/components/gcp/automl/create_model_for_tables/component.yaml
         arguments:
           gcp_project_id:
-            graphInput: gcp_project_id
+            graphInput:
+              inputName: gcp_project_id
           gcp_region:
-            graphInput: gcp_region
+            graphInput:
+              inputName: gcp_region
           display_name:
-            graphInput: model_display_name
+            graphInput:
+              inputName: model_display_name
           dataset_id:
             taskOutput:
               outputName: dataset_path
@@ -96,7 +104,8 @@ implementation:
               type: JsonArray
           optimization_objective: MAXIMIZE_AU_PRC
           train_budget_milli_node_hours:
-            graphInput: train_budget_milli_node_hours
+            graphInput:
+              inputName: train_budget_milli_node_hours
       Automl prediction service batch predict:
         componentRef:
           url: https://raw.githubusercontent.com/kubeflow/pipelines/b3179d86b239a08bf4884b50dbf3a9151da96d66/components/gcp/automl/prediction_service_batch_predict/component.yaml
@@ -107,9 +116,11 @@ implementation:
               taskId: Automl create model for tables
               type: String
           gcs_output_uri_prefix:
-            graphInput: batch_predict_gcs_output_uri_prefix
+            graphInput:
+              inputName: batch_predict_gcs_output_uri_prefix
           bq_input_uri:
-            graphInput: batch_predict_bq_input_uri
+            graphInput:
+              inputName: batch_predict_bq_input_uri
     outputValues:
       model_path:
         taskOutput:
diff --git a/sdk/python/tests/components/test_graph_components.py b/sdk/python/tests/components/test_graph_components.py
index 99a65bb2e192..cd11eadf57ab 100644
--- a/sdk/python/tests/components/test_graph_components.py
+++ b/sdk/python/tests/components/test_graph_components.py
@@ -19,7 +19,7 @@
 
 
 import kfp.components as comp
-from kfp.components._structures import ComponentReference, ComponentSpec, ContainerSpec, GraphInputArgument, GraphSpec, InputSpec, InputValuePlaceholder, GraphImplementation, OutputPathPlaceholder, OutputSpec, TaskOutputArgument, TaskSpec
+from kfp.components._structures import ComponentReference, ComponentSpec, ContainerSpec, GraphInputReference, GraphSpec, InputSpec, InputValuePlaceholder, GraphImplementation, OutputPathPlaceholder, OutputSpec, TaskOutputArgument, TaskSpec
 
 from kfp.components._yaml_utils import load_yaml
 
@@ -27,7 +27,7 @@ class GraphComponentTestCase(unittest.TestCase):
     def test_handle_constructing_graph_component(self):
         task1 = TaskSpec(component_ref=ComponentReference(name='comp 1'), arguments={'in1 1': 11})
         task2 = TaskSpec(component_ref=ComponentReference(name='comp 2'), arguments={'in2 1': 21, 'in2 2': TaskOutputArgument.construct(task_id='task 1', output_name='out1 1')})
-        task3 = TaskSpec(component_ref=ComponentReference(name='comp 3'), arguments={'in3 1': TaskOutputArgument.construct(task_id='task 2', output_name='out2 1'), 'in3 2': GraphInputArgument(input_name='graph in 1')})
+        task3 = TaskSpec(component_ref=ComponentReference(name='comp 3'), arguments={'in3 1': TaskOutputArgument.construct(task_id='task 2', output_name='out2 1'), 'in3 2': GraphInputReference(input_name='graph in 1').as_argument()})
 
         graph_component1 = ComponentSpec(
             inputs=[
@@ -75,7 +75,7 @@ def test_handle_parsing_graph_component(self):
         componentRef: {name: Comp 3}
         arguments:
             in3 1: {taskOutput: {taskId: task 2, outputName: out2 1}}
-            in3 2: {graphInput: graph in 1}
+            in3 2: {graphInput: {inputName: graph in 1}}
     outputValues:
       graph out 1: {taskOutput: {taskId: task 3, outputName: out3 1}}
       graph out 2: {taskOutput: {taskId: task 1, outputName: out1 2}}
@@ -199,7 +199,7 @@ def test_load_graph_component(self):
                 image: busybox
                 command: [sh, -c, 'echo "$0" > $1; echo "$0" > $2', {inputValue: in1_1}, {outputPath: out1_1}, {outputPath: out1_2}]
         arguments:
-            in1_1: 11
+            in1_1: '11'
       task 2:
         componentRef:
           spec:
@@ -214,7 +214,7 @@ def test_load_graph_component(self):
                 image: busybox
                 command: [sh, -c, 'cat "$0" "$1" > $2', {inputValue: in2_1}, {inputValue: in2_2}, {outputPath: out2_1}]
         arguments:
-            in2_1: 21
+            in2_1: '21'
             in2_2: {taskOutput: {taskId: task 1, outputName: out1_1}}
       task 3:
         componentRef:
@@ -231,12 +231,12 @@ def test_load_graph_component(self):
                 command: [sh, -c, 'cat "$0" "$1" > $2', {inputValue: in3_1}, {inputValue: in3_2}, {outputPath: out3_1}]
         arguments:
             in3_1: {taskOutput: {taskId: task 2, outputName: out2_1}}
-            in3_2: {graphInput: graph in 1}
+            in3_2: {graphInput: {inputName: graph in 1}}
     outputValues:
       graph out 1: {taskOutput: {taskId: task 3, outputName: out3_1}}
       graph out 2: {taskOutput: {taskId: task 1, outputName: out1_2}}
-      graph out 3: {graphInput: graph in 2}
-      graph out 4: 42
+      graph out 3: {graphInput: {inputName: graph in 2}}
+      graph out 4: '42'
 '''
         op = comp.load_component_from_text(component_text)
         task = op('graph 1', 'graph 2')
@@ -269,7 +269,7 @@ def test_load_nested_graph_components(self):
                 image: busybox
                 command: [sh, -c, 'echo "$0" > $1; echo "$0" > $2', {inputValue: in1_1}, {outputPath: out1_1}, {outputPath: out1_2}]
         arguments:
-            in1_1: 11
+            in1_1: '11'
       task 2:
         componentRef:
           spec:
@@ -284,7 +284,7 @@ def test_load_nested_graph_components(self):
                 image: busybox
                 command: [sh, -c, 'cat "$0" "$1" > $2', {inputValue: in2_1}, {inputValue: in2_2}, {outputPath: out2_1}]
         arguments:
-            in2_1: 21
+            in2_1: '21'
             in2_2: {taskOutput: {taskId: task 1, outputName: out1_1}}
       task 3:
         componentRef:
@@ -311,25 +311,25 @@ def test_load_nested_graph_components(self):
                             image: busybox
                             command: [sh, -c, 'cat "$0" "$1" > $2', {inputValue: in3_1}, {inputValue: in3_2}, {outputPath: out3_1}]
                     arguments:
-                      in3_1: {graphInput: in3_1}
-                      in3_2: {graphInput: in3_1}
+                      in3_1: {graphInput: {inputName: in3_1}}
+                      in3_2: {graphInput: {inputName: in3_1}}
                 outputValues:
                   out3_1: {taskOutput: {taskId: graph subtask, outputName: out3_1}}
         arguments:
           in3_1: {taskOutput: {taskId: task 2, outputName: out2_1}}
-          in3_2: {graphInput: graph in 1}
+          in3_2: {graphInput: {inputName: graph in 1}}
     outputValues:
       graph out 1: {taskOutput: {taskId: task 3, outputName: out3_1}}
       graph out 2: {taskOutput: {taskId: task 1, outputName: out1_2}}
-      graph out 3: {graphInput: graph in 2}
-      graph out 4: 42
+      graph out 3: {graphInput: {inputName: graph in 2}}
+      graph out 4: '42'
 '''
         op = comp.load_component_from_text(component_text)
         task = op('graph 1', 'graph 2')
         self.assertIn('out3_1', str(task.outputs['graph out 1'])) # Checks that the outputs coming from tasks in nested subgraphs are properly resolved.
         self.assertIn('out1_2', str(task.outputs['graph out 2']))
         self.assertEqual(task.outputs['graph out 3'], 'graph 2')
-        self.assertEqual(task.outputs['graph out 4'], 42)
+        self.assertEqual(task.outputs['graph out 4'], '42')
 
 #TODO: Test task name conversion to Argo-compatible names
 
diff --git a/sdk/python/tests/components/test_python_op.py b/sdk/python/tests/components/test_python_op.py
index 0af2eba9e754..5c8a40446976 100644
--- a/sdk/python/tests/components/test_python_op.py
+++ b/sdk/python/tests/components/test_python_op.py
@@ -17,7 +17,7 @@
 import unittest
 from contextlib import contextmanager
 from pathlib import Path
-from typing import Callable
+from typing import Callable, NamedTuple, Sequence
 
 import kfp
 import kfp.components as comp
@@ -122,9 +122,11 @@ def helper_test_component_against_func_using_local_call(self, func: Callable, op
         # ! This function cannot be used when component has output types that use custom serialization since it will compare non-serialized function outputs with serialized component outputs.
         # Evaluating the function to get the expected output values
         expected_output_values_list = func(**arguments)
+        if not isinstance(expected_output_values_list, Sequence) or isinstance(expected_output_values_list, str):
+            expected_output_values_list = [str(expected_output_values_list)]
         expected_output_values_list = [str(value) for value in expected_output_values_list]
 
-        output_names = [output.name for output in op.outputs]
+        output_names = [output.name for output in op.component_spec.outputs]
         from kfp.components._naming import generate_unique_name_conversion_table, _sanitize_python_function_name
         output_name_to_pythonic = generate_unique_name_conversion_table(output_names, _sanitize_python_function_name)
         pythonic_output_names = [output_name_to_pythonic[name] for name in output_names]
@@ -133,7 +135,9 @@ def helper_test_component_against_func_using_local_call(self, func: Callable, op
 
         self.helper_test_component_using_local_call(op, arguments, expected_output_values_dict)
 
-    def helper_test_component_using_local_call(self, component_task_factory: Callable, arguments: dict, expected_output_values: dict):
+    def helper_test_component_using_local_call(self, component_task_factory: Callable, arguments: dict = None, expected_output_values: dict = None):
+        arguments = arguments or {}
+        expected_output_values = expected_output_values or {}
         with tempfile.TemporaryDirectory() as temp_dir_name:
             # Creating task from the component.
             # We do it in a special context that allows us to control the output file locations.
@@ -401,8 +405,15 @@ def test_python_component_decorator(self):
         expected_description = 'Sum component description'
         expected_image = 'org/image'
 
-        @python_component(name=expected_name, description=expected_description, base_image=expected_image)
-        def add_two_numbers_decorated(a: float, b: float) -> float:
+        @python_component(
+            name=expected_name,
+            description=expected_description,
+            base_image=expected_image
+        )
+        def add_two_numbers_decorated(
+            a: float,
+            b: float,
+        ) -> float:
             '''Returns sum of two arguments'''
             return a + b
 
@@ -412,6 +423,11 @@ def add_two_numbers_decorated(a: float, b: float) -> float:
         self.assertEqual(component_spec.description.strip(), expected_description.strip())
         self.assertEqual(component_spec.implementation.container.image, expected_image)
 
+        func = add_two_numbers_decorated
+        op = comp.func_to_container_op(func)
+
+        self.helper_test_component_against_func_using_local_call(func, op, arguments={'a': 3, 'b': 5.0})
+
     def test_saving_default_values(self):
         from typing import NamedTuple
         def add_multiply_two_numbers(a: float = 3, b: float = 5) -> NamedTuple('DummyName', [('sum', float), ('product', float)]):
@@ -425,33 +441,29 @@ def add_multiply_two_numbers(a: float = 3, b: float = 5) -> NamedTuple('DummyNam
         self.assertEqual(component_spec.inputs[1].default, '5')
 
     def test_handling_default_value_of_none(self):
-        def assert_is_none(a, b, arg=None) -> int:
+        def assert_is_none(arg=None):
             assert arg is None
-            return 1
 
         func = assert_is_none
         op = comp.func_to_container_op(func)
-        self.helper_test_2_in_1_out_component_using_local_call(func, op)
+        self.helper_test_component_using_local_call(op)
 
 
-    def test_handling_complex_default_values_of_none(self):
+    def test_handling_complex_default_values(self):
         def assert_values_are_default(
-            a, b,
             singleton_param=None,
             function_param=ascii,
-            dict_param={'b': [2, 3, 4]},
+            dict_param: dict = {'b': [2, 3, 4]},
             func_call_param='_'.join(['a', 'b', 'c']),
-        ) -> int:
+        ):
             assert singleton_param is None
             assert function_param is ascii
             assert dict_param == {'b': [2, 3, 4]}
             assert func_call_param == '_'.join(['a', 'b', 'c'])
 
-            return 1
-
         func = assert_values_are_default
         op = comp.func_to_container_op(func)
-        self.helper_test_2_in_1_out_component_using_local_call(func, op)
+        self.helper_test_component_using_local_call(op)
 
 
     def test_handling_boolean_arguments(self):
@@ -619,6 +631,68 @@ def write_to_file_path(number_file: OutputBinaryFile(int)):
         self.helper_test_component_using_local_call(task_factory, arguments={}, expected_output_values={'number': '42'})
 
 
+    def test_output_path_plus_return_value(self):
+        from kfp.components import OutputPath
+        def write_to_file_path(number_file_path: OutputPath(int)) -> str:
+            with open(number_file_path, 'w') as f:
+                f.write(str(42))
+            return 'Hello'
+
+        task_factory = comp.func_to_container_op(write_to_file_path)
+
+        self.assertFalse(task_factory.component_spec.inputs)
+        self.assertEqual(len(task_factory.component_spec.outputs), 2)
+        self.assertEqual(task_factory.component_spec.outputs[0].type, 'Integer')
+        self.assertEqual(task_factory.component_spec.outputs[1].type, 'String')
+
+        self.helper_test_component_using_local_call(task_factory, arguments={}, expected_output_values={'number': '42', 'output': 'Hello'})
+
+
+    def test_all_data_passing_ways(self):
+        from kfp.components import InputTextFile, InputPath, OutputTextFile, OutputPath
+        def write_to_file_path(
+            file_input1_path: InputPath(str),
+            file_input2_file: InputTextFile(str),
+            file_output1_path: OutputPath(str),
+            file_output2_file: OutputTextFile(str),
+            value_input1: str = 'foo',
+            value_input2: str = 'foo',
+        ) -> NamedTuple(
+            'Outputs', [
+                ('return_output1', str),
+                ('return_output2', str),
+            ]
+        ):
+            with open(file_input1_path, 'r') as file_input1_file:
+                with open(file_output1_path, 'w') as file_output1_file:
+                    file_output1_file.write(file_input1_file.read())
+            
+            file_output2_file.write(file_input2_file.read())
+
+            return (value_input1, value_input2)
+
+        task_factory = comp.func_to_container_op(write_to_file_path)
+
+        self.assertEqual(set(input.name for input in task_factory.component_spec.inputs), {'file_input1', 'file_input2', 'value_input1', 'value_input2'})
+        self.assertEqual(set(output.name for output in task_factory.component_spec.outputs), {'file_output1', 'file_output2', 'return_output1', 'return_output2'})
+
+        self.helper_test_component_using_local_call(
+            task_factory,
+            arguments={
+                'file_input1': 'file_input1_value',
+                'file_input2': 'file_input2_value',
+                'value_input1': 'value_input1_value',
+                'value_input2': 'value_input2_value',
+            },
+            expected_output_values={
+                'file_output1': 'file_input1_value',
+                'file_output2': 'file_input2_value',
+                'return_output1': 'value_input1_value',
+                'return_output2': 'value_input2_value',
+            },
+        )
+
+
     def test_file_input_name_conversion(self):
         # Checking the input name conversion rules for file inputs:
         # For InputPath, the "_path" suffix is removed
diff --git a/sdk/python/tests/containers/test_build_image_api.py b/sdk/python/tests/containers/test_build_image_api.py
index e5d8e2c0da34..20aa3e384848 100644
--- a/sdk/python/tests/containers/test_build_image_api.py
+++ b/sdk/python/tests/containers/test_build_image_api.py
@@ -80,5 +80,56 @@ def file_paths_check(file_paths):
             builder = MockImageBuilder(dockerfile_text_check, requirements_text_check, file_paths_check)
             result = build_image_from_working_dir(working_dir=context_dir, base_image='python:3.6.5', builder=builder)
 
+
+    def test_image_cache(self):
+        builder = InvocationCountingDummyImageBuilder()
+
+        from kfp.containers._cache import clear_cache
+        clear_cache('build_image_from_working_dir')
+
+        self.assertEqual(builder.invocations_count, 0)
+        with prepare_context_dir(py_content='py1', sh_content='sh1') as context_dir:
+            build_image_from_working_dir(working_dir=context_dir, base_image='python:3.6.5', builder=builder)
+        self.assertEqual(builder.invocations_count, 1)
+
+        # Check that changes to .sh files do not break cache
+        with prepare_context_dir(py_content='py1', sh_content='sh2') as context_dir:
+            build_image_from_working_dir(working_dir=context_dir, base_image='python:3.6.5', builder=builder)
+        self.assertEqual(builder.invocations_count, 1)
+
+        # Check that changes to .py files result in new image being built
+        with prepare_context_dir(py_content='py2', sh_content='sh1') as context_dir:
+            build_image_from_working_dir(working_dir=context_dir, base_image='python:3.6.5', builder=builder)
+        self.assertEqual(builder.invocations_count, 2)
+
+
+class InvocationCountingDummyImageBuilder:
+    def __init__(self):
+        self.invocations_count = 0
+    
+    def build(self, local_dir = None, target_image = None, timeout = 1000):
+        self.invocations_count = self.invocations_count + 1
+        return "image/name@sha256:0123456789abcdef0123456789abcdef"
+
+
+def prepare_context_dir(py_content: str = '#py file', sh_content: str = '#sh file') -> str:
+    context_dir = tempfile.TemporaryDirectory()
+    #Preparing context
+    requirements_text = 'pandas==1.24'
+    requirements_txt_relpath = Path('.') / 'requirements.txt'
+    file1_py_relpath = Path('.') / 'lib' / 'file1.py'
+    file1_sh_relpath = Path('.') / 'lib' / 'file1.sh'
+
+    context_path = Path(context_dir.name)
+    (context_path / requirements_txt_relpath).write_text(requirements_text)
+    (context_path / file1_py_relpath).parent.mkdir(parents=True, exist_ok=True)
+    (context_path / file1_py_relpath).write_text(py_content)
+    (context_path / file1_sh_relpath).parent.mkdir(parents=True, exist_ok=True)
+    (context_path / file1_sh_relpath).write_text(sh_content)
+    # End preparing context
+
+    return context_dir
+
+
 if __name__ == '__main__':
     unittest.main()
diff --git a/sdk/python/tests/dsl/artifact_location_tests.py b/sdk/python/tests/dsl/artifact_location_tests.py
index 0cfd961c7a7a..0f74257f73b3 100644
--- a/sdk/python/tests/dsl/artifact_location_tests.py
+++ b/sdk/python/tests/dsl/artifact_location_tests.py
@@ -12,7 +12,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-from kfp.compiler._k8s_helper import K8sHelper
+from kfp.compiler._k8s_helper import convert_k8s_obj_to_json
 from kfp.dsl import ArtifactLocation
 from kubernetes.client.models import V1SecretKeySelector
 
@@ -87,8 +87,8 @@ def test_create_artifact_for_s3(self):
     self.assertEqual(artifact.s3.secret_key_secret.key, "secretkey")
 
   def test_create_artifact_for_s3_with_dict(self):
-    # use the K8sHelper to mimick the compiler
-    artifact_location_dict = K8sHelper.convert_k8s_obj_to_json(ArtifactLocation.s3(
+    # use the convert_k8s_obj_to_json to mimick the compiler
+    artifact_location_dict = convert_k8s_obj_to_json(ArtifactLocation.s3(
         bucket="foo",
         endpoint="s3.amazonaws.com",
         insecure=False,
diff --git a/sdk/python/tests/dsl/aws_extensions_tests.py b/sdk/python/tests/dsl/aws_extensions_tests.py
index 91bb2d81c53f..0bb4c908f557 100644
--- a/sdk/python/tests/dsl/aws_extensions_tests.py
+++ b/sdk/python/tests/dsl/aws_extensions_tests.py
@@ -29,11 +29,11 @@ def test_default_aws_secret_name(self):
   def test_use_aws_secret(self):
       op1 = ContainerOp(name='op1', image='image')
       op1 = op1.apply(use_aws_secret('myaws-secret', 'key_id', 'access_key'))
-      assert len(op1.env_variables) == 2
+      assert len(op1.container.env) == 2
 
       index = 0
       for expected_name, expected_key in [('AWS_ACCESS_KEY_ID', 'key_id'), ('AWS_SECRET_ACCESS_KEY', 'access_key')]:
-          assert op1.env_variables[index].name == expected_name
-          assert op1.env_variables[index].value_from.secret_key_ref.name == 'myaws-secret'
-          assert op1.env_variables[index].value_from.secret_key_ref.key == expected_key
+          assert op1.container.env[index].name == expected_name
+          assert op1.container.env[index].value_from.secret_key_ref.name == 'myaws-secret'
+          assert op1.container.env[index].value_from.secret_key_ref.key == expected_key
           index += 1
diff --git a/sdk/python/tests/dsl/test_azure_extensions.py b/sdk/python/tests/dsl/test_azure_extensions.py
index b34af2a13b33..6c9d7f64b1f9 100644
--- a/sdk/python/tests/dsl/test_azure_extensions.py
+++ b/sdk/python/tests/dsl/test_azure_extensions.py
@@ -26,13 +26,13 @@ def test_default_secret_name(self):
     def test_use_azure_secret(self):
         op1 = ContainerOp(name='op1', image='image')
         op1 = op1.apply(use_azure_secret('foo'))
-        assert len(op1.env_variables) == 4
+        assert len(op1.container.env) == 4
         
         index = 0
         for expected in ['AZ_SUBSCRIPTION_ID', 'AZ_TENANT_ID', 'AZ_CLIENT_ID', 'AZ_CLIENT_SECRET']:
-            assert op1.env_variables[index].name == expected
-            assert op1.env_variables[index].value_from.secret_key_ref.name == 'foo'
-            assert op1.env_variables[index].value_from.secret_key_ref.key == expected
+            assert op1.container.env[index].name == expected
+            assert op1.container.env[index].value_from.secret_key_ref.name == 'foo'
+            assert op1.container.env[index].value_from.secret_key_ref.key == expected
             index += 1
 
 if __name__ == '__main__':
diff --git a/sdk/python/tests/test_kfp.py b/sdk/python/tests/test_kfp.py
new file mode 100644
index 000000000000..bd0a7caf425f
--- /dev/null
+++ b/sdk/python/tests/test_kfp.py
@@ -0,0 +1,6 @@
+import unittest
+
+class KfpTestCase(unittest.TestCase):
+    def test_kfp_version(self):
+        import kfp
+        self.assertTrue(len(kfp.__version__) > 0)
diff --git a/test/cloudbuild/batch_build.yaml b/test/cloudbuild/batch_build.yaml
index 78ada4534b3d..c8ee57aeb5a0 100644
--- a/test/cloudbuild/batch_build.yaml
+++ b/test/cloudbuild/batch_build.yaml
@@ -21,14 +21,15 @@ steps:
     waitFor: ["-"]
   - name: "gcr.io/cloud-builders/docker"
     args:
-      ["build", "-t", "$_GCR_BASE/inverse-proxy-agent", "-f", "proxy/Dockerfile", "."]
+      ["build", "-t", "$_GCR_BASE/inverse-proxy-agent", "-f", "proxy/Dockerfile", "./proxy"]
     waitFor: ["-"]
 options:
   machineType: N1_HIGHCPU_8 # use a fast machine to build because there a lot of work
 images:
-  - "$_GCR_BASE/frontend"
-  - "$_GCR_BASE/scheduledworkflow"
   - "$_GCR_BASE/persistenceagent"
+  - "$_GCR_BASE/scheduledworkflow"
+  - "$_GCR_BASE/frontend"
   - "$_GCR_BASE/viewer-crd-controller"
   - "$_GCR_BASE/visualization-server"
+  - "$_GCR_BASE/inverse-proxy-agent"
 timeout: 1800s # 30min
diff --git a/test/component_test.yaml b/test/component_test.yaml
index 70b341590227..bdf9fb0aeea9 100644
--- a/test/component_test.yaml
+++ b/test/component_test.yaml
@@ -56,7 +56,7 @@ spec:
             value: test/sample-test/Dockerfile
           - name: image-name
             value: "{{inputs.parameters.target-image-prefix}}{{inputs.parameters.sample-tests-image-suffix}}"
-      - name: run-xgboost-tests
+    - - name: run-xgboost-tests
         template: run-sample-tests
         arguments:
           parameters:
@@ -64,22 +64,8 @@ spec:
             value: "{{inputs.parameters.test-results-gcs-dir}}"
           - name: target-image-prefix
             value: "{{inputs.parameters.target-image-prefix}}"
-          - name: dataproc-create-cluster-image
-            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-dataproc-create-cluster:{{inputs.parameters.commit-sha}}"
-          - name: dataproc-delete-cluster-image
-            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-dataproc-delete-cluster:{{inputs.parameters.commit-sha}}"
-          - name: dataproc-analyze-image
-            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-dataproc-analyze:{{inputs.parameters.commit-sha}}"
-          - name: dataproc-transform-image
-            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-dataproc-transform:{{inputs.parameters.commit-sha}}"
-          - name: dataproc-train-image
-            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-dataproc-train:{{inputs.parameters.commit-sha}}"
-          - name: dataproc-predict-image
-            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-dataproc-predict:{{inputs.parameters.commit-sha}}"
-          - name: kubeflow-dnntrainer-image
-            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-kubeflow-tf-trainer:{{inputs.parameters.commit-sha}}"
-          - name: kubeflow-deployer-image
-            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-kubeflow-deployer:{{inputs.parameters.commit-sha}}"
+          - name: gcp-image
+            value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-gcp:{{inputs.parameters.commit-sha}}"
           - name: local-confusionmatrix-image
             value: "{{inputs.parameters.component-image-prefix}}ml-pipeline-local-confusion-matrix:{{inputs.parameters.commit-sha}}"
           - name: local-roc-image
@@ -138,14 +124,7 @@ spec:
       parameters:
       - name: test-results-gcs-dir
       - name: target-image-prefix
-      - name: dataproc-create-cluster-image
-      - name: dataproc-delete-cluster-image
-      - name: dataproc-analyze-image
-      - name: dataproc-transform-image
-      - name: dataproc-train-image
-      - name: dataproc-predict-image
-      - name: kubeflow-dnntrainer-image
-      - name: kubeflow-deployer-image
+      - name: gcp-image
       - name: local-confusionmatrix-image
       - name: local-roc-image
       - name: sample-tests-image
@@ -157,14 +136,7 @@ spec:
         "component_test", "run_test",
         "--results-gcs-dir", "{{inputs.parameters.test-results-gcs-dir}}",
         "--target-image-prefix", "{{inputs.parameters.target-image-prefix}}",
-        "--dataproc-create-cluster-image","{{inputs.parameters.dataproc-create-cluster-image}}",
-        "--dataproc-delete-cluster-image","{{inputs.parameters.dataproc-delete-cluster-image}}",
-        "--dataproc-analyze-image","{{inputs.parameters.dataproc-analyze-image}}",
-        "--dataproc-transform-image","{{inputs.parameters.dataproc-transform-image}}",
-        "--dataproc-train-image","{{inputs.parameters.dataproc-train-image}}",
-        "--dataproc-predict-image","{{inputs.parameters.dataproc-predict-image}}",
-        "--kubeflow-dnntrainer-image","{{inputs.parameters.kubeflow-dnntrainer-image}}",
-        "--kubeflow-deployer-image","{{inputs.parameters.kubeflow-deployer-image}}",
+        "--gcp-image", "{{inputs.parameters.gcp-image}}",
         "--local-confusionmatrix-image", "{{inputs.parameters.local-confusionmatrix-image}}",
         "--local-roc-image", "{{inputs.parameters.local-roc-image}}",
         "--namespace", "{{inputs.parameters.namespace}}",
diff --git a/test/deploy-cluster.sh b/test/deploy-cluster.sh
index 12e6c26dd4e6..aac48f5177ce 100755
--- a/test/deploy-cluster.sh
+++ b/test/deploy-cluster.sh
@@ -27,6 +27,17 @@ SHOULD_CLEANUP_CLUSTER=false
 function clean_up {
   set +e # the following clean up commands shouldn't exit on error
 
+  echo "Describe pods with unhealthy status:"
+  UNHEALTHY_PODS=($(kubectl get pods --field-selector=status.phase!=Running,status.phase!=Succeeded -o=custom-columns=:metadata.name -n $NAMESPACE))
+  for POD_NAME in "${UNHEALTHY_PODS[@]}"; do
+    echo ""
+    echo "For pod $POD_NAME:"
+    kubectl describe pod $POD_NAME -n $NAMESPACE
+  done
+  echo "============================================================="
+  echo "The above is output of describing pods with unhealthy status."
+  echo "============================================================="
+
   echo "Status of pods before clean up:"
   kubectl get pods --all-namespaces
 
@@ -48,7 +59,7 @@ else
   SHOULD_CLEANUP_CLUSTER=true
   # "storage-rw" is needed to allow VMs to push to gcr.io
   # reference: https://cloud.google.com/compute/docs/access/service-accounts#accesscopesiam
-  SCOPE_ARG="--scopes=storage-rw"
+  SCOPE_ARG="--scopes=storage-rw,cloud-platform"
   # Machine type and cluster size is the same as kubeflow deployment to
   # easily compare performance. We can reduce usage later.
   NODE_POOL_CONFIG_ARG="--num-nodes=2 --machine-type=n1-standard-8 \
diff --git a/test/frontend-integration-test/Dockerfile b/test/frontend-integration-test/Dockerfile
index 5c7b1dae2617..c416e5c1b681 100644
--- a/test/frontend-integration-test/Dockerfile
+++ b/test/frontend-integration-test/Dockerfile
@@ -1,18 +1,8 @@
-FROM selenium/standalone-chrome:3.141.59-oxygen
+FROM gcr.io/ml-pipeline-test/selenium-standalone-chrome-gcloud-nodejs:v20190618-0.1.21-79-g2d40ae68-dirty-9d8d84
+#To build this image: cd selenium-standalone-chrome-gcloud-nodejs.Docker && make push
 
-USER root
+COPY --chown=seluser . /src
 
 WORKDIR /src
 
-COPY . .
-
-RUN apt-get update -y && apt-get install -y curl && \
-    curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
-    apt-get install -y nodejs && \
-    apt-get remove -y curl && \
-    rm -rf /var/lib/apt/lists/* /tmp/* /usr/share/locale/* /usr/share/i18n/locales/* && \
-    chown -R seluser /src && chmod -R 777 /src
-
-USER seluser
-
 ENTRYPOINT [ "./run_test.sh" ]
diff --git a/test/frontend-integration-test/run_test.sh b/test/frontend-integration-test/run_test.sh
index bda8002496e0..05a4366b1a74 100755
--- a/test/frontend-integration-test/run_test.sh
+++ b/test/frontend-integration-test/run_test.sh
@@ -49,24 +49,15 @@ if [ -z "$RESULTS_GCS_DIR" ]; then
     exit 1
 fi
 
-# Setup Google Cloud SDK, and use it to install kubectl so it gets the right context
-wget -nv https://dl.google.com/dl/cloudsdk/release/google-cloud-sdk.zip
-unzip -qq google-cloud-sdk.zip -d tools
-rm google-cloud-sdk.zip
-tools/google-cloud-sdk/install.sh --usage-reporting=false \
-  --path-update=false --bash-completion=false \
-  --disable-installation-options
-tools/google-cloud-sdk/bin/gcloud -q components install kubectl
-
 if [[ ! -z "${GOOGLE_APPLICATION_CREDENTIALS}" ]]; then
-  tools/google-cloud-sdk/bin/gcloud auth activate-service-account --key-file="${GOOGLE_APPLICATION_CREDENTIALS}"
+  gcloud auth activate-service-account --key-file="${GOOGLE_APPLICATION_CREDENTIALS}"
 fi
 
 npm install
 
 # Port forward the UI so tests can work against localhost
-POD=`/src/tools/google-cloud-sdk/bin/kubectl get pods -n ${NAMESPACE} -l app=ml-pipeline-ui -o jsonpath='{.items[0].metadata.name}'`
-/src/tools/google-cloud-sdk/bin/kubectl port-forward -n ${NAMESPACE} ${POD} 3000:3000 &
+POD=`kubectl get pods -n ${NAMESPACE} -l app=ml-pipeline-ui -o jsonpath='{.items[0].metadata.name}'`
+kubectl port-forward -n ${NAMESPACE} ${POD} 3000:3000 &
 
 # Run Selenium server
 /opt/bin/entry_point.sh &
@@ -83,6 +74,6 @@ set -e
 JUNIT_TEST_RESULT=junit_FrontendIntegrationTestOutput.xml
 
 echo "Copy test result to GCS ${RESULTS_GCS_DIR}/${JUNIT_TEST_RESULT}"
-tools/google-cloud-sdk/bin/gsutil cp ${JUNIT_TEST_RESULT} ${RESULTS_GCS_DIR}/${JUNIT_TEST_RESULT}
+gsutil cp ${JUNIT_TEST_RESULT} ${RESULTS_GCS_DIR}/${JUNIT_TEST_RESULT}
 
 exit $TEST_EXIT_CODE
diff --git a/test/frontend-integration-test/selenium-standalone-chrome-gcloud-nodejs.Docker/Dockerfile b/test/frontend-integration-test/selenium-standalone-chrome-gcloud-nodejs.Docker/Dockerfile
new file mode 100644
index 000000000000..f4c9af50c439
--- /dev/null
+++ b/test/frontend-integration-test/selenium-standalone-chrome-gcloud-nodejs.Docker/Dockerfile
@@ -0,0 +1,35 @@
+FROM selenium/standalone-chrome:3.141.59-oxygen
+
+USER root
+
+ARG CLOUD_SDK_VERSION=244.0.0
+ENV CLOUD_SDK_VERSION=$CLOUD_SDK_VERSION
+
+ARG INSTALL_COMPONENTS=kubectl
+ENV PATH "$PATH:/opt/google-cloud-sdk/bin/"
+RUN apt-get update -qqy && apt-get install -qqy \
+        curl \
+        gcc \
+        python-dev \
+        python-pip \
+        apt-transport-https \
+        lsb-release \
+        openssh-client \
+        git \
+        gnupg \
+    && \
+    pip install -U crcmod && \
+    export CLOUD_SDK_REPO="cloud-sdk-$(lsb_release -c -s)" && \
+    echo "deb https://packages.cloud.google.com/apt $CLOUD_SDK_REPO main" > /etc/apt/sources.list.d/google-cloud-sdk.list && \
+    curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add - && \
+    apt-get update && apt-get install -y google-cloud-sdk=${CLOUD_SDK_VERSION}-0 $INSTALL_COMPONENTS && \
+    rm -rf /var/lib/apt/lists/* /tmp/* /usr/share/locale/* /usr/share/i18n/locales/*
+
+
+RUN curl --silent --show-error --location https://deb.nodesource.com/setup_8.x | bash - && \
+    apt-get install -y nodejs
+
+USER seluser
+
+RUN gcloud config set core/disable_usage_reporting true && \
+    gcloud config set component_manager/disable_update_check true
diff --git a/test/frontend-integration-test/selenium-standalone-chrome-gcloud-nodejs.Docker/Makefile b/test/frontend-integration-test/selenium-standalone-chrome-gcloud-nodejs.Docker/Makefile
new file mode 100644
index 000000000000..29d64f5d57cd
--- /dev/null
+++ b/test/frontend-integration-test/selenium-standalone-chrome-gcloud-nodejs.Docker/Makefile
@@ -0,0 +1,39 @@
+# Copyright 2018 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+IMG = gcr.io/ml-pipeline-test/selenium-standalone-chrome-gcloud-nodejs
+
+# Unique tag including date, commit SHA and a random number
+TAG := $(shell date +v%Y%m%d)-$(shell git describe --tags --always --dirty)-$(shell git diff | shasum -a256 | cut -c -6)
+
+all: build
+
+# To build without the cache set the environment variable
+# export DOCKER_BUILD_OPTS=--no-cache
+build:
+	docker build ${DOCKER_BUILD_OPTS} -t $(IMG):$(TAG) .
+	@echo Built $(IMG):$(TAG)
+
+# Build but don't attach the latest tag. This allows manual testing/inspection of the image first.
+push: build
+	gcloud auth configure-docker
+	docker push $(IMG):$(TAG)
+	@echo Pushed $(IMG) with  :$(TAG) tags
+	# Tagging into a new project can be very slow but it appears to work.
+	gcloud container images add-tag --quiet $(IMG):$(TAG) $(IMG):$(TAG) --verbosity=info
+	echo created $(IMG):$(TAG)
+
+push-latest: push
+	gcloud container images add-tag --quiet $(IMG):$(TAG) $(IMG):latest --verbosity=info
+	echo created $(IMG):latest
diff --git a/test/sample-test/Dockerfile b/test/sample-test/Dockerfile
index 5e3c4b49d307..9d41ca65aeee 100644
--- a/test/sample-test/Dockerfile
+++ b/test/sample-test/Dockerfile
@@ -3,9 +3,11 @@
 FROM google/cloud-sdk:236.0.0
 
 RUN apt-get update -y && \
-    apt-get install --no-install-recommends -y -q python3-pip default-jdk python3-setuptools python3-dev && \
+    apt-get install --no-install-recommends -y -q default-jdk python3-setuptools python3-dev && \
     apt-get install --no-install-recommends -y -q libssl-dev libffi-dev wget ssh
 
+RUN wget https://bootstrap.pypa.io/get-pip.py && python3 get-pip.py
+
 RUN pip3 install wheel
 RUN pip3 install junit-xml
 RUN pip3 install kubernetes==9.0.0
diff --git a/test/sample-test/check_notebook_results.py b/test/sample-test/check_notebook_results.py
index 904209710508..2d3dc3db3e09 100644
--- a/test/sample-test/check_notebook_results.py
+++ b/test/sample-test/check_notebook_results.py
@@ -21,26 +21,27 @@
 
 
 class NoteBookChecker(object):
-    def __init__(self, testname, result, run_pipeline, namespace='kubeflow'):
+    def __init__(self, testname, result, run_pipeline, experiment_name, namespace='kubeflow'):
         """ Util class for checking notebook sample test running results.
 
         :param testname: test name in the json xml.
         :param result: name of the file that stores the test result
         :param run_pipeline: whether to submit for a pipeline run.
         :param namespace: where the pipeline system is deployed.
+        :param experiment_name: Name of the experiment to monitor
         """
         self._testname = testname
         self._result = result
         self._exit_code = None
         self._run_pipeline = run_pipeline
         self._namespace = namespace
+        self._experiment_name = experiment_name
 
     def run(self):
         """ Run the notebook sample as a python script. """
         self._exit_code = str(
             subprocess.call(['ipython', '%s.py' % self._testname]))
 
-
     def check(self):
         """ Check the pipeline running results of the notebook sample. """
         test_cases = []
@@ -63,7 +64,7 @@ def check(self):
             test_timeout = raw_args['test_timeout']
 
         if self._run_pipeline:
-            experiment = self._testname + '-test'
+            experiment = self._experiment_name
             ###### Initialization ######
             host = 'ml-pipeline.%s.svc.cluster.local:8888' % self._namespace
             client = Client(host=host)
diff --git a/test/sample-test/configs/ai_platform.config.yaml b/test/sample-test/configs/ai_platform.config.yaml
new file mode 100644
index 000000000000..6f1ee86b466a
--- /dev/null
+++ b/test/sample-test/configs/ai_platform.config.yaml
@@ -0,0 +1,18 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+test_name: ai_platform
+notebook_params:
+  output:
+  project_id: ml-pipeline-test
diff --git a/test/sample-test/configs/component_build.config.yaml b/test/sample-test/configs/container_build.config.yaml
similarity index 90%
rename from test/sample-test/configs/component_build.config.yaml
rename to test/sample-test/configs/container_build.config.yaml
index b74b08ac6abf..560eb0b2ed54 100644
--- a/test/sample-test/configs/component_build.config.yaml
+++ b/test/sample-test/configs/container_build.config.yaml
@@ -12,7 +12,6 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-test_name: component_build
+test_name: container_build
 notebook_params:
-  experiment_name: component_build-test
   PROJECT_NAME: ml-pipeline-test
diff --git a/test/sample-test/configs/dataflow.config.yaml b/test/sample-test/configs/dataflow.config.yaml
index 28a853bf9fdf..60938377cbc2 100644
--- a/test/sample-test/configs/dataflow.config.yaml
+++ b/test/sample-test/configs/dataflow.config.yaml
@@ -16,5 +16,4 @@ test_name: dataflow
 notebook_params:
   output:
   project: ml-pipeline-test
-  experiment_name: dataflow-test
-run_pipeline: False
\ No newline at end of file
+run_pipeline: True
\ No newline at end of file
diff --git a/test/sample-test/configs/kubeflow_tf_serving.config.yaml b/test/sample-test/configs/kubeflow_tf_serving.config.yaml
index c2fc5d3859e3..0692aa9f0a05 100644
--- a/test/sample-test/configs/kubeflow_tf_serving.config.yaml
+++ b/test/sample-test/configs/kubeflow_tf_serving.config.yaml
@@ -16,4 +16,3 @@ test_name: kubeflow_tf_serving
 notebook_params:
   output:
   project: ml-pipeline-test
-  experiment_name: kubeflow_tf_serving-test
\ No newline at end of file
diff --git a/test/sample-test/configs/multiple_outputs.config.yaml b/test/sample-test/configs/multiple_outputs.config.yaml
new file mode 100644
index 000000000000..3b55b6b470a2
--- /dev/null
+++ b/test/sample-test/configs/multiple_outputs.config.yaml
@@ -0,0 +1,18 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+test_name: multiple_outputs
+notebook_params:
+  output:
+  project_id: ml-pipeline-test
diff --git a/test/sample-test/configs/parameterized_tfx_oss.config.yaml b/test/sample-test/configs/parameterized_tfx_oss.config.yaml
new file mode 100644
index 000000000000..f0d70636c0d1
--- /dev/null
+++ b/test/sample-test/configs/parameterized_tfx_oss.config.yaml
@@ -0,0 +1,18 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+test_name: parameterized_tfx_oss
+arguments:
+  output:
+run_pipeline: True
\ No newline at end of file
diff --git a/test/sample-test/configs/schema.config.yaml b/test/sample-test/configs/schema.config.yaml
index 7d6b2bc85e6f..852ed24d865f 100644
--- a/test/sample-test/configs/schema.config.yaml
+++ b/test/sample-test/configs/schema.config.yaml
@@ -14,7 +14,15 @@
 
 # This is the schema for sample test config yaml file.
 test_name: str()
+# Parameters for python samples.
+# If 'output' is specified, values will be dynamically injected
 arguments: map(required=False)
+# Parameters for notebook samples. 
+# If 'output' is specified, values will be dynamically injected
 notebook_params: map(required=False)
+# Timeout
 test_timeout: int(min=0, required=False)
+# For python samples, run_pipeline means submiting the pipeline
+# run; For notebook samples, run_pipeline means checking the 
+# run results assuming the notebook codes already submit the run.
 run_pipeline: bool(required=False)
\ No newline at end of file
diff --git a/test/sample-test/run_sample_test.py b/test/sample-test/run_sample_test.py
index 129b3c5bde6a..675975b46785 100644
--- a/test/sample-test/run_sample_test.py
+++ b/test/sample-test/run_sample_test.py
@@ -12,8 +12,10 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+import kfp
 import os
 import tarfile
+import time
 import utils
 import yamale
 import yaml
@@ -23,7 +25,7 @@
 
 
 class PySampleChecker(object):
-  def __init__(self, testname, input, output, result, namespace='kubeflow'):
+  def __init__(self, testname, input, output, result, experiment_name, namespace='kubeflow'):
     """Util class for checking python sample test running results.
 
     :param testname: test name.
@@ -31,8 +33,10 @@ def __init__(self, testname, input, output, result, namespace='kubeflow'):
     :param output: The path of the test output.
     :param result: The path of the test result that will be exported.
     :param namespace: namespace of the deployed pipeline system. Default: kubeflow
+    :param experiment_name: Name of the experiment to monitor
     """
     self._testname = testname
+    self._experiment_name = experiment_name
     self._input = input
     self._output = output
     self._result = result
@@ -66,8 +70,7 @@ def run(self):
       exit(1)
 
     ###### Create Experiment ######
-    experiment_name = self._testname + ' sample experiment'
-    response = self._client.create_experiment(experiment_name)
+    response = self._client.create_experiment(self._experiment_name)
     self._experiment_id = response.id
     utils.add_junit_test(self._test_cases, 'create experiment', True)
 
@@ -109,6 +112,13 @@ def run(self):
       if 'run_pipeline' in raw_args.keys():
         self._run_pipeline = raw_args['run_pipeline']
 
+    # TODO(numerology): Special treatment for TFX::OSS sample
+    if self._testname == 'parameterized_tfx_oss':
+      self._test_args['pipeline-root'] = os.path.join(
+          self._test_args['output'],
+          'tfx_taxi_simple_' + kfp.dsl.RUN_ID_PLACEHOLDER)
+      del self._test_args['output']
+
     # Submit for pipeline running.
     if self._run_pipeline:
       response = self._client.run_pipeline(self._experiment_id, self._job_name, self._input, self._test_args)
@@ -142,7 +152,6 @@ def check(self):
         exit(1)
 
       ###### Validate the results for specific test cases ######
-      #TODO: Add result check for tfx-cab-classification after launch.
       if self._testname == 'xgboost_training_cm':
         # For xgboost sample, check its confusion matrix.
         cm_tar_path = './confusion_matrix.tar.gz'
diff --git a/test/sample-test/sample_test_launcher.py b/test/sample-test/sample_test_launcher.py
index aa24c50f0a60..eb4240872068 100644
--- a/test/sample-test/sample_test_launcher.py
+++ b/test/sample-test/sample_test_launcher.py
@@ -47,11 +47,20 @@ def __init__(self, test_name, results_gcs_dir, target_image_prefix='',
     # Capture the first segment after gs:// as the project name.
     self._bucket_name = results_gcs_dir.split('/')[2]
     self._target_image_prefix = target_image_prefix
-    self._is_notebook = None
     self._namespace = namespace
+
+    # TODO(numerology): special treatment for new TFX::OSS sample. Current decision
+    # is that we directly run its compiled version, for its compilation brings
+    # complex and unstable dependencies. See
+    if test_name == 'parameterized_tfx_oss':
+      self._is_notebook = False
+      self._work_dir = os.path.join(BASE_DIR, 'samples/contrib/', self._test_name)
+    else:
+      self._is_notebook = None
+      self._work_dir = os.path.join(BASE_DIR, 'samples/core/', self._test_name)
+
     self._sample_test_result = 'junit_Sample%sOutput.xml' % self._test_name
     self._sample_test_output = self._results_gcs_dir
-    self._work_dir = os.path.join(BASE_DIR, 'samples/core/', self._test_name)
 
   def _copy_result(self):
     """ Copy generated sample test result to gcs, so that Prow can pick it. """
@@ -119,9 +128,6 @@ def _compile(self):
         if 'run_pipeline' in raw_args.keys():
           self._run_pipeline = raw_args['run_pipeline']
 
-      if self._run_pipeline:
-        nb_params['experiment_name'] = self._test_name + '-test'
-
       pm.execute_notebook(
           input_path='%s.ipynb' % self._test_name,
           output_path='%s.ipynb' % self._test_name,
@@ -144,24 +150,38 @@ def _injection(self):
     pass
 
   def run_test(self):
-    self._compile()
-    self._injection()
+    # TODO(numerology): ad hoc logic for TFX::OSS sample
+    if self._test_name != 'parameterized_tfx_oss':
+      self._compile()
+      self._injection()
+
+    # Overriding the experiment name of pipeline runs
+    experiment_name = self._test_name + '-test'
+    os.environ['KF_PIPELINES_OVERRIDE_EXPERIMENT_NAME'] = experiment_name
+
     if self._is_notebook:
       nbchecker = NoteBookChecker(testname=self._test_name,
                                   result=self._sample_test_result,
-                                  run_pipeline=self._run_pipeline)
+                                  run_pipeline=self._run_pipeline,
+                                  experiment_name=experiment_name,
+      )
       nbchecker.run()
       os.chdir(TEST_DIR)
       nbchecker.check()
     else:
       os.chdir(TEST_DIR)
+      if self._test_name != 'parameterized_tfx_oss':
+        input_file = os.path.join(self._work_dir, '%s.yaml' % self._test_name)
+      else:
+        input_file = os.path.join(self._work_dir, '%s.tar.gz' % self._test_name)
+
       pysample_checker = PySampleChecker(testname=self._test_name,
-                                         input=os.path.join(
-                                             self._work_dir,
-                                             '%s.yaml' % self._test_name),
+                                         input=input_file,
                                          output=self._sample_test_output,
                                          result=self._sample_test_result,
-                                         namespace=self._namespace)
+                                         namespace=self._namespace,
+                                         experiment_name=experiment_name,
+      )
       pysample_checker.run()
       pysample_checker.check()
 
@@ -175,14 +195,7 @@ class ComponentTest(SampleTest):
   include xgboost_training_cm
   """
   def __init__(self, test_name, results_gcs_dir,
-               dataproc_create_cluster_image,
-               dataproc_delete_cluster_image,
-               dataproc_analyze_image,
-               dataproc_transform_image,
-               dataproc_train_image,
-               dataproc_predict_image,
-               kubeflow_dnntrainer_image,
-               kubeflow_deployer_image,
+               gcp_image,
                local_confusionmatrix_image,
                local_roc_image,
                target_image_prefix='',
@@ -193,16 +206,9 @@ def __init__(self, test_name, results_gcs_dir,
         target_image_prefix=target_image_prefix,
         namespace=namespace
     )
-    self._dataproc_create_cluster_image = dataproc_create_cluster_image
-    self._dataproc_delete_cluster_image = dataproc_delete_cluster_image
-    self._dataproc_analyze_image = dataproc_analyze_image
-    self._dataproc_transform_image = dataproc_transform_image
-    self._dataproc_train_image = dataproc_train_image
-    self._dataproc_predict_image = dataproc_predict_image
-    self._kubeflow_dnntrainer_image = kubeflow_dnntrainer_image
-    self._kubeflow_deployer_image = kubeflow_deployer_image
     self._local_confusionmatrix_image = local_confusionmatrix_image
     self._local_roc_image = local_roc_image
+    self._dataproc_gcp_image = gcp_image
 
   def _injection(self):
     """Sample-specific image injection into yaml file."""
@@ -212,12 +218,7 @@ def _injection(self):
     }
     if self._test_name == 'xgboost_training_cm':
       subs.update({
-          'gcr\.io/ml-pipeline/ml-pipeline-dataproc-create-cluster:\w+':self._dataproc_create_cluster_image,
-          'gcr\.io/ml-pipeline/ml-pipeline-dataproc-delete-cluster:\w+':self._dataproc_delete_cluster_image,
-          'gcr\.io/ml-pipeline/ml-pipeline-dataproc-analyze:\w+':self._dataproc_analyze_image,
-          'gcr\.io/ml-pipeline/ml-pipeline-dataproc-transform:\w+':self._dataproc_transform_image,
-          'gcr\.io/ml-pipeline/ml-pipeline-dataproc-train:\w+':self._dataproc_train_image,
-          'gcr\.io/ml-pipeline/ml-pipeline-dataproc-predict:\w+':self._dataproc_predict_image,
+          'gcr\.io/ml-pipeline/ml-pipeline-gcp:\w+':self._dataproc_gcp_image
       })
 
       utils.file_injection('%s.yaml' % self._test_name,
diff --git a/test/sample_test.yaml b/test/sample_test.yaml
index a70385125d9b..bef7d2011a27 100644
--- a/test/sample_test.yaml
+++ b/test/sample_test.yaml
@@ -81,11 +81,14 @@ spec:
               - preemptible_tpu_gpu
               - volume_snapshot_ops
               - kubeflow_tf_serving
-              - component_build
+              - container_build
               - loop_output
               - loop_parameter
               - loop_static
               - resource_ops
+              - multiple_outputs
+              - ai_platform
+              - parameterized_tfx_oss
     # Build and push image
     - name: build-image-by-dockerfile
       inputs:
diff --git a/third_party/argo/license-intermediate-data/dep.txt b/third_party/argo/license-intermediate-data/dep.txt
new file mode 100644
index 000000000000..ee036211bfc7
--- /dev/null
+++ b/third_party/argo/license-intermediate-data/dep.txt
@@ -0,0 +1,100 @@
+github.com/argoproj/argo
+cloud.google.com/go
+contrib.go.opencensus.io/exporter/ocagent
+github.com/Azure/go-autorest
+github.com/Knetic/govaluate
+github.com/PuerkitoBio/purell
+github.com/PuerkitoBio/urlesc
+github.com/argoproj/pkg
+github.com/aws/aws-sdk-go
+github.com/beorn7/perks
+github.com/census-instrumentation/opencensus-proto
+github.com/colinmarc/hdfs
+github.com/davecgh/go-spew
+github.com/dgrijalva/jwt-go
+github.com/docker/spdystream
+github.com/dustin/go-humanize
+github.com/emicklei/go-restful
+github.com/emirpasic/gods
+github.com/evanphx/json-patch
+github.com/go-openapi/jsonpointer
+github.com/go-openapi/jsonreference
+github.com/go-openapi/spec
+github.com/go-openapi/swag
+github.com/go-sql-driver/mysql
+github.com/gogo/protobuf
+github.com/golang/protobuf
+github.com/google/gofuzz
+github.com/googleapis/gnostic
+github.com/gorilla/websocket
+github.com/grpc-ecosystem/grpc-gateway
+github.com/hashicorp/go-uuid
+github.com/hashicorp/golang-lru
+github.com/imdario/mergo
+github.com/inconshreveable/mousetrap
+github.com/jbenet/go-context
+github.com/jcmturner/gofork
+github.com/jmespath/go-jmespath
+github.com/json-iterator/go
+github.com/kevinburke/ssh_config
+github.com/konsorten/go-windows-terminal-sequences
+github.com/lib/pq
+github.com/mailru/easyjson
+github.com/matttproud/golang_protobuf_extensions
+github.com/minio/minio-go
+github.com/mitchellh/go-homedir
+github.com/mitchellh/go-ps
+github.com/modern-go/concurrent
+github.com/modern-go/reflect2
+github.com/pkg/errors
+github.com/pmezard/go-difflib
+github.com/prometheus/client_golang
+github.com/prometheus/client_model
+github.com/prometheus/common
+github.com/prometheus/procfs
+github.com/sergi/go-diff
+github.com/sirupsen/logrus
+github.com/spf13/cobra
+github.com/spf13/pflag
+github.com/src-d/gcfg
+github.com/stretchr/objx
+github.com/stretchr/testify
+github.com/tidwall/gjson
+github.com/tidwall/match
+github.com/tidwall/pretty
+github.com/valyala/bytebufferpool
+github.com/valyala/fasttemplate
+github.com/xanzy/ssh-agent
+go.opencensus.io
+golang.org/x/crypto
+golang.org/x/net
+golang.org/x/oauth2
+golang.org/x/sync
+golang.org/x/sys
+golang.org/x/text
+golang.org/x/time
+golang.org/x/tools
+google.golang.org/api
+google.golang.org/appengine
+google.golang.org/genproto
+google.golang.org/grpc
+gopkg.in/inf.v0
+gopkg.in/ini.v1
+gopkg.in/jcmturner/aescts.v1
+gopkg.in/jcmturner/dnsutils.v1
+gopkg.in/jcmturner/gokrb5.v5
+gopkg.in/jcmturner/rpc.v0
+gopkg.in/src-d/go-billy.v4
+gopkg.in/src-d/go-git.v4
+gopkg.in/warnings.v0
+gopkg.in/yaml.v2
+k8s.io/api
+k8s.io/apimachinery
+k8s.io/client-go
+k8s.io/code-generator
+k8s.io/gengo
+k8s.io/klog
+k8s.io/kube-openapi
+k8s.io/utils
+sigs.k8s.io/yaml
+upper.io/db.v3
diff --git a/third_party/argo/license-intermediate-data/dep_repo.manual.csv b/third_party/argo/license-intermediate-data/dep_repo.manual.csv
new file mode 100644
index 000000000000..9a85656a3e2e
--- /dev/null
+++ b/third_party/argo/license-intermediate-data/dep_repo.manual.csv
@@ -0,0 +1 @@
+upper.io/db.v3,upper/db
diff --git a/third_party/argo/license-intermediate-data/license_info.csv b/third_party/argo/license-intermediate-data/license_info.csv
new file mode 100644
index 000000000000..36c504212635
--- /dev/null
+++ b/third_party/argo/license-intermediate-data/license_info.csv
@@ -0,0 +1,99 @@
+argoproj/argo,https://github.com/argoproj/argo/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/argoproj/argo/master/LICENSE
+GoogleCloudPlatform/gcloud-golang,https://github.com/googleapis/google-cloud-go/blob/master/LICENSE,Other,https://raw.githubusercontent.com/googleapis/google-cloud-go/master/LICENSE
+census-ecosystem/opencensus-go-exporter-ocagent,https://github.com/census-ecosystem/opencensus-go-exporter-ocagent/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/census-ecosystem/opencensus-go-exporter-ocagent/master/LICENSE
+Azure/go-autorest,https://github.com/Azure/go-autorest/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/Azure/go-autorest/master/LICENSE
+Knetic/govaluate,https://github.com/Knetic/govaluate/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/Knetic/govaluate/master/LICENSE
+PuerkitoBio/purell,https://github.com/PuerkitoBio/purell/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/PuerkitoBio/purell/master/LICENSE
+PuerkitoBio/urlesc,https://github.com/PuerkitoBio/urlesc/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/PuerkitoBio/urlesc/master/LICENSE
+argoproj/pkg,https://github.com/argoproj/pkg/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/argoproj/pkg/master/LICENSE
+aws/aws-sdk-go,https://github.com/aws/aws-sdk-go/blob/master/LICENSE.txt,Apache License 2.0,https://raw.githubusercontent.com/aws/aws-sdk-go/master/LICENSE.txt
+beorn7/perks,https://github.com/beorn7/perks/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/beorn7/perks/master/LICENSE
+census-instrumentation/opencensus-proto,https://github.com/census-instrumentation/opencensus-proto/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/census-instrumentation/opencensus-proto/master/LICENSE
+colinmarc/hdfs,https://github.com/colinmarc/hdfs/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/colinmarc/hdfs/master/LICENSE.txt
+davecgh/go-spew,https://github.com/davecgh/go-spew/blob/master/LICENSE,ISC License,https://raw.githubusercontent.com/davecgh/go-spew/master/LICENSE
+dgrijalva/jwt-go,https://github.com/dgrijalva/jwt-go/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/dgrijalva/jwt-go/master/LICENSE
+docker/spdystream,https://github.com/docker/spdystream/blob/master/LICENSE,Other,https://raw.githubusercontent.com/docker/spdystream/master/LICENSE
+dustin/go-humanize,https://github.com/dustin/go-humanize/blob/master/LICENSE,Other,https://raw.githubusercontent.com/dustin/go-humanize/master/LICENSE
+emicklei/go-restful,https://github.com/emicklei/go-restful/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/emicklei/go-restful/master/LICENSE
+emirpasic/gods,https://github.com/emirpasic/gods/blob/master/LICENSE,Other,https://raw.githubusercontent.com/emirpasic/gods/master/LICENSE
+evanphx/json-patch,https://github.com/evanphx/json-patch/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/evanphx/json-patch/master/LICENSE
+go-openapi/jsonpointer,https://github.com/go-openapi/jsonpointer/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/go-openapi/jsonpointer/master/LICENSE
+go-openapi/jsonreference,https://github.com/go-openapi/jsonreference/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/go-openapi/jsonreference/master/LICENSE
+go-openapi/spec,https://github.com/go-openapi/spec/blob/master/LICENSE,Other,https://raw.githubusercontent.com/go-openapi/spec/master/LICENSE
+go-openapi/swag,https://github.com/go-openapi/swag/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/go-openapi/swag/master/LICENSE
+go-sql-driver/mysql,https://github.com/go-sql-driver/mysql/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/go-sql-driver/mysql/master/LICENSE
+gogo/protobuf,https://github.com/gogo/protobuf/blob/master/LICENSE,Other,https://raw.githubusercontent.com/gogo/protobuf/master/LICENSE
+golang/protobuf,https://github.com/golang/protobuf/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/golang/protobuf/master/LICENSE
+google/gofuzz,https://github.com/google/gofuzz/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/google/gofuzz/master/LICENSE
+googleapis/gnostic,https://github.com/googleapis/gnostic/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/googleapis/gnostic/master/LICENSE
+gorilla/websocket,https://github.com/gorilla/websocket/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/gorilla/websocket/master/LICENSE
+grpc-ecosystem/grpc-gateway,https://github.com/grpc-ecosystem/grpc-gateway/blob/master/LICENSE.txt,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/master/LICENSE.txt
+hashicorp/go-uuid,https://github.com/hashicorp/go-uuid/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-uuid/master/LICENSE
+hashicorp/golang-lru,https://github.com/hashicorp/golang-lru/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/golang-lru/master/LICENSE
+imdario/mergo,https://github.com/imdario/mergo/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/imdario/mergo/master/LICENSE
+inconshreveable/mousetrap,https://github.com/inconshreveable/mousetrap/blob/master/LICENSE,Other,https://raw.githubusercontent.com/inconshreveable/mousetrap/master/LICENSE
+jbenet/go-context,https://github.com/jbenet/go-context/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/jbenet/go-context/master/LICENSE
+jcmturner/gofork,https://github.com/jcmturner/gofork/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/jcmturner/gofork/master/LICENSE
+jmespath/go-jmespath,https://github.com/jmespath/go-jmespath/blob/master/LICENSE,Other,https://raw.githubusercontent.com/jmespath/go-jmespath/master/LICENSE
+json-iterator/go,https://github.com/json-iterator/go/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/json-iterator/go/master/LICENSE
+kevinburke/ssh_config,https://github.com/kevinburke/ssh_config/blob/master/LICENSE,Other,https://raw.githubusercontent.com/kevinburke/ssh_config/master/LICENSE
+konsorten/go-windows-terminal-sequences,https://github.com/konsorten/go-windows-terminal-sequences/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/konsorten/go-windows-terminal-sequences/master/LICENSE
+lib/pq,https://github.com/lib/pq/blob/master/LICENSE.md,Other,https://raw.githubusercontent.com/lib/pq/master/LICENSE.md
+mailru/easyjson,https://github.com/mailru/easyjson/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mailru/easyjson/master/LICENSE
+matttproud/golang_protobuf_extensions,https://github.com/matttproud/golang_protobuf_extensions/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/matttproud/golang_protobuf_extensions/master/LICENSE
+minio/minio-go,https://github.com/minio/minio-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/minio-go/master/LICENSE
+mitchellh/go-homedir,https://github.com/mitchellh/go-homedir/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mitchellh/go-homedir/master/LICENSE
+mitchellh/go-ps,https://github.com/mitchellh/go-ps/blob/master/LICENSE.md,MIT License,https://raw.githubusercontent.com/mitchellh/go-ps/master/LICENSE.md
+modern-go/concurrent,https://github.com/modern-go/concurrent/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/modern-go/concurrent/master/LICENSE
+modern-go/reflect2,https://github.com/modern-go/reflect2/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/modern-go/reflect2/master/LICENSE
+pkg/errors,https://github.com/pkg/errors/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/pkg/errors/master/LICENSE
+pmezard/go-difflib,https://github.com/pmezard/go-difflib/blob/master/LICENSE,Other,https://raw.githubusercontent.com/pmezard/go-difflib/master/LICENSE
+prometheus/client_golang,https://github.com/prometheus/client_golang/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/prometheus/client_golang/master/LICENSE
+prometheus/client_model,https://github.com/prometheus/client_model/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/prometheus/client_model/master/LICENSE
+prometheus/common,https://github.com/prometheus/common/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/prometheus/common/master/LICENSE
+prometheus/procfs,https://github.com/prometheus/procfs/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/prometheus/procfs/master/LICENSE
+sergi/go-diff,https://github.com/sergi/go-diff/blob/master/LICENSE,Other,https://raw.githubusercontent.com/sergi/go-diff/master/LICENSE
+sirupsen/logrus,https://github.com/sirupsen/logrus/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/sirupsen/logrus/master/LICENSE
+spf13/cobra,https://github.com/spf13/cobra/blob/master/LICENSE.txt,Apache License 2.0,https://raw.githubusercontent.com/spf13/cobra/master/LICENSE.txt
+spf13/pflag,https://github.com/spf13/pflag/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/spf13/pflag/master/LICENSE
+src-d/gcfg,https://github.com/src-d/gcfg/blob/v1/LICENSE,Other,https://raw.githubusercontent.com/src-d/gcfg/v1/LICENSE
+stretchr/objx,https://github.com/stretchr/objx/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/stretchr/objx/master/LICENSE
+stretchr/testify,https://github.com/stretchr/testify/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/stretchr/testify/master/LICENSE
+tidwall/gjson,https://github.com/tidwall/gjson/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tidwall/gjson/master/LICENSE
+tidwall/match,https://github.com/tidwall/match/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tidwall/match/master/LICENSE
+tidwall/pretty,https://github.com/tidwall/pretty/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tidwall/pretty/master/LICENSE
+valyala/bytebufferpool,https://github.com/valyala/bytebufferpool/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/valyala/bytebufferpool/master/LICENSE
+valyala/fasttemplate,https://github.com/valyala/fasttemplate/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/valyala/fasttemplate/master/LICENSE
+xanzy/ssh-agent,https://github.com/xanzy/ssh-agent/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/xanzy/ssh-agent/master/LICENSE
+census-instrumentation/opencensus-go,https://github.com/census-instrumentation/opencensus-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/census-instrumentation/opencensus-go/master/LICENSE
+golang/crypto,https://github.com/golang/crypto/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/crypto/master/LICENSE
+golang/net,https://github.com/golang/net/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/net/master/LICENSE
+golang/oauth2,https://github.com/golang/oauth2/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/golang/oauth2/master/LICENSE
+golang/sync,https://github.com/golang/sync/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/sync/master/LICENSE
+golang/sys,https://github.com/golang/sys/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/sys/master/LICENSE
+golang/text,https://github.com/golang/text/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/text/master/LICENSE
+golang/time,https://github.com/golang/time/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/time/master/LICENSE
+golang/tools,https://github.com/golang/tools/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/tools/master/LICENSE
+google/google-api-go-client,https://github.com/googleapis/google-api-go-client/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/googleapis/google-api-go-client/master/LICENSE
+golang/appengine,https://github.com/golang/appengine/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/golang/appengine/master/LICENSE
+google/go-genproto,https://github.com/googleapis/go-genproto/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/googleapis/go-genproto/master/LICENSE
+grpc/grpc-go,https://github.com/grpc/grpc-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/grpc/grpc-go/master/LICENSE
+go-inf/inf,https://github.com/go-inf/inf/blob/master/LICENSE,Other,https://raw.githubusercontent.com/go-inf/inf/master/LICENSE
+go-ini/ini,https://github.com/go-ini/ini/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/go-ini/ini/master/LICENSE
+jcmturner/aescts,https://github.com/jcmturner/aescts/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/aescts/master/LICENSE
+jcmturner/dnsutils,https://github.com/jcmturner/dnsutils/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/dnsutils/master/LICENSE
+jcmturner/gokrb5,https://github.com/jcmturner/gokrb5/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/gokrb5/master/LICENSE
+jcmturner/rpc,https://github.com/jcmturner/rpc/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/rpc/master/LICENSE
+src-d/go-billy,https://github.com/src-d/go-billy/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/src-d/go-billy/master/LICENSE
+src-d/go-git,https://github.com/src-d/go-git/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/src-d/go-git/master/LICENSE
+go-warnings/warnings,https://github.com/go-warnings/warnings/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/go-warnings/warnings/master/LICENSE
+go-yaml/yaml,https://github.com/go-yaml/yaml/blob/v2/LICENSE,Other,https://raw.githubusercontent.com/go-yaml/yaml/v2/LICENSE
+kubernetes/api,https://github.com/kubernetes/api/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/api/master/LICENSE
+kubernetes/apimachinery,https://github.com/kubernetes/apimachinery/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/apimachinery/master/LICENSE
+kubernetes/client-go,https://github.com/kubernetes/client-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/client-go/master/LICENSE
+kubernetes/code-generator,https://github.com/kubernetes/code-generator/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/code-generator/master/LICENSE
+kubernetes/gengo,https://github.com/kubernetes/gengo/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/gengo/master/LICENSE
+kubernetes/klog,https://github.com/kubernetes/klog/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/klog/master/LICENSE
+kubernetes/kube-openapi,https://github.com/kubernetes/kube-openapi/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/kube-openapi/master/LICENSE
+kubernetes/utils,https://github.com/kubernetes/utils/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/utils/master/LICENSE
+kubernetes-sigs/yaml,https://github.com/kubernetes-sigs/yaml/blob/master/LICENSE,Other,https://raw.githubusercontent.com/kubernetes-sigs/yaml/master/LICENSE
diff --git a/third_party/argo/license-intermediate-data/repo.txt b/third_party/argo/license-intermediate-data/repo.txt
new file mode 100644
index 000000000000..b1550113de2a
--- /dev/null
+++ b/third_party/argo/license-intermediate-data/repo.txt
@@ -0,0 +1,100 @@
+argoproj/argo
+GoogleCloudPlatform/gcloud-golang
+census-ecosystem/opencensus-go-exporter-ocagent
+Azure/go-autorest
+Knetic/govaluate
+PuerkitoBio/purell
+PuerkitoBio/urlesc
+argoproj/pkg
+aws/aws-sdk-go
+beorn7/perks
+census-instrumentation/opencensus-proto
+colinmarc/hdfs
+davecgh/go-spew
+dgrijalva/jwt-go
+docker/spdystream
+dustin/go-humanize
+emicklei/go-restful
+emirpasic/gods
+evanphx/json-patch
+go-openapi/jsonpointer
+go-openapi/jsonreference
+go-openapi/spec
+go-openapi/swag
+go-sql-driver/mysql
+gogo/protobuf
+golang/protobuf
+google/gofuzz
+googleapis/gnostic
+gorilla/websocket
+grpc-ecosystem/grpc-gateway
+hashicorp/go-uuid
+hashicorp/golang-lru
+imdario/mergo
+inconshreveable/mousetrap
+jbenet/go-context
+jcmturner/gofork
+jmespath/go-jmespath
+json-iterator/go
+kevinburke/ssh_config
+konsorten/go-windows-terminal-sequences
+lib/pq
+mailru/easyjson
+matttproud/golang_protobuf_extensions
+minio/minio-go
+mitchellh/go-homedir
+mitchellh/go-ps
+modern-go/concurrent
+modern-go/reflect2
+pkg/errors
+pmezard/go-difflib
+prometheus/client_golang
+prometheus/client_model
+prometheus/common
+prometheus/procfs
+sergi/go-diff
+sirupsen/logrus
+spf13/cobra
+spf13/pflag
+src-d/gcfg
+stretchr/objx
+stretchr/testify
+tidwall/gjson
+tidwall/match
+tidwall/pretty
+valyala/bytebufferpool
+valyala/fasttemplate
+xanzy/ssh-agent
+census-instrumentation/opencensus-go
+golang/crypto
+golang/net
+golang/oauth2
+golang/sync
+golang/sys
+golang/text
+golang/time
+golang/tools
+google/google-api-go-client
+golang/appengine
+google/go-genproto
+grpc/grpc-go
+go-inf/inf
+go-ini/ini
+jcmturner/aescts
+jcmturner/dnsutils
+jcmturner/gokrb5
+jcmturner/rpc
+src-d/go-billy
+src-d/go-git
+go-warnings/warnings
+go-yaml/yaml
+kubernetes/api
+kubernetes/apimachinery
+kubernetes/client-go
+kubernetes/code-generator
+kubernetes/gengo
+kubernetes/klog
+kubernetes/kube-openapi
+kubernetes/utils
+kubernetes-sigs/yaml
+upper/db
diff --git a/third_party/cli/README.md b/third_party/cli/README.md
new file mode 100644
index 000000000000..bea8c6bbbfd7
--- /dev/null
+++ b/third_party/cli/README.md
@@ -0,0 +1,47 @@
+# CLI tools to fetch license info
+
+## Why we need this?
+
+When we release third party images (can be considered as redistributing third
+party binary), we should be compliant to their licenses. Not just the library's
+license, also its dependencies and transitive dependencies' licenses.
+
+We need to do the following to be compliant:
+* Put license declarations in the image for all licenses.
+* Mirror source code in the image for code with MPL, EPL, GPL or CDDL licenses.
+
+It's not an easy task to get license of all (transitive) dependencies of a go
+library. Thus, we need these tools to automate this task.
+
+## How to get all dependencies with license and source code?
+
+1. Install CLI tools here: `python setup.py install`
+1. Collect dependencies + transitive dependencies in a go library. Put them together in a text file called `dep.txt`. Format: each line has a library name. The library name should be a valid golang import module name.
+
+    Example ways to get it:
+    * argo uses gopkg for package management. It has a [Gopkg.lock file](https://github.com/argoproj/argo/blob/master/Gopkg.lock)
+    with all of its dependencies and transitive dependencies. All the name fields in this file is what we need. You can run `parse-toml-dep` to parse it.
+    * minio uses [official go modules](https://blog.golang.org/using-go-modules), there's a [go.mod file](https://github.com/minio/minio/blob/master/go.mod) describing its direct dependencies. Run command `go list -m all` to get final versions that will be used in a build for all direct and indirect dependencies, [reference](https://github.com/golang/go/wiki/Modules#daily-workflow). Parse its output to make a file we need.
+
+    Reminder: don't forget to put the library itself into `dep.txt`.
+1. Run `get-github-repo` to resolve github repos of golang imports. Not all
+imports can be figured out by my script, needs manual help for <2% of libraries.
+
+    For a library we cannot resolve, manually put it in `dep-repo-mapping.manual.csv`, so the tool knows how to find its github repo the next time.
+
+    Defaults to read dependencies from `dep.txt` and writes to `repo.txt`.
+1. Run `get-github-license-info` to crawl github license info of these libraries. (Not all repos have github recognizable license, needs manual help for <2% of libraries)
+
+    Defaults to read repos from `repo.txt` and writes to `license-info.csv`. You
+    need to configure github personal access token because it sends a lot of
+    requests to github. Follow instructions in `get-github-license-info -h`.
+
+    For repos that fails to fetch license, it's usually because their github repo
+    doesn't have a github understandable license file. Check its readme and
+    update correct info into `license-info.csv`. (Usually, use its README file which mentions license.)
+1. Edit license info file. Manually check the license file for all repos with a license categorized as "Other" by github. Figure out their true license names.
+1. Run `concatenate-license` to crawl full text license files for all dependencies and concat them into one file.
+
+    Defaults to read license info from `license-info.csv`. Writes to `license.txt`.
+    Put `license.txt` to `third_party/library/license.txt` where it is read when building docker images.
+1. Manually update a list of dependencies that requires source code, put it into `third_party/library/repo-MPL.txt`.
diff --git a/third_party/cli/concatenate_license.py b/third_party/cli/concatenate_license.py
new file mode 100644
index 000000000000..f515d1583326
--- /dev/null
+++ b/third_party/cli/concatenate_license.py
@@ -0,0 +1,84 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import argparse
+import requests
+import sys
+import traceback
+
+parser = argparse.ArgumentParser(
+    description='Generate dependencies json from license.csv file.')
+parser.add_argument(
+    'license_info_file',
+    nargs='?',
+    default='license_info.csv',
+    help=
+    'CSV file with license info fetched from github using get-github-license-info CLI tool. (default: %(default)s)',
+)
+parser.add_argument(
+    '-o',
+    '--output',
+    dest='output_file',
+    nargs='?',
+    default='license.txt',
+    help=
+    'Concatenated license file path this command generates. (default: %(default)s)'
+)
+args = parser.parse_args()
+
+
+def fetch_license_text(download_link):
+    response = requests.get(download_link)
+    assert response.ok, 'Fetching {} failed with {} {}'.format(
+        download_link, response.status_code, response.reason)
+    return response.text
+
+
+def main():
+    with open(args.license_info_file,
+              'r') as license_info_file, open(args.output_file,
+                                              'w') as output_file:
+        repo_failed = []
+        for line in license_info_file:
+            line = line.strip()
+            [repo, license_link, license_name,
+             license_download_link] = line.split(',')
+            try:
+                print('Repo {} has license download link {}'.format(
+                    repo, license_download_link),
+                      file=sys.stderr)
+                license_text = fetch_license_text(license_download_link)
+                print(
+                    '--------------------------------------------------------------------------------',
+                    file=output_file,
+                )
+                print('{}  {}  {}'.format(repo, license_name, license_link),
+                      file=output_file)
+                print(
+                    '--------------------------------------------------------------------------------',
+                    file=output_file,
+                )
+                print(license_text, file=output_file)
+            except Exception as e:
+                print('[failed]', e, file=sys.stderr)
+                traceback.print_exc(file=sys.stderr)
+                repo_failed.append(repo)
+        print('Failed to download license file for {} repos.'.format(
+            len(repo_failed)),
+              file=sys.stderr)
+        for repo in repo_failed:
+            print(repo, file=sys.stderr)
+
+
+main()
diff --git a/third_party/cli/get_github_license_info.py b/third_party/cli/get_github_license_info.py
new file mode 100644
index 000000000000..b174a1330e67
--- /dev/null
+++ b/third_party/cli/get_github_license_info.py
@@ -0,0 +1,107 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import argparse
+import requests
+import sys
+import traceback
+from pathlib import Path
+
+home = str(Path.home())
+parser = argparse.ArgumentParser(
+    description='Get github license info from github APIs.')
+parser.add_argument(
+    'repo_list',
+    nargs='?',
+    default='repo.txt',
+    help=
+    'Github repo list file with one line per github repo. Format: org/repo. (default: %(default)s)',
+)
+parser.add_argument(
+    '-o',
+    '--output',
+    dest='output_file',
+    nargs='?',
+    default='license_info.csv',
+    help=
+    'Output file with one line per github repo. Line format: org/repo,license_html_url,license_name,license_download_url. (default: %(default)s)',
+)
+parser.add_argument(
+    '--github-api-token-file',
+    dest='github_api_token_file',
+    default='{}/.github_api_token'.format(home),
+    help=
+    'You need to create a github personal access token at https://github.com/settings/tokens, because github has very strict limit on anonymous API usage. (default: %(default)s) Format: a text file with one line. "<40 characters string shown when a new personal access token is created>"'
+)
+args = parser.parse_args()
+
+
+def main():
+    token = None
+    try:
+        with open(args.github_api_token_file, 'r') as token_file:
+            token = token_file.read().strip()
+            print('Read github API token from {}, length {}.'.format(
+                args.github_api_token_file, len(token)),
+                  file=sys.stderr)
+    except FileNotFoundError:
+        raise Exception(
+            'Please put a github api token file at {}, or specify a different token file path by --github-api-token-file. Github API token is needed because anonymous API access limit is not enough.'
+            .format(args.github_api_token_file))
+
+    # github personal access token is always 40 characters long
+    assert len(token) == 40
+    # reference: https://developer.github.com/v3/#oauth2-token-sent-in-a-header
+    headers = {'Authorization': 'token {}'.format(token)}
+    with open(args.repo_list,
+              'r') as repo_list_file, open(args.output_file,
+                                           'w') as output_file:
+        repo_succeeded = []
+        repo_failed = []
+        for repo in repo_list_file:
+            repo = repo.strip()
+            print('Fetching license for {}'.format(repo), file=sys.stderr)
+            try:
+                url = 'https://api.github.com/repos/{}/license'.format(repo)
+                response = requests.get(url, headers=headers)
+                if not response.ok:
+                    print('Error response content:\n{}'.format(
+                        response.content),
+                          file=sys.stderr)
+                    raise Exception('fetching {} failed with {} {}'.format(
+                        url, response.status_code, response.reason))
+                data = response.json()
+
+                download_url = data['download_url']
+                license_name = data['license']['name']
+                html_url = data['html_url']
+                print('{},{},{},{}'.format(repo, html_url, license_name,
+                                           download_url),
+                      file=output_file)
+                repo_succeeded.append(repo)
+            except Exception as e:
+                print('[failed]', e, file=sys.stderr)
+                traceback.print_exc(file=sys.stderr)
+                repo_failed.append(repo)
+        print('Fetched github license info, {} succeeded, {} failed.'.format(
+            len(repo_succeeded), len(repo_failed)),
+              file=sys.stderr)
+        if len(repo_failed) > 0:
+            print('The following repos failed:', file=sys.stderr)
+            for repo in repo_failed:
+                print(repo, file=sys.stderr)
+
+
+if __name__ == '__main__':
+    main()
diff --git a/third_party/cli/get_github_repo.py b/third_party/cli/get_github_repo.py
new file mode 100644
index 000000000000..8e42f5d9c1cc
--- /dev/null
+++ b/third_party/cli/get_github_repo.py
@@ -0,0 +1,212 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import argparse
+import requests
+import sys
+import traceback
+from bs4 import BeautifulSoup as Soup
+
+parser = argparse.ArgumentParser(
+    description='Get github repo from go import path.')
+parser.add_argument(
+    'go_dependency_list_file',
+    nargs='?',
+    default='dep.txt',
+    help=
+    'File path of a golang dependency list file, one line has a dependency name. (default: %(default)s)',
+)
+parser.add_argument(
+    '-o',
+    '--output',
+    dest='output_file',
+    nargs='?',
+    default='repo.txt',
+    help=
+    'Output file with one line per resolved github repo. Format: org/repo. (default: %(default)s)',
+)
+parser.add_argument(
+    '--manual-dep-repo-mapping',
+    dest='manual_dep_repo_mapping_file',
+    nargs='?',
+    default='dep_repo.manual.csv',
+    help=
+    'Optional dependency to repo mapping maintained manually for dependencies we cannot automatically resolve. Format: each line has dependency import name and its github repo separated by comma. Like, "upper.io/db.v3,upper/db". Note: github/upper/db is the repo. (default: %(default)s)'
+)
+args = parser.parse_args()
+
+protocol = 'https://'
+godoc_base = 'godoc.org/'
+github_base = 'github.com/'
+gopkg_base = 'gopkg.in/'
+
+
+def github_link_to_repo(repo):
+    '''
+    Removes extra sub folder in github url.
+    '''
+    if len(repo.split('/')) > 2:
+        print('repo {} has subfolder'.format(repo), file=sys.stderr)
+        repo = '/'.join(repo.split('/')[:2])
+    assert len(repo.split(
+        '/')) == 2, 'repo name should be org/repo, but is {}'.format(repo)
+    return repo
+
+
+def get_github_repo(url):
+    '''
+    Tries to resolve github repo from a github url.
+    Returns org/repo format github repo string.
+    '''
+    if url.startswith(protocol):
+        url = url[len(protocol):]
+    if not url.startswith(github_base):
+        raise Exception('Package url is not github: {}'.format(url))
+    github_repo = url[len(github_base):]
+    github_repo = github_link_to_repo(github_repo)
+    if github_repo[-1] == '/':
+        github_repo = github_repo[:-1]
+    return github_repo
+
+
+def fetch_github_uri_from_godoc(url):
+    '''
+    Tries to resolve github repo from godoc website.
+
+    Implementation: Godoc is a standard way for a lot of golang libraries to
+    host its documentation. Godoc page usually has a link on top left with
+    github repo url. This function crawls godoc page for the library and finds
+    the github url there. If the link there isn't a github url, it throws an
+    exception.
+    '''
+    full_url = protocol + godoc_base + url
+    print('fetching godoc {}'.format(full_url), file=sys.stderr)
+    response = requests.get(full_url)
+    assert response.ok, 'it failed with {} {}'.format(response.status_code,
+                                                      response.reason)
+
+    soup = Soup(response.text, features="html.parser")
+    navs = soup.select('#x-projnav')
+    if len(navs) != 1:
+        raise Exception(
+            '#x-projnav should occur exactly once, but {} found for {}'.format(
+                len(navs), url))
+    nav = navs[0]
+    package_name = nav.select_one('span').contents[0]
+    assert package_name == url, 'fetched package name should be the same'
+    link = nav.select_one('a').attrs.get('href')
+    return get_github_repo(link)
+
+
+def fetch_gopkg_uri(url):
+    '''
+    Tries to resolve github repo for gopkg libraries.
+
+    Implementation: gopkg library page has a button with text 'Source code', its
+    url is usually the corresponding github repo. Throws an exception if the url
+    found is not github.
+    '''
+    response = requests.get(protocol + url)
+    assert response.ok, 'fetching {} failed with {} {}'.format(
+        url, response.status_code, response.reason)
+
+    soup = Soup(response.text, features="html.parser")
+
+    def is_source_code_link(link):
+        return link.getText().find('Source Code') >= 0
+
+    source_code_links = list(filter(is_source_code_link, soup.select('a')))
+    assert len(
+        source_code_links) == 1, 'Expect exactly one source code link found'
+
+    link = source_code_links[0].attrs.get('href')
+    return get_github_repo(link)
+
+
+def get_github_repo_for_dep(dep):
+    '''
+    Tries to resolve github repo by three ways:
+    1. fetch gopkg website
+    2. parse from github url
+    3. fetch godoc website
+    '''
+    print('Fetching github uri for {}'.format(dep), file=sys.stderr)
+    repo = None
+    if dep.startswith(gopkg_base):
+        print('Try fetching {} from gopkg'.format(dep), file=sys.stderr)
+        repo = fetch_gopkg_uri(dep)
+    elif dep.startswith(github_base):
+        print('{} is already github'.format(dep), file=sys.stderr)
+        repo = get_github_repo(dep)
+    else:
+        print('Try fetching {} repo from godoc'.format(dep), file=sys.stderr)
+        repo = fetch_github_uri_from_godoc(dep)
+    return repo
+
+
+def main():
+    with open(args.go_dependency_list_file,
+              'r') as dep_file, open(args.output_file, 'w') as output_file:
+        mappings = {}
+        try:
+            with open(args.manual_dep_repo_mapping_file,
+                      'r') as dep_repo_mapping_file:
+                for line in dep_repo_mapping_file:
+                    mapping = line.strip().split(',')
+                    assert len(mapping) == 2
+                    [dep, repo] = mapping
+                    mappings[dep] = repo
+        except:
+            print('ignore manual_dep_repo_mapping_file', file=sys.stderr)
+        deps = [line.strip() for line in dep_file]
+        repo_seen = set()
+        dep_succeeded = []
+        # Dependencies that we couldn't resolve their github repos.
+        dep_failed = []
+        for dep in deps:
+            try:
+                # Get dep's repo from manually maintained mapping first.
+                repo = mappings.get(dep)
+                if repo is not None:
+                    print('repo of {} is already configured to {}'.format(
+                        dep, repo),
+                          file=sys.stderr)
+                else:
+                    # Try to resolve if not found
+                    repo = get_github_repo_for_dep(dep)
+                if repo in repo_seen:
+                    print('repo {} is seen more than once'.format(repo),
+                          file=sys.stderr)
+                else:
+                    repo_seen.add(repo)
+                    print(repo, file=output_file)
+                dep_succeeded.append(dep)
+            except Exception as e:
+                print('[failed]', e, file=sys.stderr)
+                traceback.print_exc(file=sys.stderr)
+                dep_failed.append(dep)
+        print()
+        print(
+            'Successfully resolved github repo for {} dependencies and saved to {}. Failed to resolve {} dependencies.'
+            .format(len(dep_succeeded), args.output_file, len(dep_failed)),
+            file=sys.stderr)
+        if len(dep_failed) > 0:
+            print('We failed to resolve the following dependencies:',
+                  file=sys.stderr)
+            for dep in dep_failed:
+                print(dep, file=sys.stderr)
+
+
+if __name__ == '__main__':
+    main()
diff --git a/third_party/cli/parse_toml_dep.py b/third_party/cli/parse_toml_dep.py
new file mode 100644
index 000000000000..1bc5b0cf978b
--- /dev/null
+++ b/third_party/cli/parse_toml_dep.py
@@ -0,0 +1,52 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import argparse
+import sys
+import toml
+
+parser = argparse.ArgumentParser(
+    description='Parse toml format go dependencies maintained by dep tool.')
+parser.add_argument('dep_lock_path',
+                    nargs='?',
+                    default='Gopkg.lock',
+                    help='Toml format go dependency lock file.')
+parser.add_argument(
+    '-o',
+    '--output',
+    dest='output_file',
+    nargs='?',
+    default='dep.txt',
+    help='Output file with one line per golang library. (default: %(default)s)',
+)
+
+args = parser.parse_args()
+
+
+def main():
+    print('Parsing dependencies from {}'.format(args.dep_lock_path),
+          file=sys.stderr)
+
+    with open(args.output_file, 'w') as output_file:
+        deps = toml.load(args.dep_lock_path)
+        projects = deps.get('projects')
+        dep_names = list(map(lambda p: p.get('name'), projects))
+        for name in dep_names:
+            print(name, file=output_file)
+
+        print('Found {} dependencies'.format(len(projects)), file=sys.stderr)
+
+
+if __name__ == '__main__':
+    main()
diff --git a/third_party/cli/setup.py b/third_party/cli/setup.py
new file mode 100644
index 000000000000..aa24cf4bfb88
--- /dev/null
+++ b/third_party/cli/setup.py
@@ -0,0 +1,42 @@
+# Copyright 2019 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from setuptools import setup
+
+NAME = 'kfp-license-tools'
+VERSION = '0.0.1'
+
+REQUIRES = [
+    'bs4',
+    'requests',
+    'toml',
+]
+
+setup(name=NAME,
+      version=VERSION,
+      description='KubeFlow Pipelines SDK',
+      author='google',
+      install_requires=REQUIRES,
+      packages=[
+          '.',
+      ],
+      python_requires='>=3.5.3',
+      entry_points={
+          'console_scripts': [
+              'get-github-repo = get_github_repo:main',
+              'get-github-license-info = get_github_license_info:main',
+              'concatenate-license = concatenate_license:main',
+              'parse-toml-dep = parse_toml_dep:main',
+          ]
+      })
diff --git a/third_party/minio/license-intermediate-data/dep.txt b/third_party/minio/license-intermediate-data/dep.txt
new file mode 100644
index 000000000000..867aabe60252
--- /dev/null
+++ b/third_party/minio/license-intermediate-data/dep.txt
@@ -0,0 +1,365 @@
+github.com/minio/minio
+cloud.google.com/go
+contrib.go.opencensus.io/exporter/ocagent
+contrib.go.opencensus.io/exporter/stackdriver
+git.apache.org/thrift.git
+github.com/Azure/azure-sdk-for-go
+github.com/Azure/go-ansiterm
+github.com/Azure/go-autorest
+github.com/BurntSushi/toml
+github.com/DataDog/datadog-go
+github.com/DataDog/zstd
+github.com/Jeffail/gabs
+github.com/Microsoft/go-winio
+github.com/NYTimes/gziphandler
+github.com/Nvveen/Gotty
+github.com/SAP/go-hdb
+github.com/SermoDigital/jose
+github.com/Shopify/sarama
+github.com/Shopify/toxiproxy
+github.com/a8m/mark
+github.com/alecthomas/participle
+github.com/alecthomas/template
+github.com/alecthomas/units
+github.com/aliyun/alibaba-cloud-sdk-go
+github.com/aliyun/aliyun-oss-go-sdk
+github.com/anmitsu/go-shlex
+github.com/apache/thrift
+github.com/araddon/gou
+github.com/armon/circbuf
+github.com/armon/go-metrics
+github.com/armon/go-radix
+github.com/asaskevich/govalidator
+github.com/aws/aws-sdk-go
+github.com/baiyubin/aliyun-sts-go-sdk
+github.com/bcicen/jstream
+github.com/beorn7/perks
+github.com/bgentry/speakeasy
+github.com/bitly/go-hostpool
+github.com/bmizerany/assert
+github.com/boombuler/barcode
+github.com/bradfitz/go-smtpd
+github.com/briankassouf/jose
+github.com/cenkalti/backoff
+github.com/census-instrumentation/opencensus-proto
+github.com/centrify/cloud-golang-sdk
+github.com/cheggaaa/pb
+github.com/chrismalek/oktasdk-go
+github.com/circonus-labs/circonus-gometrics
+github.com/circonus-labs/circonusllhist
+github.com/client9/misspell
+github.com/containerd/continuity
+github.com/coredns/coredns
+github.com/coreos/bbolt
+github.com/coreos/etcd
+github.com/coreos/go-oidc
+github.com/coreos/go-semver
+github.com/coreos/go-systemd
+github.com/coreos/pkg
+github.com/dancannon/gorethink
+github.com/davecgh/go-spew
+github.com/denisenkom/go-mssqldb
+github.com/dgrijalva/jwt-go
+github.com/dimchansky/utfbom
+github.com/djherbis/atime
+github.com/dnaeon/go-vcr
+github.com/docker/go-connections
+github.com/docker/go-units
+github.com/duosecurity/duo_api_golang
+github.com/dustin/go-humanize
+github.com/eapache/go-resiliency
+github.com/eapache/go-xerial-snappy
+github.com/eapache/queue
+github.com/eclipse/paho.mqtt.golang
+github.com/elazarl/go-bindata-assetfs
+github.com/fatih/color
+github.com/fatih/structs
+github.com/flynn/go-shlex
+github.com/fortytw2/leaktest
+github.com/fsnotify/fsnotify
+github.com/fullsailor/pkcs7
+github.com/gammazero/deque
+github.com/gammazero/workerpool
+github.com/garyburd/redigo
+github.com/gernest/wow
+github.com/ghodss/yaml
+github.com/gliderlabs/ssh
+github.com/go-errors/errors
+github.com/go-ini/ini
+github.com/go-kit/kit
+github.com/go-ldap/ldap
+github.com/go-logfmt/logfmt
+github.com/go-sql-driver/mysql
+github.com/go-stack/stack
+github.com/go-stomp/stomp
+github.com/go-test/deep
+github.com/gocql/gocql
+github.com/gogo/protobuf
+github.com/golang/glog
+github.com/golang/groupcache
+github.com/golang/lint
+github.com/golang/mock
+github.com/golang/protobuf
+github.com/golang/snappy
+github.com/gomodule/redigo
+github.com/google/btree
+github.com/google/go-cmp
+github.com/google/go-github
+github.com/google/go-querystring
+github.com/google/gofuzz
+github.com/google/martian
+github.com/google/pprof
+github.com/google/uuid
+github.com/googleapis/gax-go
+github.com/googleapis/gax-go/v2
+github.com/gopherjs/gopherjs
+github.com/gorhill/cronexpr
+github.com/gorilla/context
+github.com/gorilla/handlers
+github.com/gorilla/mux
+github.com/gorilla/rpc
+github.com/gorilla/websocket
+github.com/gotestyourself/gotestyourself
+github.com/gregjones/httpcache
+github.com/grpc-ecosystem/go-grpc-middleware
+github.com/grpc-ecosystem/go-grpc-prometheus
+github.com/grpc-ecosystem/grpc-gateway
+github.com/hailocab/go-hostpool
+github.com/hashicorp/consul
+github.com/hashicorp/errwrap
+github.com/hashicorp/go-cleanhttp
+github.com/hashicorp/go-gcp-common
+github.com/hashicorp/go-hclog
+github.com/hashicorp/go-immutable-radix
+github.com/hashicorp/go-memdb
+github.com/hashicorp/go-msgpack
+github.com/hashicorp/go-multierror
+github.com/hashicorp/go-plugin
+github.com/hashicorp/go-retryablehttp
+github.com/hashicorp/go-rootcerts
+github.com/hashicorp/go-sockaddr
+github.com/hashicorp/go-syslog
+github.com/hashicorp/go-uuid
+github.com/hashicorp/go-version
+github.com/hashicorp/go.net
+github.com/hashicorp/golang-lru
+github.com/hashicorp/hcl
+github.com/hashicorp/logutils
+github.com/hashicorp/mdns
+github.com/hashicorp/memberlist
+github.com/hashicorp/nomad
+github.com/hashicorp/raft
+github.com/hashicorp/serf
+github.com/hashicorp/vault
+github.com/hashicorp/vault-plugin-auth-alicloud
+github.com/hashicorp/vault-plugin-auth-azure
+github.com/hashicorp/vault-plugin-auth-centrify
+github.com/hashicorp/vault-plugin-auth-gcp
+github.com/hashicorp/vault-plugin-auth-jwt
+github.com/hashicorp/vault-plugin-auth-kubernetes
+github.com/hashicorp/vault-plugin-secrets-ad
+github.com/hashicorp/vault-plugin-secrets-alicloud
+github.com/hashicorp/vault-plugin-secrets-azure
+github.com/hashicorp/vault-plugin-secrets-gcp
+github.com/hashicorp/vault-plugin-secrets-gcpkms
+github.com/hashicorp/vault-plugin-secrets-kv
+github.com/hashicorp/yamux
+github.com/howeyc/gopass
+github.com/hpcloud/tail
+github.com/inconshreveable/go-update
+github.com/jcmturner/gofork
+github.com/jeffchao/backoff
+github.com/jefferai/jsonx
+github.com/jellevandenhooff/dkim
+github.com/jmespath/go-jmespath
+github.com/jonboulle/clockwork
+github.com/json-iterator/go
+github.com/jstemmer/go-junit-report
+github.com/jtolds/gls
+github.com/julienschmidt/httprouter
+github.com/keybase/go-crypto
+github.com/kisielk/errcheck
+github.com/kisielk/gotool
+github.com/klauspost/compress
+github.com/klauspost/cpuid
+github.com/klauspost/crc32
+github.com/klauspost/pgzip
+github.com/klauspost/readahead
+github.com/klauspost/reedsolomon
+github.com/konsorten/go-windows-terminal-sequences
+github.com/kr/logfmt
+github.com/kr/pretty
+github.com/kr/pty
+github.com/kr/text
+github.com/kurin/blazer
+github.com/lib/pq
+github.com/mailru/easyjson
+github.com/marstr/guid
+github.com/mattbaird/elastigo
+github.com/mattn/go-colorable
+github.com/mattn/go-isatty
+github.com/mattn/go-runewidth
+github.com/matttproud/golang_protobuf_extensions
+github.com/michaelklishin/rabbit-hole
+github.com/miekg/dns
+github.com/minio/blazer
+github.com/minio/cli
+github.com/minio/dsync
+github.com/minio/dsync/v2
+github.com/minio/gokrb5/v7
+github.com/minio/hdfs/v3
+github.com/minio/highwayhash
+github.com/minio/lsync
+github.com/minio/mc
+github.com/minio/minio-go
+github.com/minio/minio-go/v6
+github.com/minio/parquet-go
+github.com/minio/sha256-simd
+github.com/minio/sio
+github.com/mitchellh/cli
+github.com/mitchellh/copystructure
+github.com/mitchellh/go-homedir
+github.com/mitchellh/go-testing-interface
+github.com/mitchellh/go-wordwrap
+github.com/mitchellh/gox
+github.com/mitchellh/hashstructure
+github.com/mitchellh/iochan
+github.com/mitchellh/mapstructure
+github.com/mitchellh/pointerstructure
+github.com/mitchellh/reflectwalk
+github.com/modern-go/concurrent
+github.com/modern-go/reflect2
+github.com/mwitkow/go-conntrack
+github.com/nats-io/gnatsd
+github.com/nats-io/go-nats
+github.com/nats-io/go-nats-streaming
+github.com/nats-io/nats
+github.com/nats-io/nats-server
+github.com/nats-io/nats-streaming-server
+github.com/nats-io/nats.go
+github.com/nats-io/nkeys
+github.com/nats-io/nuid
+github.com/nats-io/stan.go
+github.com/ncw/directio
+github.com/nsqio/go-nsq
+github.com/oklog/run
+github.com/onsi/ginkgo
+github.com/onsi/gomega
+github.com/opencontainers/go-digest
+github.com/opencontainers/image-spec
+github.com/opencontainers/runc
+github.com/opentracing/opentracing-go
+github.com/openzipkin/zipkin-go
+github.com/ory-am/common
+github.com/ory/dockertest
+github.com/pascaldekloe/goe
+github.com/patrickmn/go-cache
+github.com/pborman/getopt
+github.com/pborman/uuid
+github.com/pierrec/lz4
+github.com/pkg/errors
+github.com/pkg/profile
+github.com/pkg/xattr
+github.com/pmezard/go-difflib
+github.com/posener/complete
+github.com/pquerna/cachecontrol
+github.com/pquerna/otp
+github.com/prometheus/client_golang
+github.com/prometheus/client_model
+github.com/prometheus/common
+github.com/prometheus/procfs
+github.com/rcrowley/go-metrics
+github.com/rjeczalik/notify
+github.com/rogpeppe/fastuuid
+github.com/rs/cors
+github.com/ryanuber/columnize
+github.com/ryanuber/go-glob
+github.com/samuel/go-zookeeper
+github.com/satori/go.uuid
+github.com/sean-/seed
+github.com/segmentio/go-prompt
+github.com/sirupsen/logrus
+github.com/skyrings/skyring-common
+github.com/smartystreets/assertions
+github.com/smartystreets/go-aws-auth
+github.com/smartystreets/goconvey
+github.com/soheilhy/cmux
+github.com/spf13/pflag
+github.com/streadway/amqp
+github.com/stretchr/objx
+github.com/stretchr/testify
+github.com/tarm/serial
+github.com/tidwall/gjson
+github.com/tidwall/match
+github.com/tidwall/pretty
+github.com/tidwall/sjson
+github.com/tmc/grpc-websocket-proxy
+github.com/tv42/httpunix
+github.com/ugorji/go
+github.com/ugorji/go/codec
+github.com/valyala/fastjson
+github.com/valyala/tcplisten
+github.com/xiang90/probing
+go.etcd.io/bbolt
+go.opencensus.io
+go.uber.org/atomic
+go.uber.org/multierr
+go.uber.org/zap
+go4.org
+golang.org/x/build
+golang.org/x/crypto
+golang.org/x/exp
+golang.org/x/lint
+golang.org/x/net
+golang.org/x/oauth2
+golang.org/x/perf
+golang.org/x/sync
+golang.org/x/sys
+golang.org/x/text
+golang.org/x/time
+golang.org/x/tools
+google.golang.org/api
+google.golang.org/appengine
+google.golang.org/genproto
+google.golang.org/grpc
+gopkg.in/Shopify/sarama.v1
+gopkg.in/VividCortex/ewma.v1
+gopkg.in/alecthomas/kingpin.v2
+gopkg.in/asn1-ber.v1
+gopkg.in/check.v1
+gopkg.in/cheggaaa/pb.v1
+gopkg.in/cheggaaa/pb.v2
+gopkg.in/fatih/color.v1
+gopkg.in/fatih/pool.v2
+gopkg.in/fsnotify.v1
+gopkg.in/gorethink/gorethink.v4
+gopkg.in/h2non/filetype.v1
+gopkg.in/inf.v0
+gopkg.in/ini.v1
+gopkg.in/jcmturner/aescts.v1
+gopkg.in/jcmturner/dnsutils.v1
+gopkg.in/jcmturner/goidentity.v2
+gopkg.in/jcmturner/goidentity.v3
+gopkg.in/jcmturner/gokrb5.v5
+gopkg.in/jcmturner/rpc.v0
+gopkg.in/jcmturner/rpc.v1
+gopkg.in/ldap.v3
+gopkg.in/mattn/go-colorable.v0
+gopkg.in/mattn/go-isatty.v0
+gopkg.in/mattn/go-runewidth.v0
+gopkg.in/mgo.v2
+gopkg.in/olivere/elastic.v5
+gopkg.in/ory-am/dockertest.v2
+gopkg.in/resty.v1
+gopkg.in/square/go-jose.v2
+gopkg.in/tomb.v1
+gopkg.in/urfave/cli.v1
+gopkg.in/yaml.v2
+gotest.tools
+grpc.go4.org
+honnef.co/go/tools
+k8s.io/api
+k8s.io/apimachinery
+k8s.io/klog
+layeh.com/radius
+sigs.k8s.io/yaml
diff --git a/third_party/minio/license-intermediate-data/dep_repo.manual.csv b/third_party/minio/license-intermediate-data/dep_repo.manual.csv
new file mode 100644
index 000000000000..cf65e81e053c
--- /dev/null
+++ b/third_party/minio/license-intermediate-data/dep_repo.manual.csv
@@ -0,0 +1,3 @@
+git.apache.org/thrift.git,apache/thrift
+honnef.co/go/tools,dominikh/go-tools
+layeh.com/radius,layeh/radius
diff --git a/third_party/minio/license-intermediate-data/license_info.csv b/third_party/minio/license-intermediate-data/license_info.csv
new file mode 100644
index 000000000000..566d0b5a98f1
--- /dev/null
+++ b/third_party/minio/license-intermediate-data/license_info.csv
@@ -0,0 +1,341 @@
+minio/minio,https://github.com/minio/minio/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/minio/master/LICENSE
+GoogleCloudPlatform/gcloud-golang,https://github.com/googleapis/google-cloud-go/blob/master/LICENSE,Other,https://raw.githubusercontent.com/googleapis/google-cloud-go/master/LICENSE
+census-ecosystem/opencensus-go-exporter-ocagent,https://github.com/census-ecosystem/opencensus-go-exporter-ocagent/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/census-ecosystem/opencensus-go-exporter-ocagent/master/LICENSE
+census-ecosystem/opencensus-go-exporter-stackdriver,https://github.com/census-ecosystem/opencensus-go-exporter-stackdriver/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/census-ecosystem/opencensus-go-exporter-stackdriver/master/LICENSE
+apache/thrift,https://github.com/apache/thrift/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/apache/thrift/master/LICENSE
+Azure/azure-sdk-for-go,https://github.com/Azure/azure-sdk-for-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/Azure/azure-sdk-for-go/master/LICENSE
+Azure/go-ansiterm,https://github.com/Azure/go-ansiterm/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/Azure/go-ansiterm/master/LICENSE
+Azure/go-autorest,https://github.com/Azure/go-autorest/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/Azure/go-autorest/master/LICENSE
+BurntSushi/toml,https://github.com/BurntSushi/toml/blob/master/COPYING,MIT License,https://raw.githubusercontent.com/BurntSushi/toml/master/COPYING
+DataDog/datadog-go,https://github.com/DataDog/datadog-go/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/DataDog/datadog-go/master/LICENSE.txt
+DataDog/zstd,https://github.com/DataDog/zstd/blob/1.x/LICENSE,Other,https://raw.githubusercontent.com/DataDog/zstd/1.x/LICENSE
+Jeffail/gabs,https://github.com/Jeffail/gabs/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/Jeffail/gabs/master/LICENSE
+Microsoft/go-winio,https://github.com/microsoft/go-winio/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/microsoft/go-winio/master/LICENSE
+NYTimes/gziphandler,https://github.com/nytimes/gziphandler/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nytimes/gziphandler/master/LICENSE
+Nvveen/Gotty,https://github.com/Nvveen/Gotty/blob/master/LICENSE,Other,https://raw.githubusercontent.com/Nvveen/Gotty/master/LICENSE
+SAP/go-hdb,https://github.com/SAP/go-hdb/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/SAP/go-hdb/master/LICENSE
+SermoDigital/jose,https://github.com/SermoDigital/jose/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/SermoDigital/jose/master/LICENSE
+Shopify/sarama,https://github.com/Shopify/sarama/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/Shopify/sarama/master/LICENSE
+Shopify/toxiproxy,https://github.com/Shopify/toxiproxy/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/Shopify/toxiproxy/master/LICENSE
+a8m/mark,https://github.com/a8m/mark/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/a8m/mark/master/LICENSE
+alecthomas/participle,https://github.com/alecthomas/participle/blob/master/COPYING,MIT License,https://raw.githubusercontent.com/alecthomas/participle/master/COPYING
+alecthomas/template,https://github.com/alecthomas/template/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/alecthomas/template/master/LICENSE
+alecthomas/units,https://github.com/alecthomas/units/blob/master/COPYING,MIT License,https://raw.githubusercontent.com/alecthomas/units/master/COPYING
+aliyun/alibaba-cloud-sdk-go,https://github.com/aliyun/alibaba-cloud-sdk-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/aliyun/alibaba-cloud-sdk-go/master/LICENSE
+anmitsu/go-shlex,https://github.com/anmitsu/go-shlex/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/anmitsu/go-shlex/master/LICENSE
+araddon/gou,https://github.com/araddon/gou/blob/master/LICENSE.md,MIT License,https://raw.githubusercontent.com/araddon/gou/master/LICENSE.md
+armon/circbuf,https://github.com/armon/circbuf/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/armon/circbuf/master/LICENSE
+armon/go-metrics,https://github.com/armon/go-metrics/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/armon/go-metrics/master/LICENSE
+armon/go-radix,https://github.com/armon/go-radix/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/armon/go-radix/master/LICENSE
+asaskevich/govalidator,https://github.com/asaskevich/govalidator/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/asaskevich/govalidator/master/LICENSE
+aws/aws-sdk-go,https://github.com/aws/aws-sdk-go/blob/master/LICENSE.txt,Apache License 2.0,https://raw.githubusercontent.com/aws/aws-sdk-go/master/LICENSE.txt
+baiyubin/aliyun-sts-go-sdk,https://github.com/baiyubin/aliyun-sts-go-sdk/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/baiyubin/aliyun-sts-go-sdk/master/LICENSE
+bcicen/jstream,https://github.com/bcicen/jstream/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/bcicen/jstream/master/LICENSE
+beorn7/perks,https://github.com/beorn7/perks/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/beorn7/perks/master/LICENSE
+bgentry/speakeasy,https://github.com/bgentry/speakeasy/blob/master/LICENSE,Other,https://raw.githubusercontent.com/bgentry/speakeasy/master/LICENSE
+bitly/go-hostpool,https://github.com/bitly/go-hostpool/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/bitly/go-hostpool/master/LICENSE
+boombuler/barcode,https://github.com/boombuler/barcode/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/boombuler/barcode/master/LICENSE
+bradfitz/go-smtpd,https://github.com/bradfitz/go-smtpd/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/bradfitz/go-smtpd/master/LICENSE
+briankassouf/jose,https://github.com/briankassouf/jose/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/briankassouf/jose/master/LICENSE
+cenkalti/backoff,https://github.com/cenkalti/backoff/blob/v3/LICENSE,MIT License,https://raw.githubusercontent.com/cenkalti/backoff/v3/LICENSE
+census-instrumentation/opencensus-proto,https://github.com/census-instrumentation/opencensus-proto/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/census-instrumentation/opencensus-proto/master/LICENSE
+centrify/cloud-golang-sdk,https://github.com/centrify/cloud-golang-sdk/blob/master/LICENSE.md,Other,https://raw.githubusercontent.com/centrify/cloud-golang-sdk/master/LICENSE.md
+cheggaaa/pb,https://github.com/cheggaaa/pb/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/cheggaaa/pb/master/LICENSE
+chrismalek/oktasdk-go,https://github.com/chrismalek/oktasdk-go/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/chrismalek/oktasdk-go/master/LICENSE.txt
+circonus-labs/circonus-gometrics,https://github.com/circonus-labs/circonus-gometrics/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/circonus-labs/circonus-gometrics/master/LICENSE
+circonus-labs/circonusllhist,https://github.com/circonus-labs/circonusllhist/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/circonus-labs/circonusllhist/master/LICENSE
+client9/misspell,https://github.com/client9/misspell/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/client9/misspell/master/LICENSE
+containerd/continuity,https://github.com/containerd/continuity/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/containerd/continuity/master/LICENSE
+coredns/coredns,https://github.com/coredns/coredns/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/coredns/coredns/master/LICENSE
+coreos/bbolt,https://github.com/etcd-io/bbolt/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/etcd-io/bbolt/master/LICENSE
+coreos/etcd,https://github.com/etcd-io/etcd/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/etcd-io/etcd/master/LICENSE
+coreos/go-oidc,https://github.com/coreos/go-oidc/blob/v2/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/coreos/go-oidc/v2/LICENSE
+coreos/go-semver,https://github.com/coreos/go-semver/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/coreos/go-semver/master/LICENSE
+coreos/go-systemd,https://github.com/coreos/go-systemd/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/coreos/go-systemd/master/LICENSE
+coreos/pkg,https://github.com/coreos/pkg/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/coreos/pkg/master/LICENSE
+dancannon/gorethink,https://github.com/rethinkdb/rethinkdb-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/rethinkdb/rethinkdb-go/master/LICENSE
+davecgh/go-spew,https://github.com/davecgh/go-spew/blob/master/LICENSE,ISC License,https://raw.githubusercontent.com/davecgh/go-spew/master/LICENSE
+denisenkom/go-mssqldb,https://github.com/denisenkom/go-mssqldb/blob/master/LICENSE.txt,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/denisenkom/go-mssqldb/master/LICENSE.txt
+dgrijalva/jwt-go,https://github.com/dgrijalva/jwt-go/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/dgrijalva/jwt-go/master/LICENSE
+dimchansky/utfbom,https://github.com/dimchansky/utfbom/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/dimchansky/utfbom/master/LICENSE
+djherbis/atime,https://github.com/djherbis/atime/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/djherbis/atime/master/LICENSE
+dnaeon/go-vcr,https://github.com/dnaeon/go-vcr/blob/master/LICENSE,Other,https://raw.githubusercontent.com/dnaeon/go-vcr/master/LICENSE
+docker/go-connections,https://github.com/docker/go-connections/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/docker/go-connections/master/LICENSE
+docker/go-units,https://github.com/docker/go-units/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/docker/go-units/master/LICENSE
+duosecurity/duo_api_golang,https://github.com/duosecurity/duo_api_golang/blob/master/LICENSE,Other,https://raw.githubusercontent.com/duosecurity/duo_api_golang/master/LICENSE
+dustin/go-humanize,https://github.com/dustin/go-humanize/blob/master/LICENSE,Other,https://raw.githubusercontent.com/dustin/go-humanize/master/LICENSE
+eapache/go-resiliency,https://github.com/eapache/go-resiliency/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/eapache/go-resiliency/master/LICENSE
+eapache/go-xerial-snappy,https://github.com/eapache/go-xerial-snappy/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/eapache/go-xerial-snappy/master/LICENSE
+eapache/queue,https://github.com/eapache/queue/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/eapache/queue/master/LICENSE
+eclipse/paho.mqtt.golang,https://github.com/eclipse/paho.mqtt.golang/blob/master/LICENSE,Eclipse Public License 1.0,https://raw.githubusercontent.com/eclipse/paho.mqtt.golang/master/LICENSE
+elazarl/go-bindata-assetfs,https://github.com/elazarl/go-bindata-assetfs/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/elazarl/go-bindata-assetfs/master/LICENSE
+fatih/color,https://github.com/fatih/color/blob/master/LICENSE.md,MIT License,https://raw.githubusercontent.com/fatih/color/master/LICENSE.md
+fatih/structs,https://github.com/fatih/structs/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/fatih/structs/master/LICENSE
+flynn/go-shlex,https://github.com/flynn-archive/go-shlex/blob/master/COPYING,Apache License 2.0,https://raw.githubusercontent.com/flynn-archive/go-shlex/master/COPYING
+fortytw2/leaktest,https://github.com/fortytw2/leaktest/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/fortytw2/leaktest/master/LICENSE
+fsnotify/fsnotify,https://github.com/fsnotify/fsnotify/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/fsnotify/fsnotify/master/LICENSE
+fullsailor/pkcs7,https://github.com/fullsailor/pkcs7/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/fullsailor/pkcs7/master/LICENSE
+gammazero/deque,https://github.com/gammazero/deque/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/gammazero/deque/master/LICENSE
+gammazero/workerpool,https://github.com/gammazero/workerpool/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/gammazero/workerpool/master/LICENSE
+garyburd/redigo,https://github.com/garyburd/redigo/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/garyburd/redigo/master/LICENSE
+gernest/wow,https://github.com/gernest/wow/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/gernest/wow/master/LICENSE
+ghodss/yaml,https://github.com/ghodss/yaml/blob/master/LICENSE,Other,https://raw.githubusercontent.com/ghodss/yaml/master/LICENSE
+gliderlabs/ssh,https://github.com/gliderlabs/ssh/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/gliderlabs/ssh/master/LICENSE
+go-errors/errors,https://github.com/go-errors/errors/blob/master/LICENSE.MIT,MIT License,https://raw.githubusercontent.com/go-errors/errors/master/LICENSE.MIT
+go-ini/ini,https://github.com/go-ini/ini/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/go-ini/ini/master/LICENSE
+go-kit/kit,https://github.com/go-kit/kit/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/go-kit/kit/master/LICENSE
+go-ldap/ldap,https://github.com/go-ldap/ldap/blob/master/LICENSE,Other,https://raw.githubusercontent.com/go-ldap/ldap/master/LICENSE
+go-logfmt/logfmt,https://github.com/go-logfmt/logfmt/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/go-logfmt/logfmt/master/LICENSE
+go-sql-driver/mysql,https://github.com/go-sql-driver/mysql/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/go-sql-driver/mysql/master/LICENSE
+go-stack/stack,https://github.com/go-stack/stack/blob/master/LICENSE.md,MIT License,https://raw.githubusercontent.com/go-stack/stack/master/LICENSE.md
+go-stomp/stomp,https://github.com/go-stomp/stomp/blob/master/license.txt,Other,https://raw.githubusercontent.com/go-stomp/stomp/master/license.txt
+go-test/deep,https://github.com/go-test/deep/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/go-test/deep/master/LICENSE
+gocql/gocql,https://github.com/gocql/gocql/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/gocql/gocql/master/LICENSE
+gogo/protobuf,https://github.com/gogo/protobuf/blob/master/LICENSE,Other,https://raw.githubusercontent.com/gogo/protobuf/master/LICENSE
+golang/glog,https://github.com/golang/glog/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/golang/glog/master/LICENSE
+golang/groupcache,https://github.com/golang/groupcache/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/golang/groupcache/master/LICENSE
+golang/lint,https://github.com/golang/lint/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/golang/lint/master/LICENSE
+golang/mock,https://github.com/golang/mock/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/golang/mock/master/LICENSE
+golang/protobuf,https://github.com/golang/protobuf/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/golang/protobuf/master/LICENSE
+golang/snappy,https://github.com/golang/snappy/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/golang/snappy/master/LICENSE
+gomodule/redigo,https://github.com/gomodule/redigo/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/gomodule/redigo/master/LICENSE
+google/btree,https://github.com/google/btree/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/google/btree/master/LICENSE
+google/go-cmp,https://github.com/google/go-cmp/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/google/go-cmp/master/LICENSE
+google/go-github,https://github.com/google/go-github/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/google/go-github/master/LICENSE
+google/go-querystring,https://github.com/google/go-querystring/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/google/go-querystring/master/LICENSE
+google/gofuzz,https://github.com/google/gofuzz/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/google/gofuzz/master/LICENSE
+google/martian,https://github.com/google/martian/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/google/martian/master/LICENSE
+google/pprof,https://github.com/google/pprof/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/google/pprof/master/LICENSE
+google/uuid,https://github.com/google/uuid/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/google/uuid/master/LICENSE
+googleapis/gax-go,https://github.com/googleapis/gax-go/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/googleapis/gax-go/master/LICENSE
+gopherjs/gopherjs,https://github.com/gopherjs/gopherjs/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/gopherjs/gopherjs/master/LICENSE
+gorilla/context,https://github.com/gorilla/context/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/gorilla/context/master/LICENSE
+gorilla/handlers,https://github.com/gorilla/handlers/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/gorilla/handlers/master/LICENSE
+gorilla/mux,https://github.com/gorilla/mux/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/gorilla/mux/master/LICENSE
+gorilla/rpc,https://github.com/gorilla/rpc/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/gorilla/rpc/master/LICENSE
+gorilla/websocket,https://github.com/gorilla/websocket/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/gorilla/websocket/master/LICENSE
+gotestyourself/gotestyourself,https://github.com/gotestyourself/gotest.tools/blob/master/LICENSE,Other,https://raw.githubusercontent.com/gotestyourself/gotest.tools/master/LICENSE
+gregjones/httpcache,https://github.com/gregjones/httpcache/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/gregjones/httpcache/master/LICENSE.txt
+grpc-ecosystem/go-grpc-middleware,https://github.com/grpc-ecosystem/go-grpc-middleware/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/grpc-ecosystem/go-grpc-middleware/master/LICENSE
+grpc-ecosystem/go-grpc-prometheus,https://github.com/grpc-ecosystem/go-grpc-prometheus/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/grpc-ecosystem/go-grpc-prometheus/master/LICENSE
+grpc-ecosystem/grpc-gateway,https://github.com/grpc-ecosystem/grpc-gateway/blob/master/LICENSE.txt,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/master/LICENSE.txt
+hailocab/go-hostpool,https://github.com/hailocab/go-hostpool/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/hailocab/go-hostpool/master/LICENSE
+hashicorp/consul,https://github.com/hashicorp/consul/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/consul/master/LICENSE
+hashicorp/errwrap,https://github.com/hashicorp/errwrap/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/errwrap/master/LICENSE
+hashicorp/go-cleanhttp,https://github.com/hashicorp/go-cleanhttp/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-cleanhttp/master/LICENSE
+hashicorp/go-gcp-common,https://github.com/hashicorp/go-gcp-common/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-gcp-common/master/LICENSE
+hashicorp/go-hclog,https://github.com/hashicorp/go-hclog/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/hashicorp/go-hclog/master/LICENSE
+hashicorp/go-immutable-radix,https://github.com/hashicorp/go-immutable-radix/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-immutable-radix/master/LICENSE
+hashicorp/go-memdb,https://github.com/hashicorp/go-memdb/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-memdb/master/LICENSE
+hashicorp/go-msgpack,https://github.com/hashicorp/go-msgpack/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/hashicorp/go-msgpack/master/LICENSE
+hashicorp/go-multierror,https://github.com/hashicorp/go-multierror/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-multierror/master/LICENSE
+hashicorp/go-plugin,https://github.com/hashicorp/go-plugin/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-plugin/master/LICENSE
+hashicorp/go-retryablehttp,https://github.com/hashicorp/go-retryablehttp/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-retryablehttp/master/LICENSE
+hashicorp/go-rootcerts,https://github.com/hashicorp/go-rootcerts/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-rootcerts/master/LICENSE
+hashicorp/go-sockaddr,https://github.com/hashicorp/go-sockaddr/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-sockaddr/master/LICENSE
+hashicorp/go-syslog,https://github.com/hashicorp/go-syslog/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/hashicorp/go-syslog/master/LICENSE
+hashicorp/go-uuid,https://github.com/hashicorp/go-uuid/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-uuid/master/LICENSE
+hashicorp/go-version,https://github.com/hashicorp/go-version/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/go-version/master/LICENSE
+hashicorp/go.net,https://github.com/hashicorp/go.net/blob/master/LICENSE,Other,https://raw.githubusercontent.com/hashicorp/go.net/master/LICENSE
+hashicorp/golang-lru,https://github.com/hashicorp/golang-lru/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/golang-lru/master/LICENSE
+hashicorp/hcl,https://github.com/hashicorp/hcl/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/hcl/master/LICENSE
+hashicorp/logutils,https://github.com/hashicorp/logutils/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/logutils/master/LICENSE
+hashicorp/mdns,https://github.com/hashicorp/mdns/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/hashicorp/mdns/master/LICENSE
+hashicorp/memberlist,https://github.com/hashicorp/memberlist/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/memberlist/master/LICENSE
+hashicorp/nomad,https://github.com/hashicorp/nomad/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/nomad/master/LICENSE
+hashicorp/raft,https://github.com/hashicorp/raft/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/raft/master/LICENSE
+hashicorp/serf,https://github.com/hashicorp/serf/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/serf/master/LICENSE
+hashicorp/vault,https://github.com/hashicorp/vault/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault/master/LICENSE
+hashicorp/vault-plugin-auth-alicloud,https://github.com/hashicorp/vault-plugin-auth-alicloud/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-auth-alicloud/master/LICENSE
+hashicorp/vault-plugin-auth-azure,https://github.com/hashicorp/vault-plugin-auth-azure/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-auth-azure/master/LICENSE
+hashicorp/vault-plugin-auth-centrify,https://github.com/hashicorp/vault-plugin-auth-centrify/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-auth-centrify/master/LICENSE
+hashicorp/vault-plugin-auth-gcp,https://github.com/hashicorp/vault-plugin-auth-gcp/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-auth-gcp/master/LICENSE
+hashicorp/vault-plugin-auth-jwt,https://github.com/hashicorp/vault-plugin-auth-jwt/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-auth-jwt/master/LICENSE
+hashicorp/vault-plugin-auth-kubernetes,https://github.com/hashicorp/vault-plugin-auth-kubernetes/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-auth-kubernetes/master/LICENSE
+hashicorp/vault-plugin-secrets-ad,https://github.com/hashicorp/vault-plugin-secrets-ad/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-secrets-ad/master/LICENSE
+hashicorp/vault-plugin-secrets-alicloud,https://github.com/hashicorp/vault-plugin-secrets-alicloud/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-secrets-alicloud/master/LICENSE
+hashicorp/vault-plugin-secrets-azure,https://github.com/hashicorp/vault-plugin-secrets-azure/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-secrets-azure/master/LICENSE
+hashicorp/vault-plugin-secrets-gcp,https://github.com/hashicorp/vault-plugin-secrets-gcp/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-secrets-gcp/master/LICENSE
+hashicorp/vault-plugin-secrets-gcpkms,https://github.com/hashicorp/vault-plugin-secrets-gcpkms/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-secrets-gcpkms/master/LICENSE
+hashicorp/vault-plugin-secrets-kv,https://github.com/hashicorp/vault-plugin-secrets-kv/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/vault-plugin-secrets-kv/master/LICENSE
+hashicorp/yamux,https://github.com/hashicorp/yamux/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/hashicorp/yamux/master/LICENSE
+howeyc/gopass,https://github.com/howeyc/gopass/blob/master/LICENSE.txt,ISC License,https://raw.githubusercontent.com/howeyc/gopass/master/LICENSE.txt
+hpcloud/tail,https://github.com/hpcloud/tail/blob/master/LICENSE.txt,Other,https://raw.githubusercontent.com/hpcloud/tail/master/LICENSE.txt
+inconshreveable/go-update,https://github.com/inconshreveable/go-update/blob/master/LICENSE,Other,https://raw.githubusercontent.com/inconshreveable/go-update/master/LICENSE
+jcmturner/gofork,https://github.com/jcmturner/gofork/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/jcmturner/gofork/master/LICENSE
+jeffchao/backoff,https://github.com/jeffchao/backoff/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/jeffchao/backoff/master/LICENSE
+jefferai/jsonx,https://github.com/jefferai/jsonx/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/jefferai/jsonx/master/LICENSE
+jellevandenhooff/dkim,https://github.com/jellevandenhooff/dkim/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/jellevandenhooff/dkim/master/LICENSE
+jmespath/go-jmespath,https://github.com/jmespath/go-jmespath/blob/master/LICENSE,Other,https://raw.githubusercontent.com/jmespath/go-jmespath/master/LICENSE
+jonboulle/clockwork,https://github.com/jonboulle/clockwork/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jonboulle/clockwork/master/LICENSE
+json-iterator/go,https://github.com/json-iterator/go/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/json-iterator/go/master/LICENSE
+jstemmer/go-junit-report,https://github.com/jstemmer/go-junit-report/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/jstemmer/go-junit-report/master/LICENSE
+jtolds/gls,https://github.com/jtolds/gls/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/jtolds/gls/master/LICENSE
+julienschmidt/httprouter,https://github.com/julienschmidt/httprouter/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/julienschmidt/httprouter/master/LICENSE
+keybase/go-crypto,https://github.com/keybase/go-crypto/blob/master/LICENSE,Other,https://raw.githubusercontent.com/keybase/go-crypto/master/LICENSE
+kisielk/errcheck,https://github.com/kisielk/errcheck/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/kisielk/errcheck/master/LICENSE
+kisielk/gotool,https://github.com/kisielk/gotool/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/kisielk/gotool/master/LICENSE
+klauspost/compress,https://github.com/klauspost/compress/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/klauspost/compress/master/LICENSE
+klauspost/cpuid,https://github.com/klauspost/cpuid/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/klauspost/cpuid/master/LICENSE
+klauspost/crc32,https://github.com/klauspost/crc32/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/klauspost/crc32/master/LICENSE
+klauspost/pgzip,https://github.com/klauspost/pgzip/blob/master/LICENSE,Other,https://raw.githubusercontent.com/klauspost/pgzip/master/LICENSE
+klauspost/readahead,https://github.com/klauspost/readahead/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/klauspost/readahead/master/LICENSE
+klauspost/reedsolomon,https://github.com/klauspost/reedsolomon/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/klauspost/reedsolomon/master/LICENSE
+konsorten/go-windows-terminal-sequences,https://github.com/konsorten/go-windows-terminal-sequences/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/konsorten/go-windows-terminal-sequences/master/LICENSE
+kr/pretty,https://github.com/kr/pretty/blob/main/License,MIT License,https://raw.githubusercontent.com/kr/pretty/main/License
+kr/pty,https://github.com/kr/pty/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/kr/pty/master/LICENSE
+kr/text,https://github.com/kr/text/blob/main/License,MIT License,https://raw.githubusercontent.com/kr/text/main/License
+kurin/blazer,https://github.com/kurin/blazer/blob/master/LICENSE,Other,https://raw.githubusercontent.com/kurin/blazer/master/LICENSE
+lib/pq,https://github.com/lib/pq/blob/master/LICENSE.md,Other,https://raw.githubusercontent.com/lib/pq/master/LICENSE.md
+mailru/easyjson,https://github.com/mailru/easyjson/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mailru/easyjson/master/LICENSE
+marstr/guid,https://github.com/marstr/guid/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/marstr/guid/master/LICENSE.txt
+mattbaird/elastigo,https://github.com/mattbaird/elastigo/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/mattbaird/elastigo/master/LICENSE
+mattn/go-colorable,https://github.com/mattn/go-colorable/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mattn/go-colorable/master/LICENSE
+mattn/go-isatty,https://github.com/mattn/go-isatty/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mattn/go-isatty/master/LICENSE
+mattn/go-runewidth,https://github.com/mattn/go-runewidth/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mattn/go-runewidth/master/LICENSE
+matttproud/golang_protobuf_extensions,https://github.com/matttproud/golang_protobuf_extensions/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/matttproud/golang_protobuf_extensions/master/LICENSE
+michaelklishin/rabbit-hole,https://github.com/michaelklishin/rabbit-hole/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/michaelklishin/rabbit-hole/master/LICENSE
+miekg/dns,https://github.com/miekg/dns/blob/master/LICENSE,Other,https://raw.githubusercontent.com/miekg/dns/master/LICENSE
+minio/blazer,https://github.com/minio/blazer/blob/master/LICENSE,Other,https://raw.githubusercontent.com/minio/blazer/master/LICENSE
+minio/cli,https://github.com/minio/cli/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/minio/cli/master/LICENSE
+minio/dsync,https://github.com/minio/dsync/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/dsync/master/LICENSE
+minio/gokrb5,https://github.com/minio/gokrb5/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/gokrb5/master/LICENSE
+minio/hdfs,https://github.com/minio/hdfs/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/minio/hdfs/master/LICENSE.txt
+minio/highwayhash,https://github.com/minio/highwayhash/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/minio/highwayhash/master/LICENSE
+minio/mc,https://github.com/minio/mc/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/mc/master/LICENSE
+minio/minio-go,https://github.com/minio/minio-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/minio-go/master/LICENSE
+minio/parquet-go,https://github.com/minio/parquet-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/parquet-go/master/LICENSE
+minio/sha256-simd,https://github.com/minio/sha256-simd/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/sha256-simd/master/LICENSE
+minio/sio,https://github.com/minio/sio/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/minio/sio/master/LICENSE
+mitchellh/cli,https://github.com/mitchellh/cli/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/mitchellh/cli/master/LICENSE
+mitchellh/copystructure,https://github.com/mitchellh/copystructure/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mitchellh/copystructure/master/LICENSE
+mitchellh/go-homedir,https://github.com/mitchellh/go-homedir/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mitchellh/go-homedir/master/LICENSE
+mitchellh/go-testing-interface,https://github.com/mitchellh/go-testing-interface/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mitchellh/go-testing-interface/master/LICENSE
+mitchellh/go-wordwrap,https://github.com/mitchellh/go-wordwrap/blob/master/LICENSE.md,MIT License,https://raw.githubusercontent.com/mitchellh/go-wordwrap/master/LICENSE.md
+mitchellh/gox,https://github.com/mitchellh/gox/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/mitchellh/gox/master/LICENSE
+mitchellh/hashstructure,https://github.com/mitchellh/hashstructure/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mitchellh/hashstructure/master/LICENSE
+mitchellh/iochan,https://github.com/mitchellh/iochan/blob/master/LICENSE.md,MIT License,https://raw.githubusercontent.com/mitchellh/iochan/master/LICENSE.md
+mitchellh/mapstructure,https://github.com/mitchellh/mapstructure/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mitchellh/mapstructure/master/LICENSE
+mitchellh/pointerstructure,https://github.com/mitchellh/pointerstructure/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mitchellh/pointerstructure/master/LICENSE
+mitchellh/reflectwalk,https://github.com/mitchellh/reflectwalk/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/mitchellh/reflectwalk/master/LICENSE
+modern-go/concurrent,https://github.com/modern-go/concurrent/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/modern-go/concurrent/master/LICENSE
+modern-go/reflect2,https://github.com/modern-go/reflect2/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/modern-go/reflect2/master/LICENSE
+mwitkow/go-conntrack,https://github.com/mwitkow/go-conntrack/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/mwitkow/go-conntrack/master/LICENSE
+nats-io/gnatsd,https://github.com/nats-io/nats-server/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/nats-server/master/LICENSE
+nats-io/go-nats,https://github.com/nats-io/go-nats/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/go-nats/master/LICENSE
+nats-io/go-nats-streaming,https://github.com/nats-io/go-nats-streaming/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/go-nats-streaming/master/LICENSE
+nats-io/nats,https://github.com/nats-io/nats.go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/nats.go/master/LICENSE
+nats-io/nats-server,https://github.com/nats-io/nats-server/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/nats-server/master/LICENSE
+nats-io/nats-streaming-server,https://github.com/nats-io/nats-streaming-server/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/nats-streaming-server/master/LICENSE
+nats-io/nats.go,https://github.com/nats-io/nats.go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/nats.go/master/LICENSE
+nats-io/nkeys,https://github.com/nats-io/nkeys/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/nkeys/master/LICENSE
+nats-io/nuid,https://github.com/nats-io/nuid/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/nuid/master/LICENSE
+nats-io/stan.go,https://github.com/nats-io/stan.go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/nats-io/stan.go/master/LICENSE
+ncw/directio,https://github.com/ncw/directio/blob/master/COPYING,MIT License,https://raw.githubusercontent.com/ncw/directio/master/COPYING
+nsqio/go-nsq,https://github.com/nsqio/go-nsq/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/nsqio/go-nsq/master/LICENSE
+oklog/run,https://github.com/oklog/run/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/oklog/run/master/LICENSE
+onsi/ginkgo,https://github.com/onsi/ginkgo/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/onsi/ginkgo/master/LICENSE
+onsi/gomega,https://github.com/onsi/gomega/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/onsi/gomega/master/LICENSE
+opencontainers/go-digest,https://github.com/opencontainers/go-digest/blob/master/LICENSE,Other,https://raw.githubusercontent.com/opencontainers/go-digest/master/LICENSE
+opencontainers/image-spec,https://github.com/opencontainers/image-spec/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/opencontainers/image-spec/master/LICENSE
+opencontainers/runc,https://github.com/opencontainers/runc/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/opencontainers/runc/master/LICENSE
+opentracing/opentracing-go,https://github.com/opentracing/opentracing-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/opentracing/opentracing-go/master/LICENSE
+openzipkin/zipkin-go,https://github.com/openzipkin/zipkin-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/openzipkin/zipkin-go/master/LICENSE
+ory-am/common,https://github.com/ory/common/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/ory/common/master/LICENSE
+ory/dockertest,https://github.com/ory/dockertest/blob/v3/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/ory/dockertest/v3/LICENSE
+pascaldekloe/goe,https://github.com/pascaldekloe/goe/blob/master/LICENSE,Other,https://raw.githubusercontent.com/pascaldekloe/goe/master/LICENSE
+patrickmn/go-cache,https://github.com/patrickmn/go-cache/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/patrickmn/go-cache/master/LICENSE
+pborman/getopt,https://github.com/pborman/getopt/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/pborman/getopt/master/LICENSE
+pborman/uuid,https://github.com/pborman/uuid/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/pborman/uuid/master/LICENSE
+pierrec/lz4,https://github.com/pierrec/lz4/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/pierrec/lz4/master/LICENSE
+pkg/errors,https://github.com/pkg/errors/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/pkg/errors/master/LICENSE
+pkg/profile,https://github.com/pkg/profile/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/pkg/profile/master/LICENSE
+pkg/xattr,https://github.com/pkg/xattr/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/pkg/xattr/master/LICENSE
+pmezard/go-difflib,https://github.com/pmezard/go-difflib/blob/master/LICENSE,Other,https://raw.githubusercontent.com/pmezard/go-difflib/master/LICENSE
+posener/complete,https://github.com/posener/complete/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/posener/complete/master/LICENSE.txt
+pquerna/cachecontrol,https://github.com/pquerna/cachecontrol/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/pquerna/cachecontrol/master/LICENSE
+pquerna/otp,https://github.com/pquerna/otp/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/pquerna/otp/master/LICENSE
+prometheus/client_golang,https://github.com/prometheus/client_golang/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/prometheus/client_golang/master/LICENSE
+prometheus/client_model,https://github.com/prometheus/client_model/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/prometheus/client_model/master/LICENSE
+prometheus/common,https://github.com/prometheus/common/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/prometheus/common/master/LICENSE
+prometheus/procfs,https://github.com/prometheus/procfs/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/prometheus/procfs/master/LICENSE
+rcrowley/go-metrics,https://github.com/rcrowley/go-metrics/blob/master/LICENSE,Other,https://raw.githubusercontent.com/rcrowley/go-metrics/master/LICENSE
+rjeczalik/notify,https://github.com/rjeczalik/notify/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/rjeczalik/notify/master/LICENSE
+rogpeppe/fastuuid,https://github.com/rogpeppe/fastuuid/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/rogpeppe/fastuuid/master/LICENSE
+rs/cors,https://github.com/rs/cors/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/rs/cors/master/LICENSE
+ryanuber/columnize,https://github.com/ryanuber/columnize/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/ryanuber/columnize/master/LICENSE
+ryanuber/go-glob,https://github.com/ryanuber/go-glob/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/ryanuber/go-glob/master/LICENSE
+samuel/go-zookeeper,https://github.com/samuel/go-zookeeper/blob/master/LICENSE,Other,https://raw.githubusercontent.com/samuel/go-zookeeper/master/LICENSE
+satori/go.uuid,https://github.com/satori/go.uuid/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/satori/go.uuid/master/LICENSE
+sean-/seed,https://github.com/sean-/seed/blob/master/LICENSE,Other,https://raw.githubusercontent.com/sean-/seed/master/LICENSE
+sirupsen/logrus,https://github.com/sirupsen/logrus/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/sirupsen/logrus/master/LICENSE
+skyrings/skyring-common,https://github.com/skyrings/skyring-common/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/skyrings/skyring-common/master/LICENSE
+smartystreets/assertions,https://github.com/smartystreets/assertions/blob/master/LICENSE.md,Other,https://raw.githubusercontent.com/smartystreets/assertions/master/LICENSE.md
+smartystreets/go-aws-auth,https://github.com/smartystreets-archives/go-aws-auth/blob/master/LICENSE.md,Other,https://raw.githubusercontent.com/smartystreets-archives/go-aws-auth/master/LICENSE.md
+smartystreets/goconvey,https://github.com/smartystreets/goconvey/blob/master/LICENSE.md,Other,https://raw.githubusercontent.com/smartystreets/goconvey/master/LICENSE.md
+soheilhy/cmux,https://github.com/soheilhy/cmux/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/soheilhy/cmux/master/LICENSE
+spf13/pflag,https://github.com/spf13/pflag/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/spf13/pflag/master/LICENSE
+streadway/amqp,https://github.com/streadway/amqp/blob/master/LICENSE,BSD 2-Clause "Simplified" License,https://raw.githubusercontent.com/streadway/amqp/master/LICENSE
+stretchr/objx,https://github.com/stretchr/objx/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/stretchr/objx/master/LICENSE
+stretchr/testify,https://github.com/stretchr/testify/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/stretchr/testify/master/LICENSE
+tarm/serial,https://github.com/tarm/serial/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/tarm/serial/master/LICENSE
+tidwall/gjson,https://github.com/tidwall/gjson/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tidwall/gjson/master/LICENSE
+tidwall/match,https://github.com/tidwall/match/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tidwall/match/master/LICENSE
+tidwall/pretty,https://github.com/tidwall/pretty/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tidwall/pretty/master/LICENSE
+tidwall/sjson,https://github.com/tidwall/sjson/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tidwall/sjson/master/LICENSE
+tmc/grpc-websocket-proxy,https://github.com/tmc/grpc-websocket-proxy/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tmc/grpc-websocket-proxy/master/LICENSE
+tv42/httpunix,https://github.com/tv42/httpunix/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/tv42/httpunix/master/LICENSE
+ugorji/go,https://github.com/ugorji/go/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/ugorji/go/master/LICENSE
+valyala/fastjson,https://github.com/valyala/fastjson/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/valyala/fastjson/master/LICENSE
+valyala/tcplisten,https://github.com/valyala/tcplisten/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/valyala/tcplisten/master/LICENSE
+xiang90/probing,https://github.com/xiang90/probing/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/xiang90/probing/master/LICENSE
+etcd-io/bbolt,https://github.com/etcd-io/bbolt/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/etcd-io/bbolt/master/LICENSE
+census-instrumentation/opencensus-go,https://github.com/census-instrumentation/opencensus-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/census-instrumentation/opencensus-go/master/LICENSE
+uber-go/atomic,https://github.com/uber-go/atomic/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/uber-go/atomic/master/LICENSE.txt
+uber-go/multierr,https://github.com/uber-go/multierr/blob/master/LICENSE.txt,MIT License,https://raw.githubusercontent.com/uber-go/multierr/master/LICENSE.txt
+uber-go/zap,https://github.com/uber-go/zap/blob/master/LICENSE.txt,Other,https://raw.githubusercontent.com/uber-go/zap/master/LICENSE.txt
+go4org/go4,https://github.com/go4org/go4/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/go4org/go4/master/LICENSE
+golang/build,https://github.com/golang/build/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/build/master/LICENSE
+golang/crypto,https://github.com/golang/crypto/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/crypto/master/LICENSE
+golang/exp,https://github.com/golang/exp/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/exp/master/LICENSE
+golang/net,https://github.com/golang/net/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/net/master/LICENSE
+golang/oauth2,https://github.com/golang/oauth2/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/golang/oauth2/master/LICENSE
+golang/perf,https://github.com/golang/perf/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/perf/master/LICENSE
+golang/sync,https://github.com/golang/sync/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/sync/master/LICENSE
+golang/sys,https://github.com/golang/sys/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/sys/master/LICENSE
+golang/text,https://github.com/golang/text/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/text/master/LICENSE
+golang/time,https://github.com/golang/time/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/time/master/LICENSE
+golang/tools,https://github.com/golang/tools/blob/master/LICENSE,Other,https://raw.githubusercontent.com/golang/tools/master/LICENSE
+google/google-api-go-client,https://github.com/googleapis/google-api-go-client/blob/master/LICENSE,BSD 3-Clause "New" or "Revised" License,https://raw.githubusercontent.com/googleapis/google-api-go-client/master/LICENSE
+golang/appengine,https://github.com/golang/appengine/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/golang/appengine/master/LICENSE
+google/go-genproto,https://github.com/googleapis/go-genproto/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/googleapis/go-genproto/master/LICENSE
+grpc/grpc-go,https://github.com/grpc/grpc-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/grpc/grpc-go/master/LICENSE
+VividCortex/ewma,https://github.com/VividCortex/ewma/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/VividCortex/ewma/master/LICENSE
+alecthomas/kingpin,https://github.com/alecthomas/kingpin/blob/master/COPYING,MIT License,https://raw.githubusercontent.com/alecthomas/kingpin/master/COPYING
+go-asn1-ber/asn1-ber,https://github.com/go-asn1-ber/asn1-ber/blob/master/LICENSE,Other,https://raw.githubusercontent.com/go-asn1-ber/asn1-ber/master/LICENSE
+go-check/check,https://github.com/go-check/check/blob/v1/LICENSE,Other,https://raw.githubusercontent.com/go-check/check/v1/LICENSE
+fatih/pool,https://github.com/fatih/pool/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/fatih/pool/master/LICENSE
+gorethink/gorethink,https://github.com/rethinkdb/rethinkdb-go/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/rethinkdb/rethinkdb-go/master/LICENSE
+h2non/filetype,https://github.com/h2non/filetype/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/h2non/filetype/master/LICENSE
+go-inf/inf,https://github.com/go-inf/inf/blob/master/LICENSE,Other,https://raw.githubusercontent.com/go-inf/inf/master/LICENSE
+jcmturner/aescts,https://github.com/jcmturner/aescts/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/aescts/master/LICENSE
+jcmturner/dnsutils,https://github.com/jcmturner/dnsutils/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/dnsutils/master/LICENSE
+jcmturner/goidentity,https://github.com/jcmturner/goidentity/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/goidentity/master/LICENSE
+jcmturner/gokrb5,https://github.com/jcmturner/gokrb5/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/gokrb5/master/LICENSE
+jcmturner/rpc,https://github.com/jcmturner/rpc/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/jcmturner/rpc/master/LICENSE
+go-mgo/mgo,https://github.com/go-mgo/mgo/blob/v2-unstable/LICENSE,Other,https://raw.githubusercontent.com/go-mgo/mgo/v2-unstable/LICENSE
+olivere/elastic,https://github.com/olivere/elastic/blob/release-branch.v7/LICENSE,MIT License,https://raw.githubusercontent.com/olivere/elastic/release-branch.v7/LICENSE
+ory-am/dockertest,https://github.com/ory/dockertest/blob/v3/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/ory/dockertest/v3/LICENSE
+go-resty/resty,https://github.com/go-resty/resty/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/go-resty/resty/master/LICENSE
+square/go-jose,https://github.com/square/go-jose/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/square/go-jose/master/LICENSE
+go-tomb/tomb,https://github.com/go-tomb/tomb/blob/v1/LICENSE,Other,https://raw.githubusercontent.com/go-tomb/tomb/v1/LICENSE
+urfave/cli,https://github.com/urfave/cli/blob/master/LICENSE,MIT License,https://raw.githubusercontent.com/urfave/cli/master/LICENSE
+go-yaml/yaml,https://github.com/go-yaml/yaml/blob/v2/LICENSE,Other,https://raw.githubusercontent.com/go-yaml/yaml/v2/LICENSE
+gotestyourself/gotest.tools,https://github.com/gotestyourself/gotest.tools/blob/master/LICENSE,Other,https://raw.githubusercontent.com/gotestyourself/gotest.tools/master/LICENSE
+go4org/grpc,https://github.com/go4org/grpc/blob/master/LICENSE,Other,https://raw.githubusercontent.com/go4org/grpc/master/LICENSE
+dominikh/go-tools,https://github.com/dominikh/go-tools/blob/master/LICENSE,Other,https://raw.githubusercontent.com/dominikh/go-tools/master/LICENSE
+kubernetes/api,https://github.com/kubernetes/api/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/api/master/LICENSE
+kubernetes/apimachinery,https://github.com/kubernetes/apimachinery/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/apimachinery/master/LICENSE
+kubernetes/klog,https://github.com/kubernetes/klog/blob/master/LICENSE,Apache License 2.0,https://raw.githubusercontent.com/kubernetes/klog/master/LICENSE
+layeh/radius,https://github.com/layeh/radius/blob/master/LICENSE,Mozilla Public License 2.0,https://raw.githubusercontent.com/layeh/radius/master/LICENSE
+kubernetes-sigs/yaml,https://github.com/kubernetes-sigs/yaml/blob/master/LICENSE,Other,https://raw.githubusercontent.com/kubernetes-sigs/yaml/master/LICENSE
diff --git a/third_party/minio/license-intermediate-data/repo.txt b/third_party/minio/license-intermediate-data/repo.txt
new file mode 100644
index 000000000000..ef589c12f5b0
--- /dev/null
+++ b/third_party/minio/license-intermediate-data/repo.txt
@@ -0,0 +1,347 @@
+minio/minio
+GoogleCloudPlatform/gcloud-golang
+census-ecosystem/opencensus-go-exporter-ocagent
+census-ecosystem/opencensus-go-exporter-stackdriver
+apache/thrift
+Azure/azure-sdk-for-go
+Azure/go-ansiterm
+Azure/go-autorest
+BurntSushi/toml
+DataDog/datadog-go
+DataDog/zstd
+Jeffail/gabs
+Microsoft/go-winio
+NYTimes/gziphandler
+Nvveen/Gotty
+SAP/go-hdb
+SermoDigital/jose
+Shopify/sarama
+Shopify/toxiproxy
+a8m/mark
+alecthomas/participle
+alecthomas/template
+alecthomas/units
+aliyun/alibaba-cloud-sdk-go
+aliyun/aliyun-oss-go-sdk
+anmitsu/go-shlex
+araddon/gou
+armon/circbuf
+armon/go-metrics
+armon/go-radix
+asaskevich/govalidator
+aws/aws-sdk-go
+baiyubin/aliyun-sts-go-sdk
+bcicen/jstream
+beorn7/perks
+bgentry/speakeasy
+bitly/go-hostpool
+bmizerany/assert
+boombuler/barcode
+bradfitz/go-smtpd
+briankassouf/jose
+cenkalti/backoff
+census-instrumentation/opencensus-proto
+centrify/cloud-golang-sdk
+cheggaaa/pb
+chrismalek/oktasdk-go
+circonus-labs/circonus-gometrics
+circonus-labs/circonusllhist
+client9/misspell
+containerd/continuity
+coredns/coredns
+coreos/bbolt
+coreos/etcd
+coreos/go-oidc
+coreos/go-semver
+coreos/go-systemd
+coreos/pkg
+dancannon/gorethink
+davecgh/go-spew
+denisenkom/go-mssqldb
+dgrijalva/jwt-go
+dimchansky/utfbom
+djherbis/atime
+dnaeon/go-vcr
+docker/go-connections
+docker/go-units
+duosecurity/duo_api_golang
+dustin/go-humanize
+eapache/go-resiliency
+eapache/go-xerial-snappy
+eapache/queue
+eclipse/paho.mqtt.golang
+elazarl/go-bindata-assetfs
+fatih/color
+fatih/structs
+flynn/go-shlex
+fortytw2/leaktest
+fsnotify/fsnotify
+fullsailor/pkcs7
+gammazero/deque
+gammazero/workerpool
+garyburd/redigo
+gernest/wow
+ghodss/yaml
+gliderlabs/ssh
+go-errors/errors
+go-ini/ini
+go-kit/kit
+go-ldap/ldap
+go-logfmt/logfmt
+go-sql-driver/mysql
+go-stack/stack
+go-stomp/stomp
+go-test/deep
+gocql/gocql
+gogo/protobuf
+golang/glog
+golang/groupcache
+golang/lint
+golang/mock
+golang/protobuf
+golang/snappy
+gomodule/redigo
+google/btree
+google/go-cmp
+google/go-github
+google/go-querystring
+google/gofuzz
+google/martian
+google/pprof
+google/uuid
+googleapis/gax-go
+gopherjs/gopherjs
+gorhill/cronexpr
+gorilla/context
+gorilla/handlers
+gorilla/mux
+gorilla/rpc
+gorilla/websocket
+gotestyourself/gotestyourself
+gregjones/httpcache
+grpc-ecosystem/go-grpc-middleware
+grpc-ecosystem/go-grpc-prometheus
+grpc-ecosystem/grpc-gateway
+hailocab/go-hostpool
+hashicorp/consul
+hashicorp/errwrap
+hashicorp/go-cleanhttp
+hashicorp/go-gcp-common
+hashicorp/go-hclog
+hashicorp/go-immutable-radix
+hashicorp/go-memdb
+hashicorp/go-msgpack
+hashicorp/go-multierror
+hashicorp/go-plugin
+hashicorp/go-retryablehttp
+hashicorp/go-rootcerts
+hashicorp/go-sockaddr
+hashicorp/go-syslog
+hashicorp/go-uuid
+hashicorp/go-version
+hashicorp/go.net
+hashicorp/golang-lru
+hashicorp/hcl
+hashicorp/logutils
+hashicorp/mdns
+hashicorp/memberlist
+hashicorp/nomad
+hashicorp/raft
+hashicorp/serf
+hashicorp/vault
+hashicorp/vault-plugin-auth-alicloud
+hashicorp/vault-plugin-auth-azure
+hashicorp/vault-plugin-auth-centrify
+hashicorp/vault-plugin-auth-gcp
+hashicorp/vault-plugin-auth-jwt
+hashicorp/vault-plugin-auth-kubernetes
+hashicorp/vault-plugin-secrets-ad
+hashicorp/vault-plugin-secrets-alicloud
+hashicorp/vault-plugin-secrets-azure
+hashicorp/vault-plugin-secrets-gcp
+hashicorp/vault-plugin-secrets-gcpkms
+hashicorp/vault-plugin-secrets-kv
+hashicorp/yamux
+howeyc/gopass
+hpcloud/tail
+inconshreveable/go-update
+jcmturner/gofork
+jeffchao/backoff
+jefferai/jsonx
+jellevandenhooff/dkim
+jmespath/go-jmespath
+jonboulle/clockwork
+json-iterator/go
+jstemmer/go-junit-report
+jtolds/gls
+julienschmidt/httprouter
+keybase/go-crypto
+kisielk/errcheck
+kisielk/gotool
+klauspost/compress
+klauspost/cpuid
+klauspost/crc32
+klauspost/pgzip
+klauspost/readahead
+klauspost/reedsolomon
+konsorten/go-windows-terminal-sequences
+kr/logfmt
+kr/pretty
+kr/pty
+kr/text
+kurin/blazer
+lib/pq
+mailru/easyjson
+marstr/guid
+mattbaird/elastigo
+mattn/go-colorable
+mattn/go-isatty
+mattn/go-runewidth
+matttproud/golang_protobuf_extensions
+michaelklishin/rabbit-hole
+miekg/dns
+minio/blazer
+minio/cli
+minio/dsync
+minio/gokrb5
+minio/hdfs
+minio/highwayhash
+minio/lsync
+minio/mc
+minio/minio-go
+minio/parquet-go
+minio/sha256-simd
+minio/sio
+mitchellh/cli
+mitchellh/copystructure
+mitchellh/go-homedir
+mitchellh/go-testing-interface
+mitchellh/go-wordwrap
+mitchellh/gox
+mitchellh/hashstructure
+mitchellh/iochan
+mitchellh/mapstructure
+mitchellh/pointerstructure
+mitchellh/reflectwalk
+modern-go/concurrent
+modern-go/reflect2
+mwitkow/go-conntrack
+nats-io/gnatsd
+nats-io/go-nats
+nats-io/go-nats-streaming
+nats-io/nats
+nats-io/nats-server
+nats-io/nats-streaming-server
+nats-io/nats.go
+nats-io/nkeys
+nats-io/nuid
+nats-io/stan.go
+ncw/directio
+nsqio/go-nsq
+oklog/run
+onsi/ginkgo
+onsi/gomega
+opencontainers/go-digest
+opencontainers/image-spec
+opencontainers/runc
+opentracing/opentracing-go
+openzipkin/zipkin-go
+ory-am/common
+ory/dockertest
+pascaldekloe/goe
+patrickmn/go-cache
+pborman/getopt
+pborman/uuid
+pierrec/lz4
+pkg/errors
+pkg/profile
+pkg/xattr
+pmezard/go-difflib
+posener/complete
+pquerna/cachecontrol
+pquerna/otp
+prometheus/client_golang
+prometheus/client_model
+prometheus/common
+prometheus/procfs
+rcrowley/go-metrics
+rjeczalik/notify
+rogpeppe/fastuuid
+rs/cors
+ryanuber/columnize
+ryanuber/go-glob
+samuel/go-zookeeper
+satori/go.uuid
+sean-/seed
+segmentio/go-prompt
+sirupsen/logrus
+skyrings/skyring-common
+smartystreets/assertions
+smartystreets/go-aws-auth
+smartystreets/goconvey
+soheilhy/cmux
+spf13/pflag
+streadway/amqp
+stretchr/objx
+stretchr/testify
+tarm/serial
+tidwall/gjson
+tidwall/match
+tidwall/pretty
+tidwall/sjson
+tmc/grpc-websocket-proxy
+tv42/httpunix
+ugorji/go
+valyala/fastjson
+valyala/tcplisten
+xiang90/probing
+etcd-io/bbolt
+census-instrumentation/opencensus-go
+uber-go/atomic
+uber-go/multierr
+uber-go/zap
+go4org/go4
+golang/build
+golang/crypto
+golang/exp
+golang/net
+golang/oauth2
+golang/perf
+golang/sync
+golang/sys
+golang/text
+golang/time
+golang/tools
+google/google-api-go-client
+golang/appengine
+google/go-genproto
+grpc/grpc-go
+VividCortex/ewma
+alecthomas/kingpin
+go-asn1-ber/asn1-ber
+go-check/check
+fatih/pool
+gorethink/gorethink
+h2non/filetype
+go-inf/inf
+jcmturner/aescts
+jcmturner/dnsutils
+jcmturner/goidentity
+jcmturner/gokrb5
+jcmturner/rpc
+go-mgo/mgo
+olivere/elastic
+ory-am/dockertest
+go-resty/resty
+square/go-jose
+go-tomb/tomb
+urfave/cli
+go-yaml/yaml
+gotestyourself/gotest.tools
+go4org/grpc
+dominikh/go-tools
+kubernetes/api
+kubernetes/apimachinery
+kubernetes/klog
+layeh/radius
+kubernetes-sigs/yaml